﻿var shadowBox = function() {

    var iPageLoader = null; // timer for fade and resize events
    var pageLoader = null;
    var ifLoader = null;
    var pageBlocker = null;
    var pageCloser = null;
    var isURLLoaded = false;
    var isDocumentLoaded = false;
    var isMoving = false;

    appendEvent(window, 'load', function() {
        pageLoader = document.createElement('div');
        {
            pageLoader.id = 'pageLoader';
            pageLoader.style.display = 'none';
            pageLoader.style.backgroundColor = '#fff';
            pageLoader.style.zIndex = '9999999';
            pageLoader.style.position = 'absolute';
            pageLoader.style.width = '10px';
            pageLoader.style.height = '10px';
            pageLoader.style.overflow = 'hidden';

            ifLoader = document.createElement('iframe');
            {
                ifLoader.id = 'ifLoader';
                ifLoader.name = 'ifLoader';
                ifLoader.frameBorder = 0;
                ifLoader.style.display = 'none';
                ifLoader.style.backgroundColor = '#fff';
                ifLoader.style.zIndex = '9999999';
                ifLoader.style.width = '100%';
                ifLoader.style.overflow = 'auto';
                ifLoader.style.height = '100%';
                ifLoader.style.border = 'none';
                ifLoader.style.margin = '0';
                ifLoader.style.padding = '0';

                pageLoader.appendChild(ifLoader);
            }

            document.body.appendChild(pageLoader);
        }

        pageBlocker = document.createElement('div');
        {
            pageBlocker.id = 'pageBlocker';
            pageBlocker.onclick = function() { shadowBox.hide() };
            pageBlocker.style.display = 'none';
            pageBlocker.style.zIndex = '999999';
            pageBlocker.style.backgroundColor = '#000';
            pageBlocker.style.position = 'absolute';
            pageBlocker.style.top = '0';
            pageBlocker.style.left = '0';
            pageBlocker.style.width = '100%';
            pageBlocker.style.height = '100%';

            document.body.appendChild(pageBlocker);
        }
    });

    appendEvent(window, 'resize', function() { window.setTimeout(onResize, 100); });
    appendEvent(window, 'scroll', function() { window.setTimeout(onResize, 100); });

    var getPLSize = function() { return { w: pageLoader.offsetWidth, h: pageLoader.offsetHeight} };
    var getSize = function() { return { w: document.documentElement.clientWidth, h: document.documentElement.clientHeight} };
    var getScroll = function() { return { x: document.documentElement.scrollLeft, y: document.documentElement.scrollTop, w: document.documentElement.scrollWidth, h: document.documentElement.scrollHeight} };

    var setPLSize = function(size, scroll, plSize) {
        pageLoader.style.width = plSize.w + 'px';
        pageLoader.style.height = plSize.h + 'px';
        pageLoader.style.left = scroll.x + (((size.w / 2) + scroll.x) - (plSize.w / 2)) + 'px';
        pageLoader.style.top = scroll.y + (((size.h / 2) - (plSize.h / 2))) + 'px';
    }

    var setOpacity = function(el, op) {
        el.style.filter = op == 100 ? '' : 'alpha(opacity = ' + op + ')';
        el.style.opacity = op / 100;
    }

    function appendEvent(el, event, func) {
        if (el.addEventListener)
            el.addEventListener(event, func, true);
        else if (el.attachEvent)
            el.attachEvent('on' + event, func);
        else
            eval('el.on' + event + ' = ' + func);
    }

    function onResize() {
        if (!isMoving) {
            var size = getSize();
            var scroll = getScroll();
            var plSize = { w: (maxWidth || (size.w * 0.8)), h: (maxHeight || (size.h * 0.8)) };

            setPLSize(size, scroll, plSize);

            pageBlocker.style.top = scroll.y;
            pageBlocker.style.left = scroll.x;

            var plSize = getPLSize();
            var size = getSize();
            var scroll = getScroll();

            if (pageCloser) {
                pageCloser.style.top = scroll.y + (((size.h / 2) - (plSize.h / 2))) + 'px';
                pageCloser.style.left = scroll.x + ((((((size.w / 2) + scroll.x) - (plSize.w / 2))) + plSize.w) + 2) + 'px';
            }
        }
    }

    function loadUrl(url) {
        window.clearInterval(iPageLoader);

        isURLLoaded = false;
        isDocumentLoaded = false;

        window['ifLoader'].location = 'about:blank';

        setPLSize(getSize(), getScroll(), { w: 10, h: 10 });
        ifLoader.style.display = 'none';

        setTimeout(function() { window['ifLoader'].location = url; }, 750);

        appendEvent(ifLoader, 'load', function() {

            window['ifLoader'].document.body.style.padding = '20px';
            isURLLoaded = true;

            if (isDocumentLoaded && window['ifLoader'].location != 'about:blank') {
                ifLoader.style.display = 'block';
                ifLoader.focus();
            }
        });

        iPageLoader = window.setInterval(function() { resizePageLoader(url) }, 50);
    }

    function closeLoader(url) {
        document.getElementById('pageCloser').style.display = 'none';
        window.clearInterval(iPageLoader);
        document.getElementById('ifLoader').style.display = 'none';
        iPageLoader = window.setInterval(function() { resizeCloser() }, 50);
    }

    function resizeCloser() {
        var op = 0;
        var plSize = getPLSize();
        var size = getSize();
        if (plSize.h > 10) {
            isMoving = true;
            plSize.h -= ((maxHeight || (size.h * 0.8)) / 5);
            op = ((maxOpacity / 2) || 25) + ((plSize.h / (maxHeight || (size.h * 0.8))) * ((maxOpacity / 2) || 25));
            if (plSize.h < 10)
                plSize.h = 10;

            setPLSize(size, getScroll(), plSize);

            setOpacity(pageLoader, (op / (maxOpacity || 50)) * 100);
            setOpacity(pageBlocker, op);
        }
        else if (plSize.w > 10) {
            isMoving = true;
            plSize.w -= ((maxWidth || (size.w * 0.8)) / 5);
            op = ((plSize.w / (maxWidth || (size.w * 0.8))) * ((maxOpacity / 2) || 25));
            if (plSize.w < 10)
                plSize.w = 10;

            setPLSize(size, getScroll(), plSize);

            setOpacity(pageLoader, (op / (maxOpacity || 50)) * 100);
            setOpacity(pageBlocker, op);
        }
        else {
            isMoving = false;
            window.clearInterval(iPageLoader);
            setOpacity(pageLoader, 0);
            setOpacity(pageBlocker, 0);
            pageLoader.style.display = 'none';
            pageBlocker.style.display = 'none';
        }
    }

    function resizePageLoader(url) {

        pageLoader.style.display = 'block';
        pageBlocker.style.display = 'block';

        var plSize = getPLSize();
        var size = getSize();
        if (plSize.w < (maxWidth || (size.w * 0.8))) {
            isMoving = true;
            plSize.w += ((maxWidth || (size.w * 0.8)) / 5);
            op = ((plSize.w / (maxWidth || (size.w * 0.8))) * ((maxOpacity / 2) || 25));
            if (plSize.w > (maxWidth || (size.w * 0.8)))
                plSize.w = Math.ceil((maxWidth || (size.w * 0.8)));

            setPLSize(size, getScroll(), plSize);

            setOpacity(pageLoader, (op / (maxOpacity || 50)) * 100);
            setOpacity(pageBlocker, op);
        }
        else if (plSize.h < (maxHeight || (size.h * 0.8))) {
            isMoving = true;
            plSize.h += ((maxHeight || (size.h * 0.8)) / 5);
            op = ((maxOpacity / 2) || 25) + ((plSize.h / (maxHeight || (size.h * 0.8))) * ((maxOpacity / 2) || 25));
            if (plSize.h > (maxHeight || (size.h * 0.8)))
                plSize.h = Math.ceil((maxHeight || (size.h * 0.8)));

            setPLSize(size, getScroll(), plSize);

            setOpacity(pageLoader, (op / (maxOpacity || 50)) * 100);
            setOpacity(pageBlocker, op);
        }
        else {
            isMoving = false;
            window.clearInterval(iPageLoader);

            setOpacity(pageLoader, 100);
            setOpacity(pageBlocker, (maxOpacity || 50));

            var plSize = getPLSize();
            var size = getSize();
            var scroll = getScroll();

            if (!pageCloser) {
                pageCloser = document.createElement('div');
                {
                    pageCloser.id = 'pageCloser';
                    pageCloser.innerHTML = '<img src="http://www.bookeasy.com.au/images/shadowbox-close.png" style="cursor: pointer" />';
                    pageCloser.style.width = '20px';
                    pageCloser.style.height = '20px';
                    pageCloser.style.position = 'absolute';
                    pageCloser.style.zIndex = '9999999'
                    pageCloser.onclick = function() { shadowBox.hide() };

                    document.body.appendChild(pageCloser);
                }
            }

            pageCloser.style.top = scroll.y + (((size.h / 2) - (plSize.h / 2))) + 'px';
            pageCloser.style.left = scroll.x + ((((((size.w / 2) + scroll.x) - (plSize.w / 2))) + plSize.w) + 2) + 'px';
            pageCloser.style.display = 'block';

            isDocumentLoaded = true;

            if (isURLLoaded) {
                ifLoader.style.display = 'block';
                ifLoader.focus();
            }
        }
    }

    var maxWidth = null;
    var maxHeight = null;
    var maxOpacity = null;

    return {
        show: function(url, w, h, op) {
            maxWidth = w;
            maxHeight = h;
            maxOpacity = op;

            loadUrl(url);
        },
        hide: closeLoader
    }
} ();