var Crate = Crate || {};
Crate.UI = {
	BindEnterKey : function(e, method)
	{
		if(e.keyCode == 13)
		{
			if( e.srcElement ) {
				e.target = e.srcElement;
				e.currentTarget = e.srcElement;
			}
			if( e.preventDefault )
				e.preventDefault();
			method(e);
			return false;
		}
	}
};

var mainDim;
//var signUpDim;
var remTimer;
var emailThanks;
var signUp;
var rem;
var main;
var reminderAni;
var reminderAniFast;
var emailThanksAni;
var emailThanksUnMasked;
var emailThanksMasked;
var textOn;
var fxon;
var fxoff;
var subNavCont;
var subNavOpen;
var initMask;
var fieldLabelAni;
var fieldAni;
var formErrorAni;
var signUpErrorAni;
var thanksAni;
var objRequest;
TimeCop = new TimerCop();
var InvalidEmailAddressForOptIn = "Sorry, that email address is invalid.";
var InvalidFirstName = "Please complete First Name.";
var InvalidGiftCard = "Please complete Gift Card.";
var InvalidLastName= "Please complete Last Name.";
var InvalidAddress = "Please complete the Address field.";
var InvalidCity = "Please complete City field.";
var InvalidProvince = "Please select a Province.";
var InvalidPostalCode = "Please complete Postal Code field.";
var InvalidAreaCode = "Please complete Area Code field.";
var InvalidPrefixCode = "Please complete prefix field.";
var InvalidSuffixCode = "Please complete suffix field.";

try {
	objRequest = new ActiveXObject("Msxml2.XMLHTTP");
	} catch(e) {
	try { objRequest = new ActiveXObject("Microsoft.XMLHTTP");}
	catch (oc) { objRequest = null; }
	}

	if(!objRequest && typeof XMLHttpRequest != "undefined") {
		objRequest = new XMLHttpRequest();
	}
	
// Button Rollover Code
function rollOver(imgID, imgName)
{
	if (navigator.appName== "Netscape" && parseInt(navigator.appVersion) >= 3)
		document.images[imgID].src = "/assets/" + imgName;
	else if (navigator.appName != "Netscape" && parseInt(navigator.appVersion) >= 4) 
		document.images[imgID].src = "/assets/" + imgName;
		
	if(imgID == "navAbout"){
		if(imgName == "nav_aboutus_on.gif"){
			subNavOpen = true;
			subNavCont.setStyle('visibility', 'visible');
			subNavAni.start(subNavMasked, subNavUnMasked);
		}
	}
	
	else{
		if(subNavOpen){
			closeSubNav();
		}
	}
}


function clearErrorText(){
	formErrorAni.start({'opacity': 0});
}

function fieldError(fieldName){
	fieldLabelAni = new Fx.Styles($(fieldName + 'Label'), {duration:200, wait:false});
	//fieldAni = new Fx.Styles($(fieldName + 'Border'), {duration:200, wait:false});
	fieldLabelAni.start({'color': '#cc1212'});
	//fieldAni.start({'border-width':'2px'});
}

function fieldClear(fieldName){
	fieldLabelAni = new Fx.Styles($(fieldName + 'Label'), {duration:200, wait:false});
	fieldLabelAni.start({'color': '#444444'});
}

function closeSubNav(){
	subNavOpen = false;
	subNavAni.start(subNavUnMasked, subNavMasked);
	subNavCont.setStyle('visibility', 'hidden');
}

function remOver(){
	if(window.kitDet){
		if(currOpen == "kit"){
			galleryClose();
		}
	}
	$clear(remTimer);
	reminderAniFast.start({
		'top': '0px'
	});
}

function remOut(){
	reminderAniFast.start({
		'top': '-87px'
	});
}

function moveReminder(){
	reminderAni.start({
		'top': (rem.getCoordinates().height - 10) * -1
	});
	$clear(remTimer);
}

function reposRem(){
	rem.setStyle('right', mainDim.left);
	rem.setStyle('visibility', 'visible');
}

//function reposEmailThanks(){
//	//alert('repos');
//	emailThanks.setStyle('top', signUpDim.top);
//	if(window.ie){
//		emailThanks.setStyle('left', signUpDim.left - 14);
//	}
//	else{
//		emailThanks.setStyle('left', signUpDim.left - 14);
//	}
//}

function placeText(txt, dim, pos){
	txt.setStyle('left', dim.left + pos);
	txt.setStyle('top', dim.top + dim.height - txt.getCoordinates().height - pos);
	txt.setStyle('visibility', 'visible');
}

