// this version has overiden the preloader ypos
var ImageSwapThumbAlpha = 50;
var ImageSwapPreloader = "images/ani_white.gif";
Event.addEvent(window, "load", prepareImageSwaps);

function prepareImageSwaps(){
	var thumbnails = Document.getElementsByClassMatch("JS:ImageSwap");
	thumbnails.each(ImageSwap);
	// cache preloader
	var preloader = new Image();
	preloader.src = ImageSwapPreloader;
}

function ImageSwap(element){	
	var active = (Document.getArguments(element, "JS:ImageSwap")[1]) ? true : false;
	if(! active){
		element.active = false;
		element.style.opacity = "."+(ImageSwapThumbAlpha / 10);
		element.style.filter = "alpha(opacity="+ImageSwapThumbAlpha+")";
	}
	else{
		element.active = true;
	}
	Event.addEvent(element, "click", ImageSwap.update);
	Event.addEvent(element, "mouseover", ImageSwap.fadeOver);
	Event.addEvent(element, "mouseout", ImageSwap.fadeOut);
}
ImageSwap.fadeOver = function(evt){
	Event.preventDefault(evt);
	var element = Event.getTarget(evt);
	element = (element.tagName.toLowerCase() != "a") ? element.parentNode : element;
	if(! element.active){
		var currentAlpha = Document.getOpacity(element);
		var fade = new Tween(element, "alpha", None.easeNone, currentAlpha, 100, 0.1);
	}
}
ImageSwap.fadeOut = function(evt){
	Event.preventDefault(evt);
	var element = Event.getTarget(evt);
	element = (element.tagName.toLowerCase() != "a") ? element.parentNode : element;
	if(! element.active){
		var currentAlpha = Document.getOpacity(element);
		var fade = new Tween(element, "alpha", None.easeNone, currentAlpha, 50, 0.1);
	}
}
ImageSwap.setActives = function(element){
	var initElement = element;
	var parent = null;
	var thumbnails = new Array();
	while(parent == null){
		var thumbnails = Document.getElementsByClassMatch("JS:ImageSwap", element);
		if(thumbnails.length > 0){
			parent = element;
			if(thumbnails.length == 1){
				thumbnails = Document.getElementsByClassMatch("JS:ImageSwap", element.parentNode);
				if(thumbnails.length > 1){
					parent = element.parentNode;
				}
			}
			break;
		}
		element = element.parentNode;
	}
	for(var i = 0; i < thumbnails.length; i ++){
		thumbnails[i].active = false;
		if(thumbnails[i] != initElement){
			var currentAlpha = Document.getOpacity(thumbnails[i]);
			var fade = new Tween(thumbnails[i], "alpha", None.easeNone, currentAlpha, 50, 0.1);
		}
	}
}
ImageSwap.update = function(evt){
	Event.preventDefault(evt);
	var element = Event.getTarget(evt);
	element = (element.tagName.toLowerCase() != "a") ? element.parentNode : element;
	ImageSwap.setActives(element);
	element.active = true;
	var title = element.title;
	var description = element.rel;
	var imageLink = element.href;
	var reference = Document.getArguments(element, "JS:ImageSwap")[0];
	var imageElement = document.getElementById(reference);
	var titleElement = document.getElementById(reference + "_title");
	var descriptionElement = document.getElementById(reference + "_description");
	var fadeout = new Tween(imageElement, "alpha", None.easeNone, 100, 0, 0.3);
	var browser = Browser.getBrowser();
	if(titleElement && descriptionElement){
		if(browser == "internet explorer"){
			/*titleElement.style.visibility = "hidden";
			descriptionElement.style.visibility = "hidden";*/
			titleElement.innerHTML = "&nbsp;";
			descriptionElement.innerHTML = "&nbsp;";
		}
		else{
			var fadeout2 = new Tween(titleElement, "alpha", None.easeNone, 100, 0, 0.3);
			var fadeout3 = new Tween(descriptionElement, "alpha", None.easeNone, 100, 0, 0.3);
		}
	}
	fadeout.onMotionFinished = function(){
		ImageSwap.addPreloader(imageElement);
		var image = new Image();
		Event.addEvent(image, "load", function(evt){
			ImageSwap.removePreloader(imageElement);
			imageElement.src = image.src;
			imageElement.style.width = image.width + "px";
			imageElement.style.height = image.height + "px";
			var fadein = new Tween(imageElement, "alpha", None.easeNone, 0, 100, 0.3);
			if(titleElement && descriptionElement){
				if(browser == "internet explorer"){
					fadein.onMotionFinished = function(){
						titleElement.innerHTML = title;
						descriptionElement.innerHTML = description;
					}
				}
				else{
					titleElement.innerHTML = title;
					descriptionElement.innerHTML = description;
					var fadein2 = new Tween(titleElement, "alpha", None.easeNone, 0, 100, 0.3);
					var fadein3 = new Tween(descriptionElement, "alpha", None.easeNone, 0, 100, 0.3);
				}
			}
		});
		image.src = imageLink;
		// detect lightbox
		ImageSwap.detectLightbox(imageElement, imageLink, title, description);
	}
}
ImageSwap.detectLightbox = function(element, source, title, description){
	var parent = element.parentNode;
	if(parent.className.indexOf("JS:ImageLightBox") > -1){
		source = source.replace("product_images/", "product_images/lrg_");
		parent.href = source;
		parent.title = title;
		parent.rel = description;
	}
}
ImageSwap.addPreloader = function(element){
	var preloader = document.createElement("img");
	preloader.src = ImageSwapPreloader;
	preloader.style.position = "absolute";
	preloader.style.zindex = 1;
	preloader.setAttribute("id","ImageSwapPreloader");
	document.getElementsByTagName("body")[0].appendChild(preloader);
	var xpos = Document.getX(element) + (element.offsetWidth / 2) - (preloader.offsetWidth / 2);
	//var ypos = Document.getY(element) + (element.offsetHeight / 2) - (preloader.offsetHeight / 2);
	var ypos = Document.getY(element) + 100;
	preloader.style.left = xpos + "px";
	preloader.style.top = ypos + "px";
}
ImageSwap.removePreloader = function(){
	var preloader = document.getElementById("ImageSwapPreloader");
	try{
		preloader.parentNode.removeChild(preloader);	
	}
	catch(e){}
}