var HomeHeader = new Class({
  
  Implements: [Events, Options],
  
  options: {
    images_src: []
  },
  
  initialize: function(element, options){
    this.setOptions(options);
		this.element = $(element);
		this.document = this.element.getDocument();
		this.over = false
		
    this.sections = $('headerContent').getChildren('div')
    this.sections.each(function(el, index){      
      el.getFirst().set({ 'styles': {top: 0}, 'morph': {duration: 500, transition: 'quint:out'}}).empty()
      el.getLast().set({ 'styles': {top: -330}, 'morph': {duration: 500, transition: 'quint:out'}})
      el.addEvents({
        'mouseenter': function(e, c){
          c.over = true
          this.getFirst().morph({top:30})
          this.getLast().morph({top: 0})
        }.bindWithEvent(el, this),
        'mouseleave': function(e, c){
          c.over = false
          this.getFirst().morph({top:0})
          this.getLast().morph({top: -330})
        }.bindWithEvent(el, this)
      })
    }, this)
    
    this.image_index = -1
    this.image_loaded = []
    
    this.loadImages.delay(0, this)
    this.changeImage()
    this.period = this.changeImage.periodical(10000, this)
  },
  
  changeImage: function(){
    if(this.over)return
    for(i=this.image_index+1; i <= this.options.images_src.length; i++){if(this.image_loaded.indexOf(i)) break }
    this.image_index = i%this.options.images_src.length
    this.sections.each(function(el, index){
      var old_img = el.getFirst().getFirst()
      var new_img = this.images[this.image_index].clone().set({'styles': {'margin-left': index*(-300),  'margin-top': -330}, 'morph': {duration: 1200, transition: 'quint:out'}})
      el.getFirst().grab(new_img, 'top')
      new_img.morph.delay(index*200, new_img, {'margin-top': 0})
      if(old_img)old_img.destroy.delay(index*200 + 1200, old_img)
    }, this)
  },
  
  loadImages: function(){
    this.images = new Asset.images(this.options.images_src, {
      onComplete: function(){},
      onProgress: this.progress.bindWithEvent(this)
    })
  },
  
  progress: function(counter, index){
    this.image_loaded.push = index
  }
  
});