// JavaScript Document

var picArray = new Array ();
var currentId = 0;
var slideshowMode = false;
var galleryMode = false;
var galleryRows = 3;
var galleryCols = 4;
var photoFrameWidth = "400px";
var thumbCols = 4;
var thumbWidth = 92;
var thumbHeight = 62;
var galleryPageNum = 1;
var SlideshowDelay = 3;
var numOfPages = 1;
var thumbPageNum = 1;
var numOfThumbPages = 1;
var timer;

function opacity(id, opacStart, opacEnd, millisec) {
	//speed for each frame
	var speed = Math.round(millisec / 100);
	var timer = 0;

	//determine the direction for the blending, if start and end are the same nothing happens
	if(opacStart > opacEnd) {
		for(i = opacStart; i >= opacEnd; i--) {
			setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
			timer++;
		}
	} else if(opacStart < opacEnd) {
		for(i = opacStart; i <= opacEnd; i++)
			{
			setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
			timer++;
		}
	}
}

//change the opacity for different browsers
function changeOpac(opacity, id) {
	var object = document.getElementById(id).style; 
	object.opacity = (opacity / 100);
	object.MozOpacity = (opacity / 100);
	object.KhtmlOpacity = (opacity / 100);
	object.filter = "alpha(opacity=" + opacity + ")";
}

function shiftOpacity(id, millisec) {
	//if an element is invisible, make it visible, else make it ivisible
	if(document.getElementById(id).style.opacity == 0) {
		opacity(id, 0, 100, millisec);
	} else {
		opacity(id, 100, 0, millisec);
	}
}

function blendimage(divid, imageid, imagefile, millisec) {
	var speed = Math.round(millisec / 100);
	var timer = 0;
	
	//set the current image as background
	document.getElementById(divid).style.backgroundImage = "url(" + document.getElementById(imageid).src + ")";
	
	//make image transparent
	changeOpac(0, imageid);
	
	//make new image
	document.getElementById(imageid).src = imagefile;

	//fade in image
	for(i = 0; i <= 100; i++) {
		setTimeout("changeOpac(" + i + ",'" + imageid + "')",(timer * speed));
		timer++;
	}
}

function currentOpac(id, opacEnd, millisec) {
	//standard opacity is 100
	var currentOpac = 100;
	
	//if the element has an opacity set, get it
	if(document.getElementById(id).style.opacity < 100) {
		currentOpac = document.getElementById(id).style.opacity * 100;
	}

	//call for the function that changes the opacity
	opacity(id, currentOpac, opacEnd, millisec)
}

function showGallery () {
	
	var photoPanel;
	var numOfRows;
	var RecordPerPage;
	
	RecordPerPage = galleryRows * galleryCols;
	numOfPages = parseInt (picArray.length / RecordPerPage);
	if (picArray.length % RecordPerPage != 0)
		numOfPages++;
	photoPanel = '<table border="0" cellpadding="0" cellspacing="0" width="50%">\n';
	photoPanel = photoPanel + '<tr>\n';
	photoPanel = photoPanel + '<td width="5" valign="top">';
	if (galleryPageNum != 1) 
		photoPanel = photoPanel + '<a href="#" onClick="navigateGallery(0);return false;"><img src="images/en/StoryAlbum/btn_slideShow-back.gif" border="0" width="32" height="23"></a>'
	else
		photoPanel = photoPanel + '<img src="images/en/spacer.gif" border="0" width="32" height="23">';
	photoPanel = photoPanel + '</td>\n';
	photoPanel = photoPanel + '<td class="txt_page-number" align="center">Page ' + galleryPageNum + ' of ' + numOfPages + '</td>\n';
	photoPanel = photoPanel + '<td width="5" valign="top" align="right">';
	if (galleryPageNum != numOfPages)
		photoPanel = photoPanel + '<a href="#" onClick="navigateGallery(1);return false;"><img src="images/en/StoryAlbum/btn_slideShow-next.gif" border="0" width="32" height="23"></a>'
	else
		photoPanel = photoPanel + '<img src="images/en/spacer.gif" border="0" width="32" height="23">';
	photoPanel = photoPanel + '</td>\n';
	photoPanel = photoPanel + '</tr>\n';
	photoPanel = photoPanel + '</table><p>\n';
	
	startIndex = (galleryPageNum - 1) * RecordPerPage;
	if (startIndex + RecordPerPage < picArray.length)
		numOfRows = galleryRows
	else {
		RemainRecords = picArray.length - (galleryPageNum - 1) * RecordPerPage;
		numOfRows = parseInt (RemainRecords / galleryCols);
		if (RemainRecords % galleryCols != 0)
			numOfRows++;
	}
	photoPanel = photoPanel + '<table border="0" cellpadding="0" cellspacing="0">\n';
	for (i = 0; i < numOfRows; i++) {
		photoPanel = photoPanel + '<tr>\n';
		for (j = 0; j < galleryCols; j++) {
			tmp = startIndex + i * galleryCols + j;
			if (tmp < picArray.length) {
				photoPanel = photoPanel + '<td valign="top"><a href="#" onClick="currentId=' + tmp + ';changeGalleryMode();return false;"><img src="' + picArray[tmp][3] + '" border="0" width="133"></a></td>\n';
				photoPanel = photoPanel + '<td valign="top" width="10">&nbsp;</td>\n';
			}
			else {
				photoPanel = photoPanel + '<td valign="top">&nbsp;</td>\n';
				photoPanel = photoPanel + '<td valign="top" width="10">&nbsp;</td>\n';
			}
		}
		photoPanel = photoPanel + '</tr>\n';
		photoPanel = photoPanel + '<tr>\n';
		photoPanel = photoPanel + '<td colspan="2">&nbsp;</td>\n';
		photoPanel = photoPanel + '</tr>\n';
	}
	photoPanel = photoPanel + '</table>\n';
	document.getElementById('Panel').innerHTML = photoPanel;

}

