// JavaScript Document
var transition_speed = 0.8; // Duration of slide effect (in seconds)
var arrow_vis = { off: 0.0, out: 0.4, over: 0.8 };
var gallery_div = 'images'; // ID of div to create gallery from
var slide_transition = Effect.Transitions.EaseFromTo;

function InitGallery() {
	$$('#' + gallery_div + ' .image').each(function(c){ PositionImage(c); });
	$(gallery_div).parentNode.style.clip = 'rect(0px, 658px, auto, 0px)';
	$(gallery_div).parentNode.style.overflow = 'hidden';
	$(gallery_div).currentImage = $(gallery_div).getElementsBySelector('.image')[0];
	SetupArrows();
	DoArrows();
}

function PositionImage(image) {
	image.imageImg = image.getElementsBySelector('img')[0];
	image.setStyle({ width: image.imageImg.naturalWidth + 82 + 'px' });
	if(image.previous('.image')) {
		prev_image = image.previous('.image');
		image.setStyle({ left: prev_image.offsetLeft + prev_image.offsetWidth + 15 + 'px' });
		image.setStyle({ top: prev_image.offsetTop + 'px' });
		image.setStyle({ position: 'absolute' });
		image.show();
	}
}

function NextImage() {
	if($(gallery_div).currentAction == null) {
		$(gallery_div).currentAction = 'next';
		current_Image = $(gallery_div).currentImage;
		current_Middle = current_Image.offsetLeft + (current_Image.offsetWidth / 2);
		next_Image = current_Image.next('.image');
		next_Middle = next_Image.offsetLeft + (next_Image.offsetWidth / 2);
		offset = next_Middle - current_Middle;
		new Effect.Move($(gallery_div),{ x: - offset, duration: transition_speed, transition:slide_transition, afterFinish: function(e){ $(gallery_div).currentAction = null; } });
		$(gallery_div).currentImage = next_Image;
		DoArrows();
	}
}

function PreviousImage() {
	if($(gallery_div).currentAction == null) {
		$(gallery_div).currentAction = 'previous';
		current_Image = $(gallery_div).currentImage;
		current_Middle = current_Image.offsetLeft + (current_Image.offsetWidth / 2);
		previous_Image = current_Image.previous('.image');
		previous_Middle = previous_Image.offsetLeft + (previous_Image.offsetWidth / 2);
		offset =  current_Middle - previous_Middle;
		new Effect.Move($(gallery_div),{ x: offset, duration: transition_speed, transition:slide_transition, afterFinish: function(e){ $(gallery_div).currentAction = null; } });
		$(gallery_div).currentImage = previous_Image;
		DoArrows();
	}
}

function MouseOver() {
		new Effect.Appear(this,{ to: arrow_vis.over, duration: transition_speed / 2 });
}

function MouseOut() {
		new Effect.Fade(this,{ to: arrow_vis.out, duration: transition_speed / 2 });
}

function SetupArrows() {
	if ($('arrow_left').addEventListener) { //DOM method for binding an event
		$('arrow_left').addEventListener("mouseover", MouseOver, false);
		$('arrow_left').addEventListener("mouseout", MouseOut, false);
		$('arrow_right').addEventListener("mouseover", MouseOver, false);
		$('arrow_right').addEventListener("mouseout", MouseOut, false);
		$('arrow_left').addEventListener("click", PreviousImage, false);
		$('arrow_right').addEventListener("click", NextImage, false);
	}
	else if ($('arrow_left').attachEvent) { //IE exclusive method for binding an event
		$('arrow_left').attachEvent("onmouseover", MouseOver);
		$('arrow_left').attachEvent("onmouseout", MouseOut);
		$('arrow_right').attachEvent("onmouseover", MouseOver);
		$('arrow_right').attachEvent("onmouseout", MouseOut);
		$('arrow_left').attachEvent("onclick", PreviousImage);
		$('arrow_right').attachEvent("onclick", NextImage);
	}
	else if (document.getElementById) { //support older modern browsers
		$('arrow_left').onmouseover=MouseOver;
		$('arrow_left').onmouseout=MouseOut;
		$('arrow_right').onmouseover=MouseOver;
		$('arrow_right').onmouseout=MouseOut;
		$('arrow_left').onclick=PreviousImage;
		$('arrow_right').onclick=NextImage;
	}
}

function DoArrows() {
	thisImage = $(gallery_div).currentImage;
	if(thisImage.previous('.image')) {
		if($(gallery_div).leftOn!=true) { 
			new Effect.Appear($('arrow_left'),{ to: arrow_vis.out, duration: transition_speed });
			$(gallery_div).leftOn=true;
		}
	} else {
		if($(gallery_div).leftOn!=false) { 
			new Effect.Fade($('arrow_left'),{ to: arrow_vis.off, duration: transition_speed });
			$(gallery_div).leftOn=false;
		}
	}
	if(thisImage.next('.image')) {
		if($(gallery_div).rightOn!=true) { 
			new Effect.Appear($('arrow_right'),{ to: arrow_vis.out, duration: transition_speed });
			$(gallery_div).rightOn=true;
		}
	} else {
		if($(gallery_div).rightOn!=false) { 
			new Effect.Fade($('arrow_right'),{ to: arrow_vis.off, duration: transition_speed });
			$(gallery_div).rightOn=false;
		}
	}
}

if (window.addEventListener) //DOM method for binding an event
	window.addEventListener("load", InitGallery, false)
else if (window.attachEvent) //IE exclusive method for binding an event
	window.attachEvent("onload", InitGallery)
else if (document.getElementById) //support older modern browsers
	window.onload=InitGallery