jQuery(function() {
  //by default, the scroll is only done vertically ('y'), change it to x.
  $.scrollTo.defaults.axis = 'x';
  
  var paneTarget = $('#metricData');
  var counter = 0; //Count the number of clicks
  var width = 120;
  
  $('#scrollLeft').addClass('end');

  $("#pdmsTab").css({display:"none"});
  $("ul.scrollHandler").css({display:"none"});
  
  $("#pdmsTab").click(function() {
    $("#metrics").css({display:"none"});
    $("#pdmsTab").css({display:"none"});
        
    $("#pdms").css({display:"block"});
    $("#metricsTab").css({display:"block"});
    
    $("ul.scrollHandler").css({display:"none"});
  });
  
  $("#metricsTab").click(function() {
    $("#metrics").css({display:"block"});
    $("#pdmsTab").css({display:"block"});
    
    $("#pdms").css({display:"none"});
    $("#metricsTab").css({display:"none"});
    
    $("ul.scrollHandler").css({display:"block"});
    
    paneTarget.scrollTo(0); //reset scrollable pane to (0,0)
  });  
  
  $('#scrollLeft').click(function(){
    paneWidth = $('#metricData table').width();    
    currentWidth = width * counter;
    
    $('#scrollRight').removeClass('end').css({cursor:"pointer"});
    
    if(currentWidth <= 0) {
      return false;
    }
    else{
      if((currentWidth-width) <= 0) {
        $(this).addClass('end').css({cursor:"default"});        
      }
      paneTarget.stop().scrollTo( currentWidth-width, 500 );
      counter--;
    }   
  });
  
  $('#scrollRight').click(function(){    
    paneWidth = $('#metricData table').width();  
    currentWidth = width * counter;
    
    $('#scrollLeft').removeClass('end').css({cursor:"pointer"});
    
    if((currentWidth+width) >= paneWidth) {      
      return false;
    }
    else{
      if((currentWidth+(2*width)) >= paneWidth) {
        $(this).addClass('end').css({cursor:"default"});
      }
      paneTarget.stop().scrollTo( currentWidth+width, 500 );
      counter++;
    }
  });
});