// Set to true when getPersonalizationData's async ajax call completes.
// code in products.js waits for this to happen before attempting to interact
// with the DOM
var kaAjaxComplete = false;

var SiteRoot = "/";

var ViewAllDesignImage=SiteRoot+"ka-personalizer/personalized/common/KA_viewdesigns.gif"
var PerImgurl=SiteRoot+"ka-personalizer/";

var datahandlUrl="http://www.personalizationpreviewtools.com"

var colordesc="(Please note: Colors may vary from screen to screen and may appear different when printed.) ";
var textboxdesc="Please make sure all text entered is correct and there are no typo's";
var previewdesc="Click to preview your design.";
var designdesc="Pick your favorite...so many delightful choices! (Please note: Colors may vary from screen to screen and may appear different when printed. Font styles cannot be changed from one design to another.) ";
var shapedesc="";
var Options = { path: '/', expires: 0.017 };


$(document).ready(function () {
	$('body').append("<div id='divLoading' style=\"z-index:9999; display:none; border:solid 1px #555; background:#ffffaa; width:90px; height:18px; position:absolute; left:auto; text-align:center; left:1px;\">Loading...</div>");
});

//ajax to get data from data server
function getPersonalizationData(itemNumber,divId) {
	var ItemData="";
	var value=GetCookie("cook"+itemNumber+"event");
	if(value!="" && value!=null) {
		ItemData=value+"|"+itemNumber;
	} else {
		ItemData="|"+itemNumber;
	}

	ItemData="data=all|" + ItemData;

	$("#divLoading").show();

	var url = datahandlUrl+"/Datahandle/ProductDataHandler.ashx?"+ItemData+"&callback=GeneratePersonlization&jsoncallback=?";


	$.get(url,
		function(json){
			GeneratePersonlization(json,itemNumber,divId);
			$("#divLoading").hide();
			kaAjaxComplete = true;
		}, 'json'
	);
}

//GetDesignImage
function GetDesignImage(itemNumber,count,IsContainEvent) {
	var itemData="";
	itemData=GetReturnData(itemNumber);

	itemData="design|"+itemNumber+"|"+itemData +"|"+count+"|"+IsContainEvent;
	$.getJSON(datahandlUrl+"/Datahandle/ProductDataHandler.ashx?data="+itemData+"&callback=RebindDesignImage&jsoncallback=?",
		function(json){
			RebindDesignImage(json,itemNumber,count,IsContainEvent);
		}
	);
}

function GetPreviewImage(item,count,IsContainEvent) {

	if($("#cbk"+item).attr("checked")!=true) {
		alert("Double check product customization and confirm it is correct.");
		return;
	}

	var itemData="image";
	var cookieimgid="cookimg"+item;
	var Image=$.cookie(cookieimgid);

	var ids=$("#"+item+"PRETable7").text();
	itemData = itemData+"|"+item+"|"+GetTextBoxValue(item)+"|"+Image+"|"+count+"|"+IsContainEvent;
	$.getJSON(datahandlUrl+"/Datahandle/ProductDataHandler.ashx?data="+itemData+"&callback=LoadPreviewImage&jsoncallback=?",
		function(img) {
			LoadPreviewImage(img,item,count,IsContainEvent);
		}
	);
}

function getDesignData(eventid,itemNumber) {
	var itemData="";
	itemData=$("#"+eventid).val()+"|"+itemNumber;

	$.getJSON(datahandlUrl+"/Datahandle/ProductDesignHandler.ashx?data="+itemData+"&callback=RebinDropDropDown&jsoncallback=?",
		function(json){
			RebinDropDropDown(json,itemNumber+"design");
		}
	)
}

//generate interface function
function GeneratePersonlization(json,itemNumber,divId) {
	if (json.length == 0)
		return;

	var divObj = $("#"+divId);
	divObj.html("");
	var strTable = "";

	var hiddenServer = "";
	$.each(json, function(i) {
		if(json[i].TypeName=="dd" && json[i].LabelName=="Event") {
			var id=itemNumber+json[i].LabelName.toLowerCase();
			var hidid="hidserver"+itemNumber+json[i].LabelName.toLowerCase();

			var str="<select id=\""+id +"\" onchange=\"SetCookieSelectOnChange('"+id+"','"+itemNumber+"');getDesignData('"+id+"','"+itemNumber+"');\">";
			var LabelValueOptions=json[i].LabelValueOptions;
			str+=AddSelectOptions(id,LabelValueOptions);
			strTable+=AddRow("",'<label for="'+id+'">'+json[i].LabelName+":</label>",str+ AddEndSelectTag(),"");
		} else if(json[i].TypeName=="dd" && json[i].LabelName=="Design") {
			var id=itemNumber+json[i].LabelName.toLowerCase();
			var hidid="hidserver"+itemNumber+json[i].LabelName.toLowerCase();
			var str="<select id="+id+" onchange=SetCookieSelectOnChange('"+id+"','"+itemNumber+"');SetMonogramTextBoxLabel('"+itemNumber+"',this); >";
			var LabelValueOptions=json[i].LabelValueOptions;
			str+=AddSelectOptions(id,LabelValueOptions);

			strTable+=AddRow("",'<label for="'+id+'">'+json[i].LabelName+":</label>",str+ AddEndSelectTag()+"<br/>"+AddMonogramTextBox(itemNumber,""),"") ;

		} else if(json[i].TypeName=="dd" && json[i].LabelName!="Event" && json[i].LabelName!="Design") {
			var id=itemNumber+json[i].LabelName.toLowerCase();
			var hidid="hidserver"+itemNumber+json[i].LabelName.toLowerCase();
			var  str="<select id="+id+" onchange=SetCookieSelectOnChange('"+id+"','"+itemNumber+"'); >";
			var LabelValueOptions=json[i].LabelValueOptions;
			str+=AddSelectOptions(id,LabelValueOptions);

			strTable+=AddRow("",'<label for="'+id+'">'+json[i].LabelName+":</label>",str+ AddEndSelectTag(),"")
		} else {
			strTable+=AddRow("",AddTextBoxPreLabel(itemNumber,json[i].LabelName), AddTextBox(itemNumber,json[i].LabelName,json[i].MaxLength,""),"");
		}
	});

	divObj.append(AddStartTable()+AddViewAllDesignImage(itemNumber,ViewAllDesignImage)+strTable+AddEndTable() +hiddenServer);

	divObj.append("<div id='"+itemNumber+"PRE' style=\"display:none;\" ></div>");
	divObj.append("<div id='"+itemNumber+"PRETable5' style=\"display:none;\" ></div>");
	divObj.append("<div id='"+itemNumber+"PRETable6' style=\"display:none;\"></div>");
	divObj.append("<div id='"+itemNumber+"PRETable7' style=\"display:none;\"></div>");
	divObj.append("<div id='"+itemNumber+"PREDesign'  style=\"display:none;\"></div>");


	GeneratePreview(json,itemNumber);
	GetAllReturnValue(itemNumber);

	$('#personalize-' + itemNumber).fancybox({
		padding       : 0,
		margin        : 0,
		autoScale     : false,
		width         : '960px',
		height        : '400px',
		showNavArrows : false,
		onStart   : function() {
			$("#div1").html( $("#"+itemNumber+"PRE").html());
			$("#div2").html( $("#"+itemNumber+"PRETable5").html());
			$("#div3").html( $("#"+itemNumber+"PRETable6").html());	
			$("#divDesign").html( $("#"+itemNumber+"PREDesign").html());
		}
	});

	if (!($.browser.msie && $.browser.version == '7.0')) {
		$('li.p13n-row').find('select, input:text').uniform();
	}
}

