// UI_AdPageCanvas.js
// Ryan van der Kooy
// 01/30/08
// eComSystems, Inc.

// Classes:
// AdPageCanvas

AdPageCanvas = function(plugIn) {
    this.id = 99999;
    this.plugIn = plugIn;
    
   
    this.currentPageNumber = 0;
   
    this.adPage;
  
   
    this.left = 100;
    this.top = 100;
    
    

            ///////////////////////////////////////////////////
            //////////////// CREATE THE MAIN CANVAS ///////////
            ///////////////////////////////////////////////////
    
    var canvasXamlString = "<Canvas xmlns='http://schemas.microsoft.com/client/2007' xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml' x:Name='" + this.id + "' RenderTransformOrigin='0.5,0.5'>";
        canvasXamlString += "  <Canvas.RenderTransform>";
        canvasXamlString += "    <TransformGroup>";
        canvasXamlString += "     <ScaleTransform ScaleX='1' ScaleY='1'/>";
        canvasXamlString += "     <SkewTransform AngleX='0' AngleY='0'/>";
        canvasXamlString += "     <RotateTransform Angle='0'/>";
        canvasXamlString += "     <TranslateTransform X='0' Y='0'/>";
        canvasXamlString += "    </TransformGroup>";
        canvasXamlString += "  </Canvas.RenderTransform>";
        canvasXamlString += "       <Canvas.Resources>";
        canvasXamlString += "                       <Storyboard SpeedRatio='3' x:Name='" + this.id + "_startFlip' BeginTime='00:00:00'>";
        canvasXamlString += "                           <DoubleAnimationUsingKeyFrames BeginTime='00:00:00' Storyboard.TargetName='" + this.id + "' Storyboard.TargetProperty='(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)'>";
        canvasXamlString += "                               <SplineDoubleKeyFrame KeyTime='00:00:00.2000000' Value='1.08'/>";
        canvasXamlString += "                               <SplineDoubleKeyFrame KeyTime='00:00:01.7000000' Value='0'/>";
        canvasXamlString += "                           </DoubleAnimationUsingKeyFrames>";      
        canvasXamlString += "                           <DoubleAnimationUsingKeyFrames BeginTime='00:00:00' Storyboard.TargetName='" + this.id + "' Storyboard.TargetProperty='(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)'>";
        canvasXamlString += "                               <SplineDoubleKeyFrame KeyTime='00:00:00.2000000' Value='1.08'/>";
        canvasXamlString += "                           </DoubleAnimationUsingKeyFrames>";
        canvasXamlString += "                           <DoubleAnimationUsingKeyFrames BeginTime='00:00:00' Storyboard.TargetName='" + this.id + "' Storyboard.TargetProperty='(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)'>";
        canvasXamlString += "                               <SplineDoubleKeyFrame KeyTime='00:00:00.2000000' Value='11.732'/>";
        canvasXamlString += "                           </DoubleAnimationUsingKeyFrames>";
        canvasXamlString += "                           <DoubleAnimationUsingKeyFrames BeginTime='00:00:00' Storyboard.TargetName='" + this.id + "' Storyboard.TargetProperty='(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)'>";
        canvasXamlString += "                               <SplineDoubleKeyFrame KeyTime='00:00:00.2000000' Value='4.054'/>";
        canvasXamlString += "                           </DoubleAnimationUsingKeyFrames>";
        canvasXamlString += "                           <DoubleAnimationUsingKeyFrames BeginTime='00:00:00' Storyboard.TargetName='" + this.id + "' Storyboard.TargetProperty='(UIElement.RenderTransform).(TransformGroup.Children)[1].(SkewTransform.AngleY)'>";
        canvasXamlString += "                               <SplineDoubleKeyFrame KeyTime='00:00:00.2000000' Value='-2.858'/>";
        canvasXamlString += "                               <SplineDoubleKeyFrame KeyTime='00:00:01.7000000' Value='2.858'/>";
        canvasXamlString += "                           </DoubleAnimationUsingKeyFrames>";
        canvasXamlString += "                       </Storyboard>";   
        
        canvasXamlString += "                       <Storyboard SpeedRatio='3' x:Name='" + this.id + "_endFlip' BeginTime='00:00:00'>";
        canvasXamlString += "                           <DoubleAnimationUsingKeyFrames BeginTime='00:00:00' Storyboard.TargetName='" + this.id + "' Storyboard.TargetProperty='(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)'>";
        canvasXamlString += "                               <SplineDoubleKeyFrame KeyTime='00:00:01.5000000' Value='1.08'/>";
        canvasXamlString += "                               <SplineDoubleKeyFrame KeyTime='00:00:01.7000000' Value='1'/>";
        canvasXamlString += "                           </DoubleAnimationUsingKeyFrames>";

        canvasXamlString += "                           <DoubleAnimationUsingKeyFrames BeginTime='00:00:00' Storyboard.TargetName='" + this.id + "' Storyboard.TargetProperty='(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)'>";
        canvasXamlString += "                               <SplineDoubleKeyFrame KeyTime='00:00:01.5000000' Value='1.08'/>";
        canvasXamlString += "                               <SplineDoubleKeyFrame KeyTime='00:00:01.7000000' Value='1'/>";
        canvasXamlString += "                           </DoubleAnimationUsingKeyFrames>";

        canvasXamlString += "                           <DoubleAnimationUsingKeyFrames BeginTime='00:00:00' Storyboard.TargetName='" + this.id + "' Storyboard.TargetProperty='(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)'>";
        canvasXamlString += "                               <SplineDoubleKeyFrame KeyTime='00:00:01.5000000' Value='11.732'/>";
        canvasXamlString += "                               <SplineDoubleKeyFrame KeyTime='00:00:01.7000000' Value='0'/>";
        canvasXamlString += "                           </DoubleAnimationUsingKeyFrames>";
        canvasXamlString += "                           <DoubleAnimationUsingKeyFrames BeginTime='00:00:00' Storyboard.TargetName='" + this.id + "' Storyboard.TargetProperty='(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)'>";
        canvasXamlString += "                               <SplineDoubleKeyFrame KeyTime='00:00:01.5000000' Value='4.054'/>";
        canvasXamlString += "                               <SplineDoubleKeyFrame KeyTime='00:00:01.7000000' Value='0'/>";
        canvasXamlString += "                           </DoubleAnimationUsingKeyFrames>";
        canvasXamlString += "                           <DoubleAnimationUsingKeyFrames BeginTime='00:00:00' Storyboard.TargetName='" + this.id + "' Storyboard.TargetProperty='(UIElement.RenderTransform).(TransformGroup.Children)[1].(SkewTransform.AngleY)'>";
        canvasXamlString += "                               <SplineDoubleKeyFrame KeyTime='00:00:01.5000000' Value='-2.858'/>";
        canvasXamlString += "                               <SplineDoubleKeyFrame KeyTime='00:00:01.7000000' Value='0'/>";
        canvasXamlString += "                           </DoubleAnimationUsingKeyFrames>";
        canvasXamlString += "                       </Storyboard>";
        canvasXamlString += "           </Canvas.Resources>";
        canvasXamlString += "</Canvas>";
          
    this.mainCanvas = this.plugIn.content.createFromXaml(canvasXamlString);
    
    
    //var pageNumberText = "<TextBlock Foreground='White' FontSize='20' Canvas.Top='-25' Canvas.Left='0'/> ";
    //this.pageNumberText = this.plugIn.content.createFromXaml(pageNumberText);
    //this.mainCanvas.children.add(this.pageNumberText);
            ///////////////////////////////////////////////////
            //////////////// CREATE THE AREAS CANVAS //////////
            ///////////////////////////////////////////////////
    var areasCanvasXamlString = "<Canvas ";
        areasCanvasXamlString += "Canvas.ZIndex='10' xmlns='http://schemas.microsoft.com/client/2007' xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml' ";
        areasCanvasXamlString += " x:Name='AreasCanvas' />";
    
    this.areasCanvas = this.plugIn.content.createFromXaml(areasCanvasXamlString);
            //Add the empty areasCanvas to the mainCanvas
    this.mainCanvas.children.add(this.areasCanvas);
    
    
    
    
    
    
            ///////////////////////////////////////////////////
            //////////////// CREATE THE PAGE IMAGE ////////////
            ///////////////////////////////////////////////////
    
    var imageXamlString = "<Image xmlns='http://schemas.microsoft.com/client/2007' xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml' ";
        imageXamlString += "x:Name='" + this.id + "_AdPageImage' ";
        imageXamlString += "RenderTransformOrigin='0.5,0.5' ";
        imageXamlString += "Canvas.Left='0' ";
        imageXamlString += "Canvas.Top='0'/>";
 
    this.pageImage = this.plugIn.content.createFromXaml(imageXamlString);
            //Add the empty pageImage to the mainCanvas
    this.mainCanvas.children.add(this.pageImage);
    
    
            ///////////////////////////////////////////////////
            //////////////// CREATE PREVIEW COMPONENTS ////////
            ///////////////////////////////////////////////////
   
    this.previewProductImage; 
    this.previewBrand;
           
 
    
    
    
    this.mainCanvas.findName(this.id + "_startFlip").addEventListener("completed", Silverlight.createDelegate(this, this.changeImage));  
    this.pageImage.addEventListener("DownloadProgressChanged", Silverlight.createDelegate(this, this.checkDownloadProgress));  
    
 
    }

    AdPageCanvas.prototype.setAdPage = function(adPage, playAnimation) {

        gblSmallPageHeight = (adPage.pageHeight * 675) / adPage.pageWidth;
        gblPlugInHeight = gblSmallPageHeight + this.top + 25;
        this.plugIn.height = gblPlugInHeight;

        try {



            this.areasCanvas.children.clear();
            this.currentPageNumber = adPage.pageNumber - 1; //convert 1 based to 0 based

            //this.currentPageNumber = adPage.pageNumber;
            if (playAnimation) {
                this.adPage = adPage;
                this.startFlip();
            } else {
                this.pageImage.setSource(this.adPage.downloadedImage, "");
            }
        } catch (err) {
            //do nothing, page doesn't exist
        }

    } 
 
