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

            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",
                    "click #optionBtn": "optionBtn",
                    "click #copyBtn": "copyBtn"
                },
                copyBtn: function(e) {
                    e.preventDefault();
                },
                optionBtn: function(e) {
                    e.preventDefault();
                    var self = this;                    
                    self.$el.find('#optionPopupDialog').popup("open");

                    if(myManifest.Agent.browser.name == "Safari" || myManifest.Agent.browser.name == "Mobile Safari"){
                        var field = self.$el.find('#copyField');
                        field.val(window.location.href);
                        field[0].setSelectionRange(0, field[0].value.length);
                    }
                },
                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');
                                self.$el.find('#optionPopupDialog').popup("close");
                            }
                    );
                },
                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();
                    });

                    self.indexContent = 0;
                    self.switchContent();
                    $.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,
                                    }));

                                    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);
                                    });                                    

                                    if(myManifest.Agent.browser.name != "Safari" || myManifest.Agent.browser.name != "Mobile Safari"){
                                        new Clipboard('#copyBtn', {
                                            text: function(trigger) {
                                                self.$el.find('#optionPopupDialog').popup("close");
                                                return window.location.href;
                                            }
                                        });
                                    }

                                    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');
                    var content = $(this.$arrayContent[this.indexContent]);
                    if(content.css('min-height') == "0px" || content.css('min-height') == ""){
                        var minHeight = myManifest.Settings.Device.Height - $('[data-role="header"]').height() - $('[data-role="footer"]').height() - 37;
                        content.css('min-height', minHeight);
                    }
                    content.show();
                    var navBarItem = $(this.$arrayNavBar[this.indexContent]);
                    navBarItem.addClass('ui-btn-active');
                    navBarItem.addClass('ui-state-persist');
                    if(this.indexContent == 2)
                        this.galleryWall.fitWidth();
                }
            });
            return ItemView;
        });