var reKeyboardChars = /[\x00\x03\x08\x0D\x16\x18\x1A]/;
var reClipboardChars = /[cvxz]/i;
var codeLookup = {
		//Width 17
		87:[17,312],
		//Width 16
		64:[16,420],37:[16,506],
		//Width 15
		109:[15,914],119:[15,1044],
		//Width 14
		77:[14,170],
		//Width 13
		88:[13,330],38:[13,439],
		//Width 12
		107:[12,892],65:[12,8],67:[12,37],75:[12,143],79:[12,202],81:[12,231],82:[12,245],86:[12,299],89:[12,344],61:[12,1099],95:[12,492],43:[12,466],60:[12,611],62:[12,626],
		// Width 11
		50:[11,667],51:[11,680],52:[11,693],54:[11,719],55:[11,733],56:[11,746],57:[11,759],48:[11,641],104:[11,861],112:[11,959],113:[11,972],120:[11,1061],121:[11,1074],66:[11,23],68:[11,52],
		69:[11,66],70:[11,79],71:[11,92],72:[11,107],78:[11,188],80:[11,217],83:[11,260],84:[11,273],85:[11,286],90:[11,358],35:[11,581],36:[11,384],163:[11,371],63:[11,397],
		//Width 10
		53:[10,707],97:[10,772],98:[10,786],99:[10,799],100:[10,812],101:[10,825],103:[10,848],110:[10,933],111:[10,946],115:[10,996],117:[10,1019],118:[10,1032],74:[10,130],76:[10,157],42:[10,454],
		//Width 9
		102:[9,837],122:[9,1087],92:[9,570],47:[9,560],34:[9,1124],
		//Width 8
		49:[8,654],114:[8,986],116:[8,1008],40:[8,524],41:[8,533],45:[8,481],
		//Width 7
		106:[7,882],
		//Width 6
		73:[6,121],33:[6,411],32:[6,1135],
		//Width 5
		105:[5,875],108:[5,906],59:[5,552],58:[5,544],39:[5,1115],44:[5,595],46:[5,603]};

var colour_lookup = { white:0,black:29,navy:58,orange:87,silver: 116 , gold: 145 , purple: 174 ,red: 203 ,blue: 232 ,yellow: 261 , green: 290 , pink:319 };

var warningTarget;
		
var frontPics = {/*mens pictures*/
					"SHW":"/images/mtsw.jpg",
					"SHB":"/images/mtsb.jpg",
					"BXW":"/images/mbw.jpg",
					"BXB":"/images/mbb.jpg",
				/*womens pictures*/
					"BRW":"/images/ltsw.jpg",
					"BRB":"/images/ltsb.jpg",
					"CSW":"/images/lnpw.jpg",
					"CSB":"/images/lnpb.jpg"
					}
					
var backPics = {/*mens pictures*/
					"SHW":"/images/mtswb.jpg",
					"SHB":"/images/mtsbb.jpg",
					"BXW":"/images/mbwb.jpg",
					"BXB":"/images/mbbb.jpg",
				/*womens pictures */
					"BRW":"/images/ltswb.jpg",
					"BRB":"/images/ltsbb.jpg",
					"CSW":"/images/lnpwb.jpg",
					"CSB":"/images/lnpbb.jpg"
					}

var fontColour;
		
