// JavaScript Document

var imgArray = new Array();
var orderSizes = new Array();

var imagePath = "images/"
var numRows = 5;
var numCols = 2;
var displayHead = true;
var headerString = "";
var orderBool = true;
var orderBorder = "2px solid rgb(160,160,170)";
var thumbBorder = "2px solid rgb(60,60,60)";
var tax = false;

var currentGroup = 0;
var orderGroup   = 1;
var currentImage = 0;
var currentPage  = 0;
var maxPage      = Math.ceil((imgArray[currentGroup].length-1) / (numRows * numCols));
var orderPhase   = 1;

// image preloader
function preloadImgs() {
	// preloads all the images for the mouseover
	for(i=0;i<imgArray.length;i++) {
		for(j=1;j<imgArray[i].length;j++) {
				var imga = new Image(1,1);
				imga.src = imagePath + imgArray[i][j][1];
		}
	}
}

function swapDisplay(me) {
	// changes the image in the display position
	indexNum = me.rel;
	if (indexNum >= 0 && indexNum < imgArray[currentGroup].length) {
		document.getElementById("imageDisplay").src = imagePath + imgArray[currentGroup][indexNum][1];
		document.getElementById("captionZone").innerHTML = 	"Image: " +  imgArray[currentGroup][indexNum][1].slice(0,imgArray[currentGroup][indexNum][1].indexOf("."));
	}
}

function orderImageToggle(me) {
	if (orderBool) {
		indexNum = me.rel;
		if (indexNum >= 0 && indexNum < imgArray[currentGroup].length) {
			imgArray[currentGroup][indexNum][2] = !imgArray[currentGroup][indexNum][2];
			if (imgArray[currentGroup][indexNum][2]) {
				document.getElementById(me.id).style.border = orderBorder;
			} else {
				document.getElementById(me.id).style.border = thumbBorder;
			}
		}
		document.getElementById("orderer").rel = 1;
		document.getElementById("orderer").value = "next";
	}
}

function prepForOrder() {
	orderPhase = document.getElementById("orderer").rel;
	orderCount = 0;
	j=1;
	orderGroup = currentGroup+1;
	imgArray[orderGroup] = new Array();
	for(var i=1; i < imgArray[currentGroup].length; i++ ) {
		if (imgArray[currentGroup][i][2]) {
			imgArray[orderGroup][j++] = imgArray[currentGroup][i];
			orderCount++;
		}						
	}
	if (orderCount == 0) {
	  orderGroup = 0;
	  currentGroup = orderGroup;
	  swapPage(0);
	  document.getElementById("orderer").rel = 1;
	  document.getElementById("orderer").value = "next";
	  
	} else {
		if (orderPhase == 2 && orderCount > 0) {
				document.getElementById("apgs").innerHTML = drawOrderForm();
				updateOrder();
		} else {
		  currentGroup = orderGroup;
		  swapPage(0);
		  document.getElementById("orderer").rel = 2;
		  orderPhase = 2;
		  document.getElementById("orderer").value = "complete";
		}
	}
}

function updateOrder(me) {
	var total = 0;
	if (me) {
		var rels  = me.getAttribute("rel").split("::");
		var imgNum  = rels[0];
		var sizeNum = rels[1];
		if(imgNum == "all") {
			// update all fields in the catagory to value
			for (var i = 1; i < imgArray[currentGroup].length; i++) {
				imgArray[currentGroup][i][3][sizeNum] = me.value;
				document.getElementById(i+"::"+sizeNum).value = me.value;
			}	
		} else {
			imgArray[currentGroup][imgNum][3][sizeNum] = me.value;
		}
	}
	for (var i = 1; i < imgArray[currentGroup].length; i++) {
		for (var j = 0; j < orderSizes.length; j++) {
			if(imgArray[currentGroup][i][3][j]) { 
			total += orderSizes[j][1] * imgArray[currentGroup][i][3][j];
			}
		}
	}
	if (tax) {
		total *= 1.0875; // taxes
	}
	document.getElementById("orderFormTotal").value = total.toFixed(2);
}

function resetOrder() {
	for (var i = 1; i < imgArray[currentGroup].length; i++) {
		for (var j = 0; j < orderSizes.length; j++) {
			imgArray[currentGroup][i][3][j] = 0;
			document.getElementById("all::"+j).value = 0;
			document.getElementById(i+"::"+j).value = 0;
		}
	}
	updateOrder();
}

function hideThumbs(start) {
	numImages = numRows*numCols;
	for(var i = start; i <= numImages; i++) {
		current = ("thumb" + i);
		document.getElementById(current).style.visibility = "hidden";
	}
}

function swapPage(pageNum) {
	maxPage = Math.ceil((imgArray[currentGroup].length-1) / (numRows * numCols));
	if (pageNum <= maxPage) {
		currentPage = pageNum;
		numImages = numRows*numCols;
		startImage = pageNum*numImages+1;
		var y = 1;
		for(var i=startImage; i < Math.min(startImage+numImages, imgArray[currentGroup].length); i++) {
			current = ("thumb" + y++);
			document.getElementById(current).src = imagePath + imgArray[currentGroup][i][0];
			document.getElementById(current).style.visibility = "visible";
			document.getElementById(current).rel = i;
			if (imgArray[currentGroup][i][2]) {
				document.getElementById(current).style.border = orderBorder;
			} else {
				document.getElementById(current).style.border = thumbBorder;
			}
		}
		document.getElementById("imageDisplay").src = imagePath + imgArray[currentGroup][startImage][1];
		document.getElementById("captionZone").innerHTML = 	"Image: " +  imgArray[currentGroup][startImage][1].slice(0,imgArray[currentGroup][startImage][1].indexOf("."));
		document.getElementById("headerZone").innerHTML = headerString + " page " + (currentPage + 1) + " of " + (maxPage); 
	}
	hideThumbs(y);
	updateNav();
}
				
