// This array has to be at least 2 pictures long.
var gallery = new Array();

var selectedIndex = 0;

var displayedPicture = "";
var bufferPicture = "";

//in seconds
var normalPause = 8;
var clickOnPause = 16;

var sliderStartX = 0;
var slideSteps = 0;
var slideXPerThumb = 75;
var slidingFrame = 0;

var targetX = 0;
var perSlide = 0;
var roundingOffset = 0;
var overEventHorizon = false;

var running = false;
var perVis = 0;
var visIncriment = 3;

var switchTimerInterval = 0;
var fadeInTimerInterval = 0;

var slidingFrameFound = false;
var initiated = false;

var imageDiv1 = 0;
var imageDiv2 = 0;
var currentVis = imageDiv1;

function GetZoomFactor () {
	var factor = 1;
		if (document.body.getBoundingClientRect) {
		// rect is only in physical pixel size in IE before version 8 
		var rect = document.body.getBoundingClientRect ();
		var physicalW = rect.right - rect.left;
		var logicalW = document.body.offsetWidth;
		
		// the zoom level is always an integer percent value
		factor = Math.round ((physicalW / logicalW) * 100) / 100;
	}
	return factor;
}


function InitiateSliddingFrame(frameId)
{
	slidingFrame = document.getElementById(frameId);
	if (slidingFrame != null)
	{ 
		slidingFrameFound = true;
		slideSteps = 100 / visIncriment;
		//slideXPerThumb = slidingFrame.scrollWidth * GetZoomFactor();
		slideXPerThumb = slideXPerThumb * GetZoomFactor();
		
		if (slidingFrame.style.marginLeft != "")
		{ 
			slideXPerThumb += parseInt(slidingFrame.style.marginLeft.substring(0, slidingFrame.style.marginLeft.indexOf("px")));
		}
		
		//sliderStartX = (slidingFrame.offsetLeft-0) * GetZoomFactor();
		slidingFrame.style.marginLeft = sliderStartX + "px";
	}
}

function InitiateImageSlider(img1ID, img2ID, galleryImgArray)
{
	gallery = galleryImgArray;
	if (gallery.length > 0)
	{
		displayedPicture = gallery[0];
		document.getElementById(img1ID).src = displayedPicture;
		imageHold1 = img1ID;
		
		bufferPicture = gallery[0];
		document.getElementById(img2ID).src = bufferPicture;
		imageHold2 = img2ID;
		
		currentVis = imageDiv1;
		
		if(navigator.appName == "Microsoft Internet Explorer")
		{
			document.getElementById(imageHold1).style.filter = 'alpha(opacity=' + 100 + ')';
			document.getElementById(imageHold2).style.filter = 'alpha(opacity=' + 0 + ')';
		}
		else
		{
			document.getElementById(imageHold1).style.MozOpacity=(1.0);
			document.getElementById(imageHold2).style.MozOpacity=(0.0);
		}
		initiated = true;
		ShowPictureFor(normalPause);
	}
}

function ShowPictureFor(seconds)
{
	if (initiated)
	{
		var timeInterval = seconds * 1000;
		switchIntervalTimer = setTimeout("SwitchPicture()",timeInterval);
	}
}

function SwitchPicture()
{
	if (!running)
	{
		if (selectedIndex == gallery.length - 1)
		{
			selectedIndex = 0;
			displayedPicture = bufferPicture;
			bufferPicture = gallery[selectedIndex];
		} else
		{
			displayedPicture = bufferPicture;
			bufferPicture = gallery[selectedIndex + 1];
			selectedIndex++;
		}
		
		if (slidingFrameFound)
		{ 	currentML=parseInt(slidingFrame.style.marginLeft.substring(0, slidingFrame.style.marginLeft.indexOf("px")));
			if (selectedIndex == 0)
			{
				targetX = sliderStartX;
			} else {
				targetX = currentML * GetZoomFactor() + slideXPerThumb;
			}
			perSlide = (targetX - currentML * GetZoomFactor()) / slideSteps;
			
		}
		
		if (currentVis == imageDiv1)
		{
			if(navigator.appName == "Microsoft Internet Explorer")
			{
				document.getElementById(imageHold1).style.filter = 'alpha(opacity=' + 100 + ')';
				document.getElementById(imageHold2).style.filter = 'alpha(opacity=' + 0 + ')';
			}
			else
			{
				document.getElementById(imageHold1).style.MozOpacity=(1.0);
				document.getElementById(imageHold2).style.MozOpacity=(0.0);
			}
			document.getElementById(imageHold1).src = displayedPicture;
			document.getElementById(imageHold2).src = bufferPicture;
			fadeInTimerInterval = setInterval("runFadeInOutLoop(imageHold2, imageHold1)",10);
		} else {
			if(navigator.appName == "Microsoft Internet Explorer")
			{
				document.getElementById(imageHold2).style.filter = 'alpha(opacity=' + 100 + ')';
				document.getElementById(imageHold1).style.filter = 'alpha(opacity=' + 0 + ')';
			}
			else
			{
				document.getElementById(imageHold2).style.MozOpacity=(1.0);
				document.getElementById(imageHold1).style.MozOpacity=(0.0);
			}
			document.getElementById(imageHold1).src = bufferPicture;
			document.getElementById(imageHold2).src = displayedPicture;
			fadeInTimerInterval = setInterval("runFadeInOutLoop(imageHold1, imageHold2)",10);
		}
	}
}

