var ChapterImages = new Class({
  
  initialize: function(clss) {
    this.newimg = 0;
    this.active_spans = $$(clss);
    this.active_spans.each(function(active_span, i) {
      this.setUpChapterImage( active_span );
    }.bind(this));
  },
  
  setUpChapterImage: function(active_span) {
    //get the elements
    
    var actual_link = active_span.getNext().getElement('a');
    
    var anchorLink = new Element('a', { href: actual_link.get('href') });
    var active_img = active_span.getElement('img');
    anchorLink.wraps( active_img);
    
    //build arrow
    var sliding_arrow = new Element('div', { 'class': 'arrw' });
    sliding_arrow.set('morph', { duration: 250, transition: Fx.Transitions.Sine.easeInOut });
    sliding_arrow.inject(active_span);
    
    active_span.addEvent('mouseenter', this.mouseOver);
    active_span.addEvent('mouseleave', this.mouseOut);
    actual_link.addEvent('mouseenter', this.mouseOver);
    actual_link.addEvent('mouseleave', this.mouseOut);
    sliding_arrow.addEvent('mouseleave', this.mouseOut);
    
    active_img.addClass('normal_img');
    var a_img_loc = active_img.get('src').replace('_gray', '_');
    var p =  new Asset.image( a_img_loc, { alt: active_img.get('alt'), 'class': 'hoverimg', onload: this.setUpImageHover } );
    
  },
  
  setUpImageHover: function( img ) {
    //img.set('width', 300);
    //img.set('height', 105);
    img.setStyle('position', 'absolute');
    img.setStyle('top', 0);
    img.setStyle('left', 0);
    img.setOpacity(0);
    img.set('morph', { duration: 290 });
    var newSource = this.get('src');
    var origSource = newSource.replace('_', '_gray');
    var origImage = $('chapterCTAs').getElement('img[src=' + origSource + ']');
    var baseElement = origImage.getParent();
    img.inject( baseElement );
  },
  
  mouseOver: function(e) {
    var trgt = e.target;
    if(trgt.get('tag') == 'img' || trgt.get('tag') == 'a') {
      
      if(trgt.get('tag') == 'a') {
        trgt = trgt.getParent().getPrevious().getElement('img');
      }
    
      var active_span = trgt.getParent().getParent();
      var lnk = active_span.getNext().getElement('a');
      var arrow = active_span.getElement('.arrw');
      
      var hoverImage = trgt.getParent().getElement('.hoverimg');
      if(hoverImage) {
        hoverImage.morph({opacity:1});          
        arrow.morph({ top: 70 });
        lnk.setStyles({ color: '#BE0006' });
      }
      //var baseImage = trgt.getParent().getElement('.normal_img');
      //hoverImage.inject(baseImage, 'before');    
    }
  },
  
  mouseOut: function(e) {
    
    var trgt = e.target;
    if(trgt.get('tag') == 'img' || trgt.get('tag') == 'a' || trgt.get('tag') == 'div') {
      
      if(trgt.get('tag') == 'a') {
        trgt = trgt.getParent().getPrevious().getElement('img');
      } else if(trgt.get('tag') == 'div') {
        if(!trgt.hasClass('arrw')) {
          return;
        } else {
          trgt = trgt.getPrevious().getElement('img');
        }
      }
    
      var active_span = trgt.getParent().getParent();
      var lnk = active_span.getNext().getElement('a');
      var arrow = active_span.getElement('.arrw');
      
      var hoverImage = trgt.getParent().getElement('.hoverimg');
      if(hoverImage) {
        hoverImage.morph({opacity:0});
        //var baseImage = trgt.getParent().getElement('.normal_img');
        //baseImage.inject(hoverImage, 'before');     
        
        arrow.morph({ top: 110 });
        lnk.setStyles({ color: '#333' });
      }
      
    }
  }
  
});


window.addEvent('domready', function(e) {
  var cImgs = new ChapterImages('.chptr_img');
});