<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="clr-namespace:ForzaUI"
    mc:Ignorable="d"
    x:Class="ForzaUI.HUDDriveToEventControl"
    HorizontalAlignment="Left"
    VerticalAlignment="Top"
    Margin="0,0,0,0" >
    
    <UserControl.Resources>
        <ResourceDictionary>
            <!-- Do not change key of A_Duration_Warning; it is referred to by key in code -->
            <Duration x:Key="A_Duration_Warning">0:0:30.0</Duration>

            <BackEase x:Key="A_EasingFunction_Bounce_EaseOut" EasingMode="EaseOut" Amplitude="0.5"/>
            <CircleEase x:Key="A_EasingFunction_EaseOut" EasingMode="EaseOut"/>
            <CircleEase x:Key="A_EasingFunction_EaseIn" EasingMode="EaseIn"/>

            <Storyboard x:Key="A_Storyboard_Hidden">
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="TimePanel">
                    <EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="0"/>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>

            <Storyboard x:Key="A_Storyboard_Countdown">
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="TimePanel">
                    <EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="1"/>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="TimePanel">
                    <EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="0"/>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>

            <Storyboard x:Key="A_Storyboard_CountdownWarning">
                <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(local:FZTextBlock.Color)" Storyboard.TargetName="Time">
                    <EasingColorKeyFrame KeyTime="0:0:0.0" Value="#FFFF6000"/>
                </ColorAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="TimePanel">
                    <EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="1"/>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="TimePanel">
                    <EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="0"/>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>

            <Storyboard x:Key="A_Storyboard_Transition_HiddenToCountdown">
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="TimePanel">
                    <EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="0"/>
                    <EasingDoubleKeyFrame KeyTime="0:0:0.55" Value="1" EasingFunction="{StaticResource A_EasingFunction_EaseOut}"/>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="TimePanel">
                    <EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="-18"/>
                    <EasingDoubleKeyFrame KeyTime="0:0:0.55" Value="0" EasingFunction="{StaticResource A_EasingFunction_Bounce_EaseOut}"/>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>

            <Storyboard x:Key="A_Storyboard_Transition_HiddenToCountdownWarning">
                <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(local:FZTextBlock.Color)" Storyboard.TargetName="Time">
                    <EasingColorKeyFrame KeyTime="0:0:0.0" Value="{StaticResource A_Color_Tile_Selected}"/>
                </ColorAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="TimePanel">
                    <EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="0"/>
                    <EasingDoubleKeyFrame KeyTime="0:0:0.55" Value="1" EasingFunction="{StaticResource A_EasingFunction_EaseOut}"/>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="TimePanel">
                    <EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="-18"/>
                    <EasingDoubleKeyFrame KeyTime="0:0:0.55" Value="0" EasingFunction="{StaticResource A_EasingFunction_Bounce_EaseOut}"/>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>

            <Storyboard x:Key="A_Storyboard_Transition_CountdownToCountdownWarning">
                <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(local:FZTextBlock.Color)" Storyboard.TargetName="Time">
                    <EasingColorKeyFrame KeyTime="0:0:0.2" Value="{StaticResource A_Color_Tile_Selected}"/>
                </ColorAnimationUsingKeyFrames>
            </Storyboard>

            <Style x:Key="A_Style_FrameworkElement_TransformGroup" TargetType="{x:Type FrameworkElement}">
                <Setter Property="RenderTransform">
                    <Setter.Value>
                        <TransformGroup>
                            <ScaleTransform/>
                            <SkewTransform/>
                            <RotateTransform/>
                            <TranslateTransform/>
                        </TransformGroup>
                    </Setter.Value>
                </Setter>
            </Style>

        </ResourceDictionary>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="Hidden" Storyboard="{StaticResource A_Storyboard_Hidden}"/>
                <VisualState x:Name="Countdown" Storyboard="{StaticResource A_Storyboard_Countdown}"/>
                <VisualState x:Name="CountdownWarning" Storyboard="{StaticResource A_Storyboard_CountdownWarning}"/>
                <VisualStateGroup.Transitions>
                    <VisualTransition GeneratedDuration="0:0:0.2" From="Countdown" To="CountdownWarning" Storyboard="{StaticResource A_Storyboard_Transition_CountdownToCountdownWarning}"/>
                    <VisualTransition GeneratedDuration="0:0:0.65" From="Hidden" To="Countdown"  Storyboard="{StaticResource A_Storyboard_Transition_HiddenToCountdown}"/>
                    <VisualTransition GeneratedDuration="0:0:0.65" From="Hidden" To="CountdownWarning"  Storyboard="{StaticResource A_Storyboard_Transition_HiddenToCountdownWarning}"/>
                </VisualStateGroup.Transitions>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Decorator RenderTransformOrigin="0.5,0.5" RenderTransform="{StaticResource A_SkewTransform_HUD_Italics}">
            <StackPanel x:Name="TimePanel" Orientation="Vertical" Style="{StaticResource A_Style_FrameworkElement_TransformGroup}">
                <local:FZTextBlock Text="{Binding InstructionText}" 
                                   Style="{StaticResource A_Style_FZTextBlock_HudMedium}"
                                   CapHeight="20"/>
                <Decorator Height="10"/>
                <local:FZTextBlock x:Name="Time" Text="{Binding Time}" 
                                   Style="{StaticResource A_Style_FZTextBlock_HudLarge}"
                                   Margin="2,0,0,0"
                                   Visibility="{Binding ShowTime, Converter={StaticResource A_FZBooleanToVisibilityConverter}}"
                                   CapHeight="33"/>
            </StackPanel>
        </Decorator>
    </Grid>
</UserControl>
