var CurrentAlternate = 0;
var AlternateCount = 0;
var Timeout = 0;

function DisplayTooltip( e, text )
	{
	var Division = document.getElementById( "tooltip" )
	Division.childNodes[0].nodeValue = text;
	var TheWidth = Division.offsetWidth;
	positionlayer( e, 'tooltip', -(TheWidth/2) );
	showlayer( 'tooltip' );

	return false;
	}

function positionlayer(e,lyr,offset)
{
	var x = document.getElementById(lyr);
	xTemp = e.clientX;
	xTemp += offset;
	yTemp = e.clientY;
	yTemp += 23;
	x.style.top = yTemp + "px";
	x.style.left = xTemp + "px";
}

function showlayer( name ) 
{
	var obj = document.getElementById(name );
	obj.style.visibility = 'visible';
}

function hidelayer()
	{
	var obj = document.getElementById( 'tooltip' );
	obj.style.visibility = 'hidden';
	}

function AlertNodeInfo( node )
{
	var string = "Node Info:  " + node + "   Type: " + node.nodeType + "     ";
	if( node.nodeType == 1 )
		string += "<" + node.tagName + ">    ";
	else if( node.nodeType == 3 )
		string += "\"" +node.nodeValue + "\"    ";
	alert( string );
}

function ShowBigImage( Path, FileOffset )
{
	$URL = "centerimage.php";
	$URL += "?Path=" + Path;
	$URL += "&Offset=" + FileOffset;

	window.open( $URL );
}

function ShowLink( Path )
{
	window.open( Path );
}

function AlternateView( Path, Image, BigImage, BaseIndex, Index, FileOffset, SubImageNumber )
{
	var ChangeImage = document.getElementById( "ChangeImage" );
	var BigClick = document.getElementById( "bigclick" );
	var MovieClick = document.getElementById( "movieclick" );
	var LinkClick = document.getElementById( "linkclick" );
	
	if( ChangeImage == undefined )
		return true;
		
	CurrentAlternate = SubImageNumber;
		
	/*
	 * Set things up so that there is no change until the image
	 * is loaded.
	 */
	FunctionCall = "AlternateView2( \"" + Path + "\",\"" + Image + "\",\"" + BigImage + "\",\"" + BaseIndex + "\",\"" + Index + "\",\"" + FileOffset + "\" );";
	
	ChangeImage.onload = new Function( FunctionCall );

	/*
	 * Change the selection icons to highlight the one that was
	 * just selected even though the image may take a moment to 
	 * be updated.
	 */
	var Counter;
	for( Counter = 0; Counter < 19; ++Counter )
	{
		var MicroImage = document.getElementById( "micro" + Counter );
		if( MicroImage != undefined )
		{
			var UseCounter = Counter;
			if( UseCounter > 18 )
				UseCounter = -1;
			if( Counter == SubImageNumber )
				MicroImage.setAttribute( 'src', "select0.gif" );
			else
				MicroImage.setAttribute( 'src', "micro0.gif" );
/*			if( Counter == SubImageNumber )
				MicroImage.setAttribute( 'src', "select" + ( UseCounter + 1 ) + ".gif" );
			else
				MicroImage.setAttribute( 'src', "micro" + ( UseCounter + 1 ) + ".gif" );*/
		}
	}

	/*
	 * Update the main image element with the new source file.
	 */
	ChangeImage.src = Path + '/' + Image;
	
	return false;
}

function AlternateView2( Path, Image, BigImage, BaseIndex, Index, FileOffset )
{
	var ChangeImage = document.getElementById( "ChangeImage" );
	var BigClick = document.getElementById( "bigclick" );
	var MovieClick = document.getElementById( "movieclick" );
	var LinkClick = document.getElementById( "linkclick" );
	
	if( ChangeImage == undefined )
		return true;
		
	/*
	 * Update the caption elements with the proper data.
	 */
	SetCaptions( document, Index );
	
	BigClickDisplay="none";
	MovieClickDisplay="none";
	LinkClickDisplay="none";
	
	if( BigImage != "" )
	{
		/*
		 * Allow the big image or movie to be display when the main
		 * image is clicked.
		 */
		if( BigImage.toUpperCase().indexOf( ".AVI" ) != -1 ||
			BigImage.toUpperCase().indexOf( ".WMV" ) != -1 ||
			BigImage.toUpperCase().indexOf( ".MOV" ) != -1 )
		{
			FunctionCall = "ShowLink( \"" + BigImage + "\" );";
			MovieClickDisplay="block";
		}
		else if( BigImage.toUpperCase().indexOf( ".HTML" ) != -1  )
		{
			FunctionCall = "ShowLink( \"" + BigImage + "\" );";
			LinkClickDisplay="block";
		}
		else
		{
			FunctionCall = "ShowBigImage( \"" + Path + "\",\"" + Index + "\" );";
			BigClickDisplay="block";
		}
		ChangeImage.onclick = new Function( FunctionCall );
 		ChangeImage.style.cursor="pointer";
	}
	else
	{
		ChangeImage.onclick = null;
		ChangeImage.style.cursor="default";
	}
	BigClick.style.display = BigClickDisplay;
	MovieClick.style.display = MovieClickDisplay;
	LinkClick.style.display = LinkClickDisplay;
	
	return false;
}

