/** Is true if the browser is Internet Explorer */
var isExplorer = (window.ActiveXObject != null);
/** Slide show interval (in milliseconds) */
var slideShowInterval = 2500;
/** Slide show handle (null if the slide show is not running) */
var slideShowHandle = null;
/** max number of links to show */
var maxLinkNo = 25;
/** the current number of links to show */				
var linkNo;
/** the current picture subset */
var pictureSubsetIndex;
/** the current picture index*/
var index = 0;
/** the picture array */
var pictures;
/** the caption array */
var captions;
/** the thumbnail array */
var thumbnails;
/** the zommed pictures array */
var zooms;
/** true if the pictures are zoomed */
var zoomed = false;
		
/** button urls */
var b_nextOn	= "/tools/scripts/images/nexton.png";
var b_nextOff	= "/tools/scripts/images/nextoff.png";
var b_nextOver	= "/tools/scripts/images/nextover.png";
var b_prevOn	= "/tools/scripts/images/prevon.png";
var b_prevOff	= "/tools/scripts/images/prevoff.png";
var b_prevOver	= "/tools/scripts/images/prevover.png";
var b_zoomOn	= "/tools/scripts/images/zoomon.png";
var b_zoomOff	= "/tools/scripts/images/zoomoff.png";
var b_zoomOver	= "/tools/scripts/images/zoomover.png";
var b_unzoomOn	= "/tools/scripts/images/unzoomon.png";
var b_unzoomOff	= "/tools/scripts/images/unzoomoff.png";
var b_unzoomOver= "/tools/scripts/images/unzoomover.png";
var b_playOn	= "/tools/scripts/images/playon.png";
var b_playOff	= "/tools/scripts/images/playoff.png";
var b_playOver	= "/tools/scripts/images/playover.png";
var b_pauseOn	= "/tools/scripts/images/pauseon.png";
var b_pauseOff	= "/tools/scripts/images/pauseoff.png";
var b_pauseOver	= "/tools/scripts/images/pauseover.png";


/**
	Initializes the window.
	Called when the window is created.
 */ 
