/*
Photo Slideshow
by Pierce Mangimelli
May 19, 2009
*/

var loadTimeout;
function loadingSymbol ()
{
	var canvas = document.getElementById("loaderCanvas");
    canvas.width = 100;
    canvas.height = 100;
    if ( ! canvas.getContext )
    {
		loadTimeout = setTimeout( loadingSymbol, 200 );
		return;
	}
	var context = canvas.getContext("2d");
	context.fillStyle = "white";
	context.lineWidth = 4;

	var innerRadius = 25;
	var outerRadius = 48;
	var differenceRadius = outerRadius - innerRadius;
	
	var pieces = 12;
	var divisions = (2 * Math.PI)/( 2 * pieces);
	
	if ( (!context.clearRect) || (!context.beginPath) || (!context.arc) || (!context.closePath) || (!context.fill) )
	{
		loadTimeout = setTimeout( loadingSymbol, 200 );
		return;
	}
	
	var step = 0;
	function stepLoader ()
	{
		if ( step == 12 )
		{
			step = 0;
		}
		context.clearRect( 0, 0, 100, 100 );
		for ( i = 1 ; i <= pieces ; i++ )
		{
			var adjusted = step + i;
			context.beginPath();
			context.arc(50, 50, innerRadius, ( (adjusted * 2) * divisions ), ( (adjusted * 2 + 1) * divisions ), false );
			context.arc(50, 50, innerRadius + ( differenceRadius * i/pieces ), ( ( adjusted * 2 + 1) * divisions ), ( (adjusted * 2) * divisions ), true );
			context.closePath();
			context.globalAlpha = Math.pow( i/pieces, 4 );
			context.fill();
		}
		
		step++;
	}	
	canvas.animation = setInterval( stepLoader, (1000/24) );
}

var currentImage = 0;
var images;
var previousButton;
var nextButton;
var addOnRight = 0;
var addOnLeft = 0;

function positionImages ( contentWidth, contentHeight )
{
    previousButton.style.top = (contentHeight - previousButton.offsetHeight)/2 + "px";
    nextButton.style.top = (contentHeight - nextButton.offsetHeight)/2 + "px";
    
    var i;
    for ( i = 0 ; i < images.length ; i++ )
    {
        images[i].style.top = (contentHeight - images[i].offsetHeight)/2 + "px";
    }

    images[currentImage].style.left = (contentWidth - images[currentImage].offsetWidth)/2 + "px";
	
    for ( i = currentImage + 1 ; i < images.length ; i++ )
    {
        images[i].style.left = images[i-1].offsetLeft + images[i-1].offsetWidth + 20 + "px";
    }
	
    for ( i = currentImage - 1 ; i >= 0 ; i-- )
    {
        images[i].style.left = images[i+1].offsetLeft - images[i].offsetWidth - 20 + "px";
    }
}

