/**
@Version: 1.2
@Author: Hideo Kubota
@Contact: contact@hideokubota.com
@Description: This plugin will display an empty modal popup. Then, you have to specify the content you want to display. The modal popup will be at the center of the screen.

---------------------
What's new in this version?
Nothing because this is the first version.
But if there's a new one, all added features will be noted here.

---------------------
How to use this plugin?
To use this plugin, you have to:
	- Add the JQuery library in your page,
	- Add the "plugin.easyPopup.js" in your page,
	- Add your javascript file which call the plugin function,
	- Add the "popup" directory, which contains all needed images for the plugin, in your "images" directory,
	- Add the "popup.css" in your "css" directory,
	- Add the "popup_ie6.css" in your "css" directory.

---------------------
Example:
<script type="text/javascript" src="/js/jquery.latest.js" />
<script type="text/javascript" src="/js/plugin.easyPopup.js" />
<script type="text/javascript" src="/js/yourScript.js" />
<link rel="stylesheet" type="text/css" href="/css/popup.css" media="screen" />
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="css/popup_ie6.css" media="screen" /><![endif]-->

In "yourScript":
$('div.content ul li a').click(function(e){
	e.preventDefault();
	var sAjaxPageUrl = $(this).attr('rel');
	var sTitle = $(this).html();
	
	$(this).easyPopup({ajaxPageUrl:sAjaxPageUrl, popupTitle:sTitle});
});

---------------------
Options:
	- containerId [string]: Set it with the ID of your container which contains your content, which is present in the DOM. By default, it is empty.
	- ajaxPageUrl [string]: Set it with the url of the external page which contains what you want to display. By default, it is empty.
	- isImage [boolean]: If the ajaxPageUrl is an image, set this param to true. By default, it is false.
	- popupBgColor [string]: Set the color of the overlay. By default, it is "#000000".
	- popupOpacity [float]: Set the percentage of opacity of the overlay. By default, it is 0.7 (= 70% of opacity).
	- popupTitle [string]: Set the title of the modal popup. By default, it is empty.
	- popupWidth [int]: Set the width of the modal popup. By default, it will be calculated automatically.
	- popupHeight [int]: Set the height of the modal popup. By default, it will be calculated automatically.
	- displayOuterCloseButton [boolean]: Display the close button at the top-right of the modal popup if true, otherwise, it will not be displayed.
	- displayInnerCloseButton [boolean]: Display the close button inside the modal popup if true, otherwise, it will not be displayed.
	- displayCloseLabel [boolean]: Display the close button at the bottom of your content if true, otherwise, it will not be displayed.
	- sHtml [string]: Display your html code after the loaded content. By default, it is embty. 
	- closeLabel [string]: Set the label of the close button which will be displayed at the bottom of your content. By default, it is "Close". This label is also used for the alternative of the close button.
	- callFunction [string] : Execute the provided function. By default, it is empty.
	- addClass [string] : Add a class to the popup container. This can be usefull if you have severals modalPopup in the same page with different skins. By default, it is empty.

---------------------
Note:
	- To work, you have to specify either "containerId" or "ajaxPageUrl" or "sHtml". Otherwise, you will have a warning message in your modalPopup
	- If you specify both "containerId" and "ajaxPageUrl", the content of "containerId" will be displayed
	- If you have some suggestions to make it better, please send me an email and I'll try to add more options.

**/

