/**
 * The picture gallery and map viewer for the project pages.
 */

var Project = function(expr, initial) {
  this.container = $(expr);
  this.imageContainer = $('img', this.container);
  this.map = null;
  this.routeDetails = $('#route_details').remove().html();
  this.mapContainer = $('<div class="map">').hide().appendTo(this.container);
  this.mapVisible = false;
  this.mapInitialized = false;
};

Project.prototype.showPicture = function(url) {
  var self = this;
  (this.mapVisible ? this.mapContainer : this.imageContainer)
    .fadeOut(400, function() {
      $(self.imageContainer)
        .attr('src', url)
        .fadeIn(500);
    });
  this.mapVisible = false;
  return false;
};

Project.prototype.displayMap = function(point) {
  var self = this;
  if (!this.mapInitialized) {
    this.imageContainer.fadeOut(400, function() {
      self.mapContainer.show();
      makeGoogleMap(self.mapContainer, point, 13, function() {
        self.map = this;
        this.setMapType(G_HYBRID_MAP);
        this.addControl(new GLargeMapControl());
        this.addControl(new GMapTypeControl());
        var marker = new GMarker(point);
        GEvent.addListener(marker, 'click', function() {
          marker.openInfoWindowHtml(self.routeDetails);
        });
        this.addOverlay(marker);
      });
      self.mapInitialized = self.mapVisible = true;
    });
  }
  else if (!this.mapVisible)
    this.imageContainer.fadeOut(400, function() {
      self.mapVisible = true;
      self.mapContainer.fadeIn(500, function() {
        self.map.panTo(point);
      });
    });
  return false;
};