function init(picturesInfo, pindex) 
{
	if ( pindex >= picturesInfo.length ) {
		pindex = picturesInfo.length - 1;
	}
	linkNo = ( picturesInfo.length < maxLinkNo ? picturesInfo.length : maxLinkNo );
	pictureSubsetIndex = 0;
	index = pindex;
	pictures = new Array(picturesInfo.length);
	captions = new Array(picturesInfo.length);
	thumbnails = new Array(picturesInfo.length);
	zooms = new Array(picturesInfo.length);
	for ( i = 0; i < picturesInfo.length; i++ ) {
		pictures[i] = picturesInfo[i].picture;
		thumbnails[i] = picturesInfo[i].small;
		zooms[i] = picturesInfo[i].big;
		captions[i] = picturesInfo[i].caption;
	}

	// set the page div
	var page = '';
	page += '<div id="thumbnail">';
	page += '	<img name="ThumbnailBox" class="thumbnail" src="" onload="thumbLoaded();">';
	page += '</div>';
	var pageDiv = document.getElementById("page");
	pageDiv.innerHTML += page;	

	// set the links div
	var links = '';
	links += '<div id="lslides">';
	links += '	<ul>';
	links += '		<li><a id="pagePrev" href="javascript:pagePrevPressed();"></a></li>';
	for ( i = 0; i < linkNo; i++ ) {
		links += '		<li><a class="linkOff" id="link'+ i +'" href="javascript:linkPressed(' + i + ');" onClick="linkPressed(' + i + ');" onMouseOver="linkOver(' + i + ');" onMouseOut="linkOut(' + i + ');">' + captions[i] + '</a></li>';
	}
	links += '			<li><a id="pageNext" href="javascript:pageNextPressed();"></a></li>';
	links += '	</ul>';
	links += '</div>';
	var linksDiv = document.getElementById("links");
	linksDiv.innerHTML += links;	
	
	// set the home div
	var home = '';
	home += '<div id="caption">';
	home += '	<table>';
	home += '		<tr>';
	home += '			<td style="text-align:left;">';
	home += '				<span id="CaptionBox" class="caption">'+captions[index]+'</span>';	
	home += '			</td>';
	home += '			<td style="text-align:right;">';
	home += '				<a class="buttonLink" href="javascript:zoomPressed();">       <img id="zoom"        src="' + b_zoomOn + '" onMouseOver="mouseOver(\'zoom\');" onMouseOut="mouseOut(\'zoom\');" alt="zoom"></a>';
	home += '				<a class="buttonLink" href="javascript:picturePrevPressed();"><img id="picturePrev" src="' + b_prevOn + '" onMouseOver="mouseOver(\'picturePrev\');" onMouseOut="mouseOut(\'picturePrev\');" alt="foto precedente"></a>';
	home += '				<a class="buttonLink" href="javascript:slideShowPressed();">  <img id="slideShow"   src="' + b_playOn + '" onMouseOver="mouseOver(\'slideShow\');" onMouseOut="mouseOut(\'slideShow\');" alt="slide show"></a>';	
	home += '				<a class="buttonLink" href="javascript:pictureNextPressed();"><img id="pictureNext" src="' + b_nextOn + '" onMouseOver="mouseOver(\'pictureNext\');" onMouseOut="mouseOut(\'pictureNext\');" alt="foto successiva"></a>';
	home += '				<br/><span id="IndexBox" class="index"></span>';
	home += '			</td>';
	home += '		</tr>';
	home += '	</table>';	
	home += '</div>';
	home += '<div id="photo">';
	home += '	<a onClick="picturePressed();">';
	home += '		<img name="PictureBox" class="picture" src="'+pictures[index]+'" onload="pictureLoaded();">';
	home += '	</a>';
	home += '</div>';
	var homeDiv = document.getElementById("home");
	homeDiv.innerHTML += home;	

	// enable/disable page link cursors
	refreshButtons(index);
	// load the required picture
	loadPicture(index);
}

/********************************************************
	EVENT HANDLERS
********************************************************/

/**
	This function is called when the user click on a picture link.  
	The thumbnail box is hidden.
 */
function linkPressed(linkIndex)
{
	pictureIndex = linkIndex + (pictureSubsetIndex * maxLinkNo);
	loadPicture(pictureIndex);
	linkOut(linkIndex);
}

/**
	This function is called when the user moves the mouse on a picture link.  
	The thumbnail image loading is started and the thumbnail box is placed near to the link.
 */
function linkOver(linkIndex)
{
	// get the picture index from the link index
	pictureIndex = linkIndex + (pictureSubsetIndex * maxLinkNo);

	var link = document.getElementById("link" + (pictureIndex % maxLinkNo));
	var linksDiv = document.getElementById("links");
	document.images.ThumbnailBox.src = thumbnails[pictureIndex];
	var thumbnailDiv = document.getElementById("thumbnail");	
	thumbnailDiv.style.top = linksDiv.offsetTop + link.offsetTop + "px";
	thumbnailDiv.style.left = (linksDiv.offsetWidth - 5) + "px";
}

/**
	This function is called when the user moves the mouse out of a picture link.  
	The thumbnail box is hidden.
 */
function linkOut(linkIndex)
{
	document.images.ThumbnailBox.src = "";
	document.getElementById("thumbnail").style.display = "none";
}

/**
	The slide show button has been clicked. If the slide show is not running it will be started otherwise
	it will be stopped.
 */
function slideShowPressed()
{
	var slideShowButton = document.getElementById("slideShow");
	if ( slideShowHandle == null ) {
		slideShowButton.src = b_pauseOn;
		slideShowHandle = setTimeout('slideShow();', 0);
	}
	else {
		clearTimeout(slideShowHandle);
		slideShowHandle = null;
		slideShowButton.src = b_playOn;
	}
}

/**
	The page prev button has been pressed.
 */
function pagePrevPressed()
{
	currentPageIndex = Math.floor(index / maxLinkNo);
	if ( currentPageIndex > 0 ) {
		currentPageIndex--;
		loadPicture(currentPageIndex * maxLinkNo);
	}
}

