<UserControl DataContext="{Binding (HUDData.Data), RelativeSource={RelativeSource Self}}" 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" 
             x:Class="ForzaUI.HUD321Control" 
             mc:Ignorable="d">
    <UserControl.Resources>
        <ResourceDictionary>
            <Style x:Key="A_Style_321Text" TargetType="local:FZTextBlock" BasedOn="{StaticResource A_Style_FZTextBlock_HorizonC}">
                <Setter Property="Opacity" Value="0" />
                <Setter Property="Color" Value="White" />
                <Setter Property="CapHeight" Value="191"/>
                <Setter Property="TextAlignment" Value="Center"/>
                <Setter Property="HorizontalAlignment" Value="Center"/>
                <Setter Property="VerticalAlignment" Value="Center"/>
                <Setter Property="Effect" Value="{StaticResource A_DropShadowEffect_DefaultHud}" />
                <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
                <Setter Property="RenderTransform">
                    <Setter.Value>
                        <ScaleTransform ScaleX="1" ScaleY="{Binding ScaleX, RelativeSource={RelativeSource Self}}"/>
                    </Setter.Value>
                </Setter>
            </Style>
            <CubicEase x:Key="A_EasingFunction_EaseIn" EasingMode="EaseIn"/>
            <CubicEase x:Key="A_EasingFunction_EaseOut" EasingMode="EaseOut"/>
            <CubicEase x:Key="A_EasingFunction_EaseInOut" EasingMode="EaseInOut"/>

            <Storyboard x:Key="PART_DefaultShowCountdownValue">
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="GoText" FillBehavior="Stop">
                    <DiscreteDoubleKeyFrame KeyTime="0:0:0.0" Value="0"/>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="FillLayer" FillBehavior="Stop">
                    <DiscreteDoubleKeyFrame KeyTime="0:0:0.0" Value="0"/>
                    <DiscreteDoubleKeyFrame KeyTime="0:0:0.15" Value="1"/>
                    <DiscreteDoubleKeyFrame KeyTime="0:0:0.81" Value="0"/>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="StrokeLayer" FillBehavior="Stop">
                    <DiscreteDoubleKeyFrame KeyTime="0:0:0.0" Value="1"/>
                    <DiscreteDoubleKeyFrame KeyTime="0:0:0.15" Value="1"/>
                    <EasingDoubleKeyFrame KeyTime="0:0:0.80" Value="0"/>
                    <DiscreteDoubleKeyFrame KeyTime="0:0:0.81" Value="1"/>
                    <EasingDoubleKeyFrame KeyTime="0:0:0.95" Value="0" EasingFunction="{StaticResource A_EasingFunction_EaseOut}"/>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)" Storyboard.TargetName="StrokeLayer" FillBehavior="Stop">
                    <DiscreteDoubleKeyFrame KeyTime="0:0:0.0" Value="2"/>
                    <EasingDoubleKeyFrame KeyTime="0:0:0.05" Value="2.3" EasingFunction="{StaticResource A_EasingFunction_EaseOut}"/>
                    <EasingDoubleKeyFrame KeyTime="0:0:0.15" Value="1" EasingFunction="{StaticResource A_EasingFunction_EaseOut}"/>
                    <EasingDoubleKeyFrame KeyTime="0:0:0.80" Value="1.2" EasingFunction="{StaticResource A_EasingFunction_EaseOut}"/>
                    <DiscreteDoubleKeyFrame KeyTime="0:0:0.81" Value="1"/>
                    <EasingDoubleKeyFrame KeyTime="0:0:0.95" Value="1.5" EasingFunction="{StaticResource A_EasingFunction_EaseOut}"/>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FZMaterial.Preset).(FZMaterialPresetDistanceField.StrokeStart)" Storyboard.TargetName="StrokeLayer" FillBehavior="Stop">
                    <DiscreteDoubleKeyFrame KeyTime="0:0:0.0" Value="0.4"/>
                    <DiscreteDoubleKeyFrame KeyTime="0:0:0.15" Value="0.5"/>
                    <DiscreteDoubleKeyFrame KeyTime="0:0:0.95" Value="0.5"/>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FZMaterial.Preset).(FZMaterialPresetDistanceField.StrokeEnd)" Storyboard.TargetName="StrokeLayer" FillBehavior="Stop">
                    <DiscreteDoubleKeyFrame KeyTime="0:0:0.0" Value="0.6"/>
                    <DiscreteDoubleKeyFrame KeyTime="0:0:0.15" Value="0.52"/>
                    <DiscreteDoubleKeyFrame KeyTime="0:0:0.81" Value="0.55"/>
                    <DiscreteDoubleKeyFrame KeyTime="0:0:0.95" Value="0.55"/>
                </DoubleAnimationUsingKeyFrames>
                <BooleanAnimationUsingKeyFrames Storyboard.TargetProperty="Tag" Storyboard.TargetName="StrokeLayer">
                    <DiscreteBooleanKeyFrame KeyTime="0:0:0.0" Value="{StaticResource A_Boolean_False}"/>
                    <DiscreteBooleanKeyFrame KeyTime="0:0:0.15" Value="{StaticResource A_Boolean_True}"/>
                    <DiscreteBooleanKeyFrame KeyTime="0:0:0.81" Value="{StaticResource A_Boolean_False}"/>
                </BooleanAnimationUsingKeyFrames>
            </Storyboard>

            <UIStoryboard x:Key="PART_GoShowCountdown">
                <UIStoryboard.TriggerAnimation>
                    <RaiseFzEvent TriggerAnimation.KeyTime="0:0:1.0" EventName="ShownComplete"/>
                </UIStoryboard.TriggerAnimation>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="FillLayer" FillBehavior="Stop">
                    <DiscreteDoubleKeyFrame KeyTime="0:0:0.0" Value="0"/>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="StrokeLayer" FillBehavior="Stop">
                    <DiscreteDoubleKeyFrame KeyTime="0:0:0.0" Value="0"/>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="DiamondLayer" FillBehavior="Stop">
                    <DiscreteDoubleKeyFrame KeyTime="0:0:0.0" Value="0"/>
                    <DiscreteDoubleKeyFrame KeyTime="0:0:0.15" Value="1"/>
                    <EasingDoubleKeyFrame KeyTime="0:0:1.0" Value="0" EasingFunction="{StaticResource A_EasingFunction_EaseOut}"/>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="DiamondLayer" FillBehavior="Stop">
                    <DiscreteDoubleKeyFrame KeyTime="0:0:0.0" Value="0.5"/>
                    <DiscreteDoubleKeyFrame KeyTime="0:0:0.15" Value="0.5"/>
                    <EasingDoubleKeyFrame KeyTime="0:0:1.0" Value="1.0" EasingFunction="{StaticResource A_EasingFunction_EaseOut}"/>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="GoText" FillBehavior="Stop">
                    <DiscreteDoubleKeyFrame KeyTime="0:0:0.0" Value="0"/>
                    <EasingDoubleKeyFrame KeyTime="0:0:0.15" Value="1" EasingFunction="{StaticResource A_EasingFunction_EaseOut}"/>
                    <DiscreteDoubleKeyFrame KeyTime="0:0:0.75" Value="1"/>
                    <EasingDoubleKeyFrame KeyTime="0:0:1.0" Value="0" EasingFunction="{StaticResource A_EasingFunction_EaseOut}"/>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)" Storyboard.TargetName="GoText" FillBehavior="Stop">
                    <DiscreteDoubleKeyFrame KeyTime="0:0:0.0" Value="2.5"/>
                    <EasingDoubleKeyFrame KeyTime="0:0:0.15" Value="1" EasingFunction="{StaticResource A_EasingFunction_EaseOut}"/>
                    <DiscreteDoubleKeyFrame KeyTime="0:0:0.75" Value="1"/>
                    <EasingDoubleKeyFrame KeyTime="0:0:1.0" Value="2.5" EasingFunction="{StaticResource A_EasingFunction_EaseOut}"/>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Background" FillBehavior="Stop">
                    <DiscreteDoubleKeyFrame KeyTime="0:0:0.0" Value="1"/>
                    <DiscreteDoubleKeyFrame KeyTime="0:0:0.75" Value="1"/>
                    <EasingDoubleKeyFrame KeyTime="0:0:1.0" Value="0" EasingFunction="{StaticResource A_EasingFunction_EaseOut}"/>
                </DoubleAnimationUsingKeyFrames>
            </UIStoryboard>

            <MappingConverter x:Key="A_CountdownValueToMargin" Default="0,0,0,0">
                <MappingConverterEntry Key="1" Value="-20,0,0,0" />
            </MappingConverter>

            <MappingConverter x:Key="A_CountdownValueToThinOutlineTransformOrigin" Default="0.5, 0.5">
                <MappingConverterEntry Key="1" Value="0.63, 0.5" />
            </MappingConverter>

            <MappingConverter x:Key="A_CountdownValueToTexturePath">
                <MappingConverterEntry Key="1" Value="game:\media\UI\Textures\Data_Bound\Generated\R8G8B8A8\Horizon_C_x0031.png" />
                <MappingConverterEntry Key="2" Value="game:\media\UI\Textures\Data_Bound\Generated\R8G8B8A8\Horizon_C_x0032.png" />
                <MappingConverterEntry Key="3" Value="game:\media\UI\Textures\Data_Bound\Generated\R8G8B8A8\Horizon_C_x0033.png" />
                <MappingConverterEntry Key="4" Value="game:\media\UI\Textures\Data_Bound\Generated\R8G8B8A8\Horizon_C_x0034.png" />
                <MappingConverterEntry Key="5" Value="game:\media\UI\Textures\Data_Bound\Generated\R8G8B8A8\Horizon_C_x0035.png" />
                <MappingConverterEntry Key="6" Value="game:\media\UI\Textures\Data_Bound\Generated\R8G8B8A8\Horizon_C_x0036.png" />
                <MappingConverterEntry Key="7" Value="game:\media\UI\Textures\Data_Bound\Generated\R8G8B8A8\Horizon_C_x0037.png" />
                <MappingConverterEntry Key="8" Value="game:\media\UI\Textures\Data_Bound\Generated\R8G8B8A8\Horizon_C_x0038.png" />
                <MappingConverterEntry Key="9" Value="game:\media\UI\Textures\Data_Bound\Generated\R8G8B8A8\Horizon_C_x0039.png" />
            </MappingConverter>

            <FZMaterialPresetDistanceField x:Key="A_Preset_FZMaterial_321Layer_Base"
                                           PxRange="128"
                                           AlphaMode="Normal"/>

            <Style x:Key="A_Style_FZMaterial_321Layer" TargetType="{Type FZMaterial}">
                <Setter Property="ImageSource" Value="{Binding CountdownValue, Converter={StaticResource A_CountdownValueToTexturePath}}"/>
                <Setter Property="GetSizeFromTexture" Value="True"/>
                <Setter Property="HorizontalAlignment" Value="Center"/>
                <Setter Property="VerticalAlignment" Value="Center"/>
                <Setter Property="Color" Value="White"/>
                <Setter Property="Opacity" Value="0"/>
                <Setter Property="Preset" Value="{StaticResource A_Preset_FZMaterial_321Layer_Base}"/>
                <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
                <Setter Property="RenderTransform">
                    <Setter.Value>
                        <ScaleTransform ScaleX="1" ScaleY="{Binding ScaleX, RelativeSource={RelativeSource Self}}"/>
                    </Setter.Value>
                </Setter>
                <Setter Property="Visibility" Value="{Binding Downloaded, RelativeSource={RelativeSource Self}, Converter={FZBooleanToVisibilityConverter}}"/>
                <Setter Property="Margin" Value="{Binding CountdownValue, Converter={StaticResource A_CountdownValueToMargin}}"/>
                <Setter Property="Tag" Value="{StaticResource A_Boolean_False}"/>
            </Style>
            
            <!-- This is to offset the thin outline (shown approximately from 0.15 to 0.8 in the animation) for some numbers (1, for example) while keeping the outline the same for the other numbers as per design's request-->
            <Style x:Key="A_Style_FZMaterial_321Layer_Stroke" TargetType="{Type FZMaterial}" BasedOn="{StaticResource A_Style_FZMaterial_321Layer}">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding Tag, RelativeSource={RelativeSource Self}}" Value="{StaticResource A_Boolean_True}">
                        <Setter Property="RenderTransformOrigin" Value="{Binding CountdownValue, Converter={StaticResource A_CountdownValueToThinOutlineTransformOrigin}}"/>
                    </DataTrigger>
                </Style.Triggers>
            </Style>

            <!-- allows centering of the diamond on the word, excluding the punctuation mark (as needed, per language) -->
            <MappingConverter x:Key="A_LangStrToMarginForDiamond" Default="0,0,0,0">
                <MappingConverterEntry Key="EN" Value="-55,0,0,0"/>
            </MappingConverter>

            <Style x:Key="A_Style_FZMaterial_DiamondLayer" TargetType="{Type FZMaterial}">
                <Setter Property="Width" Value="250"/>
                <Setter Property="Height" Value="250"/>
                <Setter Property="HorizontalAlignment" Value="Center"/>
                <Setter Property="VerticalAlignment" Value="Center"/>
                <Setter Property="Color" Value="White"/>
                <Setter Property="Opacity" Value="0"/>
                <Setter Property="Preset" Value="{RoundtangleStroke Thickness=1, CornerRadius=0}"/>
                <Setter Property="Margin" Value="{Binding LangStr, Source={StaticResource PART_UISceneContext}, Converter={StaticResource  A_LangStrToMarginForDiamond}}"/>
                <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
                <Setter Property="RenderTransform">
                    <Setter.Value>
                        <TransformGroup>
                            <ScaleTransform ScaleX="1" ScaleY="{Binding ScaleX, RelativeSource={RelativeSource Self}}"/>
                            <RotateTransform Angle="45"/>
                        </TransformGroup>
                    </Setter.Value>
                </Setter>
                <Setter Property="Visibility" Value="Visible"/>
            </Style>

        </ResourceDictionary>
    </UserControl.Resources>
    <Grid x:Name="OuterPanel" HorizontalAlignment="Center" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5">
        <Grid.RenderTransform>
            <TransformGroup>
                <ScaleTransform/>
                <SkewTransform/>
                <RotateTransform/>
                <TranslateTransform/>
            </TransformGroup>
        </Grid.RenderTransform>
        <VisualStateManager.VisualStateGroups>
            <UIVisualStateGroup x:Name="VisualStateGroup">
                <UIVisualStateGroup.Transitions>
                    <VisualTransition GeneratedDuration="0"/>
                </UIVisualStateGroup.Transitions>
                <VisualState x:Name="PART_Hidden">
                    <Storyboard>
						<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="OuterPanel">
							<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
						</DoubleAnimationUsingKeyFrames>
					</Storyboard>
                </VisualState>
                <VisualState x:Name="PART_Shown"/>
            </UIVisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        
        <MappingConverterResourcePreloader ValueType="{Type BitmapImage}">
            <MappingConverterResourcePreloader.Style>
                <Style TargetType="MappingConverterResourcePreloader">
                    <Setter Property="Converter" Value="{Null}"/>
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding Active, FallbackValue=False}" Value="True">
                            <Setter Property="Converter" Value="{StaticResource A_CountdownValueToTexturePath}"/>
                        </DataTrigger>
                    </Style.Triggers>    
                </Style>
            </MappingConverterResourcePreloader.Style>
        </MappingConverterResourcePreloader>

        <local:FZMaterial x:Name="Background"
                          ImageSource="game:\media\UI\Textures\Data_Bound\HUD\HUD_321Background.png"
                          GetSizeFromTexture="True"
                          Visibility="{Binding Downloaded, RelativeSource={RelativeSource Self}, Converter={FZBooleanToVisibilityConverter}}"/>

        <local:FZMaterial x:Name="DiamondLayer" Style="{StaticResource A_Style_FZMaterial_DiamondLayer}"/>

        <local:FZTextBlock x:Name="GoText" Text="{Binding Text}" Style="{StaticResource A_Style_321Text}" />

        <local:FZMaterial x:Name="StrokeLayer"
            Style="{StaticResource A_Style_FZMaterial_321Layer_Stroke}"
            Color="Transparent">
            <local:FZMaterial.Preset>
                <FZMaterialPresetDistanceField x:Name="StokeLayerPreset"
                    BasedOn="{StaticResource A_Preset_FZMaterial_321Layer_Base}"
                    StrokeColor="#FFFFFFFF"
                    StrokeStart="0.5"
                    StrokeEnd="0.65"/>
            </local:FZMaterial.Preset>
        </local:FZMaterial>
        
        <local:FZMaterial x:Name="FillLayer"
            Style="{StaticResource A_Style_FZMaterial_321Layer}">
            <local:FZMaterial.Preset>
                <FZMaterialPresetDistanceField x:Name="FillLayerPreset"
                    BasedOn="{StaticResource A_Preset_FZMaterial_321Layer_Base}"
                    AlphaMode="Normal"
                    GlowColor="#AAFFFFFF"
                    GlowRange="0.5"
                    GlowAdditive="True"/>
            </local:FZMaterial.Preset>
        </local:FZMaterial>

    </Grid>
</UserControl>
