var $overlay_wrapper;
var $overlay_panel;
var scriptSourceURLBase='';

$(function() {
    $overlay_wrapper = $('<div id="overlay"></div>').appendTo( $('body') );
    $overlay_panel = $('<div id="overlay-panel"></div>').appendTo( $overlay_wrapper );
	
	$("#overlay").click(function(e) {
	  if (e.target.id == "overlay" || e.target.id == "overlay-panel") hide_overlay();
	});
	
	var scriptSourceURL="";
	$('script').each(function() {
	  var scriptSrc=$(this).attr('src');
	  if (scriptSrc && scriptSrc.indexOf('/overlay.js') != -1) scriptSourceURL=scriptSrc;
	});
	
	scriptSourceURLBase = scriptSourceURL.replace(/overlay\.js/,'');
});

function show_overlay(url, type) {
  if (type == "image") show_overlay_image(url);
  else show_overlay_page(url);
}

function show_overlay_page(url) {
  $overlay_wrapper.fadeIn(500);
  
  $overlay_panel.html( '<div style="background-color:#ffffff;border:15px solid #cccccc;width:150px;height:50px;margin:0px auto 0px auto;padding:30px 0px 0px 0px;"><img src="' + scriptSourceURLBase + 'ajax-loader-indicator.gif" border="0" align="absmiddle" /> Loading...</div>' );
  
  var topMargin = Math.round(($(window).height() - $overlay_panel.innerHeight())/2);
  $overlay_panel.css("margin", topMargin + "px auto 0px auto");
  
  $overlay_panel.load(url, function(){
	var tMargin = Math.round(($(window).height() - $(this).innerHeight())/2);
    $(this).css("margin", tMargin + "px auto 0px auto");
  });
  
}

function show_overlay_image(imgURL) {
	//$overlay_wrapper.show();
    $overlay_wrapper.fadeIn(500);

	var imgExist=false;
	$('img').each(function() {	
	  if ($(this).attr('src') == imgURL) imgExist=true;
	});
		
	if (imgExist) {
	  var imgObj = $('<img />')
	  .attr('id', 'overlay-image')
      .attr('src', imgURL);
	  
	  displayImage(imgObj);
	} else {
	  $overlay_panel.html( '<div style="width:300px;height:200px;margin: 0px auto 0px auto;text-align:center;padding:0px 0px;border:15px solid #ffffff;background-color:#cccccc;"><div style="text-align:right"><a href="javascript:hide_overlay();"><img src="' + scriptSourceURLBase + 'btnCloseWindow.png" style="border-width:0px;margin:-30px -30px 0px 0px;"></a></div><div style="text-align:center;padding:70px 0px;"><img src="' + scriptSourceURLBase + 'ajax-loader-indicator.gif" border="0" align="absmiddle"> Loading...</div></div>' );
	  
	  $('<img />')
	  .attr('id', 'overlay-image')
      .attr('src', imgURL)
      .load(function () {displayImage($(this));});
	}
	
	function displayImage(imgObj) {
	  $overlay_panel.html('');
      $overlay_panel.append( imgObj );
	  $overlay_panel.append( '<a href="javascript:hide_overlay();"><img src="' + scriptSourceURLBase + 'btnCloseWindow.png" align="top" style="margin:-15px 0px 0px -15px;border-width:0px;"></a><br /><a href="' + imgURL + '" target="_blank" style="color:#ffffff;">View full size in another window</a>' );

	  var topMargin = Math.round(($(window).height() - $overlay_panel.innerHeight())/2);
	  $overlay_panel.css("margin", topMargin + "px auto 0px auto");
	}
}

function hide_overlay() {
	$overlay_panel.html('');
    $overlay_wrapper.fadeOut(500);
}