/*

to create an overlay:

//
// Overlay Content in same HTML file
//

	overlays can be created in two ways.  One is to build the content into your HTML file.
	To do this, you just create a div that contains your overlay content.  To specify a 
	title for your overlay, put it in a sub-div with the 'overlay-head' class.

			<div id="your-overlay-id" overlayTitle="Title of Overlay">
				=== your overlay content goes here. ===
			</div>

				... OR ...

			<div id="your-overlay-id">
				<div class="overlay-head">
					Title of overlay
				</div>
				=== your overlay content goes here. ===
			</div>

	to attach your overlay to a DIV or link that opens it, simply put the overlayContentId
	attribute in your DIV or A, set to your overlay id, like so:
	
			<a href='#' overlayContentId="your-overlay-id">Click me</a>
			
//
// Overlay Content in separate file
//
			
	to put your overlay content in a separate file, simply have an HTML file that contains
	the same structure for overlay content as above.  then, to link it to a DIV or link, 
	use the overlayTarget attribute, like so:

			<a href='#' overlayTarget="http://link.to.your/overlay/content.html">Click Me</a>


	//
	// TO PREVENT SCROLLING (in same-file-content only)
	//
	// if you don't want the overlay to have the automatic sizing/scrolling behavior, 
	// add the 'noscroll' attribute to the top level div
	// if you don't want the overlay to have the print bar,
	// add the 'noprint attribute to the top level div
	//				 like this:
	//
	
	<div id="your-overlay-id" noscroll="true" noprint="true">
			... etc

	//
	// TO SET A WIDTH OTHER THAN THE DEFAULT WIDTH
	//
	// to set the inner width (the width of the inner content)
	// use the overlayContentWidth attribute
	//
	<div id="your-overlay-id" overlayContentWidth="400">

	
	//
	// you can set the width of your overlay to be different from the default width, either
	// in a STYLE tag in your top level div, or in a class definition for your overlay.
	// when you set the width, you set the OUTER width of the overlay - including the rounded border and shadow effect.
	//
	<div id="your-overlay-id" style="width:400px;">
	
	
	//
	// HIDING YOUR OVERLAY
	//
	// we recommend you hide your overlay manually.  the jQuery stuff makes sure it is hidden, but bad browsers
	// like IE6 have a tendency to show content before the jQuery initializer can run, so you might get flashes 
	// of your overlay content before it hides.  you can hide your content like this:
	//
	<div id="your-overlay-id" class="overlay">
		... OR ...
	<div id="your-overlay-id" style="display:none;">
		... OR ...
	you can put display:none in your stylesheet class definition for your overlay, if there is one.


	//
	// what this file does:
	//
	the jQuery stuff below transforms your overlay content to this:

	<div class="overlay-dialog">						// top level div, with absolute positioning and display:none
		<div class="overlay-holder orange-bar">		// inner div.  the 'orange-bar' is for the jscrollpane stuff.  the way they set up this stuff is not the best.
			<div class="overlay-t"></div>				// left slice of the overlay rounded corner stuff
			<div class="overlay-head-outer">
				<div class="overlay-head-inner">
														// your header content that has been extracted and put here.  this goes in the grey header area.  fixed height
				</div>										
			</div>
			<div class="scroll-pane">					// scroll pane.  if you use 'noscroll', this div element is not included.
				<div class="overlay-contents">		// wrapper for your contents.  adds a bit of margin.
					your content here					// your content goes here.
				</div>
			</div>
		</div>
		<div class="overlay-b"><div></div></div>		// bottom slice of background, for rounded corners
	</div>

*/




var overlaypreloadholder = null;
var overlaypreloadidval = 1;

