/*
	Tips (Version 1.0)
	Show graphical tips
	
	Author: Alvis Tang
	
	Last Modified: Feb 26, 2008
*/

/* Spawn Element*/
function element(tag, className){
	var el = document.createElement(tag);
	el.className = className;
	el.style.display = 'block';
	return(el);
}

/* Hide Tip */
function hideTooltip(e){
	var tip = document.getElementById('tip');
	if (tip.childNodes.length > 0) tip.removeChild(tip.firstChild);
}

/* Initiative Function */
function initTips(){
	var tag, links, div, wrap, box, i;

	/* Create base element */
	tag = document.createElement('span');
	tag.id = 'tip';
	tag.setAttribute('id','tip');
	tag.style.position = 'absolute';
	document.body.appendChild(tag);

	$j.each($j('#wrap .box a'), function(index, value) { 
	  prepare(value);
	});
}

/* Locate Tip Position */
function locate(e){
	e = (e || window.event);
	var target = (e.target || e.srcElement);
	var x = y = 0;
	if (e.pageX || e.pageY){
		x += e.pageX;
		y += e.pageY;
	}else if (e.clientX || e.clientY){
		if(document.documentElement.scrollTop){
			x += e.clientX + document.documentElement.scrollLeft;
			y += e.clientY + document.documentElement.scrollTop;
		}else{
			x += e.clientX + document.body.scrollLeft;
			y += e.clientY + document.body.scrollTop;
		}
	}
	document.getElementById('tip').style.top = (y + 20) + 'px';
	document.getElementById('tip').style.left = (x + 20) + 'px';
}

/* Tip Perparation Function */
function prepare(el){
	/* Skip further process if passed element has been prepared */
	if (el.tooltip) return;

	var tooltip, top, bottom, title, mix, caption, content, image, imageNode;

	/* Prepare tip element & append it under el.tooltip */
	title = el.getAttribute('title');
	if (title == null || title.length == 0) title = '';
	el.removeAttribute('title');

	tooltip = element('div', 'tooltip');
	tooltip.style.filter = 'alpha(opacity:95)';
	tooltip.style.KHTMLOpacity = '0.95';
	tooltip.style.MozOpacity = '0.95';
	tooltip.style.opacity = '0.95';

	tooltip.show = title == '' ? false : true
	mix = title.split(" :: ");
	caption = mix[0];
	content = mix[1];
	image = mix[2];

	top = element('div', 'top');
	top.appendChild(document.createTextNode(caption));
	tooltip.appendChild(top);

	bottom = element('div', 'bottom');
	if (image) {
		imageNode = document.createElement('img');
		imageNode.src = 'http://www.hkepc.com/database/images/thumbs/80x60.' + image;
		bottom.appendChild(imageNode);
	}
	bottom.appendChild(document.createTextNode(content));
	tooltip.appendChild(bottom);
	
	el.tooltip = tooltip;

	/* Mount event handler */
	if (el.addEventListener){
		el.addEventListener('mouseover', showTooltip, false);
		el.addEventListener('mouseout', hideTooltip, false);
		el.addEventListener('mousemove', locate, false);
	}else{
		el.attachEvent('onmouseover', showTooltip);
		el.attachEvent('onmouseout', hideTooltip);
		el.attachEvent('onmousemove', locate);
	}
}

/* Show Tip */
function showTooltip(e){
	e = (e || window.event);
	var target = (e.target || e.srcElement);
	if (target.tooltip.show){
		document.getElementById('tip').appendChild(target.tooltip);
		locate(e);
	}
}