var fadeOutStep = .1;
var fadeInStep = .1;
var fadeOutSpeed = 30; //milliseconds between fade out steps
var fadeInSpeed = 10;

var slideShowOn = false;
var slideShowDelay = 5000; //milliseconds to show each image

var fadeTimer;
var loadTimer;
var slideShowTimer = true;

var newImage;

function thumbClicked( text, imageLink, number ){
	//stopSlideShow();
	setNewText( text );
	setNewImage( imageLink, number );
}

function getItemNumber( id )
{
	return parseInt(id.match( /(\d+)/ )[1]);
}

function bigImageLoaded( source )
{
	currBigImage = getBigImage();
         
    //if we're fading right now
    // added in checking if Image.complete is defined to fix safari
	if( fadeTimer || ( typeof(currBigImage.complete) != 'undefined' && !currBigImage.complete) )
	{
	    clearTimeout( loadTimer );
	    loadTimer = setTimeout( 'bigImageLoaded()', 100 )
	}
	else
	{
		clearTimeout( loadTimer );
		fadeInBigImage();
		currBigImage.onLoad = nullFunction;
		currBigImage.onload = nullFunction;
	}
}

function nullFunction()
{
    
}

function setNewImage( file, number )
{
	if( fadeTimer )
		return;
		
	imageDiv = document.getElementById('bigImage');
	
	// add new image
	imageDiv.innerHTML += "<div class='wrapper'><img src=" + file + " id='"+ number +"' onload='bigImageLoaded(this);' /></div>";
	// fade out old image
	fadeOutBigImage();
}

function fadeOutBigImage()
{
	currBigImage = getBigImage();
	
	if( !currBigImage.style.opacity )
			currBigImage.style.opacity = 1;

	if( currBigImage.style.opacity <= 0 )
	{
		document.getElementById('bigImage').removeChild( currBigImage.parentNode );
		clearTimeout( fadeTimer );
		fadeTimer = false;
		return;
	}

	setOpacity( currBigImage, currBigImage.style.opacity - fadeOutStep );
	fadeTimer = setTimeout( 'fadeOutBigImage()', fadeOutSpeed );
}

function fadeInBigImage()
{
	currBigImage = getBigImage();
	
	if( !currBigImage.style.opacity )
	{
		parentWidth = document.getElementById('bigImage').clientWidth - 30; //minus 30 for the border
		parentHeight = document.getElementById('bigImage').clientHeight - 30;	
		parentRatio = parentWidth / parentHeight;
		
		imageRatio = currBigImage.width / currBigImage.height;
		
		//resize to fit width
		if( parentRatio < imageRatio )
		{
			currBigImage.width = parentWidth;
			currBigImage.height = currBigImage.width / imageRatio;
			
			// add extra margin for centering
			currBigImage.style.marginTop = (parentHeight - currBigImage.height)/2 + "px";
		}
		else
		{
			currBigImage.height = parentHeight;
			currBigImage.width = currBigImage.height * imageRatio;
		}
		
		currBigImage.style.opacity = 0;
		currBigImage.parentNode.className = 'showWrapper';
	}

	if( currBigImage.style.opacity >= 1 )
	{
		fadeTimer = false;
		
		if( slideShowOn )
			slideShowTimer = setTimeout( "slideShowNext()", slideShowDelay );
		
		return;
	}

	newOpacity = currBigImage.style.opacity*1 + .1;
	
	setOpacity( currBigImage, newOpacity );
	
	fadeTimer = setTimeout( 'fadeInBigImage()', fadeInSpeed );
}

function setOpacity( element, opacity )
{
	element.style.opacity = opacity*1;
	element.style.filter = "Alpha(Opacity="+ opacity*100 +")";
}

function setNewText( title )
{
	document.getElementById('imageText').innerHTML = title;
}

function getBigImage()
{
	return document.getElementById('bigImage').getElementsByTagName('img')[0];
}

function getNextBigImage()
{
	return document.getElementById('bigImage').getElementsByTagName('img')[1];
}


function getThumbnails()
{
	return document.getElementById('thumbnails').getElementsByTagName('img');
}

window.onresize = function ()
{
	getBigImage().style.opacity = '';
	fadeInBigImage();
}

function slideShowNext( restart )
{
	if( !slideShowOn )
		return;
	
	if( arguments.length > 0 && restart )
		newId= "thumb_0";
	else
		newId = 'thumb_' + (getItemNumber( getBigImage().id ) + 1);

	nextThumb = document.getElementById( newId );
	
	if( !nextThumb )
		nextThumb = document.getElementById( 'thumb_0' );

	nextThumb.onclick();
	//startSlideShow(); //the onclick may have turned off the slideshow
}

function stopSlideShow() {
	clearTimeout( slideShowTimer );
	document.getElementById( 'slideShowToggle' ).className = 'toggleOn';
	slideShowOn = false;
	
	//stop the next loading image
	nextImage = getNextBigImage();
	
	if( nextImage )
		nextImage.parent.removeChild( nextImage );
}

function startSlideShow() {
	slideShowOn = true;
	document.getElementById( 'slideShowToggle' ).className = 'toggleOff';
	slideShowNext( true );
}

function toggleSlideShow() {

	if( slideShowOn )
		stopSlideShow();
	else
		startSlideShow();

}

function goToAlbum( num )
{
	if( num )
		this.location.replace( 'gallery-' + num + '.html' );
}

function openMenu()
{
	obj = document.getElementById( 'albumSelect' );
	obj.className = 'dropped';
}

function closeMenu()
{
	obj = document.getElementById( 'albumSelect' );
	obj.className = '';
}

function toggleMenu()
{
	currClass = document.getElementById( 'albumSelect' ).className;
	
	if( currClass == 'dropped' )
		closeMenu();
	else
		openMenu();
}