function SetCaptions( TheDocument, Index )
{
	/*
	 * Get the caption text from the list of thumbnails and use it to set the
	 * captions on the main image.
	 */
	var UseCaption = TheDocument.getElementById( Index + "." + 1 );
	var ChangeCaption = document.getElementById( "Caption1" );
	if( UseCaption != undefined && ChangeCaption != undefined )
	{
		while ( ChangeCaption.hasChildNodes() ) 
			{ ChangeCaption.removeChild( ChangeCaption.firstChild ); }

		var CaptionClone = UseCaption.cloneNode( true );
		ChangeCaption.appendChild( CaptionClone );
		if( CaptionClone.childNodes.length == 1 && CaptionClone.childNodes[0].nodeValue.match(/^\s+$/) !== null )
			ChangeCaption.style.display = "none";
		else
			ChangeCaption.style.display = "block";
	}
	UseCaption = TheDocument.getElementById( Index + "." + 2 );
	ChangeCaption = document.getElementById( "Caption2" );
	if( UseCaption != undefined && ChangeCaption != undefined )
	{
		while ( ChangeCaption.hasChildNodes() ) 
			{ ChangeCaption.removeChild( ChangeCaption.firstChild ); }

		var CaptionClone = UseCaption.cloneNode( true );
		ChangeCaption.appendChild( CaptionClone );
		if( CaptionClone.childNodes.length == 1 && CaptionClone.childNodes[0].nodeValue.match(/^\s+$/) !== null )
			ChangeCaption.style.display = "none";
		else
			ChangeCaption.style.display = "block";
	}
	UseCaption = TheDocument.getElementById( Index + "." + 3 );
	ChangeCaption = document.getElementById( "Caption3" );
	if( UseCaption != undefined && ChangeCaption != undefined )
	{
		while ( ChangeCaption.hasChildNodes() ) 
			{ ChangeCaption.removeChild( ChangeCaption.firstChild ); }

		var CaptionClone = UseCaption.cloneNode( true );
		ChangeCaption.appendChild( CaptionClone );
	}
}

function DisplayPicture( Path, FileOffset, Index, ViewsArray )
{
	/*
	 * Display the main picture for the thumbnail that was selected.
	 */
	 
	if( ViewsArray != undefined && ViewsArray.length < 2 )
		return;

	var AlternatesClick = document.getElementById( "alternatesclick" );
	var Alternates = document.getElementById( "alternates" );
	
	if( AlternatesClick == undefined ||
		Alternates == undefined )
		return true;
		
	/*
	 * Remove any existing caption by removing all children.
	 * Also remove all alternate images icons.
	 */
	while ( Alternates.hasChildNodes() ) 
		{ Alternates.removeChild( Alternates.firstChild ); }
		
	if( ViewsArray != undefined && ViewsArray.length > 2 )
	{
		//Break = document.createElement( 'br' );
		//Alternates.appendChild( Break );
		CurrentAlternate = 0;
		AlternateCount = ViewsArray.length / 2;
		
		var item = 0;
		var counter;
		for( counter = 0; counter < ViewsArray.length; counter += 2, ++item )
		{
			var ImageElement = document.createElement( 'img' );
			FunctionCall = "AlternateView( \"" + Path + "\",\"" + ViewsArray[counter] + "\",\"" + ViewsArray[counter+1] + "\",\"" 
									       + Index + "\",\"" + ( Index + item ) + "\",\"" + FileOffset + "\",\"" + item + "\" );";
			ImageElement.onclick = new Function( FunctionCall );
			
			ImageElement.setAttribute( "id", "micro" + item );

			/*
			 * The image is only set here to this single image because the code
			 * later that displays the picture also changes all of the icons
			 * to show which one is selected. There is no need to do that here.
			 */				
			ImageElement.setAttribute( 'src', "micro0.gif" );

			ImageElement.className = 'thumbnail2';
			ImageElement.style.cursor="pointer";

			Alternates.appendChild( ImageElement );
		}
		//AlternatesClick.style.display = "block";
		AlternatesClick.style.display = "none";
	}
	else
		AlternatesClick.style.display = "none";

	AlternateView( Path, ViewsArray[0], ViewsArray[1], Index, Index, FileOffset, 0 );

	return false;
}

function fireClickEvent( control )
{ 
    if (document.all) 
    { 
        control.fireEvent("onclick"); 
    } 
    else 
    { 
        var clickEvent = window.document.createEvent("MouseEvent"); 
        clickEvent.initEvent("click", false, true); 
        control.dispatchEvent(clickEvent); 
    }
}

