<?xml version="1.0" encoding="utf-8"?>
<UserControl x:Class="SalesDashboard.MainPage" mc:Ignorable="d" Foreground="WhiteSmoke" FontSize="14" d:DesignHeight="600" d:DesignWidth="900" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:esri="http://schemas.esri.com/arcgis/client/2009" xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:SalesDashboard" xmlns:userControls="clr-namespace:ESRI.ArcGIS.SilverlightMapApp" xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:actions="clr-namespace:ESRI.ArcGIS.SilverlightMapApp.Actions">

    <!-- Resources -->
    <UserControl.Resources>
        
        <!-- Data model -->
        <local:Model x:Key="_model" />

        <!-- Selection brush -->
        <SolidColorBrush x:Key="_selBrush" Color="#ff435d84" />
        
        <!-- Style for slide-in toolbars -->
        <Style x:Key="_tbStyle" TargetType="Border">
            <Setter Property="Background" Value="#60ffffff" />
            <Setter Property="BorderBrush" Value="#c0ffffff" />
            <Setter Property="BorderThickness" Value="2 2 0 0" />
            <Setter Property="Opacity" Value="0.3" />
            <Setter Property="HorizontalAlignment" Value="Right" />
            <Setter Property="VerticalAlignment" Value="Center" />
            <Setter Property="Padding" Value="10 15 4 15" />
            <Setter Property="CornerRadius" Value="20 0 0 20" />
        </Style>

        <!-- Marker for store locations on the map -->
        <esri:PictureMarkerSymbol x:Key="_esriMarker" OffsetX="8" OffsetY="8" Width="15" Height="15" Source="Images/point-24x24.png" />
            
    </UserControl.Resources>

    <!-- Page content -->
    <Grid x:Name="LayoutRoot" Background="{StaticResource BaseColor}">
    	<Grid.ColumnDefinitions>
    		<ColumnDefinition Width="0" />
    		<ColumnDefinition Width="6*" />
			<ColumnDefinition Width="Auto" />
			<ColumnDefinition Width="4*" />
		</Grid.ColumnDefinitions>
		 <Grid.RowDefinitions>
            <RowDefinition Height="Auto" x:Name="TopBarRowDefinition" />
            <RowDefinition Height="30" />
            <RowDefinition Height="0.378*" />
            <RowDefinition Height="0.022*" />
			<RowDefinition Height="0.6*" />
			<RowDefinition Height="Auto" />
            
		 </Grid.RowDefinitions>


       <!-- Application Header -->
        <Grid Grid.ColumnSpan="4">
            <Grid VerticalAlignment="Bottom" HorizontalAlignment="Left">
                <TextBlock Text="{StaticResource Title}" Style="{StaticResource titleTextStyle}" />
                
            </Grid>
        </Grid>
        <Grid Grid.Row="1" Grid.ColumnSpan="4" x:Name="TopMenuGrid" Background="{StaticResource BaseColor}">
        	<Rectangle x:Name="BackgroundGradient" Opacity=".5" Fill="{StaticResource ReflectionGradient}" />
        	<StackPanel HorizontalAlignment="Left" VerticalAlignment="Center" Orientation="Horizontal">
                <!-- Base layers -->
        		<userControls:DropDownMenu>
        			<userControls:DropDownMenu.MenuHeader>
        				<Button Margin="5,0,0,0" Cursor="Arrow">
        					<StackPanel Orientation="Horizontal">
        						<Image Source="Images/basemap32.png" Height="22" Margin="2,-3,3,-3" />
        						<TextBlock Text="{StaticResource MapStyleMenuTitle}" Foreground="White" FontWeight="Bold" />
        					</StackPanel>
        				</Button>
        			</userControls:DropDownMenu.MenuHeader>
        			<Border Style="{StaticResource menuBorder}">
        				<Border.Effect>
        					<DropShadowEffect Color="Black" Direction="-45" BlurRadius="20" Opacity=".75" />
        				</Border.Effect>
        				<StackPanel>
        					<RadioButton Content="Streets" ToolTipService.ToolTip="Worldwide Street Map" GroupName="BaseLayer">
        						<i:Interaction.Triggers>
        							<i:EventTrigger EventName="Checked">
        								<actions:SetLayerUrlAction TargetName="_map" LayerID="BaseLayer" Url="http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer" />
        							</i:EventTrigger>
        						</i:Interaction.Triggers>
        					</RadioButton>
        					<RadioButton Content="Imagery" IsChecked="True" ToolTipService.ToolTip="Worldwide Satellite Imagery Map" GroupName="BaseLayer">
        						<i:Interaction.Triggers>
        							<i:EventTrigger EventName="Checked">
        								<actions:SetLayerUrlAction TargetName="_map" LayerID="BaseLayer" Url="http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer" />
        							</i:EventTrigger>
        						</i:Interaction.Triggers>
        					</RadioButton>
        					<RadioButton Content="Topographic" GroupName="BaseLayer" ToolTipService.ToolTip="World Topographic Map">
        						<i:Interaction.Triggers>
        							<i:EventTrigger EventName="Checked">
        								<actions:SetLayerUrlAction TargetName="_map" LayerID="BaseLayer" Url="http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer" />
        							</i:EventTrigger>
        						</i:Interaction.Triggers>
        					</RadioButton>
                            <RadioButton Content="National Geographic" ToolTipService.ToolTip="National Geographic World Map" GroupName="BaseLayer">
                                <i:Interaction.Triggers>
                                    <i:EventTrigger EventName="Checked">
                                        <actions:SetLayerUrlAction TargetName="_map" LayerID="BaseLayer" Url="http://services.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer" />
                                    </i:EventTrigger>
                                </i:Interaction.Triggers>
                            </RadioButton>

                            <RadioButton Content="Oceans" ToolTipService.ToolTip="Oceans Map" GroupName="BaseLayer">
        						<i:Interaction.Triggers>
        							<i:EventTrigger EventName="Checked">
        								<actions:SetLayerUrlAction TargetName="_map" LayerID="BaseLayer" Url="http://services.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer" />
        							</i:EventTrigger>
        						</i:Interaction.Triggers>
        					</RadioButton>
        				</StackPanel>
        			</Border>
        		</userControls:DropDownMenu>
        	</StackPanel>

            <!-- Menus on right side of the menu bar -->
        	<StackPanel HorizontalAlignment="Right" VerticalAlignment="Center" Orientation="Horizontal">
                
        		<Button Height="30" Width="30" Margin="0,0,2,0" HorizontalContentAlignment="Left" Padding="2" ToolTipService.ToolTip="About Sales Dashboard Application">
        			<i:Interaction.Triggers>
        				<i:EventTrigger EventName="Click">
        					<actions:ToggleWindowVisibilityAction TargetName="aboutWindow" />
        				</i:EventTrigger>
        			</i:Interaction.Triggers>
        			<Image Source="Images/About.png" Margin="2" />
        		</Button>
        		<Button Margin="0,0,2,0">
        			<i:Interaction.Triggers>
        				<i:EventTrigger EventName="Click">
        					<actions:ToggleFullScreenAction />
        				</i:EventTrigger>
        			</i:Interaction.Triggers>
        			<Image Source="Images/Fullscreen32.png" Height="24" Margin="-4" ToolTipService.ToolTip="Toggle Fullscreen" />
        		</Button>
        	</StackPanel>
        </Grid>
        <!--Splitters -->
        <local:GridSplitter x:Name="_splitterV" Grid.Column="2" Grid.Row="2" Grid.RowSpan="3" Width="6" Background="Transparent" />
        <local:GridSplitter x:Name="_splitterH" Grid.Column="3" Grid.Row="3" Height="6" Background="Transparent" />
        
        <!--Menu bar-->

       <!--Map -->
       <Grid Grid.Column="1" Grid.Row="2" Grid.RowSpan="3">
        	 <esri:Map Background="{StaticResource BaseColor}" Name="_map" WrapAround="True" Extent="-13277998,3925273,-13024364,4128600" MouseLeftButtonDown="_map_MouseLeftButtonDown" MouseLeftButtonUp="_map_MouseLeftButtonUp">
                
                <!-- background tiles -->

                <esri:ArcGISTiledMapServiceLayer ID="BaseLayer" Url="http://services.arcgisonline.com:80/ArcGIS/rest/services/World_Imagery/MapServer" />
               
                <!-- Layer to show sales region -->
                <esri:GraphicsLayer ID="_lyrRegions" />
                <!-- Layer to show store locations -->
                <esri:GraphicsLayer ID="_lyrStores">

                    <!-- Renderer -->
                    <esri:GraphicsLayer.Renderer>
                        <esri:SimpleRenderer Symbol="{StaticResource _esriMarker}" />
                    </esri:GraphicsLayer.Renderer>

                    <!-- Tooltip -->
                    <esri:GraphicsLayer.MapTip>
                        <Border Padding="4,2" Background="#99333333" CornerRadius="8" DataContext="{Binding [DataContext]}">
                            <StackPanel Margin="7">
                                <TextBlock Text="{Binding DisplayName}" />
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Text="Sales:" />
                                    <TextBlock Text="{Binding Sales, StringFormat=c0}" />
                                </StackPanel>
                            </StackPanel>
                        </Border>
                    </esri:GraphicsLayer.MapTip>
                </esri:GraphicsLayer>
            </esri:Map>

            <!-- Navigation control -->
            <esri:Navigation x:Name="nav" Margin="5,19,0,0" Map="{Binding ElementName=_map}" HorizontalAlignment="Left" VerticalAlignment="Top" Background="{StaticResource BaseColor}">
                <esri:Navigation.Effect>
                    <DropShadowEffect Color="Black" Direction="-45" BlurRadius="20" Opacity=".75" />
                </esri:Navigation.Effect>
            </esri:Navigation>

            <!-- Scale Bar -->
            <esri:ScaleLine x:Name="scaleBar" Opacity=".5" Map="{Binding ElementName=_map}" Margin="5,0,10,0" IsHitTestVisible="False" Foreground="White" HorizontalAlignment="Left" VerticalAlignment="Bottom" />
            

        </Grid>

        <!-- Grid -->
        <Border Grid.Column="3" Grid.Row="2" Grid.RowSpan="2">
            <c1:C1FlexGrid Name="_flex" AutoGenerateColumns="False" AreRowGroupHeadersFrozen="False" ItemsSource="{Binding Source={StaticResource _model}, Path=Regions}" ChildItemsPath="Stores" KeepCurrentVisible="True" SelectionMode="Row" HeaderGridLinesBrush="Transparent" GridLinesBrush="Transparent" Background="Black" Foreground="LightGray" GroupRowForeground="LightGray" CursorBackground="{StaticResource _selBrush}" SelectionBackground="{StaticResource _selBrush}" RowBackground="Transparent" AlternatingRowBackground="Transparent" GroupRowBackground="Transparent" ColumnHeaderForeground="White" ColumnHeaderBackground="Transparent" TopLeftCellBackground="Transparent" RowHeaderBackground="Transparent" LoadedRows="_flex_LoadedRows" SelectionChanged="_flex_SelectionChanged" DoubleClick="_flex_DoubleClick">
                <c1:C1FlexGrid.Columns>
                    <c1:Column Header="Store" Binding="{Binding DisplayName}" Width="1.5*" TextTrimming="WordEllipsis" />
                    <c1:Column Header="Employees" Binding="{Binding Employees, StringFormat=n0}" Width="*" HorizontalAlignment="Right" HeaderHorizontalAlignment="Right" TextTrimming="WordEllipsis" />
                    <c1:Column Header="Penetration" Binding="{Binding Penetration, StringFormat=\{0:n0\}%}" Width="*" HorizontalAlignment="Right" HeaderHorizontalAlignment="Right" TextTrimming="WordEllipsis" />
                    <c1:Column Header="Sales" Binding="{Binding Sales, StringFormat=c0}" Width="1.2*" HorizontalAlignment="Right" HeaderHorizontalAlignment="Right" TextTrimming="WordEllipsis" />
                </c1:C1FlexGrid.Columns>
            </c1:C1FlexGrid>
        </Border>

        <!-- Chart -->
        <Grid Grid.Column="3" Grid.Row="4" Background="Black">
      	 <!-- Title -->
            <TextBlock x:Name="_chartTitle" Text=" " VerticalAlignment="Top" HorizontalAlignment="Center" />

            <!--Chart-->
            <c1:C1Chart x:Name="_chart" FontSize="11" Margin="12 20 12 0" local:Clip.ToBounds="True" />
            
           
            <!-- Chart toolbar -->
            <Border x:Name="_chartToolbar" Style="{StaticResource _tbStyle}" MouseEnter="_toolbar_MouseEnter" MouseLeave="_toolbar_MouseLeave">
                <StackPanel Orientation="Vertical">
                    <Button x:Name="_btnEmployees" Content="o" ToolTipService.ToolTip="Employees" Click="_chartToolbar_Click" />
                    <Button x:Name="_btnPenetration" Content="*" ToolTipService.ToolTip="Penetration" Click="_chartToolbar_Click" />
                    <Button x:Name="_btnSales" Content="$" ToolTipService.ToolTip="Sales" Click="_chartToolbar_Click" />
                    <Rectangle Height="30" />
                    <Button x:Name="_btnBar" Content="=" ToolTipService.ToolTip="Bar" Click="_chartToolbar_Click" />
                    <Button x:Name="_btnColumn" Content="||" ToolTipService.ToolTip="Column" Click="_chartToolbar_Click" />
                    <Button x:Name="_btnPie" Content="o" ToolTipService.ToolTip="Pie" Click="_chartToolbar_Click" />
                </StackPanel>
            </Border>
        </Grid>

        <!-- About window -->
        <userControls:DraggableWindow IsOpen="True" x:Name="aboutWindow" Grid.ColumnSpan="2" Grid.Row="2" Margin="0" VerticalAlignment="Center" HorizontalAlignment="Center" Title="About" Width="375" Height="156" Background="{StaticResource BaseColor}">
            <i:Interaction.Triggers>
                <i:EventTrigger>
                    <actions:ToggleWindowVisibilityAction TargetName="aboutWindow" />
                    <!-- Hide at startup -->
                </i:EventTrigger>
            </i:Interaction.Triggers>
            <StackPanel Orientation="Vertical">
                <TextBlock TextWrapping="NoWrap" Text="{StaticResource Title}" Width="Auto" Height="Auto" Foreground="White" FontSize="14" FontWeight="Bold" HorizontalAlignment="Left" Margin="5,3,0,0" />
                <TextBlock TextWrapping="NoWrap" Width="Auto" Height="Auto" Foreground="White" FontSize="12" HorizontalAlignment="Left" Margin="5,1,0,0"><Run Text="This project illustrates how you can use the Esri map and " /><LineBreak /><Run Text="C1 controls to build a sales dashboard application. The data" /><LineBreak /><Run Text="used in this project is stored on ArcGIS Online through " /><LineBreak /><Run Text="REST based services. " /><LineBreak /><Run /><LineBreak /><Run Text="Powered by Esri and ComponentOne" /><LineBreak /><Run /></TextBlock>
                <Line X1="5" Y1="50" X2="330" Y2="50" Stroke="White" StrokeThickness="0.25" />
                <TextBlock Foreground="Yellow" FontSize="11" Width="Auto" Height="Auto" TextWrapping="NoWrap" Text="{StaticResource Info}" HorizontalAlignment="Left" Margin="5,3,0,0" />
            </StackPanel>
        </userControls:DraggableWindow>




    </Grid>
</UserControl>