//Style Page
//Author: Sean Fitzgerald
//Created: 10/09/08
//Last Updated:11/16/09
//Used on custom sites and the public site in different capacities.

var currentZoomImage;
var hardCodedPrice;//Optional, Can set this anywhere on the page.

var colorsAndImages = httpRequestGet("wgweb.dll/ajax?method=GetStyleColorsAndAttributes&styleno=" + style + "&assort=" + assort + "&ventureID=" + nameSource);
var colorsAndImagesArray = colorsAndImages.split(";");

for(var z=0;z < colorsAndImagesArray.length;z++){
	colorsAndImagesArray [z] = colorsAndImagesArray[z].split(",");
	for(var y=0;y < colorsAndImagesArray[z].length;y++){
	colorsAndImagesArray [z][y] = colorsAndImagesArray[z][y].split("=");
	
	}
}

var images = httpRequestGet("wgweb.dll/ajax?method=getStyleImage&styleno=" + style +"&filter=" + imageRoot);
var imagesArray = images.split(";");

for(var z=0;z < imagesArray.length;z++){
	imagesArray [z] = imagesArray[z].split(",");
	for(var y=0;y < imagesArray[z].length;y++){
	imagesArray [z][y] = imagesArray[z][y].split("=");
	
	}
}

var colorStyleMatrix = httpRequestGet("wgweb.dll/ajax?method=getStyleColorMatrix&ventureID=" + nameSource + "&styleno=" + style + "&assort=" + assort);
var colorStyleMatrixArray = colorStyleMatrix.split(";");

for(var z=0;z < colorStyleMatrixArray.length;z++){
	colorStyleMatrixArray[z] = colorStyleMatrixArray[z].split(",");
}

function initStylePage(){
	
	loadMainImage();
	
	try{//Try is needed for style pages with custom content(ex. Badges). Prevents error when normal dropdown is not found.
	loadColorsDropDown();
	}
	catch(e){}
	
	if(colorStyleMatrixArray[0] != ""){
		try{loadColorBoxes();}catch(e){}
	}
	


//Set this variable anywhere on the page and it will change the display price of the item. 
//THIS DOES NOT effect the actual price of the item once it reaches the shopping cart.
//Developed to handle multiple pricing for badges.
// var = hardCodedPrice

	if(hardCodedPrice){
		document.getElementById('styleprice').innerHTML = hardCodedPrice;
	}
}

function loadColorBoxes(){
var ct = document.getElementById("colortable");
	for(var x=0;x < colorStyleMatrixArray.length;x++){
		ct.appendChild(createColorBox(colorStyleMatrixArray[x][2],colorStyleMatrixArray[x][1],colorStyleMatrixArray[x][3],colorStyleMatrixArray[x][4],colorStyleMatrixArray[x][5]));
	}	
}

function loadMainImage(){

var styleColor = colorsAndImagesArray[0][0][1];

try{
	
	if(getFirstImage("N") == undefined){
	
	document.getElementById('SP-Image').src = "/jpegs/placeholder200.jpg";
	}
	else{
	document.getElementById("SP-Image").src = "/jpegs/" + getImage(style,styleColor,"N") + ".jpg";
	}
	
	currentZoomImage = new Image(492,694);
	currentZoomImage.src = "/jpegs/" + getImage(style,styleColor,"L") + ".jpg";

}
catch(e){}
}

function loadZoomObj(){
zi = document.getElementById("ZoomImage");
zi.src = currentZoomImage.src;
zio = document.getElementById("ZoomImageObj");
zio.style.display = "block";
hideDropdowns();
}

//show/hide larger
function closeZoom() {
	var pic = document.getElementById("ZoomImageObj");
	pic.style.display = "none";
	showDropdowns();
}


function loadColorsDropDown(){
cdd = document.getElementById("colorDropDown");
cdd.onchange = function(){handleColorDropDownChange(this)};
for(var x=0; x < colorsAndImagesArray.length;x++){
	for(var y=0;y < colorsAndImagesArray[x].length;y++){
		if(colorsAndImagesArray[x][y][0] == "color"){
			for(var z=0;z < colorsAndImagesArray[x].length;z++){
				if(colorsAndImagesArray[x][z][0] == "name"){
					var o = document.createElement("option");
					o.setAttribute("value",colorsAndImagesArray[x][y][1]);
					o.appendChild(document.createTextNode(colorsAndImagesArray[x][y][1]+ " (" + colorsAndImagesArray[x][z][1] + ")"));
					cdd.appendChild(o);
				}
			}
		}
	}
}

if(cdd.options.length == 1){//No colors returned - Add Sold Out Message
cdd.options[0].removeChild(cdd.options[0].firstChild);
cdd.options[0].appendChild(document.createTextNode("---Sold Out---"));
}
else{//At least one color is returned
	 //Had to use setTimeout because IE 6.0 throws and unknown error
	if(colorsAndImagesArray.length == 1){//If only one color is returned auto-select it
	 setTimeout(function() {cdd.options[1].selected = true;cdd.onchange();},0);
	}
}
}

