//global variable to keep track of the currently opened (non-hover)popover
//to help in ensuring only one popover is open at one time
var currPopover = null;
var bookDetailForkID = null;
var bookDetailForkDelay = 1000;

function getposOffset(overlay, offsettype)
{
	var totaloffset=(offsettype=="left")? overlay.offsetLeft : overlay.offsetTop;
	var parentEl=overlay.offsetParent;
	while (parentEl!=null)
	{
		totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
		parentEl=parentEl.offsetParent;
	}
	return totaloffset;
}

function overlayHover(curobj, subobjstr, opt_position, isImage) {

	var isHover = true;
	overlayCore(curobj, subobjstr, opt_position, isImage, isHover);
	
	var subobj = document.getElementById(subobjstr);
	if (subobj.style.display == "block") {
		placePopoverIFrame(subobj, 'help_popover_iframe');
	}
	
}

function showBookDetailPopOver(curobj, subobjstr, opt_position, index){
	bookDetailForkID = setTimeout( function () { showBookDetailPopOverFork(curobj, subobjstr, opt_position, index); }, bookDetailForkDelay);
}

function showBookDetailPopOverFork(curobj, subobjstr, opt_position, index){
	
	if (document.getElementById){

		var subobj=document.getElementById(subobjstr);
		
		//set the various elements of the book detail popup
		var imagePath = document.getElementById('largeImage' + index);
		var title = document.getElementById('title' + index);
		var author = document.getElementById('author' + index);
		var interestLevel = document.getElementById('interestLevel' + index);
		var readingLevelType = document.getElementById('readingLevelType' + index);
		var readingLevel = document.getElementById('readingLevel' + index);
		var srcQuizzes = document.getElementById('srcQuizzes' + index);
		var arQuizzes = document.getElementById('arQuizzes' + index);
		var shortDesc = document.getElementById('shortDesc' + index);
		var longDesc = document.getElementById('longDesc' + index);
		
		var bookDetailImage = document.getElementById('bookDetailImage');
		bookDetailImage.src = imagePath.value;
		
		var bookDetailTitle = document.getElementById('bookDetailTitle');
		bookDetailTitle.innerHTML = title.value;
		
		var bookDetailAuthor = document.getElementById('bookDetailAuthor');
		bookDetailAuthor.innerHTML = author.value;
		
		
		var firstElement = true;
		if (interestLevel.value.length > 0) {
		
			var bookDetailInterestLevelVal = document.getElementById('bookDetailInterestLevelVal');
			bookDetailInterestLevelVal.innerHTML = interestLevel.value;
			
			var bookDetailInterestLevel = document.getElementById('bookDetailInterestLevel');

			bookDetailInterestLevel.className = "result_item_attribute first_attr";
			firstElement = false;
			bookDetailInterestLevel.style.display = "block";
			
			
		} else {
			var bookDetailInterestLevel = document.getElementById('bookDetailInterestLevel');
			bookDetailInterestLevel.style.display = "none";
		}
		
		if (readingLevel.value.length > 0) {

			var bookDetailReadingLevelType = document.getElementById('bookDetailReadingLevelType');
			if ((bookDetailReadingLevelType != undefined) && (readingLevelType != undefined)) {
				bookDetailReadingLevelType.innerHTML = readingLevelType.value;
			}

			var bookDetailReadingLevelVal = document.getElementById('bookDetailReadingLevelVal');
			bookDetailReadingLevelVal.innerHTML = readingLevel.value;
			
			var bookDetailReadingLevel = document.getElementById('bookDetailReadingLevel');
			if (firstElement == true) {
				bookDetailReadingLevel.className = "result_item_attribute first_attr";
				firstElement = false;
			} else {
				bookDetailReadingLevel.className = "result_item_attribute";
			}
			bookDetailReadingLevel.style.display = "block";
		} else {
			var bookDetailReadingLevel = document.getElementById('bookDetailReadingLevel');
			bookDetailReadingLevel.style.display = "none";
		}
		
		var bookDetailSrcQuizzes = document.getElementById('bookDetailSRCQuizzes');
		if (srcQuizzes.value == 'true') {
			bookDetailSrcQuizzes.style.display="block";
			if (firstElement == true) {
				bookDetailSrcQuizzes.className = "result_item_attribute first_attr";
				firstElement = false;
			} else {
				bookDetailSrcQuizzes.className = "result_item_attribute";
			}
		} else {
			bookDetailSrcQuizzes.style.display="none";
		}
		var bookDetailArQuizzes = document.getElementById('bookDetailARQuizzes');
		if (arQuizzes.value == 'true') {
			bookDetailArQuizzes.style.display="block";
			if (firstElement == true) {
				bookDetailArQuizzes.className = "result_item_attribute first_attr";
				firstElement = false;
			} else {
				bookDetailArQuizzes.className = "result_item_attribute";
			}
		} else {
			bookDetailArQuizzes.style.display="none";
		}
		var bookDetailShortDesc = document.getElementById('bookDetailShortDesc');
		bookDetailShortDesc.innerHTML = shortDesc.value;
		
		var bookDetailLongDesc = document.getElementById('bookDetailLongDesc');
		bookDetailLongDesc.innerHTML = longDesc.value;

		return overlayHover(curobj, subobjstr, opt_position, "true");

	} else {
		return true;
	}
}

