// use with picons where the first two classes are 'hoverable hoverable-XXX'
// where XXX is a number that will set the width of the hoverBox that appears

$(document).ready(function() {

	//$.preloadImages("/i/common/hoverBox/hoverBoxArrows.png");
	$("#footer").after('<div id="hoverBox"><table class="shadowBox"><tr><td class="shtl"></td><td class="shtm"></td><td class="shtr"></td></tr><tr><td class="shml"></td><td class="shmm"></td><td class="shmr"></td></tr><tr><td class="shbl"></td><td class="shbm"></td><td class="shbr"></td></tr></table><div id="hoverBoxArrow"></div></div>');

	showHoverBox = function(hbTrigger) {
	
	
		// creates objects
		var hb = new Object;
		var content = new Object;

		// removes any classes previously assigned and empties any content in the hoverBox
		$("#hoverBox #hoverBoxArrow").removeClass("arrowTopLft").removeClass("arrowTopRit").removeClass("arrowBotLft").removeClass("arrowBotRit");
		$("#hoverBox .shmm").empty();

		// determines width of hoverBox, passed in 2nd class hoverBox-XXX;
		var hbTriggerClasses = $(hbTrigger).attr("class");
		content.width = hbTriggerClasses.split(" ")[1];
		content.width = content.width.split("-")[1];
		content.imageTypeClass = hbTriggerClasses.split(" ")[2];
		$("#hoverBox").width(content.width+"px");

		// gets width of the hbTrigger element, generally it's a picon
		var windowWidth = $(window).width(); // window width
		hbTrigger.width = $(hbTrigger).width(); // trigger width
		hbTrigger.height = $(hbTrigger).height(); // trigger height
		hbTrigger.offset = $(hbTrigger).offset(); // trigger offset
				
		// need to use clone here, IE doesn't like .html()
		// gets the target picon and it's wrapping anchor tag, will fail without anchor tag
		$(hbTrigger).parent("a").clone().appendTo("#hoverBox .shmm"); 

		// gets the hidden content and drops it into the hoverBox
		$(hbTrigger).parent().nextAll(".hoverBoxContent").clone().appendTo("#hoverBox .shmm"); 

		//grabs the source of the image
		var imgSource = $("#hoverBox .hoverable").attr("src");
		
		// gets width of picon to determine what image we're dealing with
		// sets the width/height of the picon to show
				
		if ( hbTrigger.width == "122" ){ // if regular picon, show large picon
          	$("#hoverBox").addClass("piconLrgLft");
          	var newSource = imgSource.replace("regular","large");
			$("#hoverBox .hoverable").attr("src",newSource).css("height","182px").removeClass("hoverable");
		} else if ( hbTrigger.width == "92" ){ // if small picon, show large picon
          	$("#hoverBox").addClass("piconLrgLft");
          	var newSource = imgSource.replace("small","large");
			$("#hoverBox .hoverable").attr("src",newSource).css({height:"182px",width:"122px"}).removeClass("hoverable");
		} else if ( hbTrigger.width == "73" && content.imageTypeClass == "dailyGame" ){ // if jigsaw picon
          	$("#hoverBox").addClass("jigsaws");
			var newSource = imgSource.replace("_tiny.png",".jpg");
			$("#hoverBox .hoverable").attr("src",newSource).css({height:"182px",width:"272px"}).removeClass("hoverable");
		} else if ( hbTrigger.width == "40" ){ // if friends picon
          	$("#hoverBox").addClass("avatar");
			var newSource = imgSource.replace("small","large");
			$("#hoverBox .hoverable").attr("src",newSource).css({height:"140px",width:"140px"}).removeClass("hoverable");
		} 
		

      // get width & height of hoverBox to determine position
		hb.width = $("#hoverBox").width(); // hoverbox width
		hb.height = $("#hoverBox").height(); // hoverbox height
		var scrollHeight =  window.pageYOffset || document.documentElement.scrollTop // distance srolled
		
		
		// test to see if the browser window space is wide enough for the default view
		var notWideEnough;
		if ( hbTrigger.offset.left + hbTrigger.width + hb.width - 110 > windowWidth ) {
			var notWideEnough = true;
			hb.left = hbTrigger.offset.left - hb.width + 92 + (hbTrigger.width/2);
		} else {
			hb.left = hbTrigger.offset.left - 90 + (hbTrigger.width/2) ;
		}

		// test to see if the browser window space is tall enough for the default view
		// adds the arrow position as needed
		var notTallEnough;
		if ( hbTrigger.offset.top - scrollHeight + 30 < hb.height ) {
			var notTallEnough = true;
			if (notWideEnough == true ) {
				$("#hoverBox #hoverBoxArrow").addClass("arrowTopRit");
			} else {
				$("#hoverBox #hoverBoxArrow").addClass("arrowTopLft");
			}
			hb.top = hbTrigger.offset.top + (hbTrigger.height/2) + 20;
		} else {
			if (notWideEnough == true ) {
				$("#hoverBox #hoverBoxArrow").addClass("arrowBotRit");
			} else {
				$("#hoverBox #hoverBoxArrow").addClass("arrowBotLft");
			}
			// positions the hover so that the arrow can point to the middle of the picon hbTrigger
			hb.top = hbTrigger.offset.top + (hbTrigger.height/2) - hb.height - 19;
		}
				
	//$("#debug").html(hbTrigger.offset.top - scrollHeight +" | "+hb.height)
		
		// sets final position of hoverBox
		$("#hoverBox").css("left",hb.left);
		$("#hoverBox").css("top",hb.top);
		$("#hoverBox").show();
	}
	
	// when hover areas have been fully exitted
	hoverComplete = function() {
		$("#hoverBox").hide();
		clearTimeout(hoverTimeoutID);
	}

	var hoverMouseOut = false;

	// picon with 'hoverable' triggers the hover
	// call the function on ajax load
	initHoverBox = function(){
		$(".hoverable").live("mouseover", function(){
			var hbTrigger = $(this);
			if (hoverMouseOut == true ) {
				showHoverBox(hbTrigger);
			} else {
				hoverTimeoutID = setTimeout(function() {showHoverBox(hbTrigger);}, 800);
			}
		});
		$(".hoverable").live("mouseout", function(){
			hoverMouseOut = false;
			hoverComplete();
		});

	}
	initHoverBox();
	
	// sets additional areas where hover is still valid
	$("#hoverBox table, #hoverBox #hoverBoxArrow").hover(
		function(){
			$("#hoverBox").show();
		}, 
		function(){
			hoverMouseOut = true;
			hoverComplete();
		}
	);
	
});