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

  var CategoryView = BaseView.extend({

    collection: null,
    categoryName: null,
    //initialize template
    template:_.template(categoryViewTemplate),
    itemtemplate:_.template(categoryItemTemplate),
    
    initialize: function (options) {
        var self = this;
        CategoryView.__super__.initialize.call(this);
        this.collection = options.collection;
        this.categoryName = options.categoryName;
        this.collection.fetch({ 
			success: function(data, textStatus, jqXHR){
				self.renderItem(); 
			}
		//success: function(){ self.renderItem(); } 
		});      
    },
    
    renderItem: function(){
        var $ul = $('#allRicette');
        
        var items = this.itemtemplate({data:this.collection.toJSON()});
        
        $ul.html( items );            
        $ul.listview( "refresh" );
        $ul.trigger( "updatelayout");
        
        $ul.find('input[type=radio].star').rating({
            callback: function (value, link) {
                var tip = $('#hover-test');
                if (value === undefined)
                {
                    $('#hover-test').html("Nessuna" || 'value: ');
                }
                else
                    $('#hover-test').html(link.title || 'value: ' + value);
            }
        });
                    
        $.mobile.loading( 'hide' );
        //$( '[data-alpha="true"]' ).alphascroll();
    },
    
    //render the content into div of view 
    render: function(){
        //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;
});