define(['jquery', 'underscore', 'backbone','text!modules/index/indexViewTemplate.html','text!modules/index/indexItemViewTemplate.html', 'modules/base/baseView'],
    function($, _, Backbone, indexViewTemplate, indexItemViewTemplate, BaseView){

        var IndexView = BaseView.extend({

            collection: null,
            //initialize template
            template:_.template(indexViewTemplate),
            templateItem:_.template(indexItemViewTemplate, {variable: 'item'}),

            initialize: function (options) {
                var self = this;
                IndexView.__super__.initialize.call(this);
                this.collection = options.collection;
                this.collection.fetch({ 
                    success: function(){
                        var $ul = $('#categoryList');
                        var html = "";
                        _.each(self.collection.toJSON(), function(d) {
                          html += self.templateItem(d);
                        });
                        $ul.html(html);
                        //$ul.listview("refresh");
                        //$ul.trigger("updatelayout");
                        //self.trigger("renderCompleted:Categories",self);
                    }
                });
            },

            //render the content into div of view
            render: function(){
                //this.header.title = "pippo";
                IndexView.__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());
                this.$el.append(this.footer.$el);                
                
                //return to enable chained calls
                this.$el.find("#indexBtn").addClass("ui-btn-active");
                return this;
            }
        });
        return IndexView;
    });