<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_Checkpoint"
      mc:Ignorable="d"
      Height="108"
      Width="192"
      RenderTransformOrigin="0.5,0.5">
    <Page.Resources>
        <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 x:Key="CheckpointTitleStyle"
               TargetType="{x:Type local:FZTextBlock}" BasedOn="{StaticResource A_Style_FZTextBlock_HorizonC}">
            <Setter Property="Color"
                    Value="#FFFeFeFe" />
            <Setter Property="VerticalAlignment"
                    Value="Top" />
            <Setter Property="HorizontalAlignment"
                    Value="Left" />
            <Setter Property="FontSize"
                    Value="60" />
            <Setter Property="TrackingAdjust"
                    Value="0.2" />
        </Style>
        <Style x:Key="DistanceStyle"
               TargetType="{x:Type local:FZTextBlock}"
               BasedOn="{StaticResource A_Style_FZTextBlock_HorizonA}">
            <Setter Property="Color"
                    Value="#FFFeFeFe" />
            <Setter Property="VerticalAlignment"
                    Value="Top" />
            <Setter Property="HorizontalAlignment"
                    Value="Left" />
            <Setter Property="Margin"
                    Value="0,10,0,0" />
            <Setter Property="FontSize"
                    Value="120" />
        </Style>
        
        <Style x:Key="A_Style_HideWhenClose"
               TargetType="FrameworkElement">
            <Setter Property="local:CompareValue.A"
                    Value="{Binding ARDistance}" />
            <Setter Property="local:CompareValue.B"
                    Value="{Binding MinDistance}" />
            <Setter Property="Opacity"
                    Value="1" />
            <Style.Triggers>
                <Trigger Property="local:CompareValue.Result"
                             Value="-1">
                    <Trigger.EnterActions>
                        <BeginStoryboard Storyboard="{StaticResource A_Storyboard_HideMe}" />
                    </Trigger.EnterActions>
                    <Trigger.ExitActions>
                        <BeginStoryboard Storyboard="{StaticResource A_Storyboard_ShowMe}" />
                    </Trigger.ExitActions>
                </Trigger>
            </Style.Triggers>
        </Style>

        <QuarticEase x:Key="A_EasingFunction_EaseInOut" EasingMode="EaseInOut" />

            <DoubleAnimationUsingKeyFrames x:Key="A_AnimationUsingKeyFrames_PageOpacityShow"
                                           Storyboard.TargetName="page"
                                           Storyboard.TargetProperty="(UIElement.Opacity)">
                <EasingDoubleKeyFrame KeyTime="0"
                                      Value="1" />
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames x:Key="A_AnimationUsingKeyFrames_TopTitle_Slide"
                                           Storyboard.TargetProperty="Tag"
                                           Storyboard.TargetName="TopTitle">
                <DiscreteDoubleKeyFrame KeyTime="0:0:0.0"
                                        Value="1" />
                <DiscreteDoubleKeyFrame KeyTime="0:0:0.4"
                                        Value="1" />
                <EasingDoubleKeyFrame KeyTime="0:0:1.8"
                                      Value="0"
                                      EasingFunction="{local:QuarticEasing EasingMode=EaseOut}"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames x:Key="A_AnimationUsingKeyFrames_TopTitle2_Slide"
                                           Storyboard.TargetProperty="Tag"
                                           Storyboard.TargetName="TopTitle2">
                <DiscreteDoubleKeyFrame KeyTime="0:0:0.0"
                                        Value="1" />
                <DiscreteDoubleKeyFrame KeyTime="0:0:0.6"
                                        Value="1" />
                <EasingDoubleKeyFrame KeyTime="0:0:1.8"
                                      Value="0"
                                      EasingFunction="{local:QuarticEasing EasingMode=EaseOut}"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames x:Key="A_AnimationUsingKeyFrames_Arrow_Slide"
                                           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 x:Key="A_AnimationUsingKeyFrames_Stalk_Slide"
                                           Storyboard.TargetProperty="Tag"
                                           Storyboard.TargetName="AllStalk">
                <DiscreteDoubleKeyFrame KeyTime="0:0:0"
                                        Value="1" />
                <DiscreteDoubleKeyFrame KeyTime="0:0:0.2"
                                        Value="1" />
                <EasingDoubleKeyFrame KeyTime="0:0:0.8"
                                      Value="0"
                                      EasingFunction="{local:QuarticEasing EasingMode=EaseOut}"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames x:Key="A_AnimationUsingKeyFrames_DividerScale"
                                           Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"
                                           Storyboard.TargetName="Divider">
                <DiscreteDoubleKeyFrame KeyTime="0:0:0.0"
                                        Value="0.01" />
                <EasingDoubleKeyFrame KeyTime="0:0:1.2"
                                      Value="1"
                                      EasingFunction="{local:QuarticEasing EasingMode=EaseOut}"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames x:Key="A_AnimationUsingKeyFrames_Icon_ScaleX"
                                           Storyboard.TargetName="IconContainer"
                                           Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)">
                <EasingDoubleKeyFrame KeyTime="0"
                                      Value="0.01" />
                <EasingDoubleKeyFrame KeyTime="0:0:0.5"
                                      Value="0.01"
                                      EasingFunction="{StaticResource A_EasingFunction_EaseInOut}"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1.2"
                                      Value="1"
                                      EasingFunction="{StaticResource A_EasingFunction_EaseInOut}"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames x:Key="A_AnimationUsingKeyFrames_Icon_ScaleY"
                                           Storyboard.TargetName="IconContainer"
                                           Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)">
                <EasingDoubleKeyFrame KeyTime="0"
                                      Value="0.01" />
                <EasingDoubleKeyFrame KeyTime="0:0:0.5"
                                      Value="0.01"
                                      EasingFunction="{StaticResource A_EasingFunction_EaseInOut}"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1.2"
                                      Value="1"
                                      EasingFunction="{StaticResource A_EasingFunction_EaseInOut}"/>
            </DoubleAnimationUsingKeyFrames>

        <local:UIStoryboard x:Key="A_Storyboard_AR_Appear" DurationOverride="0:0:1.0">
            <StaticResourceExtension ResourceKey="A_AnimationUsingKeyFrames_PageOpacityShow"/>
            <StaticResourceExtension ResourceKey="A_AnimationUsingKeyFrames_TopTitle_Slide"/>
            <StaticResourceExtension ResourceKey="A_AnimationUsingKeyFrames_TopTitle2_Slide"/>
            <StaticResourceExtension ResourceKey="A_AnimationUsingKeyFrames_Arrow_Slide"/>
            <StaticResourceExtension ResourceKey="A_AnimationUsingKeyFrames_Stalk_Slide"/>
            <StaticResourceExtension ResourceKey="A_AnimationUsingKeyFrames_DividerScale"/>
            <StaticResourceExtension ResourceKey="A_AnimationUsingKeyFrames_Icon_ScaleX"/>
            <StaticResourceExtension ResourceKey="A_AnimationUsingKeyFrames_Icon_ScaleY"/>
        </local:UIStoryboard>

        <local:UIStoryboard x:Key="A_Storyboard_AR_FastAppear" DurationOverride="0:0:0.5">
            <StaticResourceExtension ResourceKey="A_AnimationUsingKeyFrames_PageOpacityShow"/>
            <StaticResourceExtension ResourceKey="A_AnimationUsingKeyFrames_TopTitle_Slide"/>
            <StaticResourceExtension ResourceKey="A_AnimationUsingKeyFrames_TopTitle2_Slide"/>
            <StaticResourceExtension ResourceKey="A_AnimationUsingKeyFrames_Arrow_Slide"/>
            <StaticResourceExtension ResourceKey="A_AnimationUsingKeyFrames_Stalk_Slide"/>
            <StaticResourceExtension ResourceKey="A_AnimationUsingKeyFrames_DividerScale"/>
            <StaticResourceExtension ResourceKey="A_AnimationUsingKeyFrames_Icon_ScaleX"/>
            <StaticResourceExtension ResourceKey="A_AnimationUsingKeyFrames_Icon_ScaleY"/>
        </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>

        <local:FZMaterialPresetRoundtangle BasedOn="{StaticResource A_FZMaterialPresetRoundtangle_GradientHighlight}"
                                           CornerRadius="4"
                                           x:Key="A_FZMaterialPresetRoundtangle_CheckpointDivider" />

        <local:FZMaterialPresetRoundtangle BasedOn="{StaticResource A_FZMaterialPreset_FlatPanel_Base}"
                                           CornerRadius="4"
                                           x:Key="A_FZMaterialPresetRoundtangle_CheckpointStalk" />

    </Page.Resources>

    <Canvas RenderTransformOrigin="0.5,0.5"
            Width="0"
            Height="0">
        <Grid Width="1920"
              Canvas.Left="-960"
              Canvas.Bottom="20">
            <StackPanel HorizontalAlignment="Center">
                <Decorator x:Name="IconContainer"
                    Visibility="{Binding Icon, Converter={StaticResource A_StringVisConverter}}"
                    Margin="0,0,0,30"
                    RenderTransformOrigin="0.5,0.5">
                    <Decorator.RenderTransform>
                        <ScaleTransform />
                    </Decorator.RenderTransform>
                    <local:FZMaterial ImageSource="{Binding Icon}"
                        Visibility="{Binding Downloaded, RelativeSource={RelativeSource Self}, Converter={StaticResource A_FZBooleanToVisibilityConverter_UseHidden}}"
                        Width="165"
                        Height="165"
                        HorizontalAlignment="Center"/>
                </Decorator>

                <Decorator Margin="0,-5">
                        <ContentControl x:Name="TopTitle"
                                        HorizontalAlignment="Center"
                                        Style="{StaticResource A_Style_ContentControl_AnimatedTagSlideFromBottom}">
                            <StackPanel>
                                <!-- The transform can't go on the text block because it removes its transform when the text changes -->
                                <Decorator LayoutTransform="{StaticResource A_Transform_Italic}">
                                    <local:FZTextBlock Text="{Binding Distance, Converter={StaticResource A_StringToUpper}}"
                                                       Margin="0,5"
                                                       Style="{StaticResource DistanceStyle}"/>
                                </Decorator>
                                <Decorator Height="15"/>
                            </StackPanel>
                        </ContentControl>
                </Decorator>
                
                <Decorator Height="10"/>

                <local:FZMaterial Preset="{StaticResource A_FZMaterialPresetRoundtangle_CheckpointDivider}"
                                  Height="8"
                                  x:Name="Divider"
                                  RenderTransformOrigin="0.5,0.5">
                    <local:FZMaterial.RenderTransform>
                        <ScaleTransform />
                    </local:FZMaterial.RenderTransform>
                </local:FZMaterial>
                
                <Decorator Height="10"/>

                <Decorator Margin="0,-5">
                    <ContentControl x:Name="TopTitle2"
                                    Style="{StaticResource A_Style_ContentControl_AnimatedTagSlideFromTop}"
                                    HorizontalAlignment="Center">
                        <StackPanel>
                            <Decorator Height="6"/>

                            <!-- The transform can't go on the text block because it removes its transform when the text changes -->
                            <Decorator LayoutTransform="{StaticResource A_Transform_Italic}">
                                <local:FZTextBlock Text="{Binding Title}"
                                                   Margin="0,5"
                                                   Style="{StaticResource CheckpointTitleStyle}"/>
                            </Decorator>
                       </StackPanel>
                    </ContentControl>
                </Decorator>

                <Decorator Height="36"/>

                <ContentControl x:Name="Arrow"
                                Style="{StaticResource A_Style_ContentControl_AnimatedTagSlideFromTop}">
                    <local:FZMaterial Color="#FFFefefe"
                                      HorizontalAlignment="Center"
                                      VerticalAlignment="Top"
                                      Width="50"
                                      Height="25"
                                      Data="{StaticResource A_Geometry_Spatial_DownArrow}"/>
                </ContentControl>
            </StackPanel>

        </Grid>

        <ContentControl x:Name="AllStalk"
                        Width="1920"
                        Canvas.Left="-960"
                        Canvas.Top="0"
                        Style="{StaticResource A_Style_ContentControl_AnimatedTagSlideFromTop}">
            <Grid Style="{StaticResource A_Style_HideWhenClose}"
                  Opacity="1">
                <local:FZMaterial ImageSource="/ForzaUI;component/Textures\Anthem\Gradients\SpatialStalk.png"
                                  Preset="{StaticResource A_FZMaterialPresetRoundtangle_CheckpointStalk}"
                                  Height="{Binding Height}"
                                  HorizontalAlignment="Center"
                                  VerticalAlignment="Top"
                                  Width="8" />
            </Grid>
        </ContentControl>
    </Canvas>

</Page>
