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

	<Canvas.Triggers>
		<EventTrigger>
			<BeginStoryboard>
				<Storyboard x:Name='FadeIn'>
					<DoubleAnimation To='1' Storyboard.TargetProperty='Opacity' Storyboard.TargetName='Root' Duration='0:0:0.5'/>
				</Storyboard>
			</BeginStoryboard>
			<BeginStoryboard>
				<Storyboard x:Name='FadeOut' BeginTime='1'>
					<DoubleAnimation To='0' Storyboard.TargetProperty='Opacity' Storyboard.TargetName='Root' Duration='0:0:0.5'/>
				</Storyboard>
			</BeginStoryboard>
			
			<BeginStoryboard>
				<Storyboard x:Name="Expand" BeginTime='1'>
					<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Root" Storyboard.TargetProperty="(FrameworkElement.Height)">
						<SplineDoubleKeyFrame Value="308" KeyTime="00:00:00.3"/>
					</DoubleAnimationUsingKeyFrames>
					<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="TimeText" Storyboard.TargetProperty="(UIElement.Opacity)">
						<SplineDoubleKeyFrame Value="1" KeyTime="00:00:00.3"/>
					</DoubleAnimationUsingKeyFrames>
					<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(FrameworkElement.Height)">
						<SplineDoubleKeyFrame Value="308" KeyTime="00:00:00.3"/>
					</DoubleAnimationUsingKeyFrames>
					<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="PlayControls" Storyboard.TargetProperty="(Canvas.Top)">
						<SplineDoubleKeyFrame Value="298" KeyTime="00:00:00.3"/>
					</DoubleAnimationUsingKeyFrames>
				</Storyboard>
			</BeginStoryboard>
			<BeginStoryboard>
				<Storyboard x:Name="Collapse" BeginTime='1'>
					<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Root" Storyboard.TargetProperty="(FrameworkElement.Height)">
						<SplineDoubleKeyFrame Value="304" KeyTime="00:00:00.3"/>
					</DoubleAnimationUsingKeyFrames>
					<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="TimeText" Storyboard.TargetProperty="(UIElement.Opacity)">
						<SplineDoubleKeyFrame Value="0" KeyTime="00:00:00.2500000"/>
					</DoubleAnimationUsingKeyFrames>
					<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(FrameworkElement.Height)">
						<SplineDoubleKeyFrame Value="304" KeyTime="00:00:00.3"/>
					</DoubleAnimationUsingKeyFrames>
					<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="PlayControls" Storyboard.TargetProperty="(Canvas.Top)">
						<SplineDoubleKeyFrame Value="294" KeyTime="00:00:00.3"/>
					</DoubleAnimationUsingKeyFrames>
				</Storyboard>
			</BeginStoryboard>
			<BeginStoryboard>
				<Storyboard x:Name="CloseIn" BeginTime='1'>
					<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Close" Storyboard.TargetProperty="(UIElement.Opacity)">
						<SplineDoubleKeyFrame Value="1" KeyTime="00:00:00.2500000"/>
					</DoubleAnimationUsingKeyFrames>
				</Storyboard>
			</BeginStoryboard>
			<BeginStoryboard>
				<Storyboard x:Name="CloseOut" BeginTime='1'>
					<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Close" Storyboard.TargetProperty="(UIElement.Opacity)">
						<SplineDoubleKeyFrame Value="0.4" KeyTime="00:00:00.2500000"/>
					</DoubleAnimationUsingKeyFrames>
				</Storyboard>
			</BeginStoryboard>
		</EventTrigger>
	</Canvas.Triggers>
	<Canvas x:Name="Root" Width="400" Height="304">
		<Rectangle Fill="#FFFFFFFF" RadiusX="5" RadiusY="5" x:Name="rectangle" Width="400" Height="304" Stroke="Black"/>
		
		<Canvas x:Name="PlayControls" Width="400" Height="14" Background="#00FFFFFF" Canvas.Top="294">
			<TextBlock Opacity="0" x:Name="TimeText" Canvas.Left="367" Canvas.Top="13" Foreground="#FFADADAD" Text="00:00" TextWrapping="Wrap" FontFamily="Segoe UI" FontWeight="Bold" FontSize="11"/>
			<Path Stretch="Fill" StrokeEndLineCap="Square" Stroke="#FF909090" StrokeStartLineCap="Square" StrokeThickness="2" Width="384" Height="2" Data="M8,304 L392,304" x:Name="ToBeLoadedPath" Canvas.Left="8" Canvas.Top="2"/>
			<Path Fill="#FF9B9B9B" Stretch="Fill" StrokeEndLineCap="Square" Stroke="#FF000000" StrokeStartLineCap="Square" StrokeThickness="2" Width="0" Height="2" Canvas.Left="8" Canvas.Top="2" Data="M8,304 L392,304" x:Name="LoadedPath"/>
			<Canvas Width="384" Height="4" Canvas.Left="8" Canvas.Top="2">
				<Path Fill="#FF000000" Stretch="Fill" Stroke="#FF000000" x:Name="Playhead" Width="3" Height="4" Data="M116,370 L116,386 124,394 132,386 132,370 z" Canvas.Top="2"/>
			</Canvas>
		</Canvas>

    <Canvas Opacity="0.4" x:Name="Close" Width="12.5" Height="12.5" Canvas.Left="402.015">
      <Ellipse Fill="#FF4D4D4D" StrokeEndLineCap="Square" StrokeStartLineCap="Square" StrokeThickness="2" Width="12.5" Height="12.5"/>
      <Path Stretch="Fill" StrokeEndLineCap="Square" Stroke="#FFFFFFFF" StrokeStartLineCap="Square" StrokeThickness="2" Data="M396.11851,-3.8814639 L403.88859,3.8886158" Width="6.5" Height="6.5" Canvas.Left="3" Canvas.Top="3"/>
      <Path Stretch="Fill" StrokeEndLineCap="Square" Stroke="#FFFFFFFF" StrokeStartLineCap="Square" StrokeThickness="2" Data="M396.11851,-3.8814639 L403.88859,3.8886158" RenderTransformOrigin="0.5,0.5" Width="6.5" Height="6.5" Canvas.Left="3" Canvas.Top="3">
        <Path.RenderTransform>
          <TransformGroup>
            <ScaleTransform ScaleX="1" ScaleY="-1"/>
            <SkewTransform AngleX="0" AngleY="0"/>
            <RotateTransform Angle="0"/>
            <TranslateTransform X="0" Y="0"/>
          </TransformGroup>
        </Path.RenderTransform>
      </Path>
    </Canvas>

    <MediaElement x:Name='MediaElement' Width="400" Height="288" Canvas.Top="8"/>
		
	</Canvas>

</Canvas>