function overlay(curobj, subobjstr, opt_position, isImage, isHover) {

	if (currPopover != null) {
		currPopover.style.display = "none";
	}
	
	overlayCore(curobj, subobjstr, opt_position, isImage, isHover);
	
	var subobj = document.getElementById(subobjstr);
	currPopover = subobj;
	if (subobj.style.display == "block") {
		placePopoverIFrame(subobj, 'popover_iframe');
	}
}

function overlayCore(curobj, subobjstr, opt_position, isImage, isHover)
{
	//previousCurObj = curobj;
	//previousOptPosition = opt_position;
	if (document.getElementById)
	{
		//alt is used to overlay differntly when the curobj is an image, 
		//and when the browser is not IE (using document.all to check for ie)
		var useAlt = false;
		if((typeof isImage!="undefined") && (isImage=="true") && (!document.all)) {
			useAlt = true;
		}
		var subobj=document.getElementById(subobjstr);
		subobj.style.display=(subobj.style.display!="block")? "block" : "none";
		var xpos = getposOffset(curobj, "left");
		var ypos = getposOffset(curobj, "top");
		xpos+=((typeof opt_position!="undefined" && opt_position.indexOf("right")!=-1)? -(subobj.offsetWidth-curobj.offsetWidth) : 0);
		xpos-=((typeof opt_position!="undefined" && opt_position.indexOf("left")!=-1)? subobj.offsetWidth : 0);
		xpos-=((typeof opt_position!="undefined" && opt_position.indexOf("lcenter")!=-1)? (subobj.offsetWidth - curobj.offsetWidth) : 0); 
		ypos+=((typeof opt_position!="undefined" && (opt_position.indexOf("bottom")!=-1 || opt_position.indexOf("l")!=-1))? curobj.offsetHeight : 0);
		if(useAlt)
		{
			ypos-=((typeof opt_position!="undefined" && opt_position.indexOf("top")!=-1)? (subobj.offsetHeight+curobj.offsetTop) : 0);
		}
		else
		{
			ypos-=((typeof opt_position!="undefined" && opt_position.indexOf("top")!=-1)? (subobj.offsetHeight) : 0);
		}
		ypos-=((typeof opt_position!="undefined" && opt_position.indexOf("top")!=-1 && opt_position.indexOf("lcenter")!=-1)? curobj.offsetHeight : 0);
		subobj.style.left=xpos+"px";
		subobj.style.top=ypos+"px";


		//show popover in relation to button
		var currPop = subobj;
	
		var windowYPos = 0;
		var windowXPos = 0;
		var visibleHeight = 0;
		if (window.innerHeight) { //firefox
			windowYPos = window.pageYOffset;
			windowXPos = window.pageXOffset;
			
			visibleHeight = window.innerHeight;
		} else if (document.documentElement && document.documentElement.clientHeight) { //IE
			windowYPos = document.documentElement.scrollTop;
			windowXPos = document.documentElement.scrollLeft;
			
			visibleHeight = document.documentElement.clientHeight;
		}		else { //IE
			windowYPos = document.body.scrollTop;
			windowXPos = document.body.scrollLeft;
			
			visibleHeight = document.body.clientHeight;
		}
		
		//get height and width of popover 
		//item needs to be visible first
		var objectHeight = currPop.offsetHeight;
		var objectWidth = currPop.offsetWidth;
		
		var currScreenTop = windowYPos;
		var currScreenBottom = windowYPos + visibleHeight;
		var currPopoverTop = getposOffset(currPop, "top");
		var currPopoverBottom = getposOffset(currPop, "top") + objectHeight;
		var invPopoverTop = 0;
		var invPopoverBottom = 0;

		if(opt_position.indexOf("top")!=-1)
		{
			invPopoverTop = getposOffset(curobj, "top") + curobj.offsetHeight;
			invPopoverBottom = invPopoverTop + objectHeight;
		}
		else
		{
			invPopoverBottom = getposOffset(curobj, "top");
			invPopoverTop = invPopoverBottom - objectHeight;
		}

		var position = "";
		var pTop = (opt_position.indexOf("top")!=-1?currPopoverTop:invPopoverTop-(useAlt?curobj.offsetTop+curobj.offsetHeight:0));
		var pBottom = (opt_position.indexOf("top")!=-1?invPopoverBottom:currPopoverBottom);

		if(pTop >= 0 && currScreenBottom - pBottom < pTop - currScreenTop)
		{
			position = "top";	
		}
		else
		{
			position = "bottom";
		}
		
		if(opt_position.indexOf("lcenter")!=-1) {
			position += "lcenter";
		}
		
		if(position!=opt_position)
		{
			if (isHover) {
				overlaycloseHover(subobjstr);
			} else {
				overlayclose(subobjstr);
			}
			
			if(useAlt)
				return overlayCore(curobj, subobjstr, position, isImage, isHover);
			else
				return overlayCore(curobj, subobjstr, position, isImage, isHover);
		}

		// correctly position the arrow for the popover position
		if(typeof opt_position!="undefined")
		{
			if(opt_position.indexOf("top")!=-1)
			{
				document.getElementById(subobjstr + 'BottomLeft').className = "roundblueshadow-bottom-leftarrow";
				document.getElementById(subobjstr + 'BottomRight').className = "roundblueshadow-bottom-right";
				document.getElementById(subobjstr + 'TopLeft').className = "roundblueshadow-top-left";
				document.getElementById(subobjstr + 'TopRight').className = "roundblueshadow-top-right";
			}
			if(opt_position.indexOf("bottom")!=-1)
			{
				document.getElementById(subobjstr + 'BottomLeft').className = "roundblueshadow-bottom-left";
				document.getElementById(subobjstr + 'BottomRight').className = "roundblueshadow-bottom-right";
				document.getElementById(subobjstr + 'TopLeft').className = "roundblueshadow-top-leftarrow";
				document.getElementById(subobjstr + 'TopRight').className = "roundblueshadow-top-right";
			}
			/*if(opt_position.indexOf("left")!=-1)
			{
				document.getElementById(subobjstr + 'BottomLeft').className = "roundblueshadow-bottom-left";
				document.getElementById(subobjstr + 'BottomRight').className = "roundblueshadow-bottom-right";
				document.getElementById(subobjstr + 'TopLeft').className = "roundblueshadow-top-left";
				document.getElementById(subobjstr + 'TopRight').className = "roundblueshadow-top-rightarrow";
			}*/
			if(opt_position.indexOf("lcenter")!=-1)
			{
				document.getElementById(subobjstr + 'BottomLeft').className = "roundblueshadow-bottom-left";
				document.getElementById(subobjstr + 'BottomRight').className = "roundblueshadow-bottom-right";
				document.getElementById(subobjstr + 'TopLeft').className = "roundblueshadow-top-left";
				document.getElementById(subobjstr + 'TopRight').className = "roundblueshadow-top-rightarrow";
			}
			if(opt_position.indexOf("top")!=-1 && opt_position.indexOf("lcenter")!=-1)
			{
				document.getElementById(subobjstr + 'BottomLeft').className = "roundblueshadow-bottom-left";
				document.getElementById(subobjstr + 'BottomRight').className = "roundblueshadow-bottom-rightarrow";
				document.getElementById(subobjstr + 'TopLeft').className = "roundblueshadow-top-left";
				document.getElementById(subobjstr + 'TopRight').className = "roundblueshadow-top-right";
			}
		}

		return false;
	}
	else
		return true;
}

