var HighlightHistory = new Class({
    
  initialize: function(elements) {
    
    this.delay = 0;
    $$(elements).each(function(el, i) {

      this.delay = this.delay + 1000;
      this.startDelay.delay(this.delay, this, el);
      
    }.bind(this));
    
  },
    
  startDelay: function(el) {

    el.morph('.historyEm', {'duration': 1000});
    
  }
  
});

var NavigationHover = new Class({
  
  fx: [],
  els: [],
  
  initialize: function(elements) {

    $$(elements).each(function(el, i) {

      this.fx[i] = new Fx.Morph(el, {'duration': 300, 'link': 'cancel'});
      this.els[i] = el;
      this.els[i].addEvent('mouseover', this.handleMouseover.bind(this));
      this.els[i].addEvent('mouseout', this.handleMouseout.bind(this));
      
    }.bind(this));
    
  },
  
  handleMouseover: function(e) {
    
    el = e.target;
    i = this.els.indexOf(el);
    this.fx[i].start('.navMouseover');
   
  },
  
  handleMouseout: function(e) {
    
    el = e.target;
    i = this.els.indexOf(el);
    this.fx[i].start('.navMouseout');
    
  }
  
});

var ContactInfoFade = new Class({
    
  initialize: function(element) {

    el = $(element);
    
    this.fx = new Fx.Morph(el, {'duration': 500, 'link': 'cancel'});
    this.fx.set('.contactInfoMouseout');
    
    el.addEvent('mouseover', this.handleMouseover.bind(this));
    el.addEvent('mouseout', this.handleMouseout.bind(this));
    
  },
  
  handleMouseover: function(e) {
    
    this.fx.start('.contactInfoMouseover');
   
  },
  
  handleMouseout: function(e) {
    
    this.fx.start('.contactInfoMouseout');
    
  }
  
});

window.addEvent('domready', function () {
  
  if($('History')) new HighlightHistory('#History em');
  if($('Nav')) new NavigationHover('#Nav ul li a');
  if($('ContactInfo')) new ContactInfoFade('ContactInfo');
  if($$('div.productList')) $$('div.productList h2').addClass('background');
  if($$('div.productList')) new Fx.Accordion($$('div.productList h2'), $$('div.productList ul'), {
    initialDisplayFx: false,
    opacity: false,
    onActive: function(toggler, element) { toggler.removeClass('background'); toggler.addClass('active'); },
    onBackground: function(toggler, element) { toggler.addClass('background'); toggler.removeClass('active'); }
  });
});