// https://github.com/BorisMoore/jsrender/blob/master/demos/step-by-step/01_inserting-data.html

$(document).ready(function() {
    'use strict';
    // Module pattern
    var Kafana = function Outer() {
        var databaseResult = null;
        var mapInstance = null;
        var allMarkers = [];
        var $mapDiv = '';
        var $listDiv = '';
        var database = null;
        var mapOptions = {
            zoom: 16,
            center: new google.maps.LatLng(44.812827, 20.462383)
        };
        
        var configDatabase = {
            apiKey: "AIzaSyDyJ68yPVy8ODAq37Cf2eXXy2jfnOJU0Vs",
            authDomain: "kafana-634b4.firebaseapp.com",
            databaseURL: "https://kafana-634b4.firebaseio.com",
            storageBucket: "kafana-634b4.appspot.com",
            messagingSenderId: "603767142522"
        };

        function init(options) {
            $mapDiv = $(options.mapDiv);
            $listDiv = $(options.listDiv);
        }

        function start() {
            _drawMap();
            _getDataBase.then(_fillData);
        }

        var _drawMap = function() {
            mapInstance = new google.maps.Map($mapDiv.get(0), mapOptions);
        }

        var _getDataBase = new Promise(function(resolve, reject) {
            var database = firebase.initializeApp(configDatabase);
            database.database().ref('/').once('value').then(function(snapshot) {
                var result = snapshot.val().dateCode;
                resolve(result);
            });
        });

        function _fillData(data) {
            databaseResult = data;
            _paintListItems(databaseResult);
            _drawMarkers(databaseResult);
            _fitBounds();
        }

        function _paintListItems (data) {
            var outputHtml = '';
            data.forEach(item => {
                outputHtml += `<li class="list-group-item">${item.name} (${item.address}) <span class="fr"><button class="voteButton">+</button> Glasova: ${item.votes}</span></li>`;
            });
            $listDiv.html(outputHtml);
        }

        function _drawMarkers(data) {
            data.forEach((item) => {
                var address = item.geo.split(',');
                var x = Number(address[0]);
                var y = Number(address[1]);
                allMarkers.push(new google.maps.Marker({
                    position: new google.maps.LatLng(x, y),
                    map: mapInstance,
                    title: item.name
                }));
            });
        }

        function _fitBounds() {
            var bounds = new google.maps.LatLngBounds();
            for(var i=0; i < allMarkers.length; i++) {
                bounds.extend(allMarkers[i].getPosition());
            }
            mapInstance.fitBounds(bounds);
        }

        return {
            init: init,
            start: start
        }
    };

    var glavnaKafana = Kafana();
    glavnaKafana.init({
        mapDiv: '.js-mainMap', 
        listDiv: '.js-listaKafana' 
    });
    glavnaKafana.start();

});

@@ -1301,36 +1301,32 @@
  %7B%0D%0A            
-var 
 database = fireb
@@ -1357,24 +1357,24 @@
 Database);%0D%0A
+
             
@@ -1867,20 +1867,29 @@
 forEach(
+(
 item
+, index)
  =%3E %7B%0D%0A 
@@ -1981,92 +1981,275 @@
 s%7D) 
-%3Cspan class=%22fr%22%3E%3Cbutton class=%22voteButton%22%3E+%3C/button%3E Glasova: $%7Bitem.votes%7D%3C/span%3E
+%0D%0A                    %3Cspan class=%22fr%22%3E%0D%0A                        %3Cbutton data-key=%22$%7Bindex%7D%22 class=%22voteButton js-voteButton%22%3E+%3C/button%3E %0D%0A                        Glasova: %3Cspan class=%22js-voteHolder%22%3E$%7Bitem.votes%7D%3C/span%3E%0D%0A                    %3C/span%3E%0D%0A                
 %3C/li
@@ -2306,24 +2306,59 @@
 tputHtml);%0D%0A
+            _addEventListeners();%0D%0A
         %7D%0D%0A%0D
@@ -3044,24 +3044,24 @@
          %7D%0D%0A
-
             
@@ -3097,32 +3097,772 @@
 ;%0D%0A        %7D%0D%0A%0D%0A
+        function _addEventListeners() %7B%0D%0A            function handler(e) %7B%0D%0A                $(this).removeClass('js-voteButton');%0D%0A                _databaseAddVote($(this).data('key'), $(this).parent().find('.js-voteHolder'));%0D%0A            %7D%0D%0A            $listDiv.on('click', '.js-voteButton', handler);%0D%0A        %7D%0D%0A%0D%0A        function _databaseAddVote (keyInDataBase, $votesHolder) %7B%0D%0A            var key = database.database().ref(%60/dateCode/$%7BkeyInDataBase%7D%60);%0D%0A            key.once('value').then(function(snapshot) %7B%0D%0A                var oldValue = snapshot.val().votes;%0D%0A                key.update(%7B%0D%0A                    votes: ++oldValue%0D%0A                %7D);%0D%0A                $votesHolder.text(oldValue);%0D%0A            %7D);%0D%0A        %7D%0D%0A%0D%0A
         return %7B

Add voting functionality