/*  POPUPBOX.JS
*
*   Controls the opening, content and closing of the new Popup-boxes that have
*   replaced the Shadowbox.
*
*   Author: John Sundell
*
*/

//Constructor:

$(document).ready(function () {

    //Create the overlay
    $("body").append('<div id="popupbox-overlay"></div>');
    $("#popupbox-overlay").bind("click", popupbox.close);

    //Create the box
    $("body").append('<div id="popupbox"><a class="close-button" id="popupbox-close"></a></div>');

    //Store elements in popupbox namespace
    popupbox.elements.box = $("#popupbox");
    popupbox.elements.source = $("#popupbox-source");
    popupbox.elements.overlay = $("#popupbox-overlay");
    popupbox.elements.close = $("#popupbox-close");

    //Bind window resize to center the popupbox
    $(window).resize(function () {
        popupbox.center();
    });

});

//Functionality:

popupbox = {

    elements: {

        //Set by the constructor

    },

    display: function (size, source) {

        //Set box content
        this.content(source);

        //Define size
        var xSize, ySize;

        switch (size) {
            case 'extra-small':
                xSize = '380px';
                ySize = '180px';
                break;
            case 'small':
                xSize = '307px';
                ySize = '400px';
                break;
            case 'medium':
                xSize = '550px';
                ySize = '470px';
                break;
            case 'medium_ext':
                xSize = '550px';
                ySize = '560px';
                break;
            case 'large':
                xSize = '765px';
                ySize = '680px';
                break;
            case 'max':
                xSize = '900px';
                ySize = '700px';
                break;
        }

        //No fade in-animation for IE7 & 8
        if ($("body").hasClass("ie7") == false && $("body").hasClass("ie8") == false) {

            //Set size and display box, source iframe and overlay
            popupbox.elements.overlay.css({
                "opacity": "0",
                "visibility": "visible"
            });
            popupbox.elements.box.css({
                "width": xSize,
                "height": ySize,
                "opacity": "0",
                "visibility": "visible"
            });
            popupbox.elements.source.css({
                "width": xSize,
                "height": ySize
            });

            //Center the box
            popupbox.center();

            //Scroll to view the box (useful on mobile devices and small screens)
            window.scrollTo(popupbox.elements.overlay.offset().left, popupbox.elements.overlay.offset().top);

            //Animate!
            popupbox.elements.overlay.animate({
                "opacity": "0.6"
            }, 500);

            popupbox.elements.box.animate({
                "opacity": "1"
            }, 500);

        }
        else {

            //FALLBACK FOR IE7 AND IE8 TO PREVENT THE TEXT-DISAPPARING-BUG WHEN OPACITY ANIMATION IS USED.

            //Center the box and scroll to it
            popupbox.center();

            window.scrollTo(popupbox.elements.overlay.offset().left, popupbox.elements.overlay.offset().top);

            //Set size and visibility of all elements
            popupbox.elements.overlay.css({
                "visibility": "visible"
            });
            popupbox.elements.box.css({
                "visibility": "visible",
                "width": xSize,
                "height": ySize
            });
            popupbox.elements.source.css({
                "width": xSize,
                "height": ySize
            });

            //and again
            popupbox.center();

        }

    },

    center: function () {

        //Get sizes of the box and the window
        var xSize = this.elements.box.outerWidth();
        var ySize = this.elements.box.outerHeight();
        var xWindow = $(window).width();
        var yWindow = $(window).height();

        //Calculate box position (center)
        var xPos = (xWindow - xSize) / 2 + "px";
        var yPos = (yWindow - ySize) / 2 + "px";

        //If the box is larger in either of dimensions, make the position absolute to allow scrolling
        if (xSize >= xWindow && ySize < yWindow) {
            this.elements.box.css({
                'position': 'absolute',
                'left': '0px',
                'top': yPos
            });
        }
        if (ySize >= yWindow && xSize < xWindow) {
            this.elements.box.css({
                'position': 'absolute',
                'left': xPos,
                'top': '0px'
            });
        }
        if (ySize >= yWindow && xSize >= xWindow) {
            this.elements.box.css({
                'position': 'absolute',
                'left': '0px',
                'top': '0px'
            });
        }

        //If the window size has been larger than the box again -> reset position
        if (xSize < xWindow && ySize < yWindow) {
            this.elements.box.css({
                'position': 'fixed',
                'left': xPos,
                'top': yPos
            });
        }

        //Make sure the overlay is still 100% of window size (also add 200px -> will fix iOS overlay issues) 
        this.elements.overlay.css({
            'width': $(window).width() + 200,
            'height': $(window).height() + 200
        });

        //Scroll to top if box is set to absolute position
        if (this.elements.box.css("position") == "absolute") {
            window.scrollTo(0, 0);
        }

    },

    close: function () {

        //Empty the box
        popupbox.elements.box.html("");

        popupbox.elements.overlay.css("visibility", "hidden");
        popupbox.elements.box.css("visibility", "hidden");

        //Refresh parent page?
        if (popupbox.refreshOnClose == true) {
            window.location.reload();
        }

    },

    content: function (source) {

        //Reset box content
        this.elements.box.html('<a class="close-button" id="popupbox-close"></a>');
        $("#popupbox-close").bind("click", popupbox.close);

        //Create iFrame and load content from source
        this.elements.box.append('<iframe class="source-window" id="popupbox-source" scrolling="yes" frameborder="0" src="' + source + '"></iframe>');

    }

};