var $overlay_wrapper;
var $overlay_panel;

function show_overlay() {
    if ( !$overlay_wrapper ) append_overlay();
    $overlay_wrapper.fadeIn(700);
    
}


function animated_show_overlay(playSlideShow) {
    //if ( !$overlay_wrapper ) append_overlay();
    
    //$overlay_panel.hide();
    $overlay_wrapper.fadeIn(700);
    
    
	var w = 0;
	var h = 0;
	//IE
	if(!window.innerWidth)
	{
		//strict mode
		if(!(document.documentElement.clientWidth == 0))
		{
			w = document.documentElement.clientWidth;
			h = document.documentElement.clientHeight;
		}
		//quirks mode
		else
		{
			w = document.body.clientWidth;
			h = document.body.clientHeight;
		}
	}
	//w3c
	else
	{
		w = window.innerWidth;
		h = window.innerHeight;
	}

		
	//get viewport's width and height
	
	
	
	var vpWidth=w;
	var vpHeight=h;
	
	var vpLeftCentre_px = vpWidth/2+"px";
	var vpTopCentre_px = vpHeight/2+"px";
	
	
	
	

	//alert('vpWidth='+vpWidth+' vpHeight='+vpHeight);
	//alert('vpWidth/='+(vpWidth/2)+' vpHeight/2='+(vpHeight/2));
	
	//get dialog's width and height
	/*
	dialogWidth=div_gallery.offsetWidth;
	dialogHeight=div_gallery.offsetHeight;
	*/
	//var dialogWidth=parseInt(div_gallery.style.width);
	//var dialogHeight=parseInt(div_gallery.style.height);

	//alert('dialogWidth='+dialogWidth+' dialogHeight='+dialogHeight);
	
	//alert('dialogWidth/2='+(dialogWidth/2)+' dialogHeight/2='+(dialogHeight/2));
	
	//calculate position
	var dialogTop = (vpHeight/2) - (maxGalleryHeight/2);
	var dialogLeft = (vpWidth/2) - (maxGalleryWidth/2);

	
	// Adjust the postion to ensure the display of the "Close" button
	if(dialogTop < 0){
		dialogTop = 0; // Adjust to the top of the screen. lower the div 
	}
	if(dialogLeft < 0){
		dialogLeft = dialogLeft * 2; // MOve futher to left to show the most right portion of the div
	}	
	
	var dialogTop_px =dialogTop+"px";
	var dialogLeft_px =dialogLeft+"px";

	
	
	
	//a = div_gallery.style.display="block";

	
	
	//div_gallery.style.display = "block";
	
	//var div_loading = document.getElementById("loading");
	//div_loading.style.display = "block";
	
	//alert('4:'+vpTopCentre_px);
	
	gallery.pause();
	
	
	   
	      //stick the footer at the bottom of the page if we're on an iPad/iPhone due to viewport/page bugs in mobile webkit
	      if(navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform == 'iPod')
	      {
	           //$("#footer").css("position", "static");
	    	  $overlay_panel.css({'position': 'static'});
	      };

	  
	
	if(playSlideShow){
		// Use a callback function to chain up the slid show after the openning animation
		$overlay_panel.css({'width' : '1px','height' : '1px','top': vpTopCentre_px, 'left':vpLeftCentre_px} )
		.animate({left: vpLeftCentre_px, top: vpTopCentre_px, height: "1", width: "1", opacity: 0.0}, 10)	
		.animate({left: vpLeftCentre_px, top: vpTopCentre_px, height: "1", width: "1",  opacity: "show"}, "fast")
		.animate({opacity: "1.0", left: dialogLeft_px, top: vpTopCentre_px,  height: "1", width: maxGalleryWidth}, 600)		
		.animate({opacity: "1.0", left: dialogLeft_px, top: dialogTop_px, height: maxGalleryHeight, width: maxGalleryWidth}, "slow", function(){
			
			//gallery.gotoIndex(0, false, true);
			gallery.play();
		});
	    
	}
	else{
		$overlay_panel.css({'width' : '1px','height' : '1px','top': vpTopCentre_px, 'left':vpLeftCentre_px} )
		.animate({left: vpLeftCentre_px, top: vpTopCentre_px, height: "1", width: "1", opacity: 0.0}, 10)	
		.animate({left: vpLeftCentre_px, top: vpTopCentre_px, height: "1", width: "1",  opacity: "show"}, "fast")
		.animate({opacity: "1.0", left: dialogLeft_px, top: vpTopCentre_px,  height: "1", width: maxGalleryWidth}, 600)		
		.animate({opacity: "1.0", left: dialogLeft_px, top: dialogTop_px, height: maxGalleryHeight, width: maxGalleryWidth}, "slow");
	 	
	}	

    
    
}




function hide_overlay() {
   // $overlay_wrapper.fadeOut(300);
	$overlay_wrapper.animate({opacity: 0.5}, 300)
	.animate({opacity: 0.0}, 300);
	
	
}


function animated_hide_overlay() {
	
	var w = 0;
	var h = 0;
	//IE
	if(!window.innerWidth)
	{
	//strict mode
	if(!(document.documentElement.clientWidth == 0))
	{
	w = document.documentElement.clientWidth;
	h = document.documentElement.clientHeight;
	}
	//quirks mode
	else
	{
	w = document.body.clientWidth;
	h = document.body.clientHeight;
	}
	}
	//w3c
	else
	{
	w = window.innerWidth;
	h = window.innerHeight;
	}

	
	
	
	//get viewport's width and height
	//vpWidth=self.innerWidth;
	//vpHeight=self.innerHeight;
	
	
	var vpWidth=w;
	var vpHeight=h;
	
	var vpLeftCentre_px = vpWidth/2+"px";
	var vpTopCentre_px = vpHeight/2+"px";

	//calculate position
	var dialogTop = (vpHeight/2) - (maxGalleryHeight/2);
	var dialogLeft = (vpWidth/2) - (maxGalleryWidth/2);

	var dialogTop_px =dialogTop+"px";
	var dialogLeft_px =dialogLeft+"px";
	
	
	
	//$overlay_panel.fadeOut(1500);

	
	
	$overlay_panel.animate({left: dialogLeft_px, top: vpTopCentre_px,  height: "1", width: maxGalleryWidth}, "slow")
		.animate({left: vpLeftCentre_px, top: vpTopCentre_px,  width: "1", opacity: "hide"}, 600, function(){ 
			gallery.gotoIndex(0, false, true);
			$overlay_wrapper.fadeOut(300);
			
			 });	

    	                     

	//alert('Any effect?');
	
	
}



function append_overlay() {
    $overlay_wrapper = $('<div id="overlay"></div>').appendTo( $('BODY') );
    $overlay_panel = $('<div id="overlay-panel"></div>').appendTo( $overlay_wrapper );

    $overlay_panel.html( '<p>This is the overlay content</p><a href="#" class="hide-overlay">Close Overlay</a>' );

    attach_overlay_events();
}

function attach_overlay_events() {
    $('A.hide-overlay', $overlay_wrapper).click( function(ev) {
        ev.preventDefault();
        alert('I am in attch events!');
        hide_overlay();
    });
}


function isIE6(){
	if ( $.browser.msie && $.browser.version.substr(0,3)=="6.0") {
		return true;
	}
	else
		return false;
}

$(function() {
    $('A.show-overlay').click( function(ev) {
        ev.preventDefault();
        alert('I am clicked!');
        show_overlay();
    });
});