function resizeTabset() {
	if ($('tabsetMonogram')) {
		
		var tabset = $('tabsetMonogram');
		var activeTab = $$('#tabsetMonogram dd.active')[0];
		
		var xtraHeight = ($('initialStep').hasClassName('single')) ? 0 : 70;
		tabset.style.height = parseInt(activeTab.getHeight() + xtraHeight) + 'px';
				
		if ($('widgetTitle').hasClassName('active')) {
			$('widgetContent').style.height = 'auto';
			$('widgetContent').style.height = $('widgetContent').scrollHeight;
		} 
	}
}

function showTab(tabs) {
	if ($('tabsetMonogram')) {
		
		if (tabs == 'both') {
			$('initialStep').className = '';
			$('tabsetMonogram').select('dt', 'dd').each(function(e) {
				e.removeClassName('disabled');
			});
			
			// make initials the default tab
			$('tab1').className = 'active';
			$('tab2').className = '';
			$('initialsContent').className = 'active';
			$('nameContent').className = 'inactive';
			
			resizeTabset();
			
			// IE issue makes this necessary
			$('tab1').style.visibility = 'visible';
			$('tab2').style.visibility = 'visible';

		} else {
			$('initialStep').className = 'single';
			
			if (tabs == 'initials') {
				$('initialsContent').className = 'active';
				$('nameContent').className = 'inactive';
			} else if (tabs == 'name') {
				$('nameContent').className = 'active';
				$('initialsContent').className = 'inactive';
			}

			// hide both tabs
			$('tab1').className = 'disabled';
			$('tab2').className = 'disabled';

			resizeTabset();
			
			// IE issue makes this necessary
			$('tab1').style.visibility = 'hidden';
			$('tab2').style.visibility = 'hidden';
		}
	}
}

function resetMonogramStyle() {
	$('char_count').innerHTML = '0';
	$('char_count').setStyle({display:'none'});
	$('monogramName').value = 'Your Name';
	$('monogramName').className = '';
}

function getCaretPos(ctrl) {
	var CaretPos = 0;	// IE Support
	if (document.selection) {
	ctrl.focus();
		var Sel = document.selection.createRange ();
		Sel.moveStart('character', -ctrl.value.length);
		CaretPos = Sel.text.length;
	}
	// Firefox support
	else if (ctrl.selectionStart || ctrl.selectionStart == '0') {
		CaretPos = ctrl.selectionStart;
	}
	return (CaretPos);
}


function checkName(e) {

	var keyPressed = e.keyCode ? e.keyCode : e.charCode
	var actualKeyPressed = String.fromCharCode(keyPressed);
	var override, spaceFirst;
	
	var allow = new Array(
		65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, // A - Z
		97, 98, 99, 100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, // a - z
		48, 49, 50, 51, 52, 53, 54, 55, 56, 57, // 0 - 9
		16, 32, 35, 36, 37, 39, 8, 46 // shift, space, home, end, left, right, del, bkspace
	);
	var disallow = new Array('!', '@', '#', '$', '%', '^', '&', '*', '(', ')', '.'); 
	var haveCharCode = new Array(35, 36, 37, 39, 46); // left, right, home, end, period (ie doesn't recognize charCodes)

	if (haveCharCode.include(e.keyCode)) {
		override = (e.charCode == 0) ? true : false;
	}

	// don't allow a space as the first entered char
	spaceFirst = (keyPressed == 32 && getCaretPos($('monogramName')) == 0) ? true : false;
	
	// if in set of allowed chars and not in the disallowed list
	return (allow.include(keyPressed) && !disallow.include(actualKeyPressed) && spaceFirst == false || override == true) ? true : false;
}

function updateCounter() {

	var name = $('monogramName');
	var numChars = $('char_count');
	
	if (name.value.length > 10) {
		name.value = name.value.substring(0, 10);
	} else {
		numChars.innerHTML = 10 - name.value.length;
	}
	
	// display counter if text is entered
	numChars.style.display = (name.value.length > 0) ? 'block' : 'none';
}

Event.observe(window, 'load', function(e) {

	// tabset scripting
	if ($('tabsetMonogram')) {
		
		var tabset = $('tabsetMonogram');
		var tabsetDts = $$('#tabsetMonogram dt');
		var xtraHeight = ($('initialStep').hasClassName('single')) ? 0 : 70;
		
		if ($$('#tabsetMonogram dd.active')[0]) {
			var activeTab = $$('#tabsetMonogram dd.active')[0];
			tabset.style.height = parseInt(activeTab.getHeight() + xtraHeight) + 'px';
		} else { 
			tabset.style.height = parseInt(tabsetDts[0].next('dd').getHeight() + 70) + 'px';
		}
		
		// dynamically resize content area
		tabsetDts.each(function(e) {
			
			e.observe('click', function(t) {

				var tab = Event.element(t);
				
				if (tab.id == 'tab1') {
					var content = $('initialsContent');
					content.className = 'active';
					$('nameContent').className = 'inactive';
					$('tab1').className = 'active';
					$('tab2').className = '';
				} else {
					var content = $('nameContent');
					content.className = 'active';
					$('initialsContent').className = 'inactive';
					$('tab1').className = '';
					$('tab2').className = 'active';
				}

				//var content = tab.next('dd');
				$('tabsetMonogram').style.height = parseInt(content.getHeight() + 70) + 'px';
				
				$('widgetContent').style.height = 'auto';
				$('widgetContent').style.height = $('widgetContent').scrollHeight;
				
			});
		});
		
	}
	
	// monogram accordion functionality
	// http://media.domfather.com/API-1-3/demos/Accordion.html
	var para = {
		animate: {
			height: function(obj) {
				return obj.getElement().scrollHeight;
			}
		},
		forceClose: true
	};
	
	// disable clicking on the poloHome pages
	if ($('monogramWidget').hasClassName('homeCYO')) {
		para.eventType = 'none';
	}
	
	var widget = new Df.Accordion($('monogramWidget')).set(para);
	
	// show/hide widget based on monogram checkboxes
	var allCheckBoxes = $$('input.monogramCheckbox');
	for (i = 0, iLength = allCheckBoxes.length; i < iLength; i++) {
		var box = allCheckBoxes[i];
		box.observe('click', function(e) {
			
			checked = numChecked();
			if (checked == 0) {
				this.hideItem(0);
				// also need to reset form to defaults here...
			} else if (checked == 1 && $('widgetTitle').className != 'active') {
				$('monogramWidget').scrollTo();
				this.showOnlyItem(0);
			}
		}.bind(widget));
	}
	
	function numChecked() {
		
		var numChecked = 0;
		allCheckBoxes.each(function(e) {
			if (e.checked) numChecked++;
		}); 
		return numChecked;
	};
		
	// handle name countdown functionality
	$('monogramName')
		.observe('focus', function(e) {
			var e = Event.element(e);
			if (e.value == 'Your Name') e.value = '';
			e.className = 'focus';
		})
		.observe('blur', function(e) {
			var e = Event.element(e);
			if (e.value == '') {
				e.value = 'Your Name';
				e.className = '';
				$('char_count').innerHTML = '10';
			}
		})
		//.observe('paste', function() { return false });
		.observe('keyup', updateCounter);
		//.observe('keydown', checkName);
		//.observe('input', checkName)
});