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

            var MapsView = BaseView.extend({

                map: null,
                markers: [],
                //initialize template
                template: _.template(mapsViewTemplate),
                infoWindowtemplate: _.template(infoWindowTemplate),

                initialize: function () {
                    this.id = "MapsView";
                    MapsView.__super__.initialize.call(this);
                },
                onShowed: function(){
                    var self = this;
                    var drawMap = function(LatLng){                        
                        var myOptions = {
                            zoom: 10,
                            center: LatLng,
                            mapTypeId: google.maps.MapTypeId.ROADMAP
                        };
                        self.map = new google.maps.Map($("#map-canvas")[0], myOptions);

                        var iconPM = {
                            url: "http://app.gruppolapastamadre.it/icon.png",
                            scaledSize: new google.maps.Size(24, 24)
                        };

                        self.map.addListener('bounds_changed', function() {
                              var bound = self.map.getBounds();
                              var latLngFrom = bound.getNorthEast();
                              var latLngTo = bound.getSouthWest();
                              $.ajax({
                                url: myManifest.Settings.DefaultURL + "/api/spacciatori/bound/" + latLngFrom.lat() + "/"+ latLngFrom.lng() + "/" + latLngTo.lat() + "/"+ latLngTo.lng(),
                                //dataType: "json",
                                //async: false,
                                type: 'GET',
                                success: function (resp) {
                                    resp.forEach(function(ele, index){
                                        if(!self.markers["|" + ele.Latitudine+ "|" + ele.Longitudine+ "|"])
                                        {
                                            var marker = new google.maps.Marker({
                                                position: new google.maps.LatLng(ele.Latitudine, ele.Longitudine),
                                                icon: iconPM,
                                                //label: ele.Name,
                                                title: ele.Name,
                                                map: self.map
                                              });
                                            self.markers["|" + ele.Latitudine+ "|" + ele.Longitudine+ "|"] = marker;

                                            var infowindow = new google.maps.InfoWindow({
                                                content: self.infoWindowtemplate({item: ele})
                                              });

                                            marker.addListener('click', function() {
                                                infowindow.open(self.map, marker);
                                            });
                                        }
                                    });
                                }
                                });
                          });
                    };
                    var defaultLatLng = new google.maps.LatLng(34.0983425, -118.3267434);  // Default to Hollywood, CA when no geolocation support
                    if ( navigator.geolocation ) {
                        function success(pos) {
                            // Location found, show map with these coordinates
                            drawMap(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
                        }
                        function fail(error) {
                            drawMap(defaultLatLng);  // Failed to find location, show default map
                        }
                        // Find the users current position.  Cache the location for 5 minutes, timeout after 6 seconds
                        navigator.geolocation.getCurrentPosition(success, fail, {maximumAge: 500000, enableHighAccuracy:true, timeout: 6000});
                    } else {
                        drawMap(defaultLatLng);  // No geolocation support, show default map
                    }
                },
                //render the content into div of view 
                render: function () {
                    if (this.created === true)
                    {
                        //this.header.title = "pippo";
                        MapsView.__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({app: myManifest, profile: Profile}));
                        this.$el.append(this.footer.$el);
                        this.$el.find("#infoBtn").addClass("ui-btn-active");
                    }
                    //$("#homeBtn").addClass("ui-btn-active");        
                    //return to enable chained calls
                    return this;
                }
            });
            return MapsView;
        });