function GeneratePreview(json,itemNumber) {
	var count = json[0].Count;
	var IsContainEvent=json[0].IsContainEvent;

	GenerateTables(itemNumber,itemNumber+"PRE",count,IsContainEvent);
	GenerateTable5(itemNumber,itemNumber+"PRETable5");
	GenerateTable6(itemNumber,itemNumber+"PRETable6",count,IsContainEvent);
	GenerateTable3(itemNumber,itemNumber+"PREDesign");

	var textboxid = "";
	var strTable = "";

	strTable+=AddRow("tr"+itemNumber+"Monogramq","1 Letter Monogram: ",AddMonogramTextBox(itemNumber,"q"),"q");
	var labelid = "";
	var designlabelid = "" ;
	$.each(json, function(i){
		if(json[i].TypeName=="dd" && json[i].LabelName.toLowerCase()=="event") {
			AddHeadAndPic("td0",colordesc,"step_theme.gif","table0",itemNumber);
			AddLabelItem(json[i].LabelValueOptions,"table0"+itemNumber,json[i].LabelName,itemNumber,json[i].LabelId,count,IsContainEvent);
			$("#td0"+itemNumber).attr("class","subheadtext");
		} else if(json[i].TypeName=="dd" && json[i].LabelName.toLowerCase()=="design") {
			if(count==1 && IsContainEvent==1)
				AddHeadAndPic("td3",designdesc,"step_design.gif","table3",itemNumber);
			else if(count==1 && IsContainEvent==0)
				AddHeadAndPic("td3",designdesc,"step_design.gif","table3",itemNumber);
			else if(count==2 && IsContainEvent==1)
				AddHeadAndPic("td3",designdesc,"step_design.gif","table3",itemNumber);
			else if(count==2 && IsContainEvent==0)
				AddHeadAndPic("td3",designdesc,"step_design.gif","table3",itemNumber);
			else if(count==3 && IsContainEvent==1)
				AddHeadAndPic("td3",designdesc,"step_design.gif","table3",itemNumber);
			else if(count==3 && IsContainEvent==0)
				AddHeadAndPic("td3",designdesc,"step_design.gif","table3",itemNumber);

			designlabelid=json[i].LabelId;
			AddLabelItem(json[i].LabelValueOptions,"table3"+itemNumber,json[i].LabelName,itemNumber,json[i].LabelId,count,IsContainEvent);
		} else if(json[i].TypeName=="dd" && (json[i].LabelName.toLowerCase()=="color" || json[i].LabelName.toLowerCase()=="ink")) {
			if(count==2 && IsContainEvent==1)
				AddHeadAndPic("td1",colordesc,"step_color.gif","table1",itemNumber);
			else if(count==2 && IsContainEvent==0)
				AddHeadAndPic("td1",colordesc,"step_color.gif","table1",itemNumber);
			else if(count==3 && IsContainEvent==1)
				AddHeadAndPic("td1",colordesc,"step_color.gif","table1",itemNumber);
			else if(count==3 && IsContainEvent==0)
				AddHeadAndPic("td1",colordesc,"step_color.gif","table1",itemNumber);
			AddLabelItem(json[i].LabelValueOptions,"table1"+itemNumber,json[i].LabelName,itemNumber,json[i].LabelId,count,IsContainEvent);
			$("#td1"+itemNumber).attr("class","subheadtext");
		} else if(json[i].TypeName=="dd" && json[i].LabelName.toLowerCase()=="shape") {
			if(count==2 && IsContainEvent==1)
				AddHeadAndPic("td2",shapedesc,"step_shape.gif","table2",itemNumber);
			else if(count==2 && IsContainEvent==0)
				AddHeadAndPic("td2",shapedesc,"step_shape.gif","table2",itemNumber);
			else if(count==3 && IsContainEvent==1)
				AddHeadAndPic("td2",shapedesc,"step_shape.gif","table2",itemNumber);
			else if(count==3 && IsContainEvent==0)
				AddHeadAndPic("td2",shapedesc,"step_shape.gif","table2",itemNumber);
			AddLabelItem(json[i].LabelValueOptions,"table2"+itemNumber,json[i].LabelName,itemNumber,json[i].LabelId,count,IsContainEvent);
			$("#td2"+itemNumber).attr("class","subheadtext");
		} else {
			if(count==1 && IsContainEvent==1)
				AddHeadAndPic("td5",textboxdesc,"step_makeityours.gif","table5",itemNumber);
			else if(count==1 && IsContainEvent==0)
				AddHeadAndPic("td5",textboxdesc,"step_makeityours.gif","table5",itemNumber);
			else if(count==2 && IsContainEvent==1)
				AddHeadAndPic("td5",textboxdesc,"step_makeityours.gif","table5",itemNumber);
			else if(count==2 && IsContainEvent==0)
				AddHeadAndPic("td5",textboxdesc,"step_makeityours.gif","table5",itemNumber);
			else if(count==3 && IsContainEvent==1)
				AddHeadAndPic("td5",textboxdesc,"step_design.gif","table5",itemNumber);
			else if(count==3 && IsContainEvent==0)
				AddHeadAndPic("td5",textboxdesc,"step_makeityours.gif","table5",itemNumber);

			var trid="tr"+itemNumber+trimBlank(json[i].LabelName).toLowerCase()+"q";
			textboxid+="txt"+itemNumber+trimBlank(json[i].LabelName).toLowerCase()+"|";
			strTable+=AddRow(trid,AddTextBoxPreLabel(itemNumber,json[i].LabelName), AddTextBox(itemNumber,json[i].LabelName,json[i].MaxLength,"q"),"q");
			labelid+=json[i].LabelId+"|";
		}
	})

	strTable=strTable+"<tr><td colspan=2 class='cbk'><input type=checkbox id='cbk"+itemNumber+"' onclick=CheckboxChange(this,'"+itemNumber+"') /><label for='cbk"+itemNumber+"'>Personalization has been double checked and is correct.</label></td></tr>";

	textboxid+="txt"+itemNumber+"Monogram";
	$("#table5"+itemNumber).html(strTable);

	$("#"+itemNumber+"PRETable7").append(textboxid);
	labelid+=designlabelid;
	$.cookie("labelid"+itemNumber, labelid, Options);
}

