<Page
    xmlns:local="clr-namespace:ForzaUI"
    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:System="clr-namespace:System;assembly=mscorlib"
    x:Class="ForzaUI.A_ColorSelectSliders"
    mc:Ignorable="d"
    Style="{StaticResource A_Style_Page_Generic}"
    DataContext="{Binding RelativeSource={RelativeSource Self}}">
        
    <Page.Resources>
        <ResourceDictionary>            
            <local:NumUnitConverter x:Key="A_NumUnitConverter_ColorTuning" FractionDigits="2"/>
            
            <!-- Brushes -->
            <SolidColorBrush x:Key="A_Brush_NoColorBrush" Color="{StaticResource A_Color_LargePanel_Background}" />

            <Color x:Key="A_Color_SliderThumb">#FF969696</Color>
            <Color x:Key="A_Color_SliderSurround">#616568</Color>
            <Color x:Key="A_Color_CustomColor_Outline">#55000000</Color>

            <local:FZMaterialPresetRoundtangle x:Key="A_FZMaterialPresetRoundtangle_FlatPanel_LiveryColor"
                BasedOn="{StaticResource A_FZMaterialPresetRoundtangle_FlatPanel_InnerAll}"
                Unlit="True"/>

            <Style x:Key="A_Style_SelectionHighlight_Large" TargetType="local:FZMaterial" BasedOn="{StaticResource A_Style_FZMaterial_FlatPanel_HighlightPill_Large}" />

            <Style x:Key="A_Style_FZTextBlock_SliderItemLabel" TargetType="local:FZTextBlock" BasedOn="{StaticResource A_Style_FZTextBlock_HorizonD}" >
                <Setter Property="Color" Value="{StaticResource A_Color_TextMenu_Text_Default}" />
                <Setter Property="HorizontalAlignment" Value="Left"/>
                <Setter Property="VerticalAlignment" Value="Center"/>
                <Setter Property="CapHeight" Value="15" />
                <Setter Property="FontFamily" Value="Horizon_D" />
            </Style>

            <Style x:Key="A_Style_FZTextBlock_SliderItemValue" TargetType="local:FZTextBlock" BasedOn="{StaticResource A_Style_FZTextBlock_HorizonC}" >
                <Setter Property="Color" Value="{StaticResource A_Color_TextMenu_Text_Default}" />
                <Setter Property="HorizontalAlignment" Value="Left"/>
                <Setter Property="VerticalAlignment" Value="Center"/>
                <Setter Property="CapHeight" Value="18" />
            </Style>

            <Style x:Key="A_Style_CustomColorControl" TargetType="{x:Type Control}">
                <Setter Property="local:FocusOnMouseOverBehaviour.Self"
                        Value="True" />
                <Setter Property="local:FocusOnMouseOverBehaviour.SoundName"
                        Value="/Master/UI/UI_Nav_Toggle" />
                <Setter Property="Width"
                        Value="86" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Control}">
                            <Grid x:Name="Grid_Container" RenderTransformOrigin="0.5,0.5">
                                <local:FZMaterial Style="{StaticResource A_Style_FZMaterial_GlassPanel_Pill}"
                                                  Color="{StaticResource A_Color_CustomColor_Outline}"
                                                  local:RoutedEventCommand.Action="{Binding ElementName=ColorSelectedRoutedEventCommand}">
                                    <Grid Margin="3">
                                        <Decorator Visibility="{Binding IsClearColor, Converter={StaticResource A_FZBooleanToVisibilityConverter_Inverse}}">
                                            <Grid>
                                                <Border BorderThickness="8" CornerRadius="2" Visibility="{Binding HasSecondaryColor, Converter={StaticResource A_FZBooleanToVisibilityConverter}}">
                                                    <Border.BorderBrush>
                                                        <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                                                            <GradientStop Color="{Binding PrimaryColor}"
                                                          Offset="0" />
                                                            <GradientStop Color="{Binding SecondaryColor}"
                                                          Offset="1" />
                                                        </LinearGradientBrush>
                                                    </Border.BorderBrush>
                                                    <Rectangle Margin="-1,-8">
                                                        <Rectangle.Fill>
                                                            <LinearGradientBrush StartPoint="0.5,0"
                                                                EndPoint="0.5,1">
                                                                <GradientStop Color="{Binding PrimaryColor}"
                                                            Offset="0" />
                                                                <GradientStop Color="{Binding SecondaryColor}"
                                                            Offset="1" />
                                                            </LinearGradientBrush>
                                                        </Rectangle.Fill>
                                                    </Rectangle>
                                                </Border>
                                                <local:FZMaterial Visibility="{Binding HasSecondaryColor, Converter={StaticResource A_FZBooleanToVisibilityConverter_Inverse}}"
                                                          Color="{Binding PrimaryColor}"
                                                          Preset="{StaticResource A_FZMaterialPresetRoundtangle_FlatPanel_LiveryColor}" />
                                            </Grid>
                                        </Decorator>

                                        <local:FZMaterial Margin="0,0,0,54" Height="44" VerticalAlignment="Bottom"
                                                      Color="{Binding StripeColor}"
                                                      Preset="{StaticResource A_FZMaterialPreset_Unlit}"
                                                      Visibility="{Binding HasStripe, Converter={StaticResource A_FZBooleanToVisibilityConverter}}" />

                                        <local:FZMaterial Color="{StaticResource A_Color_TileEmpty_Background}" 
                                                          Preset="{StaticResource A_FZMaterialPresetRoundtangle_FlatPanel_LiveryColor}" 
                                                          Visibility="{Binding IsClearColor, Converter={StaticResource A_FZBooleanToVisibilityConverter}}" 
                                                          ClipToBounds="True">
                                            <Grid Margin="4.75">
                                                <Path Margin="-4,-6" Stretch="Fill" Data="M0,0 l-1,1" Stroke="{StaticResource A_Brush_NoColorBrush}" StrokeThickness="4"/>
                                                <Path Margin="-4,-6" Stretch="Fill" Data="M0,0 l1,1" Stroke="{StaticResource A_Brush_NoColorBrush}" StrokeThickness="4"/>
                                            </Grid>
                                        </local:FZMaterial>
                                    </Grid>
                                </local:FZMaterial>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

            <Style x:Key="A_Style_SliderButton" TargetType="{x:Type RepeatButton}">
                <Setter Property="SnapsToDevicePixels" Value="true"/>
                <Setter Property="OverridesDefaultStyle" Value="true"/>
                <Setter Property="IsTabStop" Value="false"/>
                <Setter Property="Focusable" Value="false"/>
                <Setter Property="Template">
                    <Setter.Value>
                    <ControlTemplate TargetType="{x:Type RepeatButton}">
                        <Border Background="Transparent" />
                    </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

            <Style x:Key="A_Style_ColorFineTuneThumb" TargetType="{x:Type Thumb}">
                <Setter Property="OverridesDefaultStyle" Value="True"/>
                <Setter Property="Height" Value="40"/>
                <Setter Property="Width" Value="7"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Thumb}">
                            <Grid>
                                <local:FZMaterial x:Name="Shadow" ImageSource="/ForzaUI;component/Textures/Anthem/Paintshop/Sliders_Selection_Shadow.png" Height="70" Width="70" Margin="0,-15,0,0"  Visibility="Collapsed"/>
                                <local:FZMaterial x:Name="Thumb" Color="{StaticResource A_Color_SliderThumb}"/>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <DataTrigger Binding="{Binding IsFocused, RelativeSource={RelativeSource AncestorType=Slider}}" Value="True">
                                    <Setter TargetName="Thumb" Property="Preset" Value="{StaticResource A_FZMaterialPresetRoundtangle_GradientHighlight}" />
                                    <Setter TargetName="Thumb" Property="Color" Value="#FFFFFFFF" />
                                    <Setter TargetName="Shadow" Property="Visibility" Value="Visible" />
                                </DataTrigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

            <Style x:Key="A_Style_ColorFineTuneSlider" TargetType="{x:Type Slider}">
                <Setter Property="SmallChange" Value="0.005"/>
                <Setter Property="LargeChange" Value="0"/>
                <Setter Property="Width" Value="1530"/>
                <Setter Property="Height" Value="68"/>
                <Setter Property="IsMoveToPointEnabled" Value="True" />
                <Setter Property="local:FocusOnMouseOverBehaviour.Self"
                        Value="True" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Slider}">
                            <ControlTemplate.Resources>
                                <Storyboard x:Key="SelectItemStory">
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="Grid_Container">
                                        <EasingDoubleKeyFrame KeyTime="0:0:0" Value="1.02"/>
                                    </DoubleAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="Grid_Container">
                                        <EasingDoubleKeyFrame KeyTime="0:0:0" Value="1.02"/>
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                                <Storyboard x:Key="DeselectItemStory">
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="Grid_Container">
                                        <EasingDoubleKeyFrame KeyTime="0:0:0" Value="1.0"/>
                                    </DoubleAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="Grid_Container">
                                        <EasingDoubleKeyFrame KeyTime="0:0:0" Value="1.0"/>
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </ControlTemplate.Resources>

                            <Grid x:Name="Grid_Container" RenderTransformOrigin="0.5,0.5">
                                <Grid.RenderTransform>
                                    <TransformGroup>
                                        <ScaleTransform/>
                                        <SkewTransform/>
                                        <RotateTransform/>
                                        <TranslateTransform/>
                                    </TransformGroup>
                                </Grid.RenderTransform>

                                <local:FZMaterial x:Name="DropShadow"
                                                  Style="{StaticResource A_Style_FZMaterial_ShadowBase}" 
                                                  Visibility="Collapsed" Margin="-15"
                                                  IsHitTestVisible="False"/>

                                <local:FZMaterial x:Name="Highlight"
                                              Margin="-6"
                                              Visibility="Hidden"
                                              Style="{StaticResource A_Style_FZMaterial_FlatPanel_HighlightPill_Large}"
                                              IsHitTestVisible="False" />

                                <local:FZMaterial Style="{StaticResource A_Style_FZMaterial_FlatPanel_Tile}"/>

                                <Grid Margin="23,0">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="200" />
                                        <ColumnDefinition />
                                        <ColumnDefinition Width="72" />
                                    </Grid.ColumnDefinitions>

                                    <local:FZTextBlock Text="{TemplateBinding Tag, Converter={StaticResource A_StringToUpper}}" Style="{StaticResource A_Style_FZTextBlock_SliderItemLabel}" Grid.Column="0" 
                                                       VerticalAlignment="Center" Stretch="Uniform" StretchDirection="DownOnly" MaxWidth="150" IsHitTestVisible="False" />


                                    <local:FZMaterial Color="{StaticResource A_Color_SliderSurround}" Preset="{StaticResource A_FZMaterialPresetGlass_High}" 
                                                      Grid.Column="1" VerticalAlignment="Center">
                                        <Border x:Name="TrackBackground" Background="{TemplateBinding Background}" Margin="7">
                                            <Track x:Name="PART_Track" Margin="0,-7,0,-7">
                                                <Track.DecreaseRepeatButton>
                                                    <RepeatButton Style="{StaticResource A_Style_SliderButton}"/>
                                                </Track.DecreaseRepeatButton>
                                                <Track.Thumb>
                                                    <Thumb x:Name="Thumb" Style="{StaticResource A_Style_ColorFineTuneThumb}"/>
                                                </Track.Thumb>
                                                <Track.IncreaseRepeatButton>
                                                    <RepeatButton Style="{StaticResource A_Style_SliderButton}"/>
                                                </Track.IncreaseRepeatButton>
                                            </Track>
                                        </Border>
                                    </local:FZMaterial>

                                    <local:FZTextBlock Grid.Column="2" VerticalAlignment="Center" 
                                                       Text="{Binding Value, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource A_NumUnitConverter_ColorTuning}}" 
                                                       Style="{StaticResource A_Style_FZTextBlock_SliderItemValue}" 
                                                       Stretch="Uniform" StretchDirection="DownOnly" MaxWidth="80" IsHitTestVisible="False"
                                                       HorizontalAlignment="Right"/>
                                </Grid>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsKeyboardFocused" Value="True">
                                    <Setter TargetName="Highlight" Property="Visibility" Value="Visible" />
                                    <Setter TargetName="DropShadow" Property="Visibility" Value="Visible" />
                                    <Setter Property="Panel.ZIndex" Value="100"/>
                                    <Trigger.ExitActions>
                                        <BeginStoryboard HandoffBehavior="SnapshotAndReplace" Storyboard="{StaticResource DeselectItemStory}"/>
                                    </Trigger.ExitActions>
                                    <Trigger.EnterActions>
                                        <BeginStoryboard HandoffBehavior="SnapshotAndReplace" Storyboard="{StaticResource SelectItemStory}"/>
                                    </Trigger.EnterActions>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

        </ResourceDictionary>
    </Page.Resources>

    <local:UIPageTransitionManager.TransitionManager>
        <local:UIPageTransitionManager Preset="{StaticResource A_UIPageTransitionManagerPreset_Menu}"/>
    </local:UIPageTransitionManager.TransitionManager>

    <Border x:Name="LayoutRoot" Style="{StaticResource A_Style_Border_ScenePadding}">
        <Grid>
            <!-- Bars -->
            <ContentControl Name="DefaultHelpPanel" VerticalAlignment="Bottom" HorizontalAlignment="Left" Focusable="False" 
                        Style="{StaticResource A_Style_ContentControl_DefaultButtonBar}" />

            <StackPanel Orientation="Horizontal" VerticalAlignment="Top" Margin="5,0,0,0"
                        Style="{StaticResource A_Style_FrameworkElement_DefaultTransition_0}">
                <ContentControl Tag="{local:Loc ScreenTitles.IDS_Color_Select}" Content="{local:Loc ScreenTitles.IDS_Color_FineTune}" 
                                    Style="{StaticResource A_Style_ContentControl_ScreenTitleBlock}" Focusable="False" Margin="0,40,0,0"
                                    local:BindingProxy.A="/ForzaUI;component/Textures/Anthem/Icons/Titles/Painting.png" />
            </StackPanel>

            <Grid Style="{StaticResource A_Style_FrameworkElement_DefaultTransition_1}">
                <local:FZMaterial Style="{StaticResource A_Style_FZMaterial_GlassPanel_Pill}" Height="236"
                                      VerticalAlignment="Bottom" HorizontalAlignment="Center"  Margin="0,0,0,34">

                    <StackPanel Orientation="Horizontal" Grid.Column="1" Margin="12">
                        <Control x:Name="PART_Control_CustomColorItem" Style="{StaticResource A_Style_CustomColorControl}" DataContext="{Binding PreviousColor}" 
                             Focusable="False"/>
                        <Decorator Width="6" />
                        <Control x:Name="PART_Control_CustomColorItem2" Style="{StaticResource A_Style_CustomColorControl}" DataContext="{Binding CurrentColor}" 
                             Focusable="False" />
                        <Decorator Width="20"/>
                        <StackPanel x:Name="ColorTuning" KeyboardNavigation.DirectionalNavigation="Contained" VerticalAlignment="Center">
                            <Slider x:Name="PART_HueSlider" Maximum="1" Value="{Binding Hue}" Style="{StaticResource A_Style_ColorFineTuneSlider}" 
                                    Tag="{local:Loc Livery.IDS_Hue}" Margin="0,0,0,3">
                                <Slider.Background>
                                    <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
                                        <GradientStop Color="#FFFF0000" Offset="0"/>
                                        <GradientStop Color="#FFFFFF00" Offset="0.167"/>
                                        <GradientStop Color="#FF00FF00" Offset="0.333"/>
                                        <GradientStop Color="#FF00FFFF" Offset="0.5"/>
                                        <GradientStop Color="#FF0000FF" Offset="0.667"/>
                                        <GradientStop Color="#FFFF00FF" Offset="0.833"/>
                                        <GradientStop Color="#FFFF0000" Offset="1"/>
                                    </LinearGradientBrush>
                                </Slider.Background>
                            </Slider>

                            <Slider x:Name="SaturationSlider" Maximum="1" Value="{Binding Saturation}" Style="{StaticResource A_Style_ColorFineTuneSlider}"
                                    Tag="{local:Loc Livery.IDS_Saturation}" Margin="0,0,0,3">
                                <Slider.Background>
                                    <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
                                        <GradientStop Color="White" Offset="0"/>
                                        <GradientStop Color="{Binding SaturationColor}" Offset="1"/>
                                    </LinearGradientBrush>
                                </Slider.Background>
                            </Slider>

                            <Slider x:Name="BrightnessSlider" Maximum="1" Value="{Binding Brightness}" Style="{StaticResource A_Style_ColorFineTuneSlider}"
                                    Tag="{local:Loc Livery.IDS_Brightness}">
                                <Slider.Background>
                                    <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
                                        <GradientStop Color="Black" Offset="0"/>
                                        <GradientStop Color="{Binding BrightnessColor}" Offset="1"/>
                                    </LinearGradientBrush>
                                </Slider.Background>
                            </Slider>
                        </StackPanel>
                    </StackPanel>
                </local:FZMaterial>
            </Grid>
        </Grid>
    </Border>

</Page>
