<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Loaded="javascript:onMainPageLoaded" x:Name="MainCanvas">

  <Canvas.Triggers>
    <EventTrigger RoutedEvent="Canvas.Loaded">
      <EventTrigger.Actions>
        <BeginStoryboard>
          <!-- SHOW THUMBNAILS -->
          <Storyboard BeginTime="5" x:Name="openPageBrowserSB">
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="lines">
              <SplineDoubleKeyFrame KeySpline="0.7,0,0.4,1" Value="1" KeyTime="00:00:00.2"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="X" Storyboard.TargetName="lineLeft">
              <SplineDoubleKeyFrame KeySpline="0.7,0,0.4,1" Value="0" KeyTime="00:00:00.6"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.6" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="pageBrowserWindow">
              <SplineDoubleKeyFrame KeySpline="0.7,0,0.4,1" Value="1" KeyTime="00:00:00.4"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.6" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="pageBrowserWindow">
              <SplineDoubleKeyFrame KeySpline="0.7,0,0.4,1" Value="1" KeyTime="00:00:00.4"/>
            </DoubleAnimationUsingKeyFrames>
          </Storyboard>
        </BeginStoryboard>
        <BeginStoryboard>
          <Storyboard BeginTime="5" Duration="0:0:0" x:Name="timerStoryboard" Completed="javascript:onTimerStoryboardCompleted"/>
        </BeginStoryboard>
      </EventTrigger.Actions>
    </EventTrigger>
  </Canvas.Triggers>

  <Image Canvas.Top="0" Canvas.Left="0" Height="50" Width="900" Source="assets/bg_red.jpg"/>

  <Canvas Canvas.Top="50" x:Name="PageCanvas" >

    <!-- shadow behind book -->
    <Image Canvas.Top="25" Canvas.Left="455" Source="assets/shadowPage01.png" Opacity="0.8"/>
    <Image x:Name="shadowBehindPage01" Canvas.Top="25" Canvas.Left="36" Opacity="0" Source="assets/shadowPage01.png"/>

    <Canvas x:Name="evenPageCanvas" Canvas.Top="30" Canvas.Left="460" Opacity="1">
    </Canvas>

    <Polygon x:Name="shadowOnEvenPage" Canvas.Top="30" Canvas.Left="460" Points="420,570 420,570 420,570 420,570" Fill="Black" Opacity="0.25"/>

    <Canvas x:Name="oddPageCanvas" Canvas.Top="30" Canvas.Left="40" Opacity="1" >
    </Canvas>

  </Canvas>

  <!-- ***************************** -->
  <!-- THUMBNAILS FOR BROWSING PAGES -->
  <!-- ***************************** -->
  <Canvas x:Name="pageBrowserControl" Canvas.Top="662">

    <!-- the pageBrowserWindow clips the pageBrowser to visible area -->
    <Canvas x:Name="pageBrowserWindow" Canvas.Left="74" Canvas.Top="0" Opacity="0" MouseMove="javascript:onPageBrowserWindowMouseMove" >
      <Canvas.Clip>
        <RectangleGeometry Rect="0,-300 770 500"/>
      </Canvas.Clip>

      <Rectangle Height="44" Width="770" Fill="#30000000" Opacity="0.01"/>

      <!-- pageBrowser is where all the Thumbnails are added -->
      <Canvas x:Name="pageBrowser"/>

      <!--<Rectangle x:Name="" Height="44" Width="770" Fill="#30000000" Opacity="1"/>-->
      <!--<Rectangle x:Name="browserLeftPanel" Height="44" Width="350" Fill="#300000FF" Opacity="0.01" />
      <Rectangle x:Name="browserRightPanel" Height="44" Width="350" Fill="#300000FF" Opacity="0.01" Canvas.Left="420"/>-->

    </Canvas>

    <!-- Open/Close Thumbnails -->
    <Canvas x:Name="pageBrowserButton" Canvas.Top="3" Canvas.Left="855" MouseEnter="javascript:enterPageBrowserButton" MouseLeave="javascript:leavePageBrowserButton"
            MouseLeftButtonDown="javascript:downPageBrowserButton" MouseLeftButtonUp="javascript:upPageBrowserButton">
      <Image x:Name="pause_normal" Height="19" Width="27" Source="assets/pb01.jpg" Opacity="1"/>
      <Image x:Name="pause_over" Height="19" Width="27" Source="assets/pb02.jpg" Opacity="0"/>
      <Image x:Name="pause_down" Height="19" Width="27" Source="assets/pb03.jpg" Opacity="0"/>
      <Image x:Name="play_normal" Height="19" Width="27" Source="assets/px01.jpg" Opacity="0"/>
      <Image x:Name="play_over" Height="19" Width="27" Source="assets/px02.jpg" Opacity="0"/>
      <Image x:Name="play_down" Height="19" Width="27" Source="assets/px03.jpg" Opacity="0"/>
    </Canvas>

    <!-- Line Thumbnails limit -->
    <Canvas x:Name="lines" Opacity="0.01">
      <Image x:Name="lineRight" Source="assets/whiteLine.jpg" Height="44" Width="1" Canvas.Left="849"/>
      <Canvas Canvas.Left="69">
        <Canvas.RenderTransform>
          <TransformGroup>
            <TranslateTransform x:Name="lineLeft" X="780" Y="0"/>
          </TransformGroup>
        </Canvas.RenderTransform>
        <Image Source="assets/whiteLine.jpg" Height="44" Width="1"/>
      </Canvas>
    </Canvas>
  </Canvas>

  <Canvas x:Name="downloadUI" Canvas.Top="250" Canvas.Left="230">
    <Path Opacity=".8" Fill="Gray" Stretch="Fill" Width="500" Height="150" Data="M0,20 L20,0 L500,0 L500,150 L0,150 z"/>
    <TextBlock x:Name="progressText" Text="" Foreground="white" Canvas.Top="50" Canvas.Left="25" />
    <Rectangle x:Name="progressRect" Fill="#ffB42600" Width="0" Height="12" Canvas.Top="100" Canvas.Left="25" />
  </Canvas>
</Canvas>


