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

  <Canvas.Triggers>
    <EventTrigger >
      <EventTrigger.Actions>
        <BeginStoryboard>
          <Storyboard x:Name="Fwd" BeginTime="1" Completed="javascript:forward_completed" >
            <DoubleAnimation Storyboard.TargetProperty="(Canvas.Left)" Storyboard.TargetName="MichaelsAnimation" From="0" To="600" Duration="0:0:5" />
          </Storyboard>
        </BeginStoryboard>
        <BeginStoryboard>
          <Storyboard x:Name="Rev" BeginTime="1" Completed="javascript:reverse_completed" >
            <DoubleAnimation Storyboard.TargetProperty="(Canvas.Left)" Storyboard.TargetName="MichaelsAnimationReverse" From="600" To="0" Duration="0:0:5" />
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger.Actions>
    </EventTrigger>
  </Canvas.Triggers>


  <!-- Forward Animation -->
  
  <Canvas x:Name="MichaelsAnimation" Opacity="0">

    <Canvas.Triggers>
      <EventTrigger>
        <EventTrigger.Actions>
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimation x:Name="hourAnimation" Storyboard.TargetName="hourHandTransform" Storyboard.TargetProperty="Angle" From="0" To="360" Duration="0:0:5" RepeatBehavior="Forever" />
              <DoubleAnimation x:Name="hourAnimation2" Storyboard.TargetName="hourHandTransform2" Storyboard.TargetProperty="Angle" From="0" To="360" Duration="0:0:5" RepeatBehavior="Forever" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger.Actions>
      </EventTrigger>
    </Canvas.Triggers>


    <Image Source="gear_large.png"
      Canvas.Left="75" Canvas.Top="20">
      <Image.RenderTransform>
        <TransformGroup>
          <RotateTransform x:Name="hourHandTransform" Angle="0" CenterX="61" CenterY="61"/>
          <TranslateTransform X="0" Y="0"/>
        </TransformGroup>
      </Image.RenderTransform>
    </Image>



    <Canvas
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        Canvas.Left="75" Canvas.Top="198"
        x:Name="test" Width="121" Height="121">

        <Canvas.OpacityMask>
          <LinearGradientBrush StartPoint="0.0,0.0" EndPoint="0.0,1.0">
            <GradientStop Offset="0.0" Color="#CC000000" />
            <GradientStop Offset="0.4" Color="#66000000" />

            <GradientStop Offset="0.8" Color="#00000000" />
          </LinearGradientBrush>
        </Canvas.OpacityMask>

      <Image Source="gear_large.png">
        <Image.RenderTransform>
          <TransformGroup>
            <RotateTransform x:Name="hourHandTransform2" Angle="0" CenterX="61" CenterY="61"/>
            <TranslateTransform X="0" Y="0"/>
          </TransformGroup>
          <ScaleTransform ScaleY="-0.5"/>
        </Image.RenderTransform>
      </Image>

    </Canvas>

  </Canvas>
  <!-- MichaelsAnimation-->


  <!-- MichaelsAnimationReverse -->

  <Canvas x:Name="MichaelsAnimationReverse" Opacity="0">

    <Canvas.Triggers>
      <EventTrigger>
        <EventTrigger.Actions>
          <BeginStoryboard>
            <Storyboard >
              <DoubleAnimation x:Name="hourAnimationRev" Storyboard.TargetName="hourHandTransformRev" Storyboard.TargetProperty="Angle" From="360" To="0"  Duration="0:0:5" RepeatBehavior="Forever"/>
              <DoubleAnimation x:Name="hourAnimation2Rev" Storyboard.TargetName="hourHandTransform2Rev" Storyboard.TargetProperty="Angle" From="360" To="0" Duration="0:0:5" RepeatBehavior="Forever" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger.Actions>
      </EventTrigger>
    </Canvas.Triggers>

    <Image Source="gear_large.png"
      Canvas.Left="75" Canvas.Top="20">
      <Image.RenderTransform>
        <TransformGroup>
          <RotateTransform x:Name="hourHandTransformRev" Angle="0" CenterX="61" CenterY="61"/>
          <TranslateTransform X="0" Y="0"/>
        </TransformGroup>
      </Image.RenderTransform>
    </Image>


    <Canvas
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        Canvas.Left="75" Canvas.Top="198"
        x:Name="testrev" Width="121" Height="121">

        <Canvas.OpacityMask>
          <LinearGradientBrush StartPoint="0.0,0.0" EndPoint="0.0,1.0">
            <GradientStop Offset="0.0" Color="#CC000000" />
            <GradientStop Offset="0.4" Color="#66000000" />

            <GradientStop Offset="0.8" Color="#00000000" />
          </LinearGradientBrush>
        </Canvas.OpacityMask>

      <Image Source="gear_large.png">
        <Image.RenderTransform>
          <TransformGroup>
            <RotateTransform x:Name="hourHandTransform2Rev" Angle="0" CenterX="61" CenterY="61"/>
            <TranslateTransform X="0" Y="0"/>
          </TransformGroup>
          <ScaleTransform ScaleY="-0.5"/>
        </Image.RenderTransform>
      </Image>

    </Canvas>

  </Canvas>

  <!-- MichaelsAnimationReverse -->


</Canvas>