/**
	The page next button has been pressed.
 */
function pageNextPressed()
{
	currentPageIndex = Math.floor(index / maxLinkNo);
	lastPageIndex = Math.floor((pictures.length-1) / maxLinkNo);
	if ( currentPageIndex < lastPageIndex ) {
		currentPageIndex++;
		loadPicture(currentPageIndex * maxLinkNo);
	}	
}

/**
	The picture has been pressed.
 */
function picturePressed()
{
	loadPicture(index+1);
}

/**
	The picture prev button has been pressed.
 */
function picturePrevPressed()
{
	loadPicture(index-1);
}

/**
	The picture next button has been pressed.
 */
function pictureNextPressed()
{
	loadPicture(index+1);
}

/**
	The zoom button has been pressed.
 */
function zoomPressed()
{
	if ( zoomed == false ) {
		document.getElementById("zoom").src = b_unzoomOn;
		document.getElementById("links").style.display = "none";
		document.getElementById("home").id = "homeZoom";
		zoomed = true;
	}
	else {
		document.getElementById("zoom").src = b_zoomOn;
		document.getElementById("links").style.display = "block";
		document.getElementById("homeZoom").id = "home";
		zoomed = false;
	}
	setImage(index);
}

/**
	Button mouse over management.
 */
function mouseOver(control)
{
	var button = document.getElementById(control);
	if ( control == "slideShow" ) {
		button.src = ( slideShowHandle == null ? b_playOver : b_pauseOver );
	}
	else if ( control == "pictureNext" ) {
		if ( isPictureNextEnabled(index) ) button.src = b_nextOver;
	}
	else if ( control == "picturePrev" ) {
		if ( isPicturePrevEnabled(index) ) button.src = b_prevOver;
	}
	else if ( control == "zoom" ) {
		button.src = ( zoomed == true ? b_unzoomOver : b_zoomOver );
	}
}

/**
	Button mouse out management.
 */
function mouseOut(control)
{
	var button = document.getElementById(control);
	if ( control == "slideShow" ) {
		button.src = ( slideShowHandle == null ? b_playOn : b_pauseOn );	}
	else if ( control == "pictureNext" ) {
		button.src = ( isPictureNextEnabled(index) ? b_nextOn : b_nextOff );
	}
	else if ( control == "picturePrev" ) {
		button.src = ( isPicturePrevEnabled(index) ? b_prevOn : b_prevOff );
	}
	else if ( control == "zoom" ) {
		button.src = ( zoomed == true ? b_unzoomOn : b_zoomOn );
	}

}

/********************************************************
	EVENT HANDLERS ENDS
********************************************************/

/**
	This function is called when a picture (with "pictureIndex" index) has been required to be shown
	and changes the window's look&feel in order to reflect that the required picture is being loaded.
 */
function loadPicture(pictureIndex) 
{
	// check if the required picture index is valid
	if ( pictureIndex < 0 || pictureIndex >= pictures.length ) { return; }

	// display the loading message
	setLoadingMessage(pictureIndex);

	// check if the required picture belongs to the subset of pictures currently navigated
	if ( Math.floor(pictureIndex / maxLinkNo) != pictureSubsetIndex ) {
		// the required picture does not belong to the subset of pictures currently navigated, update the sub set
	
		// set the new subset index
		pictureSubsetIndex = Math.floor(pictureIndex / maxLinkNo);
		startIndex = pictureSubsetIndex * maxLinkNo;
		// set the number of links to show
		linkNo = Math.min(pictures.length-startIndex, maxLinkNo);
		// set the new links
		for ( i = 0; i < maxLinkNo; i++ ) {
			var link = document.getElementById("link"+i);
			if ( i < linkNo ) {
				link.innerHTML = captions[i+startIndex];
				link.href = "javascript:loadPicture(" + (i+startIndex) +");";				
			}
			else {
				link.innerHTML = "";
			}	
		}
	}
	
	// turn-off the previous selected link
	turnOffLink(index);
	// set the new index
	index = pictureIndex;
	// display the image
	setImage(index);
}

