<%@ page language="C#" autoeventwireup="true" inherits="Forms_ZoneMaster, App_Web_t42gtr5a" %>


<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<%@ Register Src="~/UserControls/New_Header.ascx" TagName="Header" TagPrefix="uc1" %>
<%@ Register Src="~/UserControls/New_Footer.ascx" TagName="Footer" TagPrefix="uc2" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>tSense-IoT Zone Master</title>
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Page-Enter" content="blendTrans(Duration=0)" />
    <meta http-equiv="Page-Exit" content="blendTrans(Duration=0)" />
    <link href="../css/reset.css" rel="stylesheet" type="text/css" />
    <link href="../css/dropdown.css" rel="stylesheet" type="text/css" />
    <link href="../css/stylesheet2.css" rel="stylesheet" type="text/css" />
    <link href="../css/style.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="../css/jquery.jcarousel.css" />
    <link rel="stylesheet" type="text/css" href="../css/skin.css" />
    <link rel="SHORTCUT ICON" href="../images/favicon.ico" />
    <style type="text/css">
        body {
            font-family: Arial, sans serif;
            font-size: 11px;
        }

        #hand_b {
            width: 31px;
            height: 31px;
            background-image: url(http://google.com/mapfiles/ms/t/Bsu.png);
        }

            #hand_b.selected {
                background-image: url(http://google.com/mapfiles/ms/t/Bsd.png);
            }

        #placemark_b {
            width: 31px;
            height: 31px;
            background-image: url(http://google.com/mapfiles/ms/t/Bmu.png);
        }

            #placemark_b.selected {
                background-image: url(http://google.com/mapfiles/ms/t/Bmd.png);
            }

        #line_b {
            width: 31px;
            height: 31px;
            background-image: url(http://google.com/mapfiles/ms/t/Blu.png);
        }

            #line_b.selected {
                background-image: url(http://google.com/mapfiles/ms/t/Bld.png);
            }

        #shape_b {
            width: 31px;
            height: 31px;
            background-image: url(http://google.com/mapfiles/ms/t/Bpu.png);
        }

            #shape_b.selected {
                background-image: url(http://google.com/mapfiles/ms/t/Bpd.png);
            }
    </style>
    <script type="text/javascript">
        var COLORS = [["red", "#ff0000"], ["orange", "#ff8800"], ["green", "#008000"],
              ["blue", "#000080"], ["purple", "#800080"]];
        var options = {};
        var lineCounter_ = 0;
        var shapeCounter_ = 0;
        var markerCounter_ = 0;
        var colorIndex_ = 0;
        var featureTable_;
        var map;
        var polygon;
        var iconIncluded = 'http://maps.google.com/mapfiles/dd-start.png';
        var iconExcluded = 'http://maps.google.com/mapfiles/dd-end.png';

        function select(buttonId) {
            document.getElementById("hand_b").className = "unselected";
            document.getElementById("shape_b").className = "unselected";
            document.getElementById("line_b").className = "unselected";
            document.getElementById("placemark_b").className = "unselected";
            document.getElementById(buttonId).className = "selected";
        }

        function stopEditing() {
            select("hand_b");
        }

        function getColor(named) {
            return COLORS[(colorIndex_++) % COLORS.length][named ? 0 : 1];
        }

        function getIcon(color) {
            var icon = new GIcon();
            icon.image = "http://google.com/mapfiles/ms/micons/" + color + ".png";
            icon.iconSize = new GSize(32, 32);
            icon.iconAnchor = new GPoint(15, 32);
            return icon;
        }

        function startShape() {
            document.getElementById('hdnLocaltyDetails').value = '';
            select("shape_b");
            var color = getColor(false);
            polygon = new GPolygon([], color, 2, 0.7, color, 0.2);
            startDrawing(polygon, "Shape " + (++shapeCounter_), function () {
                var cell = this;
                var area = polygon.getArea();
                cell.innerHTML = (Math.round(area / 10000) / 100) + "km<sup>2</sup>";
            }, color);
        }

        function startLine() {
            select("line_b");
            featureTable_ = document.getElementById("featuretbody");

            var color = getColor(false);
            var line = new GPolyline([], color);
            //            startDrawing(line, "Line " + (++lineCounter_), function() {
            //                var cell = this;
            //                var len = line.getLength();
            //                cell.innerHTML = (Math.round(len / 10) / 100) + "km";
            //            }, color);
            if (document.getElementById('hdnDrawStatus').value == 'Yes') {
                document.getElementById('btnSaveZones').click();
            }
            document.getElementById('hdnDrawStatus').value = 'Yes';
            startShape();

        }

        function addFeatureEntry(name, color) {
            currentRow_ = document.createElement("tr");
            var colorCell = document.createElement("td");
            currentRow_.appendChild(colorCell);
            colorCell.style.backgroundColor = color;
            colorCell.style.width = "1em";
            var nameCell = document.createElement("td");
            currentRow_.appendChild(nameCell);
            nameCell.innerHTML = name;
            var descriptionCell = document.createElement("td");
            currentRow_.appendChild(descriptionCell);
            featureTable_.appendChild(currentRow_);
            return { desc: descriptionCell, color: colorCell };
        }

        function startDrawing(poly, name, onUpdate, color) {
            map.addOverlay(poly);
            poly.enableDrawing(options);
            poly.enableEditing({ onEvent: "mouseover" });
            poly.disableEditing({ onEvent: "mouseout" });
            GEvent.addListener(poly, "endline", function () {
                select("hand_b");
                var cells = addFeatureEntry(name, color);
                GEvent.bind(poly, "lineupdated", cells.desc, onUpdate);
                GEvent.addListener(poly, "lineupdated", function () {
                    setTimeout(updatePoints, 50);
                });
                GEvent.addListener(poly, "click", function (latlng, index) {
                    if (typeof index == "number") {
                        poly.deleteVertex(index);
                    } else {
                        var newColor = getColor(false);
                        cells.color.style.backgroundColor = newColor
                        poly.setStrokeStyle({ color: newColor, weight: 4 });
                    }
                });
            });
        }

        function placeMarker() {
            select("placemark_b");
            var listener = GEvent.addListener(map, "click", function (overlay, latlng) {
                if (latlng) {
                    select("hand_b");
                    GEvent.removeListener(listener);
                    var color = getColor(true);
                    var marker = new GMarker(latlng, { icon: getIcon(color), draggable: true });
                    map.addOverlay(marker);
                    var cells = addFeatureEntry("Placemark " + (++markerCounter_), color);
                    updateMarker(marker, cells);
                    GEvent.addListener(marker, "dragend", function () {
                        updateMarker(marker, cells);
                    });
                    GEvent.addListener(marker, "click", function () {
                        updateMarker(marker, cells, true);
                    });
                }
            });
        }

        function updateMarker(marker, cells, opt_changeColor) {
            if (opt_changeColor) {
                var color = getColor(true);
                marker.setImage(getIcon(color).image);
                cells.color.style.backgroundColor = color;
                markers.push(marker);
            }
            var latlng = marker.getPoint();
            cells.desc.innerHTML = "(" + Math.round(latlng.y * 100) / 100 + ", " +
  Math.round(latlng.x * 100) / 100 + ")";
        }

        // Update all markers with in poly status
        function updatePoints() {
            for (var i in markers) {
                var marker = markers[i];
                var point = marker.getLatLng();
                var inPoly = polygon.containsLatLng(point);

                if (inPoly) {
                    marker.setImage(iconIncluded);
                    var lat = marker.getLatLng().toUrlValue();
                    //alert(point);
                    //alert(document.getElementById('hdnLocaltyDetails').value);               
                    document.getElementById('hdnLocaltyDetails').value = document.getElementById('hdnLocaltyDetails').value + lat + '*';

                }
            }
        }

    </script>
    <script language="javascript" type="text/javascript" src="../js/Map_Google.js"></script>
    <script language="javascript" type="text/javascript">
        var map = null;
        function loadMap() {
            map = new GMap2(document.getElementById('map-dsply'));
            map.setCenter(new GLatLng(23.805450, 78.486328), 4);
            map.enableScrollWheelZoom();

            //            GEvent.addListener(map, 'click', function(overlay, latlng) {
            //                GetLatLng(latlng);
            //            });

        }

        //        function GetLatLng(latlng) {
        //            var marker = new GMarker(latlng);
        //            var lat = marker.getLatLng().toUrlValue();
        //            var latlg = String(lat).split(',');
        //            window.opener.document.getElementById('txtLatitude').value = latlg[0];
        //            window.opener.document.getElementById('txtlongitude').value = latlg[1];
        //        }
    </script>
    <script type="text/javascript" src="../js/jquery-1.2.3.pack.js"></script>

    <script type="text/javascript" src="../js/jquery.jcarousel.pack.js"></script>

    <script language="javascript" type="text/javascript" src="../js/MapPageScript.js"></script>

    <script src="../js/wow.min.js"></script>
