// Functions for multi-product navigation

is6Items = 0;   // 6-color item? (0, 6 or 4)
reqChanges = 0; 	// Select item, request changes
URLChanges = "";	// URL to pass the item to  
showName = 0;  // Show the name of the item
showDesc = 0;  // Show item description (index 7)
showView = 0; // Show item page
PayPal = 0; // Pay pal order button

function dispItems(page)
{
	var idx = hItems * vItems * (page-1); // Starting index
	var lastIdx = idx + hItems * vItems;
	var tableData = "<table width=\'100%\' border=\'0\' cellspacing=\'2\' cellpadding=\'2\' align=\'center\'>";
	var flip = 1;
	for(var cnt=idx; cnt<lastIdx; cnt++)
	{
		if(cnt>=items.length) break;
		
		if(flip) tableData += "<tr align=\'center\'>"; 
		flip = !flip;
		var fname = items[cnt][0];
		
		if(showView) // The image is a thumbnail of a preview
		{
			tableData += "<div align=\'center\'><td><a href=\'" + URLChanges + items[cnt][0];
			tableData += "/HTML/index.html\'  target=\'_blank\'><img src=\'" + folder + fname + ".jpg\' border=\'0\' /></a>";			
		}
		else // The image leads to ordering
		{
			tableData += "<div align=\'center\'><td><a href=\'" + items[cnt][1] + "\'><img src=\'" + folder + fname + ".jpg\' border=\'0\' /></a>";
		}
		
		if(showName)
		{
			tableData += "<br /><p><i>" + items[cnt][0];
			if(showDesc)
			{
				tableData += ", " + items[cnt][7];
			}
			tableData += "<br /></i></p>&nbsp;";
		}
		tableData += "</td></div>";

		if(reqChanges)
		{
			tableData += "<div align=\'center\'><td><a href=\'" + items[cnt][1] + "\'><img alt=\'Place your order\'  src=\'images/order.png\' border=\'0\' /></a><br /><br /><a href=\'" + URLChanges + items[cnt][0] + "\'><img alt=\'Request changes\' src=\'images/request_changes.png\' border=\'0\' /></a></td></div>";
		}
		if(showView)
		{
			tableData += "<div align=\'center\'><td>";
			if(PayPal) tableData += orderPayPal(cnt);
			else tableData += "<a href=\'" + items[cnt][1] + "\'><img alt=\'Place your order\'  src=\'images/order.png\' border=\'0\' /></a>";
			tableData += "<br /><br /><a href=\'" + URLChanges + items[cnt][0];
			tableData += "/HTML/index.html\'  target=\'_blank\'><img alt=\'Show Preview\' src=\'images/preview.png\' border=\'0\' /></a></td></div>";			
		}
		if((flip)||(cnt==lastIdx-1)) tableData += "</tr>"; 
	}
	tableData+="</table>";	
	document.getElementById('products').innerHTML = tableData;

	curIdx = idx; // Update page info

	dispNavigation();
}

function dispNavigation()
{
// Calculate the total number of pages	
	var nPages = parseInt(items.length /(hItems * vItems));
	if(items.length % (hItems * vItems)) nPages++;
	if(nPages==1) return; // Only one page
	
	var navStr = "<p align=\'center\'>";
	
// Current page	
	var curPage = curIdx / (hItems * vItems) + 1;
	
// First
	if(curPage > 1)
	{
		navStr += linkPage(1) + "<img src=\'images/first.gif\' align=\'absmiddle\' border=\'0\' /></a>&nbsp;" + linkPage(curPage-1) + "<img src=\'images/back.gif\' align=\'absmiddle\' border=\'0\' /></a>";
	}
	
// 3 pages before
	if((curPage - 3)> 0) navStr += "&nbsp;" + linkPage(curPage - 3) + (curPage - 3) + "</a>&nbsp;";
	if((curPage - 2)> 0) navStr += "&nbsp;" + linkPage(curPage - 2) + (curPage - 2) + "</a>&nbsp;";
	if((curPage - 1)> 0) navStr += "&nbsp;" + linkPage(curPage - 1) + (curPage - 1) + "</a>&nbsp;";		

// Current page
	navStr += "<font size='3'><strong>&nbsp;" + curPage + "&nbsp;</strong></font>";
	
// 3 pages after
	if((curPage)< (nPages)) navStr += "&nbsp;" + linkPage(curPage + 1) + (curPage + 1) + "</a>&nbsp;";
	if((curPage + 1)< (nPages)) navStr += "&nbsp;" + linkPage(curPage + 2) + (curPage + 2) + "</a>&nbsp;";
	if((curPage + 2)< (nPages)) navStr += "&nbsp;" + linkPage(curPage + 3) + (curPage + 3) + "</a>&nbsp;";

// Of...
	if(curPage < nPages) navStr += "&nbsp;of &nbsp;" + linkPage(nPages) + nPages + "</a>&nbsp;&nbsp;";
	else 				 navStr += "&nbsp;of &nbsp;" + nPages + "&nbsp;";
	
// Last
	if(curIdx<items.length-1)
	{
		navStr += linkPage(curPage + 1) + "<img src=\'images/next.gif\' align=\'absmiddle\' border=\'0\' /></a>&nbsp;" + linkPage(nPages) + "<img src=\'images/last.gif\' align=\'absmiddle\' border=\'0\' /></a>";
	}

	navStr += "</p>";
	
// OK, display
	document.getElementById('navTop').innerHTML = navStr;
	document.getElementById('navBot').innerHTML = navStr;	
}