function createColorBox(type,colorcode,hex1,hex2,styleColorImage){

/*
1	Solid
2	Vertical Striped
3	Horizontal Striped
4	Checkered
5	Dual Color Vertical
6	Dual Color Horizontal
7	Pattern or Image
*/


/*Solid */
if(type == "1"){
td = document.createElement("td");
td.setAttribute("width","20");
td.setAttribute("height","20");
td.className="colorbox";
td.id = colorcode;
td.onclick = function() {handleColorBoxClick(this);}

tbl = document.createElement("table");
tbl.setAttribute("width","20");
tbl.setAttribute("height","20");
tbl.cellPadding = "0";
tbl.cellSpacing ="0";
tbl.border = "0";

tb = document.createElement("tbody");

tr1 =document.createElement("tr");

tdsub1 = document.createElement("td");
tdsub1.setAttribute("width","20");
tdsub1.setAttribute("height","20");
tdsub1.style.background = "#" + hex1;

tr1.appendChild(tdsub1);
tb.appendChild(tr1);
tbl.appendChild(tb);
td.appendChild(tbl);

return td;
}

/*Vertical Striped*/
if(type == "2"){
var td = document.createElement("td");
td.setAttribute("width","20");
td.setAttribute("height","20");
td.className="colorbox";
td.id = colorcode;
td.onclick = function() {handleColorBoxClick(this);}

var tbl = document.createElement("table");
tbl.setAttribute("width","20");
tbl.setAttribute("height","20");
tbl.cellPadding = "0";
tbl.cellSpacing ="0";
tbl.border = "0";

var tb = document.createElement("tbody");

var tr1 =document.createElement("tr");

var tdsub1 = document.createElement("td");
tdsub1.setAttribute("width","15");
tdsub1.setAttribute("height","20");
tdsub1.style.background = "#" + hex1;

var tdsub2 = document.createElement("td");
tdsub2.setAttribute("width","5");
tdsub2.setAttribute("height","20");
tdsub2.style.background = "#" + hex2;

tr1.appendChild(tdsub1);
tr1.appendChild(tdsub2);
tb.appendChild(tr1);
tbl.appendChild(tb);
td.appendChild(tbl);

return td;
}

/*Horrizontal Striped*/
if(type == "3"){
var td = document.createElement("td");
td.setAttribute("width","20");
td.setAttribute("height","20");
td.className="colorbox";
td.id = colorcode;
td.onclick = function() {handleColorBoxClick(this);}

var tbl = document.createElement("table");
tbl.setAttribute("width","20");
tbl.setAttribute("height","20");
tbl.cellPadding = "0";
tbl.cellSpacing ="0";
tbl.border = "0";

var tb = document.createElement("tbody");

var tr1 =document.createElement("tr");

tdsub1 = document.createElement("td");
tdsub1.setAttribute("width","20");
tdsub1.setAttribute("height","5");
tdsub1.style.background = "#" + hex2;

var tr2 = document.createElement("tr");

var tdsub2 = document.createElement("td");
tdsub2.setAttribute("width","20");
tdsub2.setAttribute("height","15");
tdsub2.style.background = "#" + hex1;

tr1.appendChild(tdsub1);
tr2.appendChild(tdsub2);
tb.appendChild(tr1);
tb.appendChild(tr2);
tbl.appendChild(tb);
td.appendChild(tbl);

return td;
}

/*Checkered*/
if(type == "4"){
var td = document.createElement("td");
td.setAttribute("width","20");
td.setAttribute("height","20");
td.className="colorbox";
td.id = colorcode;
td.onclick = function() {handleColorBoxClick(this);}

var tbl = document.createElement("table");
tbl.setAttribute("width","20");
tbl.setAttribute("height","20");
tbl.cellPadding = "0";
tbl.cellSpacing ="0";
tbl.border = "0";

var tb = document.createElement("tbody");

var tr1 =document.createElement("tr");

var tdsub1 = document.createElement("td");
tdsub1.setAttribute("width","10");
tdsub1.setAttribute("height","10");
tdsub1.style.background = "#" + hex1;

var tdsub2 = document.createElement("td");
tdsub2.setAttribute("width","10");
tdsub2.setAttribute("height","10");
tdsub2.style.background = "#" + hex2;

var tr2 =document.createElement("tr");

var tdsub3 = document.createElement("td");
tdsub3.setAttribute("width","10");
tdsub3.setAttribute("height","10");
tdsub3.style.background = "#" + hex2;

var tdsub4 = document.createElement("td");
tdsub4.setAttribute("width","10");
tdsub4.setAttribute("height","10");
tdsub4.style.background = "#" + hex1;

tr1.appendChild(tdsub1);
tr1.appendChild(tdsub2);
tr2.appendChild(tdsub3);
tr2.appendChild(tdsub4);
tb.appendChild(tr1);
tb.appendChild(tr2);
tbl.appendChild(tb);
td.appendChild(tbl);

return td;
}

/*Dual Color Vertical*/
if(type == "5"){
var td = document.createElement("td");
td.setAttribute("width","20");
td.setAttribute("height","20");
td.className="colorbox";
td.id = colorcode;
td.onclick = function() {handleColorBoxClick(this);}

var tbl = document.createElement("table");
tbl.setAttribute("width","20");
tbl.setAttribute("height","20");
tbl.cellPadding = "0";
tbl.cellSpacing ="0";
tbl.border = "0";

var tb = document.createElement("tbody");

var tr1 =document.createElement("tr");

var tdsub1 = document.createElement("td");
tdsub1.setAttribute("width","10");
tdsub1.setAttribute("height","20");
tdsub1.style.background = "#" + hex1;

var tdsub2 = document.createElement("td");
tdsub2.setAttribute("width","10");
tdsub2.setAttribute("height","20");
tdsub2.style.background = "#" + hex2;

tr1.appendChild(tdsub1);
tr1.appendChild(tdsub2);
tb.appendChild(tr1);
tbl.appendChild(tb);
td.appendChild(tbl);

return td;
}

/*Dual Color Horrizontal*/
if(type == "6"){
var td = document.createElement("td");
td.setAttribute("width","20");
td.setAttribute("height","20");
td.className="colorbox";
td.id = colorcode;
td.onclick = function() {handleColorBoxClick(this);}

var tbl = document.createElement("table");
tbl.setAttribute("width","20");
tbl.setAttribute("height","20");
tbl.cellPadding = "0";
tbl.cellSpacing ="0";
tbl.border = "0";

var tb = document.createElement("tbody");

var tr1 =document.createElement("tr");

tdsub1 = document.createElement("td");
tdsub1.setAttribute("width","20");
tdsub1.setAttribute("height","10");
tdsub1.style.background = "#" + hex1;

var tr2 =document.createElement("tr");

var tdsub2 = document.createElement("td");
tdsub2.setAttribute("width","20");
tdsub2.setAttribute("height","10");
tdsub2.style.background = "#" + hex2;

tr1.appendChild(tdsub1);
tr2.appendChild(tdsub2);
tb.appendChild(tr1);
tb.appendChild(tr2);
tbl.appendChild(tb);
td.appendChild(tbl);

return td;
}

/*Image*/
if(type == "7"){
var td = document.createElement("td");
td.setAttribute("width","20");
td.setAttribute("height","20");
td.className="colorbox";
td.id = colorcode;
td.onclick = function() {handleColorBoxClick(this);}

var img = document.createElement("img");
img.setAttribute("src", "/widgets/stylecolorimages/" + styleColorImage);

td.appendChild(img);

return td;
}

}

