///////////////////////////////////////////////////////////////////////////////
//
//  thumbnail.js
//
// 
// © 2007 Microsoft Corporation. All Rights Reserved.
//
// This file is licensed as part of the Silverlight 1.0 SDK, for details look here: http://go.microsoft.com/fwlink/?LinkID=89144&clcid=0x409
//
///////////////////////////////////////////////////////////////////////////////


// Thumbnail object keeps track of whether mouse is over it, it whether it has mousecapture
//   $plugIn: Silverlight plug-in that contains this thumbnail
//   $index: index of this thumbnail.  Starts at 0.
//   $pageGenerator: object from which this thumbnail should get its content representation.
function Thumbnail(plugIn, pageGenerator, index, clickHandler) {
        this.index = index;
        this.clickHandler = clickHandler;

        // this is the template for all thumbnails, given the following variables
        // $2: UIElement corresponding to the left page of this thumbnail
        // $3: UIElement corresponding to the right page of this thumbnail
        var _str =    "<Canvas xmlns='http://schemas.microsoft.com/client/2007' xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml' Canvas.Top='42' x:Name='thumb' Opacity='0.5'>";
        _str = _str + "  <Canvas.Resources>";
        _str = _str + "        <Storyboard BeginTime='0' Duration='Forever' FillBehavior='Stop' x:Name='storyZoomIn'>";
        _str = _str + "          <DoubleAnimationUsingKeyFrames BeginTime='00:00:00' Storyboard.TargetProperty='ScaleX' Storyboard.TargetName='scale'>";
        _str = _str + "            <SplineDoubleKeyFrame KeySpline='0.7,0,0.4,1' Value='0.25' KeyTime='00:00:00.3'/>";
        _str = _str + "          </DoubleAnimationUsingKeyFrames>";
        _str = _str + "          <DoubleAnimationUsingKeyFrames BeginTime='00:00:00' Storyboard.TargetProperty='ScaleY' Storyboard.TargetName='scale'>";
        _str = _str + "            <SplineDoubleKeyFrame KeySpline='0.7,0,0.4,1' Value='0.25' KeyTime='00:00:00.3'/>";
        _str = _str + "          </DoubleAnimationUsingKeyFrames>";
        _str = _str + "          <DoubleAnimationUsingKeyFrames BeginTime='00:00:00' Storyboard.TargetProperty='Y' Storyboard.TargetName='pos'>";
        _str = _str + "            <SplineDoubleKeyFrame KeySpline='0.7,0,0.4,1' Value='130' KeyTime='00:00:00.3'/>";
        _str = _str + "          </DoubleAnimationUsingKeyFrames>";
        _str = _str + "          <DoubleAnimationUsingKeyFrames BeginTime='00:00:00' Storyboard.TargetProperty='Opacity' Storyboard.TargetName='thumb'>";
        _str = _str + "            <SplineDoubleKeyFrame KeySpline='0.7,0,0.4,1' Value='1' KeyTime='00:00:00.3'/>";
        _str = _str + "          </DoubleAnimationUsingKeyFrames>";
        _str = _str + "        </Storyboard>";
        _str = _str + "  </Canvas.Resources>";
        _str = _str + "  <Rectangle x:Name='thumbBackground' Height='44' Width='63' Fill='#37FFFFFF' Opacity='1' Canvas.Left='-31' Canvas.Top='-42'/>";
        _str = _str + "  <Canvas>";
        _str = _str + "    <Canvas.RenderTransform>";
        _str = _str + "      <TransformGroup>";
        _str = _str + "        <ScaleTransform x:Name='scale' ScaleX='0.07' ScaleY='0.07'/>";
        _str = _str + "        <TranslateTransform x:Name='pos' X='0' Y='0'/>";
        _str = _str + "      </TransformGroup>";
        _str = _str + "    </Canvas.RenderTransform>";
        _str = _str + "    <Rectangle x:Name='thumbOver' Height='630' Width='900' Fill='#66000000' Opacity='0' Canvas.Top='-600' Canvas.Left='-450'/>";
        _str = _str + "    <Canvas Canvas.Top='-570' Canvas.Left='-420'>";
        _str = _str + "      $2";
        _str = _str + "    </Canvas>";
        _str = _str + "    <Canvas Canvas.Top='-570' Canvas.Left='0'>";
        _str = _str + "      $3";
        _str = _str + "    </Canvas>";
        _str = _str + "  </Canvas>";
        _str = _str + "</Canvas>";

        // $2, $3: UIElements corresponding to the left and right pages, respectively, of this thumbnail
        var thumbStr = _str.replace(/\$2/g, pageGenerator.getPageString(2*this.index-1, true,0));
        thumbStr = thumbStr.replace(/\$3/g, pageGenerator.getPageString(2*this.index, true,0));

        // create XAML thumbnail using createFromXaml
        this.xamlElement = plugIn.content.createFromXaml(thumbStr, true);
        
        // attach event handlers for the thumbnail
        this.xamlElement.addEventListener("mouseEnter", Silverlight.createDelegate(this, this.handleMouseEnter));
        this.xamlElement.addEventListener("mouseLeave", Silverlight.createDelegate(this, this.handleMouseLeave));
        this.xamlElement.addEventListener("mouseLeftButtonDown", Silverlight.createDelegate(this, this.handleMouseDown));
        this.xamlElement.addEventListener("mouseLeftButtonUp", Silverlight.createDelegate(this, this.handleMouseUp));
        
        // initialize mouse state
        this.isMouseOver = false;
        this.isMouseDown = false;
}