AdPageCanvas.prototype.startFlip = function() {
    try {
        this.mainCanvas.findName(this.id + "_startFlip").begin();
    } catch(err) {
        //do nothing, a critical error occurred.
    }
}

AdPageCanvas.prototype.changeImage = function() {

var test;
test = 'test';

    try {
        this.pageImage.setSource(this.adPage.downloadedImage, "");
    } catch(err) {
        try {
            this.pageImage.Source = this.adPage.pageImageName;
        } catch (err) {
            alert("error");
        }
        
    }

    this.endFlip();
   
}


AdPageCanvas.prototype.checkDownloadProgress = function() {

    var test = "test";
    test = "Hello";

    if (this.pageImage.DownloadProgress == 1) {
        this.endFlip();

    }
}
AdPageCanvas.prototype.endFlip = function() {

    
    this.mainCanvas.findName(this.id + "_endFlip").begin();
    //this.pageNumberText.Text = "Viewing Page " + this.adPage.pageNumber;
}


AdPageCanvas.prototype.setWidth = function(width, maintainProportions) {
    try {
        this.width = width;
        this.pageImage.Width = width;
        this.mainCanvas.Width = width;
        } catch(err) {
        //do nothing
        }
        try {
        this.plugIn.content.findName(this.id + "_AdPageImage").Width = width;
        this.plugIn.content.findName(this.id).Width = width;
        } catch(err) {
        //do nothing, this panel hasn't been added yet.
        } 
        
    if (maintainProportions) {
        
     this.setHeight((width * (this.mainCanvas.Width / this.mainCanvas.Height)), false)   
    }          
}

