var Tooltip = {
	preloadImages: function() {
		var imgPaths = [this.imgPath + 'top_left.png', this.imgPath + 'top.png', this.imgPath + 'top_right.png',
			this.imgPath + 'left.png', this.imgPath + 'center.png', this.imgPath + 'right.png',
			this.imgPath + 'bottom_left.png', this.imgPath + 'bottom.png', this.imgPath + 'bottom_right.png'];
			
		var images = [];
		for (var i = 0; i < imgPaths.length; i++) {
			images[i] = new Image();
			images[i].src = imgPaths[i];
		}
	},
	
	show: function(tip) {
		var htmlContent = tip;
		var isIE = navigator.appName == "Microsoft Internet Explorer";
		if (!this.tooltipDiv) {
			this.tooltipDiv = document.createElement("div");
			this.tooltipDiv.className = "tooltip";
				
			if (isIE) {
				this.tooltipDiv.innerHTML =
					'<table id="tooltipTable" cellspacing="0" cellpadding="0" border="0" style="position: absolute;">' +
					'<tr><td><div style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + this.imgPath + 'top_left.png\', sizingMethod=\'scale\'); width: 18px; height: 18px;" /></td>' + 
					'<td><div style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + this.imgPath + 'top.png\', sizingMethod=\'scale\'); height: 18px; width=100%;" /></td>' + 
					'</td><td><div style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + this.imgPath + 'top_right.png\', sizingMethod=\'scale\'); width: 18px; height: 18px;"></div></td></tr>' +
					'<tr><td style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + this.imgPath + 'left.png\', sizingMethod=\'scale\'); width: 18px;"></td>' + 
					'<td id="_centerTd" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + this.imgPath + 'center.png\', sizingMethod=\'scale\');"><table cellpadding="0" cellspacing="0"><tr><td id="tooltipContent">' +
					'</td></tr></table></td><td style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + this.imgPath + 'right.png\', sizingMethod=\'scale\'); width: 18px; "></td></tr>' +
					'<tr><td><div style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + this.imgPath + 'bottom_left.png\', sizingMethod=\'scale\'); width: 18px; height: 18px;" /></td>' + 
					'<td><div style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + this.imgPath + 'bottom.png\', sizingMethod=\'scale\'); height: 18px;" /></td>' +
					'<td><div style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + this.imgPath + 'bottom_right.png\', sizingMethod=\'scale\'); width: 18px; height: 18px;">&nbsp;</td></tr></table>';
			} else {
				this.tooltipDiv.innerHTML =
					'<table id="tooltipTable" cellspacing="0" cellpadding="0" border="0" style="position: absolute" width="100%">' +
					'<tr><td width="18" height="18"><img src="' + this.imgPath + 'top_left.png" width="18" height="18" /></td><td><img src="' + this.imgPath + 'top.png" width="100%" height="18" /></td><td width="18" height="18"><img src="' + this.imgPath + 'top_right.png" width="18" height="18" /></td></tr>' +
					'<tr><td width="18" valign="top"><img id="_leftImg" src="' + this.imgPath + 'left.png" width="18" height="100%" style="position: absolute;" /></td><td id="_centerTd" valign="top" align="left"><img id="_centerImg" src="' + this.imgPath + 'center.png" width="100%" height="100%" style="position: absolute;z-index: 1000" /><div id="tooltipContent" style="position: relative; z-index: 1001; ">' +
					'</div></td><td width="18" height="100%" valign="top"><img id="_rightImg" src="' + this.imgPath + 'right.png" width="18" height="100%" style="position: absolute;" /></tr>' +
					'<tr><td width="18" height="18"><img src="' + this.imgPath + 'bottom_left.png" width="18" height="18" /></td><td><img src="' + this.imgPath + 'bottom.png" width="100%" height="18" /></td><td width="18" height="18"><img src="' + this.imgPath + 'bottom_right.png" width="18" height="18" /></tr></table>';
			}
			
			function onMouseMove(event) {
				var e = event ? event : window.event;
				if (typeof(e.pageX) == "number") {
					Tooltip.currentMousePos.left = e.pageX;
					Tooltip.currentMousePos.top = e.pageY;
				} else {
					Tooltip.currentMousePos.left = e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
					Tooltip.currentMousePos.top = e.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
				}
				
				if (Tooltip.visible) {
					Tooltip.updatePosition();
				}
			}
	
			document.body.appendChild(this.tooltipDiv);
			var oldmousemove = document.body.onmousemove;
			
			document.body.onmousemove = function(event) {
				onMouseMove(event);
				if (oldmousemove) {
					oldmousemove(event);
				}
			}
		}
		
		document.getElementById('tooltipContent').innerHTML = htmlContent;
		
		this.visible = true;
		this.tooltipDiv.style.display = "block";
		this.updatePosition();
		
		if (!isIE) {
			function refreshBackground() {
				var temp, es = document.getElementById('tooltipContent').getElementsByTagName("img");
				var img = es[0].id.replace(/htmlimage/gi, "image");

				eval("var imgHeight = " + img + ".height");
				if (imgHeight >= 185) {
					img = document.createElement("img");
					temp =  185 - document.body.appendChild(img).height;
					document.body.removeChild(img);
				} else {
					temp = 0;
				}
				temp = temp + document.getElementById('_centerTd').offsetHeight + "px";

				document.getElementById('_centerImg').style.width = document.getElementById('_centerTd').offsetWidth + "px";
				document.getElementById('_centerImg').style.height = temp;
				document.getElementById('_leftImg').style.height = temp;
				document.getElementById('_rightImg').style.height = temp;
;
			};
			
			refreshBackground();
			
			var el = document.getElementById('tooltipContent');
			function rec(el) {
				for (var i = 0; i < el.childNodes.length; i++) {
					var child = el.childNodes[i];
					if (child.tagName && child.tagName.toLowerCase() == "img") { if (!child.complete) { child.onload = function() { if (Tooltip.visible) refreshBackground();}}} else { if (child.childNodes) { rec(child); } }
				}
			};
			
			rec(el);
		}
	},

	hide: function() {
		this.tooltipDiv.style.display = "none";
		this.visible = false;
	},
	
	imgPath: 'images/',
	
	// Private members
	
	updatePosition: function() {
		if (this.visible) {
			var x = this.currentMousePos.left, y = this.currentMousePos.top;
			
			var windowSize = getWindowSize();
			var scroll = getScrollXY();
			var table = document.getElementById("tooltipTable");
			var tooltipSize = {width: table.offsetWidth, height: table.offsetHeight};
			
			if (y + 12 + tooltipSize.height > windowSize.height + scroll.top) {
				y -= tooltipSize.height;
				if (y < scroll.top) {
					y = scroll.top;
				}
			} else {
				y += 12;
			}
			
			if (x + 12 + tooltipSize.width + 20 > windowSize.width + scroll.left) {
				x -= tooltipSize.width + 12;
				if (x < scroll.left) {
					x = scroll.left;
				}
			} else {
				x += 12;
			}
			
			this.tooltipDiv.style.left = x + "px";
			this.tooltipDiv.style.top = y + "px";
		}
	},
	
	currentMousePos: {top: 0, left: 0},
	visible: false,
	tooltipDiv: null 
};

function getWindowSize() {
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number') {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }
  return {width: myWidth, height: myHeight};
}

function getScrollXY() {
  var scrOfX = 0, scrOfY = 0;
  if( typeof( window.pageYOffset ) == 'number' ) {
    //Netscape compliant
    scrOfY = window.pageYOffset;
    scrOfX = window.pageXOffset;
  } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
    //DOM compliant
    scrOfY = document.body.scrollTop;
    scrOfX = document.body.scrollLeft;
  } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
    //IE6 standards compliant mode
    scrOfY = document.documentElement.scrollTop;
    scrOfX = document.documentElement.scrollLeft;
  }
  return {left: scrOfX, top: scrOfY };
}

//window.onload = function() { Tooltip.preloadImages(); }
//Tooltip.preloadImages();