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

   <MediaElement x:Name="media" Source="bud_ads2.wmv" Width="300" Height="300" >
      <MediaElement.Clip>
         <EllipseGeometry Center="155,150" RadiusX="115" RadiusY="90" />
      </MediaElement.Clip>
   </MediaElement>

  <Ellipse Height="200" Width="250" Canvas.Left="30" Canvas.Top="50"
     Stroke="Black" StrokeThickness="10" />

<!-- Stops media playback.-->
  <Canvas MouseLeftButtonDown="javascript:media_stop" Canvas.Left="75" Canvas.Top="260">
    <Rectangle Stroke="Black" 
       Height="40" Width="40" RadiusX="5" RadiusY="5">
      <Rectangle.Fill>
        <RadialGradientBrush GradientOrigin="0.75,0.25">
          <GradientStop Color="Orange" Offset="0.0" />
          <GradientStop Color="Red" Offset="1.0" />
        </RadialGradientBrush>
      </Rectangle.Fill>
    </Rectangle>
    <TextBlock Canvas.Left="5" Canvas.Top="5">stop</TextBlock>
  </Canvas>

  <!-- Pauses media playback. -->
  <Canvas MouseLeftButtonDown="javascript:media_pause"
     Canvas.Left="125" Canvas.Top="260">
    <Rectangle Stroke="Black" 
       Height="40" Width="50" RadiusX="5" RadiusY="5">
      <Rectangle.Fill>
        <RadialGradientBrush GradientOrigin="0.75,0.25">
          <GradientStop Color="Yellow" Offset="0.0" />
          <GradientStop Color="Orange" Offset="1.0" />
        </RadialGradientBrush>
      </Rectangle.Fill>
    </Rectangle>
    <TextBlock Canvas.Left="5" Canvas.Top="5">pause</TextBlock>
  </Canvas>

  <!-- Begins media playback. -->
  <Canvas MouseLeftButtonDown="javascript:media_begin" Canvas.Left="185" Canvas.Top="260">
    <Rectangle Stroke="Black" RadiusX="5" RadiusY="5"
       Height="40" Width="50">
      <Rectangle.Fill>
        <RadialGradientBrush GradientOrigin="0.75,0.25">
          <GradientStop Color="LimeGreen" Offset="0.0" />
          <GradientStop Color="Green" Offset="1.0" />
        </RadialGradientBrush>
      </Rectangle.Fill>
    </Rectangle>
    <TextBlock Canvas.Left="5" Canvas.Top="5">play</TextBlock>
  </Canvas>

  <Canvas.Triggers>
    <EventTrigger RoutedEvent="Canvas.Loaded">
      <EventTrigger.Actions>
        <BeginStoryboard>
          <Storyboard x:Name="animation"
              Storyboard.TargetName="ellipse"
              Storyboard.TargetProperty="(Canvas.Left)" >
            <DoubleAnimation To="280" Duration="0:0:10" />
            <DoubleAnimation Storyboard.TargetName="ellipse2" To="0" Duration="0:0:10" />
            <DoubleAnimation Storyboard.TargetName="Vertical1" To="300" 
                                        Duration="0:0:10" RepeatBehavior="Forever" />
            <DoubleAnimation Storyboard.TargetProperty="(Canvas.Top)"
                                        Storyboard.TargetName="Horizontal1" To="300"
                                        Duration="0:0:10" RepeatBehavior="Forever" />
            <DoubleAnimation Storyboard.TargetProperty="(Canvas.Top)"
                                        Storyboard.TargetName="Horizontal2" To="-300"
                                        Duration="0:0:10" RepeatBehavior="Forever" />
            <DoubleAnimation Storyboard.TargetProperty="(Canvas.Left)"
                                        Storyboard.TargetName="Vertical2" To="-300"
                                        Duration="0:0:10" RepeatBehavior="Forever" />
            <ColorAnimation 
               Storyboard.TargetName="e1_brush"
               Storyboard.TargetProperty="Color"
               From="Blue" To="White" Duration="0:0:20" />
            <ColorAnimation 
               Storyboard.TargetName="e2_brush"
               Storyboard.TargetProperty="Color"
               From="Blue" To="White" Duration="0:0:20" />
            </Storyboard>
        </BeginStoryboard>
      </EventTrigger.Actions>
    </EventTrigger>
  </Canvas.Triggers>

  <Line x:Name="Horizontal1" X1="1" Y1="1" X2="300" Y2="0"
              Stroke="#000000" StrokeThickness="1"/>
  <Line x:Name="Horizontal2" X1="0" Y1="300" X2="300" Y2="300"
              Stroke="#000000" StrokeThickness="1"/>

  <Line x:Name="Vertical1" X1="1" Y1="1" X2="1" Y2="300"
              Stroke="#000000" StrokeThickness="1"/>
  <Line x:Name="Vertical2" X1="300" Y1="1" X2="300" Y2="300"
              Stroke="#000000" StrokeThickness="1"/>

  <Ellipse x:Name="ellipse" Height="20" Width="20" Canvas.Left="0" Canvas.Top="10">
    <Ellipse.Fill>
      <SolidColorBrush x:Name="e1_brush" Color="Blue"/>
    </Ellipse.Fill>
  </Ellipse>

  <Ellipse x:Name="ellipse2" MouseLeftButtonDown="javascript:Hello"
                 Height="20" Width="20" Canvas.Left="280" Canvas.Top="10">
    <Ellipse.Fill>
      <SolidColorBrush x:Name="e2_brush" Color="Blue"/>
    </Ellipse.Fill>
  </Ellipse>

  <!-- Hyperlink to Page 2 -->
  <Canvas Width="100" Height="50" Canvas.Left="120" Canvas.Top="5"
     Background="transparent"
     MouseEnter="javascript:_linkEnter"
     MouseLeave="javascript:_linkLeave"
     MouseLeftButtonDown="javascript:_linkDown">

     <TextBlock FontSize="14"
         FontFamily="Comic Sans MS"
         Text="To Page 2" Foreground="Blue" />
     <Line Stroke="Blue" StrokeThickness="1" X1="0" Y1="20" X2="65" Y2="20"
              x:Name="ToPage2Line" Opacity="0" />
  </Canvas>

  <!-- Hyperlink to Page 2 -->

</Canvas>