//event function
function GetObjValue(obj,itemNumber,imgUrl,count,IsContainEvent) {

	$("#div2").html("");
	var pre=obj.name+"_";
	var cookieid="cook"+itemNumber+obj.name.toLowerCase();
	var cookieimgid="cookimg"+itemNumber;
	var valueid=obj.value.replace(pre,"");

	$.cookie(cookieid, valueid, Options);

	$.cookie(cookieimgid, imgUrl, Options);
	$("#"+itemNumber+obj.name.toLowerCase()).attr("value",obj.value.replace(pre,""));
	
	if(obj.name.toLowerCase()=="design") {
		SetMonogramTextBoxLabelForPreview(itemNumber,obj,"q");
		$("#"+itemNumber+obj.name.toLowerCase()).trigger("onchange");
	} else {
		GetDesignImage(itemNumber,count,IsContainEvent);
	}

	$("#div2").html($("#"+itemNumber+"PRETable5").html());
}

function LoadPreviewImage(img,itemNumber,count,IsContainEvent) {
	$("#"+itemNumber+"PRETable6").html("");
	GenerateTable6(itemNumber,itemNumber+"PRETable6",count,IsContainEvent);
	$("#ImageButtonDraw"+itemNumber).attr("src","");
	$("#ImageButtonDraw"+itemNumber).attr("src",img);
	$("#ImageButtonDraw"+itemNumber).attr("style","display:inline;");
	$("#Confirm"+itemNumber).attr("style","display:inline;");
	$("#Reset"+itemNumber).attr("style","display:inline;");
	$("#div3").html( $("#"+itemNumber+"PRETable6").html());
	$("#div4").height("180");
	//$("#windown-content").scrollTop($("#div1").height()+$("#divDesign").height()+ $("#div2").height() +$("#div3").height()+ $("#div4").height())
	$('#windown-box').scrollTop(999999);
	setTimeout( "$('#windown-box').scrollTop(999999);", 250);
}

function RebindDesignImage(json,itemNumber,count,IsContainEvent) {
	$("#"+itemNumber+"PREDesign").html("")
		GenerateTable3(itemNumber,itemNumber+"PREDesign");
	if(count==1 && IsContainEvent==1)
		AddHeadAndPic("td3",designdesc,"step_design.gif","table3",itemNumber);
	else if(count==1 && IsContainEvent==0)
		AddHeadAndPic("td3",designdesc,"step_design.gif","table3",itemNumber);
	else if(count==2 && IsContainEvent==1)
		AddHeadAndPic("td3",designdesc,"step_design.gif","table3",itemNumber);
	else if(count==2 && IsContainEvent==0)
		AddHeadAndPic("td3",designdesc,"step_design.gif","table3",itemNumber);
	else if(count==3 && IsContainEvent==1)
		AddHeadAndPic("td3",designdesc,"step_design.gif","table3",itemNumber);
	else if(count==3 && IsContainEvent==0)
		AddHeadAndPic("td3",designdesc,"step_design.gif","table3",itemNumber);

	var divObj=$("#table3"+itemNumber);
	$.each(json, function(i){
		AddImageItem("Design",json[i].KeyName,json[i].KeyValue,json[i].ImageName,divObj,itemNumber);
	})

	$("#divDesign").html( $("#"+itemNumber+"PREDesign").html());

	RebinDropDropDown(json,itemNumber+"design");

	//var _version = $.browser.version;

	//if ( _version == 7.0 )
	//{
	//    var div=$("#windown-content")[0];
	//    div.scrollTop = 500;
	// }
}

function CheckboxChange(obj,item) {
	$("#cbk"+item).attr("checked","true");
}

function EmptyTextBox(id) {
	$("#"+id+"q").val("");
	$("#"+id+"q").trigger("onchange")
}

