dipityMapView = function(container_id, event_arr, options)
{
  this.init = function()
  {
    elems.container = document.getElementById(container_id);

    if (elems.container && 
        typeof(GLatLngBounds) == "function" && 
        typeof(GBrowserIsCompatible) == "function" && 
        GBrowserIsCompatible())
    {
      regions.container = sz_util.getRegionWH(elems.container);

      var event_col_width = 0;
      var container_html = [];
      if (! this.getOption('no_leftcol')) {
        var event_col_width = 150;
        container_html.push('<div id="event_col" style="position:absolute; top:0px; left:0px; width:', event_col_width - 8, 'px; height:', regions.container.height, 'px;">',
          '  <div style="height:30px;"><a href="#" onClick="YAHOO.util.Event.stopEvent(event);map.playTimeline(0);">Play Events</a></div>',
          '  <ul id="event_list" style="overflow:auto; height:', regions.container.height - 38, 'px;"></ul>',
          '</div>');
      }

      var map_col_width = regions.container.width - event_col_width;

      container_html.push( 
          '<div id="map_pane" style="position:absolute; top:0px; left:', event_col_width, 'px; width:', map_col_width, 'px; height:', regions.container.height, 'px;"></div>');

      elems.container.innerHTML = container_html.join("");
      
      elems.map_pane = document.getElementById('map_pane');
      elems.event_col = document.getElementById('event_col');
      elems.event_list = document.getElementById('event_list');

      YAHOO.util.Event.addListener(document,  "click",  function(e) {  this_obj.handleDocClick(e); });
      
      gmap = new GMap2(elems.map_pane);
      gmap.addControl(new GSmallMapControl());
      this.setMapCenterZoom();
      this.addMarkers();
    } else {
      elems.container.innerHTML = "<div style='margin:100px auto; font-size:16px; text-align:center;'>Sorry, could not load the Google Maps API library.  Please check your internet connection.</div>";
    }
  }


  this.setMapCenterZoom = function()
  {
    var lats = 0;

    var min_lat = null;
    var max_lat = null;
    var min_lon = null;
    var max_lon = null;

    var lons = 0;
    var count = 0;
    var points = [];
    for (var idx in event_arr) {
      if (event_arr[idx] != '') {
        var lat_lon_str = event_arr[idx]['lat_lon'];
        if (lat_lon_str) {
          var lat_lon = lat_lon_str.split(',');

          var lat = parseFloat(lat_lon[0]);
          var lon = parseFloat(lat_lon[1]);

          if (min_lat == null || lat < min_lat) { min_lat = lat; }
          if (max_lat == null || lat > max_lat) { max_lat = lat; }

          if (min_lon == null || lon < min_lon) { min_lon = lon; }
          if (max_lon == null || lon > max_lon) { max_lon = lon; }
        }
      }
    }

    var bounds = new GLatLngBounds( new GLatLng(min_lat, min_lon), new GLatLng(max_lat, max_lon) );
    var zoom = 16;
    if (event_arr.length > 1) {
      zoom = gmap.getBoundsZoomLevel(bounds);
    }
    if (zoom > 16) { zoom = 16; }

    gmap.setCenter(bounds.getCenter(), zoom);
  }


  this.handleDocClick = function(e)
  {
    // just used to stop slideshow
    if (play_timer) {
      clearTimeout(play_timer);
      play_timer = null;
    }
  }


  this.playTimeline = function(idx)
  {
    this.popupMarker(eid_list[idx]);

    if (idx + 1 < eid_list.length) { 
      play_timer = setTimeout( function() { this_obj.playTimeline(idx + 1); }, 3000 );
    } else {
      setTimeout( function() { eid_to_marker[ eid_list[eid_list.length - 1] ].closeInfoWindow(); }, 3000 );
    }
  }

  this.addMarkers = function()
  {
    var event_col_arr = [];

    for (var idx in event_arr) {
      if (event_arr[idx] != '') {
        var item = event_arr[idx];
        var lat_lon_str = item['lat_lon'];
        if (lat_lon_str)
        {
          //console.log(lat_lon_str);
          var lat_lon = lat_lon_str.split(',');
          var marker = new GMarker(new GLatLng(lat_lon[0], lat_lon[1]));
          marker.eid = item.eid;

          gmap.addOverlay(marker);

          eid_list.push(item.eid);
          eid_to_marker[item.eid] = marker;
          eid_to_html[item.eid] = this.getMarkerHtml(item);

          if (! this.getOption('no_infowindow')) {
            marker.bindInfoWindowHtml( eid_to_html[item.eid] );
            GEvent.addListener(marker, "infowindowclose", function() { this_obj.unHighlightEvent(this.eid); });
          }
          GEvent.addListener(marker, "click", function() { this_obj.handleMarkerClick(this.eid); });
        }

        if (! this.getOption('no_leftcol')) {

          event_col_arr.push('<li id="event_', item.eid, '"><a href="#" onClick="YAHOO.util.Event.stopEvent(event);map.popupMarker(\'', item.eid, '\');"><div class="datetime">', item.datetime, '</div><div class="title">', item.title, '</div></a></li>');
        }
      }
    }
    if (! this.getOption('no_leftcol')) {
      event_col_arr.push('<li style="height:20px;"></li>');
      elems.event_list.innerHTML = event_col_arr.join("");
    }
  }


  this.handleMarkerClick = function(eid)
  {
    this.highlightEvent(eid);
    this.on_marker_click.fire(eid);
  }

  this.popupMarker = function(eid)
  {
    if (eid_to_marker[eid]) {
      eid_to_marker[eid].openInfoWindowHtml(eid_to_html[eid]);
      this.highlightEvent(eid);
    } else {
      gmap.closeInfoWindow();
    }
  }

  this.highlightMarker = function(eid)
  {
    if (highlightedMarkerEid != null) {
      this.unHighlightMarker(highlightedMarkerEid);
    }
    if (eid_to_marker[eid]) {
      eid_to_marker[eid].setImage(dipity.asset_url + "/images/markeryellow.png");
      gmap.panTo(eid_to_marker[eid].getLatLng());
      this.highlightEvent(eid);
      highlightedMarkerEid = eid;
    }
  }

  this.unHighlightMarker = function(eid) {
    if (eid_to_marker[eid]) {
      eid_to_marker[eid].setImage("http://maps.google.com/intl/en_us/mapfiles/marker.png");
      this.unHighlightEvent(eid);
    }
  }

  this.highlightEvent = function(eid) {
    var elem = document.getElementById('event_' + eid);
    if (elem) {
      YAHOO.util.Dom.addClass(elem, "highlighted");
      elem.focus();
    }
  }

  this.unHighlightEvent = function(eid) {
    YAHOO.util.Dom.removeClass('event_' + eid, "highlighted");
  }

  this.getMarkerHtml = function(item)
  {
    var html_arr = [ "<h2 style='width:300px;overflow:hidden;'>", 
        (item['link'] ? '<a target="_top" href="' + item['link'] + '">' : '' ), item['title'], (item['link'] ? '</a>' : ''), "</h2>", item['datetime']];
    if (item['img_url'] && !this.getOption('no_popup_imgs')) {
      html_arr.push('<div style="margin-top:8px;width:300px; height:200px; text-align:center; overflow:hidden;">', 
        (item['link'] ? '<a target="_top" href="' + item['link'] + '">' : '' ), 
        '<img height="200" style="border:none;" src="', item['img_url'], '">',
        (item['link'] ? '</a>' : ''), 
        '</div>');
    }
    if (typeof(item.descrptn) == "string") {
      html_arr.push('<div style="width:240px;margin-top:8px;">', item['descrptn'].substr(0,200), '</div>');
    }

    return html_arr.join("");
  }

  this.getOption = function(key) {
    if (options && typeof(options[key]) != 'undefined') {
      return options[key];
    }
  }

  var this_obj = this;
  var gmap = null;
  var elems = {};
  var regions = {};
  var eid_to_marker = {};
  var eid_to_html = {};
  var eid_list = [];
  var play_timer = null;
  var highlightedMarkerEid = null;

  this.on_marker_click = new YAHOO.util.CustomEvent('map_marker_click');

  this.init();
}

if (document.getElementById('map')) {
  var map = new dipityMapView('map', event_arr, typeof(dipity_map_options) != "undefined" ? dipity_map_options : null);
}