/*
*
* --- Usage -----------------------------------------------------------------------------------------------------------------------------------
* 
* $('div#sample-div').pogoModal();
* - This will open a modal window containing the div with id "sample-div" and default settings.
* 
* $('div#sample-div').pogoModal({animate: true, border: '1px solid green', windowBackground: '#eeff55'});
* - This wiil open a modal window containing the div with id "sample-div" and cutom settings for animation, border and background.
*
*
* --- Settings --------------------------------------------------------------------------------------------------------------------------------
*
* opacity				// Opacity for the overlay (default: 70)
* overlayBackground 	// Background for the overlay (default: 'black')
* animate				// Controls the animation of the modal window (default: false)
* zIndex				// Z-index for the modal window (default: 10000)
* windowBackground		// Background color for the modal window (default: 'white')
* border				// Border for the modal window (default: '2px solid black')
* close					// Show the close button (default: true)
* closeHTML				// HTML code for the close button (default: '<a class="pogo-modal-close" title="Close"></a>')
* clone					// Disable cloning of the content of the popup (default: true)
*
*
* --- Notes ----------------------------------------------------------------------------------------------------------------------------------
*
* - The z-index of the overlay will always be the modal window's z-index minus 1.
* - The overlay has a default fadeIn/fadeOut animation.
* - For now there is no animation visible for the closing of the window when the setting is enabled, but it will show up once jQuery is updated to 1.4.4+ (it uses delay() to put a delay on the removal of the element).
*
*/

(
	function(jQuery){
		
		jQuery.pogoModal = function(data, options){
			return jQuery.pogoModal.go.init(data, options);
		};
		
		// Close
		jQuery.pogoModal.close = function () {
			jQuery.pogoModal.go.close();
		};
		
		jQuery.fn.pogoModal = function (options) {
			return jQuery.pogoModal.go.init(this, options);
		};
		
		// Defaults
		jQuery.pogoModal.defaults = {
			opacity: 70,
			overlayBackground: 'black',
			animate: false,
			zIndex: 16177281,
			windowBackground: 'white',
			border: '2px solid black',
			close: true,
			closeHTML: '<a class="pogo-modal-close" title="Close"></a>',
			clone: true,
			onShow: null
		};
		
		// Modal window creation
		jQuery.pogoModal.go = {
			// object to return on callbacks
			pogowindow: {},
			
			init: function(data, options){
				// Options merged in our settings
				this.opt = jQuery.extend({}, jQuery.pogoModal.defaults, options);
				
				if (typeof data === 'object') {
					data = data instanceof jQuery ? data : jQuery(data);
				} else if (typeof data === 'string' || typeof data === 'number') {
					data = jQuery('<div></div>').html(data);
				}
				
				var h = data.height();
				var w = data.width();
				var mtop = Math.round(h/2);
				var mleft = Math.round(w/2);
				
				// Create it
				this.create(data, mtop, mleft);
				data = null;
				
				// Open it
				this.open(h, w, mtop, mleft);
				
				// onShow function
				if (jQuery.isFunction(this.opt.onShow)) {
					this.opt.onShow.apply(this, [this.pogowindow]);
				}
				
				return this;
			},
			create: function(data, mtop, mleft){
				var windowHeight = jQuery(document).height();
				
				// create the overlay
				this.pogowindow.overlay = jQuery('<div></div>')
					.attr('id', 'pogo-modal-overlay')
					.css({
						display: 'none',
						opacity: this.opt.opacity/100,
						height: windowHeight,
						background: this.opt.overlayBackground,
						width: '100%',
						position: 'absolute',
						left: 0,
						top: 0,
						zIndex: this.opt.zIndex-1
					})
					.appendTo('body');

				// create the container
				this.pogowindow.container = jQuery('<div></div>')
					.attr('id', 'pogo-modal-container')
					.css({
						display: 'none',
						position: 'absolute',
						border: this.opt.border,
						zIndex: this.opt.zIndex,
						background: this.opt.windowBackground
					})
					.prepend(this.opt.close && this.opt.closeHTML ? jQuery(this.opt.closeHTML).addClass('pogo-modal-close') : '')
					.appendTo('body');
					
				
				// Setting the position
				this.pogowindow.container.css({
					left: '50%',
					top: (jQuery(window).scrollTop() + Math.round(jQuery(window).height()/2)), // vertically centered in the current viewport
					marginLeft: '-'+mleft+'px',
					marginTop: '-'+mtop+'px'
				});
				
				// Append the data
				if(this.opt.clone){
					this.pogowindow.data = data
					.clone()
					.attr('id', data.attr('id'))
					.css({
						display: 'none',
						width: '0px',
						height: '0px'
					})
					.appendTo(this.pogowindow.container);
				} else {
					this.pogowindow.data = data
					.attr('id', data.attr('id'))
					.css({
						display: 'none',
						width: '0px',
						height: '0px'
					})
					.appendTo(this.pogowindow.container);
				}
				data = null;
				
			},
			binds: function(){
				var win = this;
				jQuery('.pogo-modal-close').bind('click.pogo', function(e){
					e.preventDefault();
					win.close();
				});
				jQuery('#pogo-modal-overlay').bind('click.pogo', function(e){
					e.preventDefault();
					win.close();
				});
				// Bind close to escape key
				jQuery(document).bind('keydown.pogo', function(e){
					if (e.keyCode === 27){
						e.preventDefault();
						win.close();
					}
				});
			},
			unbinds: function(){
				jQuery('.pogo-modal-close').unbind('click.pogo');
				jQuery('#pogo-modal-overlay').unbind('click.pogo');
				jQuery(document).unbind('keydown.pogo');
			},
			open: function(h, w, mtop, mleft){				
				// Show elements
				this.pogowindow.overlay.fadeIn('fast');
				
				if(this.opt.animate){
					var halfMarginTop = mtop/2;
					var halfMarginLeft = mleft/2;
					this.pogowindow.container.css({height: (h*2), width: (w*2), marginTop: -(halfMarginTop), marginLeft: -(halfMarginLeft), top: '25%', left: '25%'});
					this.pogowindow.container.animate({height: h, width: w, marginTop: -mtop, marginLeft: -mleft, top: '50%', left: '50%', opacity: 1.0}, 150);
					this.pogowindow.data.css({height: h, width: w}).fadeIn('slow');
				} else {
					this.pogowindow.container.fadeIn('fast');
					this.pogowindow.data.css({height: h, width: w}).show();
				}
				jQuery('a, input').blur();
				jQuery('embed').attr('wmode', 'transparent').wrap('<div class="flash-fix" style="position:relative" />').wrap('<div class="flash-fix" style="position:absolute" />');
				
				// Binds
				this.binds();
				
			},
			close: function(){
				// Hide elements
				if(this.opt.animate){
					this.pogowindow.container.animate({height: this.pogowindow.container.height()*2, width: this.pogowindow.container.width()*2, top: '25%', left: '25%', opacity: 0}, {duration: 150, queue: true}).delay('300').remove();
					this.pogowindow.data.hide();
				} else {
					this.pogowindow.container.fadeOut('fast').remove();
					this.pogowindow.data.hide();
				}
				this.pogowindow.overlay.fadeOut('fast').remove();
				jQuery('embed').unwrap().unwrap();
				this.pogowindow = {};
				
				// Unbinds
				this.unbinds();
			}
		}
	}
)(jQuery);

