<Window x:Class="ScreenToGif.Windows.Other.ColorSelector"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:n="clr-namespace:ScreenToGif.Controls"
        xmlns:presentationOptions="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"
        xmlns:c="clr-namespace:ScreenToGif.Util.Converters"
        Title="{DynamicResource S.ColorSelector.Title}" Height="350" Width="640" MinWidth="640" MinHeight="350"
        Background="{DynamicResource Panel.Background}" Icon="/ScreenToGif;component/Resources/Logo.ico" UseLayoutRounding="True" SnapsToDevicePixels="True"
        WindowStartupLocation="CenterScreen" Topmost="True" SizeToContent="Width" Loaded="Window_Loaded">

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" MinWidth="330"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>

        <Border Grid.Column="0" Margin="5,5,5,29" Effect="{StaticResource Shadow.Border.Large}">
            <Border.Background>
                <DrawingBrush Viewport="0,0,10,10" ViewportUnits="Absolute" TileMode="Tile">
                    <DrawingBrush.Drawing>
                        <DrawingGroup>
                            <GeometryDrawing Brush="White">
                                <GeometryDrawing.Geometry>
                                    <RectangleGeometry Rect="0,0 100,100"/>
                                </GeometryDrawing.Geometry>
                            </GeometryDrawing>
                            <GeometryDrawing Brush="LightGray">
                                <GeometryDrawing.Geometry>
                                    <GeometryGroup>
                                        <RectangleGeometry Rect="0,0 50,50"/>
                                        <RectangleGeometry Rect="50,50 50,50"/>
                                    </GeometryGroup>
                                </GeometryDrawing.Geometry>
                            </GeometryDrawing>
                        </DrawingGroup>
                    </DrawingBrush.Drawing>
                </DrawingBrush>
            </Border.Background>
        </Border>

        <Border Grid.Column="0" x:Name="ColorDetail" HorizontalAlignment="Stretch" Cursor="Cross" Margin="5,5,5,29" ClipToBounds="True"
                Effect="{StaticResource Shadow.Border.Large}" IsEnabled="False" SizeChanged="ColorDetailBorder_SizeChanged" 
                PreviewMouseMove="ColorDetailBorder_MouseMove" PreviewMouseLeftButtonDown="ColorDetailBorder_MouseLeftButtonDown" 
                MouseLeftButtonUp="ColorDetailBorder_MouseLeftButtonUp">

            <Border.Resources>
                <c:AlphaToOpacity x:Key="AlphaToOpacity"/>
            </Border.Resources>

            <Border.Background>
                <DrawingBrush Opacity="{Binding Path=Value, ElementName=AlphaIntegerUpDown, Converter={StaticResource AlphaToOpacity}}">
                    <DrawingBrush.Drawing>
                        <DrawingGroup>
                            <GeometryDrawing>
                                <GeometryDrawing.Geometry>
                                    <RectangleGeometry Rect="0,0,100,100"/>
                                </GeometryDrawing.Geometry>
                                <GeometryDrawing.Brush>
                                    <SolidColorBrush Color="{Binding SelectedColor, ElementName=ColorSlider}"/>
                                </GeometryDrawing.Brush>
                            </GeometryDrawing>
                            <GeometryDrawing>
                                <GeometryDrawing.Geometry>
                                    <RectangleGeometry Rect="0,0,100,100"/>
                                </GeometryDrawing.Geometry>
                                <GeometryDrawing.Brush>
                                    <LinearGradientBrush StartPoint="0.5,1" EndPoint="0.5,0">
                                        <GradientStop Offset="0.0" Color="Black"/>
                                        <GradientStop Offset="1.0" Color="{Binding SelectedColor, ElementName=ColorSlider}"/>
                                    </LinearGradientBrush>
                                </GeometryDrawing.Brush>
                            </GeometryDrawing>
                            <DrawingGroup presentationOptions:Freeze="True">
                                <DrawingGroup.OpacityMask>
                                    <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
                                        <GradientStop Offset="0.0" Color="#FF000000"/>
                                        <GradientStop Offset="1" Color="#00000000"/>
                                    </LinearGradientBrush>
                                </DrawingGroup.OpacityMask>
                                <GeometryDrawing>
                                    <GeometryDrawing.Geometry>
                                        <RectangleGeometry Rect="0,0,100,100"/>
                                    </GeometryDrawing.Geometry>
                                    <GeometryDrawing.Brush>
                                        <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                                            <GradientStop Offset="0.0" Color="White"/>
                                            <GradientStop Offset="1" Color="Black"/>
                                        </LinearGradientBrush>
                                    </GeometryDrawing.Brush>
                                </GeometryDrawing>
                            </DrawingGroup>
                        </DrawingGroup>
                    </DrawingBrush.Drawing>
                </DrawingBrush>
            </Border.Background>

            <Border.Triggers>
                <!--To prevent false MouseUps during load. xD-->
                <EventTrigger RoutedEvent="Border.Loaded">
                    <BeginStoryboard>
                        <Storyboard BeginTime="00:00:00" Storyboard.TargetName="ColorDetail" Storyboard.TargetProperty="(IsEnabled)">
                            <BooleanAnimationUsingKeyFrames>
                                <DiscreteBooleanKeyFrame Value="True" KeyTime="0:0:0.2"/>
                            </BooleanAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Border.Triggers>

            <Path x:Name="ColorMarker" StrokeThickness="2" Cursor="Cross" Fill="Transparent" RenderTransformOrigin="0.5,0.5" Effect="{DynamicResource Shadow.Border.Small}">
                <Path.Data>
                    <EllipseGeometry RadiusX="7" RadiusY="7"/>
                </Path.Data>

                <Path.Stroke>
                    <RadialGradientBrush>
                        <GradientStop Color="Black" Offset="0.5"/>
                        <GradientStop Color="White" Offset="1"/>
                        <GradientStop Color="White"/>
                        <GradientStop Color="Black" Offset="0.3"/>
                        <GradientStop Color="Black" Offset="0.7"/>
                    </RadialGradientBrush>
                </Path.Stroke>
            </Path>
        </Border>

        <Grid Grid.Column="0" Margin="5,0,5,5" Height="19" VerticalAlignment="Bottom" Effect="{StaticResource Shadow.Border.Large}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width=".15*"/>
            </Grid.ColumnDefinitions>

            <Border Grid.Column="0" Grid.ColumnSpan="3">
                <Border.Background>
                    <DrawingBrush Viewport="0,0,10,10" ViewportUnits="Absolute" TileMode="Tile">
                        <DrawingBrush.Drawing>
                            <DrawingGroup>
                                <GeometryDrawing Brush="White">
                                    <GeometryDrawing.Geometry>
                                        <RectangleGeometry Rect="0,0 100,100"/>
                                    </GeometryDrawing.Geometry>
                                </GeometryDrawing>
                                <GeometryDrawing Brush="LightGray">
                                    <GeometryDrawing.Geometry>
                                        <GeometryGroup>
                                            <RectangleGeometry Rect="0,0 50,50"/>
                                            <RectangleGeometry Rect="50,50 50,50"/>
                                        </GeometryGroup>
                                    </GeometryDrawing.Geometry>
                                </GeometryDrawing>
                            </DrawingGroup>
                        </DrawingBrush.Drawing>
                    </DrawingBrush>
                </Border.Background>
            </Border>

            <Border Name="InitialColor" Grid.Column="0" Background="White" Cursor="Hand" 
                    ToolTip="{DynamicResource S.ColorSelector.Initial}" ToolTipService.Placement="Bottom" ToolTipService.HorizontalOffset="-5"
                    MouseLeftButtonDown="InitialColor_MouseLeftButtonDown"/>

            <Border Name="CurrentColor" Grid.Column="1" Background="White"
                    ToolTip="{DynamicResource S.ColorSelector.Current}" ToolTipService.Placement="Bottom" ToolTipService.HorizontalOffset="-5"/>

            <Border Name="LastColor" Grid.Column="2" Background="White"
                    ToolTip="{DynamicResource S.ColorSelector.Latest}" ToolTipService.Placement="Bottom" ToolTipService.HorizontalOffset="-5"/>
        </Grid>

        <n:SpectrumSlider Grid.Column="1" x:Name="ColorSlider" Value="0" IsMoveToPointEnabled="True" IsSnapToTickEnabled="False" Maximum="360" 
                          Orientation="Vertical" HorizontalAlignment="Right" Width="36" Margin="0,5" Effect="{StaticResource Shadow.Border.Large}"
                          ValueChanged="ColorSlider_ValueChanged" AfterSelecting="ColorSlider_OnAfterSelecting"/>

        <n:SpectrumSlider Grid.Column="2" x:Name="AlphaSlider" Value="0" IsMoveToPointEnabled="True" IsSnapToTickEnabled="False" Maximum="255" 
                          Orientation="Vertical" HorizontalAlignment="Right" Width="36" Margin="5,5,0,5" IsAlphaSpectrum="True" Effect="{StaticResource Shadow.Border.Large}" 
                          ToolTip="{DynamicResource S.ColorSelector.Alpha}" ValueChanged="ColorSlider_ValueChanged" AfterSelecting="ColorSlider_OnAfterSelecting"/>

        <Grid Grid.Column="3">
            <Grid.RowDefinitions>
                <RowDefinition Height="29"/>
                <RowDefinition Height="32"/>
                <RowDefinition Height="32"/>
                <RowDefinition Height="32"/>
                <RowDefinition Height="32"/>
                <RowDefinition Height="5"/>
                <RowDefinition Height="33"/>
                <RowDefinition/>
                <RowDefinition Height="38"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" MinWidth="50"/>
                <ColumnDefinition Width="*" MinWidth="90"/>
            </Grid.ColumnDefinitions>

            <Label Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Content="{DynamicResource S.ColorSelector.Select}" FontSize="14" Foreground="{DynamicResource Element.Foreground.Header}"/>

            <Label Grid.Row="1" Grid.Column="0" Content="{DynamicResource S.ColorSelector.Red}" Foreground="{DynamicResource Element.Foreground.Medium}" Margin="5" VerticalContentAlignment="Center" Padding="3"/>
            <n:IntegerUpDown Grid.Row="1" Grid.Column="1" x:Name="RedIntegerUpDown" Margin="5,3" MaxLength="4" Padding="2,0" Maximum="255" 
                             MouseWheel="ValueBox_MouseWheel" ValueChanged="ArgbText_ValueChanged"/>

            <Label Grid.Row="2" Grid.Column="0" Content="{DynamicResource S.ColorSelector.Green}" Foreground="{DynamicResource Element.Foreground.Medium}" Margin="5" VerticalContentAlignment="Center" Padding="3"/>
            <n:IntegerUpDown Grid.Row="2" Grid.Column="1" x:Name="GreenIntegerUpDown" Margin="5,3" MaxLength="4" Padding="2,0" Maximum="255" 
                             MouseWheel="ValueBox_MouseWheel" ValueChanged="ArgbText_ValueChanged"/>

            <Label Grid.Row="3" Grid.Column="0" Content="{DynamicResource S.ColorSelector.Blue}" Foreground="{DynamicResource Element.Foreground.Medium}" Margin="5" VerticalContentAlignment="Center" Padding="3"/>
            <n:IntegerUpDown Grid.Row="3" Grid.Column="1" x:Name="BlueIntegerUpDown" Margin="5,3" MaxLength="4" Padding="2,0" Maximum="255"
                             MouseWheel="ValueBox_MouseWheel" ValueChanged="ArgbText_ValueChanged"/>

            <Label Grid.Row="4" Grid.Column="0" x:Name="AlphaLabel" Content="{DynamicResource S.ColorSelector.Alpha}" Foreground="{DynamicResource Element.Foreground.Medium}" Margin="5" VerticalContentAlignment="Center" Padding="3"/>
            <n:IntegerUpDown Grid.Row="4" Grid.Column="1" x:Name="AlphaIntegerUpDown" Margin="5,3" MaxLength="4" Padding="2,0" Maximum="255" 
                             MouseWheel="ValueBox_MouseWheel" ValueChanged="ArgbText_ValueChanged"/>

            <Separator Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="2" Height="1"/>

            <Label Grid.Row="6" Grid.Column="0" Content="{DynamicResource S.ColorSelector.Hexadecimal}" Foreground="{DynamicResource Element.Foreground.Medium}" Margin="5" VerticalContentAlignment="Center" Padding="3"/>
            <n:HexadecimalBox Grid.Row="6" Grid.Column="1" x:Name="ColorHexadecimalBox" Margin="5" Padding="2,0" 
                              Alpha="{Binding ElementName=AlphaIntegerUpDown, Path=Value, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                              Red="{Binding ElementName=RedIntegerUpDown, Path=Value, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                              Green="{Binding ElementName=GreenIntegerUpDown, Path=Value, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                              Blue="{Binding ElementName=BlueIntegerUpDown, Path=Value, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>

            <Grid Grid.Row="7" Grid.Column="0" Grid.ColumnSpan="2">
                <n:ExtendedButton x:Name="EyeDropperButton" Icon="{StaticResource Vector.Crosshair}" Margin="5" Style="{StaticResource Style.Button.Vertical}" 
                                  Text="{DynamicResource S.ColorSelector.Sample}" HorizontalContentAlignment="Center" ContentHeight="20" ContentWidth="20" Padding="3" TabIndex="2" 
                                  ToolTip="{DynamicResource S.ColorSelector.Sample.Info}" ToolTipService.Placement="Bottom" ToolTipService.HorizontalOffset="-5" PreviewMouseDown="EyeDropperButton_PreviewMouseDown"/>

                <Image x:Name="EyeDropperImage" Margin="5" Opacity="0" IsHitTestVisible="False" RenderOptions.BitmapScalingMode="NearestNeighbor" Effect="{StaticResource Shadow.Border.Small}" 
                       Stretch="Uniform" VerticalAlignment="Center" HorizontalAlignment="Center" Width="{Binding ElementName=EyeDropperButton, Path=ActualWidth}" Height="{Binding ElementName=EyeDropperButton, Path=ActualHeight}"/>

                <Border Opacity="{Binding ElementName=EyeDropperImage, Path=Opacity}" Background="{StaticResource Vector.Crosshair.Color}" 
                        VerticalAlignment="Center" HorizontalAlignment="Center" IsHitTestVisible="False" Height="50" Width="50"/>
            </Grid>

            <Grid Grid.Row="8" Grid.Column="0" Grid.ColumnSpan="2" Margin="3,0,0,0" Background="{DynamicResource Panel.Background.Level3}">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>

                <n:ExtendedButton Grid.Column="0" x:Name="OkButton" Text="{DynamicResource S.Ok}" Margin="5" Icon="{StaticResource Vector.Ok}"
                                  MinWidth="70" MinHeight="25" ContentWidth="16" ContentHeight="16" Click="OkButton_Click"/>
                <n:ExtendedButton Grid.Column="1" x:Name="CancelButton" Text="{DynamicResource S.Cancel}" Margin="5" Icon="{StaticResource Vector.Cancel}"
                                  MinWidth="70" MinHeight="25" ContentWidth="16" ContentHeight="16" IsCancel="True"/>
            </Grid>
        </Grid>
    </Grid>
</Window>