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

            var HomeView = BaseView.extend({
                //initialize template
                template: _.template(homeViewTemplate),
                initialize: function () {
                    var self = this;
                    this.id = "HomeView";
                    HomeView.__super__.initialize.call(this);
                    if (Profile.data.picture === null)
                    {
                        Profile.setPictureEvent = this.changePicture;
                    }
                },
                changePicture: function (val) {
                    var item = $('.itemMenuHomeMetro a[href="#settingsView"]');
                    if (item.length > 0)
                    {
                        $('.profileClass').removeClass("profileClass");
                        item.css('background', 'url(' + val + ') 50% 50% no-repeat');
                    }
                },
                events: {
                    "click #noSpacc": "noSpacc",
                },

                freeWall: null,

                noSpacc: function(){
                    window.localStorage.setItem("noSpacc", 1);
                },

                calculateSize: function(){
                    var size = 100;
                    var widthDevice = (window.innerWidth > 0) ? window.innerWidth : screen.width;
                    if(window.matchMedia("(orientation: portrait)").matches)
                    {
                        if(widthDevice > 1800)
                        {
                            size = 350;
                        }
                        else if(widthDevice >= 900)
                        {
                            size = 200;
                        }
                        else if(widthDevice >= 700)
                        {
                            size = 250;
                        }
                        else if(widthDevice >= 600)
                        {
                            size = 200;
                        }
                        else if(widthDevice >= 320)
                        {
                            size = 120;
                        }
                        else
                        {
                            size = 100;
                        }
                    }
                    else {
                        if(widthDevice >= 1700)
                        {
                            size = 350;
                        }
                        else if(widthDevice >= 1500)
                        {
                            size = 300;
                        }
                        else if(widthDevice >= 1400)
                        {
                            size = 245;
                        }
                        else if(widthDevice >= 1200)
                        {
                            size = 250;
                        }
                        else if(widthDevice >= 900)
                        {
                            size = 180;
                        }
                        else if(widthDevice >= 700)
                        {
                            size = 140;
                        }
                        else if(widthDevice >= 690)
                        {
                            size = 120;
                        }
                        else if(widthDevice >= 640)
                        {
                            size = 125;
                        }
                        else if(widthDevice >= 550)
                        {
                            size = 100;
                        }
                        else if(widthDevice >= 400)
                        {
                            size = 85;
                        }
                        else
                        {
                            size = 60;
                        }
                    }                    

                    return size;
                },

                setupFreeWall: function(){
                    var self = this;
                    //$('.itemMenuHomeMetro').first().attr("lastSize", size);
                    if (this.freeWall === null) {
                        this.freeWall = new freewall("#menuHomeMetro");
                    }
                    this.freeWall.reset({
                        selector: '.itemMenuHomeMetro',
                        animate: true,
                        cellW: self.calculateSize,
                        cellH: self.calculateSize,
                        onResize: function () {
                            //this.refresh();
                            this.fitWidth();
                            //Debug.writeMessage("onResize");
                        }
                    });
                    this.freeWall.fitWidth();
                },                
                onShowed: function ()
                {
                    var self = this;

                    self.setupFreeWall();
                    
                    if (Profile.data.picture !== null)
                    {
                        this.changePicture(Profile.data.picture);
                    }
                    if(myManifest.Settings.ShowStartMessage && 
                       Profile.data.isSpacc === "0" &&
                       window.localStorage.getItem("noSpacc") === null)
                    {
                        this.$el.find("#nomeUtente").text(Profile.data.name);
                        this.$el.find("#messaggioSpacciatore").popup("open");
                    }
                    //Debug.writeMessage(myManifest.Agent.ua);
                },
                onClosing: function () {
                    if (this.freeWall !== null)
                        this.freeWall.reset({
                            selector: '.itemMenuHomeMetro',                            
                            onResize: function(){}
                        });
                },
                //render the content into div of view
                render: function () {
                    if (this.created === true)
                    {
                        //this.header.title = "pippo";
                        HomeView.__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({profile: Profile}));
                        this.$el.append(this.footer.$el);
                    }
                    this.$el.find("#homeBtn").addClass("ui-btn-active");
                    //$("#homeBtn").addClass("ui-btn-active");
                    //return to enable chained calls
                    return this;
                }
            });
            return HomeView;
        });