var Displayer = {
  spinner: '/displayer/images/ajax-loader.gif',
  markerSmall: '/displayer/images/marker-small.gif',
  marker: '/displayer/images/generic.png',
  markerShadow: '/displayer/images/generic-shadow.png',
  imageWidth: 100,
  cycleFx: 'fade',
  cycleSpeed: 200,
  cycleTimeout: 12000,
  cycleRandom: 0,
  zoomLevel: 5,
  load: function(dir, id) {
    var self = this;
    var paused = false;
    google.load("maps", "2.x");
    google.setOnLoadCallback(function() {
      jQuery('body').bind('unload', function() {
        google.maps.Unload();
      });
      var container = jQuery('#' + id);
      var table = jQuery('<table cellpadding="0" cellspacing="0" border="0" class="displayer-table"/>');
      var tbody = jQuery('<tbody/>');
      var tr = jQuery('<tr/>');
      tr.appendTo(tbody);
      tbody.appendTo(table);
      var storyTd = jQuery('<td class="displayer-story"/>');
      var mapTd = jQuery('<td class="displayer-map"/>');
      storyTd.appendTo(tr);
      var cycle = jQuery('<div class="displayer-cycle"/>');
      mapTd.appendTo(tr);
      var mapDiv = jQuery('<div class="displayer-map-container"/>');
      cycle.prependTo(storyTd);
      table.appendTo(container);
      mapDiv.appendTo(mapTd);
      var nav = jQuery('<table class="displayer-nav" cellpadding="0" border="0" cellspacing="0"></table>');
      var navTbody = jQuery('<tbody/>');
      var navTr = jQuery('<tr/>');
      var prev = jQuery('<td align="left"><a href="#" class="displayer-prev">&lt; PREV</a></td>');
      var playPause = jQuery('<td align="center"><a href="#" class="displayer-playpause">PAUSE</a></td>');
      var next = jQuery('<td align="right"><a href="#" class="displayer-next">NEXT &gt;</a></td>');
      navTbody.appendTo(nav);
      navTr.appendTo(navTbody);
      prev.appendTo(navTr);
      playPause.appendTo(navTr);
      next.appendTo(navTr);
      nav.appendTo(container);
      var customIcon = new google.maps.Icon();
      customIcon.image = self.marker;
      customIcon.shadow = self.markerShadow;
      customIcon.iconSize = new google.maps.Size(24, 35);
      customIcon.shadowSize = new google.maps.Size(44, 35);
      customIcon.iconAnchor = new google.maps.Point(12, 35);
      customIcon.infoWindowAnchor = new google.maps.Point(12, 1);
      var map = new google.maps.Map2(mapDiv[0]);
      map.setCenter(new google.maps.LatLng(37.4419, -122.1419), 5);
      map.addControl(new google.maps.SmallZoomControl());
      var mapInitialized = false;
      var currentMarker = null;
      cycle.append(jQuery('<img/>').attr('src', self.spinner).attr('class', 'displayer-spinner'));
      jQuery.getJSON(dir + '/summary.json', function(data) {
        cycle.empty();
        jQuery.each(data, function(i, item) {
          if (item.loc && item.loc.a && item.loc.a.match(/\D/)) {
            var div = jQuery('<div class="displayer-item"/>');
            jQuery('<h3 class="displayer-name"/>').text(item.fn + ' ' + item.li + '.').appendTo(div);
            var loc = jQuery('<h4 class="displayer-loc"/>').text(' ' + item.loc.a.replace(/ \d+, USA$/, ''));
            var latlng = new google.maps.LatLng(item.loc.lat, item.loc.lng);
            var m = new google.maps.Marker(latlng, {icon: customIcon});
            if (!mapInitialized) {
              map.setCenter(new google.maps.LatLng(item.loc.lat, item.loc.lng), self.zoomLevel);
              mapInitialized = true;
              currentMarker = m;
            }
            div[0].displayer = {"latlng": latlng, marker: m};
            jQuery('<img/>').attr('src', self.markerSmall).attr('valign', 'middle').prependTo(loc)
            loc.appendTo(div);
            if (item.image) {
              jQuery('<img class="displayer-image"/>').attr('src', item.image).attr('width', self.imageWidth).appendTo(div);
            }
            var sumText = item.sum;
            if (item.diff) {
              sumText += ' ... ';
            }
            var sum = jQuery('<p class="displayer-sum"/>').text(sumText);
            if (item.diff) {
              var more = jQuery('<a class="displayer-more" href="index.htm"><nobr>[read more]</nobr></a>');
              more.bind('click', function(e) {
                e.preventDefault();
                cycle.cycle('pause');
                playPause.find('a').text('PLAY');
                paused = true;
                jQuery.facebox(function() {
                  jQuery.get(dir + '/full-' + item.id + '.html', function(data2) {
                    jQuery.facebox('<div>' + data2 + '</div>');
                  });
                });
              });
              more.appendTo(sum);
            }
            sum.appendTo(div);
            sum.appendTo(div);
            div.appendTo(cycle);
          }
        });
        cycle.cycle({
          fx: self.cycleFx,
          speed: self.cycleSpeed,
          timeout: self.cycleTimeout,
          random: self.cycleRandom,
          before: function() {
            map.removeOverlay(currentMarker);
            map.panTo(this.displayer.latlng);
            map.addOverlay(this.displayer.marker);
            currentMarker = this.displayer.marker;
          },
          next: next,
          prev: prev
        });
        playPause.bind('click', function(e) {
          e.preventDefault();
          if (paused) {
            cycle.cycle('resume');
            jQuery(this).find('a').text('PAUSE');
            paused = false;
          } else {
            cycle.cycle('pause');
            jQuery(this).find('a').text('PLAY');
            paused = true;
          }
        })
      });
    });
  }
};