path: root/modules-available/locationinfo/frontend/doorsign.html



<!--

parameter

required:
    id: [integer] room id, see in admin panel
optional:

    lang:[en,de] set the language
    mode:[1,2,3,4] sets the displaying
        1: Calendar & Room
        2: only Calendar
        3: only Room
        4: Calendar & Room alternately
    daystoshow:[1,2,3,4,5,6,7] sets how many days the calendar shows
    scale:[10-90] scales the calendar and Roomplan in mode 1
    switchtime:[1-120] sets the time between switchen in mode 4  (in seconds)
    calupdate: Time the calender querys for updates,in minutes.
    roomupdate: Time the PCs in the room gets updated,in seconds.
    rotation:[0-3] rotation of the roomplan
    vertical:[true] only mode 1, sets the calendar above the roomplan
    configupdate: Time interval the config gets updated (in minutes)
    scaledaysauto: [true] if true it finds automaticly the daystoshow parameter depending on display size

-->
<!DOCTYPE html>
<html lang="de">
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">
<head>
    <title>DoorSign</title>
    <script type='text/javascript' src='../../../script/jquery.js'></script>
    <script type='text/javascript' src='../../js_jqueryui/clientscript.js'></script>
    <link rel='stylesheet' type='text/css' href='../../js_jqueryui/style.css'/>
    <link rel='stylesheet' type='text/css' href='jquery-week-calendar/jquery.weekcalendar.css'/>

    <script type='text/javascript' src="jquery-week-calendar/jquery.weekcalendar.js"></script>
    <style type='text/css'>

        body {
            font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
            margin: 0;
            width: 100%;
            height: 100%;
            float: left;
            box-sizing: border-box;

            background-color: #cacaca;
            overflow: hidden;
            position: absolute;
            display: table;

        }

        .row {
            background-color: #404040;
            box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.25);
            margin-bottom: 4px;

            width: 100%;

        }

        .header {
            display: table;
            color: white;
            padding: 0;
            height: 8vw;

        }

        .progressbar {
            width: 0px;
            height: 2px;
            position: absolute;
            background-color: red;
            bottom: 2px;
            z-index: 1;
        }

        .font {
            display: table-cell;
            vertical-align: middle;
            font-size: 3vw;
            font-weight: bold
        }

        .courseText {
            text-align: center;
        }

        .row::after {
            content: "";
            clear: both;
            display: block;
        }

        [class*="col-"] {
            float: left;;
            padding: 0;
            box-sizing: border-box;
        }

        .col-1 {
            width: 33%;
        }

        .col-2 {
            width: 33%;
        }

        .roomLayoutDesign {
            position: relative;
            float: left;
            boxSizing: border-box;
        }

        .roompadding {
            float: left;
            position: relative;
        }

        .room {
            position: relative;
            background-color: white;
            width: 100%;
            height: 100%;
            overflow: hidden;
            border-width: 1px;
            border-color: darkgrey;
            border-style: solid;

        }

        .calendar {
            float: left;
            padding: 0;
            dboxSizing: border-box;
            background: linear-gradient(#cccccc, white);

        }

        .free-busy-busy {
            background: grey;
        }

        .ui-widget-content {
            color: white;
        }

        .wc-header {
            background-color: #404040;
            font-weight: bold;
        }

        .ui-state-default {
            text-shadow: none;
        }

        .square {
            display: table;
            float: right;
            padding: 0;
            width: 8vw;
            height: 8vw;
        }

        .FreeSeatsFont {
            display: table-cell;
            vertical-align: middle;
            font-size: 6vw;
            color: white;
            top: 0;
            margin: 0 auto;
            position: relative;
            text-align: center;
            font-weight: bold;
            overflow: visible;
        }

        .PCImgDiv {
            position: absolute;
            left: 0;
            bottom: 0;
            display: inline-block;

        }

        .OverlayDiv {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            display: table;
        }

        .pcImg {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;

        }

        .overlay {
            position: relative;
            width: 50%;
            height: 50%;
            opacity: 0.5;
            float: left;
            z-index: 5;
        }

        .overlay-rollstuhl {
            width: 25%;
            height: 50%;
            background-color: white;
            opacity: 0.5;
            float: left;
        }

        .wc-scrollable-grid {

        }

        .ui-widget-content .ui-state-active {
            font-weight: bold;
            color: black;
        }

        .wc-container {
            font-weight: bold;
        }

        .wc-today {
            background-color: white;
        }

        .wc-time-header-cell {
            background-color: #eeeeee;
            border: none;
        }

        .ui-corner-all {
            moz-border-radius-bottomright: 0;
            webkit-border-bottom-right-radius: 0;
            -khtml-border-bottom-right-radius: 0;
            border-bottom-right-radius: 0;

            moz-border-radius-topright: 0;
            webkit-border-top-right-radius: 0;
            -khtml-border-top-right-radius: 0;
            border-top-right-radius: 0;

            moz-border-radius-bottomleft: 0;
            webkit-border-bottom-left-radius: 0;
            -khtml-border-bottom-left-radius: 0;
            border-bottom-left-radius: 0;

            moz-border-radius-topleft: 0;
            webkit-border-left-right-radius: 0;
            -khtml-border-left-right-radius: 0;
            border-top-left-radius: 0;
        }

        .wc-scrollable-grid .wc-day-column-first {
            border-style: solid;

        }

        [class*="wc-day-"] {
            border-color: grey;
        }


    </style>
    <script type='text/javascript'>

        var rooms = {};
        var lastSwitchTime;
        var roomsToshow = 0;
        var roomIds;
        //Todo change these
        var date;
        var supportSvg = typeof SVGRect != "undefined";
        var calendarQueryUrl;
        var translation = {
            "en": {
                "room": "Room",
                "closed": "Closed",
                "free": "Free",
                "shortDays": ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
                "longDays": ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
                "to": "to"

            },
            "de": {
                "room": "Raum",
                "closed": "Geschlossen",
                "free": "Frei",
                "shortDays": ["Son", "Mon", "Die", "Mit", "Don", "Frei", "Sam"],
                "longDays": ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"],
                "to": "bis"
            },
            "pt": {
                "room": "Quarto",
                "closed": "Fechado",
                "free": "Livre",
                "shortDays": ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Se', 'Sáb'],
                "longDays": ['Domingo', 'Segunda-feira', 'Terça-feira', 'Quarta-feira', 'Quinta-feira',
                    'Sexta-feira', 'Sábado'],
                "to": "para"

            }
        };


        $(document).ready(function () {
            if (!getId()) {

            }
        });


        /**
         * Downloads the config of a room, also reloads the page if the config hase changed over time
         * @param id ID of the room
         * @param room Room Object, only needed if it already exists
         */

        function getConfig(id, room) {
            $.ajax({
                url: "../../../api.php?do=locationinfo&action=config&id=" + id,
                dataType: 'json',
                cache: false,
                timeout: 30000,
                success: function (result) {

                    if (room == null) {

                        if (result.room == null) {

                            for (var i = roomIds.length - 1; i >= 0; i--) {
                                if (roomIds[i] === id) {
                                    roomIds.splice(i, 1);
                                }
                            }
                            if (roomsToshow == roomIds.length) {

                                initRooms();

                            }
                            return;
                        }

                        var time = new Date(result.time);
                        if (isNaN(time.getTime())) {
                            time = new Date();
                        }
                        SetUpDate(time);
                        delete result.time;

                        room = addRoom(id, result.room, result);
                        roomsToshow++;
                        if (roomsToshow == roomIds.length) {

                            initRooms();

                        }


                    } else {

                        delete result.time;
                        if (JSON.stringify(rooms[id].config) != JSON.stringify(result)) {
                            // reload Page if someone changed config
                            location.reload(true);
                        }
                    }
                    // check for config changes from time to time
                    setTimeout(function () {
                        getConfig(id, room);
                    }, room.config.configupdate);


                }, error: function () {
                    //Todo Error handling:
                }
            })
        }


        /**
         *  gets the Parameter IDs from the Urls
         */
        function getId() {
            roomIds = getUrlParameter("id");
            if (roomIds == null) {

                var text = "<h1>Error: No Room Id's given in parameter </h1>";
                $("body").append(text);

                return false;
            }

            roomIds = roomIds.split(',');
            if (roomIds.length > 4) {
                roomIds.length = 4;
            }

            for (var i = 0; i < roomIds.length; i++) {
                getConfig(roomIds[i], null);

            }

        }


        /**
         * gets Additional Parameters from the URL, and from the
         * downloaded json.
         * also makes sure parameters are in a given range
         * @param room Room Object
         */

        function getParamerter(room) {


            if (room.config != null) {
                room.config.switchtime = room.config.switchtime * 1000;
                room.config.calupdate = room.config.calupdate * 60 * 1000;
                room.config.roomupdate = room.config.roomupdate * 1000;
                room.config.configupdate = room.config.configupdate * 60 * 1000;
            }

            if (getUrlParameter("mode") != null) {
                room.config.mode = parseInt(getUrlParameter("mode"));
            }
            if (getUrlParameter("calupdate") != null) {
                room.config.calupdate = (parseInt(getUrlParameter("calupdate")) * 60 * 1000);
            }
            if (getUrlParameter("roomupdate") != null) {
                room.config.roomupdate = (parseInt(getUrlParameter("roomupdate")) * 1000);
            }
            if (getUrlParameter("daystoshow") != null) {
                room.config.daystoshow = parseInt(getUrlParameter("daystoshow"));
            }
            if (getUrlParameter("scaledaysauto") == "true") {
                room.config.scaledaysauto = true;
            } else if (getUrlParameter("scaledaysauto") == "false") {
                room.config.scaledaysauto = false;
            }
            if (getUrlParameter("vertical") == "true") {
                room.config.vertical = true;
            } else if (getUrlParameter("vertical") == "false") {
                room.config.vertical = false;
            }
            if (getUrlParameter("einkmode") == "true") {
                room.config.einkmode = true;
            } else if (getUrlParameter("einkmode") == "false") {
                room.config.einkmode = false;
            }

            if (getUrlParameter("scale") != null) {
                room.config.scale = parseInt(getUrlParameter("scale"));
            }
            if (getUrlParameter("rotation") != null) {
                room.config.rotation = parseInt(getUrlParameter("rotation"));
            }
            if (getUrlParameter("switchtime") != null) {
                room.config.switchtime = (parseInt(getUrlParameter("switchtime")) * 1000);
            }
            if (getUrlParameter("configupdate") != null) {
                room.config.configupdate = (parseInt(getUrlParameter("configupdate")) * 60 * 1000);
            }

            // parameter validation
            if (room.config.switchtime == null || isNaN(room.config.switchtime) || room.config.switchtime > 120*1000
                || room.config.switchtime < 1*1000) {
                room.config.switchtime = 5*1000;
            }
            if (room.config.scale == null || isNaN(room.config.scale) || room.config.scale > 90 || room.config.scale < 10) {
                room.config.scale = 50;
            }
            if (room.config.vertical == null) {
                room.config.vertical = false;
            }
            if (room.config.daystoshow == null || isNaN(room.config.daystoshow) || room.config.daystoshow > 7
                || room.config.daystoshow < 1) {
                room.config.daystoshow = 7;
            }

            if (room.config.roomupdate == null || isNaN(room.config.roomupdate) || room.config.roomupdate < 1000) {
                room.config.roomupdate = 20 * 1000;
            }
            if (room.config.configupdate == null || isNaN(room.config.configupdate) || (room.config.configupdate < 1)) {
                room.config.configupdate = 30 * 60 * 1000;
            }

            if (room.config.calupdate == null || isNaN(room.config.calupdate) || room.config.calupdate < 60 * 1000) {
                room.config.calupdate = 30 * 60 * 1000;
            }
            if (room.config.mode == null || isNaN(room.config.mode) || room.config.mode > 4 || room.config.mode < 1) {
                room.config.mode = 1;
            }
            if (room.config.rotation == null || isNaN(room.config.rotation) || room.config.rotation < 0
                || room.config.rotation > 4) {
                room.config.rotation = 0;
            }

            if (getUrlParameter("lang") != null && getUrlParameter("lang") in translation) {
                room.config.language = getUrlParameter("lang");
            }
            $('html').attr('lang', room.config.language);
        }

        /**
         * generates the Room divs and calls the needed functions depending on the rooms mode
         */
        function initRooms() {

            var width = "100%";
            var height = "100%";
            if (roomsToshow == 2 || roomsToshow == 4) {
                width = "50%";
            }
            if (roomsToshow == 3) {
                width = "33%";
            }
            if (roomsToshow == 4) {
                height = "50%";
            }
            var i = 0;
            for (var t = 0; t < roomIds.length; t++) {
                var property = roomIds[t];
                var text = "<div class='roompadding'   id ='roompadding_" + rooms[property].id + "'></div>";
                $("body").append(text);


                var obj = document.getElementById("roompadding_" + rooms[property].id);
                obj.style.height = height;
                obj.style.width = width;
                text = "<div class='room'   id ='room_" + rooms[property].id + "'></div>";

                $("#roompadding_" + rooms[property].id).append(text);


                text = "<div id='header_" + rooms[property].id + "' class='row'>" +
                    "<div class='header col-2'>" +
                    "<div class='font' id='roomHeader_" + rooms[property].id + "'></div>" +
                    "</div>" +
                    "<div class='col-1 courseText header'>" +
                    "<div class='font' id='courseHeading_" + rooms[property].id + "'></div>" +
                    "</div>" +
                    "<div class='square .col-2' id='square_" + rooms[property].id + "'>" +
                    "<div class='FreeSeatsFont' id='freeSeatsHeader_" + rooms[property].id + "'></div>" +
                    "</div>" +
                    "</div>";
                $("#room_" + rooms[property].id).append(text);

                if (rooms[property].name != null) {
                    $("#roomHeader_" + rooms[property].id).text(rooms[property].name);
                }

                if (roomsToshow == 2) {
                    document.getElementById("square_" + rooms[property].id).style.width = "6vw";
                    document.getElementById("square_" + rooms[property].id).style.height = "6vw";
                    document.getElementById("roomHeader_" + rooms[property].id).style.fontSize = "1.8vw";
                    document.getElementById("freeSeatsHeader_" + rooms[property].id).style.fontSize = "4.5vw";
                    document.getElementById("courseHeading_" + rooms[property].id).style.fontSize = "1.8vw";
                    var headers = document.getElementsByClassName('header');
                    for (var j = 0; j < headers.length; j++) {
                        headers[j].style.height = "6vw";
                    }
                }
                if (roomsToshow == 3) {
                    document.getElementById("square_" + rooms[property].id).style.width = "4vw";
                    document.getElementById("square_" + rooms[property].id).style.height = "4vw";
                    document.getElementById("roomHeader_" + rooms[property].id).style.fontSize = "1.2vw";
                    document.getElementById("freeSeatsHeader_" + rooms[property].id).style.fontSize = "2.5vw";
                    document.getElementById("courseHeading_" + rooms[property].id).style.fontSize = "1.2vw";
                    var headers = document.getElementsByClassName('header');
                    for (var j = 0; j < headers.length; j++) {
                        headers[j].style.height = "4vw";
                    }

                }
                if (roomsToshow == 4) {
                    document.getElementById("square_" + rooms[property].id).style.width = "4vw";
                    document.getElementById("square_" + rooms[property].id).style.height = "4vw";
                    document.getElementById("roomHeader_" + rooms[property].id).style.fontSize = "1.5vw";
                    document.getElementById("freeSeatsHeader_" + rooms[property].id).style.fontSize = "2.5vw";
                    document.getElementById("courseHeading_" + rooms[property].id).style.fontSize = "1.5vw";

                    var headers = document.getElementsByClassName('header');
                    for (var j = 0; j < headers.length; j++) {
                        headers[j].style.height = "4vw";
                    }
                }


                if (rooms[property].config.mode == 1) {
                    setUpCalendar(rooms[property].config.scale + "%", rooms[property].config.daystoshow, rooms[property]);
                    preInitRoom(rooms[property]);

                } else if (rooms[property].config.mode == 2) {
                    setUpCalendar("100%", rooms[property].config.daystoshow, rooms[property]);

                } else if (rooms[property].config.mode == 3) {
                    preInitRoom(rooms[property]);
                    getOpeningTimes(rooms[property]);
                } else if (rooms[property].config.mode == 4) {

                    setUpCalendar("100%", rooms[property].config.daystoshow, rooms[property]);
                    preInitRoom(rooms[property]);
                    generateProgressBar(rooms[property].id);
                }

                i++;
            }

            setInterval(mainUpdateLoop, 1000);
        }

        /**
         * Helper function to generate id string used in query functions
         * @param list A string, wicht contains ids or not(for now)
         * @param id An ID which should be added to the list
         */
        function addIdToUpdateList(list, id) {
            if (list == "") {
                list += id;
            } else {
                list += ("," + id);
            }
            return list;
        }


        var timeSteps = 10;
        /**
         * Main Update loop, this loop runs every 1 seconds and calls all
         * function which should be called periodically
         */
        function mainUpdateLoop() {

            // check ervery 10 sec if rooms need new calendar data or room data
            // groups request

            if (timeSteps > 9) {
                timeSteps = 0;

                var calendarUpdateIds = "";
                var rommUpdateIds = "";
                for (var property in rooms) {
                    if (rooms[property].config.lastCalendarUpdate == null || rooms[property].config.lastCalendarUpdate + rooms[property].config.calupdate < MyDate().getTime()) {

                        calendarUpdateIds = addIdToUpdateList(calendarUpdateIds, rooms[property].id);
                        rooms[property].config.lastCalendarUpdate = MyDate().getTime();
                    }
                    if (rooms[property].config.lastRoomUpdate == null || rooms[property].config.lastRoomUpdate + rooms[property].config.roomupdate < MyDate().getTime()) {
                        rommUpdateIds = addIdToUpdateList(rommUpdateIds, rooms[property].id);
                        rooms[property].config.lastRoomUpdate = MyDate().getTime();
                    }
                }


                if (calendarUpdateIds != "") {
                    queryCalendars(calendarUpdateIds);
                }
                if (rommUpdateIds != "") {
                    queryRooms(rommUpdateIds);
                }
            }


            // switches calendar and roomlayout in mode 4

            for (var property in rooms) {
                if (rooms[property].config.mode == 4) {
                    if (rooms[property].lastSwitchTime == null
                        || rooms[property].lastSwitchTime + rooms[property].config.switchtime  < MyDate().getTime()) {


                        switchLayout(rooms[property]);
                        MoveProgressBar(rooms[property].id, rooms[property].config.switchtime);

                        if (rooms[property].lastSwitchTime == null) {
                            rooms[property].lastSwitchTime = MyDate().getTime();
                        } else {
                            rooms[property].lastSwitchTime = rooms[property].lastSwitchTime + rooms[property].config.switchtime;
                        }
                    }

                    //
                }
                // Updateing All room Headers

                UpdateRoomHeader(rooms[property]);
            }


            // reload site at midnight
            var now = new MyDate();
            if (date != null) {
                if (date.getDate() != now.getDate()) {
                    location.reload(true);
                }
            }
            date = now;
            timeSteps++;

        }

        /**
         *  Generates a room Object and adds it to the rooms array
         *  @param id ID of the room
         *  @param name Name of the room
         *  @param config Config Json of the room
         */
        function addRoom(id, name, config) {
            var room = {
                id: id,
                name: name,
                timetable: null,
                currentEvent: null,
                nextEventEnd: null,
                timeTilFree: null,
                state: null,
                openingTimes: null,
                config: config,
                currentfreePcs: 0,
                layout: null,
                freePcs: 0,
                resized: true,
                lastCalendarUpdate: null,
                lastRoomUpdate: null,
                getState: function () {
                    if (this.state == null) {
                        ComputeCurrentState(this);
                        return this.state;
                    }
                    if (this.state.end != "") {
                        if (this.state.end < new MyDate()) {
                            ComputeCurrentState(this);
                        }
                    }
                    return this.state;
                }


            };
            getParamerter(room);
            rooms[id] = room;
            return room;

        }

        /**
         *  inilizes the Calendar for an room
         *  @param percent Percentages of how mucht width the Calendar div should get (only used in mode 1)
         *  @param daysToShow How many days the calendar should show
         *  @param room Room Object
         */
        function setUpCalendar(percent, daysToShow, room) {
            generateCalendarDiv(percent, room);
            var $calendar = $("#calendar_" + room.id).weekCalendar({
                timeslotsPerHour: 1,
                timeslotHeight: 30,
                daysToShow: daysToShow,
                height: function ($calendar) {
                    var height = $(window).height();
                    if (roomsToshow == 4) {
                        height = height / 2;
                    }

                    height = height - document.getElementById('header_' + room.id).clientHeight - 5;
                    if (room.config.mode == 1 && room.config.vertical) {
                        height = height * (room.config.scale / 100)
                    }
                    return height;
                },
                eventRender: function (calEvent, $event) {
                    if (calEvent.end.getTime() < new MyDate().getTime()) {
                        $event.css("backgroundColor", "#aaa");
                        $event.find(".time").css({"backgroundColor": "#999", "border": "1px solid #888"});
                    } else if (calEvent.end.getTime() > new MyDate().getTime() && calEvent.start.getTime() < new MyDate().getTime()) {
                        $event.css("backgroundColor", "#25B002");
                        $event.find(".time").css({"backgroundColor": "#25B002", "border": "1px solid #888"});
                    }
                },
                date: MyDate(),
                dateFormat: "j.n",
                timeFormat: "G:i",
                scrollToHourMillis: 500,
                use24Hour: true,
                readonly: true,
                showHeader: false,
                hourLine: true,
                shortDays: t("shortDays", room.config.language),
                longDays: t("longDays", room.config.language),
                buttons: false,
                timeSeparator: " " + t("to", room.config.language) + " ",
                startOnFirstDayOfWeek: false,
                displayFreeBusys: true,
                defaultFreeBusy: {free: false}
            });
            getOpeningTimes(room);


        }

        /**
         * downloads openingTimes for an room
         * @param room Room Object
         */
        function getOpeningTimes(room) {
            $.getJSON("../../../api.php?do=locationinfo&action=openingtime&id=" + room.id, function (result) {
                if (Object.prototype.toString.call(result) === '[object Array]') {
                    if (result.length > 0) {
                        SetOpeningTimes(result[0].openingtime, room);
                    }
                }
                scaleCalendar(room);

            })
                .error(function () {
                    scaleCalendar(room);

                })
        }


        /**
         * Generates the Calendar Div, depending on it's width
         * @param width width of the Calendar Div
         * @param room Room Object
         */

        function generateCalendarDiv(width, room) {
            var div = document.createElement("div");
            div.id = "calendar_" + room.id;
            div.className = "calendar";
            if (room.config.vertical && room.config.mode == 1) {
                width = 100 + "%";
                div.float = "Top";
            }
            div.style.width = width;
            //document.body.appendChild(div);
            $("#room_" + room.id).append(div);

        }

        /**
         * sets the opening Time in the calendar plugin and saves it in the room object
         * @param parsedOpenings Dictonary of Opening times.
         * @param room Room Object
         */

        function SetOpeningTimes(parsedOpenings, room) {
            var opening = 24;
            var close = 0;
            room.openingTimesCalendar = [];
            room.openingTimes = [parsedOpenings['Sunday'], parsedOpenings['Monday'], parsedOpenings['Tuesday'],
                parsedOpenings['Wednesday'], parsedOpenings['Thursday'],
                parsedOpenings['Friday'], parsedOpenings['Saturday']];
            if (room.config.mode == 3) {
                return;
            }
            for (var i = 0; i < 7; i++) {
                var tmp = room.openingTimes[i];
                if (tmp != null) {
                    for (var d = 0; d < tmp.length; d++) {
                        var day = getNextDayOfWeek(new MyDate(), i);
                        room.openingTimesCalendar.push({
                            "start": new Date(day.getFullYear(), day.getMonth(), day.getDate(),
                                tmp[d]['HourOpen'], tmp[d]['MinutesOpen']),
                            "end": new Date(day.getFullYear(), day.getMonth(),
                                day.getDate(), tmp[d]['HourClose'], tmp[d]['MinutesClose']),
                            "free": true
                        });
                        if (parseInt(tmp[d]['HourOpen']) < opening) {
                            opening = tmp[d]['HourOpen'];
                        }
                        if (parseInt(tmp[d]['HourClose']) > close) {
                            close = tmp[d]['HourClose'];
                            if (parseInt(tmp[d]['MinutesClose']) != 0) {
                                close++;
                            }
                        }
                    }
                }
            }
            if (parsedOpenings.length == 0) {
                opening = 0;
                close = 24;
            }
            room.openTimes = close - opening;
            $('#calendar_' + room.id).weekCalendar("option", "businessHours", {
                start: parseInt(opening),
                end: parseInt(close),
                limitDisplay: true
            });
        }

        /**
         * querys the Calendar data
         * @param ids ID'S of rooms to query as string, for e.g.: "5,17,8" or "5"
         */
        function queryCalendars(ids) {
            var url = "../../../api.php?do=locationinfo&action=calendar&id=" + ids;

            // Todo reimplement Frontend methode if needed
            /*
             if(!(room.config.calendarqueryurl === undefined)) {
             url = room.config.calendarqueryurl;
             }
             */
            $.ajax({
                url: url,
                dataType: 'json',
                cache: false,
                timeout: 30000,
                success: function (result) {
                    var l = result.length;
                    for (var i = 0; i < l; i++) {
                        updateCalendar(result[i].calendar, rooms[result[i].id]);
                    }


                }, error: function () {

                }
            });
        }

        /**
         * applays new calendar data to the calendar plugin and also saves it to the room object
         * @param json Calendar data JSON
         * @param room Room Object
         */
        function updateCalendar(json, room) {

            if (json == "") {
                console.log("Error: Calendar data was an empty string.");
                return;
            }
            try {
                room.timetable = json;
                if (room.config.mode != 3) {
                    var cal = $('#calendar_' + room.id);
                    cal.weekCalendar("option", "data", json);
                    cal.weekCalendar("refresh");
                    cal.weekCalendar("option", "defaultFreeBusy", {free: false});
                    cal.weekCalendar("updateFreeBusy", room.openingTimesCalendar);
                }
                ComputeCurrentState(room);
            } catch (e) {
                console.log("Error: Couldnt add calendar data");
                console.log(e);
            }
        }

        /**
         * scales calendar, called once on create and on window resize
         * @param room Room Object
         */
        function scaleCalendar(room) {
            if (room.config.mode == 3) {
                return;
            }
            if (room.openTimes == null) {
                room.openTimes = 24;
            }
            var cal = $('#calendar_' + room.id);
            var columnWidth = document.getElementById("calendar_" + room.id).getElementsByClassName("wc-day-1")[0].clientWidth;

            if (room.config.scaledaysauto) {
                var result = (cal.weekCalendar("option", "daysToShow") * columnWidth) / 100;
                result = parseInt(Math.min(Math.max(Math.abs(result), 1), 7));
                if (result != parseInt(cal.weekCalendar("option", "daysToShow"))) {

                    cal.weekCalendar("option", "daysToShow", Math.abs(result));
                }
            }
            if (((!room.config.scaledaysauto) || cal.weekCalendar("option", "daysToShow") == 1) && columnWidth < 85) {
                cal.weekCalendar("option", "useShortDayNames", true);
            } else {
                cal.weekCalendar("option", "useShortDayNames", false);
            }
            var clientHeight = $(window).height();
            if (roomsToshow == 4) {
                clientHeight = clientHeight / 2;
            }

            clientHeight = clientHeight - document.getElementById('header_' + room.id).clientHeight
                - document.getElementsByClassName("wc-time-column-header")[0].clientHeight - 2;

            if (room.config.mode == 1 && room.config.vertical) {

                clientHeight = clientHeight * (room.config.scale / 100);
                clientHeight -= 22;
            }
            clientHeight -= 6;
            var height = clientHeight / (room.openTimes * cal.weekCalendar("option", "timeslotsPerHour"));


            if (height < 30) {
                height = 30;
            }
            // Scale calendar font
            if(height > 120){
                cal.weekCalendar("option","textSize",28);
            }
            else if(height > 100){
                cal.weekCalendar("option","textSize",24);
            } else if(height > 80) {
                cal.weekCalendar("option","textSize",22);
            } else if(height > 70) {
                cal.weekCalendar("option","textSize",20);
            } else if (height > 60) {
                cal.weekCalendar("option","textSize",14);
            } else {
                cal.weekCalendar("option","textSize",13);
            }
            cal.weekCalendar("option", "timeslotHeight", height);
            if (room.openingTimesCalendar != null) {
                cal.weekCalendar("updateFreeBusy", room.openingTimesCalendar);
            }
            cal.weekCalendar("resizeCalendar");
            cal.weekCalendar("scrollToHour");

        }

        /**
         *  used for countdown
         * computes the time difference between 2 Date objects
         * @param a Date Object
         * @param b Date Object
         * @param room Room Object
         * @returns time string
         */
        function GetTimeDiferenceAsString(a, b, room) {
            if (a == null || b == null) {
                return "";
            }
            var milliseconds = a.getTime() - b.getTime();
            var seconds = Math.floor((milliseconds / 1000) % 60);
            milliseconds -= seconds * 1000;
            var minutes = Math.floor((milliseconds / (1000 * 60)) % 60);
            milliseconds -= minutes * 1000 * 60;
            var hours = Math.floor((milliseconds / (1000 * 60 * 60)) % 24);

            var days = Math.floor((milliseconds / (1000 * 60 * 60 * 24)) % 31);
            if (seconds < 10) {
                seconds = "0" + seconds;
            }
            if (minutes < 10) {
                minutes = "0" + minutes;
            }
            if (days != 0) {
                // dont show?
                return "";
            }
            if (room.config.einkmode) {
                return hours + ":" + minutes;
            }
            return hours + ":" + minutes + ":" + seconds;
        }

        /**
         * returns next closing time of a given room
         * @param room
         * @returns Date Object of next closing
         */
        function GetNextClosing(room) {
            var now = new MyDate();
            var day = now.getDay();
            var offset = 0;
            var bestdate;
            for (var a = 0; a < 7; a++) {
                var tmp = room.openingTimes[day];
                if (tmp != null) {
                    for (var i = 0; i < tmp.length; i++) {
                        var closeDate = new MyDate();
                        closeDate.setDate(now.getDate() + offset);
                        closeDate.setHours(tmp[i].HourClose);
                        closeDate.setMinutes(tmp[i].MinutesClose);
                        closeDate.setSeconds(0);
                        if (closeDate > now) {
                            if (!IsOpen(new Date(closeDate.getTime() + 60000), room)) {
                                if (bestdate == null || bestdate > closeDate) {
                                    bestdate = closeDate;
                                }
                            }
                        }
                    }
                }
                offset++;
                day++;
                if (day > 6) {
                    day = 0;
                }
            }
            return bestdate;
        }


        /**
         * checks if a room is on a given date/time open
         * @param date Date Object
         * @param room Room object
         * @returns bool for open or not
         */
        function IsOpen(date, room) {
            if (room.openingTimes == null) {
                return false;
            }
            var tmp = room.openingTimes[date.getDay()];
            if (tmp == null) {
                return false;
            }
            for (var i = 0; i < tmp.length; i++) {
                var openDate = new MyDate();
                openDate.setHours(tmp[i].HourOpen);
                openDate.setMinutes(tmp[i].MinutesOpen);
                var closeDate = new MyDate();
                closeDate.setHours(tmp[i].HourClose);
                closeDate.setMinutes(tmp[i].MinutesClose);
                if (openDate < date && closeDate > date) {
                    return true;
                }
            }
            return false;
        }


        /**
         * Retruns next Opening
         * @param room Room Object
         * @returns bestdate Date Object of next opening
         */
        function GetNextOpening(room) {
            var now = new MyDate();
            var day = now.getDay();
            var offset = 0;
            var bestdate;
            for (var a = 0; a < 7; a++) {
                if (room.openingTimes == null) {
                    return null;
                }
                var tmp = room.openingTimes[day];
                if (tmp != null) {
                    for (var i = 0; i < tmp.length; i++) {
                        var openDate = new MyDate();
                        openDate.setDate(now.getDate() + offset);
                        openDate.setHours(tmp[i].HourOpen);
                        openDate.setMinutes(tmp[i].MinutesOpen);
                        if (openDate > now) {
                            if (!IsOpen(new Date(openDate.getTime() - 60000), room)) {
                                if (bestdate == null || bestdate > openDate) {
                                    bestdate = openDate;
                                }
                            }
                        }
                    }
                }
                offset++;
                day++;
                if (day > 6) {
                    day = 0;
                }
            }
            return bestdate;
        }


        /**
         * Sets the free PCs number in the right corner and updates the sqare color acordingly
         * @param id Room id
         * @param seats Number of free PC's in the room
         */
        function SetFreeSeats(id, seats) {
            if (seats > 0) {
                $("#freeSeatsHeader_" + id).text(seats);
                $("#square_" + id).css('background-color', '#00dd10');
            } else if (seats == -1) {
                $("#freeSeatsHeader_" + id).text("");
                $("#square_" + id).css('background-color', 'red');
            } else {
                $("#freeSeatsHeader_" + id).text("0");
                $("#square_" + id).css('background-color', 'red');
            }
        }

        /**
         * Updates the Header of an Room
         * @param room Room Object
         */
        function UpdateRoomHeader(room) {
            var tmp = room.getState();
            if (tmp.state == "closed") {
                $("#courseHeading_" + room.id).text(t("closed", room.config.language) + " " + GetTimeDiferenceAsString(tmp.end, new MyDate(), room));
                SetFreeSeats(room.id, room.freePcs);
            } else if (tmp.state == "ClaendarEvent") {
                $("#courseHeading_" + room.id).text(tmp.title);
                SetFreeSeats(room.id, -1);
            } else if (tmp.state == "Free") {
                $("#courseHeading_" + room.id).text(t("free", room.config.language) + " " + GetTimeDiferenceAsString(tmp.end, new MyDate(), room));
                SetFreeSeats(room.id, room.freePcs);
            } else if (tmp.state == "FreeNoEnd") {
                $("#courseHeading_" + room.id).text(t("free", room.config.language));
                SetFreeSeats(room.id, room.freePcs);
            }
        }

        /**
         * computes state of a room, states are:
         * closed, FreeNoEnd, Free, ClaendarEvent.
         * @param Room Object
         */
        function ComputeCurrentState(room) {
            if (!IsOpen(new MyDate(), room)) {
                room.state = {state: "closed", end: GetNextOpening(room), title: "", next: ""};

                return;
            }
            var closing = GetNextClosing(room);

            var event = getNextEvent(room.timetable);

            // no event and no closing
            if (closing == null && event == null) {
                room.state = {state: "FreeNoEnd", end: "", title: "", next: ""};
                return;
            }

            // no event so closing is next
            if (event == null) {
                room.state = {state: "Free", end: closing, title: "", next: "closing"};
                return;
            }

            // event is at the moment
            if ((closing == null || event.start.getTime() < closing.getTime()) && event.start.getTime() < new MyDate()) {
                room.state = {state: "ClaendarEvent", end: event.end, title: event.title, next: ""};
                return;
            }

            // no closing so event is next
            if (closing == null) {
                room.state = {state: "Free", end: event.start, title: "", next: "event"};
                return;
            }

            // event sooner then closing
            if (event.start.getTime() < closing) {
                room.state = {state: "Free", end: event.start, title: "", next: "event"};
            } else if (event.start.getTime() > closing) {
                room.state = {state: "Free", end: closing, title: "", next: "closing"};
            }

        }


        /**
         * returns next event from a given json of events
         * @param json Json which contains the calendar data.
         * @returns event next Carlendar Event
         */
        function getNextEvent(json) {
            var event;
            var now = new MyDate();
            if (json == null) {
                return;
            }
            for (var i = 0; i < json.length; i++) {
                //event is now active
                if (json[i].start.getTime() < now.getTime() && json[i].end.getTime() > now.getTime()) {
                    return json[i];
                }
                //first element to consider
                if (event == null) {
                    if (json[i].start.getTime() > now.getTime()) {
                        event = json[i];
                    }
                }
                if (json[i].start.getTime() > now.getTime() && event.start.getTime() > json[i].start.getTime()) {
                    event = json[i];
                }
            }
            return event;
        }

        function getNextDayOfWeek(date, dayOfWeek) {
            // Code to check that date and dayOfWeek are valid left as an exercise ;)

            var resultDate = new Date(date.getTime());

            resultDate.setDate(date.getDate() + (7 + dayOfWeek - date.getDay()) % 7);

            return resultDate;
        }
        /*
         /========================================== Room Layout =============================================
         */


        var picSizeX = 3.8;
        var picSizeY = 3;

        /**
         * Generates the RoomLayout Div
         * @param width The width the RoomLayout should have (in percent).
         * @param room Room Object
         */
        function generateRoomLayoutDiv(width, room) {
            var div = document.createElement("div");
            div.id = "roomLayout_" + room.id;
            div.className = "roomLayoutDesign";
            if ((room.config.vertical && room.config.mode == 1) || (room.config.mode == 3) || (room.config.mode == 4)) {
                width = 100 + "%";
                div.float = "Top";
            }

            div.style.width = width;
            if(room.config.mode == 4){
                div.style.display = "none";
            }
            //document.body.appendChild(div);
            $("#room_" + room.id).append(div);


        }
        /**
         * Donwloads Room Layout Json (which contains the pc information for a given room)
         * @param room Room Object
         */
        function preInitRoom(room) {

            $.getJSON("../../../api.php?do=locationinfo&action=roominfo&id=" + room.id + "&coords=1", function (result) {
                generateRoomLayoutDiv((100 - room.config.scale) + "%", room);
                if (result[0] == null) {

                    return;
                }
                initRoom(result[0].computer, room);

            }).error(function () {

                generateRoomLayoutDiv((100 - room.config.scale) + "%", room);
            })
        }


        /**
         * Main funciton for generating the Room Layout
         * @param layout Layout Json
         * @param room Room Object
         */
        function initRoom(layout, room) {
            var maxX;
            var maxY;
            var minY;
            var minX;
            var xDifference;
            var yDifference;
            room.layout = layout;
            if (layout == null || layout.length == 0) {
                return;
            }
            if (room.config.rotation != 0) {
                rotateRoom(room.config.rotation, layout);
            }


            for (var i = 0; i < layout.length; i++) {
                if (!isNaN(parseInt(layout[i].x)) && !isNaN(parseInt(layout[i].y)) && layout[i].y != null && layout[i].y != null) {
                    if (minX === undefined) {
                        minX = parseInt(layout[i].x);
                    }
                    if (minY === undefined) {
                        minY = parseInt(layout[i].y);
                    }
                    if (maxX === undefined) {
                        maxX = parseInt(layout[i].x);
                    }
                    if (maxY === undefined) {
                        maxY = parseInt(layout[i].y);
                    }
                    if (parseInt(layout[i].x) < parseInt(minX)) {
                        minX = parseInt(layout[i].x);
                    }
                    if (parseInt(layout[i].y) < parseInt(minY)) {
                        minY = parseInt(layout[i].y);
                    }
                    if (parseInt(layout[i].x) > parseInt(maxX)) {
                        maxX = parseInt(layout[i].x);
                    }
                    if (parseInt(layout[i].y) > parseInt(maxY)) {
                        maxY = parseInt(layout[i].y);
                    }
                }
            }

            xDifference = maxX - minX;
            yDifference = maxY - minY;

            room.xDifference = xDifference;
            room.yDifference = yDifference;
            room.minX = minX;
            room.minY = minY;
            room.maxX = maxX;
            room.maxY = maxY;

            generateOffsetAndScale(room);
            setUpRoom(room, layout);
            scaleRoom(room);
            UpdatePc(layout, room);

        }

        /**
         * Computes offsets and scaling's for the RoomLayout
         * @param room Room Object
         */
        function generateOffsetAndScale(room) {

            var clientHeight = $(window).height();
            if (roomsToshow == 4) {
                clientHeight = clientHeight / 2;
            }

            clientHeight = clientHeight - document.getElementById('header_' + room.id).clientHeight - 5;

            if (roomsToshow > 1) {
                clientHeight -= 5;
            }
            if (room.config.vertical && room.config.mode == 1) {
                clientHeight = clientHeight * (1 - (room.config.scale / 100));
            }
            var roomLayout = document.getElementById('roomLayout_' + room.id);

            var clientWidth = roomLayout.clientWidth;
            //roomLayout.style.height = clientHeight + "px";

            var scaleX;
            if (room.xDifference != 0) {
                scaleX = clientWidth / room.xDifference;
            } else {
                scaleX = clientWidth;
            }
            var scaleY;
            if (room.yDifference != 0) {
                scaleY = clientHeight / room.yDifference;
            } else {
                scaleY = clientHeight;
            }
            var scaleYs = (clientHeight - (picSizeY * scaleY)) / room.yDifference;
            var scaleXs = (clientWidth - (picSizeX * scaleX)) / room.xDifference;
            if (scaleYs <= 0) {
                scaleYs = 9999;
            }
            if (scaleXs <= 0) {
                scaleXs = 9999;
            }


            var tmp = [scaleYs, scaleY, scaleXs, scaleX, (clientHeight * 0.9) / picSizeY, (clientWidth * 0.9) / picSizeX];
            room.scale = Math.min.apply(Math, tmp);
            room.xOffset = 0 - room.minX;
            room.yOffset = 0 - room.minY;
            room.xOffset += ((1 / 2 * (clientWidth - (((room.maxX + room.xOffset) * room.scale) + picSizeX * room.scale))) / room.scale);
            room.yOffset += ((1 / 2 * (clientHeight - (((room.maxY + room.yOffset) * room.scale) + picSizeY * room.scale))) / room.scale);
        }


        /**
         * adds images for each pc to Room Layout
         * @param room Room Object
         * @param layout Layout json
         */
        function setUpRoom(room, layout) {
            for (var i = 0; i < layout.length; i++) {

                if (layout[i].y != null && layout[i].x != null && !isNaN(layout[i].y) && !isNaN(layout[i].x)) {
                    var text = "<div class= 'PCImgDiv'  id ='layout_PC_div_" + room.id + "_" + layout[i].id + "'>" +

                        "<div class= 'OverlayDiv' id ='layout_PC_overlay_" + room.id + "_" + layout[i].id + "'>" +
                        "</div>" +
                        "<img class= 'pcImg' id ='layout_PC_" + room.id + "_" + layout[i].id + "'> </img>" +
                        "</div>";

                    $('#roomLayout_' + room.id).append(text);
                    if (layout[i].hasOwnProperty('overlay')) {
                        for (var a = 0; a < layout[i].overlay.length; a++) {
                            addOverlay($('#layout_PC_overlay_' + room.id + "_" + layout[i].id), layout[i].overlay[a]);
                        }
                    }
                }
            }
        }

        /**
         * Adds an overlay to an div(here the PC's shown in the RoomLayout).
         * @param object Object where the overlay should be added
         * @param overlayName name of the overlay (image name without ending)
         */
        function addOverlay(object, overlayName) {
            var a = [".svg", ".png", "jpg"];
            var imgname;
            for (var i = 0; i < a.length; a++) {
                if (imageExists("img/overlay/" + overlayName + a[i])) {
                    imgname = "img/overlay/" + overlayName + a[i];
                    break;
                }

            }
            if (imgname == null) {
                return;
            }
            var text = $("<img class='overlay'  src='" + imgname + "'></img>");
            text.addClass("overlay-" + overlayName);

            object.append(text);


        }


        var imgExists = {};

        /**
         * checks if images exists on the webserver(chaches it also)
         * @param image_url Path to the image
         */
        function imageExists(image_url) {
            if (!imgExists.hasOwnProperty(image_url)) {
                var http = new XMLHttpRequest();
                http.open('HEAD', image_url, false);
                http.send();
                imgExists[image_url] = http.status != 404;
            }
            return imgExists[image_url];

        }

        /**
         * Querys Pc states
         * @param ids Room ID's which should be queried. Format for e.g.: "20,5,6"
         */
        function queryRooms(ids) {
            $.ajax({
                url: "../../../api.php?do=locationinfo&action=roominfo&id=" + ids + "&coords=0",
                dataType: 'json',
                cache: false,
                timeout: 30000,
                success: function (result) {
                    var l = result.length;
                    if (result[0] == null) {
                        console.log("Error: Backend reported null back for RoomUpdate, this might happend if the room isn't" +
                            "configurated.");
                        return;
                    }
                    for (var i = 0; i < l; i++) {

                        UpdatePc(result[i].computer, rooms[result[i].id]);
                    }
                }, error: function () {

                }
            })
        }


        /**
         * Adjust pc coordinate depending on room rotation
         * @param r Rotation, from 0 - 3 (int)
         * @param layout Layout json
         */
        function rotateRoom(r, layout) {
            for (var z = 0; z < r; z++) {
                for (var i = 0; i < layout.length; i++) {
                    var x = parseInt(layout[i].x);
                    var y = parseInt(layout[i].y);
                    layout[i].x = y;
                    layout[i].y = -x;
                }
            }
        }

        /**
         * Positions the computer images in the roomLayout div accoring to ther potion and div size
         * @param room Room object
         */
        function scaleRoom(room) {
            if (room.layout == null) {
                return;
            }
            for (var i = 0; i < room.layout.length; i++) {
                if (room.layout[i].y != null && room.layout[i].x != null && !isNaN(room.layout[i].y) && !isNaN(room.layout[i].x)) {
                    var tmp = document.getElementById("layout_PC_div_" + room.id + "_" + room.layout[i].id);
                    var img = document.getElementById("layout_PC_" + room.id + "_" + room.layout[i].id);
                    if (tmp != null) {
                        tmp.style.width = (picSizeX * room.scale);
                        tmp.setAttribute("style", "width:" + (picSizeX * room.scale) + "px");
                        tmp.style.height = (picSizeY * room.scale) + "px";
                        tmp.style.left = ((parseInt(room.layout[i].x) + room.xOffset) * room.scale) + "px";
                        tmp.style.top = ((parseInt(room.layout[i].y) + room.yOffset) * room.scale ) + "px";
                    }
                }
            }
        }


        /**
         * Updates the PC's (images) in the room layout. Also Updates how many pc's are free.
         * @param update Update Json from query for one(!) room
         * @param room Room object
         */
        function UpdatePc(update, room) {
            if (update === undefined || update == null) {
                return;
            }
            var freePcs = 0;
            for (var i = 0; i < update.length; i++) {
                var imgobj = document.getElementById("layout_PC_" + room.id + "_" + update[i].id);


                var img;
                // Pc free
                if (update[i].pcState == "IDLE") {
                    if (supportSvg) {
                        img = "img/pc_free";
                    } else {
                        imgobj.style.backgroundColor = "green";
                    }
                    freePcs++;
                    // Pc in use
                } else if (update[i].pcState == "OCCUPIED") {
                    if (supportSvg) {
                        img = "img/pc_used";
                    } else {
                        imgobj.style.backgroundColor = "red";
                    }
                    // PC off
                } else if (update[i].pcState == "OFF") {
                    if (supportSvg) {
                        img = "img/pc_off";
                    } else {
                        imgobj.style.backgroundColor = "black";
                    }
                    freePcs++;
                } else {
                    if (supportSvg) {
                        img = "img/pc_defect";
                    } else {
                        imgobj.style.backgroundColor = "black";
                    }
                }

                if (imgobj != null && supportSvg) {
                    if (room.config.einkmode) {
                        img = img + "_eink";
                    }
                    imgobj.src = img + ".svg";
                }

            }

            room.freePcs = freePcs;


        }

        /*
         /========================================== Misc =============================================
         */
        var resizeTimeout;

        // called when browser window changes size
        // scales calendar and room layout acordingly

        $(window).resize(function () {
            clearTimeout(resizeTimeout);
            resizeTimeout = setTimeout(function () {

                for (var property in rooms) {

                    rooms[property].resized = true;
                    if (rooms[property].config.mode != null) {
                        if (rooms[property].config.mode != 3) {
                            scaleCalendar(rooms[property]);

                        }
                        if (rooms[property].config.mode != 2) {
                            generateOffsetAndScale(rooms[property]);
                            scaleRoom(rooms[property]);
                        }
                    }
                }
            }, 50);
        });


        /**
         * returns parameter value from the url
         *  @param sParam
         *  @returns value for given parameter
         */
        var getUrlParameter = function getUrlParameter(sParam) {
            var sPageURL = decodeURIComponent(window.location.search.substring(1)),
                sURLVariables = sPageURL.split('&'),
                sParameterName,
                i;

            for (i = 0; i < sURLVariables.length; i++) {
                sParameterName = sURLVariables[i].split('=');

                if (sParameterName[0] === sParam) {
                    return sParameterName[1] === undefined ? true : sParameterName[1];
                }
            }
        };

        /**
         * Function for translation
         * @param toTranslate key which we wan't to translate
         * @param lang languages in which should be translated
         * @returns r translated string
         */
        function t(toTranslate, lang) {

            var r;
            if (lang === undefined) {
                r = translation['en'][toTranslate];
            } else {
                r = translation[lang][toTranslate];
            }
            return r;
        }


        /**
         * Used in Mode 4, switches given room from Timetable to Roomlayout and vice versa
         * @param room
         */
        function switchLayout(room) {
            var car = document.getElementById("calendar_" + room.id);
            var roomLayout = document.getElementById("roomLayout_" + room.id);

            if (car.style.display == "none") {
                roomLayout.style.display = "none";
                car.style.display = "block";
                if (room.resized) {
                    scaleCalendar(room);
                    room.resized = false;
                }
            } else {
                car.style.display = "none";
                roomLayout.style.display = "block";
                if (room.resized) {
                    generateOffsetAndScale(room);
                    scaleRoom(room);
                    room.resized = false;
                }
            }
        }


        /**
         * adds a progressbar to a given room (id) used in mode 4
         * @param id room id
         */
        function generateProgressBar(id) {

            var div = document.createElement("div");
            div.id = "progressBar_" + id;
            div.classList.add("progressbar");
            //document.body.appendChild(div);
            $("#room_" + id).append(div);

        }
        /**
         * Animates the progressbar used in mode 4
         * @param roomId
         * @param time
         * @constructor
         */
        function MoveProgressBar(roomId, time) {
            var elem = document.getElementById("progressBar_" + roomId);
            var width = 1;
            var id = setInterval(frame, time /100);

            function frame() {
                if (width >= 100) {
                    clearInterval(id);
                } else {
                    width++;
                    elem.style.width = width + '%';
                }
            }
        }


    </script>
</head>
<body>
</body>
</html>