var map;
 var markersArray = [];

 function clearMarker() {
   if (markersArray) {
      for (i in markersArray) {
        markersArray[i].setMap(null);
      }
    }
 }


$(document).ready(function()   {
   clearMarker();
  var mylat = document.getElementById("user_lat").value;
   var mylng = document.getElementById("user_lng").value;
     var mylatlng = new google.maps.LatLng(mylat, mylng);

function handler(location) {
    clearMarker();
   var latlng = map.getCenter();
    $.get('/', {lat: latlng.lat() , lng: latlng.lng()},
    function(data) {

        var letter = 'a';
        for (var i = 0; i < places.length; i++) {
            var latlng = new google.maps.LatLng(places[i].lat, places[i].lng);
            bounds.extend(latlng);
            myMarker[i] = createMarker(latlng, places[i], letter);
            myMarker[i].setMap(map);
            letter = String.fromCharCode(letter.charCodeAt() + 1);
        };
        if (!places.length) {
            map.setZoom(12);
        }
        else {
            map.fitBounds(bounds);
        }
    },
    "script");
}

  //if (!navposition) {
//  var navposition = navigator.geolocation.getCurrentPosition(handler);
//}

  map = new google.maps.Map($("#map").get(0), options);
   var infowindow = new google.maps.InfoWindow();

     $(".pagination a").live("click", function() {
          $(".pagination").html("Loading more places...");
            clearMarker();
            $.get(this.href, null,
              function(data) {
              var latlng =  map.getCenter();
              var letter = 'a';
               for (var i = 0; i < places.length; i++) {
                   var latlng = new google.maps.LatLng(places[i].lat, places[i].lng);
                    bounds.extend(latlng);
                    myMarker[i] = createMarker(latlng, places[i], letter);
                    myMarker[i].setMap(map);
                    letter = String.fromCharCode(letter.charCodeAt() + 1);
               };
               if (!places.length) {
                 map.setZoom(12);
               }
               else {
               map.fitBounds(bounds);
               }
              }
              , "script");

          return false;
      });

    if (typeof places != 'undefined') {
        var options = {
               navigationControlOptions: {
                 style: google.maps.NavigationControlStyle.DEFAULT
             },
             // scaleControl: true,
             zoom: 13,
             center: mylatlng,
             mapTypeId: google.maps.MapTypeId.ROADMAP,
             scrollwheel: false
         };
         var map = new google.maps.Map($("#map").get(0), options);
         var infowindow = new google.maps.InfoWindow();


        function updateLocation(){
          //Map's center coordinates we'll use for reverse geocoding
            clearMarker();
            $.get(this.href, {lat: latlng.lat() , lng: latlng.lng()},
              function(data) {
              var latlng =  map.getCenter();
               var u_marker = new google.maps.Marker({
                     position: latlng,
                     map: map,
                     title: "You are here",
                     icon: "http://maps.google.com/mapfiles/arrow.png"
                 });
                  markersArray.push(u_marker);
                 u_marker.setMap(map);
                 google.maps.event.addListener(u_marker, "click",
                 function() {
                     map.panTo(u_marker.getPosition());
                 });
              var letter = 'a';
               for (var i = 0; i < places.length; i++) {
                   var latlng = new google.maps.LatLng(places[i].lat, places[i].lng);
                    bounds.extend(latlng);
                    myMarker[i] = createMarker(latlng, places[i], letter);
                    myMarker[i].setMap(map);
                    letter = String.fromCharCode(letter.charCodeAt() + 1);
               };

               if (!places.length) {
                 map.setZoom(12);
               }
               else {
               map.fitBounds(bounds);
               }
              }
              , "script");
        }


        function createMarker(latlng, place, letter) {
            var image = 'http://i.localfoody.net/images/m/' + place.category_id + '/' + letter + '.png';
            var marker = new google.maps.Marker({
                position: latlng,
                map: map,
                title: place.name,
                icon: image
            });
            var html = '<a href="/places/' + place.id + '">' + place.name + '</a></strong>' + '<br /><a href="/categories/' + place.category_id + '">' + category[place.category_id] + '</a>';
            google.maps.event.addListener(marker, "click",
            function() {
                infowindow.close();
                map.panTo(marker.getPosition());
                infowindow.setContent(html);
                infowindow.open(map, marker);
            });
                google.maps.event.addListener(marker, "click",
                function() {
                    infowindow.close();
                    infowindow.setContent(html);
                    infowindow.open(map, marker);
                });
            markersArray.push(marker);
            return marker;
        }

        var bounds = new google.maps.LatLngBounds();
        var letter = 'a';
        var myMarker = [];
       // bounds.extend(mylatlng);
        for (var i = 0; i < places.length; i++) {
            var latlng = new google.maps.LatLng(places[i].lat, places[i].lng);
            bounds.extend(latlng);
            myMarker[i] = createMarker(latlng, places[i], letter);
            myMarker[i].setMap(map);
            letter = String.fromCharCode(letter.charCodeAt() + 1);

        }
        if (!places.length) {
          map.setZoom(12);
        }
        else {
        map.fitBounds(bounds);
        }

        var u_marker = new google.maps.Marker({
            position: mylatlng,
            map: map,
            title: "You are here",
            icon: "http://maps.google.com/mapfiles/arrow.png"
        });
        u_marker.setMap(map);
        markersArray.push(u_marker);
        google.maps.event.addListener(u_marker, "click",
        function() {
            map.panTo(u_marker.getPosition());
        });
    }
    var mapMoveTimer;
    google.maps.event.addListener(map, 'dragend',function()
                {
                   function finished(){
                    google.maps.event.trigger(map, 'moveend');
                    }
                    clearTimeout(mapMoveTimer);
                    mapMoveTimer=setTimeout(function(){
                      finished();}, 500);
                    });

    google.maps.event.addListener(map, 'moveend',function() {
                   updateLocation();
                });

    var oldHeight,
    oldWidth;
    $('#map_expand').live("click",
    function() {
        oldHeight = $('#map').css("height");
        oldWidth = $('#map').css("width");
        window.scroll(0, 0);
        $('#map').css({
            'position': 'absolute',
            'left': '0px',
            'top': '145px',
            'height': '100%',
            'width': '100%',
            'z-index': '25'
        });
        $('#shrink').css({
            'position': 'absolute',
            'right': '20px',
            'bottom': '20px',
            'z-index': '26',
            'visibility': 'visible'
        });
        google.maps.event.trigger(map, "resize");
        map.fitBounds(bounds);
    });
        $('#shrink').live("click",
    function() {
        $('#map').css({
            'position': 'relative',
            'top': '0px',
            'float': 'left',
            'height': oldHeight,
            'width': oldWidth,
            'z-index': '1'
        });
        $('#shrink').css({
            'visibility': 'hidden'
        });
        google.maps.event.trigger(map, "resize");
        map.fitBounds(bounds);
    });
});