function overlayclose(subobj) {
	if(document.getElementById(subobj)) {
		//hide the popover iframe
		document.getElementById('popover_iframe').style.display="none";
	
		document.getElementById(subobj).style.display="none";
	}
	
}

function overlaycloseHover(subobj) {
	if(subobj=='bookdetail' && bookDetailForkID!=null)
	{
		clearTimeout(bookDetailForkID);
		bookDetailForkID = null;
	}
	if(document.getElementById(subobj)) {
	
		//hide the popover iframe
		document.getElementById('help_popover_iframe').style.display="none";
	
		document.getElementById(subobj).style.display="none";
	}
	
}


//Set the new popover's coordinates to be that of the previous popover.
function swapPopovers(oldPopoverId, newPopoverId) {
	var oldPopover = document.getElementById(oldPopoverId);
	var newPopover = document.getElementById(newPopoverId);
	
	//determine the position, defualt to bottom
	var position = 'bottom';
	
	
	//set the new popover's arrow
	var topLeftOrigin = document.getElementById(oldPopoverId + 'TopLeft');
	var topRightOrigin = document.getElementById(oldPopoverId + 'TopRight');
	var bottomLeftOrigin = document.getElementById(oldPopoverId + 'BottomLeft');
	var bottomRightOrigin = document.getElementById(oldPopoverId + 'BottomRight');
	
	var topLeftNew = document.getElementById(newPopoverId + 'TopLeft');
	var topRightNew = document.getElementById(newPopoverId + 'TopRight');
	var bottomLeftNew = document.getElementById(newPopoverId + 'BottomLeft');
	var bottomRightNew = document.getElementById(newPopoverId + 'BottomRight');
	
	topLeftNew.className = topLeftOrigin.className;
	topRightNew.className = topRightOrigin.className;
	bottomLeftNew.className = bottomLeftOrigin.className;
	bottomRightNew.className = bottomRightOrigin.className;
	
	//check if the previous popover was positioned on bottom (determine by checking if arrow is on top)
	if ( ((topLeftOrigin.className != null) && (topLeftOrigin.className == "roundblueshadow-top-leftarrow"))
		|| ((topRightOrigin.className != null) && (topRightOrigin.className == "roundblueshadow-top-rightarrow")) ) {
		
		position = 'bottom';
		
	//check if the previous popover was positioned on top (determine by checking if arrow is on bottom)
	} else if ( ((bottomLeftOrigin.className != null) && (bottomLeftOrigin.className == "roundblueshadow-bottom-leftarrow"))
		|| ((bottomRightOrigin.className != null) && (bottomRightOrigin.className == "roundblueshadow-bottom-rightarrow")) ) {
		
		position = 'top';
	}
	
	//display the new popover
	//item needs to be visible first to obtain offsetHeight/offsetWidth
	newPopover.style.display = "block";
	if (position == 'bottom') {
	
		//If the previous popover is positioned on bottom, then set the new popover's top, left 
		//to match the previous popover's top, left.
		newPopover.style.left = oldPopover.style.left;
		newPopover.style.top = oldPopover.style.top;
	} else {
	
		//If the previous popover is positioned on top, then set the the new popover's left, (top + offsetHeight)
		//to match the previosu popover's left, (top + offsetHeight)
		newPopover.style.left = oldPopover.style.left;
		var newTopYPos = getposOffset(oldPopover, "top") + oldPopover.offsetHeight - newPopover.offsetHeight;
		newPopover.style.top = newTopYPos + "px";
	}
	
	//close/hide the old popover
	overlayclose(oldPopoverId);
	
	//display the new popover
	//and place the IFrame
	newPopover.style.display = "block";
	placePopoverIFrame(newPopover, 'popover_iframe');
	currPopover = newPopover;
	
}

//Places an IFrame behind the popover.
//Note: the popover's display cannot be 'none', as it needs to be displaying to obtain its offsetWidth, offsetHeight
function placePopoverIFrame(popover, iframeId) {
	//show the iframe first
	var popoverIFrame = document.getElementById(iframeId);
	popoverIFrame.style.left = popover.style.left;
	popoverIFrame.style.top = popover.style.top;
	popoverIFrame.height = popover.offsetHeight;
	popoverIFrame.width= popover.offsetWidth;
	popoverIFrame.style.display="block";
	
	//set z index of popover
	popover.style.zIndex = (popoverIFrame.style.zIndex + 1);//place iframe
}