// Pixelsilk Modal
// version 1.0.3
// Last update: 05/09/2011
// Last Modification: Add Open / Close modal callback functions - DMC.

jQuery.fn.pixelsilkModal = function(options) {

    var defaults = {
        loadMethod:                'onclick', // onclick|onload
        modalContainerClass:    'boxModal', // The modal container class.
        modalWrapperClass:        'boxModalContentOuter', // The modal wrapper class.
        closeButtonClass:        'close', // The css class of the close button.
        contentType:            'ajax', // ajax|iframe|html(passed from options)|image
        contentSource:            '', // URL: force the content source.
        iframeScrollX:            true, // true|false - 'overflow-x-auto'
        iframeScrollY:            true, // true|false - 'overflow-y-auto'
        showCloseButton:        true, // true|false - display the close button?
        keepInView:                true, // true|false - keep the modal in view even if the browser window is scrolled?
        closeOnBGClick:            true, // true|false - close the modal if the background of the site is clicked?
        closeOnEscapeKey:        true, // true|false - close the modal on escape key press?
        modalWidth:                500, // Default width of the modal.
        modalHeight:            500, // Default height of the modal.
        content:                    '<p>Pixelsilk Modal</p>', // The default content for the modal if none is found or passed to the plugin.
        fadeInSpeed:            500, // Fade in speed.
        fadeOutSpeed:            500, // Fade out speed.
        closeButtonHTML:        'X', // The default close button HTML content.
        offsetTop:                100, // Amount, in pixels, to offset from the top of the window.
        bodyOverlayOpacity:        0.45, // Overall Modal BG transparency.
        modalBorderOpacity:        0.45,    // "border" around Modal BG transparency.
        modalBorder:            '10px',        // In pixels. This can also be done in CSS but the option is here as well.
        callBackOnOpen:            null, // Callback function upon open of modal.
        callbackOnClose:        null // Callback function upon close of modal.
    };
    
    var options =    $.extend(defaults, options);
    
    return this.each(function() {
        var anchor = $(this).attr('href');
        
        function showModal() {
            
            // Open Callback function:
            fnCallBackOnOpen();
            
            // Create the modal HTML:
            if ( !$("div."+options.modalContainerClass).length ) {
                $('body').append('<div class="'+options.modalContainerClass+'"><div class="'+options.modalWrapperClass+'"><div    class="marginFix"></div><div    class="modalContent"></div><div    class="modalContentBG"></div><div    class="marginFix"></div></div><div    class="boxModalBG"></div></div>');
            }
            
            var mainModal = $('.'+options.modalWrapperClass);
            var modal = $('.'+options.modalContainerClass);
            var modalBG = $('.boxModalBG');
            var modalContentBG = $('.modalContentBG');
            
            modalBG.css({'opacity':options.bodyOverlayOpacity});
            modalContentBG.css({'opacity':options.modalBorderOpacity});
            
            mainModal
                .hide()
                .css({'margin-top':Number(options.offsetTop+$(window).scrollTop())});
            
            modal.hide();
            modal.css({'height':'100%'});
            
            var contentArea = modal.find('.modalContent');
            
            if (options.contentType == 'iframe') {
                // create iFrame with link's href as src:
                contentArea.html('<iframe src="'+anchor+'" frameborder="0" width="100%" height="100%" scrolling="auto"></iframe>');
                if (options.contentSource != '') {
                    contentArea.find('iframe').attr('src', options.contentSource);
                } else
                    contentArea.find('iframe').attr('src', anchor);
            } else if (options.contentType == 'html') {
                // stuff the 'content' into the content area:
                contentArea.html(options.content);
            } else if (options.contentType == 'ajax') {
                // do sweet ajax:
                if (options.contentSource != '') {
                    contentArea.load(options.contentSource);
                } else {
                    contentArea.load(anchor);
                }
            } else if (options.contentType == 'image') {
                contentArea.append('<img src="'+anchor+'" />', function() {
                    
                });
            }
            
            if (options.contentType == 'iframe' && options.iframeScrollX) {
                contentArea.find('iframe').css({'overflow-x':'auto'});
            } else if (options.contentType == 'iframe' && !options.iframeScrollX){
                contentArea.find('iframe').css({'overflow-x':'hidden'});
            }
            
            if (options.contentType == 'iframe' && options.iframeScrollY) {
                contentArea.find('iframe').css({'overflow-y':'auto'});
            } else if (options.contentType == 'iframe' && !options.iframeScrollY){
                contentArea.find('iframe').css({'overflow-y':'hidden'});
            }
            
            if (options.showCloseButton) {
                mainModal.append('<div class="'+options.closeButtonClass+'" style="display:none;">'+options.closeButtonHTML+'</div>');
            }
            
            // Apply styles to the modal:
            if (options.modalBorder != '') {
                contentArea.css({'margin':options.modalBorder});
            }
            
            // resize modal:
            mainModal.animate({'width':options.modalWidth});
            if (options.modalHeight != '') {
                mainModal.animate({'height':options.modalHeight});
            }
            
            // resize modal inside content area:
            // top and bottom padding:
            var cPaddingY = Number(contentArea.css('padding-top').replace('px',''));
            cPaddingY += Number(contentArea.css('padding-top').replace('px',''));
            // top and bottom margin:
            var cMarginY = Number(contentArea.css('margin-top').replace('px',''));
            cMarginY += Number(contentArea.css('margin-bottom').replace('px',''));
            
            // fix the 'marginFix' for chrome:
            var marginFix = $('.marginFix');
            var fixedMargins;
            if (marginFix.size() >0 ){
                fixedMargins = marginFix.size()+marginFix.height();
                //alert(fixedMargins);
            }
            
            // Apply the final height to the contentArea:
            contentArea.height(Number(options.modalHeight-cPaddingY-cMarginY-fixedMargins));
            
            // start the animating:
            modal.fadeIn(options.fadeInSpeed, function() {
                mainModal.fadeIn(options.fadeInSpeed, function() {
                    mainModal.find('.'+options.closeButtonClass).fadeIn();
                });
            });
            
            if (options.closeOnBGClick) {
                $(modalBG).click(function() {
                    removeModal(options.fadeOutSpeed);
                });
            }
            $('.'+options.closeButtonClass).click(function() {
                removeModal(options.fadeOutSpeed);
            });
            if (options.closeOnEscapeKey) {
                $(window).keyup(function(e) {
                    if (e.keyCode == 27) {
                        removeModal(75);
                    }
                });
            }
            
            if (options.keepInView) {
                $(window).scroll(function() {
                    mainModal.css({'margin-top':Number(options.offsetTop+$(window).scrollTop())});
                });
            }
            
            function removeModal(speed) {
                
                var fadeOutSpeed;
                if (!speed || speed == null || speed == undefined || speed == '') {
                    fadeOutSpeed = 50;
                } else {
                    fadeOutSpeed = speed;
                }
                
                mainModal.fadeOut(fadeOutSpeed, function() {
                    modal.fadeOut(fadeOutSpeed, function() {
                        modal.remove(); // Remove Modal.
                        fnCallBackOnClose(); // Close Callback fucntion.
                    });
                });
                
                return false;
            }
            
        }
        
        if (options.loadMethod == 'onclick') {
            $(this).click(function() {
                showModal();
                return false;
            });
        } else if (options.loadMethod == 'onload') {
            showModal();
        }
        
        // Callback function: run on Modal Open:
        function fnCallBackOnOpen() {
            if (options.callBackOnOpen) {
                eval(options.callBackOnOpen);
            }
        }
        
        // Callback function: run on Modal Close:
        function fnCallBackOnClose() {
            if (options.callbackOnClose) {
                eval(options.callbackOnClose);
            }
        }
        
    });
};