//thumbnail holder
var thumbnails_array = new Array();

//default color
var color = "white";
	
var logos = new Array();
logos.push(new logo('leaf','leaf','bringing some much needed (but not always welcome) wit to your country club\'s pool party.'));
logos.push(new logo('chick','mud-flap girl','sans clothing? see how manly you can be by sporting a chick on your chest'));
logos.push(new logo('fish','fish bone','fossils at their finest'));
logos.push(new logo('griffin','griffin','call it the land-gator'));
logos.push(new logo('jug','moonshine jug','alive and well...'));
logos.push(new logo('bear','grizzly bear','no bears were harmed in the making of this shirt'));
logos.push(new logo('cherries','twig and berries','cherries hung from a twig'));
logos.push(new logo('peace','peace sign','make love not war'));

//logo structure
function logo(nameForImage,displayName,description){
	this.imageName = nameForImage;
	this.name = displayName;
	this.description = description;
}

var currentSelectedLogo = 0;

function draw_sku_option()
{
	var dropdownattr1 = "";
	var attrname = "";
	var dropdown_label="";
	//document.write("<TABLE BORDER=0 CELLPADDING=2 CELLSPACING=0>");

	//for (outer=0;outer<attr_values.length;outer++)
	for (outer=attr_values.length-1;outer>-1;outer--)
	{
		attrname = "attr" + (outer+1);
		document.write("<TR VALIGN=TOP ><TD>");
		
		//alert(outer+" "+attr_values[outer].length)
		if (attr_values[outer].length==1)
		{
			if (attr_label[outer]=="Attribute")
			{
				dropdown_label="Color";
			}else
			{
				dropdown_label=attr_label[outer];
			}
			document.write("<select name="+attrname+" id="+attrname+" onchange=\"get_values("+(outer+1)+");findprice();\" class=\"ProductAttr\" style=\"display:none;\">");
			
			for(innerarr=0;innerarr<attr_values[outer].length;innerarr++)
			{
			  dropdownattr1=attr_values[outer][innerarr];
			  document.write('<option value=\''+dropdownattr1+'\'>'+dropdownattr1+'</option>');
			}
			
			document.write("</select>");

			document.write("<div id=single_option"+(outer+1)+">"+dropdown_label + ': ' + dropdownattr1+"</div>");
		}else{
			if (attr_label[outer]=="Attribute")
			{
				dropdown_label="Color";
			}else
			{
				dropdown_label=attr_label[outer];
			}
			
			if(dropdown_label.search(/size/i)!=-1)
			{
				//draw a div around the size dropdown to hide it then show it elsewhere
				document.write("<div id='size_dropdown' style='display: none; visibility: hidden;'>");
			}
			
			document.write("<select name="+attrname+" id="+attrname+" onchange=\"get_values("+(outer+1)+");findprice();\" class=\"ProductAttr\">");
						
			document.write('<option value="" selected>'+dropdown_label+"</option>");
			attr_values[outer].sort(smart_sort);
			
			for(innerarr=0;innerarr<attr_values[outer].length;innerarr++)
			{
			  dropdownattr1=attr_values[outer][innerarr];
			  document.write('<option value=\''+dropdownattr1+'\'>'+dropdownattr1+'</option>');
			}
			
			document.write("</select>");
			
			if(dropdown_label.search(/size/i)!=-1)
			{
				//draw a div around the size dropdown to hide it then show it elsewhere
				document.write("</div>");
			}
			document.write("<div id=single_option"+(outer+1)+"></div>");
		}
		document.write("</TD></TR>");
	}
	
	//document.write("</table>");
	document.write("<INPUT TYPE=HIDDEN  NAME=sku0 VALUE=''>");
} //end draw_sku_option

