// =========================
//
// mainPage methods
// General functions and event handlers for PageTurn app.
//
// =========================

var wpf;               // wpf object reference
var maxNumPages = 14;  // total pages available      

function onMainPageLoaded(sender, eventArgs)
{
    wpf = document.getElementById("wpfobj");
    
    // initialize dragging elements
    showFold();
    
    // add pages and thumbnails
    addOddPages();
    addEvenPages();
    addThumbnails();    
}


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);
}

//create and add the pages on the left hand side of the book
function addOddPages()
{
    //this is the template for all odd pages
    // $0: two digit index of this page
    base =         "<Canvas xmlns='http://schemas.microsoft.com/client/2007' xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml' Height='50' >";
    base = base + "  <Polygon x:Name='page$0' Points='0,0 0,0 0,0' >";
    base = base + "  <Polygon.Fill><ImageBrush ImageSource='assets/page$1.jpg'/></Polygon.Fill>";
    base = base + "  </Polygon>";
    base = base + "  <Polygon.RenderTransform><TransformGroup>";
    base = base + "    <RotateTransform x:Name='rotatePage$0' CenterX='0' CenterY='570' Angle='90'/>";
    base = base + "    <TranslateTransform x:Name='translatePage$0' X='880' Y='30'/>";
    base = base + "   </TransformGroup></Polygon.RenderTransform>";
    base = base + "</Canvas>";
    
    var pageCanvas = wpf.findName("PageCanvas");
    
    // if maxNumPages is odd, we will ignore the last page, so last odd is two behind
    var _lastOdd;
    if (((maxNumPages/2) - Math.floor(maxNumPages/2)) == 0)
      _lastOdd = maxNumPages - 1;
    else
      _lastOdd = maxNumPages - 2;

    for (var i=_lastOdd; i>0; i = i-2)
    {
      // $0: index of this page
      var pageStr = base.replace(/\$0/g, i);
      // $1: two digit index of this page
      pageStr = pageStr.replace(/\$1/g, getTwoDigitInt(i));
      
      var newPage = wpf.createFromXaml(pageStr);
      pageCanvas.children.insert(3,newPage);
    }
}

//create and add the pages on the right hand side of the book
function addEvenPages()
{
    //this is the template for all even pages
    base =        "<Canvas Canvas.Top='30' Canvas.Left='460' xmlns='http://schemas.microsoft.com/client/2007' xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'>";
    base = base + "  <Polygon x:Name='page$0' Points='0,0 420,570 420,570 420,570 420,570'><Polygon.Fill>";
    base = base + "    <ImageBrush AlignmentX='Left' AlignmentY='Top' Stretch='none' ImageSource='assets/page$1.jpg'/>";
    base = base + "  </Polygon.Fill></Polygon></Canvas>";
    
    var pageCanvas = wpf.findName("PageCanvas");
    
    // if maxNumPages is odd, we will ignore the last page, so last odd is two behind
    var _lastEven;
    if (((maxNumPages/2) - Math.floor(maxNumPages/2)) == 0)
      _lastEven = maxNumPages;
    else
      _lastEven = maxNumPages - 1;

    for (var i=_lastEven; i>0; i = i-2)
    {
      // $0: index of this page
      var pageStr = base.replace(/\$0/g, i);
      // $1: two digit index of this page
      pageStr = pageStr.replace(/\$1/g, getTwoDigitInt(i));
      
      var newPage = wpf.createFromXaml(pageStr);
      pageCanvas.children.insert(3,newPage);
    }
}

