{% extends '_base.html' %}{% load humanize partition staticfiles %}

{% block head_title %}{{ block.super }}: Making Census Data Easy to Use{% endblock %}
{% block head_meta_description %}{{ HURUMAP.name }} provides useful facts about places in {{ root_geo.name }}. Compare places using tables and maps, download data, and embed charts on your site!{% endblock %}
{% block body_id %}homepage{% endblock %}

{% block head_css_extra %}
<link rel="stylesheet" href="{% static 'css/vendor/leaflet-0.6.4.css' %}" />
<!--[if lte IE 8]>
    <link rel="stylesheet" href="{% static 'css/vendor/leaflet-0.6.4.ie.css' %}" />
<![endif]-->
<link href="{% static 'css/vendor/leaflet.label.css' %}" rel="stylesheet" />
{% endblock %}

{% block content_container %}

{% block place_finder %}
<div class="content-container clearfix tan-stripe">
    <article id="profile" class="clearfix wrapper">
        <section class="column-full clearfix big-action">
            <h1 class="article-header">Where to?</h1>

            <div id="geography-select-wrapper" class="input-wrapper">
                <input name="geography_select" id="geography-select" type="text" placeholder="Find a place in {{ root_geo.name }}..." autocomplete="off" autofocus="on">
                <div class="geolocate-only">
                    <span class="or">or</span>
                    <a href="{% url 'locate' %}" class="action-button"><i class="fa fa-location-arrow"></i> Use your current location</a>
                </div>
                <div>
                    <span class="or">or</span>
                    <a class="action-button" href="/profiles/{{ root_geo.geo_level }}-{{root_geo.geo_code }}/">Browse {{ root_geo.name }}</a>
                </div>
            </div>
        </section>
    </article>
</div>
{% endblock %}

{% block homepage_detail %}
<div class="content-container clearfix">
    <article id="explore" class="clearfix wrapper">
        {% include "data/_blocks/_data_query_builder.html" %}
    </article>
</div>

<div class="content-container clearfix tan-stripe">
    <article class="wrapper">
        <section class="column-full clearfix">
            <h1 class="article-header">Discover the story behind the data.</h1>
            <div id="slippy-map"></div>
        </section>
        <section>
            <div class="column-third callout with-icon">
                <h3>
                    <i class="fa fa-book"></i>
                    Find facts
                </h3>
                <p>Populations and financial figures are broken down by category: Elections, Demographics, Service Delivery, Economics and Education.</p>
            </div>
            <div class="column-third callout with-icon">
                <h3>
                    <i class="fa fa-bar-chart-o"></i>
                    Visualize
                </h3>
                <p>Our library of charts gives you insight into data from the places you research. Look for them on profile pages. You can even <a href="{% url 'example_detail' 'embed-charts' %}">embed the charts</a> on your own site.</p>
            </div>
            <div class="column-third callout with-icon">
                <h3>
                    <i class="fa fa-refresh"></i>
                    Get context
                </h3>
                <p>Pre-computed statistics are presented alongside each data point, so you can see how each place fits into a larger context.</p>
            </div>
        </section>
    </article>
</div>

<div class="content-container clearfix">
    <article id="examples" class="clearfix wrapper">
        <header class="column-full">
            <h1 class="article-header">Using {{ HURUMAP.name }}</h1>
        </header>
        <section class="card-container clearfix">
            <h2 class="column-full subhead">Finding places</h2>
            <span class="column-half card">
                <img src="{% static 'img/examples/text_search.png' %}">
                <span class="caption">Type in the name or address of a place. Then select the location you are interested in from the dropdown.</span>
            </span>
            <span class="column-half card">
                <img src="{% static 'img/examples/map_search.png' %}">
                <span class="caption">Alternatively, click on the map area you want to go to. The <span class="zoom-in">+</span> and <span class="zoom-out">-</span> buttons zoom in an out.</span>
            </span>
            <h2 class="column-full subhead">Exploring data</h2>
            <span class="column-half card">
                <img src="{% static 'img/examples/section_overview.png' %}">
                <span class="caption">Statistics are broken down into categories, e.g. Service Delivery. Find a key figure for a sub-category on the left.</span>
            </span>
            <span class="column-half card">
                <img src="{% static 'img/examples/hover_over_graph.png' %}">
                <span class="caption">Hover over graphs to see comparisons with the province and country averages.</span>
            </span>
        </section>
    </article>
</div>

<div class="content-container clearfix tan-stripe">
    <article id="examples" class="clearfix wrapper">
        <header class="column-full">
            <h1 class="article-header">About {{ HURUMAP.name }}</h1>

            <p class="explainer">HURUmap gives journalists access to census data in an easy to use format.</p>

            <p>Read more about <a href="/about">who we are and why we built HURUmap</a>.

            <h2 class="column-full subhead">Shoulders of Giants</h2>
            <p>HURUmap is based on the amazing <a href="http://censusreporter.org/" target="_blank">Census Reporter</a> and Wazimap. It is completely open source.</p>

        </header>
    </article>
</div>
{% endblock %}

{% endblock %}

{% block body_javascript_extra %}
{{ block.super }}

{% block homepage_javascripb_libs %}
<script src="{% static 'js/vendor/leaflet-0.6.4.js' %}"></script>
<script src="{% static 'js/vendor/topojson.v1.min.js' %}"></script>
<script src="{% static 'js/vendor/leaflet.label.js' %}"></script>
<script src="{% static 'js/maps_static.js' %}"></script>
<script src="{% static 'js/profile_map.js' %}"></script>
{% endblock %}

<script>
// show 'use my current location' button
if (Modernizr.geolocation) {
    $('.geolocate-only').show();
}
// geoSelect already defined by widget.geo.select.js
geoSelect.focus()

var maps = new ProfileMaps();
var centre = {% if HURUMAP.map_centre %}{{ HURUMAP.map_centre }}{% else %}null{% endif %};
var zoom = {% if HURUMAP.map_zoom %}{{ HURUMAP.map_zoom }}{% else %}null{% endif %};
maps.drawMapForHomepage('{{ geo_data.first_child_level }}', centre, zoom);

//Icon hover actions
$( ".topic" ).hover(
    function() {
        h = $($(this).children()[0]).attr('src')
        h = h.replace('.', '_over.')
        $($(this).children()[0]).attr('src', h)
        $($(this).children()[1]).css('background','#1f9e95')
    }, function() {
        h = $($(this).children()[0]).attr('src')
        h = h.replace('_over.', '.')
        $($(this).children()[0]).attr('src', h)
        $($(this).children()[1]).css('background','#084A49')
    }
);
</script>
<script src="{% static 'js/data.query.builder.js' %}"></script>


{% endblock %}