// Controls the team list on the page.
var TeamList = Class.create({
   initialize: function(element) {
      this.element = element;
      this.individuals = this.element.select('li');
      this.members = new Array();
      this.individuals.each( function(individual) {
         new MemberName(individual);
         Event.observe(individual, 'click', this.showLightBox.bindAsEventListener(this));
      }.bind(this));
      this.lightbox = new LightBox();
   },
   
   showLightBox: function(e) {
      this.lightbox.show();
   }
});

// Controls the name animations on the team list.
var MemberName = Class.create({
   initialize: function(element) {
      this.element = element;
      this.image = this.element.down().down();
      
      // Move image alt text containing member name out into a span.
      this.element.insert('<span class="member_name">'+this.image.alt+'</span>');
      // Reset alt text now that we're storing it in a span...
      this.image.alt = "";
      
      this.member_name = this.element.down().next();
      this.member_photo = this.element.down();
      this.transition = 0.5;
      this.slack = 0.25;
      
      // Grab bio information and reset link.
      this.bio = $(this.element.down().hash.substr(1));
      this.element.down().href = '#';
      if(this.bio) {
         this.bio.hide();
      }
      
      this.member_name.hide();
      Event.observe(this.element, 'mouseover', this.showNameListener.bindAsEventListener(this));
      Event.observe(this.element, 'mouseout', this.hideNameListener.bindAsEventListener(this));
      Event.observe(this.element, 'click', this.showBio.bindAsEventListener(this));
   },
   
   showNameListener: function(e) {
      window.clearTimeout(this.activation_request);
      if(this.member_name.style.display == 'none'){
         this.activation_request = this.showNameHandler.delay(this.slack,this);
      }  
   },
   
   showNameHandler: function(source) {
      source.showName();
   },
   
   showName: function() {
      new Effect.Morph(this.member_photo, {
        style: 'border: solid 3px #000;', // CSS Properties
        duration: this.transition
      });
      new Effect.Appear(this.member_name, {
         duration: this.transition
      });
      new Effect.Move(this.member_name, {
         y: -10, 
         transition: Effect.Transitions.sinoidal,
         duration: this.transition
      });
   },
   
   hideNameListener: function(e) {
      if(this.member_name.style.display == 'none'){
         window.clearTimeout(this.activation_request);
      } else {
         this.activation_request = this.hideNameHandler.delay(this.slack,this);
      }
   },
   
   hideNameHandler: function(source) {
      source.hideName();
   },
   
   hideName: function(e) {
      new Effect.Morph(this.member_photo, {
        style: 'border: solid 3px #ccc;', // CSS Properties
        duration: this.transition
      });
      new Effect.Fade(this.member_name, {
         duration: this.transition
      });
      new Effect.Move(this.member_name, {
         y: 10, 
         transition: Effect.Transitions.sinoidal,
         duration: this.transition
      });
   },
   
   showBio: function(e) {
      e.stop();
      $('lbContent').innerHTML = this.bio.innerHTML;
   }
});


// Extending all elements to support special interactive functionality.
function locateTeamMembers(e){ 
   if($('team_members')) {
      var members = new TeamList($('team_members'));
   }
}

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