// Controls the photo viewer elements on the page.
var PhotoViewer = Class.create({
  initialize: function(element) {
    this.element = element;
    this.openDelayTime = 250;
    this.closeDelayTime = 550;
    
    // Set the proper element to the class.
    this.viewer = this.element.down('div');
    this.trigger = this.element.down('a');
    this.image = this.trigger.down('img');
    
    // If we got a subnavigation element let's hide it and add observers.  We'll also add an ID if it doesn't exist on the element.
    if(this.viewer) {
      if (!this.viewer.id) {
          this.viewer.id = this.element.id+"_viewer";
      }
      if (!this.trigger.id) {
          this.trigger.id = this.element.id+"_trigger";
      }      
      
      // Here we build a call out so that we can hide and deactivate the menu item from a global call.
      this.hideCallOut = "$('"+this.viewer.id+"').up().removeClassName('active'); $('"+this.trigger.id+"').removeClassName('active');";
      this.showCallOut = "$('"+this.viewer.id+"').show();";
      this.viewer.hide();
    }   
    
    Event.observe(this.trigger, 'click', function() { return false;});
    Event.observe(this.image, 'click', this.showPhoto.bindAsEventListener(this));
    Event.observe(this.viewer, 'click', this.closePhoto.bindAsEventListener(this));    
  },
  
  showPhoto: function(e) {
    this.activate();
    if(this.viewer) {
      if (this.closeDelayTimer) window.clearTimeout(this.closeDelayTimer);
      
      this.viewer.show();

      var maxWidth = $('photos').getWidth();
      var maxHeight = $('photos').getHeight();
      
      var width = this.viewer.down('img').getWidth() + 0.05; //If the extra 0.05 is missing, the box shrinks.
      var height = this.viewer.down('img').getHeight();
      var left = (maxWidth/2)-(width/2);      
      var top = (maxHeight/2)-(height/2);
      var pos = 'left:' + left + 'px; top:' + top + 'px;width:' + width + 'px;';  
      
      this.viewer.morph(pos);
    }
  },
  
  closePhoto: function(e) {
    if(this.viewer) {
      if (this.viewer.visible()){
        new Effect.Fade(this.viewer.id);
        this.closeDelayTimer = window.setTimeout(this.hideCallOut, this.closeDelayTime);      
      }
    }
  },
  
  hidePhoto: function(e) {
    this.element.removeClassName('active');
  },
  
  activate: function() {
    this.element.siblings().each(function(sibling) {
      if(sibling.hasClassName('active')) {
          sibling.removeClassName('active'); 
          sibling.down('a').removeClassName('active');
      }
    });
    if (this.viewer) {
        this.element.addClassName('active');
        this.element.down('a').addClassName('active');
    }
  }
});


// Extending all elements to support special interactive functionality.
function addPhotoViewers(e){  
    $('photos').childElements().each(function(element) {
        element.photoview = new PhotoViewer(element);  
        return element;
    });  
}

Event.observe(window, 'load', addPhotoViewers);