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

  <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>
      </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" >

    <Canvas Opacity="1">
      <Rectangle Canvas.Top="25" Canvas.Left="455" Height="584" Width="434">
        <Rectangle.Fill>
          <ImageBrush ImageSource="assets/blankpage.png"/>
        </Rectangle.Fill>
      </Rectangle>
    </Canvas>

    <Rectangle x:Name="shadowPage01" Canvas.Top="24" Canvas.Left="36" Height="586" Width="436" Opacity="0">
      <Rectangle.Fill>
        <ImageBrush ImageSource="assets/shadowPage01.png"/>
      </Rectangle.Fill>
    </Rectangle>

    <Canvas>
      <Rectangle x:Name="cover" Canvas.Top="30" Canvas.Left="460" Height="570" Width="420">
        <Rectangle.Fill>
          <ImageBrush ImageSource="assets/cover.jpg"/>
        </Rectangle.Fill>
      </Rectangle>
    </Canvas>

    <!-- =========================== -->
    <!-- =========================== -->
    
    <Canvas>
      <Line x:Name="line" Stroke="#FFFF00FF" StrokeThickness="1" X1="880" Y1="600" X2="1283" Y2="197" Opacity="0"/>
    </Canvas>

    <Canvas MouseLeftButtonUp="javascript:stopDrag">
      <Rectangle Fill="#FF000000" Canvas.Top="0" Canvas.Left="0" Height="700" Width="921" Opacity="0.01"/>
    </Canvas>

    <!-- SHADOW BEHIND -->
    <Canvas>
      <Polygon Fill="#FF000000" x:Name="shadowBehind" Points="0,0 0,0 0,0 0,0" Opacity="0.25"/>
    </Canvas>

    <!-- =========================== -->
    <!-- SHADOW FOLD -->
    <!-- =========================== -->
    <Canvas>
      <Polygon x:Name="shadow_fold" Points="20,650 20,650 20,650" Opacity="0.6">
        <Polygon.RenderTransform>
          <TransformGroup>
            <RotateTransform x:Name="rotateShadowFold01" CenterX="20" CenterY="650" Angle="45"/>
            <TranslateTransform x:Name="translateShadowFold01" X="860" Y="-50"/>
          </TransformGroup>
        </Polygon.RenderTransform>
        <Polygon.Fill>
          <ImageBrush ImageSource="assets/shadowFold.png"/>
        </Polygon.Fill>
      </Polygon>
    </Canvas>

    <!-- RELEASE OUTSIDE WORKAROUND -->
    <Canvas x:Name="releaseOutside" MouseLeftButtonUp="javascript:stopDrag">
      <Rectangle Fill="#FF000000" Canvas.Top="0" Canvas.Left="0" Height="700" Width="1500" Opacity="0.01"/>
    </Canvas>

    <!-- FLIP BACK -->
    <Canvas x:Name="pageBack" MouseLeftButtonDown="javascript:startDragBack" MouseLeftButtonUp="javascript:stopDrag" Opacity="0">
      <Rectangle Fill="#FF000000" Canvas.Top="30" Canvas.Left="40" Height="570" Width="420"/>
    </Canvas>

    <!-- DRAG AREA -->
    <Canvas x:Name="pageCorner" MouseLeftButtonDown="javascript:startDrag" MouseLeftButtonUp="javascript:stopDrag">
      <Rectangle Fill="#FF007035" Canvas.Top="556" Canvas.Left="875" Height="46" Width="46" Opacity="0.01"/>
    </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>


