var currentPic = 1;
var slideShow = false;
var slideTimer;
var slideDelay = 1000;
var slideTick = 5;
var currentTick;
var currentImage = 0;
var slidePos = 0;
var leftImage, rightImage;
var maxPic, imagePath;
var titles = null;
var images = null;
var titleDiv;

function InitViewerSimple( count, path, width, height, p )
{
	maxPic = count;
	imagePath = path;
	InitViewer( width, height, "1.jpg", "2.jpg" );
}

function InitViewerEx( path, bundle, width, height )
{
	maxPic = 0;
	imagePath = path;
	titles = new Array();
	images = new Array();
	for ( var i = 0; i < bundle.length; i++ )
	{ 
		var bcount = bundle[ i ][ 2 ];
		for ( var j = 1; j <= bcount; j++ )
		{
			if ( j == 1 )
				titles[ maxPic ] = bundle[ i ][ 0 ];
			else				
				titles[ maxPic ] = null;
			images[ maxPic ] = bundle[ i ][ 1 ] + j + ".jpg";
			maxPic++;
		}
	}
	
	InitViewer( width, height, images[ 0 ], images[ 1 ] );
}

function InitViewerAdvanced( path, i, t, width, height )
{
	imagePath = path;
	titles = t;
	images = i;
	maxPic = images.length;
	InitViewer( width, height, images[ 0 ], images[ 1 ] );
}


function InitViewer( width, height, img1, img2 )
{
	titleDiv = document.getElementById( "imageTitle" );
	if ( titles != null )
		titleDiv.innerHTML = titles[ 0 ];
	else
		titleDiv.style.display = "none";
	titleDiv.style.width = width + "px";		
	
	var buttons = document.getElementById( "imageButtons" );
	buttons.innerHTML = "<center>"
		+ "<a id='homeButton' href='#' class='imageDis' onclick='ShowPic(0);return false;'>Home</a>"
		+ "&nbsp;|&nbsp;"
		+ "<a id='leftButton' href='#' class='imageDis' onclick='ShowPic(-1);return false;'>&laquo; Previous</a>"
		+ "&nbsp;|&nbsp;"
		+ "<a id='rightButton' href='#' class='imageEna' onclick='ShowPic(1);return false;'>Next &raquo;</a>"
		+ "&nbsp;|&nbsp;"
		+ "<a id='slideButton' href='#' class='imageEna' onclick='SlideShow();return false;'>Start Slideshow</a>&nbsp;|&nbsp;Picture <b id='currentPicDisplay'>1</b> of <b>" + maxPic + "</b>&nbsp;"
		+ "<div id='slideTicker'></div></center><br><br>";
	buttons.style.width = width + "px";		
		
	var ic = document.getElementById( "imageContainer" );		
	ic.innerHTML = 
		"<img src='" + imagePath + img1 + "' id='img0' width='" + width + "' height='" + height + "' >" + 
		"<img src='" + imagePath + img2 + "' id='img1' width='" + width + "' height='" + height + "' style='display: none' >";
	ic.style.width = width + "px";		
	ic.style.height = height + "px";		

}

function ShowPic( dir )
{
	if ( slideShow )
		return false;
		
	if ( dir > 0 && currentPic + 1 <= maxPic )
	{
		currentPic++;
		SetLeftRightButtons();
		LoadPic( currentPic );
	}

	if ( dir < 0 && currentPic - 1 >= 1 )
	{
		currentPic--;
		SetLeftRightButtons();
		LoadPic( currentPic );
	}
	
	if ( dir == 0 && currentPic != 1 )
	{
		currentPic = 1;
		SetLeftRightButtons();
		LoadPic( currentPic );
	}
	
}

function SetLeftRightButtons()
{
	if ( currentPic == 1 )
	{
		document.getElementById( "leftButton" ).className = "imageDis";
		document.getElementById( "homeButton" ).className = "imageDis";
	}
	else
	{
		document.getElementById( "leftButton" ).className = "imageEna";
		document.getElementById( "homeButton" ).className = "imageEna";
	}
	if ( currentPic == maxPic )
		document.getElementById( "rightButton" ).className = "imageDis";
	else
		document.getElementById( "rightButton" ).className = "imageEna";
}

