define(['jquery', 'underscore', 'backbone','text!modules/item/itemViewTemplate.html', 'modules/base/baseView', 'classes/profile'],
    function($, _, Backbone, itemViewTemplate, BaseView, Profile){

        var ItemView = BaseView.extend({

            collRicetta: null,
            collIngredienti: null,

            fetchedRicetta: false,
            fetchedIngredienti: false,
            //initialize template
            template:_.template(itemViewTemplate),

            initialize: function (options) {
                var self = this;
                ItemView.__super__.initialize.call(this);
                this.collRicetta = options.collRicetta;
                this.collIngredienti = options.collIngredienti;

                    this.collRicetta.fetch({success: function() {
                            self.fetchedRicetta = true;
                            self.render();
                        }});
                    this.collIngredienti.fetch({success: function() {
                            self.fetchedIngredienti = true;
                            self.render();
                        }});
                },

            events: {
                "click #favoriteBtn": "favBtn",
                "click #backBtn": "backBtn"
            },

            backBtn:function(e){
                e.preventDefault();
                window.history.back();
            },

            favBtn:function(e){
                e.preventDefault();
                var self = this;
                var ric = this.collRicetta.toJSON()[0];

                if(!Profile.isConnected())
                {
                    self.$el.find('#popupDialog').popup("open");
                    return;
                }

                Profile.addRicettaBloccoNote(ric.ricetta_id,
                    function(msg) {
                        var favBtn = self.$el.find('#favoriteBtn');
                        favBtn.addClass('ui-disabled');
                    }
                );
            },
            //render the content into div of view
            render: function(){
                if(this.fetchedIngredienti && this.fetchedRicetta )
                {
                    ItemView.__super__.render.call(this);
                    var self = this;

                    var ric = self.collRicetta.toJSON()[0];

                    Profile.existRicettaBloccoNote(ric.ricetta_id,
                        function(exist) {
                            self.$el.append(self.template({
                                ricetta: self.collRicetta.toJSON()[0],
                                ingredienti: self.collIngredienti.toJSON()
                            }));

                            self.$arrayContent = self.$el.find('div[data-role="content"]');
                            self.$arrayNavBar = self.$el.find('div[data-role="navbar"] a');

                            var favBtn = self.$el.find('#favoriteBtn');
                            if(exist > 0)
                                favBtn.addClass('ui-disabled');

                            self.$arrayNavBar.on("click", function(e){
                                e.preventDefault();
                                var index = jQuery.inArray( this , self.$arrayNavBar);
                                self.goToContent(index);
                            });

                            self.$arrayContent.on("swipeleft", function(e) {
                                var index = jQuery.inArray(this, self.$arrayContent);
                                self.goToContent(index + 1 );
                            });
                            self.$arrayContent.on("swiperight", function(e) {
                                var index = jQuery.inArray(this, self.$arrayContent);
                                self.goToContent(index - 1 );
                            });
                            self.trigger("renderCompleted:Item",self);
                        }
                    );



                    //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

                    //return to enable chained calls
                    return this;
                }
            },

            goToContent:function(newIndex)
                {
                    if(this.$arrayContent.length > newIndex && newIndex >= 0)
                    {
                        this.indexContent = newIndex;
                        this.switchContent();
                    }
                },

            switchContent: function(){
                this.$arrayContent.hide();
                this.$arrayNavBar.removeClass('ui-btn-active');
                this.$arrayNavBar.removeClass('ui-state-persist');
                $(this.$arrayContent[this.indexContent]).show();
                $(this.$arrayNavBar[this.indexContent]).addClass('ui-btn-active');
                $(this.$arrayNavBar[this.indexContent]).addClass('ui-state-persist');
            }
        });
        return ItemView;
    });