﻿function Thumbnail(index, clickHandler) {
        this.index = index;
        this.clickHandler = clickHandler;

        var _str =    "<Canvas xmlns='http://schemas.microsoft.com/client/2007' xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml' Canvas.Top='0' x:Name='thumb' Opacity='0.5'>";
        _str = _str + "  <Canvas.Resources>";
        _str = _str + "        <Storyboard BeginTime='0' Duration='Forever' 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='4' 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='4' 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='-160' KeyTime='00:00:00.3'/>";
        _str = _str + "          </DoubleAnimationUsingKeyFrames>";
        _str = _str + "          <DoubleAnimationUsingKeyFrames BeginTime='00:00:00' Storyboard.TargetProperty='X' Storyboard.TargetName='pos'>";
        _str = _str + "            <SplineDoubleKeyFrame KeySpline='0.7,0,0.4,1' Value='-90' 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>";




        if (this.index < (itp - 2) / 2) {
            _str = _str + "  <TextBlock Width='60' Height='20' Canvas.Left='38' Canvas.Top='24' Text='" + (((itp - 2) / 2) - (this.index)) + "' TextWrapping='NoWrap' Foreground='#FFFFFFFF' FontSize='10' FontFamily='Comic Sans MS'/>"
        }

        _str = _str + "  <Rectangle x:Name='thumbBackground' Height='44' Width='60' Fill='#37FFFFFF' Opacity='1' Canvas.Left='0' Canvas.Top='0'/>";
        _str = _str + "  <Canvas>";
        _str = _str + "    <Canvas.RenderTransform>";
        _str = _str + "      <TransformGroup>";
        _str = _str + "        <ScaleTransform x:Name='scale' ScaleX='1' ScaleY='1'/>";
        _str = _str + "        <TranslateTransform x:Name='pos' X='0' Y='0'/>";
        _str = _str + "      </TransformGroup>";
        _str = _str + "    </Canvas.RenderTransform>";
        _str = _str + "    <Rectangle x:Name='thumbOver' Height='44' Width='60' Fill='#65130000' Opacity='0' Canvas.Top='0' Canvas.Left='0'/>";
        _str = _str + "    <Canvas Canvas.Top='1' Canvas.Left='30'>";
        if ((2*this.index)<itp )
            _str = _str + "  <Image Height='42' Width='28' Source='m/thumb" + (2*this.index) + ".jpg'/>";
        _str = _str + "    </Canvas>";
        _str = _str + "    <Canvas Canvas.Top='1' Canvas.Left='2'>";
        if (this.index>0)
            _str = _str + "  <Image Height='42' Width='28' Source='m/thumb" + (2*this.index-1) + ".jpg'/>";
        _str  = _str + "    </Canvas>";
        _str = _str + "  </Canvas>";
        _str = _str + "</Canvas>";
        
        this.xamlElement = pcc.createFromXaml(_str, true);

        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));
               
        this.isMouseOver = false;
        this.isMouseDown = false;
}
Thumbnail.prototype.handleMouseEnter = function(sender, eventArgs)
{
    if (this.isMouseDown == false)
    {
        this.xamlElement["Canvas.ZIndex"] = 1;      
        this.xamlElement.findName("storyZoomIn").begin();
        this.xamlElement.findName("thumbOver").opacity = 1;
    }
    else
    {
        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) {
        this.xamlElement["Canvas.ZIndex"] = 0;
        this.xamlElement.findName("storyZoomIn").stop();
        this.xamlElement.findName("thumbOver").opacity = 0;
    }
    else {
        this.xamlElement.findName("thumbOver").fill = "#65130000";
        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);
        }
    }
    this.xamlElement["Canvas.ZIndex"] = 0;  
    this.xamlElement.findName("storyZoomIn").stop();
    this.xamlElement.findName("thumbOver").fill = "#65130000";
    this.xamlElement.findName("thumbOver").opacity = 0;
    this.xamlElement.findName("thumbBackground").fill = "#37FFFFFF";

    sender.releaseMouseCapture();
    this.isMouseDown = false;
}
