define(['jquery', 'underscore', 'backbone', 'text!modules/category/categoryViewTemplate.html',
    'text!modules/category/categoryItemTemplate.html', 'modules/base/baseView', 'libs/fastclick', 'classes/debug'],
        function ($, _, Backbone, categoryViewTemplate, categoryItemTemplate, BaseView, FastClick, Debug) {

            var CategoryView = BaseView.extend({
                collection: null,
                categoryName: null,
                //initialize template
                template: _.template(categoryViewTemplate),
                itemtemplate: _.template(categoryItemTemplate, {variable: 'data'}),
                events: {
                    "click a[data-ordinal-divider]": "scrollDivider",
                },
                initialize: function (options) {
                    this.id = "CategoryView" + options.categoryId;
                    var self = this;
                    CategoryView.__super__.initialize.call(this);
                    //if (this.created === true)
                    {
                        this.collection = options.collection;
                        this.categoryName = options.categoryName;
                        if(!this.collection.isCached() || 
                            this.$el.find('#allRicette').length === 0){
                            this.collection.fetch({
                                success: function (data, textStatus, jqXHR) {
                                    setTimeout(self.renderItem(), 0);
                                }
                            });
                        }
                    }
                },
                renderItem: function () {                    
                    var $ul = this.$el.find('#allRicette');
                    if ($ul.html().trim() === "") {
//                    var start = new Date().getTime();

                        var self = this;
                        var html = "";
                        //$ul.html(html);
                        /*_.each(this.collection.toJSON(), function (d) {
                         html += self.itemtemplate(d);
                         });*/
                        html = this.itemtemplate({
                            items: this.collection.toJSON(),
                            myManifest: myManifest
                        });

                        $(html).appendTo($ul).enhanceWithin();
                        $ul.listview("refresh");
                    }

                    var alphaList = "";
                    this.$el.find(".ui-li-divider").each(function(index, item){
                        alphaList += "<li><a data-ordinal-divider='" + index + "'>" + $(item).text() + "</a></li>";
                    });
                    this.$el.find("#alphabetList").append(alphaList);

                    this.$el.find("#alphabetConteiner").on("touchend", function(e){
                        if(self.$el.find("#alphabetConteiner").hasClass("alphabetContainer_hover"))
                            self.$el.find("#alphabetConteiner").removeClass("alphabetContainer_hover");
                    });
                    this.$el.find("#alphabetConteiner").on("touchmove", function(e){
                        if(!self.$el.find("#alphabetConteiner").hasClass("alphabetContainer_hover"))
                            self.$el.find("#alphabetConteiner").addClass("alphabetContainer_hover");
                        e.preventDefault();
                        var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
                        // scroll to divider position
                        var y= touch.pageY;

                        self.$el.find("#alphabetList>*").each(function(){
                            if ( ! ( y <= $( this ).offset().top || y >= $( this ).offset().top + $( this ).outerHeight() ) ) {
                                $($( this ).children()[0]).trigger("click");
                                return;
                            }
                        });
                    });
                    
                    $.mobile.loading('hide');
                },
                scrollDivider:function(e){
                    var a = $(e.currentTarget);
                    var header = $(this.$el.find("div[data-role='header']"));
                    var divider = $(this.$el.find(".ui-li-divider")[a.attr("data-ordinal-divider")]);
                    $('body').scrollTop(divider.position().top - header.height());
                },
                onShowed: function(){
                    
                    setTimeout(function(){
                        $('img[data-src!=""]').each(function(index, item){
                            setTimeout(function(){
                                var img = new Image(); 
                                img.onload = function() { 
                                    $(item).removeAttr("data-src");
                                    $(item).attr("src",this.src);
                                } 
                                img.src = $(item).attr("data-src");
                            }, 100);
                        });
                    }, 100); 
                },
                //render the content into div of view 
                render: function () {
                    if (this.created === true)
                    {
                        //this.header.title = "pippo";
                        CategoryView.__super__.render.call(this);
                        //this.el is the root element of Backbone.View. By default, it is a div.    
                        //$el is cached jQuery object for the view's element.
                        //append the compiled template into view div container
                        this.$el.append(this.header.$el);
                        this.$el.append(this.template({categoryName: this.categoryName}));
                        this.$el.append(this.footer.$el);
                        //return to enable chained calls                        
                    }                    
                    this.$el.find("#indexBtn").addClass("ui-btn-active");                    
                    return this;
                }
            });
            return CategoryView;
        });