/upstream/templates/libraries/index.tmpl
Type: /type/template
body: value: $def with (branches=None)

$ _x = ctx.setdefault('bodyclass', 'map')

$ title = "Borrow"

$var title: $title

<div id="contentHead">
    $:render_template("borrow/navigation", path="/libraries")
    <h1>$_("Borrow eBooks")</h1>
</div>

<div id="contentBody" class="map">

<script type="text/javascript"> 
    function jumpTo(lat, lon, zoom, link) {
        var lonLat = new OpenLayers.LonLat( lon, lat)
              .transform(
                new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
                map.getProjectionObject() // to Spherical Mercator Projection
              );
        map.setCenter (lonLat, zoom);
 
        \$('.map_jump_link').css({'color':'#036DAA','text-decoration':'underline','font-weight':'normal','cursor':'pointer'});
        \$(link).css({'color':'#748D36','text-decoration':'none','font-weight':'bold','cursor':'default'});
        \$.scrollTo( \$('#contentBody'), 800);
    }
    </script>

    <div id="mapdiv"></div>
    <script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script> 
    <script type="text/javascript"> 
    map = new OpenLayers.Map("mapdiv");
    map.addLayer(new OpenLayers.Layer.OSM());
       
    var pois = new OpenLayers.Layer.Text( "My Points",
                    { location:"/libraries/locations.txt",
                      projection: map.displayProjection
                    });
    map.addLayer(pois);
 
    
    //Set start centrepoint and zoom
    //TODO: Is it possible to just zoom to extents of defined markers instead?
    
    var lonLat = new OpenLayers.LonLat(0, 0)
          .transform(
            new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
            map.getProjectionObject() // to Spherical Mercator Projection
          );
    var zoom=2;
    map.setCenter (lonLat, zoom); 

    OpenLayers.Feature.prototype.createPopup = function(closeBox){
        if(this.lonlat!=null){
            var id=this.id+"_popup";
            var anchor=(this.marker)?this.marker.icon:null;
            if(!this.popup){
                this.popup=new this.popupClass(id, this.lonlat, new OpenLayers.Size(200,100), this.data.popupContentHTML, anchor,true);
            }
            if(this.data.overflow!=null){
                this.popup.contentDiv.style.overflow=this.data.overflow;
            }
            this.popup.feature=this;
        }
        return this.popup;
    }    
    </script>

</div>

<div id="contentMeta">
    <br/>
    <h3 class="inline">Participating Libraries</h3>
    <p class="inline sansserif small">&nbsp;&nbsp;<a href="/libraries/register">Register Your Library?</a></p>
    <div class="clearfix"></div>
<script type="text/javascript">
<!--
\$(function () {
    \$(".columns").columnize({columns: 3, balance: true});
    \$(".columns .column:last").css("margin-right","0");
});
//-->
</script>

<style type="text/css">
#content .columns {
    float: left;
    width: 918px;
    margin: 20px 0;
}
#content .column {
    width: 286px;
    margin-right: 30px;
    float: left;
}
#content ul.places {
    position: relative;
    margin-bottom: 20px;
}
#content ul.places li.label {
    position: absolute; 
    top: 0; 
    left: -1.5em;
}
#content ul.places li {
    list-style: none;
    color: #999;
}
#content ul.places li .city {
    font-style: italic;
}
</style>

    <div class="columns">
        $for letter, group in branches:
        <ul class="places sansserif smallest">
            <li class="label">${letter}.</li>
            $for branch in group:
                <li>
                    <span class="name">$branch.name</span>,
                    <span class="city">$branch.city</span>
                </li>
        </ul>
    </div>

</div>
plugin: openlibrary
title: /libraries page
m: edit