///////////////////////////////////////////////////////////////////////////////
//
//  mainPage.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
//
///////////////////////////////////////////////////////////////////////////////

// total pages available
PageTurn = function(maxNumPages)
{
    this.maxNumPages = maxNumPages;
}

function getTwoDigitInt(number)
{
  // if this number already has two digits, return the int part
  if ((number < 0) || (number >= 10))
    return Math.floor(number).toString();

  // otherwise, prepend zero
  return "0" + Math.floor(number);
}

PageTurn.prototype.handleLoad = function(control, userContext, rootElement) {

    this.plugIn = control;      // Store the host plug-in
    this.content = control.content;
    this.currentDownload = 0;   // Current resource to be downloaded
    this.content.onResize = Silverlight.createDelegate(this, this._OnResize);
    this.content.onfullscreenchange = Silverlight.createDelegate(this, this._OnResize);
    this.PageScale = rootElement.findName("PageScale");
    this.PageTranslation = rootElement.findName("PageTranslation");
    // create NavigationManager
    this.navigationManager = new NavigationManager(this.plugIn, this.maxNumPages);
    this.navigationManager.audioMedia = rootElement.findName("AudioNarrationPlayer");
    this.navigationManager.audioMedia.addEventListener("mediaEnded", Silverlight.createDelegate(this.navigationManager, this.navigationManager.audioMediaEnded));
    this.navigationManager.audioMedia.addEventListener("MediaOpened", Silverlight.createDelegate(this.navigationManager, this.navigationManager.audioMediaOpened));
    this.navigationManager.audioMedia.addEventListener("markerReached", Silverlight.createDelegate(this.navigationManager, this.navigationManager.AudioNarrationPlayer_markerReached));
    //MediaOpened
    // create InkManager element that controls the mouseCaptureCanvas
    // InkManager = function(plugIn)
    //this.inkManager = new InkManager(this.plugIn, this.navigationManager);

    // InkToggleButton = function(plugIn, text, checkedHandler, uncheckedHandler)
    //var _annotateToggleButton = new InkToggleButton(this.plugIn, "Annotate", Silverlight.createDelegate(this.inkManager, this.inkManager.toggleInkMode), Silverlight.createDelegate(this.inkManager, this.inkManager.toggleInkMode));
    //this.plugIn.content.findname("inkButtonCanvas").children.add(_annotateToggleButton.xamlElement);

    // InkButton = function(plugIn, text, clickedHandler)
    //var _clearAnnotationButton = new InkButton(this.plugIn, "Clear Annotations", Silverlight.createDelegate(this.inkManager, this.inkManager.clearInk));
    //_clearAnnotationButton.xamlElement["Canvas.Left"] = 74;
    //this.plugIn.content.findname("inkButtonCanvas").children.add(_clearAnnotationButton.xamlElement);

    // create PageGenerator
    this.pageGenerator = new PageGenerator(this.maxNumPages);

    // test
    //this.pageSectionGenerator = new PageSectionGenerator();

    // begin downloading all assets
    this.downloadAssets();

    // Hook up thumbnail viewer (page browser control)
    // PageBrowserControl = function(plugIn, target, pageGenerator, this.maxNumPages)
    new PageBrowserControl(this.plugIn, rootElement.findName("pageBrowserControl"), this.pageGenerator, this.navigationManager, this.maxNumPages);
    //this._OnResize();
}

PageTurn.prototype._OnResize = function(sender, eventArgs)
{
    this._Resize(this.content.ActualWidth, this.content.ActualHeight);
}

PageTurn.prototype._Resize = function(width, height)
{
    if (width == 0 || height == 0)
    {
        return;
    }
    
    var scaleX = width / this.content.Root.Width;
    var scaleY = height / this.content.Root.Height;
    
    var scale = Math.min(scaleX, scaleY);
    this.PageScale.ScaleX = scale;
    this.PageScale.ScaleY = scale;
    this.PageTranslation.X = (width - scale * this.content.Root.Width) / 2;
    this.PageTranslation.Y = (height - scale * this.content.Root.Height) / 2;
}



