$(document).ready(function() {

      //Set draggable elements
      $(".scrollMove .current").draggable({ containment: "parent", cursor: "move" ,  drag: function(e, ui) {
            //Get the id of the parent div
            var parentID = "#" + $(this).parent().parent().attr("id");
            var index = GetIndex(parentID);
            
            //Get the current page
            thumbCurPage[index] = parseInt((parseInt(Math.floor((ui.position.left - defaultLeft) / thumbsIndWidth[index]),10) * 1) + 1);
            
            //Set the new thumbnail margin left and then apply it
            thumbsLeft[index] = -(((ui.position.left - defaultLeft) / indWidth) * thumbsWidth) * thumbsPages[index];
            $(parentID + " .thumbs ul").css("marginLeft", thumbsLeft[index] + "px");
            
            //Call the CheckButtons function to turn off then scroll buttons if needed.
            CheckButtons(parentID, index);
         }
      });

      //Scroll click function setup
      $(' .scrollLeft').click(function() {
         var parentID = "#" + $(this).parent().attr("id");
         return ScrollLeft($(this), GetIndex(parentID));
      });
      $(' .scrollRight').click(function() {
         var parentID = "#" + $(this).parent().attr("id");
         return ScrollRight($(this), GetIndex(parentID));
      });
      
      //Get the array index of the element in action
      function GetIndex(parentID) {
         var index;
         for(var x = 0; x < listIDs.length; x++) {
            if(parentID == listIDs[x]) {
               index = x;
            }
         }
         return index;
      }
      
      //Function to scroll a video pane left
      function ScrollLeft(el, index){
         if (!(el.hasClass("linkOff"))) {
            if (!loading && thumbsLeft[index] < 0) {
               loading = true;
               
               //Check to see if we are at the page boundary as required
               if(thumbsLeft[index] == -((thumbCurPage[index]-1) * thumbsWidth)){
                  thumbCurPage[index]--;
               }
               
               //Call animation
               AnimateItems(index);       
            }
         }
         return false;
      }
      
      //Function to scroll a video pane right
      function ScrollRight(el, index){
         if (!(el.hasClass("linkOff"))) {
            if (!loading && thumbsLeft[index] > (-(thumbsPages[index] - 1) * thumbsWidth)) {
               loading = true;
               
               //Always increment the page count
               thumbCurPage[index]++;
               
               //Call animation
               AnimateItems(index);  
            }
         }
         return false;
      }
      
      //Animate the required elements
      function AnimateItems(index){
         //Calculate the new positions for the thumbs and indicator
         var newIndLeft = ((thumbCurPage[index]-1) * thumbsIndWidth[index]) + defaultLeft;
         thumbsLeft[index] = -(thumbCurPage[index]-1) * thumbsWidth;
               
         //Animate to new positions
         $(listIDs[index] + ' .current').animate({ left: newIndLeft + "px"}, 500);
         $(listIDs[index] + ' .thumbs ul').animate({ marginLeft: thumbsLeft[index] + "px" }, 600, function() {
            CheckButtons(listIDs[index], index);
            loading = false;
         });
      }
      
      //Function to check whether the relevant buttons should be on or off
      function CheckButtons(container, index){
         if(thumbsLeft[index] < 0){
            $(container + ' .scrollLeft').removeClass("linkOff");
         } else {
            $(container + ' .scrollLeft').addClass("linkOff");
         }
         if(thumbsLeft[index] > (-(thumbsPages[index] - 1) * thumbsWidth)){
            $(container + ' .scrollRight').removeClass("linkOff");
         } else {
            $(container + ' .scrollRight').addClass("linkOff");
         }
      } 

});