/*
	Copyright (c) 2006-2010, ePages GmbH
	All Rights Reserved.
*/
dojo.provide('epages.widget.FormElementHint');
dojo.require("epages.widget");
dojo.require("epages.html.element");
dojo.declare("epages.widget.FormElementHint", [dijit._Widget], {

		/**
		 * public properties
		 */
		description             : "",	// String - the description text used as innerHTML for the hint

		/**
		 * private properties
		 */
		_formDescriptionLayer   : null, // DomNode - stores the layer dom element for the hint shape

		/**
		 * dojo lifecycle methods
		 */
		postCreate: function() {
			// summary: widget lifecycle postCreate handler
			// description:
			//		Determines the position of the widget's dom element and creates a hint layer element
			//		containing the description text. Event handlers for showing and hiding the hint
			//		are connected as well.
			var elementPosition = new epages.html.Element(this.domNode).getAbsolutePosition(dojo.body());
			this._formDescriptionLayer = document.createElement("div");
			var layerShadow = document.createElement("div");
			layerShadow.className = "TooltipShadow";

			with(this._formDescriptionLayer) {
				innerHTML = this.description;
				className = "Tooltip HideElement Wide";
				onselectstart = function() {
					return false;
				};
				style.MozUserSelect = "none";
				style.WebkitUserSelect = "ignore";
				style.left = (elementPosition.x + this.domNode.offsetWidth + 2) + "px";
				style.top = elementPosition.y + "px";
				appendChild(layerShadow);
			}
			dojo.style(this._formDescriptionLayer, "opacity", 0);

			dojo.body().appendChild(this._formDescriptionLayer);

			this.connect(this.domNode, "onfocus", "_showDescription");
			this.connect(this.domNode, "onblur",  "_hideDescription");

		},

		/**
		 * private methods
		 */
		_showDescription: function() {
			// summary: Show hint with the description text
			// description:
			//		Fade-turn the description layer visible
			var layer = this._formDescriptionLayer;
			layer.className = layer.className.replace(/HideElement/, "");
			if(layer.offsetWidth > 300) {
				layer.style.width = "300px";
			}
			dojo.fadeIn({node: layer, duration:200}).play();
		},

		_hideDescription: function() {
			// summary: Hide hint with the description text
			// description:
			//		Fade-turn the description layer invisible
			var layer = this._formDescriptionLayer;
			dojo.fadeOut({
				node: layer,
				duration:200
			}).play();
			setTimeout(function() {
				layer.className += " HideElement";
			}, 200);
		}
	}
);