// JavaScript Document


var ContentSlide =
{
  timer: null,
  first: 4,
  last: 4,
  speed: 6500,
  
  initialize: function()
  {
    var container = $$(".container");
    var elements = $$(".element");
    $$(".element").setStyle('opacity', 0);
    
    $('elements').addEvent("mouseenter", function() {
			clearTimeout(ContentSlide.timer);
		});
		
		$('elements').addEvent("mouseleave", function() {
		  ContentSlide.hideElement.delay(2500);
		});
		
		this.showElement();
  },
  
  showElement: function()
  {
    $('element_'+this.first).fade(1);
    $('btn_'+this.first).addClass('active');
    
    this.last = this.first;
    this.first = this.last - 1;
    
    if( this.first < 1 )
    {
      this.first = 4;
    }
    
    this.timer = this.hideElement.delay(this.speed);
  },
  
  changeElement: function( key )
  {
    clearTimeout(this.timer);
    this.first = key;
    this.hideElement();
  },
  
  hideElement: function()
  {
    $('element_'+ContentSlide.last).fade(0);
    $('btn_'+ContentSlide.last).removeClass('active');
    ContentSlide.showElement();
  }
};