var slide;
var SlideShowLength;
var oInterval;
var s;  // Dimensions of pop-up window of full size picture

// Constant values
var iPicturesPerPage = 6;
var maxImgH = 455;
var maxImgW = 650;

/////////////////////////////////////////////////////////////////////
// Functions for displaying large image, popup window of image, 
// and handling next & prev. picture arrow clicks.
/////////////////////////////////////////////////////////////////////

/* This function is called to display the main image when the thumbnail is clicked. */
function showImg(imgName, imgW, imgH, imgTitle, iPicture)
{
	// Set up global variable s for open photo function (full size popup) below
	// The width and height of the full size image are passed in in parameters
	// imgW and imgH above. Variable "s" contains the parameters for opening
	// the pop-up of the full size photo, e.g. "width=620, height=475"
	s = 'width=' + (parseInt(imgW) + 20) + ', height=' + (parseInt(imgH) + 25);

	if (imgW <= maxImgW && imgH <= maxImgH)
	{
		document.getElementById('imgLarge').style.width = '';
		document.getElementById('imgLarge').style.height = '';
	}
	else
	{
		// Set dimensions first according to width
		var newW, newH;
		if (imgW > maxImgW)
		{
			newW = maxImgW;
			newH = newW/imgW * imgH; //Math.round?
		}
		else // Set up variables for next check
		{
			newW = imgW;
			newH = imgH;
		}
		// If height is too much for maximum allowed, shrink again
		if (newH > maxImgH)
		{
			newW = maxImgH/newH * newW;
			newH = maxImgH;
		}
		document.getElementById('imgLarge').style.width = newW + 'px';
		document.getElementById('imgLarge').style.height = newH + 'px';
	}
	document.getElementById('imgLarge').src = imgName;
	document.getElementById('lblHdr').innerHTML = imgTitle;
	// Set value of "n of m" text
	var iActualNum = parseInt(iPicture)+1;
	document.getElementById('lblNofM').innerHTML = '(' + iActualNum + ' of ' + document.getElementById('hdnLblNumPictures').innerHTML + ')';
	document.getElementById('imgLarge').onclick = OpenPhoto;
	// Update current index
	document.getElementById('hdnLblCurrentPicture').innerHTML = iPicture;
}

/* Called when the main image is clicked to open a popup with the full size image */
function OpenPhoto(iH)
{
	// For the first photo, this function will be called with the parameter iH
	// already set up. This contains the dimensions of the full size photo pop-up
	// window. For any other photo (i.e. thumbnail clicked and then the imgLarge
	// was displayed, these dimensions are in the variable "s" set up in the 
	// above function. 
	if (s == null) //just for first image.
	{
		s = iH;
	}
	var address = document.imgLarge.src;
	window.open(address, '' , s + ',resizable=yes,top=0,left=0');
}

// Functions for next and previous picture arrow clicks
function PrevPicture() 
{
	var iPicture = parseInt(document.getElementById('hdnLblCurrentPicture').innerHTML);
	if (iPicture > 0)
	{
		// if this is the first picture on the page and there is a previous page,
		// do postback in order to page thumbnails
		if (iPicture % iPicturesPerPage == 0)
		{
			return true;
		}
		else
		{
			var sPath = document.getElementById('listImg')[iPicture-1].value;
			var sWidth = document.getElementById('listWidth')[iPicture-1].value;
			var sHeight = document.getElementById('listHeight')[iPicture-1].value;
			var sTitle = document.getElementById('listTitle')[iPicture-1].value;
			showImg(sPath, sWidth, sHeight, sTitle, iPicture - 1);
		}
	}
	return false; // cancel postback
}

function NextPicture() 
{
	var iPicture = parseInt(document.getElementById('hdnLblCurrentPicture').innerHTML);
	if (iPicture <= parseInt(document.getElementById('hdnLblNumPictures').innerHTML) - 2)
	{
		// if this is the last picture on the page and there is another page,
		// do postback in order to page thumbnails
		if ((iPicture+1) % iPicturesPerPage == 0)
		{
			return true;
		}
		else
		{
			var sPath = document.getElementById('listImg')[iPicture+1].value;
			var sWidth = document.getElementById('listWidth')[iPicture+1].value;
			var sHeight = document.getElementById('listHeight')[iPicture+1].value;
			var sTitle = document.getElementById('listTitle')[iPicture+1].value;
			showImg(sPath, sWidth, sHeight, sTitle, iPicture + 1);
		}
	}
	return false; // cancel postback
}
/////////////////////////////////////////////////////////////
// Slide show functions
/////////////////////////////////////////////////////////////
function StartSlideShow()
{
	SlideShowLength =  document.getElementById('listTitle').length;
	slide = 0;
	// Call slide show and show menu on top of image
	SlideShow();
	SlideMenu();
}

