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

            var CategoryView = BaseView.extend({
                collection: null,
                categoryName: null,
                //initialize template
                template: _.template(categoryViewTemplate),
                itemtemplate: _.template(categoryItemTemplate, {variable: 'data'}),
                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(),
                            images: Images
                        });

                        $(html).appendTo($ul).enhanceWithin();
                        $ul.listview("refresh");
                        //$ul.trigger("updatelayout");                    
                    }
                    
                    $.mobile.loading('hide');


                },
                onShowed: function(){
                    $('body').scrollTop(0);
                },
                //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;
        });