PageTurn.prototype.downloadAssets = function() {
    this.downloader = this.plugIn.createObject("Downloader");
    this.downloader.addEventListener("downloadProgressChanged", Silverlight.createDelegate(this, this.downloadProgressChanged));
    this.downloader.addEventListener("completed", Silverlight.createDelegate(this, this.downloadCompleted));
    this.downloader.open("GET", this.pageGenerator.resourceArray[this.currentDownload].src);
    this.downloader.send();
}

PageTurn.prototype.downloadProgressChanged = function(sender, args)
{
    var progressRect = this.plugIn.content.findName("progressRect");
    progressRect.width = (sender.downloadProgress) * 450;
}

PageTurn.prototype.downloadCompleted = function(sender, args)
{
    if (this.currentDownload < this.pageGenerator.resourceArray.length)
    {
        var progressText = this.plugIn.content.findName("progressText");
        progressText.text = "Downloading: " + this.pageGenerator.resourceArray[this.currentDownload].name;
        this.downloader.open("GET", this.pageGenerator.resourceArray[this.currentDownload].src);
        this.downloader.send();
    }
    else
    {
        this.plugIn.content.findName("bgImage").Visibility = "Visible";
        // Hide progress UI
        var downloadUI = this.plugIn.content.findName("downloadUI");
        this.plugIn.content.findName("fadeDownloadUI").begin();
        downloadUI.isHitTestVisible = false;

        // add pages and thumbnails
        this.addOddPages();
        this.addEvenPages();
        // initialize dragging elements
        this.navigationManager.beginPageAnimation("showFold");
        
        var pageIndex = location.search.search("page=");
        
        var page = location.search.substr(pageIndex+5);
        var next = page.search("&");
        var pageNumber = -1;
        if (next == -1)
        {
            pageNumber = Number(page);
        }
        else
        {
            pageNumber = Number(page.substr(0, next));
        }
        
        if (pageNumber < 1)
        {
            return;
        }
        
        if (pageNumber % 2)
        {
            pageNumber--;
        }
        this.navigationManager.jumpToPage(pageNumber);
    }
    this.currentDownload++;
}