function initButton(button, dim){
	button.setStyle('left', dim.left);
	button.setStyle('top', dim.top);
	button.setStyle('width', dim.width);
	button.setStyle('height', dim.height);
	button.setStyle('opacity', 0.001);
}

function initializeMask(detail, mask, unmask){
	initMask = detail.effect('clip', {duration: 200, transition: Fx.Transitions.Quad.easeInOut});
	initMask.start(unmask, mask);
}

function initBorder(borderObj, dim){
	borderObj.setStyle('left', dim.left);
	borderObj.setStyle('top', dim.top);
	if(window.ie || window.webkit420){
		borderObj.setStyle('width', (dim.width));
	}
	else{
		borderObj.setStyle('width', (dim.width - 1));
	}
	
	if(window.webkit420){
		borderObj.setStyle('left', dim.left + 1);
	}
	
	borderObj.setStyle('height', (dim.height -1));
	borderObj.setStyle('visibility', 'visible');
}

function buttonOver(hotSpot, textObj, borderObj, bottomOnly, borderWidth, isImage){
	fxon = new Fx.Styles(borderObj, {duration:200, wait:true});
	fxoff = new Fx.Styles(borderObj, {duration:200, wait:true});
	textOn = new Fx.Styles(textObj, {duration:200, wait:true});
	hotSpotDim = hotSpot.getCoordinates();
		
	if(window.ie){
		if(bottomOnly){
			fxon.start({
				'border-bottom-width': borderWidth + "px",
				'height': hotSpotDim.height - borderWidth,
			//	'width': hotSpotDim.width + 1
				'width': hotSpotDim.width + 1
			});
		}
		else{
			fxon.start({
				'border-width': borderWidth + "px",
			//	'height': hotSpotDim.height,
			//	'width': hotSpotDim.width + 1
				'height': hotSpotDim.height + 1 - (borderWidth * 2),
				'width': hotSpotDim.width + 1 - (borderWidth * 2)
			});
		}
	}
	else{
		if(bottomOnly){
			fxon.start({
				'border-bottom-width': borderWidth + "px",
				'height': hotSpotDim.height - borderWidth,
				'width': hotSpotDim.width
			});
		}
		else{
			fxon.start({
				'border-width': borderWidth + "px",
				'height': hotSpotDim.height - (borderWidth * 2),
				'width': hotSpotDim.width - (borderWidth * 2)
			});
		}
	}
	
	if(isImage){
		textOn.start({
			'opacity': 1
		});
	}
	else{
		textOn.start({
			'color': '#1c7ec5'
		});
	}
}

function buttonOut(hotSpot, textObj, borderObj, bottomOnly, isImage){
	fxon = new Fx.Styles(borderObj, {duration:200, wait:true});
	fxoff = new Fx.Styles(borderObj, {duration:200, wait:true});
	textOn = new Fx.Styles(textObj, {duration:200, wait:true});
	hotSpotDim = hotSpot.getCoordinates();
	
	if(bottomOnly){
		fxoff.start({
			'border-bottom-width': '0px',
			'height': hotSpotDim.height,
			'width': hotSpotDim.width
		});
	}
	else{
		fxoff.start({
			'border-width': '0px',
			'height': hotSpotDim.height,
			'width': hotSpotDim.width
		});
	}
		
	if(isImage){
		textOn.start({
			'opacity': 0
		});
	}
	else{
		textOn.start({
			'color': '#000000'
		});
	}
}

/*
function initDet(det, dim, align, leftOffset, topOffset){
	
	var detW;
	var detH;
	
	if(window.ie){
		detW = det.getCoordinates().width + 10;
		detH = det.getCoordinates().height + 10;
		det.setStyle('top', dim.top + topOffset);
		det.setStyle('left', dim.left + leftOffset + 1);
		
		
	}
	else{
		detW = det.getCoordinates().width;
		detH = det.getCoordinates().height;
		det.setStyle('top', dim.top + topOffset);
		det.setStyle('left', dim.left + leftOffset);
	}
		
	if(align == "R"){
		det.setStyle('left', (dim.left + dim.width) - detW);
	}
	else if(align == "TR"){
		detH = det.getCoordinates().height;
		det.setStyle('left', (dim.left + dim.width) - detW + 2);
		det.setStyle('top', (dim.top + dim.height) - detH);
	}
	else if(align == "T"){
		if(window.ie){
			det.setStyle('left', (dim.left + dim.width) - detW + 1);
		}
		det.setStyle('top', (dim.top + dim.height) - detH);
	}
}
*/

function initDet(det, dim, topOffset, leftOffset){	
	det.setStyle('top', dim.top + topOffset);
	det.setStyle('left', dim.left + leftOffset);
}

function initSubNav(dim){
}

