// when the DOM is ready...
	$(document).ready(function () {			
		// reset flag
		var reset_required=false;				
		// characters
		var chars=[];
		// scroll
		$.localScroll({			
			onAfter:function( anchor ){
				if(anchor.id=="step2"){				
					$("input#theMessageBox").focus();					
					$('#theMessageBox').val(chars.join(''));
					message_remaining();
				}
			}
		});
		// set empty cells
		chocobars=function(number){			
			var len = $(".drop-zone-selected").children().length;

			if(number>len){				
				while(len<number){
					$('.drop-zone-selected').append('<li class=""></li>');
					len++;
				}
			}else if(number<len){				
				while(len>number){					
					$(".drop-zone-selected li:nth-child("+len+")").remove();					
					// characters too
					if(chars.length>0){
						if(chars[len-1]!=undefined){
							delete chars[len-1];	
							chars.length--;
						}
					}
					len--;
				}     				
			}				
		}
		// width of chocobar respect to order
		get_barwidth=function(price_code){
			if(price_code%7==0){
				return "400px";
			}else if(price_code%24==0){
				return "325px";
			}else if(price_code%12==0){
				return "630px";
			}else if(price_code%10==0){
				return "525px";
			}else{
				return "325px";
			}
		}
		// Handle the price change
		$("input[@name='product']").change(function() {
			if(this.checked){
				var price_code = $("input[@name='product']:checked").attr("alt");
				var the_value = $("input[@name='product']:checked").attr("rel");
				$("input#theMessageBox").attr({
					maxlength: price_code
					// Change the name of #theMessageBox here
					// name: 'options['+the_value+']';
				});
				$("input#theMessageBox").attr({
					name: 'options['+the_value+']'
				});

				$("#charlimitinfo span").text('You have '+price_code+' letters. ');
				chocobars(price_code);	
				$("#preview-box").css("width",get_barwidth(price_code));	
			}
			}).change();		
			// focus on input text
			$('#theMessageBox').one("focus", function() {			
				$("#preview-box").show();
			});	
			// keypress on input text		
			$('#theMessageBox').keypress(function(evt) {						
				reset_required=true;								
			});	
			// keyup trigger		
			$('#theMessageBox').keyup(function(evt) {
				val=$(this).val();	
				if(reset_required){				
					reset_chocobars();
					reset_required=false;
				}	
				// show remaining
				message_remaining();								
			});
			// keydown
			$('#theMessageBox').keydown(function(evt) {
				keycode = get_keycode(evt);	  
				// backspace for IE/GChrome/Safari & delete key
				if(keycode==8 || keycode==46){				
					reset_required=true;																
				}						
			});		
			// ontype reset bars
			reset_chocobars=function(){
				val=$('#theMessageBox').val();

				// remove chars array
				delete chars;
				chars=[];

				// clear bars
				i=0;			
				while(i<$("input#theMessageBox").attr("maxlength")){				
					i++;
					$(".drop-zone-selected li:nth-child("+i+")").replaceWith('<li class=""></li>');
				}	

				// compose again
				i=0;
				while(i<val.length){				
					char=val.substr(i,1);				
					key=get_key(char);
					chars.push(char);			
					i++;	
					$(".drop-zone-selected li:nth-child("+i+")").replaceWith("<li class='"+key.toLowerCase()+" drag-unit-selected'>" + char.toLowerCase()+"</li>"); 													
				}					
			}		
			// bind click event on pictograms
			$(".drop-zone-unselected > li ").bind("click",function(event){		
				if(chars.length<$("input#theMessageBox").attr("maxlength")){	
					$(".drop-zone-selected li:nth-child("+(chars.length+1)+")").replaceWith($(this).clone());				
					chars.push(get_key($(this).get(0).innerHTML,true));			
					$('#theMessageBox').val(chars.join(''));
					message_remaining();
				}
				if($.browser.msie || $.browser.opera){
					ie_focus($('#theMessageBox').get(0));
				}else{
					$('#theMessageBox').focus();
				}
			});
			// css key fetch
			// "redheart":"{",	
			get_key=function(val,rv){	
				var rv  = rv || false;
				var val = $.trim(val);		
				var key = "";
				var typed_chars = { "a":"a", "b":"b", "c":"c", "d":"d", "e":"e", "f":"f", "g":"g", "h":"h", "i":"i", "j":"j", "k":"k", "l":"l", "m":"m", "n":"n", "o":"o", "p":"p", "q":"q", "r":"r", "s":"s", "t":"t", "u":"u", "v":"v", "w":"w", "x":"x", "y":"y", "z":"z", "zero":"0","one":"1","two":"2","three":"3","four":"4","five":"5","six":"6", "seven":"7","eight":"8","nine":"9","apostrophe":"'","fullstop":".","equals":"=", "plus":"+","question":"?","exclaimation":"!","at":"@", "comma":",","and":"&","minus":"-","lt":"<","gt":">","happy":")","unhappy":"(", "heart":"^","clover":"~","tree":"|","darkspace":"_","star":"*","white-heart":"}","darkheart":";","whitespace":" ","lightpinkheart":"`","lightblueheart":"/","redheart":"{","rudolph":"›"};	
				jQuery.each(typed_chars, function(k,v){	
					if(rv){				
						if(k==val.toLowerCase()){
							key= v;
						}
					}else{
						if(v==val.toLowerCase()){
							key= k;
						}
					}
				});					
				// send back
				return key;		
			}
			// event keycode 
			get_keycode=function(evt){
				if($.browser.mozilla){
					code = evt.which;
				}else{
					code = evt.keyCode;
				}
				return code;
			}
			// message counter
			message_remaining=function(){				
				remaining=$("input#theMessageBox").attr("maxlength")-$("input#theMessageBox").attr("value").length;					
				$("#message-error").text(remaining+" chocolates remaining");
			}	
			// ie focus handler		
			ie_focus=function(TB){			
				if (TB.createTextRange){				
					var FieldRange = TB.createTextRange();
					FieldRange.moveStart('character', TB.value.length);
					FieldRange.collapse();
					FieldRange.select();			
				}
			}		
			$('a[rel*=facebox]').facebox();
		});