window.addEvent('load', function() {
	$$('div.callout-right').each( function(el){
    co = new callout(el);
  });
  
  	$$('div.callout-left').each( function(el){
    co = new callout(el, {side: 'left'});
  });
});

var callout = new Class( {
  options : {
		interval : 1000,
		side : 'right'
	},
	
  initialize : function(el, options) {
    this.setOptions(options);
    this.el = el;
    this.a = el.getElement('a');
    this.fullwidth =this.a.getElement('img').width;
    this.width = parseInt(el.getStyle('width'));
    this.fxe = new Fx.Styles(this.el, {duration:this.options.interval, transition: Fx.Transitions.Cubic.easeOut, fps: 25});
    if(this.options.side == 'right'){
      this.fxa = new Fx.Style(this.a,'left', {duration:this.options.interval, transition: Fx.Transitions.Cubic.easeOut, fps: 25});
      this.fxa.set(-1 * (this.fullwidth-this.width)+"px");
      this.a.addEvent('mouseenter', this.mouseOver.bind(this));
      this.a.addEvent('mouseleave', this.mouseOut.bind(this));
    }else{
      this.a.addEvent('mouseenter', this.mouseOverl.bind(this));
      this.a.addEvent('mouseleave', this.mouseOutl.bind(this));
    }
  },
  
  mouseOver : function() {
    this.fxa.stop();
    this.fxe.stop();
    this.fxa.start(0);
    this.fxe.start({'width': this.fullwidth});
  },
  
  mouseOut : function() {
    this.fxa.stop();
    this.fxe.stop();
    this.fxa.start(-1 * (this.fullwidth-this.width)+"px");
    this.fxe.start({'width': this.width});
  },
  
  mouseOverl : function() {
    this.fxe.stop();
    this.fxe.start({'width': this.fullwidth, 'margin-left': -1 * (this.fullwidth-this.width)});
  },
  
  mouseOutl : function() {
    this.fxe.stop();
    this.fxe.start({'width': this.width, 'margin-left': 0});
  }
});

callout.implement(new Events, new Options);