@{
    ViewBag.Title = "Home Page";
}
<link href="~/Content/Site.css" rel="stylesheet" />
<link href="~/Content/chosen.min.css" rel="stylesheet" />
<script src="~/Scripts/chosen.jquery.min.js"></script>
<script src="~/Scripts/place-map.js"></script>
<script src="http://www.skypeassets.com/i/scom/js/skype-uri.js"></script>

<div id="map"></div>
@*Select list odpowiedzialny za miasta.*@
<div style="position:fixed; right:10px; top:5px;">
    <label style="position:relative;">
        <select style="width:350px;" id=listOfCities class="mySelect">
            <option value="Wrocław" selected>Wrocław</option>
            <option value="Gdańsk">Gdańsk</option>
            <option value="Rzeszów">Rzeszów</option>
        </select>
    </label>
</div>
@*Select list odpowiedzialny za ludzi.*@
<div style="position:fixed; left: 12px; top: 5px;">
    <label style="position:relative;">
        <select style="width:350px;" id=listOfPeople class="mySelect" data-placeholder="Search...">
            <option value="0"></option>
        </select>
    </label>
</div>

@*Tooltip informacyjny.*@
<div id="tooltip_info">
    <div id="tooltip_info_inner"></div>
    <a id="mail_button" href="mailto:default@mail.com"
       class="btn btn-info"
       role="button"></a>
    <a id="skype_chat_button" href="sip:default@mail.com"
       rel="nofollow"
       class="btn btn-info"
       role="button"></a>
</div>
@*Tooltip wyswietlany przy tworzeniu pina.*@
<div id="tooltip_submit">
    <div>
        <label style="position:relative;">
            <select style="width:350px;" id=listOfAll class="mySelect" data-placeholder="Search...">
                <option value="0"></option>
            </select>
        </label>
        <button id="tooltip_button" type="button" onclick="return submitChange()">Submit</button>
    </div>
</div>



<script>
    var RPaper;
    var imgSrc = '/img/PGS Klecińska Wrocław_10.08.2015_korekta BHP-1.png';
    var pinData = [];
    //=============================================================================
    // Getting pin's data and map creation.
    $(document).ready(function () {
        var d = document.getElementById("tooltip_info");
        d.style.display = "none";
        d = document.getElementById("tooltip_submit");
        d.style.display = "none";
        $.getJSON('/api/Pins')
            .done(function (data) {
                pinData = data;
                window.RPaper = $("#map").pgsMap(pinData, "Wrocław");
                RPaper.loadLocation("Rzeszów", '/img/Rzeszów I.png');

                $('#listOfPeople')
                    .chosen({ no_results_text: "Oops, nothing found!", allow_single_deselect: false })
                    .change(function (e, params) {
                        RPaper.zoomToAlias(params.selected, 2);
                    });
                $('#listOfCities')
                    .chosen({ no_results_text: "Oops, nothing found!", disable_search_threshold: 10 })
                    .change(function (e, params) {
                        RPaper.hideAndRemove();
                        //RPaper.remove();
                        $('#listOfPeople').empty();
                        if (params.selected == "Wrocław")
                            imgSrc = '/img/PGS Klecińska Wrocław_10.08.2015_korekta BHP-1.png';
                        if (params.selected == "Gdańsk")
                            imgSrc = '/img/Gdańsk.png';
                        if (params.selected == "Rzeszów")
                            imgSrc = '/img/Rzeszów I.png';
                        window.RPaper.loadLocation(params.selected, imgSrc);
                    });
                $('#listOfAll')
                    .chosen({ no_results_text: "Oops, nothing found!", allow_single_deselect: false })
                    .change(function (e, params) {
                        RPaper.updatePhoto(params.selected);
                        RPaper.updateChosen(params.selected);
                    });

            });
        //window.RPaper = $("#map").pgsMap(pinData, "Wrocław");
        //RPaper.loadLocation("Rzeszów", '/img/Rzeszów I.png');
        $.getJSON('/api/Employees')
        .done(function (data) {
            // On success, 'data' contains a dict of employees.
            $.each(data, function (key, item) {
                var opt = document.createElement('option');
                opt.value = item;
                opt.innerHTML = key;
                $('#listOfAll').append(opt);
                $('#listOfAll').trigger('chosen:updated');
            });
        });
    });
    //=============================================================================
    // Tworzenie select list.
    //$('#listOfPeople')
    //    .chosen({ no_results_text: "Oops, nothing found!", allow_single_deselect: false })
    //    .change(function (e, params) {
    //        RPaper.zoomToAlias(params.selected, 2);
    //    });
    //$('#listOfCities')
    //    .chosen({ no_results_text: "Oops, nothing found!", disable_search_threshold: 10 })
    //    .change(function (e, params) {
    //        RPaper.hideAndRemove();
    //        //RPaper.remove();
    //        $('#listOfPeople').empty();
    //        if (params.selected == "Wrocław")
    //            imgSrc = '/img/PGS Klecińska Wrocław_10.08.2015_korekta BHP-1.png';
    //        if (params.selected == "Gdańsk")
    //            imgSrc = '/img/Gdańsk.png';
    //        if (params.selected == "Rzeszów")
    //            imgSrc = '/img/Rzeszów I.png';
    //        window.RPaper.loadLocation(params.selected, imgSrc);
    //    });
    //$('#listOfAll')
    //    .chosen({ no_results_text: "Oops, nothing found!", allow_single_deselect: false })
    //    .change(function (e, params) {
    //        RPaper.updatePhoto(params.selected);
    //        RPaper.updateChosen(params.selected);
    //    });
    //$("#listOfPeople").chosen().change(function (e, params) {
    //    // params.selected and params.deselected will now contain the values of the
    //    // or deselected elements.
    //    console.log(params.selected);
    //});
</script>