/**
 * @author Mircea Gabor
 * @copyright JumpEYE Creative Media
 * @version 1.0
 */

function QuickHelper() {

	var is_create = false;

	// position & dimension
	var x;
	var y;
	var width  = 150;
	var height;
	var docwidth;
	var docheight;
	
	// border & backgound
	var backgoundClass		= false;
	var border 				= true;
	var borderSize			= 2;
	var borderColor 		= '#999999';
	var backgroundColor 	= '#EFEFEF';
	var backgroundOpacity 	= 0.8; // 80%
	
	// text
	var textClass	= false;
	var textColor	= '#313131';
	var textFont	= 'Tahoma';
	var textSize	= 10;
	var textAlign	= 'left';
	
	// temp vars
	var mouseX;
	var mouseY;
	
	// others
	var id = 'QuickHelpBg'
	var idTx = 'QuickHelpTx'
	var cursor = 'help';
	var lastMsg;
	
	// Detect if the browser is IE or not.
	var IE = document.all?true:false
	
	// Set-up to use positionDiv function onMouseMove
	document.onmousemove = positionDiv;
	 
	// define 
	this.setWidth = setWidth;
	this.setHeight = setHeight;
	this.setBackgroundClass = setBackgroundClass;
	this.setBorderWidth = setBorderWidth;
	this.setBorderMode = setBorderMode;
	this.setBorderColor = setBorderColor;
	this.setBackgroundColor = setBackgroundColor;
	this.setBackgroundOpacity = setBackgroundOpacity;
	this.setTextClass = setTextClass;
	this.setTextColor = setTextColor;
	this.setTextFont = setTextFont;
	this.setTextSize = setTextSize;
	this.setTextAlign = setTextAlign;
	this.setCursor = setCursor;
	
	this.create = create;
	this.positionDiv = positionDiv;
	this.showBox = showBox;
	this.hideBox = hideBox;


	/**
	 * This function sets up box width 
	 * @param {Number} val
	 */
	function setWidth( val ) {
		width = parseInt(val);
	}
	
	/**
	 * This function sets up box height 
	 * @param {Number} val
	 */
	function setHeight( val ) {
		height = parseInt(val);
	}
	
	/**
	 * This function sets up background class 
	 * @param {String} val
	 */
	function setBackgroundClass( val ) {
		backgoundClass = val;
	}
	
	/**
	 * This function sets up border to on / off 
	 * @param {Boolean} val
	 */
	function setBorderMode( mode ) {
		if( mode == false || mode == 0 || mode == 'n' || mode == 'N' ){
			border = false;
		} else if( mode == true || mode == 1 || mode == 'y' || mode == 'Y' ){
			border = true;
		}
	}
	
	/**
	 * This function sets up border width 
	 * @param {Numeric} val
	 */
	function setBorderWidth( val ) {
		borderSize = parseInt(val);
	}
	
	/**
	 * This function sets up border color 
	 * @param {Hexa} val
	 */
	function setBorderColor( val ) {
		borderColor = val;
	}
	
	/**
	 * This function sets  up background color 
	 * @param {Hexa} val
	 */
	function setBackgroundColor( val ) {
		backgroundColor = val;
	}
	
	/**
	 * This function sets up background opacity 
	 * @param {Number} val
	 */
	function setBackgroundOpacity( val ) {
		if(  val >= 0 && val <= 1 ) {
			backgroundOpacity = parseFloat(val).toFixed(2);
		} else if (  val > 1 && val <= 100 ) {
			backgroundOpacity = (parseInt(val)/100).toFixed(2);
		}
	}
	
	/**
	 * This function sets up text class 
	 * @param {String} val
	 */
	function setTextClass( val ) {
		textClass = val;
	}
	
	/**
	 * This function sets up text color 
	 * @param {Hexa} val
	 */
	function setTextColor( val ) {
		textColor = val;
	}
	
	/**
	 * This function sets up text font 
	 * @param {String} val
	 */
	function setTextFont( val ) {
		textFont = val;
	}
	
	/**
	 * This function sets up text size 
	 * @param {Number} val
	 */
	function setTextSize( val ) {
		textSize = parseInt(val);
	}
	
	/**
	 * This function sets up text align 
	 * @param {String} val
	 */
	function setTextAlign( val ) {
		textAlign = val;
	}
	
	/**
	 * This function sets up cursor 
	 * @param {String} val
	 */
	function setCursor( val ) {
		cursor = val;
	}
	
	/**
	 * This function gets window dimensions
	 */
	function getWindowSize() {
		if( typeof( window.innerWidth ) == 'number' ) {
			//Non-IE
			docwidth = window.innerWidth;
			docheight = window.innerHeight;
		} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
			//IE 6+ in 'standards compliant mode'
			docwidth = document.documentElement.clientWidth;
			docheight = document.documentElement.clientHeight;
		} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
			//IE 4 compatible
			docwidth = document.body.clientWidth;
			docheight = document.body.clientHeight;
		}
	}
	
	/**
	 * This function sets coment position by cursor
	 * @param {Object} ev
	 */
	function positionDiv(ev){
		//alert(ev);
		var elem = document.getElementById(id);
		var elemTx = document.getElementById(idTx);
		if(!elem || !elemTx)	return;

		if(!ev) ev = window.event;
		if(ev.pageX || ev.pageY){
			x = ev.pageX;
			y = ev.pageY;
		} else if(ev.clientX || ev.clientY){
			if(document.documentElement.scrollTop){
				x = ev.clientX + document.documentElement.scrollLeft;
				y = ev.clientY + document.documentElement.scrollTop;
			}else{
				x = ev.clientX + document.body.scrollLeft;
				y = ev.clientY + document.body.scrollTop;
			}
		}
		getWindowSize();
		x = x + 16;
		y = y + 20;
		
		if (document.documentElement && document.documentElement.scrollTop){
		yTo = document.documentElement.scrollTop;
		}
		else if (document.body)
		yTo = document.body.scrollTop;
		else
		yTo = document.documentElement.scrollTop;
		
		if( x + elem.scrollWidth + borderSize + 15 >= docwidth )
		x = docwidth - elem.scrollWidth - borderSize - 15;
		if( y + elemTx.scrollHeight + borderSize + 15 >= docheight )
		y = docheight - elemTx.scrollHeight  - borderSize - 15 + yTo;
		//alert(x+' '+y)
		elemTx.style.left	= elem.style.left	= x + 'px';
		elemTx.style.top	= elem.style.top	= y + 'px';
	}
	
	/**
	 * This function creates help boxes
	 */
	function create() {
		var newdivBg = document.createElement('div');
		newdivBg.style.display = 'none';
		newdivBg.setAttribute('id', id);
		newdivBg.style.position = "absolute";
		
		if( backgoundClass ) {
			newdivBg.className = backgoundClass;
		} else {
			newdivBg.style.backgroundColor = backgroundColor;
			newdivBg.style.border = borderSize + "px solid " + borderColor;
			newdivBg.style.filter = "Alpha(opacity="+ (backgroundOpacity * 100) +")";
			newdivBg.style.opacity = backgroundOpacity;
		}
		//newdivBg.style.display = 'none';
		
		var newdiv = document.createElement('div');
		newdiv.style.display = 'none';		 
		newdiv.setAttribute('id', idTx);
		newdiv.style.position = "absolute";
		
		if( textClass ) {
			newdiv.className = textClass;
		} else {
			if(width) {
				newdiv.style.width = width+"px";
			}
			if(height) {
				newdiv.style.height = height+"px";
			}
			newdiv.style.margin = (borderSize+5) + "px";
			newdiv.style.fontFamily = textFont;
			newdiv.style.fontSize = textSize + "px";
			newdiv.style.color = textColor;
			newdiv.style.textAlign = textAlign;
		}
		newdiv.innerHTML = "";
		//newdiv.style.display = 'none';
		
		document.body.appendChild(newdivBg);
		document.body.appendChild(newdiv);
		is_create = true;
		/*
		if (backgoundClass){ // work on nonIE browsers
			borderSize = parseInt(document.styleSheets[0].cssRules[0].style.borderWidth);
			//alert(borderSize);
		}
		*/
		//showBox('');
	}
	
	/**
	 * This function display help box
	 * @param {String} msg
	 */
	function showBox(msg, ev) {
		//if( !msg ) msg = lastMsg;
		//else lastMsg = msg;
		
		if(!is_create) {
			is_create = true;
			create();
			showBox(msg, ev);
		} else {
		
		var elem = document.getElementById(id);
		var elemTx = document.getElementById(idTx);
		
		if(!elem || !elemTx){
			return;
		}	
		
		elemTx.innerHTML = msg;
		
		document.body.style.cursor = cursor;
		
		elem.style.display = 'block';
		elemTx.style.display = 'block';
		
		elem.style.height = (elemTx.scrollHeight+10) + "px";
		elem.style.width = (elemTx.scrollWidth+10) + "px";
		positionDiv(ev);
		}
	}
	
	/**
	 * This function hide help box
	 * @param {String} msg
	 */
	function hideBox() {
		var elem = document.getElementById(id);
		var elemTx = document.getElementById(idTx);
		if(!elem || !elemTx)	return;
		
		elem.style.display = 'none';
		elemTx.style.display = 'none';
		document.body.style.cursor = 'auto';
	}
}

