function ImgGallery( $el ){
  this.init( $el );
  
}
ImgGallery.prototype = {
  init: function( $el )
  {
    // if there are more than 10 images we want to add pagination
    this.images_per_page = 8;
    this.num_of_images = $el.find('li').length;
    this.pages = Math.round( this.num_of_images / this.images_per_page );
    this.$el = $el;
    this.showPage( 0 );
  },
  showPage: function( i )
  {
    this.cur_page = i;
    var counter = i * this.images_per_page;
    dbug.log( counter );
    dbug.log( counter+this.images_per_page );
    // turn off all images
    this.$el.find('li').hide();
    // and turn on just the ones for this page
    for( var i=counter; i<(counter+this.images_per_page); i++ ) this.$el.find('li').eq(i).show();
    if( this.pages > 1 ) this.addNav();
  },
  addNav: function()
  {
    var self = this;
    $j('.gal-nav').remove();
    this.$el.after( '<div class="gal-nav"></div>' );
    if( this.pages > (this.cur_page+1) )  $j('.gal-nav').append( '<a class="next" href="">next</a>' );
    if( this.cur_page > 0 )           $j('.gal-nav').append( '<a class="prev" href="">prev</a>' );
    
    // bind the nav
    this.$el.next().find( '.next' ).click( 
      function()
      {
        self.showPage( self.cur_page + 1 );
        return false;
      }
    );
    this.$el.next().find( '.prev' ).click( 
      function()
      {
        self.showPage( self.cur_page - 1 );
        return false;
      }
    );
  }
}