<!-- rules: do not use ampersand sign, save with Unicode-16 encoding -->
<UserControl Name="wfall13"
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" 
        xmlns:vl="clr-namespace:sloVlib;assembly=sloVlib">

  <vl:Viewer BaseUrl="http://silverlightonly.com/" Version="1.3"/>

  <Image Source="xml/waterfall.jpg" Tag="Title=Hotspots Demo,LookAt=-350;-60,Bcolor=Orange" Name="sloImage" />
 <!--
  
  
  -->
  <Canvas Name="sloHotspotLayer">
    <Canvas.Resources>
      <Style x:Key="RoundedButton" TargetType="Button">
        <Setter Property="Margin" Value="2" />
        <Setter Property="Template">
          <Setter.Value>
            <ControlTemplate TargetType="Button">
              <Border BorderBrush="DarkSlateGray" BorderThickness="1" Background="#D6FAEA" CornerRadius="10" Padding="5,0">
                <TextBlock Foreground="DarkSlateGray" FontSize="12" Text="{TemplateBinding Content}" HorizontalAlignment="Center" />
              </Border>
            </ControlTemplate>
          </Setter.Value>
        </Setter>
      </Style>
      <Style x:Key="brdrBrief" TargetType="Border">
        <Setter Property="CornerRadius" Value="10" />
        <Setter Property="Padding" Value="6" />
        <Setter Property="Background" Value="AntiqueWhite" />
        <Setter Property="BorderThickness" Value="2" />
        <Setter Property="BorderBrush" Value="Peru" />
        <Setter Property="Opacity" Value="0.9" />
      </Style>
      <Style x:Key="txtBrief" TargetType="TextBlock">
        <Setter Property="Foreground" Value="DarkSlateGray" />
        <Setter Property="TextAlignment" Value="left" />
        <Setter Property="VerticalAlignment" Value="center" />
        <Setter Property="FontSize" Value="12" />
        <Setter Property="FontFamily" Value="Arial Unicode MS" />
        <Setter Property="TextWrapping" Value="Wrap" />
      </Style>
      <Style x:Key="dimmedCanvas" TargetType="Canvas">
        <Setter Property="Background">
          <Setter.Value>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
              <GradientStop Color="#FFFCF6F6" Offset="0" />
              <GradientStop Color="#FF201999" Offset="1" />
            </LinearGradientBrush>
          </Setter.Value>
        </Setter>
        <Setter Property="Opacity" Value="0.6" />
      </Style>
      <Storyboard x:Name="ToOrange">
        <ColorAnimation Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" To="Orange" Duration="0:0:0.3" AutoReverse="true" />
      </Storyboard>
      <Storyboard x:Name="bounce">
        <DoubleAnimation Storyboard.TargetProperty="Opacity" From="1" To="0.5" Duration="0:0:0.4" AutoReverse="true" />
        <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)" From="1" To="1.5" Duration="0:0:0.2" FillBehavior="Stop" AutoReverse="true" RepeatBehavior="2x" />
        <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)" From="1" To="1.5" Duration="0:0:0.2" FillBehavior="Stop" AutoReverse="true" RepeatBehavior="2x" />
      </Storyboard>
      <Storyboard x:Name="expando" Storyboard.TargetName="showme1" FillBehavior="HoldEnd" Duration="0:0:0.4">
        <DoubleAnimation Storyboard.TargetProperty="Width" From="1" To="625" />
        <DoubleAnimation Storyboard.TargetProperty="Height" From="1" To="230" />
      </Storyboard>
      <Storyboard x:Name="myelIN" Storyboard.TargetName="myeli" Duration="0:0:0.9" AutoReverse="false">
        <DoubleAnimation From="0" To="1" Storyboard.TargetProperty="(Ellipse.Fill).(RadialGradientBrush.GradientStops)[0].(GradientStop.Offset)" />
        <DoubleAnimation From="1" To="0" Storyboard.TargetProperty="(Ellipse.Fill).(RadialGradientBrush.GradientStops)[1].(GradientStop.Offset)" />
        <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" From="1" To="0.1" />
        <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" From="1" To="0.1" />
        <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[1].(TranslateTransform.X)" From="0" To="30" />
        <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[1].(TranslateTransform.Y)" From="0" To="30" />
      </Storyboard>
      <Storyboard x:Name="rot30" Duration="0:0:0.2" AutoReverse="true">
        <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" From="0" To="-30" />
      </Storyboard>
      <Storyboard x:Name="defog">
        <DoubleAnimation Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Opacity)" From="0.2" To="0" Duration="0" AutoReverse="false" />
      </Storyboard>
      <Storyboard x:Name="enfog">
        <DoubleAnimation Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Opacity)" From="0" To="0.2" Duration="0" AutoReverse="false" />
      </Storyboard>
    </Canvas.Resources>
    <vl:Hotspot Name="video" Canvas.Left="677" Canvas.Top="325" EnterSound="xml/spring.mp3" 
                EnterAnim="visible:sho3;bounce:reel" LeaveAnim="collapse:sho3" Click="collapse:sho3;visible:myStack" ClickType="anim">
      <Image Name="reel" Source="xml/video1.png">
        <Image.RenderTransform>
          <ScaleTransform ScaleX="1" ScaleY="1" />
        </Image.RenderTransform>
      </Image>
      <Border Name="myStack" Canvas.Left="25" Canvas.Top="0" Background="AntiqueWhite" Opacity="0.9" CornerRadius="10" Padding="4" Visibility="Collapsed">
        <StackPanel Orientation="Vertical" Background="AntiqueWhite" Opacity="0.9">
          <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Margin="10,2">
            <TextBlock Style="{StaticResource txtBrief}" Text="Video and External Link demo" HorizontalAlignment="Center" Margin="15,0" />
            <Image Source="xml/close.png" HorizontalAlignment="Right" />
          </StackPanel>
          <MediaElement Source="xml/twofrogs.wmv" AutoPlay="False" Width="256" Height="192">
            <i:Interaction.Triggers>
              <i:EventTrigger SourceName="myStack" EventName="SizeChanged">
                <vl:MediaElementAction MediaOption="RewindAndPlay" />
              </i:EventTrigger>
              <i:EventTrigger EventName="MediaEnded">
                <vl:MediaElementAction MediaOption="Rewind" />
              </i:EventTrigger>
              <i:EventTrigger SourceName="buttonPlay" EventName="Click">
                <vl:MediaElementAction />
              </i:EventTrigger>
              <i:EventTrigger SourceName="buttonPause" EventName="Click">
                <vl:MediaElementAction MediaOption="Pause" />
              </i:EventTrigger>
              <i:EventTrigger SourceName="buttonStop" EventName="Click">
                <vl:MediaElementAction MediaOption="Stop" />
              </i:EventTrigger>
              <i:EventTrigger SourceName="myStack" EventName="MouseLeftButtonDown">
                <vl:MediaElementAction MediaOption="Pause" />
              </i:EventTrigger>
            </i:Interaction.Triggers>
          </MediaElement>
          <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="2">
            <Button Name="buttonPlay" Content="► Play" Style="{StaticResource RoundedButton}" />
            <Button Name="buttonPause" Content="Pause" Style="{StaticResource RoundedButton}" />
            <Button Name="buttonStop" Content="■ Stop" Style="{StaticResource RoundedButton}" />
          </StackPanel>
          <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="3">
            <TextBlock Style="{StaticResource txtBrief}" Text="Story of two frogs" Margin="12,0" />
            <HyperlinkButton NavigateUri="http://www.ask.com/questions-about/Different-Types-of-Frogs" TargetName="_new" HorizontalAlignment="Left" VerticalAlignment="Center" Content="Are frogs so different?" Foreground="Blue" FontSize="12" />
          </StackPanel>
        </StackPanel>
      </Border>
      <Border Name="sho3" Canvas.Left="33" Canvas.Top="0" Style="{StaticResource brdrBrief}" Visibility="Collapsed">
        <TextBlock Style="{StaticResource txtBrief}" Width="190">
          <Run Foreground="Peru" FontWeight="Bold" Text="On Enter" />: sound, animation, show text panel<LineBreak />
          <Run Foreground="Peru" FontWeight="Bold" Text="On Click" />: show a panel with text, video, link and buttons
        </TextBlock>
      </Border>
    </vl:Hotspot>
    <vl:Hotspot Name="pigi" Canvas.Left="493" Canvas.Top="339" EnterSound="xml/parakeet.mp3" 
                EnterAnim="myelIN;visible:text2" LeaveAnim="collapse:text2" Click="collapse:text2;play:pigeon" ClickType="anim">
      <Ellipse Name="myeli" Width="60" Height="60" Canvas.Left="-30" Canvas.Top="-30">
        <Ellipse.RenderTransform>
          <TransformGroup>
            <ScaleTransform ScaleX="1" ScaleY="1" />
            <TranslateTransform X="0" Y="0" />
          </TransformGroup>
        </Ellipse.RenderTransform>
        <Ellipse.Fill>
          <RadialGradientBrush RadiusX="1" RadiusY="1">
            <GradientStop Color="Transparent" Offset="1" />
            <GradientStop Color="LightBlue" Offset="1" />
          </RadialGradientBrush>
        </Ellipse.Fill>
      </Ellipse>
      <Image Source="xml/pige1.png" Canvas.Left="-10" Canvas.Top="-25" />
      <MediaElement Name="pigeon" Canvas.Left="15" Source="xml/pijon.wmv" AutoPlay="false" Visibility="Collapsed">
        <MediaElement.Clip>
          <RectangleGeometry Rect="0, 0, 320, 210" />
        </MediaElement.Clip>
        <MediaElement.Effect>
          <vl:ChromaEffect ColorKey="#FF03257B" Tolerance="0.5" />
        </MediaElement.Effect>
        <i:Interaction.Triggers>
          <i:EventTrigger EventName="MediaEnded">
            <vl:FEaction FEoption="Hide" />
          </i:EventTrigger>
        </i:Interaction.Triggers>
      </MediaElement>
      <Border Name="text2" Canvas.Left="30" Canvas.Top="-10" Style="{StaticResource brdrBrief}" Visibility="Collapsed">
        <TextBlock Style="{StaticResource txtBrief}">
          <Run Foreground="Peru" FontWeight="Bold" Text="Hotspot" />: JPEG image + animated circle shape<LineBreak /><Run Foreground="Peru" FontWeight="Bold" Text="On Enter" />: show text<LineBreak /><Run Foreground="Peru" FontWeight="Bold" Text="On Click" />: play video with auto-hide on end
        </TextBlock>
      </Border>
    </vl:Hotspot>
    <vl:Hotspot Name="contour1" ContourPath="shape" ScaleOnly="shape" EnterSound="xml/contour.mp3" EnterAnim="defog:shape;visible:Stext" LeaveAnim="enfog:shape;collapse:Stext" Canvas.Left="552" Canvas.Top="508">
      <Path Name="shape" StrokeThickness="1" Stroke="Chartreuse" Data="M0,0 L-2.083,-3.333 -3.333,-6.25 -5.417,-8.75 -8.333,-11.667 -11.25,-15 -13.75,-17.917 -16.25,-21.25 -18.75,-25 -20.417,-27.917 -22.083,-31.667 -24.167,-35.833 -25.833,-39.583 -26.667,-42.083 -27.083,-46.25 -27.083,-49.583 -27.083,-53.333 -25,-56.667 -22.5,-58.333 -19.167,-61.25 -16.25,-62.917 -13.333,-63.75 -10.833,-64.167 -8.333,-64.167 -5.833,-64.167 -3.333,-64.167 -0.417,-62.5 2.083,-60 4.583,-57.5 7.5,-54.583 8.333,-52.083 8.333,-49.583 10.833,-50 13.333,-52.917 15.417,-55.417 17.917,-57.5 20.833,-59.583 23.333,-61.25 25.833,-62.5 28.75,-64.167 31.25,-65 34.167,-65.417 36.667,-65 38.333,-62.5 40.417,-59.583 41.667,-57.083 43.333,-54.583 43.333,-51.667 43.75,-48.75 43.75,-45.417 43.75,-42.083 43.75,-39.167 42.917,-36.25 41.25,-33.333 40,-30.833 38.333,-28.333 35.417,-25 33.333,-22.5 30,-20 27.083,-17.917 23.75,-14.583 21.25,-12.5 18.75,-10.833 15.417,-8.75 12.917,-7.083 10.417,-5.833 7.5,-4.167 4.167,-2.5 1.667,-1.667 z">
        <Path.Fill>
          <SolidColorBrush Opacity="0.3" Color="Chartreuse" />
        </Path.Fill>
      </Path>
      <Border Name="Stext" Canvas.Left="25" Canvas.Top="-10" Style="{StaticResource brdrBrief}" Visibility="Collapsed">
        <TextBlock Style="{StaticResource txtBrief}" Width="200">
          <Run Foreground="Peru" FontWeight="Bold" Text="Hotspot" />: A contour around some part of the image, will scale on zoom. You can draw it with the mouse in the Editor.
          <LineBreak /><Run Foreground="Peru" FontWeight="Bold" Text="On Enter" />: voice sound
        </TextBlock>
      </Border>
    </vl:Hotspot>
    <vl:Hotspot Name="propeller" Canvas.Left="483" Canvas.Top="575" EnterSound="xml/quik.mp3" 
                EnterAnim="visible:showme1;expando" LeaveAnim="collapse:showme1" Click="http://en.wikipedia.org/wiki/Propeller" Target="_newWindow" ClickType="web">
      <Image Name="RotaSpot" Source="xml/prop.png">
        <Image.RenderTransform>
          <RotateTransform Angle="0" CenterX="16" CenterY="16" />
        </Image.RenderTransform>
        <Image.Triggers>
          <EventTrigger RoutedEvent="Canvas.Loaded">
            <BeginStoryboard>
              <Storyboard>
                <DoubleAnimation Storyboard.TargetName="RotaSpot" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" Duration="0:0:3" From="0" To="360" RepeatBehavior="Forever" FillBehavior="HoldEnd" AutoReverse="false" />
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger>
        </Image.Triggers>
      </Image>
      <Border Name="showme1" Canvas.Left="32" Canvas.Top="0" Style="{StaticResource brdrBrief}" Visibility="Collapsed">
        <TextBlock Style="{StaticResource txtBrief}">
          <Run Foreground="Peru" FontWeight="Bold" Text="Hotspot" />: JPEG with auto-rotation<LineBreak /><Run Foreground="Peru" FontWeight="Bold" Text="On Enter" />: sound, animated text panel<LineBreak /><Run Foreground="Peru" FontWeight="Bold" Text="On Click" />: external page in browser pop-up
        </TextBlock>
      </Border>
    </vl:Hotspot>
    <vl:Hotspot Name="arrowUP" Canvas.Left="405" Canvas.Top="502" EnterSound="xml/quik.mp3" 
                EnterAnim="visible:hlkText1;ToOrange:arrow" LeaveAnim="collapse:hlkText1" Click="gdlp13.xaml" ClickType="xml">
      <Path Name="arrow" StrokeThickness="0.5" Stroke="Sienna" Fill="White" Opacity="0.8" Data="M2,1 L2,5 0,5 3,8 6,5 4,5 4,1 A 1,1 180 0 0 2,1">
        <Path.RenderTransform>
          <TransformGroup>
            <TranslateTransform X="-3" Y="-5" />
            <RotateTransform Angle="-135" CenterX="0" CenterY="0" />
            <ScaleTransform ScaleX="5" ScaleY="5" />
          </TransformGroup>
        </Path.RenderTransform>
      </Path>
      <TextBlock Text="to Beach 360°" Foreground="White" Canvas.Top="23" Canvas.Left="-20" />
      <Border Name="hlkText1" Canvas.Left="25" Canvas.Top="-10" Style="{StaticResource brdrBrief}" Visibility="Collapsed">
        <TextBlock Style="{StaticResource txtBrief}">
          <Run Foreground="Peru" FontWeight="Bold" Text="Hotspot" />: path shape with Render Transformations<LineBreak /><Run Foreground="Peru" FontWeight="Bold" Text="On Enter" />: sound, color animation, show this text<LineBreak /><Run Foreground="Peru" FontWeight="Bold" Text="On Click" />: switch to another panorama (360°)
        </TextBlock>
      </Border>
    </vl:Hotspot>
    <vl:Hotspot Name="tv" Canvas.Left="337" Canvas.Top="356" 
                EnterAnim="visible:showme2" LeaveAnim="collapse:showme2" Click="collapse:showme2;visible:TVwin" ClickType="anim">
      <Image Name="TVicon" Source="xml/tv2.png" HorizontalAlignment="left" VerticalAlignment="top" />
      <TextBlock Foreground="White" Canvas.Top="-10">TV</TextBlock>
      <Border Name="TVwin" Canvas.Left="25" Background="AntiqueWhite" CornerRadius="10" Padding="4" Visibility="Collapsed" Width="{Binding Value, ElementName=sizeSlider}" Height="{Binding Value, ElementName=sizeSlider}">
        <StackPanel Orientation="Vertical" Background="Transparent">
          <Grid HorizontalAlignment="Stretch">
            <Grid.RowDefinitions>
              <RowDefinition />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="Auto" />
              <ColumnDefinition Width="Auto" />
              <ColumnDefinition Width="*" />
              <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <TextBlock Style="{StaticResource txtBrief}" Text="size" Margin="2" Grid.Column="0" Grid.Row="0" />
            <Slider Name="sizeSlider" Orientation="Horizontal" Width="60" Minimum="320" Maximum="600" Grid.Column="1" Grid.Row="0" />
            <TextBlock Style="{StaticResource txtBrief}" Text="TV streams demo" Margin="35,0" HorizontalAlignment="Center" Grid.Column="2" Grid.Row="0" />
            <Image Source="xml/close.png" Grid.Column="3" Grid.Row="0" />
          </Grid>
          <MediaElement AutoPlay="False">
            <i:Interaction.Triggers>
              <i:EventTrigger SourceName="TVwin" EventName="SizeChanged">
                <vl:MediaElementAction MediaOption="Load" MediaFile="http://playlist.yahoo.com/makeplaylist.dll?id=1368163" />
              </i:EventTrigger>
              <i:EventTrigger SourceName="btnPlay" EventName="Click">
                <vl:MediaElementAction MediaOption="Play" />
              </i:EventTrigger>
              <i:EventTrigger SourceName="btnStop" EventName="Click">
                <vl:MediaElementAction MediaOption="Stop" />
              </i:EventTrigger>
              <i:EventTrigger SourceName="TVwin" EventName="MouseLeftButtonDown">
                <vl:MediaElementAction MediaOption="Stop" />
              </i:EventTrigger>
              <i:EventTrigger SourceName="btnMusic" EventName="Click">
                <vl:MediaElementAction MediaOption="Load" MediaFile="http://emusic.tv/livestream/livestream.wvx" />
              </i:EventTrigger>
              <i:EventTrigger SourceName="btnWild" EventName="Click">
                <vl:MediaElementAction MediaOption="Load" MediaFile="http://www.wildlifechannel.tv/playfirst.asp" />
              </i:EventTrigger>
              <i:EventTrigger SourceName="btnNasa" EventName="Click">
                <vl:MediaElementAction MediaOption="Load" MediaFile="http://playlist.yahoo.com/makeplaylist.dll?id=1368163" />
              </i:EventTrigger>
              <i:EventTrigger SourceName="btnMSNBC" EventName="Click">
                <vl:MediaElementAction MediaOption="Load" MediaFile="http://stream1.france24.yacast.net/f24_liveen" />
              </i:EventTrigger>
            </i:Interaction.Triggers>
          </MediaElement>
          <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="3">
            <Button Name="btnPlay" Content="► Play" Style="{StaticResource RoundedButton}" />
            <Button Name="btnStop" Content="■ Stop" Style="{StaticResource RoundedButton}" />
          </StackPanel>
          <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="3">
            <TextBlock Style="{StaticResource txtBrief}" Text="select " />
            <Button Name="btnNasa" Content="NASA" Style="{StaticResource RoundedButton}" />
            <Button Name="btnMusic" Content="Music" Style="{StaticResource RoundedButton}" />
            <Button Name="btnWild" Content="Wild" Style="{StaticResource RoundedButton}" />
            <Button Name="btnMSNBC" Content="News" Style="{StaticResource RoundedButton}" />
          </StackPanel>
        </StackPanel>
      </Border>
      <Border Name="showme2" Canvas.Left="33" Canvas.Top="0" Style="{StaticResource brdrBrief}" Visibility="Collapsed">
        <StackPanel Orientation="Vertical">
          <StackPanel Orientation="Horizontal">
            <TextBlock Style="{StaticResource txtBrief}" Width="200">
              <Run Foreground="Peru" FontWeight="Bold" Text="Hotspot" />: icon and text<LineBreak /><Run Foreground="Peru" FontWeight="Bold" Text="On Enter" />: you can add various popup elements, like animated pictures ►
            </TextBlock>
            <Image Name="star" Source="xml/star5.png" Margin="5,0">
              <Image.RenderTransform>
                <RotateTransform Angle="0" CenterX="16" CenterY="16" />
              </Image.RenderTransform>
              <Image.Triggers>
                <EventTrigger RoutedEvent="Canvas.Loaded">
                  <BeginStoryboard>
                    <Storyboard>
                      <DoubleAnimation Storyboard.TargetName="star" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" Duration="0:0:3" From="0" To="-360" RepeatBehavior="Forever" FillBehavior="HoldEnd" AutoReverse="false" />
                    </Storyboard>
                  </BeginStoryboard>
                </EventTrigger>
              </Image.Triggers>
            </Image>
          </StackPanel>
          <TextBlock Style="{StaticResource txtBrief}" Width="250">
            <Run Foreground="Peru" FontWeight="Bold" Text="On Click" />: select and view one of four TV streams
          </TextBlock>
        </StackPanel>
      </Border>
    </vl:Hotspot>
    <vl:Hotspot Name="chroma" Canvas.Left="763" Canvas.Top="575" IsScalable="true"
                EnterSound="xml/ruff.mp3" EnterAnim="visible:Ctext;rot30:again" LeaveAnim="collapse:Ctext">
      <!--ClickType="anim" Click="collapse:Ctext,again"-->
      <StackPanel Orientation="Horizontal">
        <Image Name="again" Source="xml/grump64.png" Canvas.Left="10" Canvas.Top="10" Visibility="Collapsed">
          <Image.RenderTransform>
            <RotateTransform Angle="0" CenterX="32" CenterY="32" />
          </Image.RenderTransform>
          <i:Interaction.Triggers>
            <i:EventTrigger EventName="MouseLeftButtonDown">
              <vl:FEaction FEoption="Hide" />
            </i:EventTrigger>
            <i:EventTrigger SourceName="speak" EventName="MouseLeftButtonDown">
              <vl:FEaction FEoption="Show" />
            </i:EventTrigger>
          </i:Interaction.Triggers>
        </Image>
        <MediaElement Name="speak" Source="xml/speaker.wmv" AutoPlay="True" Width="160" Height="120" Volume="0.7" IsMuted="True">
          <MediaElement.Effect>
            <vl:ChromaEffect ColorKey="#FF00FE00" Tolerance="0.53" />
          </MediaElement.Effect>
          <MediaElement.Clip>
            <RectangleGeometry Rect="5, 0, 150, 120" />
          </MediaElement.Clip>
          <i:Interaction.Triggers>
            <i:EventTrigger SourceName="again" EventName="MouseLeftButtonDown">
              <vl:MediaElementAction MediaOption="ShowAndPlay" />
            </i:EventTrigger>
            <i:EventTrigger EventName="MouseLeftButtonDown">
              <vl:MediaElementAction MediaOption="StopAndHide" />
            </i:EventTrigger>
            <i:EventTrigger EventName="MouseEnter">
              <vl:MediaElementAction MediaOption="Unmute" />
            </i:EventTrigger>
            <i:EventTrigger EventName="MouseLeave">
              <vl:MediaElementAction MediaOption="Mute" />
            </i:EventTrigger>
            <i:EventTrigger EventName="MediaEnded">
              <vl:MediaElementAction MediaOption="RewindAndPlay" />
            </i:EventTrigger>
          </i:Interaction.Triggers>
        </MediaElement>
      </StackPanel>
      <Border Name="Ctext" Canvas.Left="30" Canvas.Top="-80" Style="{StaticResource brdrBrief}" Visibility="Collapsed">
        <TextBlock Style="{StaticResource txtBrief}">
          <Run Foreground="Peru" FontWeight="Bold" Text="Hotspot" />: scalable muted Video or JPEG image<LineBreak /><Run Foreground="Peru" FontWeight="Bold" Text="On Enter" />: un-mute video, show text<LineBreak /><Run Foreground="Peru" FontWeight="Bold" Text="On Leave" />: mute video, hide text<LineBreak /><Run Foreground="Peru" FontWeight="Bold" Text="On Click" />: toggle between video and JPEG
        </TextBlock>
      </Border>
    </vl:Hotspot>
  </Canvas>
  
  <Canvas Name="sloCommandLayer" Tag="DoNotKeep">
    <Canvas.Resources>
      <Style x:Key="txtWhite" TargetType="TextBlock">
        <Setter Property="Foreground" Value="White" />
        <Setter Property="TextAlignment" Value="left" />
        <Setter Property="VerticalAlignment" Value="center" />
        <Setter Property="FontSize" Value="12" />
        <Setter Property="FontFamily" Value="Arial Unicode MS" />
        <Setter Property="TextWrapping" Value="Wrap" />
      </Style>
    </Canvas.Resources>
    <Grid>
      <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
      </Grid.RowDefinitions>
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
      </Grid.ColumnDefinitions>
      <i:Interaction.Triggers>
        <i:EventTrigger SourceName="sloCommandLayer" EventName="LayoutUpdated">
          <vl:FEaction FEoption="Stretch" Value="height" />
        </i:EventTrigger>
      </i:Interaction.Triggers>
      <StackPanel Orientation="Vertical" VerticalAlignment="Top" Margin="6">
        <StackPanel Name="hst" Orientation="Horizontal">
          <Image Name="star" Source="xml/star5.png" Margin="5,0" Height="20">
            <Image.RenderTransform>
              <TransformGroup>
                <RotateTransform Angle="0" CenterX="10" CenterY="10" />
              </TransformGroup>
            </Image.RenderTransform>
            <Image.Triggers>
              <EventTrigger RoutedEvent="Canvas.Loaded">
                <BeginStoryboard>
                  <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="star" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)" Duration="0:0:3" From="0" To="-360" RepeatBehavior="Forever" FillBehavior="HoldEnd" AutoReverse="false" />
                  </Storyboard>
                </BeginStoryboard>
              </EventTrigger>
            </Image.Triggers>
          </Image>
          <TextBlock Style="{StaticResource txtWhite}" VerticalAlignment="Center">
            <Run Foreground="White" FontWeight="Bold" Text="Hotspots" FontSize="13" />
            <TextBlock.Effect>
              <DropShadowEffect ShadowDepth="2" BlurRadius="2" Color="Black"/>
            </TextBlock.Effect>
          </TextBlock>
        </StackPanel>
        <vl:Hotspot Name="TogVisCtrl" Height="20" Click="HideSlCtrl" ClickType="anim" Margin="0,5">
          <Border BorderBrush="Peru" BorderThickness="1" Background="AntiqueWhite" Opacity="0.8" CornerRadius="10" Padding="5,0">
            <TextBlock Name="htx" Text="Hide Viewer" Foreground="Brown" FontSize="13"/>
          </Border>
        </vl:Hotspot>
        <vl:Hotspot Name="TogHlayer" Click="toggle:sloHotspotLayer,txHide,txShow" ClickType="anim">
          <Border BorderBrush="Peru" BorderThickness="1" Background="AntiqueWhite" Opacity="0.8" CornerRadius="10" Padding="5,0">
            <StackPanel Opacity="1">
              <TextBlock Name="txHide" Text="Hide Hotspots" Foreground="Brown" FontSize="13"/>
              <TextBlock Name="txShow" Text="Show Hotspots" Foreground="Brown" FontSize="13" Visibility="Collapsed"/>
            </StackPanel>
          </Border>
        </vl:Hotspot>
      </StackPanel>