function SetValue(itemNumber,flag) {

	if(flag=="color") {
		$("#imgtd1"+itemNumber).attr("src",PerImgurl+"personalized/common/step_color.gif");
		$("#imgtd2"+itemNumber).attr("src",PerImgurl+"personalized/common/step_shape.gif");
		$("#desctd1"+itemNumber).text(colordesc);
		$("#desctd2"+itemNumber).text(shapedesc);
		$("#divHead"+itemNumber).attr("class","pinktabrule");

		var color=$("#table1"+itemNumber).html();
		var shape=$("#table2"+itemNumber).html();

		$("#table1"+itemNumber).html(shape);
		$("#table2"+itemNumber).html(color);
		$("#div1").html( $("#"+itemNumber+"PRE").html());

	} else if(flag=="shape") {
		$("#imgtd1"+itemNumber).attr("src",PerImgurl+"personalized/common/step_shape.gif");
		$("#imgtd2"+itemNumber).attr("src",PerImgurl+"personalized/common/step_color.gif");
		$("#desctd1"+itemNumber).text(shapedesc);
		$("#desctd2"+itemNumber).text(colordesc);
		$("#divHead"+itemNumber).attr("class","orangetabrule");
		var color=$("#table1"+itemNumber).html();
		var shape=$("#table2"+itemNumber).html();
		$("#table1"+itemNumber).html(shape);
		$("#table2"+itemNumber).html(color);
		$("#div1").html( $("#"+itemNumber+"PRE").html());
	}
}

function CloseOpenWindow(itemNumber) {
	$.fancybox.close();
	$('#a' + itemNumber + 'DIV ul.p13n-body').show().find('li.p13n-row').show();

	if (!($.browser.msie && $.browser.version == '7.0')) {
		$.uniform.update('#order-form select');
	}
}

function selectDrop(id) {
	var obj=document.getElementById(id);
	var str = "";
	for ( i = 0; i < obj.length; i++) {
		if(obj[i].selected) {
			str +=  obj[i].value + obj[i].text;
			break;
		}
	}
}

function ChangeDrop(id,value) {
	$("#id").attr("value",value);
}

function SetMonogramTextBoxLabel(itemnumber,obj) {
	SetMonogramTextBoxLabelVisible(itemnumber,obj.options[obj.selectedIndex].text,"");
}

function SetMonogramTextBoxLabelForPreview(itemnumber,obj) {
	SetMonogramTextBoxLabelVisible(itemnumber,obj.title,"q");
}

function SetMonogramTextBoxLabelVisible(itemnumber,val,id) {
	if (val.toLowerCase()=="monogram") {
		SetMonogram123TextBoxLabel(itemnumber,"0",id);
	} else if (val.toLowerCase()=="monogram 1" || val.toLowerCase().indexOf("monogram1")!=-1) {
		SetMonogram123TextBoxLabel(itemnumber,"1",id);
	} else if (val.toLowerCase()=="monogram 2" || val.toLowerCase().indexOf("monogram2")!=-1) {
		SetMonogram123TextBoxLabel(itemnumber,"2",id);
	} else if (val.toLowerCase()=="monogram 3" || val.toLowerCase().indexOf("monogram3")!=-1) {
		SetMonogram123TextBoxLabel(itemnumber,"3",id);
	} else {
		SetMonogram123TextBoxLabel(itemnumber,"4",id);
	}
}

function HidTextBox34(itemnumber,id) {
	var objTextLabel=new TexbBoxAndLabel(itemnumber);
	$("#"+objTextLabel.textLine3).hide();
	$("#"+objTextLabel.textLine3).val("");
	$("#"+objTextLabel.textLine3).trigger("onchange");
	$("#"+objTextLabel.labelLine3).hide();
	$("#"+objTextLabel.prelabelLine3).hide();

	$("#"+objTextLabel.textLine4).hide();
	$("#"+objTextLabel.textLine4).val("");
	$("#"+objTextLabel.textLine4).trigger("onchange");
	$("#"+objTextLabel.labelLine4).hide();				
	$("#"+objTextLabel.prelabelLine4).hide();
}

function ShowTextBox34(itemnumber,id) {
	var objTextLabel=new TexbBoxAndLabel(itemnumber);
	$("#"+objTextLabel.textLine3+id).show();
	$("#"+objTextLabel.labelLine3+id).show();
	$("#"+objTextLabel.textLine4+id).show();
	$("#"+objTextLabel.labelLine4+id).show();
	$("#"+objTextLabel.prelabelLine3+id).show();
	$("#"+objTextLabel.prelabelLine4+id).show();
}

function SetMonogram123TextBoxLabel(itemnumber,flag,id) {
	var objTextLabel=new TexbBoxAndLabel(itemnumber);
	ShowTextBox34(itemnumber,id);
	if(id!="") {
		$("#"+objTextLabel.trLine3).show();
		$("#"+objTextLabel.trLine4).show();
	}			

	if(flag=="0") {
		$("#"+objTextLabel.textLine0+id).show();
		$("#"+objTextLabel.labelLine0+id).show();

		if(id!="") {
			$("#"+objTextLabel.trLine0).show();
		}
	} else if(flag=="1") {
		SetTextBoxMaxLength(objTextLabel.textLine1+id,objTextLabel.labelLine1+id,1)
		SetTextBoxMaxLength(objTextLabel.textLine2+id,objTextLabel.labelLine2+id,10)
		if(id!="") {
			$("#"+objTextLabel.trLine3).hide();
			$("#"+objTextLabel.trLine4).hide();
		} else {
			HidTextBox34(itemnumber,id);				
		}
	} else if(flag=="2") {
		SetTextBoxMaxLength(objTextLabel.textLine1+id,objTextLabel.labelLine1+id,3)
		SetTextBoxMaxLength(objTextLabel.textLine2+id,objTextLabel.labelLine2+id,10)

		if(id!="") {
			$("#"+objTextLabel.trLine3).hide();
			$("#"+objTextLabel.trLine4).hide();
		} else {
			HidTextBox34(itemnumber,id);	
		}

	} else if(flag=="3") {
		SetTextBoxMaxLength(objTextLabel.textLine1+id,objTextLabel.labelLine1+id,1)
		SetTextBoxMaxLength(objTextLabel.textLine2+id,objTextLabel.labelLine2+id,15)
		SetTextBoxMaxLength(objTextLabel.textLine3+id,objTextLabel.labelLine3+id,15)
		SetTextBoxMaxLength(objTextLabel.textLine4+id,objTextLabel.labelLine4+id,10)
		if(id!="") {
			$("#"+objTextLabel.trLine3).show();
			$("#"+objTextLabel.trLine4).show();
		} else {
			$("#"+objTextLabel.textLine3).show();
			$("#"+objTextLabel.labelLine3).show();
			$("#"+objTextLabel.prelabelLine3).show();				
			$("#"+objTextLabel.textLine4).show();
			$("#"+objTextLabel.labelLine4).show();				
			$("#"+objTextLabel.prelabelLine4).show();
		}
	} else if(flag=="4") {
		ReSetTextBoxLength(objTextLabel.textLine1+id,objTextLabel.labelLine1+id);
		ReSetTextBoxLength(objTextLabel.textLine2+id,objTextLabel.labelLine2+id);
		ReSetTextBoxLength(objTextLabel.textLine3+id,objTextLabel.labelLine3+id);
		ReSetTextBoxLength(objTextLabel.textLine4+id,objTextLabel.labelLine4+id);

		if(id!="") {
			$("#"+objTextLabel.trLine3).show();
			$("#"+objTextLabel.trLine4).hide();
			$("#"+objTextLabel.trLine0).hide();
		} else {
			$("#"+objTextLabel.textLine3).show();
			$("#"+objTextLabel.labelLine3).show();
			$("#"+objTextLabel.prelabelLine3).show();

			$("#"+objTextLabel.textLine4).hide();
			$("#"+objTextLabel.textLine4).val("");
			$("#"+objTextLabel.textLine4).trigger("onchange");
			$("#"+objTextLabel.labelLine4).hide();
			$("#"+objTextLabel.prelabelLine4).hide();
		}

		$("#"+objTextLabel.textLine0).hide();
		$("#"+objTextLabel.textLine0).val("");
		$("#"+objTextLabel.textLine0).trigger("onchange");
		$("#"+objTextLabel.labelLine0).hide();
	}
}

