<phone:PhoneApplicationPage xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
                            x:Class="MyFriendsAround.WP7.MainPage"
                            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                            xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
                            xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
                            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                            xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
                            xmlns:cmd="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras.WP7"
                            FontFamily="{StaticResource PhoneFontFamilyNormal}"
                            FontSize="{StaticResource PhoneFontSizeNormal}"
                            Foreground="{StaticResource PhoneForegroundBrush}"
                            SupportedOrientations="Portrait"
                            Orientation="Portrait"
                            mc:Ignorable="d"
                            d:DesignWidth="480"
                            d:DesignHeight="768"
                            shell:SystemTray.IsVisible="True"
                            DataContext="{Binding Main, Source={StaticResource Locator}}"
                            xmlns:my="clr-namespace:Microsoft.Phone.Controls.Maps;assembly=Microsoft.Phone.Controls.Maps"
                            xmlns:Preview="clr-namespace:Phone7.Fx.Preview;assembly=Phone7.Fx.Preview"
                            xmlns:binding="clr-namespace:Coding4Fun.Phone.Controls.Binding;assembly=Coding4Fun.Phone.Controls"
                            xmlns:Core="clr-namespace:Microsoft.Phone.Controls.Maps.Core;assembly=Microsoft.Phone.Controls.Maps">

    <!--LayoutRoot contains the root grid where all other page content is placed-->

    <phone:PhoneApplicationPage.Resources>
        <ControlTemplate x:Key="PushpinControlTemplate1"
                         TargetType="my:Pushpin">
            <Grid Height="32"
                  Width="32"
                  Margin="-16,-16,0,0">
                <Ellipse Fill="#FFA3A3BE"
                         Stroke="Black"
                         Margin="0" />
                <Image Source="{Binding PinSource}" />
            </Grid>
        </ControlTemplate>
        <ControlTemplate x:Key="PushpinControlTemplate2"
                         TargetType="my:Pushpin">
            <Grid x:Name="ContentGrid">
                <StackPanel Orientation="Vertical">
                    <Grid Background="{TemplateBinding Background}"
                          HorizontalAlignment="Left">
                        <Image x:Name="imgFriend"
                               Source="{Binding PinImageUrl, Mode=OneWay}"
                               Margin="2, 2, 2, 24"
                               Width="48"
                               Height="48"
                               Stretch="Fill">
                        </Image>
                        <TextBlock HorizontalAlignment="Left"
                                   Text="{Binding PinUserName, Mode=OneWay}"
                                   VerticalAlignment="Bottom"
                                   Margin="1"
                                   Width="48"
                                   Height="24" />
                    </Grid>
                    <Polygon Fill="{TemplateBinding Background}"
                             Points="0,0 29,0 0,29"
                             Width="29"
                             Height="29"
                             HorizontalAlignment="Left" />
                </StackPanel>
            </Grid>
        </ControlTemplate>
    </phone:PhoneApplicationPage.Resources>

    <i:Interaction.Triggers>
        <i:EventTrigger EventName="Loaded">
            <cmd:EventToCommand Command="{Binding MainLoadCommand}" />
        </i:EventTrigger>
    </i:Interaction.Triggers>

    <Grid x:Name="LayoutRoot"
          Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>


        <Grid.Resources>
            <DataTemplate  x:Key="LogoTemplate">
                <my:Pushpin Location="{Binding Location}"
                            Background="{StaticResource PhoneAccentBrush}"
                            Template="{StaticResource PushpinControlTemplate2}">
                </my:Pushpin>
            </DataTemplate>
            <my:MapItemsControl x:Name="GroupAPins"
                                ItemTemplate="{StaticResource LogoTemplate}"
                                ItemsSource="{Binding PushPins}">
            </my:MapItemsControl>
        </Grid.Resources>


        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentGrid"
              Grid.Row="0"
              VerticalAlignment="Stretch"
              Grid.RowSpan="2"
              Margin="0">

            <!--<Button Content="Publish"
                    HorizontalAlignment="Left" Margin="6,0,0,6" Name="btnPublishLocation"
                    Width="468"
                    Height="72"
                    VerticalAlignment="Bottom">
                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="Click">
                        <cmd:EventToCommand Command="{Binding PublishLocationCommand}"/>
                    </i:EventTrigger>
                </i:Interaction.Triggers>
            </Button>-->

            <my:Map x:Name="map"
                    CredentialsProvider="AkCiPfQt9YM0cCkZlltdR3mnFQRkV41l4f-eXFmf3qcBBhBC-EkvD8MuazOkMnE_"
                    HorizontalAlignment="Stretch"
                    ZoomBarVisibility="Visible"
                    Margin="6,0,6,0"
                    VerticalAlignment="Stretch"
                    Center="{Binding Path=MapCenter, Mode=TwoWay}"
                    ZoomLevel="{Binding Path=MapZoom, Mode=TwoWay}"
                    AnimationLevel="Full"
                    ViewChangeEnd="map_ViewChangeEnd">
                <my:MapLayer x:Name="layerFriends">
                    <my:MapItemsControl ItemsSource="{Binding VisiblePushPins}"
                                        ItemTemplate="{StaticResource LogoTemplate}">
                    </my:MapItemsControl>
                </my:MapLayer>
                <my:MapLayer x:Name="layerMyLocation">
                    <my:MapItemsControl ItemsSource="{Binding MyLocationPushPins}">
                        <my:MapItemsControl.ItemTemplate>
                            <DataTemplate>
                                <my:Pushpin Location="{Binding Location}"
                                            Background="{StaticResource PhoneAccentBrush}"
                                            Template="{StaticResource PushpinControlTemplate1}" />
                            </DataTemplate>
                        </my:MapItemsControl.ItemTemplate>
                    </my:MapItemsControl>
                </my:MapLayer>
            </my:Map>

            <Grid  HorizontalAlignment="Right"
                   VerticalAlignment="Center"
                   Width="64">
                <Rectangle RadiusX="10"
                           RadiusY="10"
                           Fill="Black"
                           Opacity="0.3"
                           Margin="0,0,-20,0">
                </Rectangle>


                <StackPanel HorizontalAlignment="Left"
                            VerticalAlignment="Stretch">
                        <Image Source="/icons/appbar.add.rest.png"
                               Margin="0"
                               Width="64"
                               Height="64"
                               VerticalAlignment="Top"
                               HorizontalAlignment="Left">
                        <i:Interaction.Triggers>
                            <i:EventTrigger EventName="MouseLeftButtonDown">
                                <cmd:EventToCommand Command="{Binding MapZoomOutCommand}" />
                            </i:EventTrigger>
                        </i:Interaction.Triggers>
                    </Image>
                        <Image Source="/icons/appbar.minus.rest.png"
                               Margin="0"
                               Width="64"
                               Height="64"
                               VerticalAlignment="Bottom"
                               HorizontalAlignment="Left">
                        <i:Interaction.Triggers>
                            <i:EventTrigger EventName="MouseLeftButtonDown">
                                <cmd:EventToCommand Command="{Binding MapZoomInCommand}" />
                            </i:EventTrigger>
                        </i:Interaction.Triggers>
                    </Image>

                </StackPanel>
            </Grid>

        </Grid>


        <!--TitlePanel contains the name of the application and page title-->
        <Grid x:Name="TitlePanel"
              Grid.Row="0"
              Margin="0"
              Background="Black"
              VerticalAlignment="Top"
              HorizontalAlignment="Stretch"
              Opacity="0.8">
            <TextBlock x:Name="ApplicationTitle"
                       Margin="12, 12, 0, 0"
                       Text="{Binding ApplicationTitle}"
                       Foreground="{StaticResource PhoneAccentBrush}"
                       Style="{StaticResource PhoneTextNormalStyle}" />
            <Grid Margin="0,6,6,6"
                  Height="80">
                <Grid Width="80"
                      Height="80"
                      HorizontalAlignment="Right"
                      Background="Transparent"
                      Opacity="1">
                    <Image x:Name="imgMine"
                           Opacity="1"
                           Source="{Binding MyPicture, Mode=OneWay}"
                           Margin="0"
                           Stretch="Fill">
                    </Image>
                    <Border Background="{StaticResource PhoneAccentBrush}"
                            Width="80"
                            Height="25"
                            HorizontalAlignment="Stretch"
                            VerticalAlignment="Bottom"
                            BorderThickness="0"
                            Opacity="1">
                        <TextBlock x:Name="txtMyName"
                                   Style="{StaticResource PhoneTextNormalStyle}"
                                   FontSize="16"
                                   Foreground="Black"
                                   HorizontalAlignment="Left"
                                   VerticalAlignment="Center"
                                   Margin="2"
                                   Text="{Binding MyName, Mode=OneWay}"
                                   Opacity="1" />
                    </Border>
                </Grid>

                <toolkit:PerformanceProgressBar HorizontalAlignment="Left"
                                                Margin="0,0,0,0"
                                                Name="performanceProgressBar1"
                                                VerticalAlignment="Top"
                                                Height="18"
                                                Width="480"
                                                ActualIsIndeterminate="{Binding Path=IsBusy}"
                                                IsIndeterminate="{Binding Path=IsBusy}" />
            </Grid>

        </Grid>

        <Preview:BindableApplicationBar x:Name="AppBar"
                                        BarOpacity="0.8">
            <Preview:BindableApplicationBarIconButton Command="{Binding ShowMyLocationCommand}"
                                                      IconUri="/icons/appbar.location.png"
                                                      Text="{Binding AppBarTextMyLocation}"
                                                      IsEnabled="{Binding Path=IsBusy, Converter={StaticResource InvertValueConverter1}}" />
            <Preview:BindableApplicationBarIconButton Command="{Binding RefreshFriendsCommand}"
                                                      IconUri="/icons/appbar.sync.rest.png"
                                                      Text="{Binding AppBarTextRefresh}"
                                                      IsEnabled="{Binding Path=IsBusy, Converter={StaticResource InvertValueConverter1}}" />
            <Preview:BindableApplicationBarIconButton Command="{Binding PublishLocationCommand}"
                                                      IconUri="/icons/appbar.publish.png"
                                                      Text="{Binding AppBarTextPublish}" />
            <Preview:BindableApplicationBarIconButton Command="{Binding NavigateToSettingsCommand}"
                                                      IconUri="/icons/appbar.feature.settings.rest.png"
                                                      Text="{Binding AppBarTextSettings}" />

            <Preview:BindableApplicationBar.MenuItems>
                <Preview:BindableApplicationBarMenuItem  Text="{Binding AppBarTextAbout}"
                                                         Command="{Binding ShowAboutCommand}" />
            </Preview:BindableApplicationBar.MenuItems>
        </Preview:BindableApplicationBar>
    </Grid>

</phone:PhoneApplicationPage>