/// <reference path="../jquery.autocomplete.min.js" />
/// <reference path="../jquery-1.7.js" />

window.SearchList = Backbone.Collection.extend({
    model: Product,
    urlRoot: 'api/product/search/',
    url: function () {
        return this.urlRoot + localStorage.getItem('productcategoryid');
    }
});


window.SearchListView = Backbone.View.extend({
    el: "#jqt",
    initialize: function () {
        this.collection = new SearchList();
        this.template = $('#SearchListTemplate').html();
    },

    events: {
        'click #SearchList .orderType ul li': 'changeOrderType',
        'click #SearchList .searchSampleList li': 'renderDetail'
    },
    render: function () {
        var that = this;
        var partial = { header: $('#HeaderTemplate').html(), footer: $('#FooterTemplate').html(),
            innerFooter: $('#InnerFooterTemplate').html(), orderCheck: $('#ThreeCheckTemplate').html()
        };
        var data = { hasBack: true, title: "??", btnListR: [{ name: 'sort' }, { name: 'cart' }, { name: 'home'}] };

        this.$el.append(Mustache.render(this.template, data, partial));

        $('#SearchList #keyword').val(localStorage.getItem('keyword'));

        new Plugins.SearchPlugin('#SearchList .searchContainer', {
            id: 'keyword_searchlist'
        });

        this.setOrderCheck();

        this.searchProductList();

        return this;
    },

    searchProductList: function () {
        var that = this;
        this.collection.fetch({
            data: {
                sorts: localStorage.getItem('orderType'),
                isASC: localStorage.getItem('isASC'),
                pageIndex: localStorage.getItem('searchPageIndex'),
                pageCount: localStorage.getItem('pageCount'),
                name: localStorage.getItem('keyword')
            },
            success: function () {
                var template = $('#InnerListTemplate').html(),
                    allCount = that.collection.models[0].get('Count');
                if (allCount == 0) {
                    $('#SearchList .searchSampleList').html();
                    $('#SearchList .filter #key').text(localStorage.getItem('keyword'));
                    $('#SearchList .filter em').text(allCount);
                    $('.footer').hide();
                    $('.orderType').hide();
                    return;
                }
                var data = { products: that.collection.models[0].get('Data') };
                $('#SearchList .searchSampleList').html(Mustache.render(template, data, []));
                $('#SearchList .filter #key').text(localStorage.getItem('keyword'));
                $('#SearchList .filter em').text(allCount);
                new Plugins.PagingPlugin('.foot-paging', {
                    allCount: allCount,
                    pageIndexKey: 'searchPageIndex',
                    prevCall: function (e) { that.searchPrev(e); },
                    nextCall: function (e) { that.searchNext(e) },
                    numberClickCall: function (e) { that.searchSpecific(e) }
                });
                pageView.resizeScroll();
            }
        });
    },

    fetchPrev: function (e) {
        if ($(e.currentTarget).hasClass('disable')) return;
        var pageIndex = localStorage.getItem('searchPageIndex');
        localStorage.setItem('searchPageIndex', +pageIndex - 1);
        this.searchProductList();
    },

    fetchNext: function (e) {
        if ($(e.currentTarget).hasClass('disable')) return;
        var pageIndex = localStorage.getItem('searchPageIndex');
        localStorage.setItem('searchPageIndex', +pageIndex + 1);
        this.searchProductList();
    },

    fetchSpecific: function (e) {
        var target = $(e.currentTarget);
        if (target.hasClass('gray')) return;
        var index = +target.attr('index');
        localStorage.setItem('searchPageIndex', index);
        this.searchProductList();
    },

    renderDetail: function (e) {
        var target = $(e.currentTarget);

        var price = target.find('.pro-price').text(),
            productid = target.attr('productid');
        localStorage.setItem('productDetail', JSON.stringify({ productid: productid, price: price }));

        localStorage.setItem('productid', productid);
        localStorage.setItem('detailType', 'tab_intro');
        localStorage.setItem('commentPageIndex', 1);
        localStorage.setItem('ordercommentPageIndex', 1);
        pageView.goTo('ProductDetail');
    },

    setOrderCheck: function () {
        var orderType = localStorage.getItem('orderType'),
            isASC = localStorage.getItem('isASC'),
            priceClass = isASC == "true" ? 'up' : 'down',
            activeClass = 'selected',
            currentTarget = $('.orderType ').find('li[ordertype="' + orderType + '"]');
        currentTarget.addClass(activeClass).siblings().removeClass(activeClass);
        if (currentTarget.hasClass('price')) {
            currentTarget.find('a').removeClass('up down').addClass(priceClass);
        }
    },

    changeOrderType: function (e) {
        var target = $(e.currentTarget),
            activeClass = 'selected';

        if (target.hasClass(activeClass)) {
            this.changeAsc(e);
            return;
        }
        target.addClass(activeClass).siblings().removeClass(activeClass);
        if (!target.hasClass('price')) {
            $('.price').find('a').removeClass('down').addClass('up');
        }
        localStorage.setItem('orderType', target.attr('orderType'));
        localStorage.setItem('isASC', true);

        this.searchProductList();
    },

    changeAsc: function (e) {
        var target = $(e.currentTarget),
            activeClass = 'selected';
        if (target.hasClass('price')) {
            this.changePriceImg(target);
        }

        var orderAsc = localStorage.getItem('isASC');

        localStorage.setItem('isASC', orderAsc == "true" ? false : true);

        this.searchProductList();

    },

    changePriceImg: function (target) {
        var icon = $(target).find('a'),
            asc = icon.hasClass('up');
        if (asc) {
            icon.removeClass('up').addClass('down');
        } else
            icon.removeClass('down').addClass('up');
    }
});