function SetTextBoxMaxLength(txtid,labelid,length) {
	$("#"+txtid).attr("maxlength",length);
	$("#"+labelid).text(length + " chars max)");
}

function ReSetTextBoxLength(txtid,labelid) {
	if($("#"+txtid.replace("txt","hidden"))!=null) {
		$("#"+txtid).attr("maxlength",$("#"+txtid.replace("txt","hidden")).val());
		$("#"+labelid).text("("+$("#"+txtid.replace("txt","hidden")).val()+" characters max)");
	}
}

function RebinDropDropDown(json,id) {
	var obj=document.getElementById(id);
	obj.options.length = 0;
	var str = "";
	$.each(json, function(i){
		var varItem = new Option(json[i].KeyName,json[i].KeyValue);
		obj.options.add(varItem);
	});
}

//data help function
function GetReturnData(item) {
	var val=new ReturnValue(item);
	if($.cookie("cook"+item+"event") !=null)
		val.EventValue=$.cookie("cook"+item+"event");
	if($.cookie("cook"+item+"shape") !=null)
		val.ShapeValue=$.cookie("cook"+item+"shape");
	if($.cookie("cook"+item+"color") !=null)
		val.ColorValue=$.cookie("cook"+item+"color");
	if($.cookie("cook"+item+"ink") !=null)
		val.InkValue=$.cookie("cook"+item+"ink");
	if($.cookie("cook"+item+"design") !=null)
		val.DesignValue=$.cookie("cook"+item+"design");
	return JSON.stringify(val);
}

function GetAllReturnValue(item) {
	var returnStr="";

	if($.cookie("cook"+item+"design")!=null && $.cookie("cook"+item+"design")!="") {
		returnStr+="Design: "+ $("#"+item+"design").find("option:selected").text() ;

		if($("#"+item+"design").find("option:selected").text().toLowerCase()=="monogram") {
			returnStr+=" - "+ $("#txt"+item+"Monogram").val();
		}
		returnStr+="|";
	}

	if($.cookie("cook"+item+"ink")!=null && $.cookie("cook"+item+"ink")!="") {
		returnStr+="Ink: "+ $("#"+item+"ink").find("option:selected").text() + "|";
	}

	if($.cookie("cook"+item+"color")!=null && $.cookie("cook"+item+"color")!="") {
		returnStr+="Color: "+ $("#"+item+"color").find("option:selected").text() + "|";
	}

	if($.cookie("cook"+item+"shape")!=null && $.cookie("cook"+item+"shape")!="") {
		returnStr+="Shape: "+ $("#"+item+"shape").find("option:selected").text() + "|";
	}

	if($.cookie("cook"+item+"textline1")!=null && $.cookie("cook"+item+"textline1")!="") {
		returnStr+="Text Line 1: "+$("#txt"+item+"textline1").val()+"|"
	}

	if($.cookie("cook"+item+"textline2")!=null && $.cookie("cook"+item+"textline2")!="") {
		returnStr+="Text Line 2: "+$("#txt"+item+"textline2").val()+"|"
	}

	if($.cookie("cook"+item+"textline3")!=null && $.cookie("cook"+item+"textline3")!="") {
		returnStr+="Text Line 3: "+$("#txt"+item+"textline3").val()+"|"
	}

	if($.cookie("cook"+item+"textline4")!=null && $.cookie("cook"+item+"textline4")!="") {
		returnStr+="Text Line 4: "+$("#txt"+item+"textline4").val()+"|"
	}

	$("#hidden"+item).val(returnStr);

	return returnStr;
}

function GetTextBoxValue(item) {
	var value=new ReturnTextValue();
	var ids=$("#"+item+"PRETable7").text();
	var id=ids.split("|");

	var labelids=$.cookie("labelid"+item);
	var lid=labelids.split("|");

	value.Monogram=$("#"+id[id.length-1]).val();
	value.MonogramId=lid[lid.length-1];

	if(id.length>1) {
		value.Value1=$.cookie(id[0].replace("txt","cook"));
		value.ValueId1=lid[0];
	}

	if(id.length>2) {
		value.Value2=$.cookie(id[1].replace("txt","cook"));
		value.ValueId2=lid[1];
	}

	if(id.length>3) {
		value.Value3=$.cookie(id[2].replace("txt","cook"));
		value.ValueId3=lid[2];
	}

	if(id.length>4) {
		value.Value4=$.cookie(id[3].replace("txt","cook"));
		value.ValueId4=lid[3];
	}

	if(id.length>5) {
		value.Value5=$.cookie(id[4].replace("txt","cook"));
		value.ValueId5=lid[4];
	}

	for (var i = 1; i <= 5; ++i) {
		if (value['Value' + i]) {
			value['Value' + i] = value['Value' + i].replace('&', '%26');
		}
	}

	value = JSON.stringify(value);
	return value;
}

