///////////////////////////////////////////////////////////////////////////////
//
//  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 Cursor='Arrow' ><Canvas xmlns='http://schemas.microsoft.com/client/2007' Height='10' xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml' Canvas.Top='42' x:Name='thumb' Opacity='0.5' Cursor='Arrow'>";
        _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='-30' 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' Cursor='Hand' />";
        _str = _str + "  <Canvas Cursor='Arrow'  >";
        _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='1' Canvas.Top='-600' Canvas.Left='-450' Cursor='Hand'/>";
        _str = _str + "    <Canvas Canvas.Top='-590' Canvas.Left='-436' Cursor='Arrow'>";
        _str = _str + "    <Canvas.RenderTransform>";
        _str = _str + "      <TransformGroup>";
        _str = _str + "        <ScaleTransform ScaleX='4' ScaleY='4'/>";
        _str = _str + "        <TranslateTransform X='0' Y='0'/>";
        _str = _str + "      </TransformGroup>";
        _str = _str + "    </Canvas.RenderTransform>";      
        //_str = _str + "      $2";
        _str = _str + "    <Image Source='assets/page$2s.png'  />"; 
        _str = _str + "    </Canvas>"; 
        
        _str = _str + "  <Canvas Cursor='Arrow'><Rectangle Height='630' Width='900' Fill='green' Opacity='0' Canvas.Top='-600' Canvas.Left='-450' Cursor='Hand' >";//
        _str = _str + "  </Rectangle></Canvas>";       
        
        _str = _str + "  </Canvas>";       
        
        _str = _str + "</Canvas></Canvas>";

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

		
        // 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;
    _gOver = true;
    
    var zoom = _gThisPage.plugIn.content.findName("zoom");
    zoom["opacity"] = 0;
    _gThisPage.plugIn.content.findName("MainCanvas")["cursor"] = 'Default';
    zoom["canvas.top"] = 0;
    zoom["canvas.left"] = 0;
}
var _gOver = false;
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 = 1;
    }
    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;
    _gOver = 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 = 1;
    this.xamlElement.findName("thumbBackground").fill = "#37FFFFFF";

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