function incrementPositions (direction)
{
	if ( images[0].animationID )
	{
		if ( direction == "forward" )
		{
			addOnLeft++;
		}
		else
		{
			addOnRight++;
		}
		clearInterval(images[0].animationID);
	}
	
	var content = document.getElementById("content");
	var contentWidth = content.offsetWidth;
	var contentHeight = content.offsetHeight;
	
    var spaceOnLeft = 0;
    var numberOnLeft = 0;
    var spaceOnRight = 0;
    var numberOnRight = 0;
    if (direction == "forward")
    {
        currentImage++;
        if (currentImage > 0)
        {
            spaceOnLeft = (contentWidth - images[currentImage - 1].offsetWidth) / 2;
            numberOnLeft = 1;
            for ( i = (currentImage - 2) ; spaceOnLeft > 0 && i >= 0 ; i-- )
            {
                numberOnLeft++;
                spaceOnLeft = spaceOnLeft - images[i].offsetWidth;
            }
        }
        spaceOnRight = (contentWidth - images[currentImage].offsetWidth) / 2;
        for ( i = (currentImage + 1); spaceOnRight > 0 && i < images.length ; i++ )
        {
            numberOnRight++;
            spaceOnRight = spaceOnRight - images[i].offsetWidth;
        }
    }
    else
    {
        currentImage--;
        spaceOnLeft = (contentWidth - images[currentImage].offsetWidth) / 2;
        for ( i = (currentImage - 1) ; spaceOnLeft > 0 && i >= 0 ; i-- )
        {
            numberOnLeft++;
            spaceOnLeft = spaceOnLeft - images[i].offsetWidth;
        }
        if (currentImage < (images.length - 1))
        {
            spaceOnRight = (contentWidth - images[currentImage + 1].offsetWidth) / 2;
            numberOnRight = 1;
            for ( i = (currentImage + 2); spaceOnRight > 0 && i < images.length ; i++ )
            {
                numberOnRight++;
                spaceOnRight = spaceOnRight - images[i].offsetWidth;
            }
        }
    }
    
    numberOnLeft = numberOnLeft + addOnLeft;
    numberOnRight = numberOnRight + addOnRight;
    var numberOnEachSide;
    if (numberOnLeft > numberOnRight)
    {
        numberOnEachSide = numberOnLeft;
    }
    else
    {
        numberOnEachSide = numberOnRight;
    }
	
    var firstImage = (currentImage - numberOnEachSide);
    if ( firstImage < 0 )
    {
        firstImage = 0;
    }
    var lastImage = (currentImage + numberOnEachSide);
    if ( lastImage > (images.length - 1) )
    {
        lastImage = (images.length - 1);
    }
	
    var newPositions = new Array();
    var newSizes = new Array();
    var newOpacities = new Array();
	
    newPositions[currentImage] = (contentWidth - images[currentImage].originalWidth)/2;
    newSizes[currentImage] = 1;
    newOpacities[currentImage] = 1;
	
    for ( i = currentImage + 1 ; i <= lastImage ; i++ )
    {
    	if ( i == ( currentImage + 1) )
    	{
        	newPositions[i] = newPositions[i-1] + images[i-1].originalWidth + 20;
    	}
    	else
    	{
        	newPositions[i] = newPositions[i-1] + (images[i-1].originalWidth * 0.5) + 20;
    	}
        newOpacities[i] = 0.1;
        newSizes[i] = 0.5;
    }
	
	for ( i = currentImage - 1 ; i >= firstImage ; i-- )
	{
		newPositions[i] = newPositions[i+1] - 20 - (images[i].originalWidth * 0.5) ;
		newOpacities[i] = 0.1;
		newSizes[i] = 0.5;
	}
	
    var inbetweenPositions = new Array();
    var inbetweenSizes = new Array();
    var inbetweenTops = new Array();
    var inbetweenOpacities = new Array();
	
	var fps;
	var steps;
	if ( navigator.userAgent.search(/mobile/i) >= 0 && navigator.userAgent.search(/safari/i) >= 0 )
	{
		fps = 8;
		steps = 4;
	}
	else
	{
		fps = 24;
	    steps = 12;
	}
	
    for ( i = firstImage ; i <= lastImage ; i++ )
    {
        var initialLeft = images[i].offsetLeft;
        var positionChange = newPositions[i] - initialLeft;
        inbetweenPositions[i] = new Array();
		var initialOpacity;
		if (images[i].currentStyle)
		{
			initialOpacity = parseFloat( images[i].currentStyle.opacity );
		}
		else
		{
			initialOpacity = parseFloat( window.getComputedStyle(images[i], null).opacity );
			initialSize = parseInt ( window.getComputedStyle(images[i], null).width );
		}
		var opacityChange = newOpacities[i] - initialOpacity;
		if (opacityChange != 0)
		{
			inbetweenOpacities[i] = new Array();
		}
		var initialSize = images[i].sizePercentage;
		var sizeChange = newSizes[i] - initialSize;
		if (sizeChange != 0)
		{
			inbetweenSizes[i] = new Array();
			inbetweenTops[i] = new Array();
		}
		var j;
		for ( j = 0 ; j <= steps ; j++ )
		{
			var interpolation = 1 / ( 1 + Math.pow( Math.E, -(j/steps)*12 + 6 ) );
			var opacityInterpolation = Math.sin( (j/steps) * (Math.PI/2) );
			inbetweenPositions[i][j] = initialLeft + (positionChange * interpolation);
			if (inbetweenSizes[i])
			{
				if ( i == currentImage && j == steps )
				{
					inbetweenSizes[i][steps] = 1;
				}
				else
				{
					inbetweenSizes[i][j] = initialSize + (sizeChange * interpolation);
				}
				inbetweenTops[i][j] = ( contentHeight - (images[i].originalHeight * inbetweenSizes[i][j]) )/2;
			}
			if (inbetweenOpacities[i])
			{
				inbetweenOpacities[i][j] = initialOpacity + (opacityChange * interpolation);
			}
		}
	}
	
	var step = 0;
	function stepPositions ()
	{
		if ( step > (steps + 5) )
		{
			addOnLeft = 0;
			addOnRight = 0;
			clearInterval(images[0].animationID);
			images[0].removeAttribute("animationID");
			previousButton.style.backgroundColor = "#b5b5b5";
			nextButton.style.backgroundColor = "#b5b5b5";
   			return;
		}
		
		var k;
		for ( k = firstImage ; k <= lastImage ; k++ )
		{
			if (inbetweenPositions[k][step])
			{
				images[k].style.left = inbetweenPositions[k][step] + "px";
			}
			
			if (inbetweenSizes[k] && inbetweenSizes[k][step])
			{
				images[k].sizePercentage = inbetweenSizes[k][step];
				images[k].style.width = (images[k].originalWidth * images[k].sizePercentage) + "px";
				images[k].style.height = (images[k].originalHeight * images[k].sizePercentage) + "px";
				images[k].style.top = inbetweenTops[k][step] + "px";
			}
			
			if ( k != currentImage && inbetweenOpacities[k] && inbetweenOpacities[k][step])
			{
			 	images[k].style.opacity = inbetweenOpacities[k][step];
				ieOpacity(images[k]);
			}
			else if ( k == currentImage && inbetweenOpacities[k][step - 5])
			{
				images[currentImage].style.opacity = inbetweenOpacities[currentImage][step - 5];
				ieOpacity(images[currentImage]);
			}
		}
		step++;
	}
	
	images[0].animationID = setInterval( stepPositions, (1000/fps) );
}

