/**
 * A small util to use labels floating over their input fields.
 * This file replaces the unsettling behavior of writing the label's text
 * directly into the input fields. Instead the labels are placed and hidden
 * over their respective input field.
 * 
 * For showing the label's hover effects you can style the div.label.hovered 
 * CSS class.
 */
var Overlabels = {
	namespace: "Overlabels",
	targets: [".overlabel .value input[type='text']", 
	          ".overlabel .value input[type='password']",
	          ".overlabel .value textarea",
	          ".overlabel .value select"],
	parentClass: ".overlabel",
	labelClass: ".label",
	change: function(e) {
		e.stopPropagation();
		// on blur, re-show it, if the field still has no value
		if (this.value.replace(/^\s*|\s*$/gi, "").length <= 0)
			e.data.label.css({display:"block",opacity:1});
		else if (this.nodeName.toUpperCase() == "SELECT")
			e.data.label.css({display:"none"});
		e.data.parent.removeClass("focus");
	},
	focus: function(e) {
		e.stopPropagation();
		e.data.parent.addClass("focus");
		// on focus, hide/minimize the label too
		if (this.value.replace(/^\s*|\s*$/gi, "").length <= 0)
			e.data.label.css({opacity:0.75});
	},
	keyUp: function(e) {
		e.stopPropagation();
		if (this.value.replace(/^\s*|\s*$/gi, "").length > 0)
			e.data.label.css({display:"none"});
		else e.data.label.css({display:"block"});	
	},
	mouseEnter: function(e) {
		e.stopPropagation();
		e.data.parent.addClass("hover");
	},
	mouseLeave:function(e) {
		e.stopPropagation();
		e.data.parent.removeClass("hover");
	},
	init: function() {
	
		// find all form_fields that are text fields and have a label
		$(Overlabels.targets.join(", ")).each(function(index, element){
			var e_data = {
					parent: $(element).parents(Overlabels.parentClass+":first"), 
					label: null
			};
			e_data.label = e_data.parent.find(Overlabels.labelClass+":first");
			
			// if the field has a value
			if ($(element).val() && $(element).val().replace(/^\s*|\s*$/gi, "").length > 0) {
				e_data.label.css({display:"none"});
			} else {
				e_data.label.show();
			}
			
			// Don't re-apply all the events... 
			if (e_data.parent.hasClass(".applied")) {
				return true;
			}
			
			$(element)
				.bind("focus." + Overlabels.namespace, e_data, Overlabels.focus)
				.bind("change." + Overlabels.namespace, e_data, Overlabels.change)
				.bind("blur." + Overlabels.namespace, e_data, Overlabels.change)
				.bind("keyup." + Overlabels.namespace, e_data, Overlabels.keyUp)
				.bind("mouseenter." + Overlabels.namespace, e_data, Overlabels.mouseEnter)
				.bind("mouseleave." + Overlabels.namespace, e_data, Overlabels.mouseLeave)
				.attr("autocomplete","off");	

			// for the label of the current input field, when mouseover label hides to enable form clicks
			e_data.label
				.bind("mouseenter." + Overlabels.namespace, e_data, Overlabels.mouseEnter)
				.bind("mouseleave." + Overlabels.namespace, e_data, Overlabels.mouseLeave)
				.bind("contextmenu." + Overlabels.namespace, function(e){ //Prevent right-click on label
					e.preventDefault();
					$(element).focus();
					$(this).css({display:"none"});
				})
				.bind("dblclick." + Overlabels.namespace, function(e){jQuery(this).trigger("click");});
				
			e_data.parent.addClass("applied");
		});
	}
};

$(window).load(function() {
	Overlabels.init();	
});