//function signUpThanks(email){
//	//alert(emailThanks.id);
//	$('emailAddress').setText(email);
//	$('signUpErrorLayer').setStyle('visibility', 'hidden');
//	emailThanks.setStyle('visibility', 'visible');
//	emailThanksAni.start(emailThanksMasked, emailThanksUnMasked);
//}

//function signUpError(){
//	//alert('error');
//	var fieldLabelDim = $('signUpEmail').getCoordinates();
//	var formDim = $('signUpForm').getCoordinates();
//	$('signUpErrorLayer').setStyle('opacity', 0);
//	$('signUpErrorLayer').setStyle('visibility', 'visible');
//	$('signUpErrorLayer').setStyle('top', fieldLabelDim.top);
//	$('signUpErrorLayer').setStyle('left', formDim.left + formDim.width - 200);
//	signUpErrorAni.start({'opacity': 1});
//}

//function submitEmailForm(e){
//	new Event(e).stop();
//	$('signUpForm').send({evalScripts:true});
//}	

function initCommon(page){
	emailThanks = $('emailThanks');
	signUp = $('signUp');

	rem = $('reminder');
	main = $('topTable');
	subNavCont = $('subNavCont');
	
	reminderAni = new Fx.Styles(rem, {duration:1000, wait:true, transition: Fx.Transitions.Quad.easeIn});
	reminderAniCareers = new Fx.Styles(rem, {duration:500, wait:true, transition: Fx.Transitions.Quad.easeOut});
	reminderAniFast = new Fx.Styles(rem, {duration:500, wait:true, transition: Fx.Transitions.Quad.easeOut});

	//emailThanksAni = emailThanks.effect('clip', {duration: 750, transition: Fx.Transitions.Quad.easeInOut});
	emailThanksUnMasked = [0,466,95,0];
	emailThanksMasked = [0,0,95,0];
	//emailThanksAni.start(emailThanksUnMasked, emailThanksMasked);
	
	formErrorAni = new Fx.Styles($('formError'), {duration:200, wait:false});
	signUpErrorAni = new Fx.Styles($('signUpErrorLayer'), {duration:200, wait:false});
	
	//$('signUpForm').addEvent('submit', submitEmailForm);
	
	if(page == "home"){
		return true;
	}
	else {	
		subNavAni = subNavCont.effect('clip', {duration: 500, transition: Fx.Transitions.Quad.easeInOut});
		subNavMasked = [0,466,0,0];
		subNavUnMasked = [0,466,95,0];
		if(page != "about" && page != "catalogue"){
			subNavCont.addEvent('mouseleave', closeSubNav);
			subNavAni.start(subNavUnMasked, subNavMasked);
		}
		else{
			subNavCont.setStyle('visibility', 'visible');
		}

	}
		
	if(page == "careers"){
		rem.setStyle('top', (rem.getCoordinates().height - 10) * -1);
		reminderAniCareers.start({
			'top': 0
		});
	}
	else{
		rem.addEvent('mouseenter', remOver);
		rem.addEvent('mouseleave', remOut);			
		remTimer = moveReminder.periodical(2000);
	}
	
}

