<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:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:System="clr-namespace:System;assembly=mscorlib"
    xmlns:local="clr-namespace:ForzaUI"
    mc:Ignorable="d"
    x:Class="ForzaUI.HUDSkillSongControl"
    x:Name="UserControl"
    Margin="0,-6,0,0"
    VerticalAlignment="Top"
    HorizontalAlignment="Center" >
    <UserControl.Resources>
        <ResourceDictionary>
            <ExponentialEase x:Key="A_EasingFunction_EaseOut" EasingMode="EaseOut"/>
            <ExponentialEase x:Key="A_EasingFunction_EaseIn" EasingMode="EaseIn"/>
            <ExponentialEase x:Key="A_EasingFunction_EaseInOut" EasingMode="EaseInOut"/>

            <System:Double x:Key="A_Double_SkillSong_DefaultScale">1.0</System:Double>
            <System:Double x:Key="A_Double_SkillSong_PulseScale">1.06</System:Double>

            <Style x:Key="A_Style_FZTextBlock_SkillSong"
                   TargetType="local:FZTextBlock"
                   BasedOn="{StaticResource A_Style_FZTextBlock_HudMediumLarge}">
                <Setter Property="CapHeight" Value="20" />
                <Setter Property="Color" Value="{StaticResource H_Color_Primary_Black}" />
                <Setter Property="Effect" Value="{x:Null}" />
                <Setter Property="FontFamily" Value="Horizon_A_tf" />
            </Style>

            <Style TargetType="{x:Type ProgressBar}"
                x:Key="A_Style_ProgressBar_SkillSongTimer">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ProgressBar}">
                            <Grid>
                                <local:FZMaterial Color="#CC888888"
                                                  Opacity="1"
                                                  Preset="{Roundtangle CornerRadius=2}"
                                                  x:Name="PART_Track" />
                                <local:FZMaterial Color="#FFFFF200"
                                        HorizontalAlignment="Left"
                                        Preset="{Roundtangle CornerRadius=2}"
                                        x:Name="PART_Indicator"
                                        ClipToBounds="True">
                                    <FZMaterial Preset="{Roundtangle CornerRadius=1}" Width="37" ImageSource="/ForzaUI;component/Textures/Anthem/HUD/Skill_Song_Glow.png" HorizontalAlignment="Right"/>
                                </local:FZMaterial>
                                <local:FZMaterial Preset="{RoundtangleStroke CornerRadius=2, Thickness=2}"
                                                  Color="{StaticResource H_Color_Primary_Black}"
                                                  Opacity="0.5"
                                                  Margin="-0.5" />
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

            <Style x:Key="A_Style_FZMaterial_SkillSongIconLarge" TargetType="local:FZMaterial">
                <Setter Property="Width" Value="89" />
                <Setter Property="Height" Value="89" />
                <Setter Property="Margin" Value="18,0,0,0" />
                <Setter Property="HorizontalAlignment" Value="Center" />
                <Setter Property="ImageSource" Value="/ForzaUI;component/Textures/Anthem/HUD/Skill_Song_Icon_Large.png" />
                <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
                <Setter Property="RenderTransform">
                    <Setter.Value>
                        <TransformGroup>
                            <ScaleTransform ScaleX="{StaticResource A_Double_SkillSong_DefaultScale}"
                                            ScaleY="{StaticResource A_Double_SkillSong_DefaultScale}"/>
                        </TransformGroup>
                    </Setter.Value>
                </Setter>
                <Style.Triggers>
                    <MultiDataTrigger>
                        <MultiDataTrigger.Conditions>
                            <Condition Binding="{Binding Visibility, RelativeSource={RelativeSource Self}}" Value="{x:Static Visibility.Visible}" />
                            <Condition Binding="{Binding IsInitialized, RelativeSource={RelativeSource AncestorType=Page}}" Value="{StaticResource A_Boolean_True}" />
                        </MultiDataTrigger.Conditions>
                        <MultiDataTrigger.EnterActions>
                            <BeginStoryboard x:Name="BeginPulseAnim">
                                <BeginStoryboard.Storyboard>
                                    <Storyboard RepeatBehavior="Forever">
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="{x:Null}">
                                            <EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="{StaticResource A_Double_SkillSong_DefaultScale}" EasingFunction="{StaticResource A_EasingFunction_EaseInOut}"/>
                                            <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="{StaticResource A_Double_SkillSong_DefaultScale}" EasingFunction="{StaticResource A_EasingFunction_EaseInOut}"/>
                                            <EasingDoubleKeyFrame KeyTime="0:0:0.53" Value="{StaticResource A_Double_SkillSong_PulseScale}" EasingFunction="{StaticResource A_EasingFunction_EaseInOut}"/>
                                            <EasingDoubleKeyFrame KeyTime="0:0:0.66" Value="{StaticResource A_Double_SkillSong_DefaultScale}" EasingFunction="{StaticResource A_EasingFunction_EaseInOut}"/>
                                            <EasingDoubleKeyFrame KeyTime="0:0:0.79" Value="{StaticResource A_Double_SkillSong_PulseScale}" EasingFunction="{StaticResource A_EasingFunction_EaseInOut}"/>
                                            <EasingDoubleKeyFrame KeyTime="0:0:0.92" Value="{StaticResource A_Double_SkillSong_DefaultScale}" EasingFunction="{StaticResource A_EasingFunction_EaseInOut}"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="{x:Null}">
                                            <EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="{StaticResource A_Double_SkillSong_DefaultScale}" EasingFunction="{StaticResource A_EasingFunction_EaseInOut}"/>
                                            <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="{StaticResource A_Double_SkillSong_DefaultScale}" EasingFunction="{StaticResource A_EasingFunction_EaseInOut}"/>
                                            <EasingDoubleKeyFrame KeyTime="0:0:0.53" Value="{StaticResource A_Double_SkillSong_PulseScale}" EasingFunction="{StaticResource A_EasingFunction_EaseInOut}"/>
                                            <EasingDoubleKeyFrame KeyTime="0:0:0.66" Value="{StaticResource A_Double_SkillSong_DefaultScale}" EasingFunction="{StaticResource A_EasingFunction_EaseInOut}"/>
                                            <EasingDoubleKeyFrame KeyTime="0:0:0.79" Value="{StaticResource A_Double_SkillSong_PulseScale}" EasingFunction="{StaticResource A_EasingFunction_EaseInOut}"/>
                                            <EasingDoubleKeyFrame KeyTime="0:0:0.92" Value="{StaticResource A_Double_SkillSong_DefaultScale}" EasingFunction="{StaticResource A_EasingFunction_EaseInOut}"/>
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </BeginStoryboard.Storyboard>
                            </BeginStoryboard>
                        </MultiDataTrigger.EnterActions>
                        <MultiDataTrigger.ExitActions>
                            <StopStoryboard BeginStoryboardName="BeginPulseAnim" />
                        </MultiDataTrigger.ExitActions>
                    </MultiDataTrigger>
                </Style.Triggers>
            </Style>
         </ResourceDictionary>
    </UserControl.Resources>

    <Grid x:Name="PART_LayoutRoot" VerticalAlignment="Top" HorizontalAlignment="Center">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="VisualStateGroup">
                <VisualState x:Name="PART_Hidden">
                    <Storyboard>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="MainPanel">
                            <LinearDoubleKeyFrame KeyTime="0:0:0.2" Value="0" />
                        </DoubleAnimationUsingKeyFrames>
                        <StringAnimationUsingKeyFrames Storyboard.TargetName="EventFire" Storyboard.TargetProperty="EventName">
                            <DiscreteStringKeyFrame KeyTime="0:0:0.2" Value="PART_HiddenComplete"/>
                        </StringAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="SkillSongIcon">
                            <DiscreteObjectKeyFrame KeyTime="0:0:0.2" Value="{x:Static Visibility.Hidden}" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState Name="PART_Shown">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="SkillSongIcon">
                            <DiscreteObjectKeyFrame KeyTime="0:0:0.0" Value="{x:Static Visibility.Visible}" />
                        </ObjectAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="MainPanel">
                            <LinearDoubleKeyFrame KeyTime="0:0:0.3" Value="1"/>
                        </DoubleAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)" Storyboard.TargetName="MainPanel">
                            <DiscreteDoubleKeyFrame KeyTime="0:0:0.0" Value="1.3"/>
                            <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1.0" EasingFunction="{StaticResource A_EasingFunction_EaseIn}"/>
                        </DoubleAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)" Storyboard.TargetName="MainPanel">
                            <DiscreteDoubleKeyFrame KeyTime="0:0:0.0" Value="1.3"/>
                            <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1.0" EasingFunction="{StaticResource A_EasingFunction_EaseIn}"/>
                        </DoubleAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Boom">
                            <DiscreteDoubleKeyFrame KeyTime="0:0:0.0" Value="0" />
                            <DiscreteDoubleKeyFrame KeyTime="0:0:0.1" Value="1.5"/>
                            <LinearDoubleKeyFrame KeyTime="0:0:0.4" Value="0"/>
                        </DoubleAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="Boom">
                            <DiscreteDoubleKeyFrame KeyTime="0:0:0.0" Value="0.75" />
                            <DiscreteDoubleKeyFrame KeyTime="0:0:0.1" Value="0.75" />
                            <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="2.25" EasingFunction="{StaticResource A_EasingFunction_EaseOut}"/>
                        </DoubleAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="Boom">
                            <DiscreteDoubleKeyFrame KeyTime="0:0:0.0" Value="0.75" />
                            <DiscreteDoubleKeyFrame KeyTime="0:0:0.1" Value="0.75" />
                            <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="2.25" EasingFunction="{StaticResource A_EasingFunction_EaseOut}"/>
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <StackPanel x:Name="MainPanel" Orientation="Vertical" HorizontalAlignment="Right" RenderTransformOrigin="0.5,0.5">
            <StackPanel.RenderTransform>
                <ScaleTransform />
            </StackPanel.RenderTransform>
            <local:FZMaterial x:Name="SkillSongIcon" Visibility="Hidden" Style="{StaticResource A_Style_FZMaterial_SkillSongIconLarge}"/>
            <Grid Margin="0,10,0,0">
                <ProgressBar Style="{StaticResource A_Style_ProgressBar_SkillSongTimer}"
                             Minimum="0"
                             Maximum="1"
                             Value="{Binding CompletionPercent}"/>        
                <StackPanel Orientation="Horizontal"
                    HorizontalAlignment="Center"
                    Margin="27,8">
                    <local:FZTextBlock Text="{local:Loc InGame.IDS_HUD_SkillSong}" 
                       Style="{StaticResource A_Style_FZTextBlock_SkillSong}"/>
                    <local:FZTextBlock Text="{Binding RemainingTime}"
                       Style="{StaticResource A_Style_FZTextBlock_SkillSong}"
                       Margin="8,0,0,0"/>
                </StackPanel>
            </Grid>
            
        </StackPanel>

        <local:FZMaterial x:Name="Boom" Opacity="0" Width="400" Height="200" RenderTransformOrigin="0.5,0.5" VerticalAlignment="Center" Margin="-200,-40,-200,-100" Color="#CDFFFFFF" Preset="{StaticResource A_FZMaterialPresetAdditive}" ImageSource="/ForzaUI;component/Textures/Anthem/HUD/SkillsLargeGlow.png">
            <local:FZMaterial.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </local:FZMaterial.RenderTransform>
        </local:FZMaterial>

        <local:EventFire x:Name="EventFire"/>
        <local:AudioEvent x:Name="ShowAudioEvent" />
    </Grid>
</UserControl>