/**
 * QuickHelper Javascript Class
 * 
 * 		- How to use -
 * 
 * 1.
 * You must include this file in you page.
 * 
 * 2.
 * In <body> you must "declare", "config" and "create"
 * Always use this form:
 * 		
 * 		> helpBox = new QuickHelper();  // declare
 * 		>
 * 		>	...							// config
 * 		>
 * 		> helpBox.create(); 			// create
 * 
 * There are two posibilities to config this class:
 * 		a) Using classes
 * 		b) Directly styling elements
 * 		
 * 		a) You must have 2 classes in your css file:
 * 			one for background and one for text;
 * 			(this is because we use diferite elements)
 * 			ex:
 * 				helpBox.setBackgroundClass('classBg');
 * 				helpBox.setTextClass('classText');
 * 			warnning:
 * 				border-width	==	margin
 * 				(from 'classBg')	(from 'classText')
 * 
 * 		b) ex:
 * 			helpBox.setWidth(100);
 * 			helpBox.setHeight(100); // not recomended
 * 			helpBox.setBorderMode(true); // default is true
 * 			helpBox.setBorderColor('#2A2A2A');
 * 			helpBox.setBackgroundColor('#3A3A3A');
 * 			helpBox.setBackgroundOpacity('0.8');
 * 			helpBox.setTextColor('#121212');
 * 			helpBox.setTextFont('Tahoma');
 * 			helpBox.setTextSize(10);
 * 			helpBox.setTextAlign('left');
 * 			
 * 3.
 * In help element tag you must specify:
 * 	- onMouseOver="helpBox.showBox('Help message!')"
 *  - onMouseOut="helpBox.hideBox()"
 *  
 *  That's all.
 *  Copyright 2007 JumpEYE Creative Media 
 */