<!--
      <Canvas VerticalAlignment="Bottom" Height="88" Width="400" Margin="10,10">
        <StackPanel Orientation="Vertical">
          <vl:Hotspot Name="TogVisLayer" Height="30" Width="100" Click="HideSlCtrl" ClickType="anim">
            <Border BorderBrush="Peru" BorderThickness="1" Background="AntiqueWhite" Opacity="0.7" CornerRadius="10" Padding="5,0">
              <TextBlock Name="htx" Text="Hide Pano" Foreground="Brown" FontSize="13"/>
            </Border>
          </vl:Hotspot>
          <vl:Hotspot Name="TogHlayer" Click="toggle:sloHotspotLayer;txHide;txShow" ClickType="anim" Margin="0,4">
            <Border BorderBrush="Peru" BorderThickness="1" Background="AntiqueWhite" Opacity="0.7" CornerRadius="10" Padding="5,0">
              <StackPanel Opacity="1">
                <TextBlock Name="txHide" Text="Hide Hotspots" Foreground="Brown" FontSize="13"/>
                <TextBlock Name="txShow" Text="Show Hotspots" Foreground="Brown" FontSize="13" Visibility="Collapsed"/>
              </StackPanel>
            </Border>
          </vl:Hotspot>
        </StackPanel>
      </Canvas>-->
    </Grid>
  </Canvas>
</UserControl>