(function($){
  $.fn.gallery = function(viewer, menu){
    var $viewer = $(viewer);
    var $menu = $(menu);
    var $slider = $menu.find('#slider');
    var $selected = $menu.find('.selected');
    
    $menu.find('#gallery_menu_thumbnails').css({overflow: 'hidden'})
    $slider.css({position: 'absolute'}).parent().css({position: 'relative'});
    $slider.css({left:($selected.galleryMenuItemOffset() + $menu.width()/2)});
    
    $menu.find('#gallery_menu_thumbnails a').click(function(e){
      e.preventDefault();
      var $this = $(this);
      $this.parent().find('.selected').removeClass('selected');
      $this.addClass('selected');
      $selected = $this;
      var img_url = $this.find('img').eq(0).attr('src');
      //now load the shit
      $viewer.find('img').attr('src', img_url.replace(/small/,'large'));
      $slider.animate({left:($selected.galleryMenuItemOffset() + $menu.width()/2)});
    });
    
    $menu.find('#next_image').click(function(e){
      e.preventDefault();
      $selected.next().click();
    });

    $menu.find('#previous_image').click(function(e){
      e.preventDefault();
      $selected.prev().click();
    });

    
    return this;
  }
  
  $.fn.galleryMenuItemOffset = function(margin){
    var $this = $(this);
    return -($this.position().left + $this.outerWidth(margin)/2);
  }
    
})(jQuery)