function handleColorDropDownChange(obj){
var cdd = document.getElementById("colorDropDown");
var selectedColor = cdd.options[cdd.selectedIndex].value;
var selectedLabel = cdd.options[cdd.selectedIndex].firstChild.nodeValue;
var sizesByColor = httpRequestGet("wgweb.dll/ajax?method=getStyleSizesByColor&styleno=" + style+ "&color=" + selectedColor);
var sizesByColorArray = sizesByColor.split(",");

sdd = document.getElementById("sizeDropDown");
sdd.innerHTML = ""; 

var o = document.createElement("option");
o.setAttribute("value","select");
o.appendChild(document.createTextNode("Choose Size"));
sdd.appendChild(o);

for(var x=0;x < sizesByColorArray.length;x++){
	var o = document.createElement("option");
	o.setAttribute("value",sizesByColorArray[x]);
	
	//Add a "1SZ" size to dropdown for a SKU with no size to give the user something to click. Mostly effects hats.
	if(sizesByColorArray[x] == "" || sizesByColorArray[x] == null){
		if(selectedLabel != "Choose Color"){o.appendChild(document.createTextNode("1SZ"));}
	}
	else{
	o.appendChild(document.createTextNode(sizesByColorArray[x]));
	}
	sdd.appendChild(o);
}

if(sizesByColorArray.length == 1){
setTimeout(function() {sdd.options[1].selected = true;},0);
}

//Change Main image//SP-Image

if(cdd.selectedIndex != 0){
  try{
	var imgIDL = getImage(style,selectedColor,"L");
	var imgIDN = getImage(style,selectedColor,"N");
	
	if(imgIDN){
	document.getElementById("SP-Image").src = "/jpegs/" + imgIDN + ".jpg";
	}
	
	if(imgIDL){
	currentZoomImage = new Image(492,694);
	currentZoomImage.src = "/jpegs/" + imgIDL + ".jpg";
	}
  }
  catch(e){}
}


//For Badges Only - Last minute code.
var nb = document.getElementById("namebadge");
if(nb){
var br = document.getElementById("badgerow");
var sv = cdd.options[cdd.selectedIndex].innerHTML;
var pt = document.getElementById("perstypeid");

	if(sv.indexOf('eng') != -1 || sv.indexOf('ENG') != -1 || sv.indexOf('Eng') != -1){
	br.style.display = "block";
	pt.value = "17"
	}
	else{
	nb.value="";
	br.style.display = "none";
	pt.value = "null"
	}
}

}
function handleColorBoxClick(obj){
//Change Dropdown selection
cdd = document.getElementById("colorDropDown");
for (var x=1;x < cdd.options.length;x++){
	if(cdd.options[x].value == obj.id){
	cdd.options[x].selected = true;cdd.onchange();
	}
}

}