/**
	This function is called when a previously required picture has been loaded 
	and changes the window's look&feel in order to reflect that the required picture has been loaded.
 */
function pictureLoaded()
{
	// display the caption
	setCaption(index);
	// turn-on the current selected link
	turnOnLink(index);
	// enable/disable page buttons
	refreshButtons(index);	
	// set the index
	setIndex(index);
	// schedule the slide show if enabled
	if ( slideShowHandle != null ) { 
		slideShowHandle = setTimeout('slideShow();', slideShowInterval);
	}
}

/**
	This function is called when the thumbnail is loaded and ready to be displayed.
	The thumbnail box is displayed.
 */
function thumbLoaded()
{
	if ( document.images.ThumbnailBox.src != "" ) {
		document.getElementById("thumbnail").style.display = "block";
	}
}


/**
	The slide show routine. Shows the next picture and schedule the next slide to be shown.
 */
function slideShow()
{
	if ( index < pictures.length - 1 ) {
		loadPicture(index+1);
	}
	else {
		// stop the slideshow
		slideShowPressed();
	}
}

/**
	Sets the image for the given picture index.
 */
function setImage(pictureIndex)
{
	document.images.PictureBox.src = zoomed ? zooms[pictureIndex] : pictures[pictureIndex];
}

/**
	Sets the picture for the given picture index.
 */
function setCaption(pictureIndex)
{
	document.getElementById("CaptionBox").innerHTML = captions[pictureIndex];
}

/**
	Turns-off the link for the given picture index.
 */
function turnOffLink(pictureIndex)
{
	i = pictureIndex % maxLinkNo;
	var link = document.getElementById("link"+i);
	link.className = "linkOff";
}

/**
	Turns-on the link for the given picture index.
 */
function turnOnLink(pictureIndex)
{
	i = pictureIndex % maxLinkNo;
	var link = document.getElementById("link"+i);
	link.className = "linkOn";
}

function refreshButtons(pictureIndex)
{
	var pagePrev = document.getElementById("pagePrev");
	var pageNext = document.getElementById("pageNext");
	var picturePrev = document.getElementById("picturePrev");
	var pictureNext = document.getElementById("pictureNext");

	firstPageIndex = Math.floor(pictureIndex / maxLinkNo)*maxLinkNo;
	isPagePrevEnabled(pictureIndex) ? pagePrev.innerHTML =  (firstPageIndex - maxLinkNo + 1) + ".." + firstPageIndex : pagePrev.innerHTML = "";
	isPageNextEnabled(pictureIndex) ? pageNext.innerHTML =  (firstPageIndex + maxLinkNo + 1) + ".." + Math.min(firstPageIndex + 2*maxLinkNo, pictures.length) : pageNext.innerHTML = "";

	isPicturePrevEnabled(pictureIndex) ? picturePrev.src = b_prevOn : picturePrev.src = b_prevOff;
	isPictureNextEnabled(pictureIndex) ? pictureNext.src = b_nextOn : pictureNext.src = b_nextOff;
}

function isPagePrevEnabled(pictureIndex)
{
	currentPageIndex = Math.floor(pictureIndex / maxLinkNo);
	return (currentPageIndex > 0);
}

function isPageNextEnabled(pictureIndex)
{
	currentPageIndex = Math.floor(pictureIndex / maxLinkNo);
	lastPageIndex = Math.floor((pictures.length-1) / maxLinkNo);
	return (currentPageIndex < lastPageIndex);
}

function isPicturePrevEnabled(pictureIndex)
{
	return (index > 0);
}

function isPictureNextEnabled(pictureIndex)
{
	return (index < pictures.length - 1);
}

function setIndex(pictureIndex)
{
	document.getElementById("IndexBox").innerHTML = "foto " + (pictureIndex+1) + " di " + pictures.length;
}

function setLoadingMessage(pictureIndex)
{
	document.getElementById("IndexBox").innerHTML = "caricamento foto...";
}