var counter = 1;
 $(function(){
    	$('#scrollbar').jScrollPane({showArrows:true});

    });
 
 
 function showPic (whichpic, cnt) {
     
      counter = cnt;
      updateCounter(cnt); 
      updateArrows();
      if (document.getElementById) {
        document.getElementById('placeholder').src = whichpic.href;
        return false;
      }
      else {
        return true;
      }
    }    
    
function updateArrows() {
      next = document.getElementById('next_arrow');
      prev = document.getElementById('previous_arrow');
      if (counter >= total_photo_count) {
             next.src = '/images/button_arrow_right.gif';
      } else { 
         next.src = '/images/button_arrow_right.gif';
      }
      
      if (counter <= 1) {
          prev.src = '/images/button_arrow_left.gif';
      } else {
          prev.src = '/images/button_arrow_left.gif';
      }
    }
function updateCounter(counter) {
      var cnt = document.getElementById('counter');
      var str = ' of ' + total_photo_count;
      cnt.innerHTML = '<span class="current_thumb">' + counter + '</span>' + str;
}

function showThisPic (cnt) {
     
      if (counter + cnt > total_photo_count){
          return;
      } 
        
      
      if (counter + cnt < 1){
          return;
      }
      counter = counter + cnt;
      updateArrows();
      updateCounter(counter); 
      if (document.getElementById) {
        whichpic = document.getElementById('img_' + counter);
        document.getElementById('placeholder').src = whichpic.href;
     
      }
}