﻿//~~~ FLOATING HELP CLASS ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

// using observable.js (!!!)

FloatingHelp.prototype = {
//=== CONSTANTS ====================================================================================================
	SHOW_HELP_EVENT : 'showHelpBubble'
	,HIDE_HELP_EVENT : 'hideHelpBubble'

//=== MEMBERS ====================================================================================================
	,DivId : ""
	,Visible : false
	,LastAnchorID : ""
	,LastHelpTextId : ""
	
//=== METHODS ====================================================================================================
	,ForceShowHide : function(visible_value){
		if(this.LastAnchorID != ""){
			this.Visible = !visible_value;
			this.ToggleHelp(this.LastAnchorID, this.LastHelpTextId);
		}
	}
	,ToggleHelp : function(ancor_id,help_text_id){
		//help_text_id is either the id of the element with help text or the help text itself!
		var div_elem = document.getElementById(this.DivId);
		if(!div_elem)
			return;
		var is_plus = !this.Visible;//(div_elem.style.visibility == "hidden");
		
		if(!is_plus){ // if div_elem is currently visible...
			if(this.LastAnchorID != ancor_id){
				// and the ancor has changed - do not toggle. SHOW at the new ancor
				is_plus = true;
			}
		}
		
		// toggle visibility of the div element
		if(is_plus){
			var ANCHOR = document.getElementById(ancor_id);
			var ancor_pos = findPos(ANCHOR);
			var ancor_size = {W:parseInt(ANCHOR.clientWidth,10), H:parseInt(ANCHOR.clientHeight,10)};
			if(ancor_pos){
				div_elem.style.position = "absolute";				
				div_elem.style.left = (ancor_pos[0]+ancor_size.W+4) + "px";
				div_elem.style.top = (ancor_pos[1]) + "px";
			}
			
			// backup everything
			this.LastAnchorID = ancor_id;
			this.LastHelpTextId = help_text_id;
		}
		div_elem.style.visibility = (is_plus) ? "visible" : "hidden";
		div_elem.style.display = (is_plus) ? "" : "none";
		this.Visible = !this.Visible; // toggle
		this.LastAnchorID = ancor_id; // backup the ancor_id
		
		// set the help text now
		if(this.Visible){
			var help_elem = document.getElementById(help_text_id);
			var v = (!help_elem) ? help_text_id : 
				((Exists(help_elem.value) && help_elem.value!="") ?
					help_elem.value : 
					help_elem.innerHTML)
			this.SetHelpText(v, (v.length>100) ? 250 : -1);
		}
		
		// notify the observers of this event
		this.Notify((is_plus) ? this.SHOW_HELP_EVENT : this.HIDE_HELP_EVENT);
	}
	,SetHelpText : function(text,width_limit)
	{
		var div_elem = document.getElementById(this.DivId);
		if(!div_elem)
			return;
		var wi = (width_limit > 0) ?
			"width=\"" + width_limit.toString() + "px\"" : 
			( (width_limit == 0) ? "width=\"95%\"" : "");
		var prefix = "<table "+wi+" border='0' cellpadding='0' cellspacing='0' class='fhb00'><tr><td class='fhb11'></td><td class='fhb12'></td><td class='fhb13'></td></tr><tr><td class='fhb21'></td><td class='fhb22' valign='top' style='clear:both;'>";
		var suffix = "</td><td class='fhb23'></td></tr><tr><td class='fhb31'></td><td class='fhb32'></td><td class='fhb33'></td></tr></table>";
		var postsuffix = "<div id='LineDiv' class='fhb__'></div>"; // this will overlay with the table to create a bubble pointer
		var close = "<img src='Images/close-preview.gif' style='background-color:#E9E9E9;border-top:solid 1px #7F7F7F;border-right:solid 1px #7F7F7F;;border-bottom:solid 1px #7F7F7F;float:right; padding:3px 3px 3px 3px; position:relative; top:-6px;right:-27px;' />";
		div_elem.innerHTML = prefix + ((width_limit > 0) ? close:"") + text + suffix + postsuffix;
	}
};
//=== CONSTRUCTOR ================================================================================================
function FloatingHelp(div_id)
{
//=== BASE CLASS =================================================================================================
inheritFrom( this, new Observable() ); // FloatingHelp inherits from Observable
	
	this.DivId = div_id;
	window.onresize = HandleResise; // Make the FloatingHelpBubble sticky.
	if (!bOK) document.captureEvents(Event.RESIZE);
}

//=== GLOBALS ====================================================================================================
var FloatingHelpBubble = new FloatingHelp("FloatingHelpBubble"); // global object

function HandleResise()
{
	// Make the FloatingHelpBubble sticky.
	if(FloatingHelpBubble.Visible){
		FloatingHelpBubble.ForceShowHide(true); // refresh bubble position
	}
}