//create and add thumbnails to pageBrowser
function addThumbnails()
{
    // this is the template for all thumbnails, given the following variables
    // $0: thumbnail number (1,2,...,maxNumPages/2)
    // $1: Canvas.Left position of this thumb (n-6)*70 - 5
    // $2: UIElement corresponding to the left page of this thumbnail
    // $3: UIElement corresponding to the right page of this thumbnail
    
    base =        "<Canvas xmlns='http://schemas.microsoft.com/client/2007' xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml' Canvas.Top='42' Canvas.Left='$1' x:Name='thumb$0' Opacity='0.5'>";
    base = base + "  <Canvas.Triggers>";
    base = base + "    <EventTrigger RoutedEvent='Canvas.Loaded'>";
    base = base + "      <BeginStoryboard>";
    base = base + "        <Storyboard BeginTime='5' Duration='Forever' FillBehavior='Stop' x:Name='storyZoomIn$0'>";
    base = base + "          <DoubleAnimationUsingKeyFrames BeginTime='00:00:00' Storyboard.TargetProperty='ScaleX' Storyboard.TargetName='scale$0'>";
    base = base + "            <SplineDoubleKeyFrame KeySpline='0.7,0,0.4,1' Value='0.25' KeyTime='00:00:00.3'/>";
    base = base + "          </DoubleAnimationUsingKeyFrames>";
    base = base + "          <DoubleAnimationUsingKeyFrames BeginTime='00:00:00' Storyboard.TargetProperty='ScaleY' Storyboard.TargetName='scale$0'>";
    base = base + "            <SplineDoubleKeyFrame KeySpline='0.7,0,0.4,1' Value='0.25' KeyTime='00:00:00.3'/>";
    base = base + "          </DoubleAnimationUsingKeyFrames>";
    base = base + "          <DoubleAnimationUsingKeyFrames BeginTime='00:00:00' Storyboard.TargetProperty='Y' Storyboard.TargetName='pos$0'>";
    base = base + "            <SplineDoubleKeyFrame KeySpline='0.7,0,0.4,1' Value='-30' KeyTime='00:00:00.3'/>";
    base = base + "          </DoubleAnimationUsingKeyFrames>";
    base = base + "          <DoubleAnimationUsingKeyFrames BeginTime='00:00:00' Storyboard.TargetProperty='Opacity' Storyboard.TargetName='thumb$0'>";
    base = base + "            <SplineDoubleKeyFrame KeySpline='0.7,0,0.4,1' Value='1' KeyTime='00:00:00.3'/>";
    base = base + "          </DoubleAnimationUsingKeyFrames>";
    base = base + "        </Storyboard>";
    base = base + "      </BeginStoryboard>";
    base = base + "    </EventTrigger>";
    base = base + "  </Canvas.Triggers>";
    base = base + "  <Rectangle x:Name='thumbBackground$0' Height='44' Width='63' Fill='#37000000' Opacity='1' Canvas.Left='-31' Canvas.Top='-42'/>";
    base = base + "  <Canvas>";
    base = base + "    <Canvas.RenderTransform>";
    base = base + "      <TransformGroup>";
    base = base + "        <ScaleTransform x:Name='scale$0' ScaleX='0.07' ScaleY='0.07'/>";
    base = base + "        <TranslateTransform x:Name='pos$0' X='0' Y='0'/>";
    base = base + "      </TransformGroup>";
    base = base + "    </Canvas.RenderTransform>";
    base = base + "    <Rectangle x:Name='thumbOver$0' Height='630' Width='900' Fill='#66000000' Opacity='0' Canvas.Top='-600' Canvas.Left='-450'/>";
    base = base + "    $2";
    base = base + "    $3";
    base = base + "  </Canvas>";
    base = base + "</Canvas>";
    
    pageBrowser = wpf.findName("pageBrowser");
    
    for (var i=0; i<=(maxNumPages/2); i++)
    {
      // $0: thumbnail number (1,2,...,maxNumPages/2)
      var thumbStr = base.replace(/\$0/g, i);
      // $1: Canvas.Left position of this thumb (n-6)*70 - 5
      thumbStr = thumbStr.replace(/\$1/g, i*70 + 42);
      
      // $2, $3: UIElements corresponding to the left and right pages, respectively, of this thumbnail
      // special case the cover thumbnail
      if (i == 0)
      {
        // the left page is blank, and the right page is the cover
        thumbStr = thumbStr.replace(/\$2/g, "");
        thumbStr = thumbStr.replace(/\$3/g, "<Image Height='570' Width='420' Source='assets/cover.jpg' Canvas.Top='-570' Canvas.Left='0'/>");
      }
      else
      {
        // populate left and right images
        thumbStr = thumbStr.replace(/\$2/g, "<Image Height='570' Width='420' Source='assets/page"+getTwoDigitInt(2*i-1)+".jpg' Canvas.Top='-570' Canvas.Left='-420'/>");
        thumbStr = thumbStr.replace(/\$3/g, "<Image Height='570' Width='420' Source='assets/page"+getTwoDigitInt(2*i)+".jpg' Canvas.Top='-570' Canvas.Left='0'/>");
      }

      var newThumb = wpf.createFromXaml(thumbStr);
      pageBrowser.Children.Add(newThumb);
      
      new Thumbnail(wpf.findName("thumb"+i));
    }
}