google.load("maps", "2");
google.load("visualization", "1", {packages:["columnchart"]});

// http://code.google.com/apis/visualization/documentation/gallery/columnchart.html
function draw_list_price_distribution_chart(chart_div, list_price_distribution_json, chart_title) {
  
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'List Price Range');
  data.addColumn('number', 'Houses');
  data.addColumn('number', 'Condos');
  data.addRows(list_price_distribution_json.length);
  for (var i = 0; i < list_price_distribution_json.length; i++) {
    data.setValue(i, 0, list_price_distribution_json[i].label);
    data.setValue(i, 1, list_price_distribution_json[i].res_count);
    data.setValue(i, 2, list_price_distribution_json[i].con_count);
  }
  var chart = new google.visualization.ColumnChart(chart_div);
  
  chart.draw(data, {
    // Can we add city name to title?
    title:  chart_title, 
    width:  600,
    height: 240,
    legend: 'top',
    
    // Coloring and formatting
    axisBackgroundColor:  '#f1f4f8',
    axisColor:            '#b3b3b3',
    borderColor:          {stroke:null, strokeSize:0},
    colors:               ['#527aa9','#65ad45'],
    focusBorderColor:     {stroke:'#333', strokeSize:2},
    legendTextColor:      '#333',
    titleColor:           '#333'
  });
}

function build_area_places_map(map_div, area, places) {
  if (GBrowserIsCompatible()) {
    places_map = new GMap2(map_div);
    places_map.setCenter(new GLatLng(0, 0), 1);
    places_map.disableDragging();
    places_map.setMapType(G_PHYSICAL_MAP);
    
    var bounds = new GLatLngBounds;
    
    function createMarker(point, place) {
      var icon = new GIcon(G_DEFAULT_ICON);
      icon.image = place.icon_url;
      
      icon.shadow           = "/images/markers/shadow_square.png";
      icon.iconSize         = new GSize(36, 38);
      icon.shadowSize       = new GSize(47, 38);
      icon.iconAnchor       = new GPoint(18, 28);
      icon.infoWindowAnchor = new GPoint(17, 12);
      icon.infoShadowAnchor = new GPoint(17, 12);
      
      var marker = new GMarker(point, { icon:icon });
      GEvent.addListener(marker, "click", function() {
        select_place(place);
      });
      
      GEvent.addListener(marker, 'mouseover', function() { mouseover_place(place); });
      GEvent.addListener(marker, 'mouseout',  function() { mouseout_place(place); });
      
      var p = $(place.dom_id);
      p.observe('mouseover', function() { mouseover_place(place); });
      p.observe('mouseout',  function() { mouseout_place(place); });
      
      place.marker = marker;
      
      return marker;
    }
    
    for (var i = 0; i < places.length; i++) {
      var place = places[i];
      var point = new GLatLng(place.latitude, place.longitude);
      places_map.addOverlay(createMarker(point, places[i]));
      bounds.extend(point);
    }
    
    places_map.setCenter(bounds.getCenter(), places_map.getBoundsZoomLevel(bounds));
  }
}

function mouseover_place(place) {
  place.marker.setImage(place.hover_icon_url);
  $(place.dom_id).addClassName('highlight');
  Tabber.switchTo($$('#places_tabset .tab')[place.tab_index], place.tab_index, $('places_tabset'))
}

function mouseout_place(place) {
  place.marker.setImage(place.icon_url);
  $(place.dom_id).removeClassName('highlight');
}