/// <reference name="MicrosoftAjax.js"/>

Type.registerNamespace("MXA.FP.Control");

MXA.FP.Control.BGManager = function (element) {
    MXA.FP.Control.BGManager.initializeBase(this, [element]);
    this.addCssClass('BackgroundManager');
    this._activeBackground = null;
    this._images = [];
    this._fadeElement = document.createElement('div');
    this._fadeElement.className = 'bmFader';
    element.appendChild(this._fadeElement);

}


MXA.FP.Control.BGManager.prototype =
{
    initialize: function () {
        MXA.FP.Control.BGManager.callBaseMethod(this, 'initialize');
    },

    dispose: function () {
        MXA.FP.Control.BGManager.callBaseMethod(this, 'dispose');
    },

    addBackground: function (url) {
        var image = document.createElement('img');
        image.src = url;
        image.className = 'bmItem';
        image._url = url;
        this._element.appendChild(image);
        this._images.push(image);

        return image;
    },

    get_isReady: function () {
        for (var i in this._images) {
            var image = this._images[i];
            if (image.complete == false) {
                return false;
            }
        }

        return true;
    },

    showBackground: function (url, callback) {

        if (url == null) {
            $(this._fadeElement).animate({ opacity: 1 }, document.datasource.animation.speed.backgroundOut, callback);
            this._activeBackground = null;
            return;
        }
        var _this = this;
        var image = null;
        for (var i in this._images) {
            var item = this._images[i];
            if (item._url == url) {
                image = item;
                break;
            }

        }

        if (image == null) {
            image = this.addBackground(url);
        }

        if (this._activeBackground == image) {
            if (callback != null) {
                callback();
            }
            return;
        }

        if (this._activeBackground != null) {
            $(this._fadeElement).animate({ opacity: 1 }, document.datasource.animation.speed.backgroundOut, function () {
                _this._switchImage(image, callback);
            });
        }
        else {
            _this._switchImage(image, callback);
        }



    },

    _switchImage: function (image, callback) {
        this._activeBackground = image;
        $(this._images).removeClass('active');
        $(image).addClass('active');
        this.onResize();
        $(this._fadeElement).animate({ opacity: 0 }, document.datasource.animation.speed.backgroundIn, callback);
    },

    onResize: function () {

        if (this._activeBackground == null) {
            return;
        }
        var ratio = (this._activeBackground.width / this._activeBackground.height);
        var windowRatio = (document.documentElement.clientWidth / document.documentElement.clientHeight);
        if (ratio < windowRatio) {
            var height = document.documentElement.clientWidth / ratio;
            this._activeBackground.style.width = document.documentElement.clientWidth + 'px';
            this._activeBackground.style.height = height + 'px';
            this._activeBackground.style.top = '-' + ((height - document.documentElement.clientHeight) / 2) + 'px';
            this._activeBackground.style.left = '0px';
        }
        else {
            var width = document.documentElement.clientHeight * ratio;
            this._activeBackground.style.height = document.documentElement.clientHeight + 'px';
            this._activeBackground.style.width = width + 'px';
            this._activeBackground.style.left = '-' + ((width - document.documentElement.clientWidth) / 2) + 'px';
            this._activeBackground.style.top = '0px';
        }

    }
}

MXA.FP.Control.BGManager.registerClass('MXA.FP.Control.BGManager', Sys.UI.Control);