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

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

MXA.FP.Template.ArticleTemplate = function (element) {

    MXA.FP.Template.ArticleTemplate.initializeBase(this, [element]);
    this.addCssClass('ArticleTemplate');
    this._activePage = 0;

    this._items = [];
    this._pagerItems = [];

    this._title = document.createElement('div');
    this._title.className = 'atTitle';
    this._title.innerHTML = 'overzicht';
    element.appendChild(this._title);

    this._listContainer = document.createElement('div');
    this._listContainer.className = 'atArticleList';
    element.appendChild(this._listContainer);

    this._pagerContainer = document.createElement('div');
    this._pagerContainer.className = 'atPagerContainer';
    element.appendChild(this._pagerContainer);

    Cufon.replace([this._title]);

    var _this = this;
    $addHandler(this._listContainer, 'click', Function.createDelegate(_this, _this._onItemClick));
    $addHandler(this._pagerContainer, 'click', Function.createDelegate(_this, _this._onPageClick));
}

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

    dispose: function () {
        MXA.FP.Template.ArticleTemplate.callBaseMethod(this, 'dispose');
    },

    _onPageClick: function (evt) {
        var e = evt.target;

        while (e != null && e._value == null) {
            e = e.parentNode;
        }

        if (e != null) {
            this.gotoPage(e._value);
        }


    },

    _onItemClick: function (evt) {
        var e = evt.target;

        while (e != null && e._value == null) {
            e = e.parentNode;
        }


        if (e != null) {
            var index = parseInt(e._value);
            var owner = this._owner;
            owner._hideCollection(function () {
                owner.showIndex(index);
            });
        }

    },

    get_pageCount: function () {
        return Math.ceil(this._listContainer.scrollHeight / this._listContainer.clientHeight) - 1;
    },

    onActivating: function () {
        //this._listContainer.innerHTML = '';
        //this._items = [];
        this._activePage = 0;
        this._listContainer.scrollTop = '0';
        $(this._listContainer).css({ opacity: 1 });

        for (var i = 0; i < 3; i++) {
            var item = this._items[i];
            $(item).css({ opacity: 0 });
        }
    },

    deActivate: function (callback) {
        $(this._listContainer).animate({ opacity: 0 }, document.datasource.animation.speed.productListClose, callback);
    },

    activate: function (callback) {

        var delay = 0;
        var _this = this;
        var itemDelay = 200;
        for (var i = 0; i < 3; i++) {
            var item = this._items[i];
            $(_this._pagerElement).animate({ opacity: 1 }, document.datasource.animation.speed.productListItem * 2, callback);
            $(item).delay(delay).animate({ opacity: 1 }, document.datasource.animation.speed.productListItem);
            delay += itemDelay;
        }


    },


    databind: function () {
        var ds = this._datasource;
        for (var i in ds) {
            var item = ds[i];
            var element = this._createItem(item);
            element._value = i;
            if (i == 0) {
                $(element).addClass('first');
            }
            if (i == ds.length - 1) {
                $(element).addClass('last');
            }


        }
    },

    onResize: function () {
        for (var i in this._items) {
            var container = this._items[i];
            var image = container._image;

            var width = image.parentNode.clientWidth;
            var height = image.parentNode.clientHeight;

            if (image._ratio == null) {
                image._ratio = image.clientWidth / image.clientHeight;
            }

            image.style.width = width + 'px';
            image.style.height = (width * image._ratio) + 'px';
            image.style.top = '-' + ((image.scrollHeight - image.parentNode.clientHeight) / 2) + 'px';

        }

        this._pagerItems = [];
        var pages = this.get_pageCount();
        this._pagerContainer.innerHTML = '';
        for (var i = 0; i < pages; i++) {

            var item = document.createElement('div');
            item._value = i;
            if (i == this._activePage) {
                item.className = 'atPagerItem active';
            }
            else {
                item.className = 'atPagerItem';
            }
            this._pagerContainer.appendChild(item);
            this._pagerItems.push(item);
        }


    },

    gotoPage: function (page) {
        this._activePage = page;
        var offsetTop = (this._listContainer.clientHeight * this._activePage) + this._activePage;
        if (offsetTop > this._listContainer.scrollHeight - this._listContainer.clientHeight) {
            offsetTop = this._listContainer.scrollHeight - this._listContainer.clientHeight;
        }


        $(this._listContainer).animate({ scrollTop: offsetTop }, 600, 'easeOutExpo');

        $(this._pagerItems).removeClass('active');
        $(this._pagerItems[page]).addClass('active');
    },

    _createItem: function (item) {
        var element = document.createElement('div');
        element.className = 'atItem';
        this._listContainer.appendChild(element);

        var imageMask = document.createElement('div');
        imageMask.className = 'atImageMask';
        element.appendChild(imageMask);

        var image = document.createElement('img');
        image.className = 'atImage';
        image.src = item.thumbnail;
        imageMask.appendChild(image);

        element._image = image;



        var textContainer = document.createElement('div');
        textContainer.className = 'atTextContainer';
        element.appendChild(textContainer);

        var title = document.createElement('div');
        title.className = 'atText';
        title.innerHTML = item.title;
        textContainer.appendChild(title);

        var slogan = document.createElement('div');
        slogan.className = 'atSlogan';
        slogan.innerHTML = item.slogan;
        textContainer.appendChild(slogan);

        var titleHover = document.createElement('div');
        titleHover.className = 'atText hover';
        titleHover.innerHTML = item.title;
        textContainer.appendChild(titleHover);

        var sloganHover = document.createElement('div');
        sloganHover.className = 'atSlogan hover';
        sloganHover.innerHTML = item.slogan;
        textContainer.appendChild(sloganHover);

        Cufon.replace([title, slogan, titleHover, sloganHover]);

        this._items.push(element);
        return element;
    }

}

MXA.FP.Template.ArticleTemplate.registerClass('MXA.FP.Template.ArticleTemplate', MXA.FP.Template.Template);