var tbox;
if (!tbox){tbox = {};}
if (!tbox.UI){alert("ToolTip: The TUI Base has not been loaded");}

tbox.UI.ToolTip = function(element,attributes){
	this.init(element, attributes);
	
}

tbox.UI.ToolTip.prototype.init = function(element, attributes)
{
	//@TODO should we have a container element?
	this.element = tbox.UI.getElement(element);
	var self = this;
	
	this.message = document.createElement("div");
	document.body.appendChild(this.message);
	this.point = document.createElement("div");
	document.body.insertBefore(this.point,this.message);
	
	var showEvent = attributes["showEvent"];
	if (!showEvent){showEvent = "mouseover";}
	var hideEvent = attributes["hideEvent"];
	if (!hideEvent){hideEvent = "mouseout";}
	var contentDivId = attributes["content"];
	var sharedContentId = attributes["sharedContent"];
	var messageClass = attributes["class"];
	var pointColor = (attributes["pointColor"])?attributes["pointColor"]:"#FFFFFF";
	if(!messageClass){ messageClass = "tooltip"; }
	this.message.style.position = "absolute";
	this.message.className = messageClass;
	
	//popup message can be either an element, shared element, alt attribute, or passed in text
	if (contentDivId){
		this.message.appendChild(tbox.UI.getElement(contentDivId)); 
	} else if (sharedContentId){
		var tmpEl = tbox.UI.getElement(sharedContentId);
		this.message.innerHTML = tmpEl.innerHTML;
	} else if (this.element.alt){
		this.message.innerHTML = this.element.alt;
	}else {
		var messageText = attributes["text"];
		this.message.innerHTML = messageText;
	}
	//@TODO parse out border color in the document.styleSheets[0].cssRules[0] if possible
	this.point.style.borderRight = "10px solid " + pointColor;
	this.point.style.borderLeft = "10px solid " + pointColor;
	this.point.style.borderTop = "7px solid transparent";
	this.point.style.borderBottom = "7px solid transparent";
	this.point.style.width = "0px";
	this.point.style.height = "0px";
	this.point.style.lineHeight = "0px";
	this.point.style.position = "absolute";
	this.point.style.zIndex = "100";
	if (window.ActiveXObject){
		this.point.style.borderTopColor = "#F02BF0";
		this.point.style.borderBottomColor = "#F02BF0";
		this.point.style.filter = "chroma(color=#F02BF0)";
	}
	
//---------	Setting Position ------------//

	//element coordinates
	//@FIXME: doesn't work if the item isn't absolutely positioned
	var arrPos = tbox.UI.getPosition(this.element);
	var elYCor = arrPos[1];
	var elXCor = arrPos[0];
	var elWidth = this.element.offsetWidth;
	var elRightXCor = elXCor+elWidth;
	var elHeight = this.element.offsetHeight;
	var elMiddleYCor = (elHeight/2)+elYCor;
	
	//Point Measurements
	pointWidth = this.point.offsetWidth/2;
	pointHeight = this.point.offsetHeight;
	//position x
	messageXCor = elRightXCor + pointWidth;
	windowWidth = (!window.innerWidth)?document.body.clientWidth:window.innerWidth;
	messageRightXCor = messageXCor+(this.message.offsetWidth);
	if (messageRightXCor > windowWidth-2){
		messageWidth = this.message.offsetWidth;
		this.message.style.left = (elXCor-messageWidth - pointWidth) + "px";
		this.point.style.borderRight = '0px';
		this.point.style.left = (elXCor - pointWidth) + "px";
		} else{
		this.message.style.left = messageXCor + "px";
		this.point.style.borderLeft = '0px';
		this.point.style.left = elRightXCor + "px";
	}
	this.point.style.top = (elMiddleYCor-(pointHeight/2)) + "px";
	
	//position y
	var messageYCor = elMiddleYCor-(this.message.offsetHeight/2);
	if (messageYCor+(this.message.offsetHeight) > window.height-5){ messageYCor = window.height-5-this.message.offsetHeight; }
	if (messageYCor < 1){ messageYCor = 0; }
	var windowHeight = (!window.innerHeight)?document.body.clientHeight:window.innerHeight;
	var messageBottomYCor = elMiddleYCor+(this.message.offsetHeight/2);
	//if (messageBottomYCor > windowHeight-3){ messageYCor = messageYCor-(messageBottomYCor-windowHeight+3); }
	this.message.style.top = messageYCor + "px";
	
//---------	End Setting Position ------------//
	this.hideTooltip();
	
	if (showEvent == hideEvent){
		tbox.UI.addEventListener(element, showEvent, function(e) { return self.showHideTooltip(); }, false);
	} else{
		tbox.UI.addEventListener(element, showEvent, function(e) { return self.showTooltip(); }, false);
		tbox.UI.addEventListener(element, hideEvent, function(e) { return self.hideTooltip(); }, false);
	}
}

tbox.UI.ToolTip.prototype.showTooltip = function ()
{
	this.message.style.display="block";
	this.point.style.display="block";
	return false;
}

tbox.UI.ToolTip.prototype.hideTooltip = function()
{
	this.message.style.display = "none";
	this.point.style.display = "none";
	return false;
}

tbox.UI.ToolTip.prototype.showHideTooltip = function()
{
	if(this.message.style.display == "none") { this.showTooltip(); } else{ this.hideTooltip(); }
	return false;
}

tbox.UI.ToolTip.loadTooltips = function(arrChildren)
{
	for (var x=0;x<arrChildren.length;x++){
		var attributes = tbox.UI.parseAttributes(arrChildren[x].getAttribute("tui:tooltip"));
		
		new tbox.UI.ToolTip(arrChildren[x], attributes);
	}
}

tbox.UI.ToolTip.loadAll = function()
{
	//@TODO what about having a passed in list of attributes (like pointColor) that all of these tooltips will use
	arrChildren = tbox.UI.getElementsByAttribute(document,"tui:tooltip");
	tbox.UI.ToolTip.loadTooltips(arrChildren);
}