function navigatePhoto (direction) {
	
	if (direction == 0) {
		if (currentId > 0) {
			currentId--;
		}
	}
	else {
		if (currentId < picArray.length - 1) {
			currentId++;
		}
	}
	showPhoto ();
	
}

function navigateGallery (direction) {
	
	if (direction == 0) {
		if (galleryPageNum > 1) {
			galleryPageNum--;
		}
	}
	else {
		if (galleryPageNum < numOfPages) {
			galleryPageNum++;
		}
	}
	showGallery ();
	
}

function navigateThumb (direction) {
	
	var tmp;
	
	if (direction == 0) {
		if (thumbPageNum > 1) {
			thumbPageNum--;
			currentId = (thumbPageNum - 1) * thumbCols + thumbCols - 1;
		}
	}
	else {
		if (thumbPageNum < numOfThumbPages) {
			thumbPageNum++;
			tmp = (thumbPageNum - 1) * thumbCols;
			if (tmp > picArray.length - 1)
				currentId = picArray.length - 1
			else
				currentId = tmp;
		}
	}
	showPhoto ();
	
}

function showPhoto () {
	
	var photoPanel;
	
	photoPanel = '';
	nextId = currentId + 1;
	if (nextId > picArray.length - 1)
		nextId = 0;
	photoPanel = photoPanel + '<table border="0" cellpadding="0" cellspacing="0">\n';
	photoPanel = photoPanel + '<tr>\n';
	photoPanel = photoPanel + '<td valign="top" style="width:460px;"><div id="mainPhoto" style="filter: alpha(opacity=0); -moz-opacity: 0; opacity: 0; width: ' + photoFrameWidth + ';"><img src="' + picArray[currentId][0] + '" border="0"></div><img id="hiddenImageNext" src="' + picArray[nextId][0] + '" style="display:none">\n';

	numOfThumbPages = parseInt (picArray.length / thumbCols);
	if (picArray.length % thumbCols != 0)
		numOfThumbPages++;
	photoPanel = photoPanel + '<p><table border="0" cellpadding="0" cellspacing="0" width="400">\n';
	photoPanel = photoPanel + '<tr>\n';
 	thumbPageNum = parseInt (currentId / thumbCols) + 1;
	for (i = 0; i < thumbCols; i++) {
		picIndex = (thumbPageNum - 1) * thumbCols + i;
		if (picIndex < picArray.length)
			if (picIndex == currentId)
				photoPanel = photoPanel + '<td valign="top"><a href="#" onClick="currentId=' + picIndex + ';showPhoto();return false;"><img src="' + picArray[picIndex][2] + '" border="1"  class="border-thumb" width="' + thumbWidth + '" height="' + thumbHeight + '"></a></td>\n'
			else
				photoPanel = photoPanel + '<td valign="top"><a href="#" onClick="currentId=' + picIndex + ';showPhoto();return false;"><img src="' + picArray[picIndex][2] + '" border="0" width="' + thumbWidth + '" height="' + thumbHeight + '"></a></td>\n'
		else
			photoPanel = photoPanel + '<td valign="top"><img src="images/en/spacer.gif" width="' + thumbWidth + '" height="1"></td>\n'
		if (i != thumbCols - 1)
			photoPanel = photoPanel + '<td valign="top" width="10"><img src="images/en/spacer.gif" width="10" height="1"></td>\n';
	}
	photoPanel = photoPanel + '</tr>\n';
	photoPanel = photoPanel + '<tr>\n';
	photoPanel = photoPanel + '<td width="5" valign="top">';
	if (thumbPageNum != 1) 
		photoPanel = photoPanel + '<div class="txt_page-next"><a href="#" onClick="navigateThumb(0);return false;">back</a></span>'
	else
		photoPanel = photoPanel + '&nbsp;';
	photoPanel = photoPanel + '</td>\n';
	photoPanel = photoPanel + '<td class="txt_page-number" align="center" width="380" colspan="' + parseInt (thumbCols * 2 - 3) + '">Page ' + thumbPageNum + ' of ' + numOfThumbPages + '</td>\n';
	photoPanel = photoPanel + '<td width="5" valign="top" align="right">';
	if (thumbPageNum != numOfThumbPages)
		photoPanel = photoPanel + '<div class="txt_page-next"><a href="#" onClick="navigateThumb(1);return false;">next</a></span>'
	else
		photoPanel = photoPanel + '&nbsp;';
	photoPanel = photoPanel + '</td>\n';
	photoPanel = photoPanel + '</tr>\n';
	photoPanel = photoPanel + '</table></p>\n';

	photoPanel = photoPanel + '</td>\n';
	photoPanel = photoPanel + '<td valign="top">';
	photoPanel = photoPanel + '<table width="240" border="0" cellpadding="0" cellspacing="3">\n';
	photoPanel = photoPanel + '<tr>\n';
	photoPanel = photoPanel + '<td width="5" valign="top">';
	if (currentId != 0) 
		photoPanel = photoPanel + '<a href="#" onClick="navigatePhoto(0);return false;"><img src="/images/en/StoryAlbum/btn_backward.gif" border="0"></a>'
	else
		photoPanel = photoPanel + '&nbsp;';
	photoPanel = photoPanel + '</td>\n';
	photoPanel = photoPanel + '<td align="center" style="size:11px; font-weight:bold; color:#666666; font-family:Helvetica, Arial, sans-serif;">Photo ' + parseInt (currentId + 1) + ' of ' + picArray.length + '</td>\n';
	photoPanel = photoPanel + '<td width="5" valign="top">';
	if (currentId != picArray.length - 1)
		photoPanel = photoPanel + '<a href="#" onClick="navigatePhoto(1);return false;"><img src="http://www.animalsasia.org/images/en/StoryAlbum/btn_forward.gif" border="0"></a>'
	else
		photoPanel = photoPanel + '&nbsp;';
	photoPanel = photoPanel + '</td>\n';
	photoPanel = photoPanel + '</tr>\n';
	photoPanel = photoPanel + '</table><br>\n';
	photoPanel = photoPanel + picArray[currentId][1] + '</td>\n';
	photoPanel = photoPanel + '</tr>\n';
	photoPanel = photoPanel + '</table><p>\n';
	document.getElementById('Panel').innerHTML = photoPanel;
	currentOpac('mainPhoto', 100, 1000);
	
}

