function initPopup() {
	var divs = document.getElementsByTagName('div');
	for (var i in divs) {
		var div = divs[i];
		if (/^template(_right)?$/.test(div.className)) {
            $(div).css({ height: $(div).height() + 'px' });
			$(div).mouseover(showPopup);
			$(div).mouseout(hidePopup);
			$(div).mousemove(movePopup)
            var popup = getPopup(div);
            popup.id = 'popup_' + i;
		}
	}
}

function getFirstParentTemplate(el) {
	while (!/^template(_right)?$/.test(el.className)) {
		if (el.parentNode) {
			el = el.parentNode;
		} else {
			return el;
		}
	}
	return el;
}

function getPopup(el) {
	var template = getFirstParentTemplate(el);
	for (var i in template.childNodes) {
		var node = template.childNodes[i];
		if (node.className && node.className == 'popup') {
			return node;
		}
	}
	return null;
}

function showPopup(event) {
	var popup = getPopup(event.target || event.srcElement);
    $('.popup').each(function() {
        if (this.id != popup.id) {
            $(this).hide();
        }
    });
	$(popup).show();//.slideDown(1000, 'easeOutBounce');
	clearTimeout(popup.timeout);
}

function hidePopup(event) {
	var popup = getPopup(event.target || event.srcElement);
    popup.timeout = setTimeout("$('#" + popup.id + "').hide()", 10);
}

function movePopup(event) {
	if (!event.target) event.target = event.srcElement;
	var popup = getPopup(event.target);
	if (popup) {        
		popup.style.left = String(event.pageX + 20) + 'px';
		popup.style.top = String(event.pageY + 20) + 'px';
        var width = $(popup).width();
        if (width > 300) {
            $(popup).width(300)
        } else if (width < 200) {
            $(popup).width(200)
        }
	}
}