Event.addEvent(window,"load",prepareImageSwap);

var JSSwapImagePreloader = new Image();
JSSwapImagePreloader.src = "js_images/ani_circle_cream.gif";

function prepareImageSwap(){
	var imageThumbs = document.getElementById("js_image_swap_thumbnails");
	var thumbs = Document.getElementsByClassMatch("JS:ImageSwap",imageThumbs);
	thumbs.each(ImageSwap);
	var nextButtons = Document.getElementsByClassMatch("JS:ShowNextThumbs",imageThumbs);
	nextButtons.each(ImageSwap.nextButton);
}

function ImageSwap(element){
	Event.addEvent(element,"click",ImageSwap.update);	
}

ImageSwap.update = function(evt){
	var element = Event.getTarget(evt);
	Event.preventDefault(evt);
	var currentTag = element.tagName.toLowerCase();
	if(currentTag == "img"){
		element = element.parentNode;
	}
	var imageContainer = document.getElementById("js_swap_image_parent");
	var xPos = Document.getX(imageContainer) + (imageContainer.offsetWidth / 2);
	var yPos = Document.getY(imageContainer) + 100;
	
	//var fadeout = new Tween(imageContainer,"alpha",Regular.easeOut,100,0,0.5);
	var fade = ImageSwap.createFade();
	var fadein = new Tween(fade,"alpha",Regular.easeOut,0,100,0.5);
	
	//var fadeout = new Tween(fade,"alpha",Regular.easeOut,100,0,0.5);
	
	fadein.onMotionFinished = function(){
		ImageSwap.showPreloader(xPos,yPos);
		var selectedContent = Document.getArguments(element,"JS:ImageSwap")[0];
		var contentRequest = new Ajax(selectedContent,"GET",false,ImageSwap.WriteContent);
	}
}

ImageSwap.nextButton = function(element){
	Event.addEvent(element,"click",ImageSwap.showThumbnails);
}

ImageSwap.showThumbnails = function(evt){
	var element = Event.getTarget(evt);
	Event.preventDefault(evt);
	var thumbContainer = document.getElementById("js_image_swap_thumbnails");
	var xPos = Document.getX(thumbContainer) + (thumbContainer.offsetWidth / 2);
	var yPos = Document.getY(thumbContainer) + (thumbContainer.offsetHeight / 2);
	var fadeout = new Tween(thumbContainer,"alpha",Regular.easeOut,100,0,0.5);
	fadeout.onMotionFinished = function(){
		ImageSwap.showPreloader(xPos,yPos);	
		var parameters = Document.getArguments(element,"JS:ShowNextThumbs");
		var filePath = parameters[0];
		var thumbsRequest = new Ajax(filePath,"GET",false,ImageSwap.WriteThumbnails);
	}
}

ImageSwap.WriteThumbnails = function(HTML){
	var thumbContainer = document.getElementById("js_image_swap_thumbnails");
	thumbContainer.innerHTML = HTML;
	prepareImageSwap();
	var fadein = new Tween(thumbContainer,"alpha",Regular.easeOut,1,100,0.5);
	ImageSwap.removePreloader();
}

ImageSwap.WriteContent = function(HTML){
	var contentContainer = document.getElementById("js_swap_image_parent");
	contentContainer.innerHTML = HTML;
	ImageSwap.removePreloader();
	ImageSwap.removeFade();
}
ImageSwap.showPreloader = function(x,y){
	document.getElementsByTagName("body")[0].appendChild(JSSwapImagePreloader);
	JSSwapImagePreloader.style.position = "absolute";
	JSSwapImagePreloader.style.zIndex = "1011";
	JSSwapImagePreloader.setAttribute("id","image_swap_preloader");
	JSSwapImagePreloader.style.left = (x - (JSSwapImagePreloader.offsetWidth / 2)) + "px";
	JSSwapImagePreloader.style.top = (y - (JSSwapImagePreloader.offsetHeight / 2) + 5) + "px";
}
ImageSwap.removePreloader = function(){
	var preloader = document.getElementById("image_swap_preloader");
	preloader.parentNode.removeChild(preloader);
}

ImageSwap.createFade = function(){
	var imageContainer = document.getElementById("js_swap_image_parent");
	var xPos = Document.getX(imageContainer);
	var yPos = Document.getY(imageContainer);
	
	var fade = document.createElement("div");
	fade.setAttribute("id","fade");
	fade.style.top = yPos + "px";
	fade.style.left = xPos + "px";
	fade.style.width = "950px";
	fade.style.height = imageContainer.offsetHeight + "px";
	fade.style.position = "absolute";
	fade.style.zIndex = "1010";
	fade.style.opacity = 0;
	fade.style.filter = "alpha(opacity=0)"; 
	fade.style.backgroundColor = "#EEEEEE";
	document.getElementsByTagName("body")[0].appendChild(fade);
	return fade;
}
ImageSwap.removeFade = function(){
	var fade = document.getElementById("fade");
	var fadeout = new Tween(fade,"alpha",Regular.easeOut,100,0,0.5);
	fadeout.onMotionFinished = function(){
		fade.parentNode.removeChild(fade);
	}
}