</head>
<body onload="loadMap();">
    <form id="form1" runat="server">
        <asp:ScriptManager ID="scmZone" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="upZone" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <div id="container">
                    <!-- Header Starts Here -->
                    <uc1:Header ID="ucHeader" runat="server" />
                    <!-- Header Ends Here -->
                    <!-- Content Starts Here -->
                    <div id="outer">
                        <div id="inner">
                            <div id="float-wrap">
                                <!-- Main Content Starts Here -->
                                <div id="content">
                                    <div class="content-wrap">
                                        <div id="top-content">
                                            <div id="heading">
                                                <img class="icon" src="../images/configuration-icon.jpg" alt="" />
                                                <h1>Configuration</h1>
                                                <a href="Dashboard.aspx">Home</a><span>&gt;</span><span><a href="ConfigurationSetup.aspx">Zone</a></span><span>&gt;</span><span><a
                                                    href="ZoneMaster.aspx">Manage</a></span>
                                            </div>




                                            <div class="clear clearfix">
                                            </div>
                                        </div>
                                        <div class="clear clearfix">
                                        </div>
                                        <table>
                                            <tr style="vertical-align: top">
                                                <td style="width: 15em">

                                                    <table>
                                                        <tr>
                                                            <td style="display: none">
                                                                <div id="hand_b"
                                                                    onclick="stopEditing()" />
                                                            </td>
                                                            <td style="display: none">
                                                                <div id="placemark_b"
                                                                    onclick="placeMarker()" />
                                                            </td>
                                                            <td>
                                                                <div id="line_b" runat="server"
                                                                    onclick="startLine()" />
                                                            </td>
                                                            <td style="display: none">
                                                                <div id="shape_b"
                                                                    onclick="startShape()" />
                                                            </td>
                                                        </tr>
                                                    </table>

                                                    <input type="hidden" id="featuredetails" rows="2">

                                                    </input>

                                                    <table id="featuretable">
                                                        <tbody id="featuretbody"></tbody>
                                                    </table>
                                                </td>
                                                <td>
                                                    <!-- The frame used to measure the screen size -->
                                                    <div id="frame"></div>
                                                </td>
                                            </tr>
                                        </table>


                                        <asp:HiddenField ID="hdnLocaltyDetails" runat="server" />
                                        <asp:HiddenField ID="hdnDrawStatus" runat="server" />
                                        <div id="map-dsply" style="height: 380px;"></div>

                                        <asp:UpdatePanel ID="updSaveoperations" runat="server" UpdateMode="Conditional">
                                            <ContentTemplate>
                                                <div align="center" style="padding-top: 5px;">
                                                    <%--  <asp:Button ID="btnLoadEmployees" Text="Load Employees" runat="server" 
                                   onclick="btnLoadEmployees_Click" />--%>
                                                    <asp:ImageButton ID="btnLoadEmployees" runat="server" ImageUrl="~/images/CSC/btn-load-employees.jpg" OnClick="btnLoadEmployees_Click" />
                                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                           <%-- <asp:Button ID="btnLoadLocalities" Text="Load Localities" runat="server" 
                                   onclick="btnLoadLocalities_Click" />--%>
                                                    <asp:ImageButton ID="btnLoadLocalities" runat="server" ImageUrl="~/images/CSC/btn-load-localities.jpg" OnClick="btnLoadLocalities_Click" />
                                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                             <asp:Button ID="btnSaveZones" runat="server" Text="Save Zones" Style="display: none;"
                                 OnClick="btnSaveZones_Click" />
                                                    <br />
                                                </div>

                                            </ContentTemplate>
                                        </asp:UpdatePanel>

                                    </div>
                                </div>
                                <!-- Main Content Ends Here -->
                                <div id="left">
                                </div>
                                <div class="clear clearfix">
                                </div>
                            </div>
                            <div id="right">
                            </div>
                            <div class="clear clearfix">
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Content Ends Here -->
            </ContentTemplate>
        </asp:UpdatePanel>
        <uc2:Footer ID="ucFooter" runat="server" />

        <script language="javascript" type="text/javascript" src="../js/Map_Google.js"></script>
        <script language="javascript" type="text/javascript" src="../js/Clusterer2.js"></script>
        <script language="javascript" type="text/javascript" src="../js/Threading.js"></script>
        <script src="../js/myformvalidations.js" type="text/javascript"></script>
        <script src="../js/gmaps.polygon.containsLatLng.js" type="text/javascript"></script>

    </form>
</body>
<script language="javascript" type="text/javascript" src="Map_Google.js"></script>
<script type="text/javascript">

    function loadMap() {
        var map;
        map = new GMap2(document.getElementById("map-dsply"));
    }
</script>
</html>
