// =========================
//
// Thumbnail Class
// Defines event handlers for thumbnails in page browser
//
// =========================


// Thumbnail object keeps track of whether mouse is over it, it whether it has mousecapture
function Thumbnail(target) {
      this.target = target;
      this.isMouseOver = false;
      this.isMouseDown = false;
      this.setCallback(this.target, "mouseEnter", this.handleMouseEnter);
      this.setCallback(this.target, "mouseLeave", this.handleMouseLeave);
      this.setCallback(this.target, "mouseLeftButtonDown", this.handleMouseLeftButtonDown);
      this.setCallback(this.target, "mouseLeftButtonUp", this.handleMouseLeftButtonUp);
}

Thumbnail.prototype.handleMouseEnter = function(sender, eventArgs)
{
  for (var i=0; i<=(maxNumPages/2); i++)
  {
    if (sender.equals(wpfe.findName("thumb"+i)))
    {
      if (this.isMouseDown == false)
      {
        // ensure current thumbnail is on top
        var localPB = wpfe.findName("pageBrowser");
        localPB.children.remove(sender);
        localPB.children.add(sender);

        // zoom in thumbnail
        wpfe.findName("storyZoomIn"+i).begin();
        wpfe.findName("thumbOver"+i).opacity = 1;
      }
      else
      {
        // go back to pressed down state
        wpfe.findName("thumbOver"+i).fill = "#9900dd00";
        wpfe.findName("thumbBackground"+i).fill = "#3700dd00";
      }
    }
  }

  this.isMouseOver = true;
}

Thumbnail.prototype.handleMouseLeave = function(sender, eventArgs)
{
  for (var i=0; i<=(maxNumPages/2); i++)
  {
    if (sender.equals(wpfe.findName("thumb"+i)))
    {
      if (this.isMouseDown == false)
      {
        // stop storyboard and minimize thumbnail
        wpfe.findName("storyZoomIn"+i).stop();
        wpfe.findName("thumbOver"+i).opacity = 0;
      }
      else
      {
        // if we were highlighted, go back to mouse over state since we have mouse capture
        wpfe.findName("thumbOver"+i).fill = "#66000000";
        wpfe.findName("thumbBackground"+i).fill = "#37000000";
      }
    }
  }
  this.isMouseOver = false;
}

Thumbnail.prototype.handleMouseLeftButtonDown = function(sender, eventArgs)
{
  for (var i=0; i<=(maxNumPages/2); i++)
  {
    if (sender.equals(wpfe.findName("thumb"+i)))
    {
      wpfe.findName("thumbOver"+i).fill = "#6600dd00";
      wpfe.findName("thumbBackground"+i).fill = "#3700dd00";
    }
  }

  sender.captureMouse();
  this.isMouseDown = true;
  isPageBrowserScrolling = false;
}

Thumbnail.prototype.handleMouseLeftButtonUp = function(sender, eventArgs)
{
  for (var i=0; i<=(maxNumPages/2); i++)
  {
    if (sender.equals(wpfe.findName("thumb"+i)))
    {
      if (this.isMouseOver == true)
      {
        jumpToPage((i*2)-1);
      }

      // minimize this thumbnail
      wpfe.findName("storyZoomIn"+i).stop();
      wpfe.findName("thumbOver"+i).fill = "#66000000";
      wpfe.findName("thumbOver"+i).opacity = 0;
      wpfe.findName("thumbBackground"+i).fill = "#37000000";
    }
  }

  sender.releaseMouseCapture();
  this.isMouseDown = false;
  isPageBrowserScrolling = true;
}

// method that hooks up event handlers
Thumbnail.prototype.setCallback = function(target, eventName, callback)
{
      if (!window.methodIndex) window.methodIndex = 0;

      var callbackName = "uniqueCallback" + (window.methodIndex++);
      var controller = this;
      var func = function() {
             callback.apply(controller, arguments);
      }

      eval(callbackName + " = func;");
      target[eventName] = "javascript:" + callbackName;
}