//intervalTimer = setInterval("runFadeInOutLoop(divHolder)",20);

function runFadeInOutLoop(ImgActingAsBuffer, ImgActingAsActual) {
	running = true;
	perVis = perVis + visIncriment;
	//perSlide targetX slidingFrame
	
	if (perVis > 100)
	{
		perVis = 100;
	}
	
	if (slidingFrameFound)
	{ 
		//rounding up the perSlide.
		//alert(slidingFrame.style.left);
		var currentLeft = parseInt(slidingFrame.style.marginLeft.substring(0, slidingFrame.style.marginLeft.indexOf("px")));

		if (targetX != currentLeft)
		{ 
			var movement = 0;
			var roundedPerSlide = 0;
			if (perSlide > 0)
				roundedPerSlide = Math.ceil(perSlide);
			else
				roundedPerSlide = Math.floor(perSlide);
			
			movement = currentLeft + roundedPerSlide;

			//if (roundedPerSlide > perSlide)
				//roundingOffset += roundedPerSlide - perSlide;
			//else
				//roundingOffset += perSlide - roundedPerSlide;
				
			//if (roundingOffset >= 1)
			//{
			//	if (perSlide > 0)
			//		movement--;
			//	else
			//		movement++;
			//	roundingOffset--;
			//}
			
			if (roundedPerSlide > 0)
			{
				if (targetX < (currentLeft + roundedPerSlide) && targetX > currentLeft)
				{
					movement = targetX;
				}
			}
			else
			{
				if (targetX > (currentLeft + roundedPerSlide) && targetX < currentLeft)
				{
					movement = targetX;
				}
			}
			slidingFrame.style.marginLeft = movement + "px";
			document.getElementById('test').value=movement;
		}
	}
	
	//double alpha settings, for firefox and for IE.
	if(navigator.appName == "Microsoft Internet Explorer")
	{
		document.getElementById(ImgActingAsActual).style.filter = 'alpha(opacity=' + (100 - perVis) + ')';
		document.getElementById(ImgActingAsBuffer).style.filter = 'alpha(opacity=' + perVis + ')';
	}
	else
	{
		document.getElementById(ImgActingAsActual).style.MozOpacity=((100 - perVis)/100);
		document.getElementById(ImgActingAsBuffer).style.MozOpacity=(perVis/100);
	}
	//if(navigator.appName == "Netscape")
	
	//visual loop, to be edited.
	if (perVis > 99)
	{
		clearInterval(fadeInTimerInterval);
		running = false;
		//reset perVis for next run through
		perVis = 0;
		currentVis = ImgActingAsBuffer;
		ShowPictureFor(normalPause);
	}
}

function clickFade(indexOfImg) {
	if (running)
	{
		clearInterval(fadeInTimerInterval);
		
		running = false;
		perVis = 0;
	} else
	{
		clearTimeout(switchIntervalTimer);
	}
	
	selectedIndex = indexOfImg;
	displayedPicture = gallery[selectedIndex];
	bufferPicture = gallery[selectedIndex];
	
	if (slidingFrameFound)
	{
		targetX = sliderStartX + indexOfImg * slideXPerThumb;
		slidingFrame.style.left = targetX + "px";
	}
	
	document.getElementById(imageHold1).src = displayedPicture;
	document.getElementById(imageHold2).src = bufferPicture;
	
	if (currentVis == imageDiv1)
	{
		if(navigator.appName == "Microsoft Internet Explorer")
		{
			document.getElementById(imageHold1).style.filter = 'alpha(opacity=' + 100 + ')';
			document.getElementById(imageHold2).style.filter = 'alpha(opacity=' + 0 + ')';
		}
		else
		{
			document.getElementById(imageHold1).style.MozOpacity=(1.0);
			document.getElementById(imageHold2).style.MozOpacity=(0.0);
		}
	} else {
		if(navigator.appName == "Microsoft Internet Explorer")
		{
			document.getElementById(imageHold2).style.filter = 'alpha(opacity=' + 100 + ')';
			document.getElementById(imageHold1).style.filter = 'alpha(opacity=' + 0 + ')';
		}
		else
		{
			document.getElementById(imageHold2).style.MozOpacity=(1.0);
			document.getElementById(imageHold1).style.MozOpacity=(0.0);
		}
	}
	
	ShowPictureFor(clickOnPause);
}