Thumbnail.prototype.handleMouseEnter = function(sender, eventArgs)
{
    if (this.isMouseDown == false)
    {
        // ensure current thumbnail is on top
        this.xamlElement["Canvas.ZIndex"] = 1;      
        
        // zoom in thumbnail
        this.xamlElement.findName("storyZoomIn").begin();
        this.xamlElement.findName("thumbOver").opacity = 1;
    }
    else
    {
        // go back to pressed down state
        this.xamlElement.findName("thumbOver").fill = "#6623A3E0";
        this.xamlElement.findName("thumbBackground").fill = "#3723A3E0";
    }
    
    this.isMouseOver = true;
}

Thumbnail.prototype.handleMouseLeave = function(sender, eventArgs)
{
    if (this.isMouseDown == false)
    {
        // ensure current thumbnail is not on top
        this.xamlElement["Canvas.ZIndex"] = 0;  
        
        // stop storyboard and minimize thumbnail
        this.xamlElement.findName("storyZoomIn").stop();
        this.xamlElement.findName("thumbOver").opacity = 0;
    }
    else
    {
        // if we were highlighted, go back to mouse over state since we have mouse capture
        this.xamlElement.findName("thumbOver").fill = "#66000000";
        this.xamlElement.findName("thumbBackground").fill = "#37FFFFFF";
    }
    this.isMouseOver = false;
}

Thumbnail.prototype.handleMouseDown = function(sender, eventArgs)
{
    this.xamlElement.findName("thumbOver").fill = "#6623A3E0";
    this.xamlElement.findName("thumbBackground").fill = "#3723A3E0";
    
    sender.captureMouse();
    this.isMouseDown = true;
    isPageBrowserScrolling = false;
}

Thumbnail.prototype.handleMouseUp = function(sender, eventArgs)
{
    if (this.isMouseOver == true)
    {
        if (this.clickHandler) {
            this.clickHandler(this);
        }
    }

    // ensure current thumbnail is not on top
    this.xamlElement["Canvas.ZIndex"] = 0;  
        
    // minimize this thumbnail
    this.xamlElement.findName("storyZoomIn").stop();
    this.xamlElement.findName("thumbOver").fill = "#66000000";
    this.xamlElement.findName("thumbOver").opacity = 0;
    this.xamlElement.findName("thumbBackground").fill = "#37FFFFFF";

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