$(function() {
	MyTooltip = new MyTooltip({ backgroundColor:'#333' , fontColor : "#FFF" });
});


function MyTooltip(Conf) {

	this.backgroundColor = Conf['backgroundColor'];
	
	this.fontColor = Conf['fontColor'];

	this.TooltipID = 'Tooltip'+Math.ceil(Math.random()*10000);
	
	this.TimeOutID = null;
	
	this.init();
}


MyTooltip.prototype.init = function() {

	var _self = this;
	
	$('#'+_self.TooltipID).remove();
	
	var TooltipContainer = document.createElement('div');
	TooltipContainer.id = _self.TooltipID;
	$(TooltipContainer).css('position',"absolute");
	$(TooltipContainer).css('display',"none");
	
	var TooltipCursorTop = document.createElement('div');
	TooltipCursorTop.className = "TooltipCursorTop";
	
	var TooltipCursorBottom = document.createElement('div');
	TooltipCursorBottom.className = "TooltipCursorBottom";
	
	var TooltipContent = document.createElement('div');
	TooltipContent.className = "TooltipContent";
	$(TooltipContent).css("border","1px "+_self.backgroundColor+" solid");
	$(TooltipContent).css("backgroundColor",_self.backgroundColor);
	$(TooltipContent).css("color",_self.fontColor);
	$(TooltipContent).css("padding",'3px');
	$(TooltipContent).css("fontSize",'12px');
	$(TooltipContent).css("minHeight",'16px');
	
	$(TooltipCursorTop).appendTo($(TooltipContainer));
	$(TooltipContent).appendTo($(TooltipContainer));
	$(TooltipCursorBottom).appendTo($(TooltipContainer));

	
	$(TooltipCursorTop).css('height','8px');
	$(TooltipCursorTop).css('width','15px');
	$(TooltipCursorTop).css('position','relative');
	
	$(TooltipCursorBottom).css('height','8px');
	$(TooltipCursorBottom).css('width','15px');
	$(TooltipCursorBottom).css('position','relative');
	
	for (i=1;i<=15;i+=2) {
		
		var div = document.createElement("div");
		$(div).css('height','1px');
		$(div).css('width', i+'px');
		$(div).css('backgroundColor',_self.backgroundColor);
		$(div).css('margin','0px auto');
		
		$(div).appendTo($(TooltipCursorTop));
	}
	
	for (i=15;i>=1;i-=2) {
		
		var div = document.createElement("div");
		$(div).css('height','1px');
		$(div).css('width', i+'px');
		$(div).css('backgroundColor',_self.backgroundColor);
		$(div).css('margin','0px auto');
		
		$(div).appendTo($(TooltipCursorBottom));
	}
	
	$(TooltipContainer).appendTo($('body'));
	
	

	// Tooltip Event

	$(TooltipContainer).hover(function() { clearTimeout(_self.TimeOutID);_self.TimeOutID  = null; });
	$(TooltipContainer).mouseleave(function() { _self.leave(); });
}


MyTooltip.prototype.show = function(parent,html,width) {

	
	var _self = this;
	
	_self.closeAll();
	
	var child = $('#'+_self.TooltipID);
	var width = (width=="")?"100px":width;
	
	clearTimeout(_self.TimeOutID);
	_self.TimeOutID  = null;
	
	
	var offset = $(parent).position();
	
	$(parent).hover(function() { clearTimeout(_self.TimeOutID);_self.TimeOutID  = null; });
	$(parent).mouseleave(function() { _self.leave(); });
	
	$(child).css('width',width);
	
	var parentHeight = $(parent).innerHeight();
	var parentWidth = $(parent).innerWidth();
	var childHeight = $(child).innerHeight();
	var childWidth = $(child).innerWidth();
	
	$(child).find(".TooltipContent:eq(0)").html(html);
	

	/*
	if (mode == "bottom") {
	
		$(child).css('top',offset.top+parentHeight);
		$(child).css('left',offset.left);
		$(child).show();
		
	} else if (mode == "right") {
	
		$(child).css('top',offset.top);
		$(child).css('left',offset.left+parentWidth);
		$(child).show();
		
	} else if (mode == "top") {
	
		$(child).css('top',offset.top-childHeight);
		$(child).css('left',offset.left);
		$(child).show();
		
	} else if (mode == "left") {
	
		$(child).css('top',offset.top);
		$(child).css('left',offset.left-childWidth);
		$(child).show();
		
	} 
	*/
	
	var Cursor = null;
	
	if ((offset.top+parentHeight+childHeight) > $('body').height()) {
		$('#'+_self.TooltipID).find(".TooltipCursorBottom:eq(0)").show();
		$(child).css('top',offset.top-childHeight);
		Cursor = $('#'+_self.TooltipID).find(".TooltipCursorBottom:eq(0)");
	} else {
		$('#'+_self.TooltipID).find(".TooltipCursorTop:eq(0)").show();
		$(child).css('top',offset.top+parentHeight);
		Cursor = $('#'+_self.TooltipID).find(".TooltipCursorTop:eq(0)");
	}
	

	if ((offset.left+childWidth) > $('body').width() ) {

		Cursor.css("left",(childWidth-Math.ceil(parentWidth/2)));
		var newPosition = $('body').width() - childWidth;
		$(child).css('left',newPosition);
	
	} else { 
		Cursor.css("left",Math.ceil(parentWidth/2));
		$(child).css('left',offset.left); 
	};
	
	$(child).show('fast');
	
	
}

MyTooltip.prototype.closeAll = function() {

	var _self = this;

	$('#'+_self.TooltipID).hide();
	$('#'+_self.TooltipID).find(".TooltipCursorTop:eq(0)").hide();
	$('#'+_self.TooltipID).find(".TooltipCursorBottom:eq(0)").hide();
}

MyTooltip.prototype.leave = function() {
	
	var _self = this;
	
	if (_self.TimeOutID  == null)
		_self.TimeOutID = setTimeout(function() { _self.closeAll() },500);
	
	
}