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

Type.registerNamespace("MXA.FP.View.ExpandableView");

MXA.FP.View.ExpandableView = function (element) {

    MXA.FP.View.ExpandableView.initializeBase(this, [element]);
    this.addCssClass('ExpandableView');
    this._template = null;


    this._collectionContainer = document.createElement('div');
    this._collectionContainer.className = 'vCollectionContainer';
    this._detailContainer = document.createElement('div');
    this._detailContainer.className = 'vDetailContainer';
    element.appendChild(this._detailContainer);
    element.appendChild(this._collectionContainer);
    this._expanderContainer = document.createElement('div');
    this._expanderContainer.className = 'vExpanderContainer';
    element.appendChild(this._expanderContainer);

    this._expander = document.createElement('div');
    this._expander.className = 'vExpander';
    this._expanderContainer.appendChild(this._expander);
    this._isCollectionVisible = false;
    var _this = this;
    this._expandDelegate = Function.createDelegate(_this, _this._onExpanderOver);
    this._mouseMoveDelegate = Function.createDelegate(_this, _this._onMouseMove);

    $addHandler(this._expander, 'mouseover', this._expandDelegate);
}

MXA.FP.View.ExpandableView.prototype =
{
    initialize: function () {
        MXA.FP.View.ExpandableView.callBaseMethod(this, 'initialize');
        this._template = this.initializeCollection(this._collectionContainer);
        this.initializeDetail(this._detailContainer);
    },

    dispose: function () {
        MXA.FP.View.ExpandableView.callBaseMethod(this, 'dispose');
    },

    viewItem: function () {


    },

    viewCollection: function () {

    },



    initializeCollection: function (container) {

    },

    initializeDetail: function (container) {

    },

    _animateIn: function (callback) {
        if (callback != null) {
            callback();
        }

    },

    _animateOut: function (callback) {
        if (callback != null) {
            callback();
        }
    },

    activate: function (callback) {
        var _this = this;
        if ($(this._element).hasClass('active') == false) {
            $(this._element).addClass('active');
        }

        if (this._template != null) {
            this._animateIn();
            $(_this._expanderContainer).animate({ top: '0px' }, callback);
        }
        else {
            this._animateIn();
        }

    },

    deActivate: function (callback) {
        var _this = this;

        if (this._template != null) {

            if (this._isCollectionVisible == true) {
                $(this._collectionContainer).animate({ top: '-' + _this._collectionContainer.clientHeight + 'px' }, function () {
                    _this._isCollectionVisible = false;

                });
                _this._animateOut(function () {

                    $(_this._element).removeClass('active');

                    if (callback != null) {
                        callback();
                    }

                });
            }
            else {
                $(this._expanderContainer).animate({ top: '-30px' }, function () {

                });

                _this._animateOut(function () {

                    $(_this._element).removeClass('active');

                    if (callback != null) {
                        callback();
                    }

                })
            }
        }
        else {
            _this._animateOut(function () {

                $(_this._element).removeClass('active');

                if (callback != null) {
                    callback();
                }

            });
        }
    },

    databind: function () {

        if (this._template != null) {
            this._template.databind();
        }
    },

    onResize: function () {
        this._template.onResize()
    },

    _showCollection: function (callback) {
        var _this = this;
        this._isCollectionVisible = true;
        this._template.onActivating();
        this._template.onResize();
        //_this._template.databind();
        $removeHandler(this._expander, 'mouseover', this._expandDelegate);
        $(this._expanderContainer).animate({ top: '-30px' }, document.datasource.animation.speed.listExpanderOut);
        $(this._collectionContainer).delay(document.datasource.animation.speed.listExpanderOut).animate({ top: '0px' }, document.datasource.animation.speed.listContainer, 'easeOutExpo', function () {
            $addHandler(window, 'mousemove', _this._mouseMoveDelegate);

            _this._template.activate(callback);
        });
    },

    _hideCollection: function (callback) {
        var _this = this;
        this._isCollectionVisible = false;
        $removeHandler(window, 'mousemove', this._mouseMoveDelegate);
        $addHandler(this._expander, 'mouseover', this._expandDelegate);
        _this._template.deActivate(function () {

            $(_this._collectionContainer).animate({ top: '-' + _this._collectionContainer.clientHeight + 'px' }, document.datasource.animation.speed.listContainer, 'easeOutExpo');
            $(_this._expanderContainer).delay(document.datasource.animation.speed.listContainer / 2).animate({ top: '0px' }, document.datasource.animation.speed.listExpanderIn, function () {

                _this._template.onDeactivated();
                if (callback != null) {
                    callback();
                }

            });
        });

    },

    _toggleCollection: function (callback) {
        if (this._isCollectionVisible == false) {
            this._showCollection(callback);
        }
        else {
            this._hideCollection(callback);
        }

    },

    _onExpanderOver: function () {
        this._showCollection();

    },

    _onMouseMove: function (evt) {
        var rects = this._collectionContainer.getClientRects()[0];

        if (evt.clientY > rects.bottom) {
            this._hideCollection();
        }

    }
}

MXA.FP.View.ExpandableView.registerClass('MXA.FP.View.ExpandableView', MXA.FP.View.View);