title: Adding a current state to jQuery Tools Scrollable's Items
body: <p>I've got a jQuery Tools Scrollable I've been working on for awhile, and have gotten it to where it resizes based on the browser size dynamically, and the next button disables at the furthest right point in the scrollable.</p>
  
  <p>Each item in the scrollable triggers a background change. I am now trying to get a "current" class toggled. When you hover over them, you get a white border. I want that to also be the .current state. How would I go about toggling that?</p>
  
  <pre><code>&lt;div id="bkgrSelector"&gt;
  &lt;div class="scrollNav"&gt;
      &lt;a class="prev"&gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;div class="scrollable"&gt;   
      &lt;div class="items" id="thumbs"&gt;
          &lt;?php
              for($i=0; $i &lt; count($imageArray); $i++){
                   echo('&lt;img onclick="changeBig(\''.$imageArray[$i].'\')" src="/lib/img/bkgr/'.$imageArray[$i].'" alt="thumbnail image" width="77" height="44" /&gt;');
              }
          ?&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="scrollNav"&gt;
      &lt;a class="next"&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>JavaScript:</p>
  
  <pre><code>//Initiates Background selector scrollable
  $("#bkgrSelector .scrollable").scrollable();
  
  //Changes the background selector scrollable size, and handles the disabling of the next button at end of scrollable
  $(window).bind('resize', function(){
      var width = $(document).width();
      var thumbWidth = Math.round(width - 350);
      $("#bkgrSelector").css("width", thumbWidth + "px" );
      $("#bkgrSelector .scrollable").css("width", (thumbWidth - 48) + "px" );
  
      var scrollable = jQuery("#bkgrSelector .scrollable").data("scrollable");
      var size = Math.floor(thumbWidth / 94);
      console.log(size);
      scrollable.onSeek(function(event, index) {
          if (this.getIndex() &gt;= this.getSize() - size) {
              jQuery(".scrollNav .next").addClass("disabled");
          }
      });
      scrollable.onBeforeSeek(function(event, index) {
      if (this.getIndex() &gt;= this.getSize() - size) {
        if (index &gt; this.getIndex()) {
          return false;
        }
      }
      });  
   }).resize()
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#bkgrSelector .items img:hover, #bkgrSelector .items .current
  {padding:0; border:2px solid #fff; cursor:pointer; }
  </code></pre>