/*
 FORX - Form Explainer
 (c) Timothy Anido 2006/2007
 
 this version of forx searches for div tags with titles related to input field names
 and displays th contents of the div when the input field recieves focus. Forx
 can display the bubble above or below the input field, this is controlled by
 setting the valign attribute of the div.
 
 The opacity of the bubble can be changed by adding a snippet to the page
 that imports forx.js, eg.
 
 <script type='text/javascript'>
	forx_opacity = 75;
 </script>
*/

function clearForx( )
{


}

function forx()
{	
	if (!document.getElementsByTagName){ return; }
	var divs = document.getElementsByTagName('div');
	
	// loop through all div tags
	for (var i=0; i<divs.length; i++){
		var div = divs[i];		
		var trigger = String(div.getAttribute('title'));
		var objTrigger = document.getElementById(trigger);
		
		if( div.innerHTML != "" && objTrigger != null)
		{
			divHeight = div.offsetHeight;
			div.style.display = "none";
			
			var offset = getXY( objTrigger );
			
			if( String( div.getAttribute('valign') ) == "top" ) {
				var alignment = 'a';
				var alignmentOffset = 0-divHeight-objTrigger.offsetHeight+6;
			} else  {
				var alignment = 'u';
				var alignmentOffset = objTrigger.offsetHeight-6;
			}
			
			var objBubble = document.createElement("div");
			objBubble.className = 'formbubble';
			objBubble.setAttribute('id','forx'+i);
			objBubble.style.display = 'none';
			objBubble.style.opacity = '0';
			objBubble.style.top = ( offset[1] + alignmentOffset ) + 'px';
			customOffset = parseInt( div.style.marginLeft.substring(0, div.style.marginLeft.indexOf('px') ) );
			if( isNaN( customOffset ) && ! div.style.marginLeft ) customOffset = 12;
			else if( div.style.marginLeft ) customOffset = 0;
			objBubble.style.left = ( offset[0] + customOffset ) + 'px';
			
			var objBubbleTop = document.createElement("div");
			objBubbleTop.className = 'formbubble_'+alignment+'t';
			
			var objBubbleRepeat = document.createElement("div");
			objBubbleRepeat.className = 'formbubble_r';
			objBubbleRepeat.innerHTML = div.innerHTML;
			objBubbleRepeat.style.textAlign = div.style.textAlign;
			objBubbleRepeat.style.paddingLeft = div.style.paddingLeft;
			
			var objBubbleBottom = document.createElement("div");
			objBubbleBottom.className = 'formbubble_'+alignment+'b';
			
			if( window.forx_opacity ) {
				objBubble.style.filter = "Alpha(Opacity=" + window.forx_opacity + ")";
				objBubble.style.opacity = window.forx_opacity / 100;
				objBubble.style.MozOpacity = window.forx_opacity / 100;
			}
			
			objBubble.appendChild(objBubbleTop);
			objBubble.appendChild(objBubbleRepeat);
			objBubble.appendChild(objBubbleBottom);
			
			objTrigger._forx_i = i; // store the id of the current forx bubble in the trigger 
			objTrigger._tween = '';
			
			var forx_show = function( ) {
											//if( this._tween.stop ) this._tween.stop();
											$('forx'+this._forx_i).style.display = "block";
											if( $('forx'+this._forx_i).style.opacity == 0  ) this._tween = $('forx'+this._forx_i).animate( { 'property': 'opacity', 'start': 0, 'end': 1, 'fps': 50, 'duration': .35, 'unit': '' } );
											$('forx'+this._forx_i).canHide = false;
											clearInterval( this.hideTimer );
										};
			forx_hide = function( id ) {

											if( ! id ) id = this._forx_i;
											if( ! id ) this._tween.stop();

											if( $('forx'+id).canHide ) {
												if( ! id ) this._tween = $('forx'+id).animate( { 'property': 'opacity', 'start': 1, 'end': 0, 'fps': 50, 'duration': .2, 'unit': '', 'onComplete': function( ){ this.el.style.display = 'none' } } );
												else var tween = $('forx'+id).animate( { 'property': 'opacity', 'start': 1, 'end': 0, 'fps': 50, 'duration': .2, 'unit': '', 'onComplete': function( ){ this.el.style.display = 'none' } } );
											}
										};
			var forx_timed_hide = function( ) {
											$('forx'+this._forx_i).canHide = true;
											this.hideTimer = setTimeout( 'forx_hide('+this._forx_i+')', 50 )
										}
			var forx_immediate_hide = function( ) {
											$('forx'+this._forx_i).canHide = true;
											forx_hide.apply(this);
										}
			
			if( objTrigger.tagName == 'INPUT' || objTrigger.tagName == 'TEXTAREA' ) {
				objTrigger.onfocus = forx_show;
				objTrigger.onblur = forx_immediate_hide;
			} else {
				objTrigger.onfocus = forx_show;
				objTrigger.onblur = forx_timed_hide;
				objTrigger.onmouseover = forx_show;
				objTrigger.onmouseout = forx_timed_hide;
				if( alignment=='a' ) objBubble.style.top = offset[1] + alignmentOffset - 5 + 'px';
				else objBubble.style.top = offset[1] + alignmentOffset + 5 + 'px';
			}

			document.getElementsByTagName('body').item(0).appendChild(objBubble); // append the bubble to the end of the body
		}
	}
}

function getXY(obj) {
	objX = obj.offsetLeft;            // Get left position from the parent object
	objY = obj.offsetTop;            // Get top position from the parent object
	while(obj.offsetParent!=null) {   // Parse the parent hierarchy up to the document element
		objParent = obj.offsetParent;    // Get parent object reference
		objX += objParent.offsetLeft; // Add parent left position
		objY += objParent.offsetTop; // Add parent top position
		obj = objParent;
	}
	return Array(objX,objY);
}

// useful snippet to execute a function after the DOM has loaded
// from prototype.js
if (window.addEventListener) {
  window.addEventListener('load', forx, false);
} else if (window.attachEvent) {
  window.attachEvent('onload', forx);
}