var popupActive = false;

$(document).ready(function() {
	// close popup
	 $(".timeLinePopup .xCloseButton").click(function () {
		$(".timeLinePopup").hide();
	 });
	 
	 $(".timeLinePopup").mouseover(function () {
		popupActive = true;
	 });
	 
	 $(".timeLinePopup").mouseout(function () {
		popupActive	= false;
		setTimeout("hideOnExit($(\".timeLinePopup\"));", 1000);
	 });	 

	//  Homepage Timeline popup
	$(".timeLine span").mouseover(function () {
		popupActive = true;		
		//get the position of the placeholder element
		var pos = $(this).offset();    
        var eWidth = $(this).outerWidth();
        var eHeight = $(this).outerHeight();
        var mHeight = $(".timeLinePopup").outerHeight();
		var mWidth = $(".timeLinePopup").outerWidth();
        var leftt = pos.left  + "px";
        var topp = (pos.top - mHeight)+ "px";

	var popupImgWidth = $(".popupImage").width();
	var popupDescWidth = $(".popupDescription").width();

	footerWidth =  popupImgWidth + popupDescWidth + 3 ;		
	if (footerWidth < 200) footerWidth = 200;
	  //show the pop directly over the placeholder
	   if (pos.left < 750)
	  {
		  $(".timeLinePopup").css( { "left": leftt , "top":topp} );
		  $(".popupFooter").css( { "width": footerWidth } );
		  $(".timeLinePopup").show();

	  }
	  else if (pos.left >= 750)
	  {
		  leftt = pos.left - mWidth + 30  + "px";
		  $(".timeLinePopup").css( { "left": leftt , "top":topp } );
		  $(".popupFooter").css( { "width": footerWidth } );
		  $(".timeLinePopup").show();
	  }
	});

	$(".timeLine span").mouseout(function () {	
		popupActive	= false;
		setTimeout("hideOnExit($(\".timeLinePopup\"));", 1000);
	});
 });
 
	function hideOnExit(object) {		
		if (!popupActive) object.hide();
	}
		
			
 function timeLineMouseOver(title,image,description,year,period,timelineColor){
 	var iconColorHomeTimeline = 'iconColorHomeTimeline' + timelineColor;
 	//var storyUrl = 'story/' + period + '/index.jsp';
 	var timelineUrl = 'timeline/' + period + '/index.jsp';

 	$('.popupImage').html("<img alt='"+title+"' scaleType='0' src='"+image+"' />");
	$('.popupHeader').html('<img class="'+iconColorHomeTimeline+'" src="/oorloginindie/export/system/modules/nl.vws.ieo/resources/images/clear.gif" alt="'+year+'" /><b>'+title +'</b> '+ year);
	$('.popupDesc').html(description);
	//$('#popupStoryLink').attr({ href: storyUrl});
	$('#popupTimelineLink').attr({ href: timelineUrl});
 }