<UserControl x:Class="NorthWindDashboard.MainPage"
    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"
    xmlns:esri="http://schemas.esri.com/arcgis/client/2009"
    xmlns:local="clr-namespace:NorthWindDashboard"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    FontFamily="Segoe UI" FontSize="16"
    d:DesignHeight="300" d:DesignWidth="400">

  <!-- resources -->
  <UserControl.Resources>

    <!-- model -->
    <local:ViewModel x:Key="_model" />

    <!-- text brush -->
    <SolidColorBrush x:Key="_brText" Color="#c0ffffff" />

    <!-- style for hyperlink buttons -->
    <Style TargetType="HyperlinkButton" >
      <Setter Property="Margin" Value="10 0 0 0" />
      <Setter Property="FontSize" Value="28" />
      <Setter Property="FontFamily" Value="Webdings" />
      <Setter Property="Foreground" Value="{StaticResource _brText}" />
    </Style>

    <!-- style for grid -->
    <Style TargetType="local:ChartingGrid" >
      <Setter Property="FillPositive" Value="Orange" />
      <Setter Property="Foreground" Value="{StaticResource _brText}" />
      <Setter Property="Background" Value="Black" />
      <Setter Property="RowBackground" Value="Black" />
      <Setter Property="SelectionForeground" Value="Black" />
      <Setter Property="AlternatingRowBackground" Value="Black" />
      <Setter Property="ColumnHeaderBackground" Value="{StaticResource _brText}" />
      <Setter Property="ColumnHeaderForeground" Value="White" />
      <Setter Property="HeaderGridLinesBrush" Value="Black" />
      <Setter Property="GridLinesVisibility" Value="None" />
      <Setter Property="HeadersVisibility" Value="Column" />
    </Style>
  </UserControl.Resources>

  <!-- layout root -->
  <Grid x:Name="LayoutRoot" Background="Black" DataContext="{StaticResource _model}">
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition />
      <ColumnDefinition Width="2*" />
    </Grid.ColumnDefinitions>

    <!-- title -->
    <Border Grid.ColumnSpan="2" Padding="6" >
      <Grid >
        <TextBlock Text="NorthWind Sales Dashboard" FontSize="30" Foreground="{StaticResource _brText}" />
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Bottom" >
          <TextBlock Text="ComponentOne + ESRI" HorizontalAlignment="Right" VerticalAlignment="Bottom" Foreground="{StaticResource _brText}" />

          <!-- button to switch between map and chart -->
          <HyperlinkButton
            Foreground="{StaticResource _brText}"
            Command="{Binding SwitchPanelCommand, ElementName=_transitionPanel}">
            <TextBlock FontFamily="Webdings" Text="2" />
          </HyperlinkButton>
        </StackPanel>
      </Grid>
    </Border>

    <!-- current quarter control/navigation (VCR-style buttons use Webdings font) -->
    <!-- use TextBlock as content to avoid underlines on MouseOver -->
    <Border Grid.Row="1" VerticalAlignment="Top" Margin="10" >
      <StackPanel Orientation="Vertical">
        <TextBlock
          Text="{Binding Quarters.CurrentItem}" Foreground="{StaticResource _brText}"
          FontFamily="Segoe UI" FontSize="48"
          HorizontalAlignment="Left" VerticalAlignment="Bottom" />
        <StackPanel
          Orientation="Horizontal"
          HorizontalAlignment="Left" VerticalAlignment="Bottom" >
          <HyperlinkButton Command="{Binding SelectFirstQuarter}" >
            <TextBlock Text="7" />
          </HyperlinkButton>
          <HyperlinkButton Command="{Binding SelectPreviousQuarter}" >
            <TextBlock Text="3" />
          </HyperlinkButton>
          <HyperlinkButton Command="{Binding SelectNextQuarter}" >
            <TextBlock Text="4" />
          </HyperlinkButton>
          <HyperlinkButton Command="{Binding SelectLastQuarter}" >
            <TextBlock Text="8" />
          </HyperlinkButton>
        </StackPanel>
      </StackPanel>
    </Border>

    <!-- sales gauge (current quarter sales, gold and platinum goals)  -->
    <local:AnimatedGauge
      Grid.Row="1" Minimum="0" Maximum="500000" Background="#15ffffff" Margin="12"
      AnimatedValue="{Binding QuarterSales}" Duration="800">
      <local:AnimatedGauge.EasingFunction>
        <ElasticEase Oscillations="3" Springiness="3"/>
      </local:AnimatedGauge.EasingFunction>
      <c1:C1GaugeRange Fill="Gold" From="{Binding GoalGold}" To="{Binding GoalPlatinum}" />
      <c1:C1GaugeRange Fill="White" From="{Binding GoalPlatinum}" To="500000"/>
      <c1:C1GaugeMark Interval="50000" Location="1.1" />
      <c1:C1GaugeMark Interval="10000" Location="1.1" />
      <c1:C1GaugeLabel
        Interval="50000" Location=".95" Format="#,##0,k"
        Foreground="{StaticResource _brText}" FontFamily="Segoe UI" FontSize="18" />
    </local:AnimatedGauge>

    <!-- right pane: map/chart -->

    <!-- transition panel to switch between map and chart -->
    <local:TransitionPanel
      x:Name="_transitionPanel" Grid.Row="1" Grid.Column="1" SelectedIndex="0" Duration="1000" >
      
      <!-- transition type -->
      <local:TransitionPanel.Transition>
        <local:ProjectionTransition />
      </local:TransitionPanel.Transition>

      <!-- sales map (current quarter sales by customer) -->
      <Grid>

        <!-- map -->
        <esri:Map
          Name="_esriMap" WrapAround="True"
          Extent="-16431833,-5489237,3605675,8951403">

          <!-- background tiles -->
          <esri:ArcGISTiledMapServiceLayer
            Opacity="0.5"
            Url="http://services.arcgisonline.com:80/ArcGIS/rest/services/World_Imagery/MapServer" />

          <!-- layer to show sales by customer -->
          <esri:GraphicsLayer>

            <!-- data source -->
            <esri:GraphicsLayer.GraphicsSource>
              <esri:PointDataSource
                  ItemsSource="{Binding Source={StaticResource _model}, Path=SalesByCustomer}"
                  XCoordinateBinding="{Binding Customer.Longitude}"
                  YCoordinateBinding="{Binding Customer.Latitude}" >
              </esri:PointDataSource>
            </esri:GraphicsLayer.GraphicsSource>

            <!-- renderer -->
            <esri:GraphicsLayer.Renderer>
              <!--
              defined in-line only to make explaining easier (better use a static resource)
              <esri:SimpleRenderer Symbol="{StaticResource _esriMarker}" />
              -->
              <esri:SimpleRenderer>
                <esri:SimpleRenderer.Symbol >
                  <esri:MarkerSymbol>
                    <esri:MarkerSymbol.ControlTemplate>
                      <ControlTemplate>
                        <Ellipse
                          DataContext="{Binding Attributes[DataContext]}"
                          Width="15" Height="15" Margin="-7.5 -7.5 0 0"
                          Fill="Gold" Stroke="Black" Opacity="0.5"
                          RenderTransformOrigin=".5 .5" >
                          <Ellipse.RenderTransform>
                            <ScaleTransform ScaleX="{Binding Scale}" ScaleY="{Binding Scale}" />
                          </Ellipse.RenderTransform>
                        </Ellipse>
                      </ControlTemplate>
                    </esri:MarkerSymbol.ControlTemplate>
                  </esri:MarkerSymbol>
                </esri:SimpleRenderer.Symbol>
              </esri:SimpleRenderer>
            </esri:GraphicsLayer.Renderer>

            <!-- tooltip -->
            <esri:GraphicsLayer.MapTip>
              <Border Padding="6,2" Background="#99333333" CornerRadius="8" DataContext="{Binding [DataContext]}">
                <StackPanel Orientation="Vertical" >
                  <TextBlock Text="{Binding Customer.CompanyName}" Foreground="White" FontWeight="Bold" />
                  <StackPanel Orientation="Horizontal" >
                    <TextBlock Text="{Binding Customer.City}" Foreground="White" FontSize="10" />
                    <TextBlock Text=", " Foreground="White" FontSize="10" />
                    <TextBlock Text="{Binding Customer.Country}" Foreground="White" FontSize="10" />
                  </StackPanel>
                  <TextBlock Text="{Binding Amount, StringFormat='$#,##0'}" Foreground="White" HorizontalAlignment="Right" />
                </StackPanel>
              </Border>
            </esri:GraphicsLayer.MapTip>
          </esri:GraphicsLayer>
        </esri:Map>

        <!-- map navigation control -->
        <local:MapNavigator
          VerticalAlignment="Bottom" HorizontalAlignment="Left" Margin="0 10"
          Foreground="{StaticResource _brText}" FontSize="28"
          Map="{Binding ElementName=_esriMap}" />
      </Grid>


      <!-- sales chart (current quarter sales by category)  -->
      <c1:C1Chart
        ChartType="Bar" Palette="Oriel" Foreground="{StaticResource _brText}" FontSize="18" Margin="20">
        <c1:C1Chart.Data>
          <c1:ChartData ItemsSource="{Binding SalesByCategory}" ItemNameBinding="{Binding Category.CategoryName}">
            <c1:DataSeries ValueBinding="{Binding Amount}" >
              <c1:DataSeries.PointTooltipTemplate>
                <DataTemplate>
                  <StackPanel Orientation="Horizontal" >
                    <TextBlock Text="{Binding DataObject.Category.CategoryName}" />
                    <TextBlock Text="{Binding DataObject.Amount, StringFormat=': $#,##0'}" />
                  </StackPanel>
                </DataTemplate>
              </c1:DataSeries.PointTooltipTemplate>
            </c1:DataSeries>
          </c1:ChartData>
        </c1:C1Chart.Data>
        <c1:C1Chart.View>
          <c1:ChartView>
            <c1:ChartView.AxisX>
              <c1:Axis AnnoFormat="#,##0,k" MajorUnit="10000" Max="60000" />
            </c1:ChartView.AxisX>
            <c1:ChartView.AxisY>
              <c1:Axis Reversed="True"/>
            </c1:ChartView.AxisY>
          </c1:ChartView>
        </c1:C1Chart.View>
      </c1:C1Chart>

      <!-- sales grid (current quarter sales by customer) -->
      <local:ChartingGrid
        ItemsSource="{Binding SalesByCustomer.SourceCollection}"
        AutoGenerateColumns="False"
        SelectionMode="RowRange"
        ClipboardCopyMode="IncludeColumnHeaders"
        FrozenColumns="2" >
        <local:ChartingGrid.Columns>
          <c1:Column Header="Quarter" Binding="{Binding Quarter}" Width="*" />
          <c1:Column Header="Country" Binding="{Binding Customer.Country}" Width="2*" />
          <c1:Column Header="Customer" Binding="{Binding Customer.CompanyName}" Width="3*" />
          <c1:Column Header="Amount" Binding="{Binding Amount, StringFormat='n0'}" Width="2*" />
        </local:ChartingGrid.Columns>
      </local:ChartingGrid>
      
    </local:TransitionPanel>
  </Grid>
</UserControl>