function ieOpacity ( element )
{
	if ( element.filters )
	{
		if ( element.filters.length > 0 )
		{
			element.filters.item(0).opacity = element.style.opacity * 100;
		}
		else
		{
			element.style.filter = "alpha(opacity=" + (element.style.opacity * 100) + ")";
		}
	}
}

function hideControls ()
{
	if ( previousButton.animationID )
	{
		clearInterval(previousButton.animationID);
	}
	
	var steps = 6;
	var step = 1;
	function fadeControls ()
	{
		if ( step > steps )
		{
			clearInterval(previousButton.animationID);
			previousButton.removeAttribute("animationID");
			return;
		}
		
		var interpolation = Math.sin( (step/steps) * (Math.PI/2) );
		previousButton.style.opacity = 0.8 - (0.8 * interpolation);
		ieOpacity(previousButton);
		nextButton.style.opacity = 0.8 - (0.8 * interpolation);
		ieOpacity(nextButton);
		
		step++;
	}
	
	previousButton.animationID = setInterval( fadeControls, 1000/24 );
}

function showControls ()
{
	if ( previousButton.timeOut )
	{
		clearTimeout(previousButton.timeOut);
		previousButton.removeAttribute("timeOut");
	}
	
	previousButton.style.opacity = 0.8;
	ieOpacity(previousButton);
	nextButton.style.opacity = 0.8;
	ieOpacity(nextButton);	
	
	previousButton.timeOut = setTimeout( hideControls, 1000 );
}

function onControl ()
{
	if ( previousButton.timeOut )
	{
		clearTimeout(previousButton.timeOut);
		previousButton.removeAttribute("timeOut");
	}
	document.body.onmousemove = null;
}

