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

//Directory to the display images
var phodir = "media/photoviewer/corevt/";

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

//Text that appears on the left of the viewer
var viewerTitle = "The High Lonesome Ranch";

//Text that appears on the right of the viewer
var viewerCaption = "Corporate Events";

//Instantiate the Browser detection objects
//located in browser-detect.js
var bdb = BrowserDetect.browser;
var bdv = BrowserDetect.version;
var bdo = BrowserDetect.OS;

//Just the name of the images in phodir
//No extensions!
var imgArray = [];
imgArray[0] = "0001";
imgArray[1] = "1432";
imgArray[2] = "2003";
imgArray[3] = "5550";
imgArray[4] = "5551";
imgArray[5] = "5553";
imgArray[6] = "5554";
imgArray[7] = "5557";
imgArray[8] = "5558";
imgArray[9] = "5559";

//The arrays of photo captions
//This works in tandem with the imgArray
var capArray = [];
var cpdArray = [];
capArray[0] = "1";
capArray[1] = "2";
capArray[2] = "3";
capArray[3] = "4";
capArray[4] = "5";
capArray[5] = "6";
capArray[6] = "7";
capArray[7] = "8";
capArray[8] = "9";
capArray[9] = "10";
cpdArray = capArray;

//Set the starting point
var imgStartNumber = 0;

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

//Preload the thumbnails
var thmb0= new Image(46,20); 
thmb0.src = phodir + imgArray[0] + "thmb.gif";
var thmb1= new Image(46,20); 
thmb1.src = phodir + imgArray[1] + "thmb.gif";
var thmb2= new Image(46,20); 
thmb2.src = phodir + imgArray[2] + "thmb.gif";
var thmb3= new Image(46,20); 
thmb3.src = phodir + imgArray[3] + "thmb.gif";
var thmb4= new Image(46,20); 
thmb4.src = phodir + imgArray[4] + "thmb.gif";
var thmb5= new Image(46,20); 
thmb5.src = phodir + imgArray[5] + "thmb.gif";
var thmb6= new Image(46,20); 
thmb6.src = phodir + imgArray[6] + "thmb.gif";
var thmb7= new Image(46,20); 
thmb7.src = phodir + imgArray[7] + "thmb.gif";
var thmb8= new Image(46,20); 
thmb8.src = phodir + imgArray[8] + "thmb.gif";
var thmb9= new Image(46,20); 
thmb9.src = phodir + imgArray[9] + "thmb.gif";

//Preload the photos
var pic0= new Image(600,250); 
pic0.src = phodir + imgArray[0] + ".jpg";
var pic1= new Image(600,250); 
pic1.src = phodir + imgArray[1] + ".jpg";
var pic2= new Image(600,250); 
pic2.src = phodir + imgArray[2] + ".jpg";
var pic3= new Image(600,250); 
pic3.src = phodir + imgArray[3] + ".jpg";
var pic4= new Image(600,250); 
pic4.src = phodir + imgArray[4] + ".jpg";
var pic5= new Image(600,250); 
pic5.src = phodir + imgArray[5] + ".jpg";
var pic6= new Image(600,250); 
pic6.src = phodir + imgArray[6] + ".jpg";
var pic7= new Image(600,250); 
pic7.src = phodir + imgArray[7] + ".jpg";
var pic8= new Image(600,250); 
pic8.src = phodir + imgArray[8] + ".jpg";
var pic9= new Image(600,250); 
pic9.src = phodir + imgArray[9] + ".jpg";

//Preload the user interface images for next image
var next = new Image(16,20);
next.src = imgdir + "next.gif";
var nextover = new Image(16,20);
nextover.src = imgdir + "next_over.gif";

//Preload the user interface images for previous image
var prev = new Image(16,20);
prev.src = imgdir + "prev.gif";
var prevover = new Image(16,20);
prevover.src = imgdir + "prev_over.gif";

//Preload the user interface images for next image rollover
var left = new Image(16,16);
left.src = imgdir + "left.gif";
var leftover = new Image(16,16);
leftover.src = imgdir + "left_over.gif";

//Preload the user interface images for previous image rollover
var rght = new Image(16,16);
rght.src = imgdir + "right.gif";
var rghtover = new Image(16,16);
rghtover.src = imgdir + "right_over.gif";

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