//get_values receives the attr number of the dropdown that has changed.
//
function get_values(ddnum)
{ 
  var thisattr,nextdd,tempattr,tempdd;
  var ctr = 0;
  var optstr = "";
  var tempopt;
  var attr_flag = true;
  var selection = "";
  var sel_flag = false;


  switch(attr_values.length)
  {
    case 5:
      var dd5 = document.getElementById('attr5');
    case 4:
      var dd4 = document.getElementById('attr4');
    case 3:
      var dd3 = document.getElementById('attr3');
    case 2:
      var dd2 = document.getElementById('attr2');
      var dd1 = document.getElementById('attr1');

      //for (i=ddnum+1;i<=attr_values.length;i++)
	  for (i=ddnum-1;i>0;i--)
      {
		//clear out the next dropdown
        nextdd = eval("dd"+i);
        //store the selected value so that it will remain selected if available
        selection = nextdd.value;
        for (j=nextdd.options.length-1;j>=0;j--)
        {
          nextdd.options[j] = null;
        }
		var sortarray= new Array();
		//~ sortarray[0]=attr_label[i];
        //loop thru product array
        for (atn=0;atn< product_var.length;atn++)
        {
          attr_flag = true;

          //for (k=1;k<=i-1;k++)
		  for(k=attr_values.length;k>i;k--)
          {
            //check each dropdown up to one before nextdd
            tempattr = eval("product_var[atn].attr_value"+k);
            tempdd = eval("dd"+k).value;
            if (tempattr != tempdd)
            {
              //this product doesn't match our selected values
              attr_flag = false;
            }
          }
		  
		  
          if (attr_flag == true)
          {
              //store the attr if it is new AND if available
              thisattr = eval("product_var[atn].attr_value"+i);
              //jas 5.15.07 - changed the code to see all variants in dropdown, regardless of availability
	      //if (optstr.indexOf(";" + thisattr + ";") == -1 && parseInt(product_var[atn].avail)>0)
	      if (optstr.indexOf(";" + thisattr + ";") == -1)
              {
                optstr += ";" + thisattr + ";";
                //add to array here and sort instead of writing option
				sortarray[ctr]=thisattr;
                ctr++;
              }
          }
        }
	//write options here and clear array
	if (sortarray.length==1)
	{
		nextdd.style.display = "none";
		for (s=0;s<sortarray.length;s++){		
			if (sortarray[s] == selection) { sel_flag = true; }else{ sel_flag = false; }
			tempopt = new Option(sortarray[s],sortarray[s],sel_flag);
			nextdd.options[s] = tempopt;
			document.getElementById("single_option"+i).innerHTML=sortarray[s];
		}
	}else
	{
		if (attr_label[i-1]=="Attribute")
		{
			tempopt = new Option("Color","Color",false);
		}else
		{
			tempopt = new Option(attr_label[i-1],attr_label[i-1],false);
		}
		
		nextdd.options[0] = tempopt;
		sortarray.sort(smart_sort);
		if (sortarray.length==0)
		{
			nextdd.style.display = "none";
			
		}else
		{
			nextdd.style.display = "block";
			document.getElementById("single_option"+i).innerHTML="";
		}
		for (s=0;s<sortarray.length;s++){
			if (sortarray[s] == selection) { sel_flag = true; }else{ sel_flag = false; }
			tempopt = new Option(sortarray[s],sortarray[s],sel_flag);
			nextdd.options[s+1] = tempopt;
		}
	}
//sortarray.clear();
        optstr = "";
        ctr = 0;
        selection = "";
      }
      break;
    case 1: //1 dropdown - do nothing here
    case 0: //no dropdowns - do nothing here
    default:

      break;
  }
  
   //if this is the color dropdown...
  if(ddnum == 2)
  {
	  updateColorOnDropChange(document.getElementById('attr2').options[document.getElementById('attr2').selectedIndex].value);
  }
}


function findsku()
{
	if (typeof attr_values!="undefined"){
		if(product_var.length>1){
			//var sku_flds = document.getElementsByName("sku");
			//var qty_flds = document.getElementsByName("qty");
			var matchsku=false;
			var eachsku=0;
			var selectedsku;
			while (matchsku==false && eachsku<product_var.length)
			{
				var matching=true;
				for (drop=1;drop<=attr_values.length ;drop++)
				{
					//document.getElementById('this').value=document.getElementById('dropsku'+drop).options[document.getElementById('dropsku'+drop).selectedIndex].value;
					if (eval("product_var["+eachsku+"].attr_value"+drop)!=document.getElementById('attr'+drop).options[document.getElementById('attr'+drop).selectedIndex].value){matching=false;}
				}
				if (matching==true){selectedsku=eval("product_var["+eachsku+"].sku");matchsku=true;
				//sku_flds.value="selectedsku";
				//qty_flds.value="1";
				//alert(selectedsku);
				
				document.form1.sku0.value=selectedsku;
				//document.form1.submit();
				return true;
		
				}
				eachsku=eachsku+1;
			}//end while
		}//end if
		else if(product_var.length==1){
			document.form1.sku0.value=product_var[0].sku;
			return true;
		}
	}//end if
}

