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

Type.registerNamespace("MXA.Website.Kaldenbroeck");

MXA.Website.Kaldenbroeck.BGManager = function (element) {

    MXA.Website.Kaldenbroeck.BGManager.initializeBase(this, [element]);
    this.addCssClass('BackgroundManager');
    this._backgrounds = [];
    this._backgroundIndexes = {};
    this._backgroundSets = {};
    this._activeBackground = null;
    this._selectedIndex = -1;
    this._backGroundContainer = document.createElement('div');
    this._backGroundContainer.className = 'bgContainer';
    this._fadeElement = document.createElement('div');
    this._fadeElement.className = 'bgFader';
    element.appendChild(this._fadeElement);
    element.appendChild(this._backGroundContainer);
    var _this = this;
    this._switchImageDelegate = Function.createDelegate(_this, _this._activate);

}

MXA.Website.Kaldenbroeck.BGManager.prototype =
{

    initialize: function () {
        MXA.Website.Kaldenbroeck.BGManager.callBaseMethod(this, 'initialize');
        this._loadBackgroundFromSource();
    },

    _loadBackgroundFromSource: function () {
        if (document.datasource != null) {
            if (document.datasource.backgrounds != null) {
                for (var i in document.datasource.backgrounds.image) {
                    var image = document.datasource.backgrounds.image[i];
                    this.addBackground(image.type, image.url);
                }
            }
            if (document.datasource.categories != null) {
                var source = document.datasource.categories.category;

                for (var i in source) {
                    var item = source[i];
                    if (item.background != null) {
                        this.addBackground(item.title, item.background);
                    }
                }
            }
        }
    },

    dispose: function () {
        MXA.Website.Kaldenbroeck.BGManager.callBaseMethod(this, 'dispose');
    },

    addBackground: function (setname, url) {
        var element = document.createElement('img');
        element.className = 'bgItem';
        element.src = url;
        this._backGroundContainer.appendChild(element);
        this._backgroundIndexes[url] = this._backgrounds.length;
        if (this._backgroundSets[setname] == null) {
            this._backgroundSets[setname] = [];
        }

        this._backgroundSets[setname].push(element);
    },

    activateUrl: function (url) {
        var index = this._backgroundIndexes[url];
        this.activateIndex(index);
    },

    activateSet: function (name) {


    },

    hasType: function (type) {
        if (type == '') {
            type = 'Default';
        }

        for (var i in document.datasource.backgrounds.image) {
            var image = document.datasource.backgrounds.image[i];
            if (image.type == type) {
                return true;
            }
        }

        return false;
    },

    activateType: function (type) {
        if (type == '') {
            type = 'Default';
        }

        this._backgrounds = this._backgroundSets[type];
        this.activateIndex(0);
    },

    activateIndex: function (index) {
        if (isNaN(index) == true) {
            return;
        }

        var element = null;
        if (this._backgrounds != null) {
            element = this._backgrounds[index];
        }

        if (element != null && this._activeBackground == null || element != this._activeBackground) {
            if (this._selectedIndex > -1) {
                this._selectedIndex = index;
                this._deactivate(this._switchImageDelegate);
            }
            else {
                this._selectedIndex = index;
                this._activate();
            }
        }

    },

    setSize: 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';
        }
    },

    _activate: function () {
        if (this._backgrounds != null) {
            for (var i in this._backgroundSets) {
                var set = this._backgroundSets[i];
                $(set).removeClass('active');
            }
            var index = this._selectedIndex;
            this._activeBackground = this._backgrounds[index];


            if (this._activeBackground != null) {
                var ratio = this._activeBackground.style.height
                $(this._backgrounds[index]).addClass('active');
                this.setSize();
                $(this._fadeElement).animate({ opacity: 0 }, 600);
            }
        }
        else {
            this._activeBackground = null;
        }
    },

    _deactivate: function (callback) {
        $(this._fadeElement).animate({ opacity: 1 }, 100, callback);
    },

    get_backgroundCount: function () {
        if (this._backgrounds == null) {
            return 0;
        }
        return this._backgrounds.length;
    },

    get_selectedIndex: function () {
        return this._selectedIndex;
    }
}



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