//create and add the pages on the left hand side of the book
PageTurn.prototype.addOddPages = function() {
    //this is the template for all odd pages
    var oddStr = "<Canvas x:Name='page0$0' xmlns='http://schemas.microsoft.com/client/2007' xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'>";
    //    oddStr = oddStr + "        MouseLeftButtonDown='oddPageMouseDown' MouseLeftButtonUp='oddPageMouseUp' MouseMove='oddPageMouseMove'>";
    oddStr = oddStr + "  <Canvas.RenderTransform>";
    oddStr = oddStr + "    <TransformGroup>";
    oddStr = oddStr + "      <RotateTransform x:Name='page$0Rotate' CenterX='0' CenterY='570' Angle='0'/>";
    oddStr = oddStr + "      <TranslateTransform x:Name='page$0Translate' X='0' Y='0'/>";
    oddStr = oddStr + "    </TransformGroup>";
    oddStr = oddStr + "  </Canvas.RenderTransform>";
    oddStr = oddStr + "  <Canvas.Clip>";
    oddStr = oddStr + "    <PathGeometry>";
    oddStr = oddStr + "      <PathFigure>";
    oddStr = oddStr + "        <LineSegment Point='0,570'/>";
    oddStr = oddStr + "        <LineSegment x:Name='page$0Point1' Point='0, 570'/>";
    oddStr = oddStr + "        <LineSegment x:Name='page$0Point2' Point='0, 570'/>";
    oddStr = oddStr + "        <LineSegment x:Name='page$0Point3' Point='0, 570'/>";
    oddStr = oddStr + "        <LineSegment Point='0,570'/>";
    oddStr = oddStr + "      </PathFigure>";
    oddStr = oddStr + "    </PathGeometry>";
    oddStr = oddStr + "  </Canvas.Clip>";
    oddStr = oddStr + "  $1";
    oddStr = oddStr + "  <InkPresenter x:Name='page$0ip' Width='420' Height='570' Canvas.Left='0' Canvas.Top='0' />";
    oddStr = oddStr + "  <Rectangle Height='1000' Width='20' Opacity='0.6' x:Name='page$0FoldShadow'>";
    oddStr = oddStr + "    <Rectangle.RenderTransform>";
    oddStr = oddStr + "      <TransformGroup>";
    oddStr = oddStr + "        <RotateTransform x:Name='page$0FoldShadowRotate' CenterX='0' CenterY='0' Angle='0'/>";
    oddStr = oddStr + "        <TranslateTransform x:Name='page$0FoldShadowTranslate' X='0' Y='0'/>";
    oddStr = oddStr + "      </TransformGroup>";
    oddStr = oddStr + "    </Rectangle.RenderTransform>";
    oddStr = oddStr + "    <Rectangle.Fill>";
    oddStr = oddStr + "      <LinearGradientBrush StartPoint='0,0' EndPoint='1,0'>";
    oddStr = oddStr + "        <GradientStop Color='#00000000' Offset='0'/>";
    oddStr = oddStr + "        <GradientStop Color='#FF000000' Offset='1'/>";
    oddStr = oddStr + "      </LinearGradientBrush>";
    oddStr = oddStr + "    </Rectangle.Fill>";
    oddStr = oddStr + "  </Rectangle>";
    oddStr = oddStr + "</Canvas>";

    // if maxNumPages is odd, we will ignore the last page, so last odd is two behind
    var _lastOdd;
    if (((this.maxNumPages / 2) - Math.floor(this.maxNumPages / 2)) == 0)
        _lastOdd = this.maxNumPages - 1;
    else
        _lastOdd = this.maxNumPages - 2;

    for (var i = 1; i <= _lastOdd; i = i + 2) {
        // $0: two digit index of this page
        var newOddPageStr = oddStr.replace(/\$0/g, getTwoDigitInt(i));
        newOddPageStr = newOddPageStr.replace(/\$1/g, this.pageGenerator.getPageString(i));
        var newOddPage = this.plugIn.content.createFromXaml(newOddPageStr);

        var newPageSection;
        var pageSectionNumber;
        var playButton;
        var audioMedia;

        switch (i) {
            case 1:
                {
                    pageSectionNumber = i + "_1";
                    newPageSection = this.plugIn.content.createFromXaml(this.pageGenerator.getPageSectionString(pageSectionNumber, 2, 5, 210, 190)); // left, top, width, height
                    playButton = newPageSection.findName("PlayButton" + pageSectionNumber);
                    playButton.addEventListener("mouseLeftButtonDown", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseDown));
                    playButton.addEventListener("mouseEnter", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseEnter));
                    playButton.addEventListener("mouseLeave", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseLeave));
                    newOddPage.children.add(newPageSection);

                    pageSectionNumber = i + "_2";
                    newPageSection = this.plugIn.content.createFromXaml(this.pageGenerator.getPageSectionString(pageSectionNumber, 212, 5, 210, 190)); // left, top, width, height
                    playButton = newPageSection.findName("PlayButton" + pageSectionNumber);
                    playButton.addEventListener("mouseLeftButtonDown", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseDown));
                    playButton.addEventListener("mouseEnter", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseEnter));
                    playButton.addEventListener("mouseLeave", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseLeave));
                    newOddPage.children.add(newPageSection);

                    pageSectionNumber = i + "_3";
                    newPageSection = this.plugIn.content.createFromXaml(this.pageGenerator.getPageSectionString(pageSectionNumber, 2, 195, 210, 195)); // left, top, width, height
                    playButton = newPageSection.findName("PlayButton" + pageSectionNumber);
                    playButton.addEventListener("mouseLeftButtonDown", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseDown));
                    playButton.addEventListener("mouseEnter", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseEnter));
                    playButton.addEventListener("mouseLeave", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseLeave));
                    newOddPage.children.add(newPageSection);

                    pageSectionNumber = i + "_4";
                    newPageSection = this.plugIn.content.createFromXaml(this.pageGenerator.getPageSectionString(pageSectionNumber, 212, 195, 210, 195)); // left, top, width, height
                    playButton = newPageSection.findName("PlayButton" + pageSectionNumber);
                    playButton.addEventListener("mouseLeftButtonDown", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseDown));
                    playButton.addEventListener("mouseEnter", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseEnter));
                    playButton.addEventListener("mouseLeave", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseLeave));
                    newOddPage.children.add(newPageSection);

                    pageSectionNumber = i + "_5";
                    newPageSection = this.plugIn.content.createFromXaml(this.pageGenerator.getPageSectionString(pageSectionNumber, 2, 390, 210, 175)); // left, top, width, height
                    playButton = newPageSection.findName("PlayButton" + pageSectionNumber);
                    playButton.addEventListener("mouseLeftButtonDown", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseDown));
                    playButton.addEventListener("mouseEnter", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseEnter));
                    playButton.addEventListener("mouseLeave", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseLeave));
                    newOddPage.children.add(newPageSection);

                    pageSectionNumber = i + "_6";
                    newPageSection = this.plugIn.content.createFromXaml(this.pageGenerator.getPageSectionString(pageSectionNumber, 212, 390, 210, 175)); // left, top, width, height
                    playButton = newPageSection.findName("PlayButton" + pageSectionNumber);
                    playButton.addEventListener("mouseLeftButtonDown", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseDown));
                    playButton.addEventListener("mouseEnter", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseEnter));
                    playButton.addEventListener("mouseLeave", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseLeave));
                    newOddPage.children.add(newPageSection);
                    break;
                }
            case 3:
                {
                    pageSectionNumber = i + "_1";
                    newPageSection = this.plugIn.content.createFromXaml(this.pageGenerator.getPageSectionString(pageSectionNumber, 2, 5, 210, 190)); // left, top, width, height
                    playButton = newPageSection.findName("PlayButton" + pageSectionNumber);
                    playButton.addEventListener("mouseLeftButtonDown", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseDown));
                    playButton.addEventListener("mouseEnter", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseEnter));
                    playButton.addEventListener("mouseLeave", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseLeave));
                    newOddPage.children.add(newPageSection);

                    pageSectionNumber = i + "_2";
                    newPageSection = this.plugIn.content.createFromXaml(this.pageGenerator.getPageSectionString(pageSectionNumber, 212, 5, 210, 190)); // left, top, width, height
                    playButton = newPageSection.findName("PlayButton" + pageSectionNumber);
                    playButton.addEventListener("mouseLeftButtonDown", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseDown));
                    playButton.addEventListener("mouseEnter", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseEnter));
                    playButton.addEventListener("mouseLeave", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseLeave));
                    newOddPage.children.add(newPageSection);

                    pageSectionNumber = i + "_3";
                    newPageSection = this.plugIn.content.createFromXaml(this.pageGenerator.getPageSectionString(pageSectionNumber, 2, 195, 210, 195)); // left, top, width, height
                    playButton = newPageSection.findName("PlayButton" + pageSectionNumber);
                    playButton.addEventListener("mouseLeftButtonDown", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseDown));
                    playButton.addEventListener("mouseEnter", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseEnter));
                    playButton.addEventListener("mouseLeave", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseLeave));
                    newOddPage.children.add(newPageSection);

                    pageSectionNumber = i + "_4";
                    newPageSection = this.plugIn.content.createFromXaml(this.pageGenerator.getPageSectionString(pageSectionNumber, 209, 195, 213, 195)); // left, top, width, height
                    playButton = newPageSection.findName("PlayButton" + pageSectionNumber);
                    playButton.addEventListener("mouseLeftButtonDown", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseDown));
                    playButton.addEventListener("mouseEnter", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseEnter));
                    playButton.addEventListener("mouseLeave", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseLeave));
                    newOddPage.children.add(newPageSection);

                    pageSectionNumber = i + "_5";
                    newPageSection = this.plugIn.content.createFromXaml(this.pageGenerator.getPageSectionString(pageSectionNumber, 2, 390, 210, 175)); // left, top, width, height
                    playButton = newPageSection.findName("PlayButton" + pageSectionNumber);
                    playButton.addEventListener("mouseLeftButtonDown", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseDown));
                    playButton.addEventListener("mouseEnter", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseEnter));
                    playButton.addEventListener("mouseLeave", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseLeave));
                    newOddPage.children.add(newPageSection);

                    pageSectionNumber = i + "_6";
                    newPageSection = this.plugIn.content.createFromXaml(this.pageGenerator.getPageSectionString(pageSectionNumber, 207, 390, 215, 175)); // left, top, width, height
                    playButton = newPageSection.findName("PlayButton" + pageSectionNumber);
                    playButton.addEventListener("mouseLeftButtonDown", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseDown));
                    playButton.addEventListener("mouseEnter", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseEnter));
                    playButton.addEventListener("mouseLeave", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseLeave));
                    newOddPage.children.add(newPageSection);
                    break;
                }
            case 5:
                {
                    pageSectionNumber = i + "_1";
                    newPageSection = this.plugIn.content.createFromXaml(this.pageGenerator.getPageSectionString(pageSectionNumber, 2, 5, 210, 190)); // left, top, width, height
                    playButton = newPageSection.findName("PlayButton" + pageSectionNumber);
                    playButton.addEventListener("mouseLeftButtonDown", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseDown));
                    playButton.addEventListener("mouseEnter", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseEnter));
                    playButton.addEventListener("mouseLeave", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseLeave));
                    newOddPage.children.add(newPageSection);

                    pageSectionNumber = i + "_2";
                    newPageSection = this.plugIn.content.createFromXaml(this.pageGenerator.getPageSectionString(pageSectionNumber, 212, 5, 210, 190)); // left, top, width, height
                    playButton = newPageSection.findName("PlayButton" + pageSectionNumber);
                    playButton.addEventListener("mouseLeftButtonDown", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseDown));
                    playButton.addEventListener("mouseEnter", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseEnter));
                    playButton.addEventListener("mouseLeave", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseLeave));
                    newOddPage.children.add(newPageSection);

                    pageSectionNumber = i + "_3";
                    newPageSection = this.plugIn.content.createFromXaml(this.pageGenerator.getPageSectionString(pageSectionNumber, 2, 195, 210, 195)); // left, top, width, height
                    playButton = newPageSection.findName("PlayButton" + pageSectionNumber);
                    playButton.addEventListener("mouseLeftButtonDown", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseDown));
                    playButton.addEventListener("mouseEnter", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseEnter));
                    playButton.addEventListener("mouseLeave", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseLeave));
                    newOddPage.children.add(newPageSection);

                    pageSectionNumber = i + "_4";
                    newPageSection = this.plugIn.content.createFromXaml(this.pageGenerator.getPageSectionString(pageSectionNumber, 212, 195, 210, 195)); // left, top, width, height
                    playButton = newPageSection.findName("PlayButton" + pageSectionNumber);
                    playButton.addEventListener("mouseLeftButtonDown", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseDown));
                    playButton.addEventListener("mouseEnter", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseEnter));
                    playButton.addEventListener("mouseLeave", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseLeave));
                    newOddPage.children.add(newPageSection);

                    pageSectionNumber = i + "_5";
                    newPageSection = this.plugIn.content.createFromXaml(this.pageGenerator.getPageSectionString(pageSectionNumber, 2, 390, 210, 175)); // left, top, width, height
                    playButton = newPageSection.findName("PlayButton" + pageSectionNumber);
                    playButton.addEventListener("mouseLeftButtonDown", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseDown));
                    playButton.addEventListener("mouseEnter", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseEnter));
                    playButton.addEventListener("mouseLeave", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseLeave));
                    newOddPage.children.add(newPageSection);

                    pageSectionNumber = i + "_6";
                    newPageSection = this.plugIn.content.createFromXaml(this.pageGenerator.getPageSectionString(pageSectionNumber, 212, 390, 210, 175)); // left, top, width, height
                    playButton = newPageSection.findName("PlayButton" + pageSectionNumber);
                    playButton.addEventListener("mouseLeftButtonDown", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseDown));
                    playButton.addEventListener("mouseEnter", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseEnter));
                    playButton.addEventListener("mouseLeave", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseLeave));
                    newOddPage.children.add(newPageSection);
                    break;
                }
            case 7:
                {
                    break;
                }
            default: break;
        }

        // hook up event handlers for the odd pages
        newOddPage.addEventListener("mouseLeftButtonDown", Silverlight.createDelegate(this.navigationManager, this.navigationManager.oddPageMouseDown));
        newOddPage.addEventListener("mouseLeftButtonUp", Silverlight.createDelegate(this.navigationManager, this.navigationManager.oddPageMouseUp));
        newOddPage.addEventListener("mouseMove", Silverlight.createDelegate(this.navigationManager, this.navigationManager.oddPageMouseMove));


        // add this odd page to the scene
        this.plugIn.content.findName("oddPageCanvas").children.add(newOddPage);
    }
}