// UI HELP function
function EmptyAllTextBox(item) {
	var ids=$("#"+item+"PRETable7").text();
	var id=ids.split("|");

	for (i = 0; i < id.length; i++) {
		EmptyTextBox(id[i])
	}

	$("#div2").html($("#"+item+"PRETable5").html());

	$("#div3").html("");
	$("#ImageButtonDraw"+item).attr("src","");
	$("#ImageButtonDraw"+item).attr("style","display:none;");
	$("#div3").html($("#"+item+"PRETable6").html());
}

function ScrollToButtom() {
	var div=$("#windown-content")[0];
	div.scrollTop = div.scrollHeight+1000;
}

function AddSubHeaderPic(pic,description,item,tdid) {
	var strReturn="";
	strReturn+="<div class=\"headerline\"><img src="+PerImgurl+"personalized/common/"+pic+"  id=img"+tdid+item+" width=\"534\" /></div>";
	strReturn+="<div class=\"bodytext\">";
	strReturn+="<span id=desc"+tdid+item+">"+description+"</span>";
	strReturn+="</div>";
	return strReturn;
}

function AddHeader(itemNumber,count,IsContainEvent) {   var strReturn=""; 
	return '';
	strReturn+="<tr><td class=\"headertext\" scope=\"col\">";
	strReturn+="<div id=divHead"+itemNumber+" class=\"pinktabrule\">";
	strReturn+="<span class=\"style1\">";

	/*if(count==3 && !IsContainEvent) {
		strReturn+="<input type=image name=\"ImageButtonPink\" id=\"ImageButtonPink\" border=0 align=\"absbottom\" src="+PerImgurl+"personalized/common/shopbycolor.gif  onclick=\"SetValue('"+itemNumber+"','color');\" />"
		strReturn+="<input type=image name=\"ImageButtonorange\" id=\"ImageButtonorange\" border=0 align=\"absbottom\" src="+PerImgurl+"personalized/common/shopbyshape.gif onclick=\"SetValue('"+itemNumber+"','shape');\"  />"
	} else {
		strReturn+="<img name=\"ImageButtonPink\" id=\"ImageButtonPink\" border=0 align=\"absbottom\" src="+PerImgurl+"personalized/common/shopbydesign.gif   />"
	}*/

	strReturn+="</span>";
	strReturn+="</div>";
	strReturn+="</td></tr>";
	return strReturn;
}

function AddConfirm(itemNumber,count,IsContainEvent) {
	var strReturn="";
	strReturn+="<table>";
	strReturn+=" <tr>";
	strReturn+="  <td align=left> ";
	strReturn+="      <img  id=\"ImageButtonPreview\" style='cursor:hand;' src='"+PerImgurl+"personalized/common/preview.gif' onclick=\" GetPreviewImage('"+itemNumber+"','"+count+"','"+IsContainEvent+"'); ScrollToButtom();\" style=\"border-width: 0px;\" /></td>";
	strReturn+=" </tr>";
	strReturn+=" <tr>";
	strReturn+="  <td id=tdImage align=center>";
	strReturn+="      <img  id=ImageButtonDraw"+itemNumber+"    style='display:none;' />";
	strReturn+="   </td>";
	strReturn+="   </tr>   ";
	strReturn+=" <tr>";
	strReturn+="  <td align=left>";
	strReturn+="      <input type=image id=Confirm"+itemNumber+"  style='display:none;cursor:hand;' src='"+PerImgurl+"personalized/common/confirm.gif' onclick=\" GetAllReturnValue('"+itemNumber+"');CloseOpenWindow('" + itemNumber + "');\"  />";
	strReturn+="     <input type=image  id=Reset"+itemNumber+" style='display:none;cursor:hand;' src='"+PerImgurl+"personalized/common/reset.gif' onclick=\"EmptyAllTextBox('"+itemNumber+"');\"  />";
	strReturn+="  </td>";
	strReturn+=" </tr>";
	strReturn+="</table>";
	return strReturn;
}

function GenerateTable5(itemNumber,divid) {
	var divObj=$("#"+divid);
	var strReturn="";
	strReturn+="<table width=\"100%\" border=\"0\" align=\"center\" cellpadding=\"0\" cellspacing=\"0\">";
	strReturn+="<tr><td id=td5"+itemNumber+" align=left scope=col class=subheadtext>";
	strReturn+="</td></tr>";
	strReturn+="</table>";
	divObj.append(strReturn);
}

function GenerateTable3(itemNumber,divid) {
	var divObj=$("#"+divid);
	var strReturn="";
	strReturn+="<table width=\"100%\" border=\"0\" align=\"center\" cellpadding=\"0\" cellspacing=\"0\">";
	strReturn+="<tr><td id=td3"+itemNumber+" align=left scope=col class=subheadtext>";
	strReturn+="</td></tr>";
	strReturn+="</table>";
	divObj.append(strReturn);
}

function GenerateTable6(itemNumber,divid,count,IsContainEvent) {
	var divObj=$("#"+divid);
	var strReturn="";
	strReturn+="<table width=\"100%\" border=\"0\" align=\"center\" cellpadding=\"0\" cellspacing=\"0\">";
	strReturn+="<tr><td id=td6"+itemNumber+" align=left class=subheadtext>";

	if(count==1 && (IsContainEvent==1))
		strReturn+=AddSubHeaderPic("step_preview.gif",previewdesc);
	else if(count==1 &&(IsContainEvent==0))
		strReturn+=AddSubHeaderPic("step_preview.gif",previewdesc);
	else if(count==2 && (IsContainEvent==1))
		strReturn+=AddSubHeaderPic("step_preview.gif",previewdesc);
	else if(count==2 && ( IsContainEvent==0))
		strReturn+=AddSubHeaderPic("step_preview.gif",previewdesc);
	else if(count==3 && (IsContainEvent==1))
		strReturn+=AddSubHeaderPic("step_preview.gif",previewdesc);
	else if(count==3 && ( IsContainEvent==0))
		strReturn+=AddSubHeaderPic("step_preview.gif",previewdesc);

	strReturn+=AddConfirm(itemNumber,count,IsContainEvent);
	strReturn+="</td></tr>";
	strReturn+="</table>";
	divObj.append(strReturn);
}

