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

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

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

    MXA.FP.View.ArticleView.initializeBase(this, [element]);
    this.addCssClass('ArticleView');
    this._selectedIndex = 0;
    this._articleContainer = document.createElement('div');
    this._articleContainer.className = 'avArticleContainer';
    element.appendChild(this._articleContainer);

    var overlay = document.createElement('div');
    overlay.className = 'avOverlay';
    this._articleContainer.appendChild(overlay);

    this._animationContainer = document.createElement('div');
    this._animationContainer.className = 'avAnimationContainer';
    this._articleContainer.appendChild(this._animationContainer);

    this._commandContainer = document.createElement('div');
    this._commandContainer.className = 'avCommands';
    this._animationContainer.appendChild(this._commandContainer);

    this._previous = document.createElement('div');
    this._previous.className = 'avPreviousButton';
    this._previous.innerHTML = 'previous';
    this._commandContainer.appendChild(this._previous);

    this._next = document.createElement('div');
    this._next.className = 'avNextButton';
    this._next.innerHTML = 'next';
    this._commandContainer.appendChild(this._next);

    this._article = document.createElement('div');
    this._article.className = 'avArticle';
    this._animationContainer.appendChild(this._article);

    this._title = document.createElement('div');
    this._title.className = 'avTitle';
    this._title.innerHTML = 'Title';
    this._article.appendChild(this._title);

    var devider = document.createElement('div');
    devider.className = 'avDevider';
    this._article.appendChild(devider);

    this._body = document.createElement('div');
    this._body.className = 'avBody';
    this._body.innerHTML = 'Body';
    this._article.appendChild(this._body);

    this._pagerContainer = document.createElement('div');
    this._pagerContainer.className = 'avPagerContainer';
    this._article.appendChild(this._pagerContainer);

    var _this = this;
    $addHandler(this._previous, 'click', Function.createDelegate(_this, _this._previousClick));
    $addHandler(this._next, 'click', Function.createDelegate(_this, _this._nextClick));

}

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

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

    onResize: function () {
        var pos = (this._element.clientHeight - this._article.clientHeight) / 2;
        this._article.style.top = pos + 'px';

    },

    _animateIn: function (callback) {
        var _this = this;
        this.onResize();
        $(_this._articleContainer).stop().animate({ right: '0%' }, 600, 'easeOutExpo', callback);
    },

    _nextClick: function (evt) {
        var index = this._selectedIndex + 1;
        this.showIndex(index);
    },

    _previousClick: function (evt) {
        var index = this._selectedIndex - 1;
        this.showIndex(index);
    },

    showIndex: function (index) {
        this._selectedIndex = index;
        this._updateImage();
        var _this = this;
        $(this._animationContainer).animate({ opacity: 0 }, 100, function () {
            _this.databindItem();
            _this.onResize();
            $(_this._animationContainer).animate({ opacity: 1 }, 500);
        })

    },

    _updateImage: function () {
        var url = this.getBackgroundUrl();
        this._bgManager.showBackground(url);
    },

    onSelected: function () {
        this._selectedIndex = 0;
        this.databindItem();
    },

    get_datasource: function () {
        return document.datasource.news.news;
    },

    databind: function () {
        this.databindItem();
        this._template.databind();
    },

    databindItem: function () {
        var ds = this.get_datasource();
        var currentItem = ds[this._selectedIndex];
        var previousItem = ds[this._selectedIndex - 1];
        var nextItem = ds[this._selectedIndex + 1];

        this._title.innerHTML = currentItem.title;
        this._body.innerHTML = currentItem.body;

        if (previousItem != null) {
            $(this._previous).show();
            this._previous.innerHTML = previousItem.title;
        }
        else {
            this._previous.innerHTML = '';
            $(this._previous).hide();
        }

        if (nextItem != null) {
            $(this._next).show();
            this._next.innerHTML = nextItem.title;
        }
        else {
            this._next.innerHTML = '';
            $(this._next).hide();
        }


        Cufon.replace([this._title, this._body, this._previous, this._next]);
    },

    _animateOut: function (callback) {
        var _this = this;
        $(_this._articleContainer).stop().animate({ right: '-50%' }, 600, 'easeOutExpo', callback);
    },

    getBackgroundUrl: function () {
        var ds = this.get_datasource();
        var item = ds[this._selectedIndex];
        return item.image;
    },

    initializeCollection: function (container) {
        var datasource = this.get_datasource();
        var element = document.createElement('div');
        container.appendChild(element);
        var template = $create(MXA.FP.Template.ArticleTemplate, null, null, null, element);
        template._owner = this;
        template.set_datasource(datasource);
        return template;
    }
}

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