jQuery(document).ready(function(){

var monogramText = jQuery('#monogram-text');
//var fontSelector = jQuery('.wpsc_select_variation.font');
var monoSelector = jQuery('.wpsc_select_variation.shape_font');
var monoPreviewContainer = jQuery('#monoPreviewContainer');



// on page load, if monogram selector already has a value, don't hide this stuff
if (monoSelector.val() != jQuery('option:first', monoSelector).val()) {
	jQuery('p#monogramOptionsIntro').hide();
} else {
	jQuery('.shapeSelection').hide();
	jQuery('.custom_text').hide();
	//jQuery('.fontSelection').hide();
}


/*
  jQuery('#variation_select_3_1').change(function() {
  	jQuery('ul#gallery li').eq(this.selectedIndex).show().siblings('li').hide();
  });  
  
  */
    jQuery('span#seeMonogramOptions').click(function() {
	  	jQuery('.shapeSelection').show();
	  	jQuery('.custom_text').show();
	  	//jQuery('.fontSelection').show();
	  	jQuery('p#monogramOptionsIntro').hide();
	});






    monoSelector.change(function() {
	  	var v = this.selectedIndex;
	  	if(v != 0) {
		  	monogramText.attr('disabled', false);
		  	monogramText.addClass('enabledMonogram');
		  	//fontSelector.attr('disabled', false);
	  		var maxl = (v == 1 || v == 2 || v == 3) ? 4 : 17;
		  	monogramText.attr('maxlength', maxl);
		  	
		  	var txt = monogramText.val().substring(0,maxl);
		  	monogramText.val(txt);		  		 
		  	
		  	// disallows monogram option to be selected without selecting a valid font
			//if (jQuery('option:first', fontSelector).val() == fontSelector.val()) {
				//alert('switching font selector to first valid option');
			//	fontSelector.val(jQuery('option:first', fontSelector).next().val());
		  	//}
		  	
		  	update_count();
		  	
		} else {
		  	monogramText.val('');
		  	monogramText.attr('disabled', true);
		  	monogramText.removeClass('enabledMonogram');
			jQuery('#monogramCharCount span#remainingLabel').html('');
			jQuery('#monogramCharCount span#remainingValue').html('');
			
			// resets font to first value
			//fontSelector.val(jQuery('option:first', fontSelector).val());
		  	//fontSelector.attr('disabled', true);
			
		}
		
		switch (v) {
			case 0: monoPreviewContainer.attr('class', 'monoVariation0'); break;
			case 1: monoPreviewContainer.attr('class', 'monoVariation1'); break;
			case 2: monoPreviewContainer.attr('class', 'monoVariation2'); break;
			case 3: monoPreviewContainer.attr('class', 'monoVariation3'); break;
			case 4: monoPreviewContainer.attr('class', 'monoVariation4'); break;
			case 5: monoPreviewContainer.attr('class', 'monoVariation5'); break;
			case 6: monoPreviewContainer.attr('class', 'monoVariation6'); break;
			default: monoPreviewContainer.attr('class', 'monoVariation4'); break;
		}
		
		
	});
	
	
	
	


/*
	fontSelector.change(function() {
	  	// disallows monogram option to be selected without selecting a valid font
		if (this.selectedIndex == 0) {
			//alert('switching font selector to first valid option');
			fontSelector.val(jQuery('option:first', fontSelector).next().val());
	  	}
	});
  */
		  	
	function update_count() {
		var monogramInput = jQuery("#monogram-text").val();
		var maxLength = jQuery("#monogram-text").attr('maxlength');
		if (maxLength < 1) {
			maxLength = 17;
		}
		var charactersRemaining = maxLength - monogramInput.length;
		
		
			jQuery('#monogramCharCount span#remainingLabel').html('remaining');
			if (monogramInput.length < maxLength) {
				jQuery('#monogramCharCount span#remainingValue').html(charactersRemaining);
			} else {
				// full
				jQuery('#monogramCharCount span#remainingValue').html('0');
			}
	
		return false;    
	  }
  
	jQuery("#monogram-text").keyup(function(e) {
		if (e.keyCode != 13 && e.keyCode != 27) {	
			update_count();
		}
	});
  
  
});