$(document).ready(function() {
    $.urlParam = function(name){
        var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
        if (results==null){
            return null;
        }
        else{
            return results[1] || 0;
        }
    }

    var uuid = $.urlParam('uuid') || okular.device_uuid || 'testdevice';

    function updateData() {
        $.getJSON('/events/' + uuid, function(data) {
            var now = new Date();

            $('#meeting div').html('<h1>Room available</h1>');
            $('#next').html('');
            $('#finish, #cancel').hide();

            var filled = false;
            $.each(data, function(index, evt) {
                var start = new Date(evt.start.dateTime),
                    end = new Date(evt.end.dateTime);
                var attendees = [evt.creator];
                if ('attendees' in evt) {
                    attendees = attendees.concat(evt.attendees);
                }
                attendees = $.map(attendees, function(a) {
                    return a.displayName || a.email;
                });
                if (start.getTime() < now.getTime() && now.getTime() < end.getTime() && !filled) {
                    $('#meeting div').html('<h1>' + evt.summary + '</h1><h2>' + time(start) + '-' + time(end) + '</h2><h2>Atendees:<h2><h3>' + attendees.join(', ') + '</h3>');
                    filled = true;
                    $('#finish, #cancel').show();
                } else {
                    $('#next').append('<button type="button" class="btn btn-success">' + time(start) + '-' + time(end) + '<br/>' + evt.summary + '</button>');
                }
            });
        });
    }

    function time(date) {
        var hours = date.getHours(),
            minutes = date.getMinutes(),
            out = '';
        if (hours < 10)
            out += '0';
        out += hours + ':';
        if (minutes < 10)
            out += '0'

        return out + minutes;
    }

    $('#book').click(function(e) {
        $.get('/create_action/' + uuid + '/newevent', function(data) {
            console.log(data);
            $('#qr').show();
            //$('#qr').html('Scan this code <div id="qrcode"></div> or open <p>' + data + '</p> in your browser.');
            $('#qr').html('Scan this code <div id="qrcode"></div>');
            new QRCode("qrcode", {
                text: data,
                width: 300,
                height: 300
            });
            $('#qr').tmList();

            $('body').one('click', function() {
                $('#qr').hide();
                okular.add({
                    width: 600,
                    height: 600
                });
            });
        });
    });

    $('#cancel').click(function(e) {
        $.get('/create_action/' + uuid + '/cancelevent', function(data) {
            $('#qr').show();
            //$('#qr').html('Scan this code <div id="qrcode"></div> or open <p>' + data + '</p> in your browser.');
            $('#qr').html('Scan this code <div id="qrcode"></div>');
            new QRCode("qrcode", {
                text: data,
                width: 300,
                height: 300
            });
            $('#qr').tmList();

            $('body').one('click', function() {
                $('#qr').hide();
                okular.add({
                    width: 600,
                    height: 600
                });
            });
        });
    });

    $('#finish').click(function(e) {
        $.get('/create_action/' + uuid + '/finishevent', function(data) {
            $('#qr').show();
            //$('#qr').html('Scan this code <div id="qrcode"></div> or open <p>' + data + '</p> in your browser.');
            $('#qr').html('Scan this code <div id="qrcode"></div>');
            new QRCode("qrcode", {
                text: data,
                width: 300,
                height: 300
            });
            $('#qr').tmList();

            $('body').one('click', function() {
                $('#qr').hide();
                okular.add({
                    width: 600,
                    height: 600
                });
            });
        });
    });

    okular.init({
        width: 800,
        height: 600,
        debug: false
    });

    updateData();
    setInterval(updateData, 60000);
});

@@ -485,135 +485,28 @@
     
-$('#meeting div').html('%3Ch1%3ERoom available%3C/h1%3E');%0A            $('#next').html('');%0A            $('#finish, #cancel').hide()
+var filled = false
 ;%0A
-%0A
     
@@ -513,38 +513,33 @@
         var 
-filled = false
+next = ''
 ;%0A          
@@ -1115,31 +1115,19 @@
     
-$('#meeting div').html(
+var text = 
 '%3Ch1
@@ -1252,17 +1252,16 @@
  '%3C/h3%3E'
-)
 ;%0A      
@@ -1278,23 +1278,114 @@
     
-filled = true;%0A
+if ($.trim($('#meeting div').html()) != text) %7B%0A                        $('#meeting div').html(text);%0A    
     
@@ -1422,32 +1422,89 @@
 ancel').show();%0A
+                    %7D%0A                    filled = true;%0A
                 
@@ -1536,26 +1536,16 @@
     
-$('#next').append(
+next += 
 '%3Cbu
@@ -1658,17 +1658,16 @@
 button%3E'
-)
 ;%0A      
@@ -1685,32 +1685,357 @@
 %0A            %7D);
+%0A            if ($.trim($('#next').html()) != next) %7B%0A                $('#next').html(next);%0A            %7D%0A            if (!filled && $.trim($('#meeting div').html()) != '%3Ch1%3ERoom available%3C/h1%3E') %7B%0A                $('#meeting div').html('%3Ch1%3ERoom available%3C/h1%3E');%0A                $('#finish, #cancel').hide();%0A            %7D
 %0A        %7D);%0A   
@@ -4665,12 +4665,46 @@
 60000);%0A
+    $('#finish, #cancel').hide();%0A
 %7D);%0A

Make only necessary dom manipulations to minimize image changes.