<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Leaflet Preview</title>
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.1/leaflet.css" />
    <script src="http://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.1/leaflet.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
    <style>
        html {
            height: 100%;
        }
        body {
            margin: 0;
            padding: 0;
            height: 100%;
        }
        h4 {
            margin: 0;
        }
        select {
            font-size: 1.2em;
        }
        #Map {
            position: absolute;
            top:36px;
            left:0;
            bottom:0;
            right:0;
            border-top: 2px solid #AAA;
        }
        #Legend {
            position: absolute;
            z-index: 1000;
            bottom: 24px;
            right: 10px;
        }
        .leaflet-container img.leaflet-image-layer {
            max-width: none !important;
        }
        .box {
            background: #FFF;
            background: rgba(255, 255, 255, 0.95);
            border: 4px solid #FFF;
            border-color: rgba(255, 255, 255, 0.2);
            box-shadow: 0 0 15px rgba(0,0,0,0.5);
            border-radius: 6px;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div style="padding: 8px 10px;">
        <label>Layer: </label>
        <select id="Selector"></select>
        <label style="margin-left: 20px;">Transparency: </label>
        <input id="Transparency" type="range" min="0" max="100" step="10" value="0" style="vertical-align: middle;"/>
    </div>
    <div id="Map"></div>
    <div id="Legend" class="box">
        <h4></h4>
        <img src="" />
    </div>
    <script>

        var number_regex = /\d+/;

        var basemap = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer/tile/{z}/{y}/{x}', {
            attribution: 'Tiles &copy; Esri &mdash; Source: USGS, Esri, TANA, DeLorme, and NPS',
            maxZoom: 13
        });

        var reference = L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/toner-hybrid/{z}/{x}/{y}.png', {
            attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
            subdomains: 'abcd',
            maxZoom: 20
        });

        var map = L.map('Map', {layers: [basemap, reference]});

        var layers = {{ layers }};
        var rawVariables = d3.set({{ raw_variables }});
        var tree = {{ tree }};

        var layer = new L.imageOverlay('', {{ bounds }});
        setVariable(tree[0][0]);
        layer.addTo(map);
        map.fitBounds(layer);

        var selector = d3.select('#Selector');
        selector.selectAll('option')
            .data(tree).enter()
            .append('option')
            .attr('value', function(d){return d[0]})
            .html(function(d){
                    prefix = '';
                    for (var i=0; i<d[1]; i++){
                        prefix += '--'
                    }
                    return ((prefix)? '|' + prefix + ' ': '') + d[0];
                });

        selector.on('change', function() {
            setVariable(d3.select('#Selector').property('value'));
        });

        d3.select('#Transparency').on('change', function(){
            layer.setOpacity((100 - parseInt(d3.select('#Transparency').property('value'))) / 100.0);
        });

        function setVariable(layerKey){
            layer.setUrl(layers[layerKey]);

            var legendNode = d3.select('#Legend');
            var legendImage = legendNode.select('img');
            legendNode.select('h4').text(layerKey);
            if (rawVariables.has(layerKey)){
                legendImage.attr('src', layerKey + '_legend.png');
            }
            else {
                legendImage.attr('src', 'fuzzy_legend.png');
            }
        }
    </script>
</body>
</html>