var Anim = new Class({
  
  initialize: function (element, to_color) {
    this.from_color = element.getStyle('color');
    this.to_color = to_color;
    this.element = element;
    this.element.addEvent('mouseover', this.mouseover.bindWithEvent(this));
    this.element.addEvent('mouseout', this.mouseout.bindWithEvent(this));
    this.element.set('morph', { duration: 'short', transition: Fx.Transitions.Sine.easeOut });
  },
  
  mouseover: function () {
    this.element.morph({
      'background-color': [this.from_color, this.to_color],
      'color': [this.from_color, this.to_color]
    });
    
  },
  
  mouseout: function () {
    this.element.morph({
      'background-color': [this.to_color, this.from_color],
      'color': [this.to_color, this.from_color]
    });
    
  }
  
});

var colors = ['#18E0F3', '#1AD192', '#B7FB1F', '#FFAC1E', '#D2481E', '#CF31C6'];

window.addEvent('load', function() { 
  $$('#cover').fade('out');
  
  $$('ul#links a').each(function(element, i){
    new Anim(element, colors[i]);
  });
  
});