function GenerateTables(itemNumber,divid,count,IsContainEvent) {
	var divObj=$("#"+divid);
	var strReturn="";

	strReturn+="<table width=\"100%\" border=\"0\" align=\"center\" cellpadding=\"0\" cellspacing=\"0\">";
	strReturn+=AddHeader(itemNumber,count,IsContainEvent);
	strReturn+="<tr><td id=td0"+itemNumber+" align=left >";
	strReturn+="</td></tr>";
	strReturn+="<tr><td id=td1"+itemNumber+"  align=left >";
	strReturn+="</td></tr>";
	strReturn+="<tr><td id=td2"+itemNumber+"  align=left >";
	strReturn+="</td></tr>";
	strReturn+="</table>";
	divObj.append(strReturn);
}

function AddSubTable(tableid) {
	var strReturn="";
	strReturn+="<table  border=\"0\" style=\"width:100%;\">";
	strReturn+="<tr><td><div class=\"ProductList\" id=\""+tableid+"\" ></div>";
	strReturn+="</td></tr>";
	strReturn+="</table>";
	return strReturn;
}

function AddSubTableForPreViewTextbox(tableid) {
	var strReturn="";
	strReturn+="<table id=\""+tableid+"\" border=\"0\" style=\"width:100%;\">";
	strReturn+="</table>";
	return strReturn;
}

function AddHeadAndPic(tdid,desc,pic,tableid,item) {
	var strReturn="";
	strReturn+=AddSubHeaderPic(pic,desc,item,tdid);
	strReturn+=AddSubTable(tableid+item);
	$("#"+tdid+item).html(strReturn);
}

function EmptyTable(itemnumber) {
	$("#table3").html("");
	$("#lbl"+itemnumber+"textline1q").text("sdfsadfsdf");
	$("#windown-content").html($("#"+itemnumber+"PRE").html());
	$("#chen").val("sfdfdf");
}

function AddLabelItem(jsonOption,TbaleId,typename,itemNumber,labelid,count,IsContainEvent) {
	var strReturn="";
	var divObj=$("#"+TbaleId);

	AddItemOptions(typename,jsonOption,divObj,itemNumber,labelid,count,IsContainEvent);
}

function AddItemOptions(typename,json,divObj,itemNumber,labelid,counts,IsContainEvent) {
	var str="";
	var count=0
	$.each(json, function(j,n) {
		if(count==0) {
			var cookieid="cook"+itemNumber+typename.toLowerCase();

			$.cookie(cookieid, n.KeyValue, Options);
			if(typename.toLowerCase()=="design") {
				var cookieimgid="cookimg"+itemNumber;
				$.cookie(cookieimgid, n.ImageName, Options);
			}
			Ischecked="checked";
		} else {
			Ischecked="";
		}
		AddImageItem(typename,n.KeyName,n.KeyValue,n.ImageName,divObj,itemNumber,Ischecked,counts,IsContainEvent);
		count+=1;
	});
}

function AddImageItem(typename,lablename,labelid,imgUrl,divObj,itemNumber,Ischecked,count,IsContainEvent) {
	var strDive="";
	strDive+="<div class=\"ProductListItem\">";
	strDive+="                 <div>";
	strDive+="                     <table>";
	strDive+="                         <tr>";
	strDive+="                             <td>";
	strDive+="                                     <input  title='"+lablename+"' onclick=GetObjValue(this,'"+itemNumber+"','"+imgUrl+"','"+count+"','"+IsContainEvent+"')  name="+typename+" type=radio "+ Ischecked +" id=\""+labelid +"\" value=\""+typename+"_"+labelid +"\" /></td>";
	strDive+="                             <td>";

	if(typename.toLowerCase()!="event") {
		strDive+="                                 <div>";
		strDive+="                                     <span>";
		strDive+="                                         <img src=\""+PerImgurl+"personalized/"+imgUrl.toLowerCase()+"\" />";
		strDive+="                                             </span></div>";
	}

	strDive+="                                 <div>";
	strDive+="                                     <span  class=\"bodytext\" align=\"center\">"+lablename+"</span></div>";
	strDive+="                             </td>";
	strDive+="                         </tr>";
	strDive+="                     </table>";
	strDive+="                 </div>";
	strDive+="             </div>";

	divObj.append(strDive);
}

function AddTextBox(itemnumber,labelname, MaxLength,flag) {
	var options = { path: '/', expires: 1 };

	var value="";

	var id="txt"+itemnumber+trimBlank(labelname).toLowerCase()+flag;
	var idlb="lbl"+itemnumber+trimBlank(labelname).toLowerCase()+flag;
	var originid="txt"+itemnumber+trimBlank(labelname).toLowerCase();

	var idcookie="cook"+itemnumber+trimBlank(labelname).toLowerCase() ;
	var hidid="hidden"+itemnumber+trimBlank(labelname).toLowerCase()+flag;

	value=GetCookie(idcookie);

	if(flag!="")
		value="";

	var hidden="<input type=hidden id="+hidid+" value="+MaxLength+" /> ";

	if(flag=="")
		return "<input type='text' onchange=SetCookieTextOnChange('"+idcookie+"','"+id+"',this,'"+originid+"','"+itemnumber+"') id='"+id+"' maxlength="+MaxLength+"  value='"+value+"' /><span  id="+idlb+">"+MaxLength+" characters max</span>"+hidden;
	else
		return "<input type='text' onchange=SetCookieTextOnChange('"+idcookie+"','"+id+"',this,'"+originid+"','"+itemnumber+"') id='"+id+"' maxlength="+MaxLength+" value='"+value+"' /> <span  id="+idlb+">"+MaxLength+" characters max</span>"+hidden;
}

