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

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

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

    MXA.FP.Template.ProductBaseTemplate.initializeBase(this, [element]);
    this.addCssClass('ProductBaseTemplate');

    this._titleElement = document.createElement('div');
    this._titleElement.innerHTML = this.get_title();
    this._titleElement.className = 'ptTitle';
    element.appendChild(this._titleElement);

    this._categoryElement = document.createElement('div');
    this._categoryElement.className = 'ptCategories';
    element.appendChild(this._categoryElement);



    this._scrollElement = document.createElement('div');
    this._scrollElement.className = 'ptScrollElement';
    element.appendChild(this._scrollElement);
    this._items = [];
    this._pagerItems = [];

    this._pagerElement = document.createElement('div');
    this._pagerElement.className = 'ptPager';
    element.appendChild(this._pagerElement);

    Cufon.replace([this._titleElement]);
    var _this = this;
    $addHandler(this._pagerElement, 'click', Function.createDelegate(_this, _this._onPageClick));
    $addHandler(this._scrollElement, 'click', Function.createDelegate(_this, _this._onItemClick));
    $addHandler(this._categoryElement, 'click', Function.createDelegate(_this, _this._onCategoryClick));

}

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

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

    get_title: function () {

    },

    _onCategoryClick: function (evt) {

        var e = evt.target;
        while (e != null && e._category == null) {
            e = e.parentNode;
        }

        if (e != null) {
            this._activateCategory(e._category);
            $(this._categoryElement.childNodes).removeClass('active');
            $(e).addClass('active');
        }
    },

    _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);
            });
        }
    },


    _activateCategory: function (category) {
        var _this = this;
        $(_this._scrollElement).animate({ opacity: 0 }, 100, function () {

            for (var i in _this._items) {
                var item = _this._items[i];
                if (category == '' || category == item._category) {
                    $(item).show();
                }
                else {
                    $(item).hide();
                }
            }
            _this._createPages();
            _this._scrollElement.style.left = '';
            $(_this._scrollElement).animate({ opacity: 1 }, 500);

        });

        $(this._categoryElement.childNodes).removeClass('active');

        for (var i in this._categoryElement.childNodes) {
            var item = this._categoryElement.childNodes[i];
            if (item._category == category) {
                $(item).addClass('active');
                break;
            }
        }

    },


    _onPageClick: function (evt) {
        var page = evt.target._value;
        if (page != null) {
            $(this._pagerElement.childNodes).removeClass('active');
            $(evt.target).addClass('active');
            var pos = page * (this._scrollElement.clientWidth - 110);
            $(this._scrollElement).animate({ left: '-' + pos + 'px' }, document.datasource.animation.speed.productListScroll, 'easeOutExpo');

        }
    },

    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;
        }

    },

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

    onActivating: function () {
        this._scrollElement.style.left = '';
        //this._pagerElement.innerHTML = '';
        //this._scrollElement.innerHTML = '';
        $(this._pagerElement).css({ opacity: 0 });
        this._activateCategory('');
        this._createPages();
    },

    onResize: function () {

        var height = parseInt(((this._element.clientWidth / 2) - 10) / 2);
        //this._items = [];
        for (var i in this._items) {
            var container = this._items[i];
            var width = parseInt((this._element.clientWidth / 2) - 60);
            var height = parseInt(((this._element.clientWidth / 2) - 60) / 2);
            container.style.width = width + 'px';
            container.style.height = height + 'px';
            var image = container._image;
            image._ratio = 0.5;

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

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

    },


    itemCreated: function (element, source) {

    },


    _createItem: function (item, index) {
        var container = document.createElement('div');
        container._value = index;
        container._category = item.category;
        container.className = 'ptItem';

        this._scrollElement.appendChild(container);

        var imageMask = document.createElement('div');
        imageMask.className = 'ptImageMask';
        container.appendChild(imageMask);

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

        var label = document.createElement('div');
        label.className = 'ptLabel';


        var overlay = document.createElement('div');
        overlay.className = 'ptOverlay';
        label.appendChild(overlay);

        var text = document.createElement('div');
        text.className = 'ptText';
        text.innerHTML = item.name;
        label.appendChild(text);

        var altText = document.createElement('div');
        altText.className = 'ptAltText';
        altText.innerHTML = item.name;
        label.appendChild(altText);
        container._image = image;
        container.appendChild(label);
        this._items.push(container);
        Cufon.replace([text, altText]);
        this.itemCreated(container, item);


        return container;
    },


    get_pageCount: function () {
        return Math.ceil(this._scrollElement.scrollWidth / this._scrollElement.clientWidth);
    },

    _createPages: function () {
        this._pagerElement.innerHTML = '';
        this._pagerItems = [];
        var pageCount = this.get_pageCount();

        if (pageCount > 1) {
            for (var i = 0; i < pageCount; i++) {
                var pageElement = document.createElement('div');
                pageElement._value = i;
                if (i == 0) {
                    pageElement.className = 'ptItem active';
                }
                else {
                    pageElement.className = 'ptItem';
                }
                this._pagerElement.appendChild(pageElement);
                this._pagerItems.push(pageElement);
            }
        }

    },

    databind: function () {

        var ds = this._datasource;

        var cats = {};

        if (ds == null) {
            return;
        }

        for (var i = 0; i < ds.length; i++) {
            var item = ds[i];
            var container = this._createItem(item, i);
            if (i < 3) {
                $(container).css({ opacity: 0 });
            }

            if (item.category != null && cats[item.category] == null) {
                var catItem = document.createElement('div');
                catItem.className = 'ptItem';
                catItem.innerHTML = item.category;
                catItem._category = item.category;
                cats[item.category] = catItem;
            }
        }

        for (var i in cats) {
            var item = cats[i];
            this._categoryElement.appendChild(item);
        }





    }
}

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