function changeGalleryMode () {

	document.getElementById('SlideShow').innerHTML = '<a href="#" onClick="changeSlideShowMode();return false;"><img src="images/en/StoryAlbum/btn_slideShow-play.gif" border="0" width="128" height="36"></a>';
	clearInterval (timer);
	galleryMode = ! galleryMode;
	if (galleryMode) {
		document.getElementById('Gallery').innerHTML = '<a href="#" onClick="changeGalleryMode();return false;"><img src="images/en/StoryAlbum/btn_slideShow-photo.gif" border="0" width="92" height="36"></a>';
		showGallery ()
	}
	else {
		document.getElementById('Gallery').innerHTML = '<a href="#" onClick="changeGalleryMode();return false;"><img src="images/en/StoryAlbum/btn_slideShow-gallery.gif" border="0" width="92" height="36"></a>';
		showPhoto ();
	}
		
}

function SlideShowStart () {
	
	currentId++;
	if (currentId > picArray.length - 1)
		currentId = 0;
	showPhoto ();
	
}

function changeSlideShowMode() {
	
	document.getElementById('Gallery').innerHTML = '<a href="#" onClick="changeGalleryMode();return false;"><img src="images/en/StoryAlbum/btn_slideShow-gallery.gif" border="0" width="92" height="36"></a>';
	showPhoto ();
	slideshowMode = ! slideshowMode;
	if (slideshowMode) {
		document.getElementById('SlideShow').innerHTML = '<a href="#" onClick="changeSlideShowMode();return false;"><img src="images/en/StoryAlbum/btn_slideShow-stop.gif" border="0" width="128" height="36"></a>';
		timer = setInterval ("SlideShowStart ()", SlideshowDelay * 1000);
	}
	else {
		document.getElementById('SlideShow').innerHTML = '<a href="#" onClick="changeSlideShowMode();return false;"><img src="images/en/StoryAlbum/btn_slideShow-play.gif" border="0" width="128" height="36"></a>';
		clearInterval (timer);
	}
		
}