{% extends "base.html" %}

{% block fulltitle %}EBPUB{% endblock %}

{% block extrahead %}
<script>
    $j(window).ready(function() {
        var options = {
            projection: new OpenLayers.Projection("EPSG:900913"), // meters
            displayProjection: new OpenLayers.Projection("EPSG:4326"), // lon/lat
            units: "m",
            numZoomLevels: 19,
            // Max boundaries = whole world.
            maxResolution: 156543.03390625,
            maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34)
        };

        var map = new OpenLayers.Map("detailmap", options);
        var osm = new OpenLayers.Layer.WMS("OpenStreetMap", "http://maps.opengeo.org/geowebcache/service/wms", {
            layers: "openstreetmap",
            format: "image/png",
            bgcolor: '#A1BDC4'
        }, {
            wrapDateLine: true
        });
        var result_layer = new OpenLayers.Layer.Vector();
        map.addLayer(osm);
        map.addLayer(result_layer);
        var default_map_center = new OpenLayers.LonLat(-71.061667, 42.357778);
        var default_map_zoom = 12;

        default_map_center.transform(map.displayProjection, map.projection);
        map.setCenter(default_map_center, default_map_zoom);

        var select_result = function(result) {
            var r = $j(result).closest('table');
            $j('.geotagger_result').removeClass('selected_result');
            r.addClass('selected_result');

            var reslat = parseFloat(r.find('tr.location span').first().text())
            var reslon = parseFloat(r.find('tr.location span').last().text())

            var pt = new OpenLayers.Geometry.Point(reslon, reslat);
            pt.transform(map.displayProjection, map.projection);
            result_layer.removeFeatures(result_layer.features);
            result_layer.addFeatures([new OpenLayers.Feature.Vector(pt)]);

            var new_center = new OpenLayers.LonLat(reslon, reslat);
            new_center.transform(map.displayProjection, map.projection);
            map.setCenter(new_center, 16);
        };

        var select_none = function() {
            map.setCenter(default_map_center, default_map_zoom);
            result_layer.removeFeatures(result_layer.features);
        };

        $j('.geotagger_result').live('click', function(evt) {
            evt.preventDefault();
            select_result(evt.target);
        });
       
        $j('#geotagger').submit(function(evt) {
            var the_form = $('#geotagger'); 
            evt.preventDefault();
            $j.ajax({url: the_form.attr('action'), 
                    type: the_form.attr('method'),
                    data: the_form.serialize(),
                    dataType: 'json',
                    success: function(data, status, req) {
                       $j('#raw_result').text(req.responseText);
                       var results = $j('#results');
                       results.html('');
                       for (var i = 0 ; i < data.locations.length; i++) {
                            var result = data.locations[i];
                            var result_html = '<table class="geotagger_result">';
                            if (result.type) {
                                result_html += "<tr><td>Type</td><td>" + result.type + "</td></tr>"
                            }
                            if (result.name) {
                                result_html += "<tr><td>Name</td><td>" + result.name + "</td></tr>"
                            }
                            if (result.address) {
                                result_html += "<tr><td>Address</td><td>" + result.address + "</td></tr>"
                            }
                            if (result.city) {
                                result_html += "<tr><td>City</td><td>" + result.city + "</td></tr>"
                            }
                            if (result.state) {
                                result_html += "<tr><td>State</td><td>" + result.state + "</td></tr>"
                            }
                            if (result.zip) {
                                result_html += "<tr><td>Zip</td><td>" + result.zip + "</td></tr>"
                            }
                            if (result.latlng) {
                                result_html += '<tr class="location"><td>Location</td><td><span>' + result.latlng[0] + '</span>,<span>' + result.latlng[1] + "</span></td></tr>"
                            }
                            result_html += "</table>"
                            results.append(result_html);
                       }

                       if (data.locations.length > 0) {
                           select_result($j('.geotagger_result').get(0));
                       }
                       else {
                           select_none();
                       }
                   }});
       });
    });
</script>
{% endblock %}

{% block content %}
<style type="text/css">
#detailmap { width: 450px; height: 350px }
.selected_result {
    background-color: #dfdfff;
}
#leftpanel { float: left; }
#rightpanel { float: right; padding-bottom: 10px; }
</style>


<div id="leftpanel">    
    <div id="results"></div>
    <form id="geotagger" action="/api/geotag/" method="POST">
        <div>
            <textarea name="q" rows="10" cols="40"></textarea>
        </div>
        <input type="submit" value="GeoTag Text"/>
    </form>
</div>


<div id="rightpanel">
    <div id="detailmap"></div>

    <h2>Raw Result</h2>
    <pre id="raw_result" style="background-color: #DDD">
    </pre>
</div>


{% endblock %}
