/*
A simple Image Viewer (JavaScript)

Author: Matthew La Rouche
Created: Nov. 5, 2008

Tested Browsers on MS Windows XP Pro. - ServicePack 3
	-	Internet Explorer 5.01
	-	Internet Explorer 5.5
	-	Internet Explorer 6
	-	Internet Explorer 8 Beta II
	-	Firefox 2.0.0.17
	-	Firefox 3.0.3
	-	Safari 3.1.2
	-	Google Chrome 0.3.154.9
	-	Opera 9.62
*/

//globals
var viewerImgRows = 4; //maximum rows, counting from 1
var viewerImgColumns = 6; //maximum columns, counting from 1

var currentRow = 0; //current index from 0
var currentColumn = 0; //current index from 0

var viewerImgArray = new Array(viewerImgRows); //total rows
for (var tempI = 0; tempI < viewerImgRows; tempI++){
	//initialize each row's array
	viewerImgArray[tempI] = new Array(viewerImgColumns); //total columns
}

//image names and relative paths
viewerImgArray[0][0] = "images/stores_sand_shop/full_product00.jpg";
viewerImgArray[0][1] = "images/stores_sand_shop/full_product01.jpg";
viewerImgArray[0][2] = "images/stores_sand_shop/full_product02.jpg";
viewerImgArray[0][3] = "images/stores_sand_shop/full_product03.jpg";
viewerImgArray[0][4] = "images/stores_sand_shop/full_product04.jpg";
viewerImgArray[0][5] = "images/stores_sand_shop/full_product05.jpg";

viewerImgArray[1][0] = "images/stores_sand_shop/full_product10.jpg";
viewerImgArray[1][1] = "images/stores_sand_shop/full_product11.jpg";
viewerImgArray[1][2] = "images/stores_sand_shop/full_product12.jpg";
viewerImgArray[1][3] = "images/stores_sand_shop/full_product13.jpg";
viewerImgArray[1][4] = "images/stores_sand_shop/full_product14.jpg";
viewerImgArray[1][5] = "images/stores_sand_shop/full_product15.jpg";

viewerImgArray[2][0] = "images/stores_sand_shop/full_product20.jpg";
viewerImgArray[2][1] = "images/stores_sand_shop/full_product21.jpg";
viewerImgArray[2][2] = "images/stores_sand_shop/full_product22.jpg";
viewerImgArray[2][3] = "images/stores_sand_shop/full_product23.jpg";
viewerImgArray[2][4] = "images/stores_sand_shop/full_product24.jpg";
viewerImgArray[2][5] = "images/stores_sand_shop/full_product25.jpg";

viewerImgArray[3][0] = "images/stores_sand_shop/full_product30.jpg";
viewerImgArray[3][1] = "images/stores_sand_shop/full_product31.jpg";
viewerImgArray[3][2] = "images/stores_sand_shop/full_product32.jpg";
viewerImgArray[3][3] = "images/stores_sand_shop/full_product33.jpg";
viewerImgArray[3][4] = "images/stores_sand_shop/full_product34.jpg";
viewerImgArray[3][5] = "images/stores_sand_shop/full_product35.jpg";

/*This function simply hides a layer, and completely removes it from the documents
flow (ie. takes up no space).*/
function hideLayer(layerID){
	document.getElementById(layerID).style.visibility = "hidden";
	document.getElementById(layerID).style.display = "none";
}

/*This function simply shows a layer, and inserts it back into the documents
flow (ie. takes up space). We use "inherit" otherwise this layer will no longer
hide when the parent hides; it is the correct default value / visible is not.*/
function showLayer(layerID){
	document.getElementById(layerID).style.visibility = "inherit";
	document.getElementById(layerID).style.display = "block";
}

/*This function simply shows the full image viewer and then sets the source for the
current image to the path and image in the array at the indexes specified in the parameters.
It also stores the indexes into the global index variables which are used to track
and iterate the next and previous images. As with arrays indexes this function 
counts from 0.*/
function viewFullImage(whichRow, whichColumn){
	//ensure browser support, otherwise warn user and do nothing
	if (document.getElementById){
		hideLayer("thumbsProducts");
		showLayer("viewerProducts");
		
		//show the requested image
		document.getElementById("viewerFullImg").src = viewerImgArray[whichRow][whichColumn];
		
		//record indexes
		currentRow = whichRow;
		currentColumn = whichColumn;
	}
	else {
		alert("Our apologies but this page does not support your browser, please try updating your browser or visit us using Microsoft Internet Explorer 5+, Mozilla Firefox, Apple Safari, Google Chrome, or Opera...");
	}
}

/*This function simply hides the full image viewer and shows the thumbnails viewer.*/
function viewThumbnails(){
	hideLayer("viewerProducts");
	showLayer("thumbsProducts");
}

/*This function is meant to browse to the next and previous images when called.  It will
wrap back to the start when it reachs the last image, and vice-versa at the beginning it will
wrap back to the ending.  Any value greater than 0 will cause it to increment to the next image,
and any value smaller than 0 will cause it to decrement to the previous image.*/
function iterateCurrentImg(modifier){
	if (modifier > 0){
		if (currentColumn < viewerImgColumns -1){
			currentColumn++;
		}
		else {	
			if (currentRow < viewerImgRows-1){
				currentRow++;
				currentColumn = 0;
			}
			else {
				currentRow = 0;
				currentColumn = 0;
			}
		}
	}
	else {
		if (currentColumn > 0){
			currentColumn--;
		}
		else {	
			if (currentRow > 0){
				currentRow--;
				currentColumn = viewerImgColumns-1;
			}
			else {
				currentRow = viewerImgRows-1;
				currentColumn = viewerImgColumns-1;
			}
		}
	}
	document.getElementById("viewerFullImg").src = viewerImgArray[currentRow][currentColumn];
}