$(document).ready(function(){	
	setupInitialValues();
	
   $(".msgTxt").keypress(function(event){ 
   		var reValidPhoneChars = /[\d ]/;
   		var reValidTextChars = /[\w \.\?\!@&\*\+-=,\£\$%\(\)\:;\\<>\/#\'\u00A3\"]/;
   		if ($(this).attr("id") == 'phoneid')
   			var searchExpr = reValidPhoneChars;
   		else
   			var searchExpr = reValidTextChars;
	 	
	 	return (maskKeyPress(event, searchExpr));
	 	
	 	});
   
   $(".msgTxt").keyup(function(){renderPhoneNumber(	$tabs.data('selected.tabs'));});
   
   var $tabs = $("#msgBox > ul").tabs({ selected: 1 });
   $(".npItem").click(function(){  
   		//
   		//Swap out main front and back images
   		//
   		var product_code = $(this).attr("id");
   		$("#prodFrontImage").attr("src",frontPics[product_code]);
		$("#prodBackImage").attr("src",backPics[product_code]);
		//
		var product_type = jQuery.trim($(this).find(".productLabel").text());
		var size= $("#pants_size").val();
		$(".prodMsg").html(product_type + " (Size: <span class='sizeMsg'>" + size + "</span>)");	
		$("#product_code").val(product_code);
		$(".npItem img.selected").removeClass("selected");
		$(this).find("img").addClass("selected");
		if (jQuery.browser.msie && parseInt(jQuery.browser.version) == 6){
			renderPhoneNumber($tabs.data('selected.tabs'));
		} 
  });
  
  $(".sizeSelector").click(function(){
		var size = $(this).attr("id").split("_")[1];
		$("#pants_size").val(size);
		$(".sizeMsg").text(size);
		$("div.sizeSelector.selected").removeClass("selected");
		$(this).addClass("selected");
	});
	
  $(".msgTxt").focus(function(){
  	var box_text = $(this).val();
  	if (box_text == 'Your Front Message here...' || box_text == 'Your Back Message here...' || box_text == 'Your Phone Number here...')
		$(this).val('');
  });
	
	
  $(".subswatch").click(function(){
  		$(".subswatch.selected").removeClass("selected");
  		$(this).addClass("selected");
  		fontColour = $(this).attr("id");
  		$("#fontColour").val($(this).text());
		$(".colourSelect").html("<span class='colourMessage'>" + $(this).text() + "</span>");
  		renderPhoneNumber($tabs.data('selected.tabs'));
  });
  
  $("#msgback").blur(function(){
  	if ($("#msgback").val().length == 0)
  		$("#msgback").val("Your Back Message here...");
  });
  
  $("#msgfront").blur(function(){
  	if ($("#msgfront").val().length == 0)
  		$("#msgfront").val("Your Front Message here...");
  });
  
   $("#phoneid").blur(function(){
  	if ($("#phoneid").val().length == 0)
  		$("#phoneid").val("Your Phone Number here...");
  });
  
  $('.ui-tabs-nav').bind('tabsselect', function(event, ui) {
    
    if (ui.index == 0){
    	// zero-based index of the selected (clicked) tab
		$("#msgback").val("Your Back Message here...");
		$("#msgfront").val("Your Front Message here...");
		
		if ($("#prodBackImage").css("visibility") == 'visible')
				$("#prodBackImage").css("visibility","hidden");
		renderPhoneNumber(0);
		// check for offer
		
		} 
	else{
		$("#phoneid").val("Your Phone Number here...");
		renderPhoneNumber(1);
		}
		
});

//Swap out back image

$("#msgback").focus(function(){
	$("#prodBackImage").css("visibility","visible");
	renderPhoneNumber($tabs.data('selected.tabs'));
});
  
$(".msgTxt").not("#msgback").focus(function(){
	$("#prodBackImage").css("visibility","hidden");
	renderPhoneNumber($tabs.data('selected.tabs'));
});  

$("#basketb").click(function(){
	if ($tabs.data('selected.tabs') == 0){
		var cleanPhone = jQuery.trim($("#phoneid").val());
		var phoneOK = cleanPhone == 'Your Phone Number here...';
		
		if (phoneOK || cleanPhone.length == 0){
			alert("Please enter a phone number before adding to the basket");
			return false;
		}
		$("#msgfront").remove();
		$("#msgback").remove();
		}
		
	else { 	var cleanFront = jQuery.trim($("#msgfront").val());
			var cleanBack = jQuery.trim($("#msgback").val());
			
			var frontMsgEmpty = (cleanFront == 'Your Front Message here...') || cleanFront.length == 0;
			var backMsgEmpty = (cleanBack == 'Your Back Message here...') || cleanBack.length == 0;

			if (frontMsgEmpty && backMsgEmpty){
				alert("You must enter a message in at least one of the message boxes");
				return false;
			}
		 	$("#phoneid").remove();
		 	if (frontMsgEmpty) $("#msgfront").val("None");
		 	if (backMsgEmpty) $("#msgback").val("None");

		}
	
	// Set offer cookie to show offer pane
	document.cookie = 'offer=true';
});

   renderPhoneNumber($tabs.data('selected.tabs'));
   
   	if (jQuery.browser.msie && parseInt(jQuery.browser.version) == 6){
		$("#thumbnails img").not(".selected").mouseover(function(){$(this).css("border-color","red")});
		$("#thumbnails img").not(".selected").mouseout(function(){$(this).css("border-color","")});
	}
   
 });



function setupInitialValues(){
	var initial_size = 'M';
	var initial_colour = "Black";
	/* Check here for whether men or women products */
	
	var initial_product_men = "SHW";
	var initial_product_women = "BRW";
	
	if ($("body").attr("id") == 'men')
		var initial_product_code = initial_product_men;
	else
		var initial_product_code = initial_product_women;
		
	var filter_code = "div.npItem#" + initial_product_code + " p.productLabel";
	var filter_image = "div.npItem#" + initial_product_code + " img";
	//Set product_code input variable with initial product code;
	$("#product_code").val(initial_product_code);
	$("#pants_size").val(initial_size);
	var initial_product_text = jQuery.trim($(filter_code).text());
	$(".prodMsg").html(initial_product_text + " (Size: <span class='sizeMsg'>" + initial_size + "</span>)");

	// Set Selected Pants Size //
	
	$("#size_" + initial_size).addClass("selected");

	// Add Red Highlight to selected product
	$(filter_image).addClass("selected");
	
	//Set Colour
		$("#black").addClass("selected");
		fontColour = 'black';
		$("#fontColour").val('Black');
		$(".colourSelect").html("<span class='colourMessage'>Black</span>");
		$("#msgback").val("Your Back Message here...");
		$("#msgfront").val("Your Front Message here...");
		$("#phoneid").val("Your Phone Number here...");
			
}
	
function removeOffer(){
	$("#offer").fadeOut(2000,function(){
		$("#offer").removeClass("makevisible");
	});
}


function renderPhoneNumber(selected){
	var t = document.getElementById("mainMessage");
	if (selected == 0) {
		var mainMessage = $("#phoneid").val();
	} else {
		var frontOrBackImg = $("#prodBackImage").css("visibility");
		if (frontOrBackImg == 'visible')
			var mainMessage = $("#msgback").val();
		else
			var mainMessage = $("#msgfront").val();
	}
	// Show default message
	if (mainMessage == 'Your Back Message here...' || mainMessage == 'Your Front Message here...' || mainMessage == 'Your Phone Number here...')
		mainMessage = 'Welcome to NumberPants.com';
		
	$("#mainMessage").empty();
	
	var length = 0;
	for (var i=0; i < mainMessage.length; i++){
		length += codeLookup[mainMessage.charCodeAt(i)][0];
	}
	$("#mainMessage").width(length);
	var code;
	var tempDiv;
	var tempDivClass = "imgDiv";
	
	if (jQuery.browser.msie && parseInt(jQuery.browser.version) == 6){
		if ($(".prodMsg").text().indexOf('Black') >= 0)
			tempDivClass = "imgDivIE6";
		else
			tempDivClass = "imgDivwIE6";
	}

	for (var i=0; i < mainMessage.length; i++){
		code = mainMessage.charCodeAt(i);
		tempDiv = "<div class='" + tempDivClass +"' style='width:" + codeLookup[mainMessage.charCodeAt(i)][0] + "px;background-position: -" +  codeLookup[mainMessage.charCodeAt(i)][1] + "px -" + colour_lookup[fontColour]  +"px;'></div>";
		$("#mainMessage").append(tempDiv);
	}
	
}
			
			//mask function
	function maskKeyPress(objEvent,reValidChars) {
		var iKeyCode, strKey;  
				
		if (jQuery.browser.msie) {
		    iKeyCode = objEvent.keyCode;
		    var objTarget = objEvent.target;
		} else {
		    iKeyCode = objEvent.which;
		    var objTarget = objEvent.currentTarget;
		}
				
		strKey = String.fromCharCode(iKeyCode);

		if (!reValidChars.test(strKey) && !reKeyboardChars.test(strKey) && !checkClipboardCode(objEvent, strKey)) {
			setWarningColour(objTarget);	
			return false;
		}
		if(!reKeyboardChars.test(strKey)){
		
			if ((objTarget.id == 'phoneid' && $(objTarget).val().length >= 20) || (objTarget.id !='phoneid' && $(objTarget).val().length >= 40)){
				setWarningColour(objTarget);	
				return false;
			}}	
	}
		
	function setWarningColour(target){
		$(target).css("background-color","#D40D12");
		warningTarget = target;
		setTimeout("resetWarningColour()",100);
	}
	
	function resetWarningColour(){
		$(warningTarget).css("background-color","#FFF");
	}
	
	function checkClipboardCode(objEvent, strKey) {
	  	if (jQuery.browser.mozilla)
	    	return objEvent.ctrlKey && reClipboardChars.test(strKey);
	    else
		  	return false;
		}