//Generic function to send a request to the AJAX handler.
	//Stub.  Needs to be converted to post and refer the ajaxHandler.
	function SendAJAX(url,processFunction,throttle) {
		//alert("sending ajax: "+url);
		if(throttle && TimeCop.checkProcess(processFunction) == "locked") {
		   return;
		   }
		
		if(throttle && TimeCop.checkProcess(processFunction) != "locked") {
		   setTimeout("TimeCop.unlockProcess("+processFunction+")", throttle);
		   TimeCop.lockProcess(processFunction);
		}
		
		
		objRequest.open("GET",url,true); //will be ajaxHandler.aspx
		objRequest.setRequestHeader("Content-Type", "text/xml");
		
		if(!processFunction) {processFunction = Process;}
		objRequest.onreadystatechange = processFunction;
		objRequest.send(null);
	}
	
	function TimerCop() {
	 this.processes = new Array();
	 this.checkProcess = checkProcess;
	 this.lockProcess = lockProcess;
	 this.unlockProcess = unlockProcess;
	}
	
	function unlockProcess(process) {
	 this.processes[process] = "unlocked";
	}
	
	function lockProcess(process) {
	 this.processes[process] = "locked";
	}
	
    function checkProcess(process) {
	 return this.processes[process];
	}
	
	//Retrieves an HTML element based on id
	function GetHTMLNode(id) {
        //alert("getting HTML node");
		if(document.getElementById) {
		   if(document.getElementById(id)) { return document.getElementById(id); }
		}
		return null;
	}
	
	function IsValidResponse() {
	//alert(objRequest.readyState+":"+objRequest.status);
	if(objRequest != null && objRequest.readyState == 4) { 
	//		if(objRequest.status == 200) {		
				return true;

	//		} 
	}
	return false;
	
	}
	
	//Retrieve the inner text of a HTML element.  May not work with all tags.
	function GetHTMLText(id) {
		  if(GetHTMLNode(id) != null) {
	       return GetHTMLNode(id).innerHTML;
	       }
	}
	
	//Retrieve the text node of an XML element.
	function GetXMLText(name,index) {
	    if(GetXMLNode(name,index) != null) {
	       return GetXMLNode(name,index).firstChild.nodeValue;
	       }
	}
	
	//Set the inner text of an HTML element. SPAN seems to work best.
	function SetInnerText(id,text) {
		if(GetHTMLNode(id)){GetHTMLNode(id).innerHTML = text;}
	}
	
	//Retreives all elements in the XML document based on that tagname
	function GetXMLList(name) {
	 if(objRequest != null) {
		return objRequest.responseXML.getElementsByTagName(name);
	    } 
	    return null;
	}
	
	//Specifically, get all the elements in the XML document and return
	//either the first (or only) or a specific element within a list
	function GetXMLNode(name,index) {
		if(objRequest != null && GetXMLList(name) != null) {
		   if(!index) {
		   return GetXMLList(name)[0];
		   } else {
		   return GetXMLList(name)[index];
		   }
		}
		return null;
	}	

//_________________________________________________________________________________________________________________
/*
function PostXML(xml, handler, functionToCall)
{
	//alert("PostXML: ");

	new Ajax.Request(handler,
		{
			method: 'post',
			contentType: 'text/xml',
			postBody: xml,
			onSuccess: function(transport) {
				// Load the XML returned from .NET
				var tree = LoadXML(transport.responseText);
				functionToCall(tree);
				//alert("2a-1. onSuccess: after custom function: " + functionToCall);
			},
			onFailure: function(transport) {
				// *NOTE: Add error handling here!!!!!!!!!!!!!
				//alert("2b. Failure: " + transport.responseText);
				//tree = "Error in PostXML";
			}
		})

	//alert("2z. PostXML: return tree: " + tree);
	//return tree;
}
*/

function PostXML(xml, handler, functionToCall)
{
	new Ajax(handler, {
		method: 'post',
		data: xml,
		onComplete: function(transport) {
			// I'm uncertain as to how 'transport' would work here
			var tree = LoadXML(transport);
			functionToCall(tree);
		}
	}).request();

}



//_________________________________________________________________________________________________________________
function LoadXML(xmlResponse)
{
	// Parse through the returned xml and add items to the cart.
	//alert("3. LoadXML: " + xmlResponse);

	// Load xml via IE
	if(window.ActiveXObject)
	{
		var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
		xmlDoc.async = "false";
		xmlDoc.loadXML(xmlResponse);
	}
	// Load xml via Mozilla
	else
	{
		var parser = new DOMParser();
		var xmlDoc = parser.parseFromString(xmlResponse, "text/xml");
	}

	//alert("4. LoadXML: about to return" + xmlDoc.documentElement);
	return xmlDoc.documentElement;
}

//used to account for the different ways firefox/ie handle xml
function getXmlNodeValue(xmlNode){
	var textObj = Try.theseTwo(
		function() {return xmlNode.text;},
		function() {return xmlNode.textContent;}
		);
		return textObj;
}

//this function is set by phone fields for auto-tabbing
function setWait(c,n) {
	 c.focus();			//insures focus of the current field
	 c.select();		//selects what was previously there for editing
	 
	 currValue = c.value;  //previous value, so we can check for it being changed
	 currField = c;		   //current field	
	 nextField = n;		   //field to jump to
	 
	 setTimeout("checkForNum()",100);
	 }

//auto tab when we have a value of the correct length and different from before
function checkForNum() {  
   if(currField.value.length == 3 && currField.value != currValue) {nextField.focus();}
   else{setTimeout("checkForNum()",1);}
   }



//Footer 'enter email' label hide/show
function hideEmailLabel() {
	$('footerEmailLabel').setStyle('display','none');
}
function showEmailLabel() {
	($('optIn').value.length > 0) ? hideEmailLabel() : $('footerEmailLabel').setStyle('display','');
}

function checkLabel(labelID,fieldID) {
	var footerEmailInput = $(fieldID);
	var footerEmailLabel = $(labelID);
	
	if (footerEmailInput.value.input > 0) {
		footerEmaiolLabel.setStyle('display','hide');
	}
}