function findprice(){
if (typeof attr_values!="undefined"){
	//var sku_flds = document.getElementsByName("sku");
	//var qty_flds = document.getElementsByName("qty");
	var matchsku=false;
	var eachsku=0;
	var selectedskuprice;
	var listprice;
	var avail_message;
	while (matchsku==false && eachsku<product_var.length)
	{
		var matching=true;
		for (drop=1;drop<=attr_values.length ;drop++)
		{
			//document.getElementById('this').value=document.getElementById('dropsku'+drop).options[document.getElementById('dropsku'+drop).selectedIndex].value;
			if (eval("product_var["+eachsku+"].attr_value"+drop)!=document.getElementById('attr'+drop).options[document.getElementById('attr'+drop).selectedIndex].value){matching=false;}
		}
		if (matching==true){
		avail_message = eval("product_var["+eachsku+"].avail_msg");
		if (eval("product_var["+eachsku+"].price_sale")!="" && eval("product_var["+eachsku+"].price_sale")!="0" && eval("product_var["+eachsku+"].price_sale")<eval("product_var["+eachsku+"].price_list")){
		
			listprice=eval("OKStrOfPenny(product_var["+eachsku+"].price_list)");matchsku=true;
			selectedskuprice=eval("OKStrOfPenny(product_var["+eachsku+"].price_sale)");matchsku=true;
			//document.getElementById("prod_price").innerHTML = "<font class='ListPricewSale'><br>Regular Price:&nbsp;$"+listprice+"</font><font class='SalePrice'><br>ON SALE!&nbsp;$"+selectedskuprice+"</font><br>"+avail_message;
		}else{
			selectedskuprice=eval("OKStrOfPenny(product_var["+eachsku+"].price_list)");matchsku=true;
			//document.getElementById("prod_price").innerHTML = "<font class='ListPricewoSaleP'><br>Selected Item Price&nbsp;$"+selectedskuprice+"</font><br><br>"+avail_message;
		}
		
		display_avail(avail_message);
		
		//sku_flds.value="selectedsku";
		//qty_flds.value="1";
		//document.form1.sku.value=selectedsku;
		//document.form1.submit();
		return true;

		}
		eachsku=eachsku+1;
	}
	}
}

function display_avail(avail_message)
{
	//if the availability message is not empty...
	if(avail_message!="" && avail_message!="&nbsp;")
		document.getElementById("availability_message").innerHTML = "<font class=availability_msg>Availability: " + avail_message + "</font>";
	else
		document.getElementById("availability_message").innerHTML = "&nbsp;";
}


function imgOn(imgName) {
	imgName = formatColorName(imgName);
	
	//change main image
	changeMainImg(imgName);
	
	//set new color
	setNewColor(imgName);
	
	//change dropdown
	setDropdownColor();
	
	//change logo color
	setLogoSelection(currentSelectedLogo);
}

function updateColorOnDropChange(imgName) {		
	//if no color chosen, use default color
	if(imgName==""){imgName = color;}
	
	//make sure color selected in dropdown - passed in as imgName is the same as the image name colors from info_attributes
	imgName = formatColorName(imgName);
	
	//alert('"'+imgName+'"');
	
	//change main image
	changeMainImg(imgName);
	
	//set new color
	setNewColor(imgName);
		
	//change logo color
	setLogoSelection(currentSelectedLogo);
	
}

function formatColorName(colorName)
{
	var aColor = new Array();
	if (thumbnails_array.length >= 1){
		for (ca=0; ca<thumbnails_array.length; ca++)
		{			
			aColor = thumbnails_array[ca].split(":");
			//strip out any divs or ps
			aColor[1] = aColor[1].replace(/<div>|<\/div>|<p>|<\/p>/ig,""); //image
			
			if(colorName.search(aColor[1].substring(0,4))>-1){			
				return aColor[1];
			}
		}
	}
}

function changeMainImg(imgName) {
	//change main image
	document.getElementById("mainimg").src="assets/images/hickeystyle/custom%20polos/" + porder_code + "_" + imgName + "_md.jpg";
	
	//update enlarge image link
	document.getElementById('enlarge_img_link').innerHTML = "<a href=\"#\" onClick=\"return(makeNewWindow('assets/images/hickeystyle/custom%20polos/"+ porder_code +"_"+ color +"_lg.jpg','Large Image'));\"> + click for larger image </a></span>";
}

function setNewColor(newColor)
{ 
	//set new color
	color = newColor;
	color = color.replace(/\s/ig,""); //trim any whitespace from color		
}

function setDropdownColor()
{
	//set color selection in color dropdown
	var colordrop = document.getElementById('attr2');
	
	//set first option as selection for dropdown, just in case no color matches
	colordrop.selectedIndex = 0;
	
	//find matching selection in color dropdown
	for (var opt=0; opt<colordrop.options.length; opt++)
	{		
		if(colordrop.options[opt].value.search(color.substring(0,4))>-1){			
			colordrop.selectedIndex = opt;
			//call functions used by the color dropdown
			get_values(2);
			findprice();
		}
	}
}

