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

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

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

    MXA.Website.Kaldenbroeck.LightBox.initializeBase(this, [element]);
    this.addCssClass('LightBox');

    this._overlay = document.createElement('div');
    this._overlay.className = 'lbOverlay';
    element.appendChild(this._overlay);

    this._container = document.createElement('div');
    this._container.className = 'lbContainer';
    element.appendChild(this._container);

    this._contentContainer = document.createElement('div');
    this._contentContainer.className = 'lbContent';
    this._container.appendChild(this._contentContainer);
    this._commandContainer = document.createElement('div');
    this._commandContainer.className = 'lbCommands';
    this._container.appendChild(this._commandContainer);

    this._w = 0;
    this._h = 0;
    this._activeElement = null;

}

MXA.Website.Kaldenbroeck.LightBox.prototype =
{

    initialize: function () {
        MXA.Website.Kaldenbroeck.LightBox.callBaseMethod(this, 'initialize');
        var _this = this;
        $addHandler(this._element, 'click', Function.createDelegate(_this, _this._onClick));
    },

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

    _onClick: function () {
        this.hide();
    },

    _isDifferentSize: function (width, height, top, left) {
        var w = parseInt(this._container.style.width);
        var h = parseInt(this._container.style.height);
        var t = parseInt(this._container.style.top);
        var l = parseInt(this._container.style.left);


        return (w != width || h != height || t != top || l != left);
    },

    setSize: function (animate, callback) {




        var origWidth = this._container.style.width;
        var origHeight = this._container.style.height;

        this._container.style.width = '';
        this._container.style.height = '';

        var height = this._container.scrollHeight;
        var width = this._container.scrollWidth;
        var _this = this;

        this._container.style.width = origWidth;
        this._container.style.height = origHeight;

        var containerWidth = width;
        var containerHeight = height;
        var h = containerHeight;

        var leftOffset = parseInt((_this._element.clientWidth - containerWidth) / 2);
        var topOffset = parseInt((_this._element.clientHeight - h) / 2);

        if (animate == true) {

            if (this._isDifferentSize(width, height, topOffset, leftOffset) == true) {
                $(this._container).animate({ left: leftOffset + 'px', top: topOffset + 'px', width: width + 'px', height: height + 'px' }, 600, 'easeOutExpo', callback);
            }
            else if (callback != null) {
                callback();
            }
        }
        else {
            this._container.style.left = leftOffset + 'px';
            this._container.style.top = topOffset + 'px';
            this._container.style.width = width + 'px';
            this._container.style.height = height + 'px';
            if (callback != null) {
                callback();
            }
        }

    },

    setClass: function (name) {
        if (name == null || name == '') {
            this._element.className = 'LightBox';
        }
        else {
            this._element.className = 'LightBox ' + name;
        }
    },


    setSize2: function (w, h) {
        //        if (w != null) {
        //            this._w = w;
        //        }
        //        if (h != null) {
        //            this._h = h;
        //        }

        //        w = this._w;
        //        h = this._h;

        //        this._contentContainer.style.maxWidth = w + 'px';
        //        this._contentContainer.style.maxHeight = h + 'px';

        //        var r = ((w - this._contentContainer.clientWidth) / 2) + 26;
        //        var t = ((h - this._contentContainer.clientHeight) / 2) + 26;

        //        if (r < 26) {
        //            r = 26;
        //        }

        //        if (t < 26) {
        //            t = 26;
        //        }
        //        this._contentContainer.style.right = r + 'px';
        //        this._contentContainer.style.top = t + 'px';

    },

    show: function () {
        if ($(this._element).hasClass('active') == false) {
            this.setSize();
            $(this._element).addClass('active');
            //this._commandContainer.style.height = '0px';

            var height;

            if ($(this._element).hasClass('Calendar') == true) {
                height = 65;
            }
            else {
                height = 35;
            }


            var _this = this;
            //$(this._commandContainer).delay(600).animate({ height: height + 'px' }, 300);
            $(this._overlay).css({ opacity: 0 }).animate({ opacity: 0.6 }, 500)
            $(this._container).css({ opacity: 0 }).animate({ opacity: 1 }, 600, function () {

                if (_this._activeElement != null) {
                    _this._activeElement.show();
                }
            });
        }

    },

    hide: function () {
        if (this._activeElement != null) {
            var _this = this;
            $(this._overlay).animate({ opacity: 0 }, 200)
            $(this._container).animate({ opacity: 0 }, 300, function () {
                var e = _this._activeElement._element;
                e.parentNode.removeChild(e);
                $(_this._element).removeClass('active');
                _this._commandContainer.innerHTML = '';
                _this._activeElement = null;
            });


        }

    },

    setTemplate: function (template, className) {
        this.setClass(className);
        var element = document.createElement('div');
        this._contentContainer.appendChild(element);
        this._activeElement = $create(template, null, null, null, element);
        this._activeElement.createCommands(this._commandContainer);
        return this._activeElement;
    }
}



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