$(document).ready(function() {

	/***************************************************
		initialize color objects and arrays
	***************************************************/
	var objShirtColors	= {'#ffffff':'White','#ffda4f':'Daisy','#fbc30d':'Gold','#f8c5db':'Light Pink','#ed6a2a':'Orange','#e4659d':'Azalea','#d71c2d':'Red','#c3c1be':'Sport Grey','#402b28':'Brown','#659ad1':'Carolina Blue','#3a2d76':'Purple','#0668b2':'Royal Blue','#008254':'Kelly Green','#00483a':'Forest Green','#002e4f':'Navy','#000000':'Black'};
	var objFontColors	= {'#ffffff':'White','#ffce42':'Athletic Gold','#d71c2d':'Red','#002e4f':'Navy','#000000':'Black'};
	var arrShirtHex		= new Array();
	var arrFontHex		= new Array();
	
	// create array of shirt and font hex values only, for use in initializing colorpickers
	for (key in objShirtColors)	arrShirtHex.push(key);
	for (key in objFontColors)	arrFontHex.push(key);
	
	// get name of the selected font family
	var sFontFamily = $('input[name="rdFontFamily"]:checked').val();
	
	// initialize variables for holding numeric value of shirt and font colors that are chosen by user
	var iChosenShirtColor;
	var iChosenFontColor;
	
	/***************************************************
		reset and initialize form
	***************************************************/
	// dynamically check the "font size lock" checkbox
	$('input#chkFontSizeLock').attr('checked',flFontSizeLock);
	
	// assign the default shirt size
	$('select#selSize').val(sDfltShirtSize);
	
	// assign the default message preposition
	$('select#selPrep').val(sDfltMsgPrep);
	
	// enable/disable applicable toggle input buttons for edit mode
	initializeToggles();
	
	// fade in/out the "add to cart" button
	fadeCartButton();
	
	// restrict characters in our ebtee message inputs
	$('input#txtMessageLn1').alphanumeric({allow:sAllowChars});
	$('input#txtMessageLn2').alphanumeric({allow:sAllowChars});
	
	// populate ebtee message inputs with values based on add/edit mode
	if (flAddMode) {
		$('input#txtMessageLn1').defaultvalue(sDfltMsgLn1);
		$('input#txtMessageLn2').defaultvalue(sDfltMsgLn2);
	} else {
		$('input#txtMessageLn1').val(sDfltMsgLn1);
		$('input#txtMessageLn2').val(sDfltMsgLn2);
	}
	
	/*****************************************************************************************************
		render the font examples in their respective fonts
	*****************************************************************************************************/
	Cufon.replace('label#lblFont1',	{fontFamily:$('#rdFontFamily1').val()});
	Cufon.replace('label#lblFont2',	{fontFamily:$('#rdFontFamily2').val()});
	Cufon.replace('label#lblFont3',	{fontFamily:$('#rdFontFamily3').val()});
	
	/***************************************************
		intialize colorpicker for shirt
	***************************************************/
	$('#shirt-colors').colorPicker({
		defaultColor: iDfltShirtColor,
		columns: 8,
		color: arrShirtHex,
		click:function(c){
			// change background behind shirt
			$('#shirt').css('background-color',c);
			// update "review" area
			$('#shirt-color').html(objShirtColors[c]);
			// find array key number for selected color
			iChosenShirtColor = getArrayPosition(arrShirtHex,c);}
	});
	
	/***************************************************
		intialize colorpicker for fonts
	***************************************************/
	$('#font-colors').colorPicker({			
		defaultColor: iDfltFontColor,
		color: arrFontHex,
		click:function(c){
			// change color of shirt message
			$('#ebt-msg').css('color',c);
			// update "review" area
			$('#font-color').html(objFontColors[c]);
			// dynamically change the "eb Everything's Better" tagline message with image that matches font color
			$('#ebt-tagline').css('background-image','url('+getTaglinePath(objFontColors[c])+')');
			// render the shirt message when font color is changed
			renderMessage(sFontFamily, iFontSizeLn1, iFontSizeLn2);
			// fix png shirt display for ie6
			$('#shirt').pngFix();
			// find array key number for selected color
			iChosenFontColor = getArrayPosition(arrFontHex,c);}
	});
	
	/*****************************************************************************************************
		ensure that when font family radio buttons are changed, shirt message is rendered in selected font
	*****************************************************************************************************/
	$('input[name="rdFontFamily"]').click(function() {
		sFontFamily = $(this).val();
		// update "review" area
		$('#font-family').html(sFontFamily);
		// render the shirt message when font family is changed
		renderMessage(sFontFamily, iFontSizeLn1, iFontSizeLn2);
		this.blur();
	});
	
	/*****************************************************************************************************
		dynamically populate shirt with message preposition on "change" event
	*****************************************************************************************************/
	$('select#selPrep').change(function() {
		$('#ebt-msg-prep-content').html($('select#selPrep').val());
		// render the shirt message when the preposition is changed
		renderMessage(sFontFamily, iFontSizeLn1, iFontSizeLn2);
	});
	
	/*****************************************************************************************************
		dynamically populate shirt with line 1 message on "keyup" event
	*****************************************************************************************************/
	$('#txtMessageLn1').keyup(function() {
		$('#ebt-msg-ln1-content').html($('#txtMessageLn1').val());
		
		//$('#msg-length').html($('#ebt-msg-ln1-content').width());
		//clipMessage();
		
		// render the shirt message as we type each character
		renderMessage(sFontFamily, iFontSizeLn1, iFontSizeLn2);
	});
	
	/*****************************************************************************************************
		dynamically populate shirt with line 2 message on "keyup" event
	*****************************************************************************************************/
	$('#txtMessageLn2').keyup(function() {
		$('#ebt-msg-ln2-content').html($('#txtMessageLn2').val());
		// render the shirt message as we type each character
		renderMessage(sFontFamily, iFontSizeLn1, iFontSizeLn2);
	});
	
	/*****************************************************************************************************
		ensure that when shirt size select box is changed
	*****************************************************************************************************/
	$('select#selSize').change(function() {
		$('#shirt-size').html($(this).val());
		this.blur();
	});
	
	/*****************************************************************************************************
		initialize toggle buttons for font size increase/decrease
	*****************************************************************************************************/
	$('input#btnLn1FontInc').click(function() {
		increaseFontSize(this,1);
		renderMessage(sFontFamily, iFontSizeLn1, iFontSizeLn2);
	});
	
	$('input#btnLn1FontDec').click(function() {
		decreaseFontSize(this,1);
		renderMessage(sFontFamily, iFontSizeLn1, iFontSizeLn2);
	});
	
	$('input#btnLn2FontInc').click(function() {
		increaseFontSize(this,2);
		renderMessage(sFontFamily, iFontSizeLn1, iFontSizeLn2);
	});
	
	$('input#btnLn2FontDec').click(function() {
		decreaseFontSize(this,2);
		renderMessage(sFontFamily, iFontSizeLn1, iFontSizeLn2);
	});
	
	/*****************************************************************************************************
		initialize checkbox for font size locking
	*****************************************************************************************************/
	$('input#chkFontSizeLock').click(function() {
		flFontSizeLock = ($(this).attr('checked')) ? 1 : 0;
		// if font size is locked, revert to default font size and ensure inputs are enabled
		if (flFontSizeLock) {
			iFontSizeLn1	= constDfltFontSize;
			iFontSizeLn2	= constDfltFontSize;
			$('input#btnLn1FontInc, input#btnLn1FontDec, input#btnLn2FontInc, input#btnLn2FontDec').removeAttr('disabled');
			renderMessage(sFontFamily, iFontSizeLn1, iFontSizeLn2);
		}
		this.blur();
	});
	
	/*****************************************************************************************************
		initialize "add to cart" button for squirrelcart
	*****************************************************************************************************/
	$('#cart-button a').click(function() {
		
		// ensure that the terms and conditions checkbox is checked before adding to cart
		if (!$('#chkTerms').attr('checked')) {
			alert('You must read and agree to our Terms & Conditions and Processes & Procedures before purchasing an EBtee.');
		} else {
			$('form#frmAddToCart #optSize').val($('select#selSize').val());
			$('form#frmAddToCart #optShirtColor').val($('#shirt-color').html());
			$('form#frmAddToCart #optFontColor').val($('#font-color').html());
			$('form#frmAddToCart #optFontFamily').val($('input[name="rdFontFamily"]:checked').val());
			$('form#frmAddToCart #optMsgPrep').val($('select#selPrep').val());
			$('form#frmAddToCart #optMsgLn1').val($('input#txtMessageLn1').val());
			$('form#frmAddToCart #optMsgLn2').val($('input#txtMessageLn2').val());
			$('form#frmAddToCart #optMsgSzLn1').val(iFontSizeLn1);
			$('form#frmAddToCart #optMsgSzLn2').val(iFontSizeLn2);
			
			$('form#frmAddToCart #optFontSzLock').val(flFontSizeLock);
			$('form#frmAddToCart #opt_iShirtColor').val(iChosenShirtColor);
			$('form#frmAddToCart #opt_iFontColor').val(iChosenFontColor);
			
			// ensure "zero" values cannot truly be assigned. convert to negative for compatibility
			// with squirrelcart, php, and javascript!
			if (flFontSizeLock		== 0)	$('form#frmAddToCart #optFontSzLock').val('-1');
			if (iChosenShirtColor	== 0)	$('form#frmAddToCart #opt_iShirtColor').val('-1');
			if (iChosenFontColor	== 0)	$('form#frmAddToCart #opt_iFontColor').val('-1');
			
			$('form#frmAddToCart').submit();
		} // [if]
		return false;
	});
	
	/***************************************************
		initialize checkbox for terms and conditions
	***************************************************/
	$('#chkTerms').click(function () {
		fadeCartButton();
	});
	
	/*****************************************************************************************************
		trigger events for form and shirt population on page load
	*****************************************************************************************************/
	$('input[name="rdFontFamily"]').each(function () {
		if ($(this).val().toLowerCase() == sDfltFontFamily.toLowerCase())
			$(this).trigger('click');
	});
	$('select#selSize, select#selPrep').trigger('change');
	$('input#txtMessageLn1, input#txtMessageLn2').trigger('keyup');
	
	/***************************************************
		pre-load all tagline images to cache
	***************************************************/
	for (fontName in objFontColors) jQuery('<img>').attr('src',getTaglinePath(objFontColors[fontName]));
	
	
	
	
	
	
	
	
	
	/*****************************************************************************************************
		clipMessage()
		
		trim the message when it reaches a max length. clipped message is displayed on shirt and original
		input fields.
	*****************************************************************************************************/
	/*
	function clipMessage() {
		if ($('#ebt-msg-ln1-content').width() >= 205) {
			var msgClipped = $('#txtMessageLn1').val();
			msgClipped = msgClipped.substr(0,msgClipped.length-1);
			$('#txtMessageLn1').val(msgClipped);
			$('#ebt-msg-ln1-content').html(msgClipped);
		}
	} // [function: clipMessage]
	*/
	
	/*****************************************************************************************************
		fadeCartButton()
		
		fade in/out the "add to cart" button for squirrelcart based on whether or not the terms and
		conditions checkbox is checked
	*****************************************************************************************************/
	function fadeCartButton() {
		if ($('#chkTerms').attr('checked'))
			$('#cart-button a').fadeTo('fast',1);
		else
			$('#cart-button a').fadeTo('fast',.5);
	} // [function: fadeCartButton]
	
	/*****************************************************************************************************
		renderMessage(string, string, string)
		
		render the shirt message in applicable font family and font size.
	*****************************************************************************************************/
	function renderMessage(fontFam, fontSzLn1, fontSzLn2) {
		$('#ebt-msg-ln1, #ebt-msg-ln2').removeClass();
		$('#ebt-msg-prep').addClass('sz'+iFontSizePrep);
		$('#ebt-msg-ln1').addClass('sz'+fontSzLn1);
		$('#ebt-msg-ln2').addClass('sz'+fontSzLn2);
		Cufon.replace('#ebt-msg-prep-content, #ebt-msg-ln1-content, #ebt-msg-ln2-content',{fontFamily:fontFam});
	} // [function: renderMessage]
	
	/*****************************************************************************************************
		initializeToggles()
		
		disable font size toggle buttons on page load if applicable
	*****************************************************************************************************/
	function initializeToggles() {
		// enable all font size toggle input buttons
		$('input.font-toggle').removeAttr('disabled');
		
		if (iFontSizeLn1 == constMinFontSize) $('input#btnLn1FontDec').attr('disabled','disabled');
		if (iFontSizeLn1 == constMaxFontSize) $('input#btnLn1FontInc').attr('disabled','disabled');
		if (iFontSizeLn2 == constMinFontSize) $('input#btnLn2FontDec').attr('disabled','disabled');
		if (iFontSizeLn2 == constMaxFontSize) $('input#btnLn2FontInc').attr('disabled','disabled');
	} // [function: initializeToggles]
	
	/*****************************************************************************************************
		increaseFontSize(object, integer)
		
		toggle font size increase on line 1 or line 2. will account for font size "lock" which will
		increase font size on both lines simulatneously
	*****************************************************************************************************/
	function increaseFontSize(objElem, iLine) {
		
		if (flFontSizeLock)
			$('input.font-dec').removeAttr('disabled','disabled');
		else
			$('input#btnLn'+iLine+'FontDec').removeAttr('disabled');
		
		if (flFontSizeLock) {
			iFontSizeLn1++;
			iFontSizeLn2++;
			tempSize = iFontSizeLn1;
		} else {
			if (iLine == 1) {
				iFontSizeLn1++;
				tempSize = iFontSizeLn1;
			} else {
				iFontSizeLn2++;
				tempSize = iFontSizeLn2;
			}
		}
		
		$(objElem).blur();
		if (tempSize == constMaxFontSize) {
			$(objElem).attr('disabled','disabled');
			
			if (flFontSizeLock) {
				$('input.font-inc').attr('disabled','disabled');
			}
		}
		
	} // [function increaseFontSize]
	
	/*****************************************************************************************************
		decreaseFontSize(object, integer)
		
		toggle font size decrease on line 1 or line 2. will account for font size "lock" which will
		decrease font size on both lines simulatneously
	*****************************************************************************************************/
	function decreaseFontSize(objElem, iLine) {
		
		if (flFontSizeLock)
			$('input.font-inc').removeAttr('disabled','disabled');
		else
			$('input#btnLn'+iLine+'FontInc').removeAttr('disabled');
		
		if (flFontSizeLock) {
			iFontSizeLn1--;
			iFontSizeLn2--;
			tempSize = iFontSizeLn1;
		} else {
			if (iLine == 1) {
				iFontSizeLn1--;
				tempSize = iFontSizeLn1;
			} else {
				iFontSizeLn2--;
				tempSize = iFontSizeLn2;
			}
		}
		
		$(objElem).blur();
		if (tempSize == constMinFontSize) {
			$(objElem).attr('disabled','disabled');
			
			if (flFontSizeLock) {
				$('input.font-dec').attr('disabled','disabled');
			}
		}
	} // [function decreaseFontSize]
	
	/*****************************************************************************************************
		getTaglinePath(string)
		
		return a path to an image representing the color name with spaces stripped and converted to lower
		case
	*****************************************************************************************************/
	function getTaglinePath(sColor) {
		var sSanitized = sColor.toLowerCase().replace(' ','-');
		return 'images/design-an-ebtee/taglines/eb-'+sSanitized+'.png';
	} // [function: getTaglinePath]
	
	/*****************************************************************************************************
		getArrayPosition(array, string)
		
		return position (integer value) of a given string inside an array
	*****************************************************************************************************/
	function getArrayPosition(arr, val) {
		for (var i=0;i<arr.length;i++) {
			if (arr[i] == val) return i;
		}
	} // [function: getArrayPosition]
	
}); // $(document).ready