$(function(){
  $('#scroller').scroller('#left','#right');
})

$.fn.scroller = function(lbut, rbut) {
  $(this).each(function(){
    var scroller = $(this);
    var wrapper = $(this).find('.wrapper:first');
    if (scroller.find('a').size() == 0) { return; }
    var base_width = scroller.find('a').get(0).offsetWidth + parseInt(scroller.find('a:first').css('margin-right'));
    scroller.find('a').append('<span class="overlay"></span>');
    wrapper.find('.overlay').css('opacity',0.75).click(function(e){
      e.preventDefault();
      if (parseFloat($(this).css('opacity')) > 0) {
        e.stopPropagation();
      }
    }).eq(1).css('opacity',0);
    var moveLeft = function(e) {
      if (e) { e.preventDefault(); }
      scroller.find('a:first').animate({
        "marginLeft": -base_width + "px"
      }, 500, 'linear', function() {
        $(this).appendTo(wrapper).attr('style','').css('margin-left',0);
      }).next().find('.overlay').animate({
        opacity: 0.75
      }, 500).parent().next().find('.overlay').animate({
        opacity: 0
      }, 500);
      
    }
    
    var moveRight = function(e) {
      if (e) { e.preventDefault(); }
      scroller.find('a:last').css('margin-left',-base_width + "px").prependTo(wrapper).animate({
        "marginLeft": "0px"
      }, 500, 'linear').next().find('.overlay').animate({
        opacity: 0
      }, 500).parent().next().find('.overlay').animate({
        opacity: 0.75
      }, 500);
    }

    $(lbut).click(moveLeft);
    $(rbut).click(moveRight);

  })
}