$(document).ready(function(){
    $(".button-collapse").sideNav({
        menuWidth: 300
    });
    var austat = new Austat();

});
function Austat(){
    this.map = null;
    this.layer = null;
    this.makeTopics();
    this.makeQuestion();
}
Austat.prototype.get_map = function(){
    if( !this.map ){
        this.map = new L.Map('map');
        
        // create the tile layer with correct attribution
        var osmUrll = 'http://otile2.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png'
        
        //var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
        var osmAttrib='Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
        var osm = new L.TileLayer(osmUrll, {minZoom: 0, maxZoom: 12, attribution: osmAttrib});
        
        // start the map in Central Australia
        this.map.setView(new L.LatLng(-24.967335, 134.625094),4);
        this.map.addLayer(osm);
    }
    return this.map;
}

Austat.prototype.checkboxQuestion = function(question){
    var tmpl = $('#checkbox-template').html();
    var html = Mustache.render(tmpl, question);
    $('#question').html(html);

    $('#question input[type=radio]').click(function(){
        var selected = $(this).attr('id');
        results(selected);
        return false;
    });
    $('#question').closest('.card').slideDown();
}
Austat.prototype.mapSetup = function(question){
    $('#map').closest('.card').slideDown();
    this.addPlacemarks(question);
}
Austat.prototype.makeQuestion = function(){
    var austat = this;
    var topic = this.getRandomTopic();
    $.ajax({
        url: '/query/' + topic,
        success: function(q){
            console.log(!q['value'])
                var l = austat.getRandomItem(q.locations);
                q.question = Mustache.render(q.question, l)
                if(l.geometry){
                    austat.addPlacemarks(q)
                }else{
                    austat.checkboxQuestion(q);
                }
        }
    });
}

Austat.prototype.getRandomItem = function(list){
    return list[Math.floor(Math.random()*list.length)];
}

Austat.prototype.getRandomTopic = function(){
    // Get a random topic.
    topics = this.getAllTopics();
    return this.getRandomItem(topics);
}

Austat.prototype.getAllTopics = function(){
    // Get a list of ids for selected topics.
    var topics = [];
    $('input[name=topic]').each(function(i, topic){
        if($(this).is(':checked')){
            topics.push($(this).attr('topic'));
        }
    });
    return topics;
}
Austat.prototype.makeTopics = function(){
    // Get topics from api and create controls.
    $.ajax({
        async: false,
        url: '/topics',
        success: function(topics){
            var template = $('#topics-template').html();
            var html = Mustache.render(template, topics);
            $('#topics').html(html)
        }
    });
}

Austat.prototype.results = function(selected){
    $('#question').closest('.card').slideUp(function(){
        $('#answer').closest('.card').slideDown();
    });
    //answer.answer.correct = false;
    //if ('answer_' + answer.answer.id === selected){
    //    answer.answer.correct = true;
    //}
    var tmpl = $('#answer-template').html();
    var html = Mustache.render(tmpl, answer);
    $('#answer').html(html);
    $('#answer #next').click(function(){
        this.makeQuestion()
        $(this).closest('.card').slideUp(function(){
            $('#question').closest('.card').slideDown();
        });
    });
}

Austat.prototype.addPlacemarks = function(question){
    map = this.get_map();
    var tmpl = $('#question-template').html();
    var html = Mustache.render(tmpl, question);
    $('#mapQuestion').html(html);
    $('#question').closest('.card').prev().slideDown();
    if (this.layer){
        this.map.removeLayer(this.layer);
    }
    question.locations.forEach(function(elem){
        
        var geom = L.geoJson(elem.geometry);
        geom.on('click',function(evt){
            //TODO call result on geom val
        })
         // TODO on hover display labels
        geom.bindPopup(elem.value);
        geom.on('mouseover', function(e) {
            e.layer.openPopup();
        });
        geom.on('mouseout', function(e) {
            e.layer.closePopup();
        });
        geom.openPopup();
        geom.addTo(map);
        this.layer = geom;
        map.invalidateSize()
    });
}

@@ -1128,16 +1128,37 @@
 (html);%0A
+    var mapObj = this
 %0A    $('
@@ -1256,16 +1256,23 @@
         
+mapObj.
 results(
@@ -3071,24 +3071,47 @@
 ();%0A    %7D);%0A
+    var mapObj = this;%0A
     //answer
@@ -3402,28 +3402,30 @@
 ()%7B%0A        
-this
+mapObj
 .makeQuestio
@@ -3890,24 +3890,46 @@
 yer);%0A    %7D%0A
+    var mapObj = this%0A
     question
@@ -3971,29 +3971,16 @@
         
-%0A        var 
 geom = L
@@ -4021,162 +4021,115 @@
 eom.
-on('click',function(evt)%7B%0A            //TODO call result on geom val%0A        %7D)%0A         // TODO on hover display labels%0A        geom.bindPopup(elem.value
+bindPopup(elem.name);%0A        geom.on('mouseover', function(e) %7B%0A            e.layer.openPopup();%0A        %7D
 );%0A 
@@ -4142,35 +4142,34 @@
  geom.on('mouseo
-ver
+ut
 ', function(e) %7B
@@ -4181,36 +4181,37 @@
         e.layer.
-open
+close
 Popup();%0A       
@@ -4228,32 +4228,29 @@
    geom.on('
-mouseout
+click
 ', function(
@@ -4266,33 +4266,88 @@
         
-e.layer.closePopu
+mapObj.results(geom.value)%0A            $('#map').closest('.card').slideU
 p();%0A   

Remove layers from map