How to change scrolling direction of this smoothDivScroll?

How to change scrolling direction of this smoothDivScroll?

Hi, I have a code here using smoothDivScroll and I want to make two buttons to change the scrolling direction to the Right and to the Left. As far as I can see the code for changing the direction is already in there, but I do not know how to add a button....


This is the code:


 

<!doctype html>
<html>
 <head>
  <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
  <title>Lab page - jQuery Smooth Div Scroll - Thomas Kahn</title>
  <meta charset="utf-8">
  <!-- the CSS for Smooth Div Scroll --><!-- the CSS for this page -->
  <link rel="Stylesheet" type="text/css" href="http://www.smoothdivscroll.com/css/smoothDivScroll.css">
  <link rel="Stylesheet" type="text/css" href="http://www.smoothdivscroll.com/css/pageStyle.css">
  <style type="text/css"><!--
   #makemescrollable {
    position: relative;
    width: 100%;
    height: 330px;
    float: left; }













   #makemescrollable div.scrollablearea * { float: left; margin: 0; padding: 0; border: none; position: relative }
   #makemescrollable div.scrollablearea .contentbox { margin: 0px 5px; padding: 10px; border: solid 1px #ccc; width: 200px; height: 308px }
   #makemescrollable div.scrollablearea .contentbox img { margin-bottom: 10px }
   .subpanel { font-size: 12px; font-family: Calibri, Courier, Sans-Serif; background-color: #efefef; margin-bottom: 5px; padding: 7px }
   .subpanel span { color: blue; text-decoration: underline; cursor: pointer; }
   .subpanel span.notclickable { text-decoration: none; cursor: inherit; }-->
  </style>
 </head>
 <body>
  <div id="wrapper">
   <div id="mainColumn">
    <div id="makeMeScrollable">
     <img src="http://www.smoothdivscroll.com/images/demo/field.jpg" alt="Demo image" id="field">
     <img src="http://www.smoothdivscroll.com/images/demo/gnome.jpg" alt="Demo image" id="gnome">
     <img src="http://www.smoothdivscroll.com/images/demo/pencils.jpg" alt="Demo image" id="pencils">
     <img src="http://www.smoothdivscroll.com/images/demo/golf.jpg" alt="Demo image" id="golf">
     <img src="http://www.smoothdivscroll.com/images/demo/river.jpg" alt="Demo image" id="river">
     <img src="http://www.smoothdivscroll.com/images/demo/train.jpg" alt="Demo image" id="train">
     <img src="http://www.smoothdivscroll.com/images/demo/leaf.jpg" alt="Demo image" id="leaf">
     <img src="http://www.smoothdivscroll.com/images/demo/dog.jpg" alt="Demo image" id="dog">
    </div>
 
   </div>
  </div>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
  <script src="http://www.smoothdivscroll.com/js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
  <script src="http://www.smoothdivscroll.com/js/jquery.mousewheel.min.js" type="text/javascript"></script>
  <script src="http://www.smoothdivscroll.com/js/jquery.smoothdivscroll-1.2-min.js" type="text/javascript"></script>


























  <script type="text/javascript">
<!--
$(document).ready(function(){
  $("div#makeMeScrollable").smoothDivScroll({
   visibleHotSpotBackgrounds: "onstart",
   hotSpotsVisibleTime: 5000,
   autoScrollingMode: "onstart",
   startAtElementId: "field",
   autoScrollingInterval: 15,
   autoScrollingStep: 1,
   autoScrollingMode: "onstart",
   autoScrollingDirection: "backandforth",
   easingAfterHotSpotScrolling: true,
   easingAfterHotSpotScrollingDistance: 25,
   easingAfterHotSpotScrollingDuration: 300,
   easingAfterHotSpotScrollingFunction: 'easeOutQuart',
   hiddenOnStart: false,
   scrollToEasingDuration: 2000
  });

















  // Handle callbacks
  var callbackCounter = 1;
  $("div#makeMeScrollable").smoothDivScroll({
   scrollerLeftLimitReached: function () {
    updateCallbackDisplayArea("Scroller left limit reached.");
   }, scrollerRightLimitReached: function () {
    updateCallbackDisplayArea("Scroller right limit reached.");
   },
   scrolledToStartElement: function (eventObj, data) {
    updateCallbackDisplayArea("Scrolled to start element.");
   },
   autoScrollingStarted: function (eventObj, data) {
    updateCallbackDisplayArea("Autoscrolling started.");
   },
   autoScrollingStopped: function (eventObj, data) {
    updateCallbackDisplayArea("Autoscrolling stopped.");
   },
   autoScrollingRightLimitReached: function (eventObj, data) {
    updateCallbackDisplayArea("Autoscrolling right limit reached.");
   },
   autoScrollingLeftLimitReached: function (eventObj, data) {
    updateCallbackDisplayArea("Autoscrolling left limit reached.");
   },
   autoScrollingIntervalStopped: function (eventObj, data) {
    console.log(eventObj);
    updateCallbackDisplayArea("Autoscrolling interval stopped.");
   }
  });
  function updateCallbackDisplayArea(message) {
   $("#callbackDisplayArea").append(callbackCounter + ". " + message + "\n");
   $("#callbackDisplayArea").scrollTop(99999);
   callbackCounter++;
  }
  /********************************************
  Stop and start autoscolling
  ********************************************/
  // Stop auto scrolling
  $("#stopAutoScrolling").click(function () {
   $("div#makeMeScrollable").smoothDivScroll("stopAutoScrolling");
  });
  // Start auto scrolling
  $("#startAutoScrolling").click(function () {
   $("div#makeMeScrollable").smoothDivScroll("startAutoScrolling");
  });
  // Change the auto scrolling direction
  $(".autoScrollingDirection").click(function () {
   $("div#makeMeScrollable").smoothDivScroll("option", "autoScrollingDirection", $(this).attr("id"));
   $(".autoScrollingDirection").css("font-weight", "normal");
   $(this).css("font-weight", "bold");
  });
















































  $("#right").click(function() {
     $("#makeMeScrollable").smoothDivScroll("option","autoScrollDirection","right");
   });
 
  $("#left").click(function() {
     $("#makeMeScrollable").smoothDivScroll("option","autoScrollDirection","left");    
  });
 
  $("#backandforth").click(function() {
     $("#makeMeScrollable").smoothDivScroll("option","autoScrollDirection","backandforth");    
  });










 });
// -->
  </script>
 </body>
</html>