/*
 * Copyright (C) 2007 - 2011 MagicWeb.org. All rights reserved.
 *
 * @name    popup
 * @author   vativa
 * @version  1.1
 */

(function($) {

    $.popup = function(options) {
    	
		/**
		 * Default configuration properties
		 */
		var defaults = {
            
            // Content
            url: null,// AJAX call
            message: null,// alert
            buttons: null,// confirm
            textinput: null,// prompt
				
	        // Animation when appears
	        appearEffect: 'fadeIn',
	        overlaySpeed: 300,
	        containerSpeed: 100,
	        
	        // Animation when dissapears
	        disappearEffect: 'fadeOut',
	        overlayDisappearSpeed: 300,
	        containerDisappearSpeed: 100,

	        // Callbacks
	        onLoad: function() {},
	        onClose: function() {},

	        // Styles
	        zIndex: 749,
            containerCSS: {'background': 'transparent'},
	        closeBtnCSS : {},
	        overlayCSS  : {'background': 'black', 'opacity': '.6'},
            
            // Labels & other values
            closeButton: true,
	        closeText: 'Close'
		};

		/**
		 * Override defaults with options
		 */
		var opt = $.extend(defaults, options);
        
        if (opt.url) {
            
            $.ajax({
                url: opt.url,
                success: proceed
            });
            // Start loading animation - does not work
            //Mw.Util.loading(true);
            
        } else {
            
            if (opt.message) {
                
                var title = 'Alert';
                var $message = $('<div class="message">' + opt.message + '</div>');
                var $toolbar = $('<div class="toolbar"></div>');
                
                if (opt.buttons) {
                    
                    title = 'Confirm';
                    for (var key in opt.buttons) {
                        var button  = opt.buttons[key];
                        var $button = $('<input type="button" value="' + button.label + '" id="' + key + '" class="button"/>');
                        $button.click(button.onClick);
                        $toolbar.append($button);
                    }
                    if (opt.textinput) {
                        
                        title = 'Prompt';
                        var $input = $('<input type="text" name="" value=""/>');
                        $message.append($input);
                        
                    }
                    
                }
                
                // DOM elements
                var $box = $('<div class="box" style="max-width:300px"></div>');
                var $fieldset = $('<fieldset><legend>' + title + '</legend></fieldset>');
                var $paddingTop = $('<div class="padding-top"></div>');
                var $paddingBottom = $('<div class="padding-bottom"></div>');
                
                // Build DOM
                $fieldset.append($paddingTop).append($message).append($toolbar).append($paddingBottom);
                $box.append($fieldset)
                proceed($box);
            }
            
        }

		/**
		 * Return set of matched elements to maintain chainablilty
		 */
        function proceed(html)
        {
            // Disable loading animation
            //Mw.Util.loading(false);
            
            // Build popup elements
            var $html    = $(html);// If html is already jQuery object, a clone will be created
            var $cont    = $('<div id="mw_p3" class="reload-container p3" style="display:none;"></div>');
            var $close   = $('<div class="close-btn" style="display:none;">' + opt.closeText + '</div>');
            var $overlay = $('<div class="overlay" style="display:none;"></div>');
            
            // Build DOM
            $('body').append($overlay).append($cont.append($html)).append($close);
            
            // Set CSS styles (keep before positioning)
            $overlay.css({
                'position': 'fixed',
                'top': 0,
                'bottom': 0,
                'left': 0,
                'right': 0,
                'z-index': opt.zIndex + 1
            }).css(opt.overlayCSS);
            $cont.css({
                'position': 'absolute',
                'z-index': opt.zIndex + 2
            }).css(opt.containerCSS);
            $close.css({
                'position': 'absolute',
                'z-index': opt.zIndex + 3
            }).css(opt.closeBtnCSS);

            // Position elements
            positionPopup();
            
            // Animate in
            $overlay[opt.appearEffect](opt.overlaySpeed, function() {
                $cont[opt.appearEffect](opt.containerSpeed, function() {
                    opt.onLoad();
                });
                if (opt.closeButton) $close[opt.appearEffect](opt.containerSpeed)
            });

            // Bind events
            $(document).keydown(function(e) {
                if (e.keyCode == 27) removePopup();
            });
            $close.click(removePopup);
            $overlay.click(removePopup);
            $cont.resize(positionPopup);
            $cont.bind('close', removePopup);
            
            /**
             * Remove popup
             */
            function removePopup()
            {
                $cont[opt.disappearEffect](opt.containerDisappearSpeed, function() {
                    $cont.remove();
                    $close.remove();
                    $overlay[opt.disappearEffect](opt.overlayDisappearSpeed, function() {
                        $overlay.remove();
                        $overlay.unbind('click');
                        opt.onClose();
                    })
                });
            }
            
            /**
             *  Set the position of the container
            */
            function positionPopup()
            {
                var sw = $(window).width();
                var sh = $(window).height();
                var cw = $cont.width();
                var ch = $cont.height();
                var top = (sh > ch ? (sh - ch) / 2 : 0) + $(window).scrollTop();
                var left = (sw > cw ? (sw - cw) / 2 : 0) + $(window).scrollLeft();
                
                $cont.css({'top': top, 'left': left});
                $close.css({'top': top + ch + 3, 'left': left + 5});
                
            }
            
        }
        
        return false;
    };

})(jQuery);