AdPageCanvas.prototype.setHeight = function(height, maintainProportions) {
    try {        
        this.height = height;
        this.pageImage.Height = height;
        this.mainCanvas.Height = height;
        } catch(err) {
        //do nothing
        }

    try {
        this.plugIn.content.findName(this.id + "_AdPageImage").Height = height;
        this.plugIn.content.findName(this.id).Height = height;
        } catch(err) {
        //do nothing, this panel hasn't been added yet.
        } 
        
    
    
 }
 
 
AdPageCanvas.prototype.setTop = function(top) {
    this.top = top;
    
    this.mainCanvas["Canvas.Top"] = top;

try
    {
    
    this.plugIn.content.findName(this.id)["Canvas.Top"] = top;
    }
    catch(err)
    {
    //do nothing, this panel hasn't been added yet.
    } 
    
 
}     


AdPageCanvas.prototype.setLeft = function(left) {
    this.left = left;
    
    this.mainCanvas["Canvas.Left"] = left;

try
    {
    
    this.plugIn.content.findName(this.id)["Canvas.Left"] = left;
    }
    catch(err)
    {
    //do nothing, this panel hasn't been added yet.
    } 
    
 
}       


 
AdPageCanvas.prototype.getXamlElement = function() {

    return this.mainCanvas;
}