/**
 * Javascript PhotoViewer 1.4.3
 * 
 * Written By: Steven Lasch
 * Email: steven.lasch@gmail.com
 */

//Directory to the display images
var phodir = "/photoviewer/la-laguna/";

//Directory to interface images
var imgdir = "/photoviewer/images/";

//Text that appears on the left of the viewer
var viewerTitle = "Casa La Laguna";

//Just the name of the images in phodir
//No extensions!

var imgArray = [];
imgArray[0] = "0004";
imgArray[1] = "entrance1";
imgArray[2] = "0014";
imgArray[3] = "pool1";
imgArray[4] = "0024";
imgArray[5] = "0029";
imgArray[6] = "0030";
imgArray[7] = "0031";
imgArray[8] = "0033";
imgArray[9] = "0010";
imgArray[10] = "0027";
imgArray[11] = "0028";
imgArray[12] = "0008";
imgArray[13] = "spa1";
imgArray[14] = "0032";
imgArray[15] = "0001";
imgArray[16] = "staff1";
imgArray[17] = "0038";
imgArray[18] = "skyview4";
imgArray[19] = "0037";
imgArray[20] = "skyview3";

//Text that appears on the right of the viewer
var viewerCaption = "Image 1 of " + imgArray.length;

//The arrays of photo captions
//This works in tandem with the imgArray
var capArray = [];
var cpdArray = [];
for (var i=0;i<imgArray.length;i++){
	capArray[i] = i+1;
}
cpdArray = capArray;

//Set the starting point
var imgStartNumber = 0;
var thumbnailSpaces = 29;

//Preload the background processing rotate animated graphic
rotateicon = new Image(108,108);
rotateicon.src = imgdir + "rotate-icon.gif";

//Preload the thumbnails
var thmbArray = [];
for (var i=0;i<imgArray.length;i++){
	thmbArray[i] = new Image(50,50);
	thmbArray[i].src = phodir + imgArray[i] + "thmb.gif";
}

//Preload the photos
var picArray = [];
for (var i=0;i<imgArray.length;i++){
	picArray[i] = new Image(500,300);
	picArray[i].src = phodir + imgArray[i] + ".jpg";
}

//curImageNum holds the vailue of the current photo in the display
var curImageNum = 0;


// ******************** TIMER FUNCTIONS START ********************
// http://www.w3schools.com/js/js_timing.asp

var t;
var timer_is_on=0;
var start = 0;

function timedCount() {
	if (!start) {
		start=1;
	} else {
		if(curImageNum == imgArray.length - 1) {
        	curImageNum = 0;
    	} else {
        	curImageNum++;
    	}
	}
	loadMainImg(curImageNum);
	t=setTimeout("timedCount()",7000);
}

function doTimer() {
 	if (!timer_is_on) {
		timer_is_on=1;
		timedCount();
	}
}

function stopTimer() {
 	if (timer_is_on) {
		clearTimeout(t);
		timer_is_on=0;
		document.getElementById('play').style.display = "none";
		document.getElementById('paus').style.display = "block";
	}
}

function toggleTimer() {
 	if (timer_is_on) {
		clearTimeout(t);
		timer_is_on=0;
		document.getElementById('play').style.display = "none";
		document.getElementById('paus').style.display = "block";
	} else {
		timer_is_on=1;
		timedCount();
		document.getElementById('play').style.display = "block";
		document.getElementById('paus').style.display = "none";
	}
}
// ******************** TIMER FUNCTIONS END ********************


//The constructor so to speak
function photoViewer() {	
	//srt array means sort array. Instantiate it!
    srtArray = imgArray;
	
	//Create the PhotoViewer
	writeViewerTables();
	
	//Start the timer
	doTimer();
}

//Load the next photo in the array
function loadNextImage() {
    if(curImageNum == imgArray.length - 1) {
        curImageNum = 0;
    }else{
        curImageNum++;
    }
	stopTimer();
	loadMainImg(curImageNum);
}

//Load the previous photo in the array
function loadPrevImage() {
    if(curImageNum == 0) {
        curImageNum = imgArray.length - 1;
    }else{
        curImageNum--;
    }
	stopTimer();
	loadMainImg(curImageNum);
}

//Replace the current photo with the new photo
function loadMainImg(n){
	for (var i=0;i<imgArray.length;i++) {
		if (i == n) {
			picArray[i].src = phodir + srtArray[i] + ".jpg";
			document.getElementById("mimg").style.backgroundImage = "url(" + picArray[i].src + ")";
		}
	}

	 curImageNum = n;
	 document.getElementById("index").innerHTML = viewerTitle;
	 document.getElementById("caption").innerHTML = "Image " + cpdArray[n] + " of " + cpdArray.length;
}

