<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<TDXWeb.ViewModel.MapViewModel>" %>

<asp:Content ID="Content" ContentPlaceHolderID="MainContent" runat="server">

    <script type="text/javascript" src="pathTo/OpenLayers.js"></script>
    <script type="text/javascript" src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>

    <script type="text/javascript">

        function initializeMap()
        {
            var lat = 47.496792
            var lon = 7.571726
            var zoom = 13

            var map;
            /* Create Map */

            // Create a map with some default values that will be altered later
            map = new OpenLayers.Map (document.getElementById(
            "map_canvas"), {
                controls:[
                    new OpenLayers.Control.Navigation(),
                    new OpenLayers.Control.PanZoomBar(),
                    new OpenLayers.Control.LayerSwitcher(),
                    new OpenLayers.Control.Attribution()],
                maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
                maxResolution: 156543.0399,
                numZoomLevels: 19,
                units: 'm',
                projection: new OpenLayers.Projection("EPSG:900913"),
                displayProjection: new OpenLayers.Projection("EPSG:4326")
            } );

            // Define the map layer
            // Here we use a predefined layer that will be kept up to date with URL changes
            layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
            map.addLayer(layerMapnik);
            layerCycleMap = new OpenLayers.Layer.OSM.CycleMap("CycleMap");
            map.addLayer(layerCycleMap);
            layerMarkers = new OpenLayers.Layer.Markers("Markers");
            map.addLayer(layerMarkers);

            var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
            map.setCenter(lonLat, zoom);

            var size = new OpenLayers.Size(21, 25);
            var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
            var icon = new OpenLayers.Icon('http://www.openstreetmap.org/openlayers/img/marker.png',size,offset);
            layerMarkers.addMarker(new OpenLayers.Marker(lonLat,icon));

            $('#map_canvas').resizable();
        }
    </script>

    <script type="text/javascript">
        $(document).ready(function() {

            initializeMap();

        });
    </script>
    <div class="formitemmap">
    <h3>Karta</h3>

    <div class="text">Här kan du se dina fordon. Välj vilka du vill ska visas på kartan.</div>

    <div id="map_canvas" style="min-width: 1050px; min-height: 1050px; float:left;"></div>

    <% using (Html.BeginForm("DisplayClientMap", "Map", FormMethod.Post))
    {%>
        <% if (Model != null && Model.Vehicles != null)
            {  %>

                <%= Html.Grid(Model.Vehicles)
                        .Columns(column =>
                        {
                            column.For(v => v.UnitNumber).Named("Enhet");
                            column.For(v => Html.CheckBoxFor(v2 => v.Display)).Named("Visa");
                            column.For(v => Html.HiddenFor(v2 => v.UnitNumber)).Attributes(style => "display: none;").HeaderAttributes(style => "display: none;");
                        })
                                .Empty("Hittade inga enheter.")
                %>


                <% if (Model.VehiclesHasNoGeoData != null && Model.VehiclesHasNoGeoData.Count > 0)
                   { %>
                       <div class="text" style="display: block; font-size: x-small; font-weight:bold">&nbsp;GPS-positioner saknas för: </div>
                        <% foreach (int radioNumber in Model.VehiclesHasNoGeoData)
                            { %>
                                <div class="text" style="display: list-item; font-size: x-small; color:Red; font-weight:bold">&nbsp;<%: radioNumber%> </div>
                        <% } %>
                <% } %>


                <% if (Model.VehiclesNotFound != null && Model.VehiclesNotFound.Count > 0)
                   { %>
                        <div class="text" style="display: block; font-size: x-small;"> Följande enheter hade ingen match i databasen: </div>
                        <% foreach (int radioNumber in Model.VehiclesNotFound)
                            { %>
                                <div class="text" style="display: list-item; font-size: x-small;"> <%: radioNumber%> </div>
                        <% } %>
                <% } %>


                <% if (Model.Vehicles.Count() > 0)
                    { %>
                        <input type="submit" style="margin-top:20px;"  id="Submit_button" value="Visa enheter" />
                <% } %>
        <% } %>
    <% } %>
    </div>

</asp:Content>