<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Pintura</title>

    <!--
    https://developers.google.com/speed/libraries/
    links: https://connieguan.github.io/YellowCow/
                NOTE:
                this map.html is for prototyping front-end,
                server map page is in view/map.hbs which uses handlebars template
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
    <link rel="stylesheet" type="text/css" href="css/styles.css" />
    <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</head>
<body>

    <div class="navbar navbar-default" role="navigation">
       <div class="container">
         <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavBar">
           <span class="sr-only">Toggle navigation</span>
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
         </button>
       </div>
       <div class="collapse navbar-collapse" id="myNavBar">
         <ul class="nav navbar-nav">
           <li><a href="index.html">Pintura Catalog</a></li>
           <li class="active"><a href="#">Map</a></li>
           <li><a href="posts.html">Post A Pintura!</a></li>
           <li><a href="#">Help</a></li>
           <li><a href="#">Log Out</a></li>
         </ul>
       </div>
     </div>
    </div>

    <h1>Pintura Map</h1>
    <br>
    <br>
    <div id="map" style="height: 500px; width: auto;"></div>
</body>

<script>

    /*
    //Back button
    function goBack() {
        window.history.back();
    }
    */


    // initialize the map
    var ucsd_coor = [32.87822, -117.24152];
    var graf_coor = [32.87851, -117.24187];
    var map = L.map('map',{
        center: graf_coor,     // at UCSD
        zoom: 20
    });
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);
    let marker = L.marker(ucsd_coor).addTo(map);
    var polygon = L.polygon([
        [32.882, -0.08],
        [32.822, -0.06],
        [32.892, -0.047]
    ]).addTo(map);
    var circle = L.circle(ucsd_coor, {
        color: 'red',
        fillColor: '#f03',
        fillOpacity: 0.5,
        radius: 70
    }).addTo(map);
    marker.bindPopup("<b>Current Location</b>").openPopup();
    var popup = L.popup()
        .setLatLng([32.88070, -117.23685])
        .setContent("I am a standalone popup.")
        .openOn(map);
    var popup = L.popup();
    var LeafIcon = L.Icon.extend({
        options: {
            shadowUrl: 'leaf-shadow.png',
            iconSize:     [38, 95],
            shadowSize:   [50, 64],
            iconAnchor:   [22, 94],
            shadowAnchor: [4, 62],
            popupAnchor:  [-3, -76]
        }
    });
    var greenIcon = new LeafIcon({iconUrl: 'leaf-green.png'}),
        redIcon = new LeafIcon({iconUrl: 'leaf-red.png'}),
        orangeIcon = new LeafIcon({iconUrl: 'leaf-orange.png'});
//    var customPopup = "Mozilla Toronto Offices<br/>" +
//        "<img src='http://joshuafrazier.info/images/maptime.gif' alt='maptime logo gif' width='350px'/>";
//    var imgSrc = 'http://joshuafrazier.info/images/maptime.gif';
    var imgSrc = 'http://inthesetimes.com/images/articles/trump_flicker_face_yess.jpg';
//    var cusImg = $("p").text('sadfadsfasd').append('</br>').$("img").attr('src', imgSrc);
    var imgPop = $('<img class="popup" src="'+imgSrc+'" />');
    var btnUpVote = $('<input type="button" value="Upvote"/>');
    var btnDnVote = $('<input type="button" value="Downvote"/>');
    var customPopup = $("<div></div>").html( "asdasdsadas</br>asdsafas" )
        .append( imgPop )
        .append(btnUpVote)
        .append(btnDnVote);
//    var customPopup = document.createElement("img").attr('src', imgSrc);
    var customOptions = {
            'maxWidth': '500',
            'className' : 'custom'
    };
    L.marker(graf_coor, {icon: greenIcon}).bindPopup("<b>Graffiti Location</b>")
            .addTo(map);
    function onMapClick(e) {
    }
    map.on('click', onMapClick);

</script>


</html>