var Google_map = new Class(
{
  initialize: function()
  {
    this.loadedBounds     = [];
    this.currBounds       = [];
    this.currLoadedBounds = [];
    this.markers          = [];
    this.zoomed           = true;
    this.arrNotFound      = [];
    this.zoomlevel        = 0;
    this.load();
  },
  load: function() 
  {
    var self = this;
    if (GBrowserIsCompatible()) 
    {
      this.map = new GMap2($("googlemap"));
      this.map.setCenter(new GLatLng(52.084207, 5.082766), 7);
      this.map.addControl(new GMapTypeControl());
      this.map.addControl(new GSmallMapControl());
      this.map.setMapType(G_SATELLITE_TYPE);
      this.geocoder = new GClientGeocoder();
      GEvent.addListener(this.map,'moveend', function()
      {
        if (self.zoomed)
        {
          self.getViewBounds();
          if(!self.coordLoaded())
          {
            self.getLoadBounds();
          }
        }
      });
      GEvent.addListener(this.map,'zoomend', function(e)
      {
        if (e > objGMap.zoomlevel)
        {
          objGMap.getViewBounds();
          objGMap.getLoadBounds();
          objGMap.zoomlevel = e;
        }
      });
      
      
    }
  },
  // Produces three types of bounds
  // - Viewport bounds
  // - loadedBounds (area currently loaded)
  // - Triggerbounds (if outside this area the markers will be reloaded )
  getViewBounds: function() 
  {
    var viewBounds        = this.map.getBounds();
    var southWest         = viewBounds.getSouthWest();
    var northEast         = viewBounds.getNorthEast();
    
    this.viewBounds       = [northEast.lat(), southWest.lat(), northEast.lng(), southWest.lng()];
    
    return this.viewBounds.join(',');
  },
  getLoadBounds: function(id, point)
  {
    var viewBounds        = this.map.getBounds();
    var southWest         = viewBounds.getSouthWest();
    var northEast         = viewBounds.getNorthEast();
    var currViewLat       = northEast.lat() - southWest.lat();
    var currViewLng       = northEast.lng() - southWest.lng();
    this.loadedBounds     = [northEast.lat()+currViewLat, southWest.lat()-currViewLat, northEast.lng()+currViewLng, southWest.lng()-currViewLng];
    this.triggerBounds    = [northEast.lat()+(currViewLat/2), southWest.lat()-(currViewLat/2), northEast.lng()+(currViewLng/2), southWest.lng()-(currViewLng/2)];
    
    //chain call
    this.getMarkers(id, point);          
  },
  getMarkers: function(id, point)
  {
    if (this.loadedBounds)
    {
      var self      = this;
      var url       = '/ajax/ajax.php?action=getBounds&bounds='+this.loadedBounds+'&zoom='+this.zoomlevel;
      if (point)
      {
        var urlPoint  = [point.lat(), point.lng()].join(',');
        url           += '&id='+id+'&point='+urlPoint;
      }
      var objAjax   = new Ajax (url, 
      {
        method: 'post',
        onComplete: function(res)
        {
          self.loadMarkers(res);
        }
      });
      objAjax.self = this;
      objAjax.request();
    }
  },
  searchAddress: function(address, id) 
  { 
    var self = this;
    if(!address) { var address = $('search').value }
    if (this.geocoder) 
    {
      this.geocoder.getLatLng(address,function(point) 
      {
        if (!point) 
        {
          alert('adres niet gevonden');
          document.location.href = "/page/stap1/";
        } 
        else 
        {
          self.zoom(point);
          if (id)
          {
            self.getLoadBounds(id, point);
          }
          else
          {
            self.getLoadBounds(objGet['id'], point);
          }
          var content = $('content');
          if (content)
          {
            content       = Json.evaluate(content.value);
            self.addMarker(point, true, content);
          }
          else
          {
            self.addMarker(point, true);            
          }
          // self.setPosition(point);
        }
      });
    }
  },
  loadMarkers: function(res)
  {
    var marker = 0;
    if (this.markers.length > 0)
    {
      while (this.markers.length > 0)
      {
        marker = this.markers.pop();
        if (!marker.draggable)
        {
          this.map.removeOverlay(marker);
        }
      }
    }
      
      var res       = Json.evaluate(res);
      var markers   = res['marker'];
      var cntApk    = res['marker'].length;
      var i         = 0;
      if (cntApk > 0)
      {
        while(i < cntApk)
        {
          this.addMarker(new GLatLng(parseFloat(markers[i].lat), parseFloat(markers[i].lng)), false, markers[i]);
          i++;
        }
      }
  },
  addMarker: function(point, draggable, content)
  {
    // {draggable: true} maakt alles uiteraard draggable
    // var marker = new GMarker(point, this.getIcon());
    if (draggable)
    {
      var marker = new GMarker(point, {icon: this.getIcon('red')});
      // var marker = new GMarker(point, {draggable: true, icon: this.getIcon('red')});
      marker.draggable = true;
    }
    else
    {
      var marker = new GMarker(point, {icon: this.getIcon()});      
    }
    
    if(!marker) {return false;}
    GEvent.addListener(marker, "click", function() 
    {
      if (content)
      {
        marker.openInfoWindowHtml('<p class="popup" style="line-height: 12px; display: block; float: left; font-family: verdana, arial; font-size: 10px; color: #000;"><img style="float: left; margin: 0" src="/static/image/std_icon.jpg" /><b>'+content['name']+':</b> <br />'+content['txt']+'<br /><br /><a href="/page/splash/?x=mainMap" style="color: #333; text-align: right; font-size: 10px; font-family: verdana, arial; display: block;">Teken ook!</a>', {maxWidth: 250});
      }
    });
    GEvent.addListener(marker, "dragstart", function() {
      map.closeInfoWindow();
      });

    GEvent.addListener(marker, "dragend", function() {
      });
    this.map.addOverlay(marker);
    this.markers.push(marker);
    if(draggable && content && content['name'])
    {
      marker.openInfoWindowHtml('<p class="popup" style="line-height: 12px; display: block; float: left; font-family: verdana, arial; font-size: 10px; color: #000;"><img style="float: left; margin: 0" src="/static/image/std_icon.jpg" /><b>'+content['name']+':</b> <br />'+content['txt']+'<br /><br /><a href="/page/splash/?x=mainMap" style="color: #333; text-align: right; font-size: 10px; font-family: verdana, arial; display: block;">Teken ook!</a>', {maxWidth: 250});
    }
    return marker;
  },
  getIcon: function(color)
  {
    if(!this.icon || color)
    {
      var icon              = new GIcon();
      if (color)
      {
        icon.image            = "/static/image/"+color+"_marker.png";
      } 
      else
      {
        icon.image            = "/static/image/green_marker.png";
      }      
      icon.shadow           = "/static/image/green_marker_shadow.png";
      icon.iconSize         = new GSize(39, 45);
      icon.shadowSize       = new GSize(61, 31);
      icon.iconAnchor       = new GPoint(20, 45);
      icon.infoWindowAnchor = new GPoint(29, 10);
      if (color)
        return icon;
      this.icon             = icon;
    }
    return this.icon;
  },
  //
  // Checks is reload of data is needed
  coordLoaded: function(bounds) 
  {
    if (this.loadedBounds.length == 0 || this.triggerBounds.length == 0) { return false}
    this.getViewBounds();
    var view  = this.viewBounds;
    var trig  = this.triggerBounds;

    if(view[0] > trig[0]){return false;}
    if(view[1] < trig[1]){return false;}
    if(view[2] > trig[2]){return false;}
    if(view[3] < trig[3]){return false;}
    return true;
  },
  getMap: function(){return this.map},
  zoom: function(point) {this.map.setCenter(point,13); this.zoomed=true; },
  setPosition: function(point)
  {
    // this.form.lng.value = point.lng();
    // this.form.lat.value = point.lat();
  },
  ajaxAddMarker: function(form)
  {
    var self  = this;
    var url   = '/ajax/ajax.php?action=getBounds&bounds='+this.loadedBounds;
    var objAjax = new Ajax(url,
    {
        onComplete: function(res)
        {
          self.loadMarkers(res);
        }
    }).request();
    return false;
  },
  getMarkerById: function(id)
  {
    var url   = '/ajax/ajax.php?action=getMarker&id='+id;
    var objAjax = new Ajax(url,
    {
        onComplete: function(res)
        {
          var marker  = Json.evaluate(res);
          marker      = marker.marker;
          var point   = new GLatLng(marker.lat, marker.lng);
          this.self.zoom(point);
          this.self.addMarker(point, true, marker);          
          this.self.getLoadBounds();
        }
    });
    objAjax.self = this;
    objAjax.request();
    return false;
  }
});

/* ONLOAD EVENTS */
// window.addEvent('domready', function(){
//   objGMap  = new Google_map('theForm');
//   map      = objGMap.getMap();
// 
//   if(objGet && objGet['id'])
//   {
//     objGMap.getMarkerById(objGet['id']);
//   }
//   else
//   {
//     objGMap.getLoadBounds();
//   }
// });
window.addEvent('unload', GUnload);