(function($) {
// EasyPlugin definition
    $.fn.easyPopup = function(options) {
       
        // Default parameters
		var defaults = {
			containerId				: "",
			ajaxPageUrl				: "",
			callFunction			: "",
			isImage					: false,
			popupBgColor			: "#000000",
			popupOpacity			: 0.7,
			popupTitle				: "",
			popupWidth				: 660,
			popupHeight				: 490,
			displayOuterCloseButton	: true,
			displayInnerCloseButton	: false,
			displayCloseLabel		: false,
			sHtml					: "",
			closeLabel				: "Close",
			addClass				: ""
		};   
        // Mix of given parameters and default parameters
        var opts = $.extend(defaults, options); 

        // getDatas
		function getDatas(){
            
			if (opts.containerId)
				jQuery('div.popupInner').html($('#'+opts.containerId).html());
			else
			{				
				if (opts.ajaxPageUrl)
				{
					if (opts.isImage)
						jQuery('div.popupInner').html('<img src="' + opts.ajaxPageUrl + '" alt="" title="" class="media" />');
					else
					{
						//jQuery('div.popupInner').load(opts.ajaxPageUrl);
						$.ajax({
							url: opts.ajaxPageUrl,
							context: document.body,
							success: function(data){
								jQuery('div.popupInner').append(data);
								if (opts.callFunction)
									eval(opts.callFunction);
							}
						});
					}
				}
				else
				{
					if (!opts.sHtml)
						jQuery('div.popupInner').html("<p>You have forgotten to specify either \"containerId\" or \"ajaxPageUrl\" or \"sHtml\"</p>");
				}
			}
				
		}
		
		// HTML of the popup
		function createPopup(){
			var sHtmlPopup = "";
			var sPopupClass = (opts.displayOuterCloseButton) ? 'popupContainer close ' : 'popupContainer ';
			var sPopupClose = (opts.displayOuterCloseButton) ? '<a href="#" class="popupClose" title="'+opts.closeLabel+'">&nbsp;</a>' : '&nbsp;';

			sHtmlPopup += '<div class="popupOverlay"></div><div class="' + sPopupClass + opts.addClass + '">';
			sHtmlPopup += '<table summary=""><tr><td class="topleft">&nbsp;</td><td class="top">&nbsp;</td><td class="topright">'+sPopupClose+'</td></tr>';
			sHtmlPopup += '<tr><td class="left">&nbsp;</td><td class="popupContent">';
			sHtmlPopup += '<div class="head">';
			if (opts.popupTitle)
				sHtmlPopup += '<h1>'+opts.popupTitle+'</h1>';
			if (opts.displayInnerCloseButton)
				sHtmlPopup += '<a href="#" class="popupClose" alt="'+opts.closeLabel+'">&nbsp;</a>';
			sHtmlPopup += '<span class="clear">&nbsp;</span></div>';
			sHtmlPopup += '<div class="popupInner"></div><span class="clear">&nbsp;</span>';
			if (opts.sHtml)
				sHtmlPopup += opts.sHtml;
			if (opts.displayCloseLabel)
				sHtmlPopup += '<div class="closeLabel"><a href="#" class="popupClose"><span><span>'+opts.closeLabel+'</span></span></a><span class="clear">&nbsp;</span></div>';
			sHtmlPopup += '</td><td class="right">&nbsp;</td></tr>';
			sHtmlPopup += '<tr><td class="bottomleft">&nbsp;</td><td class="bottom">&nbsp;</td><td class="bottomright">&nbsp;</td></tr><table></div>';

			return sHtmlPopup;
		}
		
		function loadPopup(){
			
			sHtmlPopup = createPopup();
			$('body').append( sHtmlPopup );
			initializePosition();
			hideElements();
			getDatas();
			//alert($('.popupContainer').innerWidth());
		
			// Close popup
			$('a.popupClose').click(function(e) {
				e.preventDefault();
				close();
			});
			
			//$('div.popupOverlay').click(function() {
			//	close();
			//});
			
			$(document).keypress(function(e){
				if (e.keyCode == 27 ) close();
			});
		}
		
		function hideElements()
		{
			$('table#tableContent iframe').hide();
			$('object').hide();
			$('embed').hide();
			$('select').hide();
			
			$('div.popupContainer object').show();
			$('div.popupContainer embed').show();
			$('div.popupContainer select').show();
		}
		
		function showElements()
		{
			$('table#tableContent iframe').show();
			$('object').show();
			$('embed').show();
			$('select').show();
		}
		
		function initializePosition()
		{
			var sWidth = document.documentElement.clientWidth;
			var sHeight = document.documentElement.clientHeight;
			var scrollX = 0;
			var scrollY = 0;
			
			if( typeof( window.pageYOffset ) == 'number' ) {
				//Netscape compliant
				scrollY = window.pageYOffset;
				scrollX = window.pageXOffset;
			} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
				//DOM compliant
				scrollY = document.body.scrollTop;
				scrollX = document.body.scrollLeft;
			} else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
				//IE6 standards compliant mode
				scrollY = document.documentElement.scrollTop;
				scrollX = document.documentElement.scrollLeft;
			}
			
			var halfWidth=((sWidth-opts.popupWidth)/2) + scrollX; 
			var halfHeight=((sHeight-opts.popupHeight)/2) +scrollY;
			
			halfHeight = ( halfHeight < 0 ) ? halfHeight + 50 : halfHeight;
			halfWidth = ( halfWidth < 0 ) ? halfWidth + 50 : halfWidth;
			
			$('.popupOverlay').css({
				backgroundColor	: opts.popupBgColor,
				opacity			: opts.popupOpacity,
				width			: sWidth + scrollX,
				height			: sHeight + scrollY
			}).fadeIn();
			
			$('.popupContainer').css({
				top:	halfHeight + "px",
				left:	halfWidth + "px",
				width:	opts.popupWidth
			}).fadeIn();
			
			$(window).resize(function(){
				if ($(".popupContainer").length > 0){
					positionningPopup();
				}
			});
			$(window).scroll(function() {
				if ($(".popupContainer").length > 0){
					positionningPopup();
				}
			});
		}
		
		function positionningPopup() {
			var sWidth = document.documentElement.clientWidth;
			var sHeight = document.documentElement.clientHeight;
			var scrollX = document.documentElement.scrollLeft;
			var scrollY = document.documentElement.scrollTop;
			
			var halfWidth=((sWidth-opts.popupWidth)/2) + scrollX; 
			var halfHeight=((sHeight-opts.popupHeight)/2) + scrollY;
			
			halfHeight = ( halfHeight < 0 ) ? halfHeight + 50 : halfHeight;
			halfWidth = ( halfWidth < 0 ) ? halfWidth + 50 : halfWidth;

			$('.popupContainer').css({
				//top:	halfHeight + "px",
				left:	halfWidth + "px"
			});

			
			$('.popupOverlay').css({
				width:	sWidth + scrollX,
				height:	sHeight + scrollY
			});
			
		}

		function close(){

			$("div.popupOverlay").fadeOut(500, function(){ $("div.popupOverlay").remove();});
			$("div.popupContainer").fadeOut(500, function(){ $("div.popupContainer").remove();});
			showElements();
		}
           
        loadPopup();

        // interface fluide
        return $(this);
    };
	
	$.fn.easyPopup.close = function(){

		$("div.popupOverlay").fadeOut(500, function(){ $("div.popupOverlay").remove();});
		$("div.popupContainer").fadeOut(500, function(){ $("div.popupContainer").remove();});
		showElements();
	};
		
})(jQuery);