///////////////////////////////////////////////////////
function SlideShow()
{
	if (slide >= SlideShowLength)
	{
		slide = 0;
	}
	
	var sPath = document.getElementById('listImg')[slide].value;
	var sWidth = document.getElementById('listWidth')[slide].value;
	var sHeight = document.getElementById('listHeight')[slide].value;
	var sTitle = document.getElementById('listTitle')[slide].value;
	showImg(sPath, sWidth, sHeight, sTitle, slide);

	var tm = document.getElementById("slidetime").value*1000; // This way we can control time during playback
	oInterval = window.setTimeout("SlideShow()", tm);
	slide++;
}

// Pause/restart slide show.
///////////////////////////////////////////////////////
function PauseSlide()
{
	if (oInterval == null)
	{
		return;
	}
	if (oInterval != "")
	{	
		window.clearInterval(oInterval);
		oInterval = "";
		document.getElementById('pause').src = "images/button_play.gif";	
	}
	else
	{
		document.getElementById('pause').src = "images/button_pause.gif";
		SlideShow();
		return;
	}
}

// Just to show/hide slide  options on top of image.
function SlideMenu()
{
	document.getElementById('idSlide').style.display = '';
}

function PrevSlide()
{
	// Change one slide back
	if (slide == 0)
	{
		slide = (SlideShowLength-1);
	}
	else
	{
		slide = slide - 1;
	}
	var sPath = document.getElementById('listImg')[slide].value;
	var sWidth = document.getElementById('listWidth')[slide].value;
	var sHeight = document.getElementById('listHeight')[slide].value;
	var sTitle = document.getElementById('listTitle')[slide].value;
	showImg(sPath, sWidth, sHeight, sTitle, slide);
}

///////////////////////////////////////////////////////
function NextSlide()
{
	// Change one slide back
	if (slide >= (SlideShowLength-1))
	{
		slide = 0;
	}
	else
	{
		slide = slide+1;
	}
	var sPath = document.getElementById('listImg')[slide].value;
	var sWidth = document.getElementById('listWidth')[slide].value;
	var sHeight = document.getElementById('listHeight')[slide].value;
	var sTitle = document.getElementById('listTitle')[slide].value;
	showImg(sPath, sWidth, sHeight, sTitle, slide);
}

///////////// OLD CODE /////////////////////////////
// AJAX based function to retrieve list of images from server using callback
/*
var req;
var reqS;
var imgs;
var nr;
var Album = new Array();
function GetSlides()
{
	req = false;
	try
	{
		req = new ActiveXObject("Msxml2.XMLHTTP");
	}
	catch(e)
	{
		try
		{
			req = new ActiveXObject("Microsoft.XMLHTTP");
		}
		catch(e1)
		{
			req = false;
		}
	}
	if (window.XMLHttpRequest)
	{
    	try 
    	{
			req = new XMLHttpRequest();
        } 
        catch(e) 
        {
			req = false;
			alert("Slide show not available!");
        }
	}

	if (req)
	{
		var path = '' + document.location;
		var xpath = path.substring(0, (path.lastIndexOf('/') + 1));
		path = path.substring((path.indexOf('?')) + 3);
		if (path == "")
		{
			alert("Slide show not available as no path given!");
		}
		else
		{
			req.onreadystatechange = ProcessResponse;
			req.open("GET", xpath + "ThumbGen.ashx?Dir=" + path, true);
			req.send("");
		}         
	}
}

///////////////////////////////////////////////////////
function ProcessResponse()
{
	if (req.readyState == 4)
	{
		if (req.status == 200)  // analog "OK", 
		{
			// Here we are processing result
			var p = req.responseXML.documentElement;
			
			var photos = p.getElementsByTagName('photos');
			
			// Here we are trying to create array in memory

			// This example just to show how we can fill selection box from callback result.
			// After callback we get XML document-table and we can use it to fill 
			// table/select/list etc.
		}
		else
		{
			alert("Error retrieving data!");
		}
		
		// Now we have array with images. Call slide show
		SlideShowLength =  document.getElementById('listTitle').length;
		slide = 0;
		// Call slide show and show menu on top of image
		AjaxSlideShow();
		SlideMenu();
	}
}
*/