extends layout

block head
    script(src="/socket.io/socket.io.js")

block content

    div.container
        div.row
            for nr in streams
                div.cell
                    div(id="stream-#{nr}", class="kasten")
                        h3 --
                        table
                            tr
                                td Location:
                                td(class="location") --
                            tr
                                td Latitude:
                                td(class="latitude") --
                            tr
                                td Longitude:
                                td(class="longitude") --
                            tr
                                td Update:
                                td(class="update") --
                            tr
                                td
                                td
                            tr
                                td(class="break")
                                td(class="break")

                        div.mapbox(id="map-#{nr}") --

    script(type="text/javascript")
        //var streams;
        //var stream;

        var print = function(o){
            var str='';

            for(var p in o){
                if(typeof o[p] == 'string'){
                    str+= p + ': ' + o[p]+'; ';
                }else{
                    str+= p + ': {' + print(o[p]) + '}';
                }
            }

            return str;
        }

        function loadMap(container, lat, long) {
            var latlong = new google.maps.LatLng(lat, long);
            var map = new google.maps.Map(container, { center: latlong,
                                                       zoom: 8,
                                                       disableDefaultUI: true,
                                                       mapTypeId: google.maps.MapTypeId.ROADMAP });
            var marker = new google.maps.Marker({ position: latlong, map: map});
        }

        $(function() {

        });

        var socket = io.connect('http://localhost');

        socket.on('gotstream', function(data) {
            console.log("gotstream " + data.id);
            $("div#stream-" + data.id + " h3").text(data.title);
            $("div#stream-" + data.id + " td.location").text(data.location);
            $("div#stream-" + data.id + " td.latitude").text(data.lat);
            $("div#stream-" + data.id + " td.longitude").text(data.lon);
            var now = new Date();
            $("div#stream-" + data.id + " td.update").text(now);
            loadMap($('div#map-' + data.id)[0], data.lat, data.lon);
        });

        function add_data(data) {
            console.log("update_data");
            console.dir(data);
            console.log('searching for "#feed-' + data.feed + '"')
            var row = $('#stream-' + data.stream + '-feed-' + data.feed).html();
            if (row === undefined) {
                var tmp = '<tr id="stream-' + data.stream + '-feed-' + data.feed + '" class="value"><td>' + data.displayname + '</td><td class="value">' + data.value + "</td></tr>";
                console.log("new tmp: " + tmp);
                $("#stream-" + data.stream + " table > tbody").append(tmp);
            }
        };

        function update_data(data) {
            console.log("update_data");
            console.dir(data);
            console.log('searching for "#feed-' + data.feed + '"')
            var row = $('#stream-' + data.stream + '-feed-' + data.feed).html();
            if (row === undefined) {
                var tmp = '<tr id="stream-' + data.stream + '-feed-' + data.feed + '" class="value"><td>' + data.displayname + '</td><td class="value">' + data.value + "</td></tr>";
                console.log("new tmp: " + tmp);
                $("#stream-" + data.stream + " table > tbody").append(tmp);
            }
            else {
                $("body").effect("highlight", {times:2}, 2000);
                var t = '#stream-' + data.stream + '-feed-' + data.feed;
                var tmp = "<td>" + data.displayname + '</td><td class="value">' + data.value + "</td>";
                console.log("update: " + tmp);
                $(t).html(tmp);
                var f = $('#stream-' + data.stream + '-feed-' + data.feed + ' .value');
                f.effect("pulsate", { times:3 }, 2000);
            }
        };

        socket.on('changedvalue', update_data);
        socket.on('updatevalue', add_data);