$(document).ready(function() {
	
	preload_image = new Image(); 
	preload_image.src="../images/overlays/overlay-background.png"; 
	preload_image2 = new Image(); 
	preload_image2.src="../images/overlays/overlay-background.gif"; 

	//
	// initialize the two top level overlay dialogs (scroll and noscroll)
	//
	initializeOverlayObject(false);
	initializeOverlayObject(true);

	var shadowelem = $("<div id='overlay-shadow' class='closeall'>&nbsp;</div>");
	$(document.body).append(shadowelem);
	shadowelem.click(closeOverlays);
	
	
	if (browser.isIE7not)
	{
		$("<iframe id='ie6iframefixer'></iframe>").prependTo(shadowelem).load(function(){
			$(document.getElementById("ie6iframefixer").contentWindow.document.body).click(closeOverlays);
		});
	}


	
	$("div[overlayContentId],a[overlayContentId]").each(function() {
		//
		// for all divs or links that have overlayContentId
		//
																 
		var thislink = $(this);
		var overlaycontent = $("#"+thislink.attr("overlayContentId"));
		
		//
		// hide the overlayContent, and set its width attribute, then clear its width
		//
		overlaycontent.hide();

		thislink.click(function(){
			handleOverlayLinkClick($(this));
			return false;
		});
	});

	$("div[overlayTarget],a[overlayTarget]").each(function() {
		//
		// for all links that will load AJAX overlay content
		//
														   
		var thislink = $(this);
		var targetstr = thislink.attr("overlayTarget");
		
		thislink.click(function(){
			handleOverlayLinkClick($(this));
			return false;
		});

		//
		// now start ajax preload
		//
		//if (!overlaypreloadholder)
		//	overlaypreloadholder = $("<div id='overlaypreloadholder' style='display:none'></div>").appendTo("body");
		
		//if (overlaypreloadholder.children("[overlaypreloadtarget='"+targetstr+"']").length==0)
		//	overlaypreloadholder.append("<div class='overlaypreloaddiv' id='overlaypreloaddiv"+(overlaypreloadidval++)+"' overlaypreloadtarget='"+targetstr+"'></div>");
	});


	//setTimeout(preloadAjaxContent, 10);
});


function handleOverlayLinkClick(link)
{
	var idstr = link.attr("overlayContentId");
	var targetstr = link.attr("overlayTarget");
	var overlaytitle = link.attr("overlayTitle");
	if (idstr && idstr.length>0)
	{
		openElementOverlay(idstr, overlaytitle);
	}
	else if (targetstr && targetstr.length>0)
	{
		openAjaxOverlay(targetstr, overlaytitle);
	}
}



/*
function preloadAjaxContent()
{
	if (!overlaypreloadholder)
		return;
		
	var nextpreload = overlaypreloadholder.children(".overlaypreloaddiv:empty:first");
	if (nextpreload.length>0)
	{
		nextpreload.eq(0).load(nextpreload.attr('overlaypreloadtarget'), null, overlayPreloadComplete);
	}
}

function overlayPreloadComplete()
{
	//
	// thisholder holds the preloaded content.  append it to the document body.
	//
	var thisholder = $(this).appendTo("body");
	
	//
	// now find all links that refer to this content.  change their attribute from ajax url to content id
	//
	var preloadtarget = thisholder.attr('overlaypreloadtarget');
	$("div[overlayTarget='"+preloadtarget+"'],a[overlayTarget='"+preloadtarget+"']").each(function() {
		var thislink = $(this);
		thislink.removeAttr('overlayTarget');
		thislink.attr('overlayContentId',thisholder.attr('id'));
	});
	
	//
	// see if there are any more content to preload
	//
	preloadAjaxContent();
}
*/


function openElementOverlay(idelement, linktitle)
{
	var overlaydialog;
		
	var overlaycontentnode = $("#"+idelement);
	
	//
	// if the overlayContentWidth attribute is note set, but the contentnode has a width set via css
	// then we use that width as our overlayContentWidth (this allows widths to be set via css)
	//
	if (!isNaN(parseInt(overlaycontentnode.css("width"))) && !overlaycontentnode.attr("overlayContentWidth"))
		overlaycontentnode.attr("overlayContentWidth", overlaycontentnode.css("width")).css("width", "auto");
	
	if (overlaycontentnode.attr("noscroll")!=undefined)
		overlaydialog = $('#overlaydialognoscroll');
	else
		overlaydialog = $('#overlaydialog');
				
	//
	// get the leaf node that holds the contents, and then empty it,
	// and then add the content to it
	//
	$('.overlay-contents', overlaydialog).empty().append(overlaycontentnode);
	overlaycontentnode.show();	// we show this because it is hidden
			
	//
	// set flag indicating we want to keep the content (not discard it after overlay is closed)
	//
	overlaydialog.attr("keepoverlaycontent", "1");
			
	// now open overlay
	openOverlay(overlaydialog, overlaycontentnode, linktitle);

}


function openAjaxOverlay(strUrl, linktitle)
{
	strUrl = strUrl.replace(" ", "%20");
	//
	// always use scrolling overlay dialog
	//
	var overlaydialog = $('#overlaydialog');
			
	//
	// get leaf node, empty it, 
	//		add placeholder (we need to do this because otherwise IE throws an error when we init scrollpane)
	//		and then load ajax content
	//
	$('.overlay-contents', overlaydialog)
		.empty()
		.append("<div id='placeholderdiv'>&nbsp;</div>")
		.load(strUrl, null, overlayContentLoadComplete);

	//
	// we open overlay now, otherwise there might be a delay while the AJAX content loads.
	//				
	openOverlay(overlaydialog, null, linktitle);

}