function AddMonogramTextBox(itemnumber,flag) {
	var id="txt"+itemnumber+"Monogram"+flag;
	var originid="txt"+itemnumber+"Monogram";
	var idlb="lbl"+itemnumber+"Monogram"+flag;
	var idcookie="cook"+itemnumber+"Monogram";


	if(flag=="") {
		var value="";
		value=GetCookie(idcookie);
		return "<input type='text' class='monogram-box' onchange=SetCookieTextOnChange('"+idcookie+"','"+id+"',this,'"+originid+"','"+itemnumber+"') style='display:none;' id='"+id+"' maxlength='1'  value='"+value+"' /> <span class='monogram-length-label' style='display:none;' id="+idlb+">1 character max</span>"
	} else {
		return "<input type='text'   id='"+id+"' maxlength='1' onchange=SetCookieTextOnChange('"+idcookie+"','"+id+"',this,'"+originid+"','"+itemnumber+"') /> <span>1 character max</span><br/>"
	}
}

function AddStartTable() {
	return '<ul class="p13n-body">';
	return "<table>"
}

function AddViewAllDesignImage(itemnumber,imgeurl) {
	var img_btn ="<li class='btn'><a class='personalize-button' id='personalize-" + itemnumber + "' class='"+itemnumber+"' href=\"#windown-box\">Personalize This Item</a></li>";
		//<img id='img"+itemnumber+"' src='"+ViewAllDesignImage+"'  style=\"border:0;\" /></a>";

	return  img_btn;
}

function AddRow(id,tdstr1,tdstr2,flag) {
	var pretag="";
	if(id=="") {
		pretag='<li class="p13n-row">';
		//pretag='<div class="row p13n-row" style="display:none">';
	} else {
		if(id.indexOf("Monogram")>-1) {
			pretag="<li id='"+id+"' class='bodytext row' style='display:none;'>";
		} else {
			pretag="<li id='"+id+"' class='bodytext row'>";
		}	
	}

	return  pretag+tdstr1+tdstr2+"</li>";
}


function AddEndTable() {
	return '</ul>';
	return "</table>";
}

function AddTextBoxPreLabel(itemnumber,labelname) {
	var id="plb"+itemnumber+trimBlank(labelname).toLowerCase();
	var txtid="txt"+itemnumber+trimBlank(labelname).toLowerCase();
	return '<label for="'+txtid+'"><span id="'+id+'">'+labelname+':</span></label>';
}

function SetCookieTextOnChange(cookieid,id,obj,originid,itemnumber) {
	$.cookie(cookieid, obj.value, Options);
	$("#"+id).val(obj.value);
	$("#"+originid).val(obj.value);
	GetAllReturnValue(itemnumber);
}

function SetCookieSelectOnChange(id,itemnumber) {
	var cookieid="cook"+id;
	var value=$("select[id="+id+"] option[selected]").val();
	$.cookie(cookieid, value, Options);
	GetAllReturnValue(itemnumber);
}

function SetSelectValue(id) {
	var cookieid="cook"+id;
	var value=GetCookie(cookieid);

	if(value!="" && value!= null)
		$("#id").attr("value",value);
}

function GetCookie(cookieid) {
	var value="";

	if($.cookie(cookieid)!=null)
		value= $.cookie(cookieid);

	return value;
}

function EmptyCookie(id) {
	$.cookie("cook"+id, null, Options);
}

function AddSelectOption(id,KeyName,KeyValue) {
	var value="";
	value=GetCookie("cook"+id);

	if(value!="" && value!=null && KeyValue.toLowerCase()==value.toLowerCase())
		return "<option value='"+KeyValue+"' selected >"+KeyName+"</option>";
	else
		return "<option value='"+KeyValue+"'>"+KeyName+"</option>";
}

function AddSelectOptions(id,json) {
	var str="";
	$.each(json, function(j,n) {
		str+=(AddSelectOption(id,n.KeyName,n.KeyValue));
	});

	return str;
}

function AddEndSelectTag() {
	return "</select>";
}

function AddStartSelectTag(id) {
	return "<select id='"+id+"' >";
}

function trimBlank(obj) {
	return(obj.replace(/\s/g, ""));
}

function AddEndDiv() {
	return "</div>";
}

function AddStartDiv() {
	return "<div class=\"ProductList\">";
}

// ============== class object =====================
function TexbBoxAndLabel(itemnumber) {
	this.textLine0 = "txt"+itemnumber+"Monogram";
	this.labelLine0 = "lbl"+itemnumber+"Monogram";
	this.trLine0 = "tr"+itemnumber+"Monogramq";

	this.textLine1 = "txt"+itemnumber+"textline1";
	this.textLine2 = "txt"+itemnumber+"textline2";
	this.textLine3 = "txt"+itemnumber+"textline3";
	this.textLine4 = "txt"+itemnumber+"textline4";
	this.labelLine1 ="lbl"+itemnumber+"textline1";
	this.labelLine2 ="lbl"+itemnumber+"textline2";
	this.labelLine3 ="lbl"+itemnumber+"textline3";
	this.labelLine4 ="lbl"+itemnumber+"textline4";
	this.trLine3 ="tr"+itemnumber+"textline3q";
	this.trLine4 ="tr"+itemnumber+"textline4q";
	this.prelabelLine1 ="plb"+itemnumber+"textline1";
	this.prelabelLine2 ="plb"+itemnumber+"textline2";
	this.prelabelLine3 ="plb"+itemnumber+"textline3";
	this.prelabelLine4 ="plb"+itemnumber+"textline4";
}

function ReturnValue(itemnumber) {
	this.EventValue="";
	this.ColorValue="";
	this.DesignValue="";
	this.InkValue=""
		this.ShapeValue=""
}

function ReturnTextValue() {
	this.Value1="";
	this.Value2="";
	this.Value3="";
	this.Value4="";
	this.Value5="";
	this.Monogram="";
	this.ValueId1="";
	this.ValueId2="";
	this.ValueId3="";
	this.ValueId4="";
	this.ValueId5="";
	this.MonogramId="";
}


//======================== write html ==============