<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="clr-namespace:ForzaUI"
    x:Class="ForzaUI.CinematicsTest"
    x:Name="Page"
    WindowTitle="Page"
    FlowDirection="LeftToRight"
    DataContext="{Binding RelativeSource={x:Static RelativeSource.Self}}">

    <Page.Resources>

        <Style x:Key="BaseTextBlockStyle"
               TargetType="{x:Type TextBlock}">
            <Setter Property="FontFamily"
                    Value="Helvetica Neue LT Pro" />
            <Setter Property="FontWeight"
                    Value="Medium" />
            <Setter Property="FontStretch"
                    Value="Expanded" />
            <Setter Property="HorizontalAlignment"
                    Value="Left" />
            <Setter Property="TextWrapping"
                    Value="NoWrap" />
            <Setter Property="Margin"
                    Value="15,0" />
        </Style>

        <Color x:Key="MidLightGrayColor">#FFB3B3B3</Color>
        
        <SolidColorBrush x:Key="MidLightGrayBrush"
                         Color="{StaticResource MidLightGrayColor}" />

        <Color x:Key="LightestGrayColor">#FFebebeb</Color>
        <SolidColorBrush x:Key="LightestGrayBrush"
                         Color="{StaticResource LightestGrayColor}" />
        <Style x:Key="InfoPanelItemHeaderLightTextBlockStyle"
               BasedOn="{StaticResource BaseTextBlockStyle}"
               TargetType="{x:Type TextBlock}">
            <Setter Property="Foreground"
                    Value="{StaticResource MidLightGrayBrush}" />
            <Setter Property="FontSize"
                    Value="16" />
            <Setter Property="TextWrapping"
                    Value="Wrap" />
        </Style>

        <Style x:Key="InfoPanelItemInfoLightTextBlockStyle"
               BasedOn="{StaticResource BaseTextBlockStyle}"
               TargetType="{x:Type TextBlock}">
            <Setter Property="Foreground"
                    Value="{StaticResource LightestGrayBrush}" />
            <Setter Property="FontSize"
                    Value="20" />
            <Setter Property="TextWrapping"
                    Value="Wrap" />
        </Style>

        <DataTemplate x:Key="CinematicsTestDataTemplate">
            <StackPanel Margin="0,0,0,8">
                <TextBlock Margin="10,0" VerticalAlignment="Stretch" Text="{Binding }" Style="{StaticResource InfoPanelItemHeaderLightTextBlockStyle}" FontSize="24" Foreground="#FFED4A4A" TextAlignment="Center"/>
            </StackPanel>
        </DataTemplate>

        <Style x:Key="ListBoxStyle1" TargetType="{x:Type ListBox}">
            <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListBox}">
                        <Border Background="{x:Null}">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="ValidationStates">
                                    <VisualState x:Name="Valid"/>
                                    <VisualState x:Name="InvalidFocused"/>
                                    <VisualState x:Name="InvalidUnfocused"/>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <ScrollViewer CanContentScroll="True" Focusable="false"  VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Disabled" >
                                <VirtualizingStackPanel  Orientation="Horizontal" IsItemsHost="true" />
                            </ScrollViewer>          
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="ListBoxItemStyle1" TargetType="{x:Type ListBoxItem}">
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
            <Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
            <Setter Property="Padding" Value="2,0,0,0"/>
            <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListBoxItem}">
                        <Canvas x:Name="Bd" SnapsToDevicePixels="true" Background="#00000000" Width="100">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="MouseOver"/>
                                    <VisualState x:Name="Disabled"/>
                                    <VisualState x:Name="Selected"/>
                                    <VisualState x:Name="Unselected"/>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="FocusStates">
                                    <VisualState x:Name="SelectedUnfocused"/>
                                    <VisualState x:Name="Unfocused">
                                        <Storyboard>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="textBlock">
                                                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Focused">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Bd">
                                                <EasingColorKeyFrame KeyTime="0" Value="#FF6E0E0E"/>
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            <TextBlock x:Name="textBlock" Margin="10,0" VerticalAlignment="Stretch" Text="______" Style="{StaticResource InfoPanelItemHeaderLightTextBlockStyle}" FontSize="24" Foreground="#FFED4A4A"/>
                        </Canvas>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <LinearGradientBrush x:Key="TrackBkBrush" StartPoint="0,0" EndPoint="0,1">
            <LinearGradientBrush.GradientStops>
                <GradientStopCollection>
                    <GradientStop Color="Black" Offset="0.0"/>
                    <GradientStop Color="#FFC8C8C8" Offset="0.696"/>
                    <GradientStop Color="White" Offset="0.884"/>
                    <GradientStop Color="#FF747474" Offset="1"/>
                    <GradientStop Color="White" Offset="0.848"/>
                </GradientStopCollection>
            </LinearGradientBrush.GradientStops>
        </LinearGradientBrush>

        <Style x:Key="ProgressBarStyle1" TargetType="{x:Type ProgressBar}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ProgressBar}">
                        <Grid MinHeight="14" MinWidth="200">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Determinate"/>
                                    <VisualState x:Name="Indeterminate"/>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="ValidationStates">
                                    <VisualState x:Name="Valid"/>
                                    <VisualState x:Name="InvalidFocused"/>
                                    <VisualState x:Name="InvalidUnfocused"/>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <local:FZMaterial x:Name="PART_Track" Margin="-2,-4,-3,-2" Height="22" Color="Gray" />
                            <local:FZMaterial x:Name="PART_Indicator" HorizontalAlignment="Left" Color="Blue"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="CinematicsTestTextBlockStyle" BasedOn="{StaticResource InfoPanelItemInfoLightTextBlockStyle}" TargetType="{x:Type TextBlock}">
            <Setter Property="FontSize" Value="32"/>
            <Setter Property="Foreground" Value="#FF5EAAFF"/>
        </Style>
    </Page.Resources>

    <Grid Style="{StaticResource A_Style_FrameworkElement_LayoutRoot}">
      <Grid x:Name="LayoutRoot">
        <Canvas  Visibility="{Binding RecordingModeInactive, Converter={StaticResource A_FZBooleanToVisibilityConverter}}">
            <local:CommonListBox x:Name="ListBox_Menu" Canvas.Left="403.5" Canvas.Top="973" Width="1216" Height="48" VerticalAlignment="Top"
                Style="{StaticResource ListBoxStyle1}" Foreground="{x:Null}" VirtualizingStackPanel.VirtualizationMode="Recycling"
                ItemsSource="{Binding MenuItems}" ItemContainerStyle="{StaticResource ListBoxItemStyle1}" ItemTemplate="{StaticResource CinematicsTestDataTemplate}"/>

            <ProgressBar x:Name="ProgressBar_Timeline" Canvas.Left="403.5" Canvas.Top="944" Width="1216" Height="16" Value="{Binding CurrTime}" Maximum="{Binding TotalTime}"
                Style="{StaticResource ProgressBarStyle1}" Background="White" BorderThickness="1" BorderBrush="#FF5EAAFF" Foreground="#FF5EAAFF" Opacity="0.6"/>

            <TextBlock x:Name="Text_Time" Canvas.Right="1512" Canvas.Top="935" Width="220" Text="{Binding CurrTimeString}" Style="{StaticResource CinematicsTestTextBlockStyle}" TextAlignment="Right"/>
            <TextBlock x:Name="Text_Total_Time" Canvas.Left="1616" Canvas.Top="935" Width="220" Text="{Binding TotalTimeString}" Style="{StaticResource CinematicsTestTextBlockStyle}"/>

            <Rectangle x:Name="Rect_TimeFocus" Canvas.Left="280" Canvas.Top="935" Width="1468.5" Height="34" Stroke="Black" Fill="#FF721D1D" Panel.ZIndex="-5" Opacity="0"/>

            <StackPanel Orientation="Horizontal" Canvas.Left="1616" Canvas.Top="987">
              <TextBlock x:Name="Text_Loop" Margin="15,0,0,0" Text="LOOP :" Style="{StaticResource CinematicsTestTextBlockStyle}"/>
              <TextBlock x:Name="Text_Loop_State" Margin="10,0,0,0" Text="{Binding LoopStateString}" Style="{StaticResource CinematicsTestTextBlockStyle}"/>
            </StackPanel>

            <StackPanel Orientation="Horizontal" Canvas.Left="1390" Canvas.Top="877">
              <TextBlock x:Name="Text_Camera" Margin="15,0,0,0" Text="CAM :" Style="{StaticResource CinematicsTestTextBlockStyle}"/>
              <TextBlock x:Name="Text_Camera_State" Margin="10,0,0,0" Text="{Binding CameraStateString}" Style="{StaticResource CinematicsTestTextBlockStyle}"/>
            </StackPanel>

            <TextBlock x:Name="Text_Speed_Modifier" Canvas.Left="403" Canvas.Top="877" Height="54" Text="{Binding SpeedModifierString}" Style="{StaticResource CinematicsTestTextBlockStyle}"/>
        </Canvas>
        <Canvas Visibility="{Binding RecordingModeOverwritePlayback, Converter={StaticResource A_FZBooleanToVisibilityConverter}}">
          <TextBlock x:Name="Text_Recording_Playback" Canvas.Left="403" Canvas.Top="877" Height="54" Text="PLAYBACK" Style="{StaticResource CinematicsTestTextBlockStyle}" />
        </Canvas>
        <Canvas Visibility="{Binding RecordingModeOverwriteRecord, Converter={StaticResource A_FZBooleanToVisibilityConverter}}">
          <TextBlock x:Name="Text_Recording_Record" Canvas.Left="403" Canvas.Top="877" Height="54" Text="RECORDING..." Style="{StaticResource CinematicsTestTextBlockStyle}" Foreground="#FFFF4965"/>
        </Canvas>
      </Grid>        
    </Grid>
  
</Page>