function overlayContentLoadComplete(responseText, textStatus, XMLHttpRequest) {
	//
	// callback function that runs when the AJAX content is done loading
	//
	var overlaydialog = $(".overlay-dialog:visible");
	$("#placeholderdiv", overlaydialog).remove();		// get rid of placeholder

	setOverlayWidth(overlaydialog);						// extract the width from the div
	setOverlayTitle(overlaydialog);						// extract title from content
	positionOverlay(overlaydialog);

		//
		// this runs if there is still content to load (images, etc) in the overlay
		// it makes sure that after all the images load, the scrollbar is set up correctly
		//	
	$(".overlay-contents", overlaydialog).load(function(){ positionOverlay($(".overlay-dialog:visible")); });
	setTimeout('positionOverlay($(".overlay-dialog:visible"));', 1000);
	
}

var overlayCloseButtonLabel = "Close";

function initializeOverlayObject(bhasscroll)
{
	//
	// this sets up one of the two top-level overlay dialog holders.  This is a structure
	// that presents the nice rounded border, keeps the dialog on top of everything, and
	// allows content to be added.
	//
	var overlaydialog;
	var contentelem;

	if (bhasscroll)
	{
		overlaydialog = $("<div id='overlaydialog' class='overlay-dialog'><div class='overlay-holder orange-bar'><div class='scroll-pane'><div class='overlay-contents'></div></div></div></div>");
		contentelem = $(".scroll-pane", overlaydialog);
	}
	else
	{
		overlaydialog = $("<div id='overlaydialognoscroll' class='overlay-dialog' noscroll='true'><div class='overlay-holder orange-bar'><div class='overlay-contents'></div></div></div>");
		contentelem = $(".overlay-contents", overlaydialog);
	}


	contentelem.before("<div class='overlay-t'></div>"+
				"<div class='overlay-head-wrapper'>"+
					"<div class='overlay-head-outer'><div class='overlay-closebutton'>[ <a href='#' class='overlay-closelink'>"+overlayCloseButtonLabel+"</a> ]</div>"+
						"<div class='overlay-head-inner'></div></div>"+
					"<div class='overlay-printheader'>"+
						"<div class='overlay-printbutton-holder'>"+
							"<a href='#' class='overlay-print-button'>"+
								"<img src='/images/icon-print.gif' width='15' height='15' border='0' alt='' />"+
							"</a>"+
						"</div>"+
					"</div>"+
				"</div>"
				);

	contentelem.parent().after("<div class='overlay-b'><div></div></div>");

	$(".overlay-closelink:first", overlaydialog).click(closeOverlays);
	$(".overlay-print-button", overlaydialog).click(function(){
		//alert("printing:"+$(".overlay-contents", $(this).parents(".overlay-dialog:first")).html());
		$.jPrintArea($(".overlay-contents", $(this).parents(".overlay-dialog:first")));
	});


	overlaydialog.appendTo("body");

	if (browser.isIE7not)
	{

	}

	//
	// get the overlay default width from the css settings and store it in an attribute
	// (since when we need to size differently, we will need to reset later)
	//
	overlaydialog.attr("overlayWidthDefault", overlaydialog.css("width"));
}


var overlayOpenCallback = null;
var overlayCloseCallback = null;

function initializeOverlayCallbacks(openCallback, closeCallback)
{
	//
	// this is a dumb architecture, but necessary to integrate this new overlay architecture
	// into the pages that exist.   these callbacks are utilized when dialogs are opened or closed.
	//
	overlayOpenCallback = openCallback;
	overlayCloseCallback = closeCallback;
}

var overlayDifferenceOuterInnerWidth = 24;
var overlayDifferenceOuterInnerHeight = 42+17+20+24;  // header+printarea+margin+bottom

function setOverlayWidth(overlaydialog)
{
	var overlaycontents = overlaydialog.find('.overlay-contents');
	var overlaycontentnode = overlaycontents.find("[overlayContentWidth]");
	if (overlaycontentnode.attr("overlayContentWidth"))
	{
		overlaydialog.css("width", parseInt(overlaycontentnode.attr("overlayContentWidth"))+overlayDifferenceOuterInnerWidth);		
	}
	overlaycontents.width(overlaydialog.width()-overlayDifferenceOuterInnerWidth);
	
	//
	// also check for noprint class here
	//
	if (overlaycontentnode.attr('noprint')!=undefined)
	{
		$('.overlay-printheader', overlaydialog).hide();
//		$('.overlay-head-outer', overlaydialog).css("margin-bottom", "20px");
	}
	else
	{
		$('.overlay-printheader', overlaydialog).show();
//		$('.overlay-head-outer', overlaydialog).css("margin-bottom", "0px");
	}
}