function offControl ()
{
	document.body.onmousemove = showControls;
}

function previousImage ()
{
	this.style.backgroundColor = "white";
	if (currentImage == 1)
	{
		this.style.visibility = "hidden";
	}
	nextButton.style.visibility = "visible";
	
	incrementPositions("backward");
}

function nextImage ()
{
	this.style.backgroundColor = "#fff";
	if (currentImage == (images.length - 2) )
	{
		this.style.visibility = "hidden";
	}
	previousButton.style.visibility = "visible";
	
	incrementPositions("forward");	
}

function resize ()
{
	var windowWidth = document.body.clientWidth;
	var windowHeight = document.body.clientHeight;
    
    var content = document.getElementById("content");
    if (content)
    {
	    content.style.width = windowWidth + "px";
	}
    
    var header = document.getElementById("header");
   	var loader = document.getElementById("loader");
	if ( window.innerWidth )
	{
		loader.style.top = (window.innerHeight - 100)/2 + "px";
		loader.style.left = (window.innerWidth - 100)/2 + "px";
	}
	else
	{
		loader.style.top = (document.documentElement.clientHeight - 100)/2 + "px";
		loader.style.left = (document.documentElement.clientWidth - 100)/2 + "px";
	}
	
	if ( images != null )
	{
		positionImages( content.offsetWidth, content.offsetHeight );
	}
}

function load ()
{
	images = document.getElementsByTagName("img");
	
	// Determine the size of the images.
	var maxWidth = 0;
	var maxHeight = 0;
	var i;
	for ( i = 0 ; i < images.length ; i++ )
	{
		images[i].originalWidth = parseInt( images[i].clientWidth );
		if ( images[i].offsetWidth > maxWidth )
		{
			maxWidth = images[i].offsetWidth;
		}
		images[i].originalHeight = parseInt( images[i].clientHeight);
		if ( images[i].offsetHeight > maxHeight )
		{
			maxHeight = images[i].offsetHeight;
		}
		if ( i == currentImage )
		{
			images[i].sizePercentage = 1.0;
		}
		else
		{
			images[i].sizePercentage = 0.5;
		}
		images[i].style.width = images[i].originalWidth * images[i].sizePercentage + "px";
		images[i].style.height = images[i].originalHeight * images[i].sizePercentage + "px";
	}
	
	// Set the content area's minimum sizes so that scrollbars will appear if the images are cut off.
	var content = document.getElementById("content");
	if ( content.style.minWidth == null )
	{
		content.style.minWidth = maxWidth + "px";
	}
	content.style.minHeight = maxHeight + "px";
	// Set the header's minimum width so that it is centered with the content.
	var header = document.getElementById("header");
	header.style.minWidth = maxWidth + "px";
	
	// Set up the buttons.
    previousButton = document.getElementById("previousButton");
    nextButton = document.getElementById("nextButton");
    
    previousButton.onclick = previousImage;
    nextButton.onclick = nextImage;
    
    
	if ( navigator.userAgent.search(/mobile/i) < 0  )
	{// Not a mobile browser.
		document.body.onmousemove = showControls;
		previousButton.onmouseover = onControl;
		previousButton.onmouseout = offControl;
		nextButton.onmouseover = onControl;
		nextButton.onmouseout = offControl;
	}
    
    // Set the initial opacity for all the images.
 	images[currentImage].style.opacity = 1.0;
	for ( i = 0 ; i < images.length ; i++ )
	{
		ieOpacity(images[i]);
	}

	// Make sure everything is aligned correctly.
    resize();
    
    // Stop the loading animation.
    if ( loadTimeout != null)
    {
    	clearTimeout( loadTimeout );
    }
    var loader = document.getElementById("loaderCanvas");
    if (loader.animation)
    {
    	clearInterval(loader.animation);
    	loader.parentNode.style.visibility = "hidden";
    }
   
	
	// Show the images and next button.
    for ( i = 0 ; i < images.length ; i++ )
    {
        images[i].style.visibility = "visible";
    }
    nextButton.style.visibility = "visible";
}