/*

The previewSkins function simply stores some information that will be used by the makeSlideshow function.

This function is triggered when the page loads.
addLoadEvent is required for this.

*/

addLoadEvent(previewSkins);

function previewSkins() {

	if (!document.getElementById) {
		return;
	}
	if (!document.getElementById('skinslist')) {
		return;
	}

	var panel_details = [];
	panel_details.id = 'skinsmontage';
	panel_details.image = 'http://www.lameccanotecnica.com/Immagini/montage.jpg';
	panel_details.width = '150px';
	panel_details.height = '110px';

	var coords = [];
	coords['Arianna Decorazioni'] = [0,0];
	coords['La Meccanotecnica srl'] = [-150,0];
	coords['Arianna Farinelli'] = [0,-110];
	coords['Umbriartigiani'] = [-150,-110];


	var linkholder = 'skinslist';

	makeSlideshow(panel_details,coords,linkholder);

}

addLoadEvent(myWebsites);

function myWebsites() {

	var panel_details = [];
	panel_details.id = 'previewpane';
	panel_details.image = 'http://www.lameccanotecnica.com/Immagini/montage.jpg';
	panel_details.width = '300px';
	panel_details.height = '220px';

	var coords = [];
	coords['Bulletproof Ajax'] = [0,0];
	coords['Principia Gastronomica'] = [0,-240];
	coords['DOM Scripting'] = [0,-480];
	coords['The Session'] = [0,-720];

	var linkholder = 'mysites';

	makeSlideshow(panel_details,coords,linkholder);

}


/*

The makeSlideshow function is triggered by another function (see, for example, the previewSkins function).
This function takes three arguments.
The first argument is an array of information.
The function uses this information to create a <div> and an <img>.
These are then instered into the document.
The second argument is an array of coordinates.
The function uses this information to add onmouseover behaviour to a list of links.
The mouseover behaviour invokes the slideElement function (see below).
The third argument is the link list itself.
If that link list doesn't exist, the function returns false.

*/

function makeSlideshow(details,coords,linkholder) {

	if (!document.getElementById) {
		return;
	}
	if (!document.getElementById(linkholder)) {
		return;
	}

	var pane = document.createElement('div');
	pane.style.width = details.width;
	pane.style.height = details.height;
	pane.style.overflow = 'hidden';
	pane.className = 'screenthumb';

	pane.style.position = 'relative';

	var pic = document.createElement('img');
	pic.setAttribute('id',details.id);
	pic.setAttribute('src',details.image);
	pic.setAttribute('alt','');
	pic.style.border = '0';

	pic.style.position = 'absolute';

	pane.appendChild(pic);

	var linklist = document.getElementById(linkholder);

	linklist.parentNode.insertBefore(pane,linklist);

	var lnks = linklist.getElementsByTagName('a');

	for (var i=0;i<lnks.length;i++) {

		var linktext = lnks[i].childNodes[0].nodeValue;

		if (coords[linktext]) {
	
			lnks[i].elementId = details.id;
			lnks[i].x = coords[linktext][0];
			lnks[i].y = coords[linktext][1];
			lnks[i].sliding = null;
	
			lnks[i].onmouseover = function() {
	
				slideElement(this.elementId,this.x,this.y,6);
	
			};
	
			lnks[i].onfocus = lnks[i].onmouseover;

		}
	}
}

/*

The slideElement function changes the 'left' and 'top' properties of an element.
The function takes four arguments.
The first argument is the ID of the element to be moved.
The second argument is the 'left' position that the element should be moved to.
The third argument is the 'top' position that the element should be moved to.
The fourth argument is the increment.
This determines how much the element moves each time.
For instance, sending 2 as the increment will halve the distance travelled by the element each time.
This function invokes itself (with a delay) until the element has reached the desired coordinates.

If you'd like to use this function yourself, go ahead.
Drop me a line to let me know where I can see it in action:
http://adactio.com/contact/

*/


function slideElement(elementId,x,y,inc) {

	if (!document.getElementById) {
		return;
	}
	if (!document.getElementById(elementId)) {
		return;
	}

	var element = document.getElementById(elementId);

	if (element.sliding) {
		clearTimeout(element.sliding);
	}

	if (!element.style.left) {
		element.style.left = "0px";
	}
	if (!element.style.top) {
		element.style.top = "0px";
	}

	var xpos = parseInt(element.style.left,10);
	var ypos = parseInt(element.style.top,10);

	if (xpos == x && ypos == y) {
		return;
	}

	var dist;

	if (xpos > x) {

		dist = Math.ceil((xpos-x)/inc);
		xpos = xpos - dist;

	}

	if (xpos < x) {

		dist = Math.ceil((x-xpos)/inc);
		xpos = xpos + dist;

	}

	if (ypos > y) {

		dist = Math.ceil((ypos-y)/inc);
		ypos = ypos - dist;

	}

	if (ypos < y) {

		dist = Math.ceil((y-ypos)/inc);
		ypos = ypos + dist;

	}

	element.style.left = xpos+'px';
	element.style.top = ypos+'px';

	element.sliding = setTimeout('slideElement("'+elementId+'",'+x+','+y+','+inc+')',10);

}