function display_thumbnails()
{
	var array_largeimage;
	if (typeof info_attributes!="undefined" && info_attributes != "")
	{
		thumbnails_array = info_attributes.split(",");
		info_attributes="";
		var image_array;
		if (thumbnails_array.length >= 1)
		{
			//the number below changes the number of columns for the swatches
			var columns=4;
			var atn;
			atn=0;
			var myImage;
			var counter=1;
			document.write("<table border=0><tr><td><div align=center width=100%><table border=0><tr>");
			
			for (atn=0; atn<thumbnails_array.length; atn++)
			{
				if (thumbnails_array[atn]!="")
				{
					image_array = thumbnails_array[atn].split(":");
					//strip out any divs or ps
					image_array[1] = image_array[1].replace(/<div>|<\/div>|<p>|<\/p>/ig,""); //image
					image_array[0] = image_array[0].replace(/<div>|<\/div>|<p>|<\/p>/ig,""); //name
					name = image_array[0].replace(/_/ig," "); //name
					
					document.write("<td align=center><table border=0><tr><td align=center><A HREF=\"#\" onClick=\"imgOn('"+image_array[0]+"'); return false;\" ><img NAME=\""+image_array[1]+"\" id=\""+image_array[1]+"\" src=\"assets/images/hickeystyle/swatches/" + porder_code + "_" + image_array[1] + "_sm.jpg\" ></A>");
					document.write("<br>"+name+"</td></tr></table></td>");
					if (counter==columns){document.write("</tr><tr>");counter=0}
				}
			counter = counter+1;
			}
			document.write("</tr></table></div></td></tr></table>");
		}	
		else {document.write("<br>");}	
	}
	else {document.write("<br>");}
} //end display_thumbnails


function displayDefaultLogo() {
	var defaultLogoOutput = "<table cellspacing='0' cellpadding='0' border='0'><tr>";
	defaultLogoOutput += "<td align='left'><img id='large_logo' src=\"assets/images/hickeystyle/custom%20polos/"+porder_code+"_"+logos[0].imageName+"_"+color+"_lg.jpg\"></td>";
	defaultLogoOutput += "<td align='left' style='padding:10px 10px 10px 10px;'><span id='logo_description'>"+logos[0].description+"</span></td></tr></table>";
	document.write(defaultLogoOutput);
}

function showLogos(defcolor)
{	
	if (typeof defcolor=="undefined" || defcolor == "") defcolor=color;
	
	color=defcolor;
	
	color = color.replace(/\s/ig,""); //trim any whitespace from color
	
	var logoOutput = "";
	
	//the number below changes the number of columns for the logos
	var columns=5;	
	var counter=1;
	
	logoOutput += "<table border=0><tr><td><div align=center width=100%><table border=0><tr>";
	
	//display logos
	for (alogo in logos)
	{
		logoOutput += "<td align='center' valign='top'><table border=0><tr><td align='center' valign='top'>";
		logoOutput += "<a href='#' onClick=\"setLogoSelection("+alogo+"); return false;\"><img src=\"assets/images/hickeystyle/custom%20polos/"+porder_code+"_"+logos[alogo].imageName+"_"+color+"_sm.jpg\" vspace=\"2\" hspace=\"2\"></a>";
		logoOutput += "<br>"+logos[alogo].name+"</td></tr></table></td>";
		if (counter==columns){logoOutput += "</tr><tr>"; counter=0;}
		counter = counter+1;
	}
	
	logoOutput += '<input type="hidden" name="info_attr1" id="info_attr1" value=""></tr></table></div></td></tr></table>';
	
	document.getElementById("logo_holder").innerHTML = logoOutput;
	
	//set logo selection to first logo
	setLogoSelection(0);
}

function setLogoSelection(selectedLogoIndex)
{
	
	currentSelectedLogo = selectedLogoIndex;
	
	var selectedLogo = logos[selectedLogoIndex];

	//change info_attr value to that of selected logo
	document.getElementById("info_attr1").value = "Custom Logo: "+selectedLogo.name;	
	
	color = color.replace(/\s/ig,""); //trim any whitespace from color
	
	//change large version of logo to selected
	document.getElementById("large_logo").src = "assets/images/hickeystyle/custom%20polos/"+porder_code+"_"+selectedLogo.imageName+"_"+color+"_lg.jpg";

	//change logo description
	document.getElementById("logo_description").innerHTML = selectedLogo.description;
}