/**
 * 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();
});