<?xml version="1.0" encoding="utf-8"?>
<UserControl x:Class="Factories.FactoryDecorator" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml">
    <UserControl.Resources>
        <DataTemplate x:Key="RadialSmallMark">
            <Rectangle Height="14" Width="5" Fill="#FFFFFFFF" Stroke="#FF000D24" StrokeThickness="1.2" Opacity="0.5" />
        </DataTemplate>
        
        <DataTemplate x:Key="RadialHourMark">
            <Path HorizontalAlignment="Right" Margin="5 0 0 0" Data="M1,1 L15,5 L15,5 L1,10 z" Fill="#FFFFFFFF" Stretch="Fill" Stroke="#FF000D24" StrokeThickness="1.2" Height="10" Width="20">
                <Path.RenderTransform>
                    <RotateTransform Angle="90" />
                </Path.RenderTransform>
            </Path>
        </DataTemplate>
                
        <Storyboard x:Name="showLargeGauge">
            <DoubleAnimation Storyboard.TargetName="largeGaugeScale" Storyboard.TargetProperty="ScaleX" From="0.25" To="1" Duration="0:0:0.1" />
            <DoubleAnimation Storyboard.TargetName="largeGaugeScale" Storyboard.TargetProperty="ScaleY" From="0.25" To="1" Duration="0:0:0.1" />
        </Storyboard>

        <Storyboard x:Name="smallGaugeColor">
            <ColorAnimationUsingKeyFrames>
                <SplineColorKeyFrame KeyTime="0:0:0" Value="Red" />
                <SplineColorKeyFrame KeyTime="0:0:0.15" Value="Red" />
                <SplineColorKeyFrame KeyTime="0:0:0.16" Value="Yellow" />
                <SplineColorKeyFrame KeyTime="0:0:0.30" Value="Yellow" />
                <SplineColorKeyFrame KeyTime="0:0:0.31" Value="Green" />
                <SplineColorKeyFrame KeyTime="0:0:1" Value="Green" />
            </ColorAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>
    <Grid x:Name="gauges" Width="60" Height="60">

        <Grid Width="25" Height="25" VerticalAlignment="Top" HorizontalAlignment="Right" Margin="0,-5,-5,0">
            <c1:C1RadialGauge x:Name="smallGauge" StartAngle="-150" SweepAngle="300" Minimum="0" Maximum="100" Radius="0.95" Value="{Binding Capacity}" BorderThickness="0" Background="#AA000000" PointerWidth="0.3" PointerLength="0.65" PointerFill="White" PointerStroke="Gray" PointerStrokeThickness="1" PointerCapSize="0.3,0.3" PointerCapFill="White" PointerCapStrokeThickness="0" FaceVisibility="Collapsed" CoverVisibility="Collapsed">
                <c1:C1GaugeRange Fill="Green" Location="0.4" Width="0.6" Opacity="0.6" />
            </c1:C1RadialGauge>
            <Grid Cursor="Hand" Background="Transparent" x:Name="smallGaugeMask" />
        </Grid>

        <Grid x:Name="largeGauge" Visibility="Collapsed" Width="100" Height="100" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,-68,-68,0" Background="Transparent" RenderTransformOrigin="0,1">
            <Grid.RenderTransform>
                <ScaleTransform x:Name="largeGaugeScale" />
            </Grid.RenderTransform>
            
            <c1:C1RadialGauge StartAngle="-150" SweepAngle="300" Minimum="0" Maximum="100" Radius="0.95" Value="{Binding Capacity}" PointerWidth="0.05" BorderThickness="0" Background="#AA000000" FaceVisibility="Collapsed" CoverVisibility="Collapsed">
                <c1:C1GaugeRange From="0" To="11" Fill="Red" Location="0.4" StrokeThickness="0.34" Opacity="0.4" />
                <c1:C1GaugeRange From="10" To="21" Fill="Yellow" Location="0.4" StrokeThickness="0.34" Opacity="0.4" />
                <c1:C1GaugeRange From="20" To="91" Fill="Green" Location="0.4" StrokeThickness="0.34" Opacity="0.4" />
                <c1:C1GaugeRange From="90" To="96" Fill="Yellow" Location="0.4" StrokeThickness="0.34" Opacity="0.4" />
                <c1:C1GaugeRange From="95" To="100" Fill="Red" Location="0.4" StrokeThickness="0.34" Opacity="0.4" />
                
                <c1:C1GaugeMark Interval="20" Template="{StaticResource RadialHourMark}" Location="0.7" />
                <c1:C1GaugeLabel Interval="20" Location="0.7" Alignment="Out" FontFamily="Arial" FontSize="11" Foreground="#FFBDD5D9" />
                <c1:C1GaugeMark Interval="5" Template="{StaticResource RadialSmallMark}" Location="0.73" />
            </c1:C1RadialGauge>
            
            <StackPanel VerticalAlignment="Top" HorizontalAlignment="Center" Margin="0,-30,0,0">
                <Border Background="#AA000000" CornerRadius="5" Padding="6,2,6,2">
                        <TextBlock Text="Production" TextAlignment="Center" Foreground="White" />    
                </Border>
            </StackPanel>
        </Grid>        
    </Grid>
</UserControl>