function LoadPic( pic )
{
	//document.getElementById( "img" ).src = pic + ".jpg";
	document.getElementById( "currentPicDisplay" ).innerHTML = pic;

	slidePos = 0;
	
	leftImage = document.getElementById( "img" + ( currentImage %2 ) );
	rightImage = document.getElementById( "img" + ( ( currentImage + 1 ) %2 ) );
	rightImage.style.display = "block";

	leftImage.xOpacity = .99;
	rightImage.xOpacity = 0;

	if ( images == null )
		rightImage.src = imagePath + pic + ".jpg";
	else
		rightImage.src = imagePath + images[ pic - 1 ];

	if ( titles != null && titles[ pic - 1 ] != null )
		titleDiv.innerHTML = titles[ pic - 1 ];
	
	FadePic();
}

function FadePic()
{
	leftImage.xOpacity -= .05;
	rightImage.xOpacity += .05;
	
	SetOpacity(leftImage); 
	SetOpacity(rightImage);
	
	if ( leftImage.xOpacity <= 0 ) 
	{
		leftImage.style.display = "none";
		currentImage++;
		if ( images == null )
			leftImage.src = imagePath + (currentImage + 2) + ".jpg";
		else
			leftImage.src = imagePath + images[ currentImage + 1 ];
	} 
	else 
	{
		setTimeout(FadePic,30);
	}
	
}

function SetOpacity(obj) 
{
	if(obj.xOpacity>.99) 
	{
		obj.xOpacity = .99;
		return;
	}
	obj.style.opacity = obj.xOpacity;
	obj.style.MozOpacity = obj.xOpacity;
	obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")";
}

function SlidePic()
{
	if ( slidePos > 450 )
		slidePos += 5;
	else
		slidePos += 10;
	
	leftImage.style.left = -slidePos;
	rightImage.style.left = 520 - slidePos;
	
	if ( slidePos != 520 )
	{
		var delay = 40;
		/*if ( slidePos > 400 )
			delay += ( slidePos - 400 ) / 2*/
		slideTimer = window.setTimeout( 'SlidePic()', delay );
	}
	else
	{
		currentImage++;
		if ( images == null )
			rightImage.src = imagePath + (currentImage + 1) + ".jpg";
		else
			rightImage.src = imagePath + images[ currentImage ];
	}
}

function SlideShow()
{
	if ( slideShow )
	{
		slideShow = false;
		window.clearTimeout( slideTimer );
		document.getElementById( "slideButton" ).innerHTML = "Start SlideShow";
		document.getElementById( "slideTicker" ).innerHTML = "";
		SetLeftRightButtons();
	}
	else
	{
		slideShow = true;
		document.getElementById( "slideButton" ).innerHTML = "Stop SlideShow";
		document.getElementById( "leftButton" ).className = "imageDis";
		document.getElementById( "rightButton" ).className = "imageDis";
		
		if ( currentPic == maxPic )
			currentPic = 0;

		ShowNextSlide();
	}
}

function ShowNextSlide()
{
	currentPic++;
	LoadPic( currentPic );
	
	if ( currentPic == maxPic )
	{
		SlideShow();
	}
	else
	{	
		currentTick = 0;
		SlideCounter();
	}
}

function SlideCounter()
{
	//alert(currentTick);
	var html = "<table style='display: inline'><tr>";
	for ( var i = 0; i < currentTick; i++ )
		html += "<td class='squareOn'></td>";
	for ( var j = currentTick + 1; j <= slideTick; j++ )
		html += "<td class='squareOff'></td>";
		
	html += "</tr></table>";
	
	//alert(html);
	document.getElementById( "slideTicker" ).innerHTML = html;
	//alert(0);
	
	if ( currentTick == slideTick )
	{
		slideTimer = window.setTimeout( 'ShowNextSlide()', 10 );
	}
	else
	{
		currentTick++;
		slideTimer = window.setTimeout( 'SlideCounter()', slideDelay );
	}
	
}