//Move all of the thumbnails to the right or to the left
function sortThmb(direction) {
	//If direction equal next image
	if (direction == 0) {
		if(imgStartNumber == imgArray.length) {
			imgStartNumber = 0;
		}else{
			imgStartNumber++;
			curImageNum++;
		}
	} else {
		if(imgStartNumber == 0) {
        	imgStartNumber = imgArray.length - 1;
    	}else{
        	imgStartNumber--;
			curImageNum--;
    	}
	}
	
	//Re-sort the imgArray and assign it to the Sorting array (srtArray)
    var tmpArray1 = imgArray.slice(imgStartNumber,imgArray.length);
    var tmpArray2 = imgArray.slice(0,imgStartNumber);
	srtArray = tmpArray1.concat(tmpArray2);
	
	//Re-sort the caption array (capArray) to match the new sorted photo array
	var tpcArray1 = capArray.slice(imgStartNumber, capArray.length);
	var tpcArray2 = capArray.slice(0,imgStartNumber);
	//New caption array
	cpdArray = tpcArray1.concat(tpcArray2);
	
	//re-define the images sources. 
	for (var i=0;i<srtArray.length;i++) {
		thmbArray[i].src = phodir + srtArray[i] + "thmb.gif";
	}
	
	for (var i=0;i < thumbnailSpaces;i++) {
		document.getElementById('thmb' + i).src = thmbArray[i].src;
	}
}

function isEven(value) {
	if (value%2 == 0)
		return true;
	else
		return false;
}

// HTML Tables version 
function writeViewerTables(){
    var pv = '<div class="photoviewer">\n';
	pv += '<div class="index" id="index">' + viewerTitle + '</div>\n';
	pv += '<div class="caption" id="caption">' + viewerCaption + '</div>\n';

	pv += '<div class="load" id="load" style="background:url(' + rotateicon.src + ');"></div>\n';
	pv += '<div class="main" id="mimg" style="background:url(pic' + curImageNum + '.src);background-repeat:no-repeat;background-position:1px 1px;"></div>\n';
	pv += '<div class="left" onclick="sortThmb(0);">';
	pv += '<img src="http://www.cabosanlucasvillas.net/photoviewer/images/spacer.gif" width="17" height="17" border="0" id="left" /></div>\n';
	pv += '<table width="" cellspacing="1" border="0" cellpadding="1" bgcolor="#ccc"><tr>\n';
	
	if (imgArray.length <= 6) {
		for (var i=0; i<imgArray.length; i++) {
			pv += '<td><img src="' + thmbArray[i].src + '" width="50" height="50" border="0" onclick="loadMainImg(' + i + ');" id="thmb' + i + '" /></td>';
		}
	} else {
	  	for (var i=0; i <= 6; i++) {
			pv += '<td><img src="' + thmbArray[i].src + '" width="50" height="50" border="0" onclick="loadMainImg(' + i + ');" id="thmb' + i + '" /></td>';
		}
	}
	
	pv += '</tr></table>';
	
	pv += '<div class="rght" onclick="sortThmb(1);">';
	pv += '<img src="http://www.cabosanlucasvillas.net/photoviewer/images/spacer.gif" width="17" height="17" border="0" id="rght" /></div>\n';
	
	pv += '<div class="play" onclick="toggleTimer();" style="display:block;" id="play">';
	pv += '<img src="http://www.cabosanlucasvillas.net/photoviewer/images/spacer.gif" width="17" height="17" border="0"  /></div>\n';
	
	pv += '<div class="paus" onclick="toggleTimer();" style="display:none;" id="paus">';
	pv += '<img src="http://www.cabosanlucasvillas.net/photoviewer/images/spacer.gif" width="17" height="17" border="0" /></div>\n';
	
	pv += '<div class="prev" onclick="loadPrevImage();">';
	pv += '<img src="http://www.cabosanlucasvillas.net/photoviewer/images/spacer.gif" width="17" height="17" border="0" id="prev" /></div>\n';
	
	pv += '<div class="next" onclick="loadNextImage();">';
	pv += '<img src="http://www.cabosanlucasvillas.net/photoviewer/images/spacer.gif" width="17" height="17" border="0" id="next" /></div>\n';
	
    pv += '</div>\n';
    document.getElementById("photoViewerContainer").innerHTML = pv;
}