var ItemName = "";
var ItemNo = "";
var smallPicWidth = 71;
var ItemDescription = "";
var ItemPrice = "";
var purchaseButtonID = "";
var smallPicView1 = "";
var smallPicAltText1 = "";
var smallPicView2 = "";
var smallPicAltText2 = "";
var smallPicView3 = "";
var smallPicAltText3 = "";
var smallPicView4 = "";
var smallPicAltText4 = "";
var smallPicView5 = "";
var smallPicAltText5 = "";

function writeItemInformationToPage()
{
	var numColumnsOfSmallPics = 1;
	var totalColumnsAcrossTbl = 3;
	var numberOfImages = 0;
	var tablewidth = smallPicWidth;
	var smallPicID1 = "img1" + ItemNo + "small";
	var smallPicSrc1 = "/Assets/pics/beads/" + ItemNo + "/" + smallPicView1 + "_xsmall.jpg";
	var smallPicID2 = "img2" + ItemNo + "small";
	var smallPicSrc2 = "/Assets/pics/beads/" + ItemNo + "/" + smallPicView2 + "_xsmall.jpg";
	var smallPicID3 = "img3" + ItemNo + "small";
	var smallPicSrc3 = "/Assets/pics/beads/" + ItemNo + "/" + smallPicView3 + "_xsmall.jpg";
	var smallPicID4 = "img4" + ItemNo + "small";
	var smallPicSrc4 = "/Assets/pics/beads/" + ItemNo + "/" + smallPicView4 + "_xsmall.jpg";
	var smallPicID5 = "img5" + ItemNo + "small";
	var smallPicSrc5 = "/Assets/pics/beads/" + ItemNo + "/" + smallPicView5 + "_xsmall.jpg";
	
	if(smallPicView1 != "")
	{
		numberOfImages = numberOfImages + 1
	}
	if(smallPicView2 != "")
	{
		numberOfImages = numberOfImages + 1
	}
	if(smallPicView3 != "")
	{
		numberOfImages = numberOfImages + 1
	}
	if(smallPicView4 != "")
	{
		numberOfImages = numberOfImages + 1
	}
	if(smallPicView5 != "")
	{
		numberOfImages = numberOfImages + 1
	}
	
	
	if(numberOfImages > 3) 
	{
		numColumnsOfSmallPics = 2;
	}
	totalColumnsAcrossTbl = 2 + numColumnsOfSmallPics;
	
	document.writeln("<table width='800' border='0' cellspacing='5' cellpadding='0'>");
    document.writeln("<tr>");
    document.writeln("<td colspan='" + totalColumnsAcrossTbl + "' align='center' valign='top'>");
	document.writeln("<font color='#FFFF00'><b><font size='+2' color='#CCCC33'>");
	document.writeln(ItemName);
	document.writeln("</font></b></font></td>");
    document.writeln("</tr>");
	
    document.writeln("<tr>");
	
	//the cell with the main picture
    document.writeln("<td align='right' valign='top' width='300'>");
	if(smallPicView1 != "")
	{
		document.writeln("<img id='img1" + ItemNo + "' src='/Assets/pics/beads/" + ItemNo + "/" + smallPicView1 + "_small.jpg' data-zoomsrc='/Assets/pics/beads/" + ItemNo + "/" + smallPicView1 + "_large.jpg' alt='" + smallPicAltText1 + "' border='0' moveimgx='0' align='top'><br>");
    } 
	if(smallPicView2 != "")
	{
		document.writeln("<img id='img2" + ItemNo + "' src='/Assets/pics/beads/" + ItemNo + "/" + smallPicView2 + "_small.jpg' data-zoomsrc='/Assets/pics/beads/" + ItemNo + "/" + smallPicView2 + "_large.jpg' style='display: none' alt='" + smallPicAltText2 + "' border='0' moveimgx='0' align='top'><br>");
    }
	if(smallPicView3 != "")
	{
		document.writeln("<img id='img3" + ItemNo + "' src='/Assets/pics/beads/" + ItemNo + "/" + smallPicView3 + "_small.jpg' data-zoomsrc='/Assets/pics/beads/" + ItemNo + "/" + smallPicView3 + "_large.jpg' style='display: none' alt='" + smallPicAltText3 + "' border='0' moveimgx='0' align='top'><br>");
    }    
	if(smallPicView4 != "")
	{
		document.writeln("<img id='img4" + ItemNo + "' src='/Assets/pics/beads/" + ItemNo + "/" + smallPicView4 + "_small.jpg' data-zoomsrc='/Assets/pics/beads/" + ItemNo + "/" + smallPicView4 + "_large.jpg' style='display: none' alt='" + smallPicAltText4 + "' border='0' moveimgx='0' align='top'><br>");
    }
	if(smallPicView5 != "")
	{
		document.writeln("<img id='img5" + ItemNo + "' src='/Assets/pics/beads/" + ItemNo + "/" + smallPicView5 + "_small.jpg' data-zoomsrc='/Assets/pics/beads/" + ItemNo + "/" + smallPicView5 + "_large.jpg' style='display: none' alt='" + smallPicAltText5 + "' border='0' moveimgx='0' align='top'><br>");
    }         
	document.writeln("</td>");
	
	
	
	//cell that holds the table that holds the small pictures on the left
    document.writeln("<td align='right' valign='top' width='" + smallPicWidth + "'>"); 
    //table that holds the first 3 small pictures on the left that can be clicked to change the big picture
	document.writeln("<table width='" + tablewidth + "' border='0' cellspacing='0' cellpadding='1'>");
    //small image 1
	document.writeln("<tr>"); 
	document.writeln("<td align='right' valign='top' width='" + smallPicWidth + "'>");
	if(smallPicView1 != "")
	{
		document.writeln("<img id='" + smallPicID1 + "' src='" + smallPicSrc1 + "' onClick=\"switchPic('" + ItemNo + "','" + smallPicView1 + "','1','" + numberOfImages + "');\" width='" + smallPicWidth + "' alt='" + smallPicAltText1 + "' alt='#' style='cursor: hand'>");
	}
	document.writeln("</td>");
	document.writeln("</tr>");
	//row containing small image 2
    document.writeln("<tr>");
	document.writeln("<td align='right' valign='top' width='" + smallPicWidth + "'>"); 
	if(smallPicView2 != "")
	{
		document.writeln("<img id='" + smallPicID2 + "' src='" + smallPicSrc2 + "' onClick=\"switchPic('" + ItemNo + "','" + smallPicView2 + "','2','" + numberOfImages + "');\" width='" + smallPicWidth + "' alt='" + smallPicAltText2 + "' alt='#' style='cursor: hand'>");
	}
	document.writeln("</td>");
	document.writeln("</tr>");
	//row containing small image 3
	document.writeln("<tr>"); 
	document.writeln("<td align='right' valign='top' width='" + smallPicWidth + "'>");
	if(smallPicView3 != "")
	{
		document.writeln("<img id='" + smallPicID3 + "' src='" + smallPicSrc3 + "' onClick=\"switchPic('" + ItemNo + "','" + smallPicView3 + "','3','" + numberOfImages + "');\" width='" + smallPicWidth + "' alt='" + smallPicAltText3 + "' alt='#' style='cursor: hand'>");
	}
	document.writeln("</td>");
    document.writeln("</tr>");
	//end of small pic table 1
	document.writeln("</table>");
	document.writeln("</td>");
	
	if(numColumnsOfSmallPics > 1) 
	{
		//table that holds the second 3 small pictures on the left that can be clicked to change the big picture
		document.writeln("<td align='right' valign='top' width='" + smallPicWidth + "'>"); 
		document.writeln("<table width='" + tablewidth + "' border='0' cellspacing='0' cellpadding='1'>");
		//row containing small image 4
		document.writeln("<tr>"); 
		document.writeln("<td align='right' valign='top' width='" + smallPicWidth + "'>");
		if(smallPicView4 != "")
		{
			document.writeln("<img id='" + smallPicID4 + "' src='" + smallPicSrc4 + "' onClick=\"switchPic('" + ItemNo + "','" + smallPicView4 + "','4','" + numberOfImages + "');\" width='" + smallPicWidth + "' alt='" + smallPicAltText4 + "' alt='#' style='cursor: hand'>");
		}
		document.writeln("</td>");
		document.writeln("</tr>");
		//row containing small image 5
		document.writeln("<tr>"); 
		document.writeln("<td align='right' valign='top' width='" + smallPicWidth + "'>");
		if(smallPicView5 != "")
		{
			document.writeln("<img id='" + smallPicID5 + "' src='" + smallPicSrc5 + "' onClick=\"switchPic('" + ItemNo + "','" + smallPicView5 + "','5','" + numberOfImages + "');\" width='" + smallPicWidth + "' alt='" + smallPicAltText5 + "' alt='#' style='cursor: hand'>");
		}
		document.writeln("</td>");
		document.writeln("</tr>");
		//end if small image table 2
		document.writeln("</table>");
		document.writeln("</td>");
	}
	
	
	
	//the cell in which the information about the beads is kept
    document.writeln("<td align='left' valign='top'>"); 
    document.writeln("<table width='100%' border='0' cellspacing='5' cellpadding='0'>");
    document.writeln("<tr>"); 
    document.writeln("<td align='left' valign='top'>");
	document.writeln(ItemDescription);
	//document.writeln("<p>&nbsp;</p>");
    document.writeln("<p>Item Number: " + ItemNo + "</p>"); 
    document.writeln("</td>");
    document.writeln("</tr>");
    document.writeln("<tr>");
    document.writeln("<td height='10'>&nbsp;</td>");
    document.writeln("</tr>");
    document.writeln("<tr>");
    document.writeln("<td><b>" + ItemPrice + "</b></td>");
    document.writeln("</tr>");
    document.writeln("<tr>"); 
    document.writeln("<td height='10'>&nbsp;</td>");
    document.writeln("</tr>");
	//the row that contains the paypal button
    document.writeln("<tr>"); 
    document.writeln("<td>"); 
    document.writeln("<form target='paypal' action='https://www.paypal.com/cgi-bin/webscr' method='post'>");
    document.writeln("<input type='hidden' name='cmd' value='_s-xclick'>");
    document.writeln("<input type='hidden' name='hosted_button_id' value='" + purchaseButtonID + "'>");
    document.writeln("<input type='image' src='https://www.paypal.com/en_US/i/btn/btn_cart_LG.gif' border='0' name='submit' alt='PayPal - The safer, easier way to pay online!'>");
    document.writeln("<img alt='' border='0' src='https://www.paypal.com/en_US/i/scr/pixel.gif' width='1' height='1'>"); 
    document.writeln("</form>");
    document.writeln("</td>");
    document.writeln("</tr>");
    document.writeln("</table>");
    document.writeln("</td>");
    document.writeln("</tr>");
    document.writeln("</table>");
	
	ItemName = "";
	ItemNo = "";
	smallPicWidth = 71;
	ItemDescription = "";
	ItemPrice = "";
	purchaseButtonID = "";
	smallPicView1 = "";
	smallPicAltText1 = "";
	smallPicView2 = "";
	smallPicAltText2 = "";
	smallPicView3 = "";
	smallPicAltText3 = "";
	smallPicView4 = "";
	smallPicAltText4 = "";
	smallPicView5 = "";
	smallPicAltText5 = "";
}

