wad

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
    <script src="http://maps.google.com/maps/api/js?sensor=false&language=pl"></script>
    <script src="gmap/gmap3.min.js"></script>
    <title>Hello World</title>
    <script>

        var kolory = "#000000";
        var tab = []; // tablica z lokalizacjami
        var imie;
        var nazwy = [];
        var bstreet = false;
        var pzserw = false;
        $(document).on("pageinit", "#startowa", function () {
            $("#startbt").click(function () {
                imie = $("#username").val();
                window.location = "#calosc";
            });
        });

        $(document).on("pageinit", "#calosc", function () {

            var x, y, z;

            y = 0;
            x = 0;
            z = 5;
            var idmark = 1;
            var licz = 0;
            $("#mark").on("click", ".centr", function () {
                var index = $(this).parents('li').index();
                $('#mapDiv').gmap3({
                    map: {
                        options: {
                            center: [tab[index].szer, tab[index].dl],
                            zoom: tab[index].prz,
                            disableDefaultUI: true
                        },
                    },
                    marker: {
                        latLng: [tab[index].lat, tab[index].lng],
                        id: [tab[index].id]
                    }
                });

            });
            $("#kasujWszystko").click(function () {
                $("#mapDiv").gmap3({
                    clear: 'marker'
                });
                $("#mapDiv").gmap3({
                    clear: 'polyline'
                });
                $("#mark *").remove();
                idmark = 1;
            });
            $("#obecnaPozycja").click(function () {
                var geoOptions = {
                    maximumAge: 3000,
                    timeout: 5000,
                    enableHighAccuracy: true
                }
                function onGeoSuccess(position) {
                    console.log("success");
                    Longitude = position.coords.longitude;
                    Latitude = position.coords.latitude;
                    $("#mapDiv").gmap3({
                        clear: 'getLocationMarker'
                    })
                    $('#mapDiv').gmap3({
                        map: {
                            options: {
                                center: [Latitude, Longitude],
                                zoom: 5,
                            },
                        },
                        marker: {
                            latLng: [Latitude, Longitude],
                            id: 'getLocationMarker'
                        }
                    });
                }
                navigator.geolocation.getCurrentPosition(onGeoSuccess);
            });
            $("#quit").click(function () {
                navigator.app.exitApp();
            });

            $("#popupek").on("click", ".kol", function () {
                var index = $(this).index();
                for (var i = 0; i <= 9; i++) {
                    var qolr = $("#kol" + i);
                    $(qolr).height("50px");
                    $(qolr).width("50px");

                    $(qolr).css("border", "");
                }
                $(this).height($(this).height() - 8);
                $(this).width($(this).width() - 8);
                this.style.border = "4px solid #FFFF00";
                // alert(index);
                index = parseInt(index);
                if (index == 0) {
                    kolory = "#FF0000";


                }
                else if (index == 1)
                {
                    kolory = "#000000";

                }
                else if (index == 2) {
                    kolory = "#0000FF";
                }
                else if (index == 3) {
                    kolory = "#FF7F50";
                }
                else if (index == 4) {
                    kolory = "#006400";
                }
                else if (index == 5) {
                    kolory = "#228B22";
                }
                else if (index == 6){
                    kolory = "#FFFFF0";
            }
                else if (index == 7) {
                    kolory = "#BA55D3";
                }
                else if (index == 8) {
                    kolory = "#FF4500";
                }
            });

            $("#zapisz").click(function () {
                localStorage.setItem("markery", JSON.stringify(tab));
            });
            $("#wczytaj").click(function () {
                if (localStorage.getItem("markery") != null && localStorage.getItem("markery") != undefined) {
                    tab = JSON.parse(localStorage.getItem("markery"));
                    for (var i = 0; i < tab.length; i++) {
                        $("#mark").append("<li><a class='centr'>Marker " + idmark + "</a><a class='del' data-icon='delete' id='" + tab[i].id + "'></a></li>");
                        $("#mapDiv").gmap3({
                            marker: {
                                options: {
                                    draggable: false,
                                },
                                id: tab[i].id,
                                latLng: [tab[i].szer, tab[i].dl],
                                zoom: tab[i].prz
                            }
                        });
                        idmark++;
                    }
                    $("#mark").listview('refresh');

                }
            });
            function zmiana() {

                x = $("#input1").val();
                y = $("#input2").val();
                z = $("#input3").val();
                $("#mapDiv").gmap3({
                    map: {
                        options: {
                            center: [parseInt(x), parseInt(y)],
                            zoom: parseInt(z)


                        }
                    }
                })
            }

            $(".inp").change(function () { zmiana() });
            $("#mapDiv").width("100%");
            $("#mapDiv").height($(window).height());

            $("#streetDiv").width("100%");
            setTimeout(function () {

                $("#mapDiv").gmap3({
                    map: {
                        options: {
                            center: [x, y],
                            zoom: 5,
                            disableDefaultUI: true,
                            disableDoubleClickZoom: true

                        },
                        events: {
                            click: function (map, event) {
                                console.log("CLICK");
                                var x = event.latLng.lat();
                                var y = event.latLng.lng();
                                var z = map.getZoom();
                                if (bstreet == false) {
                                    $("#mark").append("<li><a class='centr'>Marker " + idmark + "</a><a class='del' data-icon='delete' id='mark" + idmark + "'></a></li>");
                                    $("#mark").listview('refresh');
                                    $("#mapDiv").gmap3({
                                        marker: {
                                            options: {
                                                draggable: false,
                                            },
                                            id: "mark" + idmark,
                                            latLng: [x, y],
                                            zoom: parseInt(z)
                                        }

                                    });
                                    idmark += 1;

                                    tab.push({ szer: x, dl: y, prz: z, id: "mark" + idmark });     // dodanie pierwszego obiektu na początek tablicy
                                    // alert(tab[licz].szer);
                                    licz += 1;
                                }
                                else {
                                    $("#mapDiv").gmap3({
                                        streetviewpanorama: {

                                            options: {
                                                container: $("#streetDiv"),
                                                opts: {
                                                    position: [x, y],
                                                    pov: {
                                                        heading: 4,
                                                        pitch: 5,
                                                        zoom: 1
                                                    }
                                                },

                                            }
                                        }


                                    });
                                  }

                            }
                        }
                    }
                });
                $("#mapDiv").css("overflow", "visible");
            }, 500);
        $("#checkbox1").change(function(){
            if (bstreet == false) {
                bstreet = true;
                $("#mapDiv").height($(window).height() / 2);
                $("#streetDiv").height($(window).height() / 2);
            }
            else {
                bstreet = false;
                $("#mapDiv").height($(window).height());
                $("#streetDiv").height(0);
            }
        });
            /*   $("#mapDiv").gmap3({
                   map: {

                       events: {
                           click: function (map, event) {
                               console.log(event.latLng.lat());
                               console.log(event.latLng.lng());
                               console.log(map.getZoom());
                               console.log(map.getCenter());
                                $("#input1").change(functio
                                 $("#input2").change(functio
                           }
                       }
                   }
               })*/

            $("#mark").on("click", ".del", function () {
                var markers = $("#mapDiv").gmap3({
                    get: {
                        name: 'marker',
                        all: true
                    }
                });

                var w = $(this).prop("id");
                var index = $(this).parents('li').index();
                tab.splice(index, 1);
                $("#mapDiv").gmap3({
                    clear: {
                        id: w
                    }
                });
                $(this).parent().remove();

            });

            $("#rysujtrase").click(function () {
                var markerArray = [];
                //pobranie wszystkich markerow z mapy
                var markers = $("#mapDiv").gmap3({
                    get: {
                        name: 'marker',
                        all: true
                    }
                });

                //dla kazdego markera do tablicy wrzucasz jego pozycje latLng
                for (var i = 0; i < markers.length; i++) {
                    markerArray.push(markers[i].getPosition());
                }
                $("#mapDiv").gmap3({
                    polyline: {
                        options: {
                            strokeColor: kolory,
                            strokeOpacity: 0.8,
                            strokeWeight: 2,
                            path: markerArray
                        }
                    }
                })
            });
            ////////////////////////////////////////////////////////////////////

            $("#wyslij").click(function () {
                // loader
                ostatnia_data = new Date().toLocaleTimeString()

                $.mobile.showPageLoadingMsg();

                //upraszczam to co wysylam
                var sendTab = [];
                sendTab.push(imie);
                sendTab.push(ostatnia_data);
                sendTab.push(kolory);
                for (var i = 0; i < tab.length; i++) {
                    sendTab.push([tab[i].szer, tab[i].dl, tab[i].prz]);
                }
                //alert(JSON.stringify(sendTab));
                var sendObj = {
                    trasa: JSON.stringify(sendTab)
                }
                //jak wysylamy - AJAX
                $.ajax({
                    type: "POST",
                    url: "ZapisPliku.aspx",
                    data: sendObj,
                    dataType: "text",
                    success: function (response) {
                        $.mobile.hidePageLoadingMsg();
                        alert(response);
                    },
                    error: function (xhr) {
                        alert(xhr.responseText);
                    }
                });
            });

            $("#pobierz").click(function () {
                if (pzserw == false) {
                    pzserw = true;
                var markerArray = [];
                trips = [];

                function onSuccess(response) {
                    allTripsOnServer = JSON.parse(response);

                    for (var i = 0; i < allTripsOnServer.length; i++) {
                        trips.push(allTripsOnServer[i].slice(3, allTripsOnServer[i].length));
                        nazwy.push(allTripsOnServer[i].slice(0, 3));
                        $("#serw").append("<li ><a class='klikserwer'>" + nazwy[i] + "</a></li>");
                        $("#serw").listview('refresh');
                    }
                    for (var i = 0; i < trips.length; i++) {
                        markerArray.push([trips[i][0][0], trips[i][0][1]]);
                    }
                }
                $.ajax({
                    type: "POST",
                    url: "ReadTrips.aspx",
                    dataType: "text",
                    success: onSuccess,
                    error: function (xhr) {
                        alert(xhr.responseText);
                    }
                });

                }
            });


            ////////////////////////////////////////////////////////////////////


            $(document).on("click", ".klikserwer", function () {
                $("#mapDiv").gmap3({
                    clear: 'marker'
                });
                $("#mapDiv").gmap3({
                    clear: 'polyline'
                });
                var _this = this;
                while ($(_this).prop("tagName") != "LI") {
                    _this = $(_this).parent();
                }
                var indeks = $(_this).index();
                var color = nazwy[indeks][2];
                $("#mapDiv").gmap3({


                    polyline: {
                        options: {
                            strokeColor: color,
                            strokeOpacity: 0.5,
                            strokeWeight: 4,
                            path: trips[indeks]
                        }

                    },
                    autofit: { }
                });

                for (var i = 0; i < trips[indeks].length; i++) {
                    $("#mapDiv").gmap3({
                        marker: {
                            options: {
                                draggable: false,
                            },
                            latLng: [trips[indeks][i][0], trips[indeks][i][1]],
                            zoom: parseInt(trips[indeks][i][2])
                        }

                    });
                }

            });


            ///////////////////////////////////////////////////////////////////////
        });


    </script>
    <style>
        #mapDiv {
            width: 100%;
        }
        #h1 {
            text-align: center;
            margin: 0 auto;
            float: left;
        }

        .ui-content {
            padding: 0px;
        }

        #popupek {
            width: 290px;
            height: 300px;
            margin: 0auto;
        }

        #kol2 {
            width: 50px;
            height: 50px;
            background: black;
            margin: 20px;
            float: left;
        }

        #kol1 {
            width: 50px;
            height: 50px;
            background: red;
            margin: 20px;
            float: left;
        }

        #kol3 {
            width: 50px;
            height: 50px;
            background: blue;
            margin: 20px;
            float: left;
        }

        #kol4 {
            width: 50px;
            height: 50px;
            background: #FF7F50;
            margin: 20px;
            float: left;
        }

        #kol5 {
            width: 50px;
            height: 50px;
            background: #006400;
            margin: 20px;
            float: left;
        }

        #kol6 {
            width: 50px;
            height: 50px;
            background: #228B22;
            margin: 20px;
            float: left;
        }

        #kol7 {
            width: 50px;
            height: 50px;
            background: #FFFFF0;
            margin: 20px;
            float: left;
        }

        #kol8 {
            width: 50px;
            height: 50px;
            background: #BA55D3;
            margin: 20px;
            float: left;
        }

        #kol9 {
            width: 50px;
            height: 50px;
            background: #FF4500;
            margin: 20px;
            float: left;
        }

        #startowa img {
            width: 25%;
            margin-left: 37.5%;
            margin-right: 37.5%;
        }
        .ww {
            float:left;

        }
        #pobierz {
            position:absolute;
            top:3px;
            right:50px;

        }
        #checkbox1 {
        text-align:center;
        }
    </style>
