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 #optionBtn": "optionBtn",
                    "click #backBtn": "backBtn",
                    "click #scattaPhotoBtn": "scattaPhotoBtn",
                    "change #cameraFile": "cameraFileChanged",
                    "click #uploadPhotoBtn": "uploadPhotoBtn",
                    "change #galleyFile": "galleyFileChanged"
                },
                backBtn: function(e) {
                    e.preventDefault();
                    window.history.back();
                },
                optionBtn: function(e) {
                    e.preventDefault();
                    var self = this;
                    self.$el.find('#optionPopupDialog').popup("open");
                },
                scattaPhotoBtn: function(e) {
                    e.preventDefault();
                    var self = this;

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

                    $("#cameraFile").click();
                },
                uploadPhotoBtn: function(e) {
                    e.preventDefault();
                    var self = this;

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

                    $("#galleyFile").click();
                },
                loadPhoto: function(objInputFile){
                    var self = this;
                    self.$el.find('#optionPopupDialog').popup("close");
                    $.mobile.loading( "show", {
                        text: "Caricamento immagine in corso...",
                        textVisible: true,
                        theme: "a",
                        textonly: false
                    });
                    
                    var ric = this.collRicetta.toJSON()[0];

                    var data = new FormData();
                    data.append("ricetta_id", ric.ricetta_id);
                    data.append("image", objInputFile[0].files[0]);
                    data.append("keyStore", Profile.getKeySave());

                    $.ajax({
                        url: myManifest.Settings.DefaultURL + "/api/photos",
                        cache: false,
                        contentType: false,
                        processData: false,
                        type: 'POST',
                        data: data,
                        success: function(msg) {
                            $.mobile.loading( "hide" );
                            alert("Immagine inviata con successo\n\nSarà cura degl'admin di validare la foto inviata");
                            objInputFile.val("");
                        }
                    });
                },
                galleyFileChanged: function(e) {
                    e.preventDefault();
                    this.loadPhoto($("#galleyFile"));
                },
                cameraFileChanged: function(e) {
                    e.preventDefault();
                    this.loadPhoto($("#cameraFile"));
                },
                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.$arrayContent.on("tap", function(e) {                                        
//                                        self.optionBtn(e);
//                                    });
                                    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;
        });