﻿(function () {

    var bg, holder, imageWidth, imageHeight, position = { x: 0, y: 0 }, url;

    /* Initialize, determine if the browser needs a fix */
    window.addEvent("domready", function () {

        bg = document.id("background");
        url = bg.get('bg');

        if ((Browser.ie && Browser.version <= 8)) {
            initializeIE();
        } else {
            bg.setStyle("background-image", "url(" + url + ")");
        }

    });

    /* We're on a bad browser, create an img and make it update width/height on resize */
    function initializeIE() {
        holder = new Element("img.holder").inject(bg);
        holder.addEvent('load', function () {
            imageWidth = holder.width;
            imageHeight = holder.height;

            resizeIE();
            window.addEvent("resize", resizeIE);
        });
        holder.set("src", url);
    }

    function resizeIE() {
        var containerWidth = bg.getSize().x;
        var containerHeight = bg.getSize().y;

        var right = 'auto';
        var bottom = 'auto';
        var left = 'auto';
        var top = 'auto';

        if ((containerHeight / imageHeight) > (containerWidth / imageWidth)) {

            var newHeight = containerHeight;
            var newWidth = imageWidth * (containerHeight / imageHeight);


            left = -(((newWidth - containerWidth) / 2).round());
            top = 0;


            if (position) {


                if (position.x == 'left') {
                    left = 0;
                    right = 'auto';
                }
                else if (position.x == 'right') {
                    right = 0;
                    left = 'auto';
                }

                if (position.y == 'top') {
                    top = 0;
                    bottom = 'auto';
                }
                else if (position.y == 'bottom') {
                    top = 'auto';
                    bottom = 0;
                }

            }

            holder.setStyles({
                top: top,
                right: right,
                bottom: bottom,
                left: left,
                height: newHeight,
                width: newWidth
            });

        } else {
            var newWidth = containerWidth;
            var newHeight = (imageHeight * containerWidth / imageWidth).round();

            top = -(((newHeight - containerHeight) / 2).round());

            if (position) {

                if (position.x == 'left') {
                    left = 0;
                    right = 'auto';
                }
                else if (position.x == 'right') {
                    right = 0;
                    left = 'auto';
                }

                if (position.y == 'top') {
                    top = 0;
                    bottom = 'auto';
                }
                else if (position.y == 'bottom') {
                    top = 'auto';
                    bottom = 0;
                }

            }

            holder.setStyles({
                top: top,
                right: right,
                bottom: bottom,
                left: left,
                height: newHeight,
                width: newWidth
            });
        }


    }

})();
