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

            var ItemView = BaseView.extend({
                collRicetta: null,
                collIngredienti: null,
                fetchedRicetta: false,
                fetchedIngredienti: false,
                galleryWall: null,
                //initialize template
                template: _.template(itemViewTemplate),
                initialize: function (options) {
                    this.id = "ItemView";
                    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();
                        }});
                },
                isStayInPage: function () {
                    return false;
                },
                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');
                            }
                    );
                },
                onShowed: function(){
                    var self = this;
                    $('body').scrollTop(0);
                    
                    this.galleryWall = new Freewall("#Gallery");
                    this.galleryWall.reset({
                        selector: '.brick',
                        animate: true,
                        cellW: 150,
                        cellH: 'auto',
                        onResize: function() {
                            self.galleryWall.fitWidth();
                        }
                    });

                    var images = this.galleryWall.container.find('.brick');
                    images.find('img').load(function() {
                        self.galleryWall.fitWidth();
                    });


                    $.mobile.loading('hide');
                },
                //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];
                        var countImgLoaded = 0;
                        Profile.existRicettaBloccoNote(ric.ricetta_id,
                                function (exist) {

                                    var ric = self.collRicetta.toJSON()[0];
                                    
                                    self.$el.append(self.template({
                                        ricetta: ric,
                                        ingredienti: self.collIngredienti.toJSON(),
                                        profile: Profile,
                                        images: Images,
                                    }));

                                    self.scrollPositions = [];
                                    self.$arrayContent = self.$el.find('div[data-role="content"]');
                                    self.$arrayNavBar = self.$el.find('div[data-role="navbar"] a');
                                    
                                    self.$photos = self.$el.find('#contentFoto a');
                                    self.$el.find('#contentFoto a img').load(function(){
                                        countImgLoaded++;
                                        if(self.$photos.length == countImgLoaded)
                                            if(self.galleryWall !== null)
                                                self.galleryWall.fitWidth();
                                    });

                                    self.$photos.on("click", function(e){
                                        e.preventDefault();
                                        $.mobile.loading('show', {
                                            text: 'Caricamento immagine...',
                                            textVisible: true,
                                            //theme: 'z',
                                            html: ""
                                        });

                                        var photoID = $(this).attr("data-photoid");

                                        self.$el.find('#photoFull').attr("src" , myManifest.Settings.DefaultURL + "/api/photo/" + photoID);
                                        self.$el.find('#photoFull').load(function(){
                                            $.mobile.loading('hide');                                            
                                            self.$el.find('#fullPhotoPopupDialog').popup("open");    
                                        });
                                        
                                    });
                                    
                                    for (var i = self.$arrayContent.length - 1; i >= 0; i--) {
                                        self.scrollPositions.push(0);
                                    };

                                    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.scrollPositions[this.indexContent] = $('body').scrollTop();
                        this.indexContent = newIndex;
                        this.switchContent();                        
                        $('body').scrollTop(this.scrollPositions[this.indexContent]);
                    }
                },
                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');
                    if(this.indexContent == 2)
                        this.galleryWall.fitWidth();
                }
            });
            return ItemView;
        });