var $NS = YAHOO.namespace('hover');

var hoverInfoArray = new Array();
var hoverAudioArray = new Array();
var hoverVideoArray = new Array();

var initHover = function ()
{
	$NS.hoverbox = new YAHOO.widget.Overlay("hoverbox", {
		visible:false,
		width:"220px",
		//effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.5},
		//constraintoviewport:true,
		iframe:false,
		monitorresize:false
	});
	// These 3 lines that set the header, body and footer are done so that the hoverbox gets initialized
	// properly.  Otherwise, the first time it is rendered by the user hovering over an image, the height
	// does not get calculated correctly, and if it should be re-positioned upward because the image being
	// hovered over is at the bottom of the viewport, that doesn't happen the first time the user hovers.
	$NS.hoverbox.setHeader("title");
	$NS.hoverbox.setBody("addedby");
	$NS.hoverbox.setFooter("desc");
	var rendered = $NS.hoverbox.render(document.body);
};

var onHover = function (type, el, idx)
{
	if ($NS.hoverbox != undefined)
	{
		var hoverArray;
		switch (type)
		{
			case 'audio':
				hoverArray=hoverAudioArray;
				break;
			case 'video':
				hoverArray=hoverVideoArray;
				break;
			case 'photo':
			default:
				hoverArray=hoverInfoArray;
				break;
		}
		var knob = "knob-lt";
		var hoverLeft = YAHOO.util.Dom.getX(el)+el.offsetWidth+8;
		var viewWidth = YAHOO.util.Dom.getViewportWidth() + document.documentElement.scrollLeft;
		if ((hoverLeft + 240) > viewWidth)
		{
			hoverLeft = hoverLeft - 240 - 8*2 - el.offsetWidth - 1;
			knob = "knob-rt";
		}
		$NS.hoverbox.setHeader("<span class=\"" + knob + "\"></span><h4>"+hoverArray[idx].name+"</h4>");
		
		// set the "added by" - using the body
		if (hoverArray[idx].addedby != undefined)
		{
			$NS.hoverbox.setBody(hoverArray[idx].addedby);
		}
		else
		{
			$NS.hoverbox.setBody('');
		}
		// set the description - using the footer
		if (hoverArray[idx].desc != undefined)
		{
			var desc = hoverArray[idx].desc.substring(0, 200);
			if (desc.length < hoverArray[idx].desc.length) desc += "...";
			$NS.hoverbox.setFooter(desc);
		}
		else
		{
			$NS.hoverbox.setFooter('');
		}
		
		var hoverTop = YAHOO.util.Dom.getY(el)-20;
		var viewHeight = YAHOO.util.Dom.getViewportHeight() + document.documentElement.scrollTop;
		var hoverHeight = document.getElementById("hoverbox").offsetHeight;
		
		var overlap = (hoverTop + hoverHeight) - viewHeight;
		if (overlap > 0)
		{
			hoverTop = viewHeight - hoverHeight - 8;
			if (overlap > 20)
			{
				knob = knob.substring(0, knob.length-1) + "b";	// switch the knob to the bottom
				$NS.hoverbox.setHeader("<span class=\"" + knob + "\"></span><h4>"+hoverArray[idx].name+"</h4>");
			}
		}
		
		$NS.hoverbox.cfg.setProperty("xy",[hoverLeft,hoverTop]);
		$NS.hoverbox.render(document.body);
		$NS.hoverbox.cfg.setProperty("visible", true);
	}
};
		  
var offHover = function ()
{   
	if ($NS.hoverbox != undefined)
	{
		$NS.hoverbox.cfg.setProperty("visible", false);
	}
};