function switchPic(item_number, view, number, numpics)
{
	
	var img1 = "img1" + item_number;
	var img2 = "img2" + item_number;
	var img3 = "img3" + item_number;
	var img4 = "img4" + item_number;
	var img5 = "img5" + item_number;
	var smImgTag1;
	var smImgTag2;
	var smImgTag3;
	var smImgTag4;
	var smImgTag5;
	
	if(numpics > 0)
	{
		smImgTag1 = document.getElementById(img1);
		smImgTag1.style.display = "none";
		smImgTag1.style.visibility = "hidden";
		
		if(numpics > 1)
		{
			smImgTag2 = document.getElementById(img2);
			smImgTag2.style.display = "none";
			smImgTag2.style.visibility = "hidden";
		}
		if(numpics > 2)
		{
			smImgTag3 = document.getElementById(img3);
			smImgTag3.style.display = "none";
			smImgTag3.style.visibility = "hidden";
		}
		if(numpics > 3)
		{
			smImgTag4 = document.getElementById(img4);
			smImgTag4.style.display = "none";
			smImgTag4.style.visibility = "hidden";
		}
		if(numpics > 4)
		{
			smImgTag5 = document.getElementById(img5);
			smImgTag5.style.display = "none";
			smImgTag5.style.visibility = "hidden";
		}
		
		if(number=='1') 
		{
			smImgTag1.style.visibility = "visible";
			smImgTag1.style.display = "block";
			smImgTag1.style.position = "relative";
			smImgTag1.style.top = '0px';
		}
		if(number=='2')
		{ 
			smImgTag2.style.visibility = "visible";
			smImgTag2.style.display = "block";
			smImgTag2.style.position = "relative";
			smImgTag2.style.top = '-18px';
		}
		if(number=='3')
		{ 
			smImgTag3.style.visibility = "visible";
			smImgTag3.style.display = "block";
			smImgTag3.style.position = "relative";
			smImgTag3.style.top = '-36px';
		}
		if(number=='4')
		{ 
			smImgTag4.style.visibility = "visible";
			smImgTag4.style.display = "block";
			smImgTag4.style.position = "relative";
			smImgTag4.style.top = '-55px';
		}
		if(number=='5')
		{ 
			smImgTag5.style.visibility = "visible";
			smImgTag5.style.display = "block";
			smImgTag5.style.position = "relative";
			smImgTag5.style.top = '-72px';
		}
	}

	
	MojoZoom.init();
}

function hideMe(attributeID)
{
	var att = document.getElementById(attributeID);
	att.style.visibility = "hidden";
}