jQuery.fn.scrollable = function (options) {
   
   // settings
   settings = jQuery.extend({
     fixedrows: 1,
     fixedcolumns: 1,
     rows: 10,
     columns: 10
   }, options);
   

   return this.each(function(i,e){
      // reference to object
      $e = jQuery(e);

      // initial values
      $e.data("row", 0);
      $e.data("col", 0);
      
      // start by hiding rows and cols
      rows = e.rows.length - settings.fixedrows - settings.rows;
      cols = e.rows[0].childNodes.length - settings.fixedcolumns - settings.columns;
      $e.data("rows",e.rows.length-1);
      $e.data("maxrows",rows);
      $e.data("cols",e.rows[0].childNodes.length-1);
      $e.data("maxcols",cols);
      
      row = settings.fixedrows + settings.rows;
      col = settings.fixedcolumns + settings.columns;
      //jQuery(e).find("tr:gt("+(row-1)+")").css("display","none");
      //jQuery(e).find("tr").find("*:gt("+(col-1)+")").css("display","none");
      
      
      // append containers for the sliders
      $e.append('<tr"><td colspan="'+(e.rows[0].childNodes.length)+'" style="text-align: center;"><div id="hslider" style="width: 400px; margin: auto;"></div></td></tr>');
      $e.find("tr:first").append('<td rowspan="'+e.rows.length+'"><div id="vslider" style="height: 300px;"></div></td>');
      $("#hslider").slider({min: 0, max: cols, orientation: 'horizontal', animate: true, change: function(event, ui) {scr_hscroll(ui);}});
      $("#vslider").slider({min: 0, max: rows, orientation: 'vertical', animate: true, value: rows, change: function(event, ui) {scr_vscroll(ui);}});

      scr_hscroll1(e, 0);
      scr_vscroll1(e, 0);


   });
   
   function scr_hscroll(ui) {
      table = ui.handle.parentNode.parentNode.parentNode.parentNode;
      v = ui.value;
      scr_hscroll1(table, v);
   }
   
   function scr_hscroll1(table, v) {
      cols = jQuery(table).data("cols");
      
      h11 = settings.fixedcolumns;
      h12 = settings.fixedcolumns + v - 1;
      s21 = settings.fixedcolumns + v;
      s22 = settings.fixedcolumns + v + settings.columns - 1;
      h31 = settings.fixedcolumns + v + settings.columns;
      h32 = cols;
      
/*      for (row=0; row<table.rows.length; row++) {
         for (cell=h11; cell<=h12; cell++) {table.rows[row].childNodes[cell].style.display="none";}
         for (cell=s21; cell<=s22; cell++) {table.rows[row].childNodes[cell].style.display="";}
         for (cell=h31; cell<=h32; cell++) {table.rows[row].childNodes[cell].style.display="none";}
      } */
      for (cell=h11; cell<=h12; cell++) {scr_hscroll_col(table, cell, "none");}
      for (cell=s21; cell<=s22; cell++) {scr_hscroll_col(table, cell, "");}
      for (cell=h31; cell<=h32; cell++) {scr_hscroll_col(table, cell, "none");}
   }
   
   function scr_hscroll_col(table, cell, display) {
      if (table.rows[0].childNodes[cell].style.display != display) {
         for (row=0; row<table.rows.length-1; row++) {
            table.rows[row].childNodes[cell].style.display=display;
         }
      }
   }
   
   function scr_vscroll(ui) {
      table = ui.handle.parentNode.parentNode.parentNode.parentNode.parentNode;
      v = jQuery(table).data("maxrows") - ui.value;
      scr_vscroll1(table, v);
   }
   
   function scr_vscroll1(table, v) {
      rows = jQuery(table).data("rows");
      
      h11 = settings.fixedrows;
      h12 = settings.fixedrows + v - 1;
      s21 = settings.fixedrows + v;
      s22 = settings.fixedrows + v + settings.rows - 1;
      h31 = settings.fixedrows + v + settings.rows;
      h32 = rows;

      for (cell=h11; cell<=h12; cell++) {table.rows[cell].style.display="none";}
      for (cell=s21; cell<=s22; cell++) {table.rows[cell].style.display="";}
      for (cell=h31; cell<=h32; cell++) {table.rows[cell].style.display="none";}
   
   }
   
   function scr_hidecol(table, col) {
      jQuery(table).find("tr").find("*:eq("+col+")").css("display","none");
   }
   function scr_showcol(table, col) {
      jQuery(table).find("tr").find("*:eq("+col+")").css("display","visible");
   }
   function scr_hiderow(table, row) {
      jQuery(table).find("tr:eq("+row+")").css("display","none");
   }
   function scr_showrow(table, row) {
      jQuery(table).find("tr:eq("+row+")").css("display","visible");
   }

}