angular.module('fluro').directive('listMap', function($window, $timeout) {
    return {
        restrict: "E",
        replace: true,
        template: '<div class=map-outer><div class=map-inner></div></div>',
        scope: {
            model: "=ngModel",
            selectCallback: "=ngSelectCallback",
            params:'&ngParams'
        },
        link: function($scope, $element, $attrs) {

            var mapOptions;
            var map;
            var marker;
            
            var mapOptions = {
                    zoom: 15,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                   // disableDefaultUI: true,
                    maxZoom: 15,
                    scrollwheel: false,
                    draggable: false,
                };
                
                
            if($scope.ngParams) {
                mapOptions = $scope.ngParams();
            }
            

            var initialize = function() {
                
                map = new google.maps.Map($element.find('.map-inner').get(0), mapOptions);


                angular.element($window).bind('resize', fitMap);

            };

            var createMarker = function(location) {
                if (location.latitude && location.longitude) {

                    var position = new google.maps.LatLng(location.latitude, location.longitude);

                    map.setCenter(position);

                    marker = new google.maps.Marker({
                        map: map,
                        position: position,
                        title: location.title
                    });

                    google.maps.event.addListener(marker, 'click', function() {

                        $timeout(function() {
                            if ($scope.selectCallback) {
                                $scope.selectCallback(location)
                            }
                        })

                    });
                }
            };

            $scope.$watch("model", function(model) {
                if (model) {
                    _.each(model, createMarker);
                }

                fitMap();
            });
            
            
            // get all markers and fit everything inside the map view
            var fitMap = function() {

                var bounds = new google.maps.LatLngBounds();

                _.each($scope.model, function(location) {
                    if (location.latitude && location.longitude) {
                        var myLatLng = new google.maps.LatLng(location.latitude, location.longitude);
                        bounds.extend(myLatLng);
                    }
                });

                map.fitBounds(bounds);

            }

            initialize();
        },
    };
});;