//The constructor so to speak
function photoViewer() {
	//srt array means sort array. Instantiate it!
    srtArray = imgArray;
	
	//Browser Control
	if ((bdb == "Opera" && bdv < 8) || (bdb == "konquerer" && bdv < 5)) {
		//Thes browsers suck! Just display an image
        document.write('<div id="photoViewerContainer"><img src="' + pic0.src + '" width="600" heigh="250" border="0" /></div>');
    } else if (bdb == "Explorer" && bdv < 8){
		//Create the div container that we will load with the photoviewer
        //document.write('<div id="photoViewerContainer"></div>');
		//Write the traditional HTML Table version
        writeViewerTables(curImageNum);
    } else {
		//Create the div container that we will load with the photoviewer
	    //document.write('<div id="photoViewerContainer"></div>');
		//Write the CSS tables version
        writeViewer(curImageNum);
	}
}

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

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

//Replace the current photo with the new photo
function loadMainImg(n){
	switch(n) {
	case 0:
		//redefine the sources
		pic0.src = phodir + srtArray[0] + ".jpg";
		//replace the image
		document.getElementById("mimg").style.backgroundImage = "url(" + pic0.src + ")";
		break;
	case 1:
		pic1.src = phodir + srtArray[1] + ".jpg";
		document.getElementById("mimg").style.backgroundImage = "url(" + pic1.src + ")";
		break;
	case 2:
		pic2.src = phodir + srtArray[2] + ".jpg";
		document.getElementById("mimg").style.backgroundImage = "url(" + pic2.src + ")";
		break;
	case 3:
		pic3.src = phodir + srtArray[3] + ".jpg";
		document.getElementById("mimg").style.backgroundImage = "url(" + pic3.src + ")";
		break;
	case 4:
		pic4.src = phodir + srtArray[4] + ".jpg";
		document.getElementById("mimg").style.backgroundImage = "url(" + pic4.src + ")";
		break;
	case 5:
		pic5.src = phodir + srtArray[5] + ".jpg";
		document.getElementById("mimg").style.backgroundImage = "url(" + pic5.src + ")";
		break;
	case 6:
		pic6.src = phodir + srtArray[6] + ".jpg";
		document.getElementById("mimg").style.backgroundImage = "url(" + pic6.src + ")";
		break;
	case 7:
		pic7.src = phodir + srtArray[7] + ".jpg";
		document.getElementById("mimg").style.backgroundImage = "url(" + pic7.src + ")";
		break;
	case 8:
		pic8.src = phodir + srtArray[8] + ".jpg";
		document.getElementById("mimg").style.backgroundImage = "url(" + pic8.src + ")";
		break;
	case 9:
		pic9.src = phodir + srtArray[9] + ".jpg";
		document.getElementById("mimg").style.backgroundImage = "url(" + pic9.src + ")";
		break;
	default:
		pic0.src = phodir + srtArray[0] + ".jpg";
		document.getElementById("mimg").style.backgroundImage = "url(" + pic0.src + ")";
	}
	 curImageNum = n;
	 var c = n+1;
	 //document.getElementById("index").innerHTML = 'Image ' + c + ' of ' + imgArray.length;
	 document.getElementById("index").innerHTML = viewerTitle;
	 //document.getElementById("caption").innerHTML = cpdArray[n];
	 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++;
			//if you want the main image to reload when sorting thumbs, uncomment this
			//curImageNum++;
		}
	} else {
		if(imgStartNumber == 0) {
        	imgStartNumber = imgArray.length - 1;
    	}else{
        	imgStartNumber--;
			//if you want the main image to reload when sorting thumbs, uncomment this
			//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. 
	//THIS HAS TO BE THE SAME NUMBER OF ELEMENTS AS imgArray
	thmb0.src = phodir + srtArray[0] + "thmb.gif";
	thmb1.src = phodir + srtArray[1] + "thmb.gif";
	thmb2.src = phodir + srtArray[2] + "thmb.gif";
	thmb3.src = phodir + srtArray[3] + "thmb.gif";
	thmb4.src = phodir + srtArray[4] + "thmb.gif";
	thmb5.src = phodir + srtArray[5] + "thmb.gif";
	thmb6.src = phodir + srtArray[6] + "thmb.gif";
	thmb7.src = phodir + srtArray[7] + "thmb.gif";
	thmb8.src = phodir + srtArray[8] + "thmb.gif";
	thmb9.src = phodir + srtArray[9] + "thmb.gif";
	
	//Depending on the browser, rewrite the PhotoViewer
	if ((bdb == "Opera" && bdv < 8) || (bdb == "konquerer" && bdv < 5)) {
		document.getElementById("photoViewerContainer").innerHTML = '<img src="' + pic0.src + '" width="600" heigh="250" border="0" />';
    } else if (bdb == "Explorer" && bdv < 8){
        writeViewerTables(curImageNum);
    } else {
        writeViewer(curImageNum);
	}
}

//CSS rollovers caused some problems in some browsers.
//Rollovers using javascript

function nextOver(){
	document.getElementById("next").src=nextover.src;
}

function nextOut(){
	document.getElementById("next").src=next.src;
}

function prevOver(){
	document.getElementById("prev").src=prevover.src;
}

function prevOut(){
	document.getElementById("prev").src=prev.src;
}

function rghtOver(){
	document.getElementById("rght").src=rghtover.src;
}

function rghtOut(){
	document.getElementById("rght").src=rght.src;
}

function leftOver(){
	document.getElementById("left").src=leftover.src;
}

function leftOut(){
	document.getElementById("left").src=left.src;
}

//CSS Tables Version
function writeViewer(n){
	var imgCount = n;
	
    var pv = '<div class="photoviewer">\n';
	pv += '<div class="load" id="load" style="background:url(' + rotateicon.src + ');"></div>\n';
	
	switch(n) {
	case 0:
		pv += '<div class="main" id="mimg" style="background:url(' + pic0.src + ');"></div>\n';
	  	break;
	case 1:
		pv += '<div class="main" id="mimg" style="background:url(' + pic1.src + ');"></div>\n';
	  	break;
	case 2:
		pv += '<div class="main" id="mimg" style="background:url(' + pic2.src + ');"></div>\n';
	 	 break;
	case 3:
		pv += '<div class="main" id="mimg" style="background:url(' + pic3.src + ');"></div>\n';
	 	 break;
	case 4:
		pv += '<div class="main" id="mimg" style="background:url(' + pic4.src + ');"></div>\n';
	  	break;
	case 5:
		pv += '<div class="main" id="mimg" style="background:url(' + pic5.src + ');"></div>\n';
	  	break;
	case 6:
		pv += '<div class="main" id="mimg" style="background:url(' + pic6.src + ');"></div>\n';
	 	 break;
	case 7:
		pv += '<div class="main" id="mimg" style="background:url(' + pic7.src + ');"></div>\n';
	 	 break;
	case 8:
		pv += '<div class="main" id="mimg" style="background:url(' + pic8.src + ');"></div>\n';
	 	 break;
	case 9:
		pv += '<div class="main" id="mimg" style="background:url(' + pic9.src + ');"></div>\n';
	  	break;
	default:
		pv += '<div class="main" id="mimg" style="background:url(' + pic0.src + ');"></div>\n';
	}
	
    pv += '<div class="left" onclick="sortThmb(0);" onmouseover="leftOver();" onmouseout="leftOut();"><img src="' + left.src + '" width="16" height="16" border="0" id="left" /></div>\n';
	pv += '<div class="index" id="index">' + viewerTitle + '</div>';
	pv += '<div class="caption" id="caption">' + viewerCaption + '</div>';
    pv += '<div class="thmb">\n';
    pv += '<div class="row">\n';
    pv += '<div class="cell" id="thmb0" style="background:url(' + thmb0.src + ');" onclick="loadMainImg(0);"></div>\n';
    pv += '<div class="cell" id="thmb1" style="background:url(' + thmb1.src + ');" onclick="loadMainImg(1);"></div>\n';
    pv += '<div class="cell" id="thmb2" style="background:url(' + thmb2.src + ');" onclick="loadMainImg(2);"></div>\n';
    pv += '<div class="cell" id="thmb3" style="background:url(' + thmb3.src + ');" onclick="loadMainImg(3);"></div>\n';
    pv += '<div class="cell" id="thmb4" style="background:url(' + thmb4.src + ');" onclick="loadMainImg(4);"></div>\n';
    pv += '<div class="cell" id="thmb5" style="background:url(' + thmb5.src + ');" onclick="loadMainImg(5);"></div>\n';
    pv += '<div class="cell" id="thmb6" style="background:url(' + thmb6.src + ');" onclick="loadMainImg(6);"></div>\n';
    pv += '<div class="cell" id="thmb7" style="background:url(' + thmb7.src + ');" onclick="loadMainImg(7);"></div>\n';
    pv += '<div class="cell" id="thmb8" style="background:url(' + thmb8.src + ');" onclick="loadMainImg(8);"></div>\n';
    pv += '<div class="cell" id="thmb9" style="background:url(' + thmb9.src + ');" onclick="loadMainImg(9);"></div>\n';
    pv += '</div>\n';
    pv += '</div>\n';
    pv += '<div class="rght" onclick="sortThmb(1);" onmouseover="rghtOver();" onmouseout="rghtOut();"><img src="' + rght.src + '" width="16" height="16" border="0" id="rght" /></div>\n';
	pv += '<div class="prev" onclick="loadPrevImage();" onmouseover="prevOver();" onmouseout="prevOut();"><img src="' + prev.src + '" width="16" height="20" border="0" id="prev" /></div>\n';
	pv += '<div class="next" onclick="loadNextImage();" onmouseover="nextOver();" onmouseout="nextOut();"><img src="' + next.src + '" width="16" height="20" border="0" id="next" /></div>\n';
    pv += '</div>\n';
    document.getElementById("photoViewerContainer").innerHTML = pv;
}

// HTML Tables version 
function writeViewerTables(n){
    var pv = '<div class="photoviewer">\n';
	pv += '<div class="load" id="load" style="background:url(' + rotateicon.src + ');"></div>\n';
	
	switch(n) {
	case 0:
		pv += '<div class="main" id="mimg" style="background:url(' + pic0.src + ');"></div>\n';
	  	break;
	case 1:
		pv += '<div class="main" id="mimg" style="background:url(' + pic1.src + ');"></div>\n';
	  	break;
	case 2:
		pv += '<div class="main" id="mimg" style="background:url(' + pic2.src + ');"></div>\n';
	 	 break;
	case 3:
		pv += '<div class="main" id="mimg" style="background:url(' + pic3.src + ');"></div>\n';
	 	 break;
	case 4:
		pv += '<div class="main" id="mimg" style="background:url(' + pic4.src + ');"></div>\n';
	  	break;
	case 5:
		pv += '<div class="main" id="mimg" style="background:url(' + pic5.src + ');"></div>\n';
	  	break;
	case 6:
		pv += '<div class="main" id="mimg" style="background:url(' + pic6.src + ');"></div>\n';
	 	 break;
	case 7:
		pv += '<div class="main" id="mimg" style="background:url(' + pic7.src + ');"></div>\n';
	 	 break;
	case 8:
		pv += '<div class="main" id="mimg" style="background:url(' + pic8.src + ');"></div>\n';
	 	 break;
	case 9:
		pv += '<div class="main" id="mimg" style="background:url(' + pic9.src + ');"></div>\n';
	  	break;
	default:
		pv += '<div class="main" id="mimg" style="background:url(' + pic0.src + ');"></div>\n';
	}
	
    pv += '<div class="left" onclick="sortThmb(0);" onmouseover="leftOver();" onmouseout="leftOut();"><img src="' + left.src + '" width="16" height="16" border="0" id="left" /></div>\n';
	pv += '<div class="index" id="index">' + viewerTitle + '</div>';
	pv += '<div class="caption" id="caption">' + viewerCaption + '</div>';
	pv += '<table width="300" cellspacing="1" border="0" cellpadding="0"><tr>\n';
	pv += '<td id="thmb0"><img src="' + thmb0.src + '" width="46" height="20" border="0" onclick="loadMainImg(0);" /></td>';
	pv += '<td id="thmb1"><img src="' + thmb1.src + '" width="46" height="20" border="0" onclick="loadMainImg(1);" /></td>';
	pv += '<td id="thmb2"><img src="' + thmb2.src + '" width="46" height="20" border="0" onclick="loadMainImg(2);" /></td>';
	pv += '<td id="thmb3"><img src="' + thmb3.src + '" width="46" height="20" border="0" onclick="loadMainImg(3);" /></td>';
	pv += '<td id="thmb4"><img src="' + thmb4.src + '" width="46" height="20" border="0" onclick="loadMainImg(4);" /></td>';
	pv += '<td id="thmb5"><img src="' + thmb5.src + '" width="46" height="20" border="0" onclick="loadMainImg(5);" /></td>';
	pv += '<td id="thmb6"><img src="' + thmb6.src + '" width="46" height="20" border="0" onclick="loadMainImg(6);" /></td>';
	pv += '<td id="thmb7"><img src="' + thmb7.src + '" width="46" height="20" border="0" onclick="loadMainImg(7);" /></td>';
	pv += '<td id="thmb8"><img src="' + thmb8.src + '" width="46" height="20" border="0" onclick="loadMainImg(8);" /></td>';
	pv += '<td id="thmb9"><img src="' + thmb9.src + '" width="46" height="20" border="0" onclick="loadMainImg(9);" /></td>';
	pv += '</tr></table>';
    pv += '<div class="rght" onclick="sortThmb(1);" onmouseover="rghtOver();" onmouseout="rghtOut();"><img src="' + rght.src + '" width="16" height="16" border="0" id="rght" /></div>\n';
	pv += '<div class="prev" onclick="loadPrevImage();" onmouseover="prevOver();" onmouseout="prevOut();"><img src="' + prev.src + '" width="16" height="20" border="0" id="prev" /></div>\n';
	pv += '<div class="next" onclick="loadNextImage();" onmouseover="nextOver();" onmouseout="nextOut();"><img src="' + next.src + '" width="16" height="20" border="0" id="next" /></div>\n';
    pv += '</div>\n';
    document.getElementById("photoViewerContainer").innerHTML = pv;
}