function updateNav() {
	if (currentPage == 0) {
		document.getElementById("prevPage").style.visibility = "hidden";
	} else {
		document.getElementById("prevPage").style.visibility = "visible";
		document.getElementById("prevPage").onclick = function() {swapPage((currentPage - 1))};
	}
	if (currentPage == maxPage-1) {
		document.getElementById("nextPage").style.visibility = "hidden";
	} else {
		document.getElementById("nextPage").style.visibility = "visible";
		document.getElementById("nextPage").onclick = function() {swapPage((currentPage + 1))};
	}
}

function drawThumbs() {
	var string = "<table id=\"thumbs\">\n"; 
	var z = 1;
	for (var i=0; i < numRows; i++) {
		string += "<tr>\n";
		for (var j=0; j < numCols; j++) {
			string += "<td><img id=\"thumb"+z+"\" rel=\""+z+"\" onclick=\"orderImageToggle(this);\" onmouseover=\"swapDisplay(this);\" src=\"\"></td>\n";
			z++;
		}
		string += "</tr>\n";
	}
	string += "<tr><td colSpan=\""+numCols+"\"><img id=\"prevPage\" src=\"../" + imagePath + "prev.gif\"><img id=\"nextPage\" src=\"../" + imagePath + "next.gif\"></td></tr>\n";
	string += "</table>\n";
	return string;
}

function drawOrderButton() {
	if (orderBool && orderPhase == 1) {
		return "<button id=\"orderer\" rel=\"1\" onclick=\"prepForOrder();\">next</button>";
	} else if (orderBool) {
		return "<button id=\"orderer\" rel=\"2\" onclick=\"prepForOrder();\">continue</button>";
	}
	return "";
}

function drawDisplay() {
	var string = "<table id=\"display\">";
	if (displayHead) {
		string    += "<tr><td colspan=\"2\" id=\"headerZone\">&nbsp;</td></tr>";
	}
	string    += "<tr><td id=\"thumbZone\" rowspan=\"2\">" + drawThumbs() + "</td><td id=\"displayZone\"><img id=\"imageDisplay\" src=\"" + imagePath + imgArray[currentGroup][1][1] + "\"></td></tr>";
	string    += "<tr><td>&nbsp;<div  id=\"captionZone\"></div>"+drawOrderButton()+"</td></tr>\n";
	if (orderBool) {
		string    += "<tr><td>Click the thumbnails of all the images you are interested in.<br />They will be highlighted.<br />Click again to deselect.</td><td>Click continue to view only the photos you have selected.<br />Then press continue again to order your prints.</td></tr>\n";
	}
	string    += "</table>";
	return string;
}

function drawOrderForm() {
	var string = "";
	string += "<form id=\"orderForm\">";
	string += "<table id=\"orderTable\">";
	string += "<tr><td id=\"orderList\">"+drawOrderList()+"</td></tr>"; // list of images
	string += "<tr><td id=\"orderTotal\"><br />Total: <input id=\"orderFormTotal\" type=\"text\" readonly size=\"6\"> includes sales tax</td></tr>"; // total line
	string += "<tr><td id=\"orderContact\">"+drawOrderContact()+"</td></tr>"; // contact info
	string += "</table></form>";
	return string;
}

function drawOrderList() {
	var string = "";
	string += "<table id=\"orderListTable\">";
	string += "<tr id=\"globalRow\"><td>&nbsp;</td><td><button onclick=\"resetOrder()\" type=\"button\" value=\"reset all\">reset all</button></td>" + drawOrderSizes("all") + "</tr>";
	for(var i=1; i < imgArray[currentGroup].length; i++){
		string += "<tr><td><img id=\""+imgArray[currentGroup][i][1]+"\" src=\""+imagePath+imgArray[currentGroup][i][0]+"\"></td><td>#"+imgArray[currentGroup][i][1].slice(0,imgArray[currentGroup][i][1].indexOf("."))+"</td>" + drawOrderSizes(i) + "</tr>";
		//string += "<tr></tr>";
	}
	string += "</table>";
	return string;
}

function drawOrderSizes(imageNum) {
	var string = "";
	for(var i=0; i < orderSizes.length; i++) {
		string += "<td>" + orderSizes[i][0] + " <input type=\"text\" rel=\"" + imageNum + "::"+i+"\" onChange=\"updateOrder(this);\" id=\"" + imageNum + "::"+i+"\" size=\"2\" value=\"0\"></td>";
	}
	return string;
	
}

function drawOrderContact() {
	var string = "";
	string += "<table><tr><td>Name:</td><td><input type=\"text\" id=\"nameContact\"></td><td>Childs Name:</td><td><input type=\"text\" id=\"childContact\"></td></tr>";
	string += "<tr><td>Email:</td><td><input type=\"text\" id=\"emailContact\"></td><td>Phone:</td><td><input type=\"text\" id=\"phoneContact\"></td></tr></table>";
	
	string = "<br />Please <button onclick=\"window.print()\" value=\"print\" type=\"button\">print</button> this page and bring it to the next game or practice along with the amount located in the total.";
	
	return string;
}

function initialize() {
		preloadImgs();
		document.getElementById("apgs").innerHTML = drawDisplay();
		updateNav();
}