<Page 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;assembly="
      xmlns:System="clr-namespace:System;assembly=mscorlib"
      x:Name="page"
      x:Class="ForzaUI.Scenes.Anthem.AR_FlagRush"
      mc:Ignorable="d"
      Height="108"
      Width="192"
      RenderTransformOrigin="0.5,0.5">
    <Page.Resources>
        <!--The preset for small rounded corners for a material. Used in creating the rounded line effect-->
        <CornerRadius x:Key="A_SmallCornerRadius_Outer_All_Bar">4</CornerRadius>
        <local:FZMaterialPresetRoundtangle x:Key="A_FZMaterialPresetRoundtangle_FlatPanel_OuterAll_Bar"
            BasedOn="{StaticResource A_FZMaterialPreset_FlatPanel_Base}"
            CornerRadius="{StaticResource A_SmallCornerRadius_Outer_All_Bar}"/>

        <!--The preset for small rounded corners for a material. Used in creating the ball on the flag-->
        <CornerRadius x:Key="A_SmallCornerRadius_Outer_All_Round">10</CornerRadius>
        <local:FZMaterialPresetRoundtangle x:Key="A_FZMaterialPresetRoundtangle_FlatPanel_OuterAll_Round"
            BasedOn="{StaticResource A_FZMaterialPreset_FlatPanel_Base}"
            CornerRadius="{StaticResource A_SmallCornerRadius_Outer_All_Round}"/>

        <!--Return our color value based on index-->
        <local:MappingConverter x:Key="A_Converter_ColorIndexToColor">
            <local:MappingConverterEntry Key="0" Value="{StaticResource A_Color_FlagRush_Flag0}" />
            <local:MappingConverterEntry Key="1" Value="{StaticResource A_Color_FlagRush_Flag1}" />
            <local:MappingConverterEntry Key="2" Value="{StaticResource A_Color_FlagRush_Flag2}" />
            <local:MappingConverterEntry Key="3" Value="{StaticResource A_Color_FlagRush_Flag3}" />
            <local:MappingConverterEntry Key="4" Value="{StaticResource A_Color_FlagRush_Flag4}" />
        </local:MappingConverter>

        <Style x:Key="A_Style_FZMaterial_LineDivider" TargetType="local:FZMaterial">
            <Setter Property="Preset" Value="{StaticResource A_FZMaterialPresetRoundtangle_FlatPanel_OuterAll_Bar}"/>
            <Setter Property="Height" Value="8"/>
            <Setter Property="Width" Value="Auto"/>
            <Setter Property="Color" Value="{Binding ColorIndex, Converter={StaticResource A_Converter_ColorIndexToColor}}"/>
        </Style>
        
        <Storyboard x:Key="A_Storyboard_ShowMe">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)">
                <LinearDoubleKeyFrame KeyTime="00:00:00.3"
                                      Value="1" />
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Key="A_Storyboard_HideMe">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)">
                <LinearDoubleKeyFrame KeyTime="00:00:00.3"
                                      Value="0" />
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>

        <Style TargetType="Decorator" x:Key="A_Style_DecoratorSkew">
            <Setter Property="Margin" Value="10,0,0,0"/>
            <Setter Property="RenderTransform">
                <Setter.Value>
                    <TransformGroup>
                        <SkewTransform AngleX="-8" />
                        <TranslateTransform X="0" />
                    </TransformGroup>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="A_Style_FZTextBlock_ARText" TargetType="{x:Type local:FZTextBlock}" BasedOn="{StaticResource A_Style_FZTextBlock_HorizonC}">
            <Setter Property="Color"
                    Value="{StaticResource A_Color_White}" />
            <Setter Property="VerticalAlignment"
                    Value="Top" />
            <Setter Property="HorizontalAlignment"
                    Value="Left" />
            <Setter Property="FontSize"
                    Value="100" />
        </Style>

        <Style x:Key="A_Style_TitleText" TargetType="{x:Type local:FZTextBlock}" BasedOn="{StaticResource A_Style_FZTextBlock_ARText}">
            <Setter Property="Margin"
                    Value="0,10,0,0" />
            <Setter Property="TrackingAdjust" 
                    Value="0.08"/>
            <Setter Property="FontSize"
                    Value="68" />
            <Setter Property="RenderTransform">
                <Setter.Value>
                    <TransformGroup>
                        <SkewTransform AngleX="-8" />
                    </TransformGroup>
                </Setter.Value>
            </Setter>
        </Style>
        
        <Style x:Key="A_Style_DistanceText" TargetType="{x:Type local:FZTextBlock}" BasedOn="{StaticResource A_Style_FZTextBlock_ARText}">
            <Setter Property="FontFamily"
                    Value="Horizon_A" />
            <Setter Property="FontSize" 
                    Value="132" />
        </Style>
        <local:CompareConverter x:Key="A_Converter_Compare_MinDistance" />
        
        <Style x:Key="A_Style_HideWhenClose"
               TargetType="FrameworkElement">
            <Style.Triggers>
                <DataTrigger Binding="{Binding ARDistance, Converter={StaticResource A_Converter_Compare_MinDistance}, ConverterParameter=50}"
                             Value="-1">
                    <DataTrigger.EnterActions>
                        <BeginStoryboard Storyboard="{StaticResource A_Storyboard_HideMe}" />
                    </DataTrigger.EnterActions>
                    <DataTrigger.ExitActions>
                        <BeginStoryboard Storyboard="{StaticResource A_Storyboard_ShowMe}" />
                    </DataTrigger.ExitActions>
                </DataTrigger>
            </Style.Triggers>
            <Setter Property="Opacity"
                    Value="1" />
        </Style>
      
        <local:UIStoryboard x:Key="A_Storyboard_AR_Appear" DurationOverride="0:0:1.2">  
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="page"
                                           Storyboard.TargetProperty="(UIElement.Opacity)">
                <EasingDoubleKeyFrame KeyTime="0"
                                      Value="1" />
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Tag"
                                           Storyboard.TargetName="TopTitle">
                <DiscreteDoubleKeyFrame KeyTime="0:0:0.0"
                                        Value="1" />
                <EasingDoubleKeyFrame KeyTime="0:0:1.2"
                                      Value="0">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <QuarticEase EasingMode="EaseOut" />
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Tag"
                                           Storyboard.TargetName="TopTitle2">
                <DiscreteDoubleKeyFrame KeyTime="0:0:0.0"
                                        Value="1" />
                <EasingDoubleKeyFrame KeyTime="0:0:1.2"
                                      Value="0">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <QuarticEase EasingMode="EaseOut" />
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Tag"
                                           Storyboard.TargetName="SideTitle">
                <DiscreteDoubleKeyFrame KeyTime="0:0:0.0"
                                        Value="1" />
                <EasingDoubleKeyFrame KeyTime="0:0:1.2"
                                      Value="0">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <QuarticEase EasingMode="EaseOut" />
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Tag"
                                           Storyboard.TargetName="SideTitle2">
                <DiscreteDoubleKeyFrame KeyTime="0:0:0.0"
                                        Value="1" />
                <EasingDoubleKeyFrame KeyTime="0:0:1.2"
                                      Value="0">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <QuarticEase EasingMode="EaseOut" />
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Tag"
                               Storyboard.TargetName="Arrow">
                <DiscreteDoubleKeyFrame KeyTime="0:0:0.0"
                                        Value="1" />
                <EasingDoubleKeyFrame KeyTime="0:0:0.6"
                                      Value="0"
                                      EasingFunction="{local:QuarticEasing EasingMode=EaseOut}"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Tag"
                                           Storyboard.TargetName="AllStalk">
                <DiscreteDoubleKeyFrame KeyTime="0:0:0"
                                        Value="1" />
                <DiscreteDoubleKeyFrame KeyTime="0:0:0.6"
                                      Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1.8"
                                      Value="0">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <QuarticEase EasingMode="EaseOut" />
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
        </local:UIStoryboard>

        <local:UIStoryboard x:Key="A_Storyboard_AR_Abandon"
                            DurationOverride="0:0:0.3">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="page"
                                           Storyboard.TargetProperty="(UIElement.Opacity)">
                <EasingDoubleKeyFrame KeyTime="0:0:1"
                                      Value="0" />
            </DoubleAnimationUsingKeyFrames>
            <BooleanAnimationUsingKeyFrames Storyboard.TargetName="page"
                                            Storyboard.TargetProperty="DataContext.Complete">
                <DiscreteBooleanKeyFrame KeyTime="0:0:1"
                                         Value="True" />
            </BooleanAnimationUsingKeyFrames>
        </local:UIStoryboard>

        <Style x:Key="A_Style_ContentControl_Stalk"
               TargetType="ContentControl"
               BasedOn="{StaticResource A_Style_ContentControl_AnimatedTagSlideFromTop}">
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsFlag}"
                             Value="True">
                    <Setter Property="Canvas.Top"
                            Value="-160" />
                </DataTrigger>
            </Style.Triggers>
        </Style>

        <Style x:Key="A_Style_FZMaterial_FlagRushIcon"
               TargetType="local:FZMaterial">
            <Setter Property="Width"
                    Value="128" />
            <Setter Property="Height"
                    Value="128" />
            <Setter Property="Stretch"
                    Value="UniformToFill" />
            <Setter Property="ImageSource"
                    Value="/ForzaUI;component/Textures/Anthem/Icons/Spatial/FlagRush/FlagZone_Icon.png" />
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsFlag}"
                             Value="True">
                    <Setter Property="ImageSource"
                            Value="/ForzaUI;component/Textures/Anthem/Icons/Spatial/FlagRush/Flag_Icon.png"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
        
        <Style x:Key="A_Style_FZMaterial_FlagRushIconBacking" TargetType="local:FZMaterial">
            <Setter Property="Width" Value="160"/>
            <Setter Property="Height"
                    Value="160" />
            <Setter Property="Stretch"
                    Value="UniformToFill" />
            <Setter Property="Margin"
                    Value="15,0" />
            <Setter Property="Preset" Value="{StaticResource A_FZMaterialPresetRoundtangle_FlatPanel_OuterAll}"/>
            <Setter Property="Color" Value="{Binding ColorIndex, Converter={StaticResource A_Converter_ColorIndexToColor}}"/>
        </Style>

    </Page.Resources>

    <Canvas RenderTransformOrigin="0.5,0.5"
            Width="0"
            Height="0">
        <StackPanel Width="1920"
                    Canvas.Left="-960"
                    Canvas.Bottom="0"
                    Visibility="{Binding IsFlag, Converter={StaticResource A_FZBooleanToVisibilityConverter_Inverse}}">
            <local:FZMaterial Style="{StaticResource A_Style_FZMaterial_FlagRushIconBacking}">
                <local:FZMaterial Style="{StaticResource A_Style_FZMaterial_FlagRushIcon}"/>
            </local:FZMaterial>
            <Decorator Height="24"/>
            <Grid>
                <ContentControl x:Name="TopTitle2" Margin="-10,0,0,0"
                                Style="{StaticResource A_Style_ContentControl_AnimatedTagSlideFromBottom}"
                                HorizontalAlignment="Center">
                    <Decorator Style="{StaticResource A_Style_DecoratorSkew}">
                        <local:FZTextBlock Text="{Binding Distance, Converter={StaticResource A_StringToUpper}}"
                                           HorizontalAlignment="Center"
                                           Style="{StaticResource A_Style_DistanceText}"
                                           Margin="0,2,0,20"/>
                    </Decorator>
                </ContentControl>
            </Grid>
            <StackPanel HorizontalAlignment="Center">
                <local:FZMaterial Margin="0,-2,0,-2" Style="{StaticResource A_Style_FZMaterial_LineDivider}"/>

                <ContentControl x:Name="TopTitle" Margin="-5,0,0,0"
                                Style="{StaticResource A_Style_ContentControl_AnimatedTagSlideFromTop}"
                                HorizontalAlignment="Center">
                    <Decorator Margin="5,0,0,0">
                        <local:FZTextBlock Text="{Binding Title}"
                                           HorizontalAlignment="Center" TrackingAdjust="0.20"
                                           Style="{StaticResource A_Style_TitleText}"
                                           Margin="0,20,0,20" />
                    </Decorator>
                </ContentControl>
            </StackPanel>
            <ContentControl x:Name="Arrow" Margin="0,24,0,24"
                            Style="{StaticResource A_Style_ContentControl_AnimatedTagSlideFromTop}">
                <local:FZMaterial Color="{StaticResource A_Color_White}"
                                  HorizontalAlignment="Center"
                                  VerticalAlignment="Top"
                                  Width="50"
                                  Height="25"
                                  Data="{StaticResource A_Geometry_Spatial_DownArrow}">
                  </local:FZMaterial>
            </ContentControl>
        </StackPanel>

        <Grid Width="1920"
              Canvas.Left="-1068"
              Canvas.Bottom="0"
              Visibility="{Binding IsFlag, Converter={StaticResource A_FZBooleanToVisibilityConverter}}">
            <local:FZMaterial Style="{StaticResource A_Style_FZMaterial_FlagRushIconBacking}">
                <local:FZMaterial Style="{StaticResource A_Style_FZMaterial_FlagRushIcon}" />
            </local:FZMaterial>
        </Grid>
        <Grid Width="1920"
              Canvas.Left="28"
              Canvas.Bottom="0"
              Visibility="{Binding IsFlag, Converter={StaticResource A_FZBooleanToVisibilityConverter}}">
            <StackPanel Margin="0,0,0,0">
                    <ContentControl x:Name="SideTitle"
                                    Style="{StaticResource A_Style_ContentControl_AnimatedTagSlideFromLeft}"
                                    HorizontalAlignment="Left"
                                    Margin="-5,0,0,-4">
                        <Decorator Margin="5,0,0,0">
                             <local:FZTextBlock Text="{Binding Title}"
                                           HorizontalAlignment="Left"
                                           Style="{StaticResource A_Style_TitleText}"
                                           Margin="0,20,0,20" />
                        </Decorator>
                    </ContentControl>
        
                    <Decorator Height="10"/>

                    <ContentControl x:Name="SideTitle2"
                                    Style="{StaticResource A_Style_ContentControl_AnimatedTagSlideFromLeft}"
                                    HorizontalAlignment="Left"
                                    Margin="-10,0,0,-2">
                        <Decorator Style="{StaticResource A_Style_DecoratorSkew}">
                            <local:FZTextBlock Text="{Binding Distance, Converter={StaticResource A_StringToUpper}}"
                                           HorizontalAlignment="Left"
                                           Style="{StaticResource A_Style_DistanceText}"
                                           Margin="0,2,0,2" />
                        </Decorator>
                    </ContentControl>
                
            </StackPanel>
        </Grid>

        <ContentControl x:Name="AllStalk"
                        Width="1920"
                        Canvas.Left="-960"
                        Style="{StaticResource A_Style_ContentControl_Stalk}">
            <Grid Style="{StaticResource A_Style_HideWhenClose}"
                  Opacity="1">
                <local:FZMaterial Visibility="{Binding IsFlag, Converter={StaticResource A_FZBooleanToVisibilityConverter}}"
                                  Color="{StaticResource A_Color_White}" Width="20" Height="20" 
                                  Preset="{StaticResource A_FZMaterialPresetRoundtangle_FlatPanel_OuterAll_Round}"
                                  VerticalAlignment="Top"/>
                <local:FZMaterial Color="{StaticResource A_Color_White}" 
                                  ImageSource="/ForzaUI;component/Textures/Anthem/Gradients/SpatialStalk.png"
                                  Preset="{StaticResource A_FZMaterialPresetRoundtangle_FlatPanel_OuterAll_Bar}"
                                  HorizontalAlignment="Center"
                                  VerticalAlignment="Top"
                                  Width="8"
                                  Height="{Binding Height}" />
            </Grid>
        </ContentControl>
    </Canvas>

</Page>