function ShowNextAlternate()
{
	if( AlternateCount == 0 )
		return;
		
	var Next = CurrentAlternate;
	Next++;
	if( Next >= AlternateCount )
		Next = 0;

	var Element = document.getElementById( "micro" + Next );
	
	fireClickEvent( Element );

	Timeout = window.setTimeout( 'ShowNextAlternate()', 8000 );
}

function PageInit()
{
	AutoClick();
}

function HandleImageLoad( event, selection )
{
	UpdatePreviewCanvas( event, selection );
}

function HandleFileEvent( event, selection )
{
	var img = new Image; 
	img.onload = function( event ) { UpdatePreviewCanvas( event, img, selection ) }
	img.src = event.target.result;
}

function ShowImagePreview( object, selection )
{
	if( typeof object.files === "undefined" )
		return;
		
	var files = object.files;
	
	if( !( window.File && window.FileReader && window.FileList && window.Blob ) )
	{
	  alert('The File APIs are not fully supported in this browser.');
	  return false;
	}

	if( typeof FileReader === "undefined" )
	{
		alert( "Filereader undefined!" );
		return false;
	}

	var file = files[0];

	if( !( /image/i ).test( file.type ) )
	{
		alert( "File is not an image." );
		return false;
	}

	reader = new FileReader();
	reader.onload = function( event ) { HandleFileEvent( event, selection ) }
	reader.readAsDataURL( file );
}

function UpdatePreviewCanvas( event, img, selection )
{
	var button = document.getElementById( "inputoverlaybutton" + selection );
	if( typeof button !== "undefined" )
	{
		var filename = document.getElementById( "uploadfileselection" + selection );
		var newvalue = filename.value.replace( "C:\\fakepath\\", "" );
		button.value = newvalue;
	}
	
	var canvas = document.getElementById( "previewcanvas" + selection );
		
	if( typeof canvas === "undefined" || typeof canvas.getContext === "undefined" )
		return;
	
	var context = canvas.getContext( '2d' );

	var world = new Object();
	world.width = canvas.offsetWidth;
	world.height = canvas.offsetHeight;
		
	canvas.width = world.width;
	canvas.height = world.height;

	if( typeof img === "undefined" )
		return;
		
	var WidthDif = img.width - world.width;
	var HeightDif = img.height - world.height;
	
	var Scale = 0.0;
	if( WidthDif > HeightDif )
	{
		Scale = world.width / img.width;
	}
	else
	{
		Scale = world.height / img.height;
	}
	if( Scale > 1 )
		Scale = 1;
		
	var UseWidth = Math.floor( img.width * Scale );
	var UseHeight = Math.floor( img.height * Scale );
	
	var x = Math.floor( ( world.width - UseWidth ) / 2 );
	var y = Math.floor( ( world.height - UseHeight ) / 2 );
	
	context.drawImage( img, x, y, UseWidth, UseHeight );  
}

		
function MoveUploadElement( event )
{
	if( typeof event == 'undefined' ) event = window.event;
	if( typeof event.pageY == 'undefined' && typeof event.clientX == 'number' && document.documentElement )
	{
		event.pageX = event.clientX + document.documentElement.scrollLeft;
		event.pageY = event.clientY + document.documentElement.scrollTop;
	};
	
	var targ = ( event.currentTarget ) ? event.currentTarget : event.srcElement;
	
	var buttonelements = getElementsByClassName( targ, "inputoverlaybutton" );
	var uploadfileelements = getElementsByClassName( targ, "uploadfileselection" );
	
	var ox = oy = 0;
	var elem = buttonelements[0];
	if( elem.offsetParent )
	{
		ox = elem.offsetLeft;
		oy = elem.offsetTop;
		while( elem = elem.offsetParent )
		{
			ox += elem.offsetLeft;
			oy += elem.offsetTop;
		};
	};

	elem = buttonelements[0];
	if( elem.parentNode )
	{
		ox += elem.scrollLeft;
		oy += elem.scrollTop;
		while( elem = elem.offsetParent )
		{
			ox -= elem.scrollLeft;
			oy -= elem.scrollTop;
		};
	};

	var x = event.pageX - ox;
	var y = event.pageY - oy;
	var w = uploadfileelements[0].offsetWidth;
	var h = uploadfileelements[0].offsetHeight;

	uploadfileelements[0].style.top = y - (h / 2)  + 'px';
	uploadfileelements[0].style.left = x - w + 2 + 'px';
	
	return true;
}

function getElementsByClassName( node, classname ) 
{
	if( node.getElementsByClassName ) 
	{
		return node.getElementsByClassName( classname );
	} 
	else 
	{
		if ( node == null )
		  node = document;
		var classElements = [];
		var els = node.getElementsByTagName( "*" );
		var elsLen = els.length;
		var pattern = new RegExp("(^|\\s)" + classname + "(\\s|$)");
		var i, j;

		for( i = 0, j = 0; i < elsLen; i++ )
		{
			if ( pattern.test( els[i].className ) ) 
			{
				classElements[j] = els[i];
				j++;
			}
		}
		return classElements;
	}
}