//create and add the pages on the right hand side of the book
PageTurn.prototype.addEvenPages = function() {
    //this is the template for all even pages
    var evenStr = "<Canvas x:Name='page0$0' xmlns='http://schemas.microsoft.com/client/2007' xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'>";
    evenStr = evenStr + "  <Canvas.Clip>";
    evenStr = evenStr + "    <PathGeometry>";
    evenStr = evenStr + "      <PathFigure>";
    evenStr = evenStr + "        <LineSegment Point='0,0'/>";
    evenStr = evenStr + "        <LineSegment Point='0, 570'/>";
    evenStr = evenStr + "        <LineSegment x:Name='page$0Point1' Point='420, 570'/>";
    evenStr = evenStr + "        <LineSegment x:Name='page$0Point2' Point='420, 570'/>";
    evenStr = evenStr + "        <LineSegment x:Name='page$0Point3' Point='420, 0'/>";
    evenStr = evenStr + "        <LineSegment Point='0,0'/>";
    evenStr = evenStr + "      </PathFigure>";
    evenStr = evenStr + "    </PathGeometry>";
    evenStr = evenStr + "  </Canvas.Clip>";
    //evenStr = evenStr + "  <Image Source='assets/page$0.jpg'/>";
    evenStr = evenStr + "  $1";
    evenStr = evenStr + "  <InkPresenter x:Name='page$0ip' Width='420' Height='570' Canvas.Left='0' Canvas.Top='0'/>";
    evenStr = evenStr + "  $2";
    evenStr = evenStr + "</Canvas>";

    var foldShadowStr = "  <Rectangle Height='570' Width='30' Opacity='0.2'>";
    foldShadowStr += "    <Rectangle.Fill>";
    foldShadowStr += "      <LinearGradientBrush StartPoint='0,0' EndPoint='1,0'>";
    foldShadowStr += "        <GradientStop Color='#BBFFFFFF' Offset='0'/>";
    foldShadowStr += "        <GradientStop Color='#00FFFFFF' Offset='1'/>";
    foldShadowStr += "      </LinearGradientBrush>";
    foldShadowStr += "    </Rectangle.Fill>";
    foldShadowStr += "  </Rectangle>";


    // if maxNumPages is odd, we will ignore the last page, so last odd is two behind
    var _lastEven;
    if (((this.maxNumPages / 2) - Math.floor(this.maxNumPages / 2)) == 0)
        _lastEven = this.maxNumPages;
    else
        _lastEven = this.maxNumPages - 1;

    for (var i = _lastEven; i >= 0; i = i - 2) {
        // $0: index of this page
        var newEvenPageStr = evenStr.replace(/\$0/g, getTwoDigitInt(i));
        newEvenPageStr = newEvenPageStr.replace(/\$1/g, this.pageGenerator.getPageString(i));
        if (i == 0)
            newEvenPageStr = newEvenPageStr.replace(/\$2/g, "");
        else
            newEvenPageStr = newEvenPageStr.replace(/\$2/g, foldShadowStr);

        var newEvenPage = this.plugIn.content.createFromXaml(newEvenPageStr);

        if ((__comicInfo.numOfPages > i || __comicInfo.hideLastPage === false)) {
            var newPageSection;
            var pageSectionNumber;
            var playButton;
            var audioMedia;

            switch (i) {
                case 2:
                    {
                        pageSectionNumber = i + "_1";
                        newPageSection = this.plugIn.content.createFromXaml(this.pageGenerator.getPageSectionString(pageSectionNumber, 2, 5, 210, 190)); // left, top, width, height
                        playButton = newPageSection.findName("PlayButton" + pageSectionNumber);
                        playButton.addEventListener("mouseLeftButtonDown", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseDown));
                        playButton.addEventListener("mouseEnter", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseEnter));
                        playButton.addEventListener("mouseLeave", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseLeave));
                        newEvenPage.children.add(newPageSection);

                        pageSectionNumber = i + "_2";
                        newPageSection = this.plugIn.content.createFromXaml(this.pageGenerator.getPageSectionString(pageSectionNumber, 212, 5, 210, 190)); // left, top, width, height
                        playButton = newPageSection.findName("PlayButton" + pageSectionNumber);
                        playButton.addEventListener("mouseLeftButtonDown", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseDown));
                        playButton.addEventListener("mouseEnter", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseEnter));
                        playButton.addEventListener("mouseLeave", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseLeave));
                        newEvenPage.children.add(newPageSection);

                        pageSectionNumber = i + "_3";
                        newPageSection = this.plugIn.content.createFromXaml(this.pageGenerator.getPageSectionString(pageSectionNumber, 2, 195, 210, 190)); // left, top, width, height
                        playButton = newPageSection.findName("PlayButton" + pageSectionNumber);
                        playButton.addEventListener("mouseLeftButtonDown", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseDown));
                        playButton.addEventListener("mouseEnter", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseEnter));
                        playButton.addEventListener("mouseLeave", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseLeave));
                        newEvenPage.children.add(newPageSection);

                        pageSectionNumber = i + "_4";
                        newPageSection = this.plugIn.content.createFromXaml(this.pageGenerator.getPageSectionString(pageSectionNumber, 212, 195, 210, 190)); // left, top, width, height
                        playButton = newPageSection.findName("PlayButton" + pageSectionNumber);
                        playButton.addEventListener("mouseLeftButtonDown", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseDown));
                        playButton.addEventListener("mouseEnter", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseEnter));
                        playButton.addEventListener("mouseLeave", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseLeave));
                        newEvenPage.children.add(newPageSection);

                        pageSectionNumber = i + "_5";
                        newPageSection = this.plugIn.content.createFromXaml(this.pageGenerator.getPageSectionString(pageSectionNumber, 2, 385, 210, 180)); // left, top, width, height
                        playButton = newPageSection.findName("PlayButton" + pageSectionNumber);
                        playButton.addEventListener("mouseLeftButtonDown", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseDown));
                        playButton.addEventListener("mouseEnter", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseEnter));
                        playButton.addEventListener("mouseLeave", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseLeave));
                        newEvenPage.children.add(newPageSection);

                        pageSectionNumber = i + "_6";
                        newPageSection = this.plugIn.content.createFromXaml(this.pageGenerator.getPageSectionString(pageSectionNumber, 212, 385, 210, 180)); // left, top, width, height
                        playButton = newPageSection.findName("PlayButton" + pageSectionNumber);
                        playButton.addEventListener("mouseLeftButtonDown", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseDown));
                        playButton.addEventListener("mouseEnter", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseEnter));
                        playButton.addEventListener("mouseLeave", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseLeave));
                        newEvenPage.children.add(newPageSection);
                        break;
                    }
                case 4:
                    {
                        pageSectionNumber = i + "_1";
                        newPageSection = this.plugIn.content.createFromXaml(this.pageGenerator.getPageSectionString(pageSectionNumber, 2, 5, 210, 190)); // left, top, width, height
                        playButton = newPageSection.findName("PlayButton" + pageSectionNumber);
                        playButton.addEventListener("mouseLeftButtonDown", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseDown));
                        playButton.addEventListener("mouseEnter", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseEnter));
                        playButton.addEventListener("mouseLeave", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseLeave));
                        newEvenPage.children.add(newPageSection);

                        pageSectionNumber = i + "_2";
                        newPageSection = this.plugIn.content.createFromXaml(this.pageGenerator.getPageSectionString(pageSectionNumber, 212, 5, 210, 190)); // left, top, width, height
                        playButton = newPageSection.findName("PlayButton" + pageSectionNumber);
                        playButton.addEventListener("mouseLeftButtonDown", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseDown));
                        playButton.addEventListener("mouseEnter", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseEnter));
                        playButton.addEventListener("mouseLeave", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseLeave));
                        newEvenPage.children.add(newPageSection);

                        pageSectionNumber = i + "_3";
                        newPageSection = this.plugIn.content.createFromXaml(this.pageGenerator.getPageSectionString(pageSectionNumber, 2, 195, 210, 195)); // left, top, width, height
                        playButton = newPageSection.findName("PlayButton" + pageSectionNumber);
                        playButton.addEventListener("mouseLeftButtonDown", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseDown));
                        playButton.addEventListener("mouseEnter", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseEnter));
                        playButton.addEventListener("mouseLeave", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseLeave));
                        newEvenPage.children.add(newPageSection);

                        pageSectionNumber = i + "_4";
                        newPageSection = this.plugIn.content.createFromXaml(this.pageGenerator.getPageSectionString(pageSectionNumber, 212, 195, 210, 195)); // left, top, width, height
                        playButton = newPageSection.findName("PlayButton" + pageSectionNumber);
                        playButton.addEventListener("mouseLeftButtonDown", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseDown));
                        playButton.addEventListener("mouseEnter", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseEnter));
                        playButton.addEventListener("mouseLeave", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseLeave));
                        newEvenPage.children.add(newPageSection);

                        pageSectionNumber = i + "_5";
                        newPageSection = this.plugIn.content.createFromXaml(this.pageGenerator.getPageSectionString(pageSectionNumber, 2, 390, 210, 175)); // left, top, width, height
                        playButton = newPageSection.findName("PlayButton" + pageSectionNumber);
                        playButton.addEventListener("mouseLeftButtonDown", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseDown));
                        playButton.addEventListener("mouseEnter", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseEnter));
                        playButton.addEventListener("mouseLeave", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseLeave));
                        newEvenPage.children.add(newPageSection);

                        pageSectionNumber = i + "_6";
                        newPageSection = this.plugIn.content.createFromXaml(this.pageGenerator.getPageSectionString(pageSectionNumber, 212, 390, 210, 175)); // left, top, width, height
                        playButton = newPageSection.findName("PlayButton" + pageSectionNumber);
                        playButton.addEventListener("mouseLeftButtonDown", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseDown));
                        playButton.addEventListener("mouseEnter", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseEnter));
                        playButton.addEventListener("mouseLeave", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseLeave));
                        newEvenPage.children.add(newPageSection);
                        break;
                    }
                case 6:
                    {
                        pageSectionNumber = i + "_1";
                        newPageSection = this.plugIn.content.createFromXaml(this.pageGenerator.getPageSectionString(pageSectionNumber, 2, 5, 420, 560)); // left, top, width, height
                        playButton = newPageSection.findName("PlayButton" + pageSectionNumber);
                        playButton.addEventListener("mouseLeftButtonDown", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseDown));
                        playButton.addEventListener("mouseEnter", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseEnter));
                        playButton.addEventListener("mouseLeave", Silverlight.createDelegate(this.navigationManager, this.navigationManager.playButtonMouseLeave));
                        newEvenPage.children.add(newPageSection);
                        break;
                    }
                default: break;
            }
        }

        newEvenPage.addEventListener("mouseLeftButtonDown", Silverlight.createDelegate(this.navigationManager, this.navigationManager.evenPageMouseDown));

        this.plugIn.content.findName("evenPageCanvas").children.add(newEvenPage);
    }
}