$(document).ready(function() {


   $(".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");
      }
   }



});