function openOverlay(overlaydialog, overlaycontentnode, linktitle)
{
	//
	// open an overlay.  first we open the shadow.
	//
	positionShadow();
	$("#overlay-shadow").show();

	setOverlayWidth(overlaydialog);

	//
	// we set a fixed width for the contents, so they don't get shifted around when the scrollbar appears and disappears.
	//	

	overlaydialog.show();
	
	setOverlayTitle(overlaydialog, linktitle);

	$(".jScrollPaneContainer", overlaydialog).height("100px");
	//$(".overlay-head-inner", overlaydialog).append($(".overlay-contents", overlaydialog).width());
	//$(".overlay-head-inner", overlaydialog).append("(init:"+$(".overlay-contents", overlaydialog).height()+")");

	var scrollpane = $(".scroll-pane", overlaydialog);
	scrollpane.jScrollPane({showArrows:true,scrollbarMargin:0});

	//
	// reset scrollpane
	//
	if (scrollpane.length>0 && scrollpane[0].scrollTo)
		scrollpane[0].scrollTo(0);

	positionOverlay(overlaydialog);
//	if (browser && browser.isIE)
//		positionOverlay(overlaydialog);
		
	
	
	//
	// attach handlers that keep overlay sized and centered
	//
	$(window).bind("scroll", overlayHandleScroll);
	$(window).bind("resize", overlayHandleResize);

	if (overlayOpenCallback)
		overlayOpenCallback();


}


function positionOverlay(overlaydialog)
{
	var wnd = $(window);

	var overlaycontents = $(".overlay-contents", overlaydialog);
	
	if (overlaydialog.attr('noscroll')==undefined)
	{
		//
		// this is the height of the overlay other than the contents:
		//    4: the top margin shadow
		//    62: the height of the header area
		//    4: the height of the bottom shadow
		//    20: the height of the bottom area
		//
		var targheight = Math.max(150, Math.round(wnd.height()*0.8));	
		var contentheight = overlaycontents.height();

		$(".jScrollPaneContainer", overlaydialog).height(Math.min(contentheight, targheight-overlayDifferenceOuterInnerHeight)).width("auto");
		$(".scroll-pane", overlaydialog).jScrollPane({showArrows:true,scrollbarMargin:0});
		
	}
	
	var pLeft = Math.round((wnd.width() - overlaydialog.width()) / 2 + wnd.scrollLeft());
	var pTop = Math.round((wnd.height() - overlaydialog.height()) / 2 + wnd.scrollTop());
	
	//if (pTop<wnd.scrollTop())		// this keeps the top of the overlay onscreen but it causes some flashing.  do we care? 
	//	pTop = wnd.scrollTop();

	overlaydialog.css({top: pTop, left: pLeft});

}


function setOverlayTitle(overlaydialog, linktitle)
{
	//
	// this grabs the title from inside the content (where it is by default hidden), and clones it
	// to put in the 
	//
	var overlayheadinner = overlaydialog.find(".overlay-head-inner").empty();
	
	
	//
	// we try link title
	//
	if (linktitle)
	{
		overlayheadinner.append(linktitle);
		return;
	}


	//
	// we try content node's overlaytitle attr
	//
	var overlaycontents = overlaydialog.find(".overlay-contents");

	var overlaycontentnode = overlaycontents.find("[overlayTitle]");

	if (overlaycontentnode.attr("overlayTitle"))
	{
		overlayheadinner.append(overlaycontentnode.attr("overlayTitle"));
		return;
	}
	
	//
	// next we try overlay-head divs in contents
	//
	var header = overlaycontents.find(".overlay-head");
	if (header.length>0)
	{
		overlayheadinner.append(header.clone());
		return;
	}
	
	
}

function closeOverlays()
{
	var opendialogs = $(".overlay-dialog:visible");
	
	opendialogs.hide();
	$(".overlay-contents", opendialogs.filter("[keepoverlaycontent]")).children().hide().appendTo("body");
	
	opendialogs.removeAttr("keepoverlaycontent");

	opendialogs.each(function() { 
		var thisobj = $(this);
		//alert("setting "+this.id+" width to "+thisobj.attr("overlayWidthDefault"));
		thisobj.css("width", parseInt(thisobj.attr("overlayWidthDefault")));
	});
	
	$("#overlay-shadow:visible").hide();
	$(window).unbind("scroll", overlayHandleScroll);
	$(window).unbind("resize", overlayHandleResize);
	if (overlayCloseCallback)
		overlayCloseCallback();
}


function positionShadow()
{
	var doc = $(document);
	$("#overlay-shadow").width(doc.width()).height(doc.height());
}


function overlayHandleScroll()
{
	positionOverlay($(".overlay-dialog:visible"));
}
function overlayHandleResize()
{
	positionOverlay($(".overlay-dialog:visible"));
	positionShadow();
}