function linkPage(p)
{
	if(is6Items) return("<a href='#' onclick=disp6Items(" + p + ");>");
	else return("<a href='#' onclick=dispItems(" + p + ");>");
}

// Support for economy 6-color
function disp6Items(page)
{	
	var idx = hItems * vItems * (page-1); // Starting index
	var lastIdx = idx + hItems * vItems;
	var tableData = "<table width=\'100%\' border=\'0\' cellspacing=\'2\' cellpadding=\'2\' align=\'center\'>";
	var flip = 1;
	for(var cnt=idx; cnt<lastIdx; cnt++)
	{
		if(cnt>=items.length) break;
		
		if(flip) tableData += "<tr align=\'center\'>"; 
		flip = !flip;
		var fname = items[cnt][0];
		// The main image with the link
		tableData += "<div align=\'center\'><td>" + mkLnk(items[cnt][1], cnt) + "<img id=\'p" + cnt + "\' " + "src=\'" + folder + fname + ".jpg\' border=\'0\' /></a>"
		if(showName)
		{
			tableData += "<br /><p><i>" + items[cnt][0];
			if(showDesc)
			{
				tableData += ", " + items[cnt][7];
			}
			tableData += "<br /></i></p>&nbsp;";
		}
		
		tableData += "</td></div>";
		// For each item we need 6 color buttons
		tableData += "<td valign=\'top\'>";
		tableData += mkLnk(items[cnt][1]);
		tableData += "<img src='images/Buttons/black1.png' width='23' height='23' border='0' onMouseOver='swapImg(" + cnt + ", 1);'></a><br />";
		tableData += mkLnk(items[cnt][2]);
		tableData += "<img src='images/Buttons/blue1.png' width='23' height='23' border='0' onMouseOver='swapImg(" + cnt + ", 2);'></a><br />";
		tableData += mkLnk(items[cnt][3]);
		tableData += "<img src='images/Buttons/red1.png' width='23' height='23' border='0' onMouseOver='swapImg(" + cnt + ", 3);'></a><br />";
		tableData += mkLnk(items[cnt][4]);
		tableData += "<img src='images/Buttons/green1.png' width='23' height='23' border='0' onMouseOver='swapImg(" + cnt + ", 4);'></a><br />";
		if(is6Items>4) // Last 2 buttons are optional
		{
		tableData += mkLnk(items[cnt][5]);
		tableData += "<img src='images/Buttons/pink1.png' width='23' height='23' border='0' onMouseOver='swapImg(" + cnt + ", 5);'></a><br />";
		tableData += mkLnk(items[cnt][6]);
		tableData += "<img src='images/Buttons/orange1.png' width='23' height='23' border='0' onMouseOver='swapImg(" + cnt + ", 6);'></a><br />";
		}
		tableData += "</td>";		
		if((flip)||(cnt==lastIdx-1)) tableData += "</tr>"; 
	}    
	
	tableData+="</table>";	
	document.getElementById('products').innerHTML = tableData;

	curIdx = idx; // Update page info

	dispNavigation();
}

function mkLnk(lnk, id)
{
	return("<a id=\'l" + id + "\' href=\'" + sLinkStart + lnk + sLinkEnd + "\'>");
}

function swapImg(id, clr)
{	
	var ext = "";
	switch(clr)
	{
	case 2:
		ext = "Blue";
		break;
	case 3:
		ext = "Red";
		break;
	case 4:
		ext = "Green";
		break;
	case 5:
		ext = "Pink";
		break;
	case 6:
		ext = "Orange";
		break;
	case 1: // Black
	default:
		break;
	}
	
	var fname = items[id][0];
	var newImg = folder + fname + ext + ".jpg";
	if(document.getElementById("p" + id).src == newImg) return;
	document.getElementById("p" + id).src = newImg;
	document.getElementById("l" + id).href = sLinkStart + items[id][clr] + sLinkEnd;
}