var xmlhttp;
 var AjaxAction = 0;
 var GET_GROUP = 1;
 var GET_SIZE = 2;
 var GET_PRODUCT = 3;

 function byId(id)
 {
 	return document.getElementById(id);
 };
 
 function getGroup(groupName)
 {
	var divGroup = byId("divGroupList");
	var res = null;

 };
 
 function parseXML(str){
     if (document.all)
     {
         var doc = new ActiveXObject("Microsoft.XMLDOM");
         doc.loadXML(str);
         return doc;
     }
     else
     {
         var parser = new DOMParser();
         var result = parser.parseFromString(str, "text/xml");
         return result;
     }
 };
 
 function loadXMLDoc(url)
 {
 	// code for Mozilla, etc.
 	if (window.XMLHttpRequest)
 	{
 		xmlhttp = new XMLHttpRequest();
 		xmlhttp.onreadystatechange = xmlhttpChange;
 		xmlhttp.open("GET", url, true);
 		xmlhttp.send(null);
 		
 	}
 	// code for IE
 	else if (window.ActiveXObject)
 	{
 		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
 		if (xmlhttp)
 	    {
 			xmlhttp.onreadystatechange = xmlhttpChange;
 		    xmlhttp.open("GET", url, true);
 	    	xmlhttp.send();
 		}
 	}
 };
 
 xmlhttpChange = function()
 {
 	// if xmlhttp shows "loaded"
 	if (xmlhttp.readyState == 4)
 	{
 		// if "OK"
 		if (xmlhttp.status == 200)
 		{
 		    var strHTML = "";
 		    var xmlDoc = parseXML(xmlhttp.responseText);
 		    if (AjaxAction == GET_GROUP)
 		    {
 		        if (xmlDoc.documentElement == null)
     		    {
     		        byId("divGroupList").innerHTML = "no group";
     		        byId("divSizeList").innerHTML = "no product";
     		        byId("divProductInfo").innerHTML = "";
     		        return;
     		    }
 		        var nodeList = xmlDoc.documentElement.getElementsByTagName("product");
 		        var iLen = nodeList.length;
 		        for (var i=0; i<iLen; i++)
 		        {
 		            var sTitle = nodeList[i].getAttribute("title");
 		            var sImage = nodeList[i].getAttribute("image");
 		            var sGroupID = nodeList[i].getAttribute("sku4");
 		            strHTML = strHTML + "<p><a id=group_"+sGroupID+" href='#' onclick=getSize('" + sGroupID + "');><img width=100 height=118 border=0 src='" + sImage + "' onmouseover='imagemouseover(this)' onmouseout='imagemouseout(this)' style='border:solid 1px black; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);' />";
 		            strHTML = strHTML /*+ "<br>" + sTitle*/ + "</a></p>";
 		        }
     			byId("divGroupList").innerHTML = strHTML;

				strHTML = "";
				var default_group = xmlDoc.documentElement.getElementsByTagName("default_group")[0];
				var default_groupid = default_group.getAttribute("groupid");
				cur_group = "group_"+default_groupid;
				var cur_img = byId(cur_group).getElementsByTagName("img");
				cur_img[0].style.borderColor = "#D1913A";

				var nodeList = default_group.getElementsByTagName("item");
				var default_item = default_group.getElementsByTagName("default_item");
				var default_itemid = default_item[0].getAttribute("id");
				//getProduct(default_itemid);
 		        var iLen = nodeList.length;
 		        for (var i=0; i<iLen; i++)
 		        {
 		            var sSize = nodeList[i].getAttribute("size");
 		            var sItemID = nodeList[i].getAttribute("itemid");
 		            if (sSize == "S")
 		            {
						if(sItemID == default_itemid)
 							strHTML = strHTML + "<a size='S' item="+sItemID+" href='#' onclick='getProduct(" + sItemID + ");'><img border=0 src='/images/small_on.png' /></a>";
						else
							strHTML = strHTML + "<a size='S' item="+sItemID+" href='#' onclick='getProduct(" + sItemID + ");'><img border=0 src='/images/small.png' /></a>";
 		            }
 		            else if (sSize == "M")
 		            {
						if(sItemID == default_itemid)
 							strHTML = strHTML + "<a size='M' item="+sItemID+" href='#' onclick='getProduct(" + sItemID + ");'><img border=0 src='/images/medium_on.png' /></a>";
						else
							strHTML = strHTML + "<a size='M' item="+sItemID+" href='#' onclick='getProduct(" + sItemID + ");'><img border=0 src='/images/medium.png' /></a>";
 		            }
 		            else if (sSize == "M_1")
 		            {
						if(sItemID == default_itemid)
 							strHTML = strHTML + "<a size='M_1' item="+sItemID+" href='#' onclick='getProduct(" + sItemID + ");'><img border=0 src='/images/one_size_only_on.png' /></a>";
						else
							strHTML = strHTML + "<a size='M_1' item="+sItemID+" href='#' onclick='getProduct(" + sItemID + ");'><img border=0 src='/images/one_size_only.png' /></a>";
 		            }
 		            else if (sSize == "L")
 		            {
						if(sItemID == default_itemid)
 							strHTML = strHTML + "<a size='L' item="+sItemID+" href='#' onclick='getProduct(" + sItemID + ");'><img border=0 src='/images/large_on.png' /></a>";
						else
							strHTML = strHTML + "<a size='L' item="+sItemID+" href='#' onclick='getProduct(" + sItemID + ");'><img border=0 src='/images/large.png' /></a>";
 		            }
 		        }
     			byId("divSizeList").innerHTML = strHTML;

				strHTML = "";
				// set product info 
				var sItemID = default_item[0].getAttribute("id");
				var sSku = default_item[0].getAttribute("sku");
 		        var sTitle = default_item[0].getAttribute("title");
 		        var sDetail = default_item[0].getAttribute("detail");
 		        var sPrice = default_item[0].getAttribute("price");
 		        var sImage = default_item[0].getAttribute("image");
				var sThumb = default_item[0].getAttribute("thumb");
				var diyimage = default_item[0].getAttribute("diyimage");
				var itemdim = default_item[0].getAttribute("dimension");
 		        
				strHTML = "<table border=0>";
				strHTML += "<tr><td align=left width=20%>Item Name:</td><td id=item_title>" + sTitle + "</td></tr>";
				strHTML += "<tr><td align=left>Item ID:</td><td id=item_sku>" + sSku + "</td></tr>";
				strHTML += "<tr><td align=left>Our Price:</td><td id=item_price> $" + sPrice + "</td></tr>";
				strHTML += "<tr><td align=left>Dimensions:</td><td id=item_dimension> " + itemdim + "</td></tr>";
				strHTML += "<tr><td colspan=2 align=center><img id=item_image height=256 src='" + diyimage + "' /></td></tr>";
				strHTML += "<tr><td colspan=2 align=left valign=bottom><a href='javascript:goItemDiy(" + sItemID + ");'><img id=item_begin border=0 src='/images/diynow.png' onmouseover=changeimage(this,'/images/diynow_on.png') onmouseout=changeimage(this,'/images/diynow.png') /></a></td></tr>";
				strHTML += "</table>";
     			byId("divProductInfo").innerHTML = strHTML;
     		}
     		else if (AjaxAction == GET_SIZE)
     		{
				//alert('aaa');
     		    if (xmlDoc.documentElement == null)
     		    {
     		        byId("divSizeList").innerHTML = "not provided any size";
     		        return;
     		    }
 		        var nodeList = xmlDoc.documentElement.getElementsByTagName("item");
				var default_item = xmlDoc.documentElement.getElementsByTagName("default_item");
				var default_itemid = default_item[0].getAttribute("id");
				//getProduct(default_itemid);
 		        var iLen = nodeList.length;
 		        for (var i=0; i<iLen; i++)
 		        {
 		            var sSize = nodeList[i].getAttribute("size");
 		            var sItemID = nodeList[i].getAttribute("itemid");
 		            if (sSize == "S")
 		            {
						if(sItemID == default_itemid)
 							strHTML = strHTML + "<a size='S' item="+sItemID+" href='#' onclick='getProduct(" + sItemID + ");'><img border=0 src='/images/small_on.png' /></a>";
						else
							strHTML = strHTML + "<a size='S' item="+sItemID+" href='#' onclick='getProduct(" + sItemID + ");'><img border=0 src='/images/small.png' /></a>";
 		            }
 		            else if (sSize == "M")
 		            {
						if(sItemID == default_itemid)
 							strHTML = strHTML + "<a size='M' item="+sItemID+" href='#' onclick='getProduct(" + sItemID + ");'><img border=0 src='/images/medium_on.png' /></a>";
						else
							strHTML = strHTML + "<a size='M' item="+sItemID+" href='#' onclick='getProduct(" + sItemID + ");'><img border=0 src='/images/medium.png' /></a>";
 		            }
 		            else if (sSize == "M_1")
 		            {
						if(sItemID == default_itemid)
 							strHTML = strHTML + "<a size='M_1' item="+sItemID+" href='#' onclick='getProduct(" + sItemID + ");'><img border=0 src='/images/one_size_only_on.png' /></a>";
						else
							strHTML = strHTML + "<a size='M_1' item="+sItemID+" href='#' onclick='getProduct(" + sItemID + ");'><img border=0 src='/images/one_size_only.png' /></a>";
 		            }
 		            else if (sSize == "L")
 		            {
						if(sItemID == default_itemid)
 							strHTML = strHTML + "<a size='L' item="+sItemID+" href='#' onclick='getProduct(" + sItemID + ");'><img border=0 src='/images/large_on.png' /></a>";
						else
							strHTML = strHTML + "<a size='L' item="+sItemID+" href='#' onclick='getProduct(" + sItemID + ");'><img border=0 src='/images/large.png' /></a>";
 		            }
 		        }
     			byId("divSizeList").innerHTML = strHTML;

				//alert('bbb');
				// set product info 
				var sItemID = default_item[0].getAttribute("id");
				var sSku = default_item[0].getAttribute("sku");
 		        var sTitle = default_item[0].getAttribute("title");
 		        var sDetail = default_item[0].getAttribute("detail");
 		        var sPrice = default_item[0].getAttribute("price");
 		        var sImage = default_item[0].getAttribute("image");
				var sThumb = default_item[0].getAttribute("thumb");
				var diyimage = default_item[0].getAttribute("diyimage");
				var itemdim = default_item[0].getAttribute("dimension");
 		        
				strHTML = "<table border=0>";
				strHTML += "<tr><td align=left width=20%>Item Name:</td><td id=item_title>" + sTitle + "</td></tr>";
				strHTML += "<tr><td align=left>Item ID:</td><td id=item_sku>" + sSku + "</td></tr>";
				strHTML += "<tr><td align=left>Our Price:</td><td id=item_price> $" + sPrice + "</td></tr>";
				strHTML += "<tr><td align=left>Dimensions:</td><td id=item_dimension> " + itemdim + "</td></tr>";
				strHTML += "<tr><td colspan=2 align=center><img id=item_image height=256 src='" + diyimage + "' /></td></tr>";
				strHTML += "<tr><td colspan=2 align=left valign=bottom><a href='javascript:goItemDiy(" + sItemID + ");'><img id=item_begin border=0 src='/images/diynow.png' onmouseover=changeimage(this,'/images/diynow_on.png') onmouseout=changeimage(this,'/images/diynow.png') /></a></td></tr>";
				strHTML += "</table>";

     			byId("divProductInfo").innerHTML = strHTML;
     		}
     		else if (AjaxAction == GET_PRODUCT)
     		{
     		    if (xmlDoc.documentElement == null)
     		    {
     		        byId("divProductInfo").innerHTML = "no related product";
     		        return;
     		    }
 		        var nodeList = xmlDoc.documentElement.getElementsByTagName("item");
 		        var iLen = nodeList.length;
 		        if (iLen != 1)
 		        {
     		        byId("divProductInfo").innerHTML = "no related product";
     		        return;
 		        }
				var sItemID = nodeList[0].getAttribute("id");
				var sSku = nodeList[0].getAttribute("sku");
 		        var sTitle = nodeList[0].getAttribute("title");
 		        var sDetail = nodeList[0].getAttribute("detail");
 		        var sPrice = nodeList[0].getAttribute("price");
 		        var sImage = nodeList[0].getAttribute("image");
				var sThumb = nodeList[0].getAttribute("thumb");
				var diyimage = nodeList[0].getAttribute("diyimage");
				var itemdim = nodeList[0].getAttribute("dimension");
				
				strHTML = "<table border=0>";
				strHTML += "<tr><td align=left width=20%>Item Name:</td><td id=item_title>" + sTitle + "</td></tr>";
				strHTML += "<tr><td align=left>Item ID:</td><td id=item_sku>" + sSku + "</td></tr>";
				strHTML += "<tr><td align=left>Our Price:</td><td id=item_price> $" + sPrice + "</td></tr>";
				strHTML += "<tr><td align=left>Dimensions:</td><td id=item_dimension> " + itemdim + "</td></tr>";
				strHTML += "<tr><td colspan=2 align=center><img id=item_image height=256 src='" + diyimage + "' /></td></tr>";
				strHTML += "<tr><td colspan=2 align=left valign=bottom><a href='javascript:goItemDiy(" + sItemID + ");'><img id=item_begin border=0 src='/images/diynow.png' onmouseover=changeimage(this,'/images/diynow_on.png') onmouseout=changeimage(this,'/images/diynow.png') /></a></td></tr>";
				strHTML += "</table>";

     			byId("divProductInfo").innerHTML = strHTML;
     		}
     		AjaxAction = 0;
     		
 		}
 		else
 		{
 			alert("oops...Problem retrieving XML data");
 		}
 	}
 };
 
 function getGroup(catid)
 {
	//alert("cur catid: "+cur_catid + "   new catid: " + catid);
	//byId("itk_h2").className = "out_cat";
	byId("main_cat1").className = "in_cat";
	//byId("itk"+cur_itk).className = "out_diy";
	
	byId("divSizeList").innerHTML = "Loading...";
	byId("divProductInfo").innerHTML = "Loading...";

	byId("cat"+cur_catid).className = 'out_diy';
	byId("cat"+catid).className = 'in_diy';
	cur_catid = catid;

/*	if(catid>=7) {
		byId("main_cat1").className = 'out_cat';
		byId("main_cat2").className = 'in_cat';
	}
	else{
		byId("main_cat2").className = 'out_cat';
		byId("main_cat1").className = 'in_cat';
	}
*/
     byId("divGroupList").innerHTML = "loading...";
     AjaxAction = GET_GROUP;
     loadXMLDoc("getxml.php?type=listSKU4&id=" + catid);
 }
 
 function getSize(groupid)
 {
     // set selected group effect
     var pre_img = byId(cur_group).getElementsByTagName("img");
	 pre_img[0].style.borderColor = "black";
	 cur_group = "group_" + groupid;
	 var cur_img = byId(cur_group).getElementsByTagName("img");
	 cur_img[0].style.borderColor = "#D1913A";
	 cur_group = "group_" + groupid;

     byId("divSizeList").innerHTML = "Loading size buttons...";
	 byId("divProductInfo").innerHTML = "Loading product item info...";
     AjaxAction = GET_SIZE;
     loadXMLDoc("getxml.php?type=listSize&id=" + groupid);
 }
 
 function getProduct(productid)
 {
	var divSize = byId("divSizeList");
	var nodeList = divSize.getElementsByTagName("a");
	var iLen = nodeList.length;
 	for (var i=0; i<iLen; i++)
 	{
		var itemsize = nodeList[i].getAttribute("size");
		var itemid = nodeList[i].getAttribute("item");
		//alert(itemsize);		
		//alert(itemid);
					if (itemsize == "S")
 		            {
						if(itemid == productid)
 							strHTML = "<img border=0 src='/images/small_on.png' />";
						else
							strHTML = "<img border=0 src='/images/small.png' />";
 		            }
 		            else if (itemsize == "M")
 		            {
						if(itemid == productid)
 							strHTML = "<img border=0 src='/images/medium_on.png' />";
						else
							strHTML = "<img border=0 src='/images/medium.png' />";
 		            }
 		            else if (itemsize == "M_1")
 		            {
						if(itemid == productid)
 							strHTML = "<img border=0 src='/images/one_size_only_on.png' />";
						else
							strHTML = "<img border=0 src='/images/one_size_only.png' />";
 		            }
 		            else if (itemsize == "L")
 		            {
						if(itemid == productid)
 							strHTML = "<img border=0 src='/images/large_on.png' />";
						else
							strHTML = "<img border=0 src='/images/large.png' />";
 		            }
		nodeList[i].innerHTML = strHTML;
	}

     byId("divProductInfo").innerHTML = "Loading product item info...";
     AjaxAction = GET_PRODUCT;
     loadXMLDoc("getxml.php?type=listItem&id=" + productid);
 }

 function goItemDiy(productid)
 {
 	if(diyMaker)
		window.location = "diyMaker.php?action=diy&type=wizard&id="+productid+"&templatetype="+templatetype;
	else
		window.location = "diy.php?action=diy&type=wizard&id="+productid+"&templatetype="+templatetype;
 }
 

	function imagemouseover(img) 
	{
		img.filters[0].Opacity = 70;
		//img.style.borderWidth = 1;
		//img.style.borderColor = "#D1913A";
	}

	function imagemouseout(img) 
	{
		img.filters[0].Opacity = 100;
		//img.style.borderWidth = 0;
		//img.style.borderColor = "black";
	}

	function changeimage(img, imgsrc) {
		img.setAttribute("src", imgsrc);
	}
	
	function getITK(itkID) {
		//byId("main_cat1").className = "out_cat";
		//byId("cat"+cur_catid).className = 'out_diy';
		
		//byId("itk_h2").className = "in_cat";
		byId("itk"+cur_itk).className = "out_diy";
		byId("itk"+itkID).className = "in_diy";
		cur_itk = itkID;
		
		byId("img_itk").src = "/images/itk"+itkID+".png";
		byId("ITK_content").scrollTop = (itkID-2) * 60;
	}