function getImage(styleID,styleColor,imageSize){
try{
for(var x=0; x < imagesArray.length;x++){
 if (imagesArray[x][1][1].indexOf(styleID + "_" + styleColor + "_" + imageSize) != -1){
	return(imagesArray[x][0][1]);
 }
}
}
catch(e){return "placeholder200"}
}

function getFirstImage(imageSize){
try{
for(var x=0; x < imagesArray.length;x++){
 if (imagesArray[x][1][1].indexOf("_" +imageSize+ "_") != -1){
	return(imagesArray[x][0][1]);
 }
}
}
catch(e){return "placeholder200"}
}

var clicked=false;
function SubmitStyleOnece(){
		if (clicked ){
			alert("Please wait processing request");
			return false;
	   } else {
			clicked=true;
			return true;
		}
}

function CheckStyleRequired(which) {
      var pass=true;
      for (var i=0;i<which.length;i++) {
		
      	var tempobj=which.elements[i];
			
         if ( tempobj.name =="color") {
				if ( tempobj.selectedIndex==0 ) {
				 alert("Please select a color. ");
				 	tempobj.focus();
					pass=false;
					break;
				}
			}
	      if (tempobj.name =="size") {
				if ( tempobj.selectedIndex==0 ) {
				 alert("Please select a size. ");
				 	tempobj.focus();
					pass=false;
			   	break;
				}
			}
			if ( tempobj.name =="qty"){
				if ( isNaN(tempobj.value) ) {
					alert("A number value is request for a quantity "+tempobj.value+"");
					tempobj.select();
					tempobj.focus();
					pass=false;
					break;
				}
			}
		}
     
      if (!pass) {
         return false;
      }  else {
         return  SubmitStyleOnece();
	  	}
}

//IE 6.0 bug fix that shows dropdowns on top of all layers
function hideDropdowns(){
dropdowns = document.getElementsByTagName('select') ;
	for (var i=0;i<dropdowns.length;i++)
  	{ 
 	 dropdowns[i].style.visibility = "hidden";
  	}
}

//IE 6.0 bug fix that shows dropdowns on top of all layers
function showDropdowns(){
dropdowns = document.getElementsByTagName('select') ;
	for (var i=0;i<dropdowns.length;i++)
  	{ 
 	 dropdowns[i].style.visibility = "visible";
  	}
}

//Checks color, name, and title fields for name badges
function CheckEngraved(){
	
	var cdd = document.namepin.color;
	var cddValue = cdd.options[cdd.selectedIndex].text;
	
	cddValue = cddValue.toUpperCase();
	
	if( cdd.options.selectedIndex == 0 ) {
		alert("Please select a badge type");
		return false;	
	}
	
	else {
	
		if ( cddValue.indexOf("BLANK") != -1 && ( document.namepin.text11.value != "" || document.namepin.text21.value != "" ) ) {
			alert("Please select Badge Type: ENGRAVED");
			return false;
		}
		else if ( cddValue.indexOf("ENG") != -1 && document.namepin.text11.value == "" ) {
			alert("Please enter your Name");
			return false;
		}
		
	}

	return true;
	
}