//Comic strip thumbnail list variable.
var cs_thumb_list;

//Clipping region for thumbnail list.
var cs_thumb_list_clip; // default clip: Rect="0, 0, 135, 300"

//Variable representing the handle of the scroll bar.
var cs_scroll_handle;

//Variable representing the main scroll area. 
var cs_scroll_mechanism;

//Variable representing the maximum handle position.
var maxHandlePosition;

//Variable representing the maximum handle top and left.
var maxHandlePoint = {X:0, Y:0};

//Variable indicating whether the scrollbar handle is currently dragging.
var handleDragging = false;

//Constant value representing the bottom of the up arrow.
var SMALLVALUE = 16;

//Variable representing the ratio for resizing the scrollbar.
var cs_scroll_handle_ratio;

//Variable representing the interval when continuous scrolling is active.
var intervalHandle;

//Function that fires once scrollbar is loaded.
function ComicStripScrollbarLoaded(sender)
{
    cs_scroll_handle = sender.findName("cs_scroll_handle");
    cs_scroll_mechanism = sender.findName("cs_scroll_mechanism");
    maxHandlePosition = cs_scroll_mechanism.Height - SMALLVALUE - cs_scroll_handle.Height;
    cs_thumb_list = sender.findName("cs_thumb_list");
    cs_thumb_list_clip = sender.findName("cs_thumb_list_clip");
    
    // Calculate the ratio of content scrolling distance to thumb scrolling distance
    var cs_strip = sender.findName("cs_strip");
    cs_scroll_handle_ratio = (cs_thumb_list.Height - cs_strip.Height + 400) / (cs_strip.Height - 2 * SMALLVALUE - cs_scroll_handle.Height);
}

//Function to capture the mouse when pressing the cs_scroll_handle
function csScroll_onThumbMouseLeftButtonDown(sender, mouseEventArgs)
{
    cs_scroll_handle.CaptureMouse();
    maxHandlePoint = mouseEventArgs.GetPosition(null);
    handleDragging = true;
}

//Function to move the cs_scroll_handle along with the mouse
function csScroll_onThumbMouseMove(sender, mouseEventArgs)
{
  if (handleDragging)
  {
    var point = mouseEventArgs.GetPosition(null);
    scrollTo(cs_scroll_handle["Canvas.Top"] + point.Y - maxHandlePoint.Y);
    maxHandlePoint = point;
  }
}

//Function to release mouse capture when releasing the cs_scroll_handle
function csScroll_onThumbMouseLeftButtonUp(sender, mouseEventArgs)
{
    cs_scroll_handle.ReleaseMouseCapture();
    handleDragging = false;
}

//Function to move the content and cs_scroll_handle to the specified vertical position
function scrollTo(handlePosition)
{

  // Constrain the position to the bounds of the scrollbar  
  var maxHandlePosition = cs_scroll_mechanism.Height - SMALLVALUE
                        - cs_scroll_handle.Height;
  handlePosition = Math.max(handlePosition, SMALLVALUE);
  handlePosition = Math.min(handlePosition, maxHandlePosition);

  if (cs_scroll_handle["Canvas.Top"] == handlePosition)
  {
    // We're already at the desired position.
    // Just in case this is from a continuous scroll:
    stopContinuousScrolling();
  }
  else
  {
    // Move the cs_scroll_handle to the desired position
    cs_scroll_handle["Canvas.Top"] = handlePosition;
    
    // Move the content to the corresponding position
    cs_thumb_list["Canvas.Top"] = (SMALLVALUE - handlePosition) * cs_scroll_handle_ratio + 70;
    var clipTop = parseInt(cs_thumb_list["Canvas.Top"]) * (-1) + 70;
    cs_thumb_list_clip.Rect = "0, " + clipTop + ", 135, 300";
  }
}

//Function to scroll continuously when pressing the up or down arrow
function csScroll_onArrowMouseLeftButtonDown(sender, mouseEventArgs)
{
  startContinuousScrolling(sender.Name == "cs_scroll_arrow_up");
}

//Function to stop scrolling continuously when releasing the up or down arrow
function csScroll_onArrowMouseUpOrLeave(sender, mouseEventArgs)
{
  stopContinuousScrolling();
}

//Function to begin continuous scrolling
function startContinuousScrolling(up)
{
  var delta = SMALLVALUE;
  if (up)
    delta *= -1;

  // Call scroll every couple of milliseconds, adding the delta
  //var scrollTo = delegate(this, scrollTo);
  var callback = function() { scrollTo(cs_scroll_handle["Canvas.Top"] + delta); }
  intervalHandle = setInterval(callback, SMALLVALUE);
}

//Function to end the continuous scrolling, if it is happening.
function stopContinuousScrolling()
{
  clearInterval(intervalHandle);
}

//Helper function for creating callbacks.
function delegate(target, callback) {
  return function() { callback.apply(target, arguments); };
}