</head>
<body>
    <div id="startowa" data-role="page">
        <img src="sitemap.png" />
        <input type="text" value="Wpisz imie" id="username" />
        <button id="startbt">Wyslij</button>
    </div>


    <div id="calosc" data-role="page">
        <div data-role="header">
            <h1>mapa GOOGLE</h1>
            <a href="#mypanel" class="ww"><img src="lista.png" id="lista" /></a>
            <a href="#popupek" data-rel="popup" class="ww"><img src="color.png" /></a>
             <a href="#panel2"id="pobierz" class="ww"><img src="jd2.png" /></a>
        </div>
        <div data-role="content">
            <div id="mapDiv">
            </div>
            <div id="streetDiv">
            </div>


        </div>
        <div data-role="panel" id="mypanel">
            <ul data-role="listview" id="mark"></ul>
            <br />
            <input type="range" id="input1" class="inp" value="0" min="-90" max="90" step="1" />
            <input type="range" id="input2" class="inp" value="0" min="-180" max="180" step="1" />
            <input type="range" id="input3" class="inp" value="5" min="1" max="15" step="1" />
            <label> StreetView <input type="checkbox" name="checkbox" id="checkbox1"/></label>
            <button id="rysujtrase">Rysuj trasę</button>
            <button id="zapisz">Zapamiętaj dane</button>
            <button id="wczytaj">Wczytaj dane</button>
            <button id="wyslij">Wyślij na serwer</button>

            <button id="kasujWszystko">Kasuj wszystko</button>
            <button id="obecnaPozycja">Obecna pozycja</button>
            <button id="quit">Wyłącz aplikacje</button>
        </div>

        <div data-role="panel" id="panel2">
             <ul data-role="listview" id="serw"></ul>

        </div>


        <div id="popupek" data-role="popup">
            <div id="kol1" class="kol"></div>
            <div id="kol2" class="kol"></div>
            <div id="kol3" class="kol"></div>
            <div id="kol4" class="kol"></div>
            <div id="kol5" class="kol"></div>
            <div id="kol6" class="kol"></div>
            <div id="kol7" class="kol"></div>
            <div id="kol8" class="kol"></div>
            <div id="kol9" class="kol"></div>
        </div>
    </div>


    <!-- <script type="text/javascript" src="cordova.js"></script>-->
</body>
</html>