frontend: removed multidoorsign

author: Michael Scherle 2017-03-03 20:23:56 +0100
committer: Michael Scherle 2017-03-03 20:23:56 +0100
commit: 0b193e4737fd11328feb3be1b56c95fb040f0384 (patch)
tree: eecf2b9fc89b696c9639631cc2e987b5992edef6 /modules-available/locationinfo/frontend
parent: Fixed dummy class (diff)
download: slx-admin-0b193e4737fd11328feb3be1b56c95fb040f0384.tar.gz
slx-admin-0b193e4737fd11328feb3be1b56c95fb040f0384.tar.xz
slx-admin-0b193e4737fd11328feb3be1b56c95fb040f0384.zip
2 files changed, 703 insertions, 2020 deletions
diff --git a/modules-available/locationinfo/frontend/doorsign.html b/modules-available/locationinfo/frontend/doorsign.html
index 44f7e495..a5db0961 100755
--- a/modules-available/locationinfo/frontend/doorsign.html
+++ b/modules-available/locationinfo/frontend/doorsign.html
@@ -21,6 +21,7 @@ optional:
     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">
@@ -38,12 +39,19 @@ optional:
 		body {
 			font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
 			margin: 0;
+			width: 100%;
+			height: 100%;
+			float: left;
+			box-sizing: border-box;
+			display: flex;
+			background-color: #cacaca;
+			overflow: hidden;
 
 		}
 
 		.row {
 			background-color: #404040;
-			box-shadow: 0 2px 4px 0 black;
+			box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.25);
 			margin-bottom: 4px;
 
 			width: 100%;
@@ -54,14 +62,22 @@ optional:
 			display: table;
 			color: white;
 			padding: 0;
-			height: 80px;
+			height: 8vw;
+		}
 
+		.progressbar {
+			width: 0px;
+			height: 2px;
+			position: absolute;
+			background-color: red;
+			bottom: 0px;
+			z-index: 1;
 		}
 
 		.font {
 			display: table-cell;
 			vertical-align: middle;
-			font-size: 40px;
+			font-size: 3vw;
 			font-weight: bold
 		}
 
@@ -91,16 +107,32 @@ optional:
 
 		.roomLayoutDesign {
 			position: relative;
-			background: linear-gradient(#cccccc, white);
 			float: left;
 			boxSizing: border-box;
 		}
 
+		.roompadding {
+
+		}
+
+		.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 {
@@ -124,14 +156,14 @@ optional:
 			display: table;
 			float: right;
 			padding: 0;
-			width: 80px;
-			height: 80px;
+			width: 8vw;
+			height: 8vw;
 		}
 
 		.FreeSeatsFont {
 			display: table-cell;
 			vertical-align: middle;
-			font-size: 65px;
+			font-size: 6vw;
 			color: white;
 			top: 0;
 			margin: 0 auto;
@@ -200,89 +232,24 @@ optional:
 			border-color: grey;
 		}
 
-		@media (max-width: 1200px) {
-			.square {
-				height: 60px;
-				width: 60px;
-			}
-
-			.FreeSeatsFont {
-				font-size: 45px;
-			}
-
-			.font {
-				font-size: 26px;
-			}
-
-			.header {
-				height: 60px;
-
-			}
-		}
-
-		@media (max-width: 800px) {
-			.square {
-				height: 50px;
-				width: 50px;
-			}
-
-			.FreeSeatsFont {
-				font-size: 35px;
-			}
-
-			.font {
-				font-size: 20px;
-			}
-
-			.header {
-				height: 50px;
-
-			}
-		}
-
-		@media (max-width: 600px) {
-			.square {
-				height: 40px;
-				width: 40px;
-			}
-
-			.FreeSeatsFont {
-				font-size: 30px;
-			}
-
-			.font {
-				font-size: 18px;
-			}
-
-			.header {
-				height: 40px;
-
-			}
-		}
 
 	</style>
 	<script type='text/javascript'>
+
+		var rooms = {};
+		var lastSwitchTime;
+		var roomsToshow = 0;
+		var lastRoomUpdateTime;
+		var lastCalendarUpdateTime;
+		var roomIds;
+		//Todo change these
+		var CalendarUpdateTime = 60 * 1000;
+		var RoomUpdateTime = 60 * 1000;
+
 		var date;
-		var room;
-		var freeSeats;
-		var queryTimeCalendar;
-		var queryTimeRoom;
-		var openingTimes;
-		var state;
-		var openTimes;
-		var openingTimesCalendar = [];
-		var mode;
-		var data;
-		var roomId;
-		var verticalmode = false;
-		var scaleLayout;
-		var switchTime;
-		var rotation;
-		var daysToShow;
+
 		var configJson;
-		var configupdate;
-		var scaleDaysAuto = false;
-		var eInkMode = false;
+
 		var supportSvg = typeof SVGRect != "undefined";
 		var calendarQueryUrl;
 		var translation = {
@@ -308,7 +275,8 @@ optional:
 				"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'],
+				"longDays": ['Domingo', 'Segunda-feira', 'Terça-feira', 'Quarta-feira', 'Quinta-feira',
+					'Sexta-feira', 'Sábado'],
 				"to": "para"
 
 			}
@@ -317,227 +285,395 @@ optional:
 
 		$(document).ready(function () {
 			if (!getId()) {
+
 				return;
 			}
-			getConfig();
 
-		});
 
-		function getConfig() {
+		});
+		// Downloads the config of a room
+		function getConfig(id, room) {
 			$.ajax({
-				url: "../../../api.php?do=locationinfo&action=config&id=" + roomId,
+				url: "../../../api.php?do=locationinfo&action=config&id=" + id,
 				dataType: 'json',
 				cache: false,
 				timeout: 30000,
 				success: function (result) {
 					if (configJson == null) {
 						if (result.room == null) {
-							var heading = $("#courseHeading");
-							heading.text("Error: wrong id");
-							heading.css({'font-size': "30px"});
+							// Todo Error Handling: wrong id?
 							return;
 						}
-						getParamerter(result);
-						startMode();
+						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 {
-						// Todo resync time?
+
 						delete result.time;
-						if (JSON.stringify(configJson) != JSON.stringify(result)) {
+						if (JSON.stringify(rooms[id].config) != JSON.stringify(result)) {
+							// reload Page if someone changed config
 							location.reload(true);
 						}
 					}
-					configJson = result;
+					// check for config changes from time to time
 					setTimeout(function () {
-						getConfig();
-					}, configupdate);
+						getConfig(id, room);
+					}, room.config.configupdate);
+
+
 				}, error: function () {
-					var heading = $("#courseHeading");
-					heading.text("Error: couldn't get the config");
-					heading.css({'font-size': "30px"});
+					//Todo Error handling:
 				}
 			})
 		}
 
+
+		// gets the Parameter IDs from the Urls
 		function getId() {
-			roomId = getUrlParameter("id");
-			if (roomId == null) {
-				$("#courseHeading").text("Error: id required");
+			roomIds = getUrlParameter("id");
+			if (roomIds == null) {
+
+				var text = "<h1>Error: No Room Id's given in parameter </h1>";
+				$("body").append(text);
+
 				return false;
 			}
 
-			return true;
+			roomIds = roomIds.split(',');
+			if (roomIds.length > 4) {
+				roomIds.length = 4;
+			}
+
+			for (var i = 0; i < roomIds.length; i++) {
+				getConfig(roomIds[i], null);
+
+			}
+
 		}
-		function getParamerter(json) {
+
+
+		// gets Additional Parameters from the URL, and from the
+		// downloaded json.
+		// also makes sure parameters are in a given range
+		function getParamerter(room) {
 			var lang;
-			if (json != null) {
-				mode = parseInt(json.mode);
-				lang = json.lang;
-				daysToShow = parseInt(json.daystoshow);
-				scaleLayout = parseInt(json.scale);
-				switchTime = parseInt(json.switchtime) * 1000;
-				queryTimeCalendar = parseInt(json.calupdate) * 60 * 1000;
-				queryTimeRoom = parseInt(json.roomupdate) * 1000;
-				rotation = parseInt(json.rotation);
-				calendarQueryUrl = json.calendarqueryurl;
-				if (json.scaledaysauto != null) {
-					scaleDaysAuto = JSON.parse(json.scaledaysauto)
-				}
 
-				if (json.vertical != null) {
-					verticalmode = JSON.parse(json.vertical);
-				}
-				if (json.einkmode != null) {
-					eInkMode = JSON.parse(json.einkmode);
-				}
-				configupdate = parseInt(json.configupdate) * 60 * 1000;
-				room = json.room;
-			}
-			var time = new Date(json.time);
-			if (isNaN(time.getTime())) {
-				time = new Date();
-			}
-			SetUpDate(time);
+			lang = room.config.lang;
 
-			if (room != null) {
-				$("#roomHeader").text(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) {
-				mode = parseInt(getUrlParameter("mode"));
+				room.config.mode = parseInt(getUrlParameter("mode"));
 			}
 			if (getUrlParameter("calupdate") != null) {
-				queryTimeCalendar = (parseInt(getUrlParameter("calupdate")) * 60 * 1000);
+				room.config.calupdate = (parseInt(getUrlParameter("calupdate")) * 60 * 1000);
 			}
 			if (getUrlParameter("roomupdate") != null) {
-				queryTimeRoom = (parseInt(getUrlParameter("roomupdate")) * 1000);
+				room.config.roomupdate = (parseInt(getUrlParameter("roomupdate")) * 1000);
 			}
 			if (getUrlParameter("daystoshow") != null) {
-				daysToShow = parseInt(getUrlParameter("daystoshow"));
+				room.config.daystoshow = parseInt(getUrlParameter("daystoshow"));
 			}
 			if (getUrlParameter("scaledaysauto") == "true") {
-				scaleDaysAuto = true;
+				room.config.scaledaysauto = true;
 			}
 			if (getUrlParameter("vertical") == "true") {
-				verticalmode = true;
+				room.config.vertical = true;
 			}
 			if (getUrlParameter("einkmode") == "true") {
-				eInkMode = true;
+				room.config.einkmode = true;
 			}
 
 			if (getUrlParameter("scale") != null) {
-				scaleLayout = parseInt(getUrlParameter("scale"));
+				room.config.scale = parseInt(getUrlParameter("scale"));
 			}
 			if (getUrlParameter("rotation") != null) {
-				rotation = parseInt(getUrlParameter("rotation"));
+				room.config.rotation = parseInt(getUrlParameter("rotation"));
 			}
 			if (getUrlParameter("switchtime") != null) {
-				switchTime = (parseInt(getUrlParameter("switchtime")) * 1000);
+				room.config.switchtime = (parseInt(getUrlParameter("switchtime")) * 1000);
 			}
 			if (getUrlParameter("configupdate") != null) {
-				configupdate = (parseInt(getUrlParameter("configupdate")) * 60 * 1000);
+				room.config.configupdate = (parseInt(getUrlParameter("configupdate")) * 60 * 1000);
 			}
 
 			// parameter validation
-			if (switchTime == null || isNaN(switchTime) || switchTime > 120 || switchTime < 1) {
-				switchTime = 5;
+			if (room.config.switchtime == null || isNaN(room.config.switchtime) || room.config.switchtime > 120
+				|| room.config.switchtime < 1) {
+				room.config.switchtime = 5;
 			}
-			if (scaleLayout == null || isNaN(scaleLayout) || scaleLayout > 90 || scaleLayout < 10) {
-				scaleLayout = 50;
+			if (room.config.scale == null || isNaN(room.config.scale) || room.config.scale > 90 || room.config.scale < 10) {
+				room.config.scale = 50;
 			}
-			if (verticalmode == null) {
-				verticalmode = false;
+			if (room.config.vertical == null) {
+				room.config.vertical = false;
 			}
-			if (daysToShow == null || isNaN(daysToShow) || daysToShow > 7 || daysToShow < 1) {
-				daysToShow = 7;
+			if (room.config.daystoshow == null || isNaN(room.config.daystoshow) || room.config.daystoshow > 7
+				|| room.config.daystoshow < 1) {
+				room.config.daystoshow = 7;
 			}
 
-			if (queryTimeRoom == null || isNaN(queryTimeRoom) || queryTimeRoom < 1000) {
-				queryTimeRoom = 20 * 1000;
+			if (room.config.roomupdate == null || isNaN(room.config.roomupdate) || room.config.roomupdate < 1000) {
+				room.config.roomupdate = 20 * 1000;
 			}
-			if (configupdate == null || isNaN(configupdate) || (configupdate < 1)) {
-				configupdate = 30 * 60 * 1000;
+			if (room.config.configupdate == null || isNaN(room.config.configupdate) || (room.config.configupdate < 1)) {
+				room.config.configupdate = 30 * 60 * 1000;
 			}
 
-			if (queryTimeCalendar == null || isNaN(queryTimeCalendar) || queryTimeCalendar < 60 * 1000) {
-				queryTimeCalendar = 30 * 60 * 1000;
+			if (room.config.calupdate == null || isNaN(room.config.calupdate) || room.config.calupdate < 60 * 1000) {
+				room.config.calupdate = 30 * 60 * 1000;
 			}
-			if (mode == null || isNaN(mode) || mode > 4 || mode < 1) {
-				mode = 1;
+			if (room.config.mode == null || isNaN(room.config.mode) || room.config.mode > 4 || room.config.mode < 1) {
+				room.config.mode = 1;
 			}
-			if (rotation == null || isNaN(rotation) || rotation < 0 || rotation > 4) {
-				rotation = 0;
+			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) {
-				lang = getUrlParameter("lang");
+				room.config.lang = getUrlParameter("lang");
 			}
 			$('html').attr('lang', lang);
 		}
 
-		function startMode() {
-			var updateRate = 1000;
-			if (eInkMode) {
-				updateRate = updateRate * 60;
-			}
-			// mixed mode
-			if (mode == 1) {
-				setUpCalendar(scaleLayout + "%", daysToShow);
-				preInitRoom();
-				Update();
-				setInterval(function () {
-					Update();
-				}, updateRate);
-			}
-			// clendar only
-			if (mode == 2) {
-				setUpCalendar("100%", daysToShow);
-				Update();
-				setInterval(function () {
-					Update();
-				}, updateRate);
-				queryRoom();
-			}
-			// room only
-			if (mode == 3) {
-				preInitRoom();
-				$.getJSON("../../../api.php?do=locationinfo&action=openingtime&id=" + roomId, function (result) {
-					SetOpeningTimes(result);
-					queryCalendar();
-					Update();
-					setInterval(function () {
-						Update();
-					}, updateRate);
-				});
-
-			}
-			//swichting mode
-			if (mode == 4) {
-				setUpCalendar("100%", daysToShow);
-				preInitRoom();
-				generateProgressBar();
-				Update();
-				setInterval(function () {
-					Update();
-				}, 1000);
-				MoveProgressBar(switchTime);
-				setInterval(function () {
-					switchLayout();
-					MoveProgressBar(switchTime);
-				}, switchTime * 1000);
-			}
-		}
-
-
-		function setUpCalendar(percent, daysToShow) {
-			generateCalendarDiv(percent);
-			var $calendar = $("#calendar").weekCalendar({
+		// 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 property in rooms) {
+
+				var text = "<div class='roompadding'   id ='roompadding_" + rooms[property].id + "'></div>";
+				$("body").append(text);
+
+
+				var obj = document.getElementById("roompadding_" + rooms[property].id);
+				if (roomsToshow > 1) {
+					obj.style.padding = "5px";
+					if (i != 0) {
+						obj.style.paddingLeft = "0px";
+					}
+				}
+				obj.style.width = width;
+				obj.style.height = height;
+				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 = "8vw";
+					document.getElementById("square_" + rooms[property].id).style.height = "8vw";
+					document.getElementById("roomHeader_" + rooms[property].id).style.fontSize = "2vw";
+					document.getElementById("freeSeatsHeader_" + rooms[property].id).style.fontSize = "5vw";
+					document.getElementById("courseHeading_" + rooms[property].id).style.fontSize = "2vw";
+				}
+
+
+				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: checks which rooms are in which mode
+		function getUpdateIdsforMode(modearray) {
+			var roomIdsToUpdate = "";
+			for (var property in rooms) {
+				if (rooms[property].config.mode in modearray) {
+					if (roomIdsToUpdate == "") {
+						roomIdsToUpdate = rooms[property].id;
+					} else {
+						roomIdsToUpdate = roomIdsToUpdate + "," + rooms[property].id;
+					}
+				}
+			}
+			return roomIdsToUpdate;
+		}
+
+		// Main Update loop, this loop runs every 1 seconds and calls all
+		// function which should be called periodically
+		function mainUpdateLoop() {
+
+			//todo add config reload
+
+
+			//updates calendar
+			if (lastCalendarUpdateTime == null || lastCalendarUpdateTime + CalendarUpdateTime < MyDate().getTime()) {
+
+				//Todo
+				var roomIdsToUpdate = getUpdateIdsforMode([1, 2, 3, 4]);
+
+				if (roomIdsToUpdate != "") {
+					// Todo update calendars
+					queryCalendars(roomIdsToUpdate);
+				}
+
+				lastCalendarUpdateTime = MyDate().getTime();
+			}
+
+
+			// updates Pcs states
+			if (lastRoomUpdateTime == null || lastRoomUpdateTime + RoomUpdateTime < MyDate().getTime()) {
+
+				var roomIdsToUpdate = getUpdateIdsforMode([1, 2, 3, 4]);
+
+				if (roomIdsToUpdate != "") {
+					queryRooms(roomIdsToUpdate);
+				}
+				lastRoomUpdateTime = MyDate().getTime();
+			}
+
+
+			// 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 * 1000 < 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 * 1000;
+						}
+					}
+
+					//
+				}
+				// 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;
+
+		}
+
+		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: false,
+				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;
+
+		}
+
+
+		function setUpCalendar(percent, daysToShow, room) {
+			generateCalendarDiv(percent, room);
+			var $calendar = $("#calendar_" + room.id).weekCalendar({
 				timeslotsPerHour: 1,
 				timeslotHeight: 20,
 				daysToShow: daysToShow,
 				height: function ($calendar) {
-					var height = $(window).height() - document.getElementById('header').clientHeight - 5;
-					if (mode == 1 && verticalmode) {
-						height = height * (scaleLayout / 100)
+					var height = $(window).height() - document.getElementById('header_' + room.id).clientHeight - 5;
+					if (room.mode == 1 && room.config.vertical) {
+						height = height * (room.config.scale / 100)
 					}
 					return height;
 				},
@@ -565,47 +701,53 @@ optional:
 				displayFreeBusys: true,
 				defaultFreeBusy: {free: false}
 			});
-			$.getJSON("../../../api.php?do=locationinfo&action=openingtime&id=" + roomId, function (result) {
-				SetOpeningTimes(result)
+			getOpeningTimes(room);
+
+
+		}
+
+		function getOpeningTimes(room) {
+			$.getJSON("../../../api.php?do=locationinfo&action=openingtime&id=" + room.id, function (result) {
+				SetOpeningTimes(result[0].openingtime, room);
+				scaleCalendar(room);
+
 			})
-				.success(function () {
-					scaleCalendar();
-					queryCalendar();
-				})
 				.error(function () {
-					scaleCalendar();
-					queryCalendar();
+					scaleCalendar(room);
+
 				})
 		}
 
-		function generateCalendarDiv(width) {
+		function generateCalendarDiv(width, room) {
 			var div = document.createElement("div");
-			div.id = "calendar";
+			div.id = "calendar_" + room.id;
 			div.className = "calendar";
-			if (verticalmode && mode == 1) {
+			if (room.config.vertical && room.config.mode == 1) {
 				width = 100 + "%";
 				div.float = "Top";
 			}
 			div.style.width = width;
-			document.body.appendChild(div);
+			//document.body.appendChild(div);
+			$("#room_" + room.id).append(div);
+
 		}
 
-		function SetOpeningTimes(parsedOpenings) {
+		function SetOpeningTimes(parsedOpenings, room) {
 			var opening = 24;
 			var close = 0;
-			openingTimesCalendar = [];
-			openingTimes = [parsedOpenings['Sunday'], parsedOpenings['Monday'], parsedOpenings['Tuesday'],
+			room.openingTimesCalendar = [];
+			room.openingTimes = [parsedOpenings['Sunday'], parsedOpenings['Monday'], parsedOpenings['Tuesday'],
 				parsedOpenings['Wednesday'], parsedOpenings['Thursday'],
 				parsedOpenings['Friday'], parsedOpenings['Saturday']];
-			if (mode == 3) {
+			if (room.config.mode == 3) {
 				return;
 			}
 			for (var i = 0; i < 7; i++) {
-				var tmp = openingTimes[i];
+				var tmp = room.openingTimes[i];
 				if (tmp != null) {
 					for (var d = 0; d < tmp.length; d++) {
 						var day = getNextDayOfWeek(new MyDate(), i);
-						openingTimesCalendar.push({
+						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(),
@@ -628,82 +770,115 @@ optional:
 				opening = 0;
 				close = 24;
 			}
-			openTimes = close - opening;
-			$('#calendar').weekCalendar("option", "businessHours", {
+			room.openTimes = close - opening;
+			$('#calendar_' + room.id).weekCalendar("option", "businessHours", {
 				start: parseInt(opening),
 				end: parseInt(close),
 				limitDisplay: true
 			});
 		}
-		function queryCalendar() {
-			var url =  "../../../api.php?do=locationinfo&action=calendar&id=" + roomId;
-			if(!(calendarQueryUrl === undefined)) {
-				url = calendarQueryUrl;
-			}
+		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) {
-					data = result;
-					updateCalendar(result);
-					setTimeout(queryCalendar, queryTimeCalendar);
+					//todo Update every calendar
+					var l = result.length;
+					// Todo reimplement when backend working
+
+					for (var i = 0; i < l; i++) {
+
+						//todo test this
+
+						updateCalendar(result[i].calendar, rooms[result[i].id]);
+					}
+
+
 				}, error: function () {
-					setTimeout(queryCalendar, queryTimeCalendar);
+
 				}
 			});
 		}
 
-		function updateCalendar(json) {
-			if (mode != 3) {
-				var cal = $('#calendar');
-				cal.weekCalendar("option", "data", json);
-				cal.weekCalendar("refresh");
-				cal.weekCalendar("option", "defaultFreeBusy", {free: false});
-				cal.weekCalendar("updateFreeBusy", openingTimesCalendar);
+
+		function updateCalendar(json, room) {
+
+			if (json == "") {
+				console.log("Error: Calendar data was an empty string.");
+				return;
+			}
+			try {
+				room.timetable = result[i].calendar;
+				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) {
+				consol.log("Error: Couldnt add celndar data");
 			}
-			ComputeCurrentState();
 		}
 
-		function scaleCalendar() {
+		function scaleCalendar(room) {
 
-			if (openTimes == null) {
-				openTimes = 24;
+			if (room.openTimes == null) {
+				room.openTimes = 24;
 			}
-			var cal = $('#calendar');
-			var columnWidth = document.getElementsByClassName("wc-day-1")[0].clientWidth;
+			var cal = $('#calendar_' + room.id);
+			var columnWidth = document.getElementById("calendar_" + room.id).getElementsByClassName("wc-day-1")[0].clientWidth;
 
-			if (scaleDaysAuto) {
+			if (room.config.scaledaysauto) {
 				var result = (44 + 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 (((!scaleDaysAuto) || cal.weekCalendar("option", "daysToShow") == 1) && columnWidth < 85) {
+			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() - document.getElementById('header').clientHeight - document.getElementsByClassName("wc-time-column-header")[0].clientHeight - 10;
-			if (mode == 1 && verticalmode) {
+			var clientHeight = $(window).height() - document.getElementById('header_' + room.id).clientHeight
+				- document.getElementsByClassName("wc-time-column-header")[0].clientHeight - 10;
+			if (roomsToshow > 1) {
+				clientHeight -= 5;
+			}
+			if (room.config.mode == 1 && room.config.vertical) {
 
-				clientHeight = clientHeight * (scaleLayout / 100);
+				clientHeight = clientHeight * (room.config.scale / 100);
 				clientHeight -= 22;
 
 			}
 
 
-			var height = clientHeight / (openTimes * cal.weekCalendar("option", "timeslotsPerHour"));
+			var height = clientHeight / (room.openTimes * cal.weekCalendar("option", "timeslotsPerHour"));
 			cal.weekCalendar("option", "timeslotHeight", height);
-			cal.weekCalendar("updateFreeBusy", openingTimesCalendar);
+			cal.weekCalendar("updateFreeBusy", room.openingTimesCalendar);
 		}
 		/**
 		 * @return {string}
 		 * @return {string}
 		 */
-		function GetTimeDiferenceAsString(a, b) {
+
+		// used for countdown
+		// computes the time difference between 2 Date objects
+
+		function GetTimeDiferenceAsString(a, b, room) {
 			if (a == null || b == null) {
 				return "";
 			}
@@ -725,26 +900,28 @@ optional:
 				// dont show?
 				return "";
 			}
-			if (eInkMode) {
+			if (room.config.einkmode) {
 				return hours + ":" + minutes;
 			}
 			return hours + ":" + minutes + ":" + seconds;
 		}
-		function GetNextClosing() {
+
+		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 = openingTimes[day];
+				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))) {
+							if (!IsOpen(new Date(closeDate.getTime() + 60000), room)) {
 								if (bestdate == null || bestdate > closeDate) {
 									bestdate = closeDate;
 								}
@@ -763,12 +940,15 @@ optional:
 		/**
 		 * @return {boolean}
 		 */
-		function IsOpenNow() {
+
+		// Checks if given room is open now
+		function IsOpenNow(room) {
 			var now = new MyDate();
-			if (openingTimes == null) {
+			if (room.openingTimes == null) {
+
 				return false;
 			}
-			var tmp = openingTimes[now.getDay()];
+			var tmp = room.openingTimes[now.getDay()];
 			if (tmp == null) {
 				return false;
 			}
@@ -788,11 +968,11 @@ optional:
 		/**
 		 * @return {boolean}
 		 */
-		function IsOpen(date) {
-			if (openingTimes == null) {
+		function IsOpen(date, room) {
+			if (room.openingTimes == null) {
 				return false;
 			}
-			var tmp = openingTimes[date.getDay()];
+			var tmp = room.openingTimes[date.getDay()];
 			if (tmp == null) {
 				return false;
 			}
@@ -811,16 +991,16 @@ optional:
 		}
 
 
-		function GetNextOpening() {
+		function GetNextOpening(room) {
 			var now = new MyDate();
 			var day = now.getDay();
 			var offset = 0;
 			var bestdate;
 			for (var a = 0; a < 7; a++) {
-				if (openingTimes == null) {
+				if (room.openingTimes == null) {
 					return null;
 				}
-				var tmp = openingTimes[day];
+				var tmp = room.openingTimes[day];
 				if (tmp != null) {
 					for (var i = 0; i < tmp.length; i++) {
 						var openDate = new MyDate();
@@ -828,7 +1008,7 @@ optional:
 						openDate.setHours(tmp[i].HourOpen);
 						openDate.setMinutes(tmp[i].MinutesOpen);
 						if (openDate > now) {
-							if (!IsOpen(new Date(openDate.getTime() - 60000))) {
+							if (!IsOpen(new Date(openDate.getTime() - 60000), room)) {
 								if (bestdate == null || bestdate > openDate) {
 									bestdate = openDate;
 								}
@@ -845,106 +1025,87 @@ optional:
 			return bestdate;
 		}
 
-		function SetFreeSeats(_freeSeats) {
-			if (_freeSeats > 0) {
-				$("#freeSeatsHeader").text(_freeSeats);
-				$(".square").css('background-color', '#00dd10');
-			} else if (_freeSeats == -1) {
-				$("#freeSeatsHeader").text("");
-				$(".square").css('background-color', 'red');
+
+		// sets Header Text  of a 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").text("0");
-				$(".square").css('background-color', 'red');
+				$("#freeSeatsHeader_" + id).text("0");
+				$("#square_" + id).css('background-color', 'red');
 			}
-			freeSeats = _freeSeats;
 		}
 
-		function Update() {
-			var tmp = GetState();
-
-			if (tmp == null) {
-				ComputeCurrentState();
-				return;
-			}
+		function UpdateRoomHeader(room) {
+			var tmp = room.getState();
 			if (tmp.state == "closed") {
-				$("#courseHeading").text(t("closed") + " " + GetTimeDiferenceAsString(tmp.end, new MyDate()));
-				SetFreeSeats(-1);
+				$("#courseHeading_" + room.id).text(t("closed") + " " + GetTimeDiferenceAsString(tmp.end, new MyDate(), room));
+				SetFreeSeats(room.id, -1);
 			} else if (tmp.state == "ClaendarEvent") {
-				$("#courseHeading").text(state.titel);
-				SetFreeSeats(-1);
+				$("#courseHeading_" + room.id).text(state.titel);
+				SetFreeSeats(room.id, -1);
 			} else if (tmp.state == "Free") {
-				$("#courseHeading").text(t("free") + " " + GetTimeDiferenceAsString(tmp.end, new MyDate()));
-				SetFreeSeats(currentfreePcs);
+				$("#courseHeading_" + room.id).text(t("free") + " " + GetTimeDiferenceAsString(tmp.end, new MyDate(), room));
+				SetFreeSeats(room.id, room.freePcs);
 			} else if (tmp.state == "FreeNoEnd") {
-				$("#courseHeading").text(t("free"));
-				SetFreeSeats(currentfreePcs);
-			}
-			var now = new MyDate();
-			//console.log(now.getHours()+":"+now.getMinutes()+":"+now.getSeconds());
-			// reload if date Changes
-			if (date != null) {
-				if (date.getDate() != now.getDate()) {
-					location.reload(true);
-				}
+				$("#courseHeading_" + room.id).text(t("free"));
+				SetFreeSeats(room.id, room.freePcs);
 			}
-			date = now;
 		}
 
-		function GetState() {
-			if (state == null) {
-				ComputeCurrentState();
-				return state;
-			}
-			if (state.end != "") {
-				if (state.end < new MyDate()) {
-					ComputeCurrentState();
-				}
-			}
-			return state;
-		}
 
-		function ComputeCurrentState() {
-			if (!IsOpenNow()) {
-				state = {state: "closed", end: GetNextOpening(), titel: "", next: ""};
+		function ComputeCurrentState(room) {
+			if (!IsOpenNow(room)) {
+				room.state = {state: "closed", end: GetNextOpening(room), titel: "", next: ""};
+
 				return;
 			}
-			var closing = GetNextClosing();
-			var event = getNextEvent(data);
+			var closing = GetNextClosing(room);
+
+			var event = getNextEvent(room.timetable);
 			// no event and no closing
 			if (closing == null && event == null) {
-				state = {state: "FreeNoEnd", end: "", titel: "", next: ""};
+				room.state = {state: "FreeNoEnd", end: "", titel: "", next: ""};
 				return;
 			}
 
 			// no event so closing is next
 			if (event == null) {
-				state = {state: "Free", end: closing, titel: "", next: "closing"};
+				room.state = {state: "Free", end: closing, titel: "", next: "closing"};
 				return;
 			}
 
 			// event is at the moment
-			if (event.start.getTime() < closing.getTime() && event.start.getTime() < new MyDate()) {
-				state = {state: "ClaendarEvent", end: event.end, titel: event.title, next: ""};
+			if ((closing == null || event.start.getTime() < closing.getTime()) && event.start.getTime() < new MyDate()) {
+				room.state = {state: "ClaendarEvent", end: event.end, titel: event.title, next: ""};
 				return;
 			}
 
 			// no closing so event is next
 			if (closing == null) {
-				state = {state: "Free", end: event.start, titel: "", next: "event"};
+				room.state = {state: "Free", end: event.start, titel: "", next: "event"};
 				return;
 			}
 
 			// event sooner then closing
 			if (event.start.getTime() < closing) {
-				state = {state: "Free", end: event.start, titel: "", next: "event"};
+				room.state = {state: "Free", end: event.start, titel: "", next: "event"};
 			} else if (event.start.getTime() > closing) {
-				state = {state: "Free", end: closing, titel: "", next: "closing"};
+				room.state = {state: "Free", end: closing, titel: "", next: "closing"};
 			}
+
 		}
 
 		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()) {
@@ -975,110 +1136,126 @@ optional:
 		/*
 		 /========================================== Room Layout =============================================
 		 */
-		var scale;
-		var xOffset;
-		var yOffset;
+
+
 		var picSizeX = 3.8;
 		var picSizeY = 3;
-		var Layout;
-		var LayoutJson;
-		var maxX;
-		var maxY;
-		var minY;
-		var minX;
-		var xDifference;
-		var yDifference;
-		var currentfreePcs = 0;
-
-		function generateRoomLayoutDiv(width) {
+
+
+		function generateRoomLayoutDiv(width, room) {
 			var div = document.createElement("div");
-			div.id = "roomLayout";
+			div.id = "roomLayout_" + room.id;
 			div.className = "roomLayoutDesign";
-			if ((verticalmode && mode == 1) || (mode == 3) || (mode == 4)) {
+			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;
-			document.body.appendChild(div);
+			//document.body.appendChild(div);
+			$("#room_" + room.id).append(div);
 
 		}
-		function preInitRoom() {
-			$.getJSON("../../../api.php?do=locationinfo&action=roominfo&id=" + roomId + "&coords=1", function (result) {
-				initRoom(result, (100 - scaleLayout) + "%")
+		function preInitRoom(room) {
+			$.getJSON("../../../api.php?do=locationinfo&action=roominfo&id=" + room.id + "&coords=1", function (result) {
+				if (result[0] == null) {
+					return;
+				}
+				initRoom(result[0].computer, (100 - room.config.scale) + "%", room);
+
 			}).error(function () {
-				generateRoomLayoutDiv((100 - scaleLayout) + "%");
+
+				generateRoomLayoutDiv((100 - room.config.scale) + "%", room);
 			})
 		}
 
 
-		function initRoom(Json, scale) {
+		function initRoom(layout, scale, room) {
+			var maxX;
+			var maxY;
+			var minY;
+			var minX;
+			var xDifference;
+			var yDifference;
+			room.layout = layout;
 
-			Layout = Json;
-			if (Layout == null || Layout.length == 0) {
+			if (layout == null || layout.length == 0) {
 				return;
 			}
-			generateRoomLayoutDiv(scale);
-			if (rotation != 0) {
-				rotateRoom(rotation);
+			generateRoomLayoutDiv(scale, room);
+			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) {
+			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);
+						minX = parseInt(layout[i].x);
 					}
 					if (minY === undefined) {
-						minY = parseInt(Layout[i].y);
+						minY = parseInt(layout[i].y);
 					}
 					if (maxX === undefined) {
-						maxX = parseInt(Layout[i].x);
+						maxX = parseInt(layout[i].x);
 					}
 					if (maxY === undefined) {
-						maxY = parseInt(Layout[i].y);
+						maxY = parseInt(layout[i].y);
 					}
-					if (parseInt(Layout[i].x) < parseInt(minX)) {
-						minX = parseInt(Layout[i].x);
+					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].y) < parseInt(minY)) {
+						minY = parseInt(layout[i].y);
 					}
-					if (parseInt(Layout[i].x) > parseInt(maxX)) {
-						maxX = parseInt(Layout[i].x);
+					if (parseInt(layout[i].x) > parseInt(maxX)) {
+						maxX = parseInt(layout[i].x);
 					}
-					if (parseInt(Layout[i].y) > parseInt(maxY)) {
-						maxY = parseInt(Layout[i].y);
+					if (parseInt(layout[i].y) > parseInt(maxY)) {
+						maxY = parseInt(layout[i].y);
 					}
 				}
 			}
 
 			xDifference = maxX - minX;
 			yDifference = maxY - minY;
-			generateOffsetAndScale();
-			setUpRoom();
+			room.xDifference = xDifference;
+			room.yDifference = yDifference;
+			room.minX = minX;
+			room.minY = minY;
+			room.maxX = maxX;
+			room.maxY = maxY;
+
+			generateOffsetAndScale(room);
+			setUpRoom(room, layout);
 		}
 
-		function generateOffsetAndScale() {
-			var clientHeight = ($(window).height() - document.getElementById('header').clientHeight - 5);
-			if (verticalmode && mode == 1) {
-				clientHeight = clientHeight * (1 - (scaleLayout / 100));
+		function generateOffsetAndScale(room) {
+			var clientHeight = ($(window).height() - 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));
 			}
 			($("#roomLayout")).height(clientHeight);
-			var clientWidth = document.getElementById('roomLayout').clientWidth;
+			var roomLayout = document.getElementById('roomLayout_' + room.id);
+			var clientWidth = roomLayout.clientWidth;
+			roomLayout.style.height = clientHeight + "px";
+
 			var scaleX;
-			if (xDifference != 0) {
-				scaleX = clientWidth / xDifference;
+			if (room.xDifference != 0) {
+				scaleX = clientWidth / room.xDifference;
 			} else {
 				scaleX = clientWidth;
 			}
 			var scaleY;
-			if (yDifference != 0) {
-				scaleY = clientHeight / yDifference;
+			if (room.yDifference != 0) {
+				scaleY = clientHeight / room.yDifference;
 			} else {
 				scaleY = clientHeight;
 			}
-			var scaleYs = (clientHeight - (picSizeY * scaleY)) / yDifference;
-			var scaleXs = (clientWidth - (picSizeX * scaleX)) / xDifference;
+			var scaleYs = (clientHeight - (picSizeY * scaleY)) / room.yDifference;
+			var scaleXs = (clientWidth - (picSizeX * scaleX)) / room.xDifference;
 			if (scaleYs <= 0) {
 				scaleYs = 9999;
 			}
@@ -1086,146 +1263,159 @@ optional:
 				scaleXs = 9999;
 			}
 			var tmp = [scaleYs, scaleY, scaleXs, scaleX];
-			scale = Math.min.apply(Math, tmp);
-			xOffset = 0 - minX;
-			yOffset = 0 - minY;
-			xOffset += ((1 / 2 * (clientWidth - (((maxX + xOffset) * scale) + picSizeX * scale))) / scale);
-			yOffset += ((1 / 2 * (clientHeight - (((maxY + yOffset) * scale) + picSizeY * scale))) / scale);
+			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);
 		}
 
-		function setUpRoom() {
-			for (var i = 0; i < Layout.length; i++) {
+		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)) {
+				if (layout[i].y != null && layout[i].x != null && !isNaN(layout[i].y) && !isNaN(layout[i].x)) {
 					var img = $('<img />',
 						{
-							id: "layout_PC" + Layout[i].id,
+							id: "layout_PC_" + room.id + "_" + layout[i].id,
 							class: "pcImg"
 						})
-						.appendTo($('#roomLayout'));
+						.appendTo($('#roomLayout_' + room.id));
 				}
 			}
-			scaleRoom();
-			UpdatePc(Layout);
-			queryRoom();
+			scaleRoom(room);
+			UpdatePc(layout, room);
+
 		}
 
-		// possible fix for long delay of updates after long runtime
-		function queryRoom() {
+
+		function queryRooms(ids) {
 			$.ajax({
-				url: "../../../api.php?do=locationinfo&action=roominfo&id=" + roomId + "&coords=1",
+				url: "../../../api.php?do=locationinfo&action=roominfo&id=" + ids + "&coords=0",
 				dataType: 'json',
 				cache: false,
 				timeout: 30000,
 				success: function (result) {
-					if (LayoutJson != JSON.stringify(result)) {
-						LayoutJson = JSON.stringify(result);
-						UpdatePc(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]);
 					}
-					setTimeout(queryRoom, queryTimeRoom);
 				}, error: function () {
-					setTimeout(queryRoom, queryTimeRoom);
+
 				}
 			})
 		}
 
-		function rotateRoom(r) {
+		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;
+				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;
 				}
 			}
 		}
 
-		function scaleRoom() {
-			if (Layout == null) {
+		function scaleRoom(room) {
+			if (room.layout == null) {
 				return;
 			}
-			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 tmp = document.getElementById("layout_PC" + Layout[i].id);
-					if(tmp != null) {
-						tmp.width = (picSizeX * scale);
-						tmp.height = (picSizeY * scale);
-						tmp.style.left = ((parseInt(Layout[i].x) + xOffset) * scale) + "px";
-						tmp.style.top = ((parseInt(Layout[i].y) + yOffset) * scale ) + "px";
+			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_" + room.id + "_" + room.layout[i].id);
+					if (tmp != null) {
+						tmp.width = (picSizeX * room.scale);
+						tmp.height = (picSizeY * room.scale);
+						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";
 					}
 				}
 			}
 		}
 
 
-		function UpdatePc(update) {
+		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" + update[i].id);
-				if (imgobj != null) {
-
-					var img;
-					// Pc free
-					if (update[i].pcState == "0") {
-						if (supportSvg) {
-							img = "img/pc_free";
-						} else {
-							imgobj.style.backgroundColor = "green";
-						}
-						freePcs++;
-						// Pc in use
-					} else if (update[i].pcState == "1") {
-						if (supportSvg) {
-							img = "img/pc_used";
-						} else {
-							imgobj.style.backgroundColor = "red";
-						}
-						// PC off
-					} else if(update[i].pcState == "2"){
-						if (supportSvg) {
-							img = "img/pc_off";
-						} else {
-							imgobj.style.backgroundColor = "black";
-						}
-						freePcs++;
-					}else {
-						if (supportSvg) {
-							img = "img/pc_defect";
-						} else {
-							imgobj.style.backgroundColor = "black";
-						}
+				var imgobj = document.getElementById("layout_PC_" + room.id + "_" + update[i].id);
+
+
+				var img;
+				// Pc free
+				if (update[i].pcState == "0") {
+					if (supportSvg) {
+						img = "img/pc_free";
+					} else {
+						imgobj.style.backgroundColor = "green";
+					}
+					freePcs++;
+					// Pc in use
+				} else if (update[i].pcState == "1") {
+					if (supportSvg) {
+						img = "img/pc_used";
+					} else {
+						imgobj.style.backgroundColor = "red";
+					}
+					// PC off
+				} else if (update[i].pcState == "2") {
+					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 (eInkMode) {
-							img = img + "_eink";
-						}
-						imgobj.src = img + ".svg";
+				if (imgobj != null && supportSvg) {
+					if (room.config.einkmode) {
+						img = img + "_eink";
 					}
+					imgobj.src = img + ".svg";
 				}
+
 			}
-			if (state == null || state.state == "FreeNoEnd" || state.state == "Free") {
-				currentfreePcs = freePcs;
-			}
+
+			room.freePcs = freePcs;
+
 
 		}
 
 		/*
 		 /========================================== Misc =============================================
 		 */
-		var resized = false;
+
 		$(window).resize(function () {
-			resized = true;
+
+
 			setTimeout(function () {
-				if (mode != null) {
-					if (mode != 3) {
-						scaleCalendar();
 
-					}
-					if (mode != 2) {
-						generateOffsetAndScale();
-						scaleRoom();
+				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);
@@ -1254,40 +1444,38 @@ optional:
 			return r;
 		}
 
-		function switchLayout() {
-			var car = document.getElementById("calendar");
-			var room = document.getElementById("roomLayout");
+		function switchLayout(room) {
+			var car = document.getElementById("calendar_" + room.id);
+			var roomLayout = document.getElementById("roomLayout_" + room.id);
 
 			if (car.style.display == "none") {
-				room.style.display = "none";
+				roomLayout.style.display = "none";
 				car.style.display = "block";
-				if (resized) {
-					scaleCalendar();
-					resized = false;
+				if (room.resized) {
+					scaleCalendar(room);
+					room.resized = false;
 				}
 			} else {
 				car.style.display = "none";
-				room.style.display = "block";
-				if (resized) {
-					generateOffsetAndScale();
-					scaleRoom();
-					resized = false;
+				roomLayout.style.display = "block";
+				if (room.resized) {
+					generateOffsetAndScale(room);
+					scaleRoom(room);
+					room.resized = false;
 				}
 			}
 		}
-		function generateProgressBar() {
+		function generateProgressBar(id) {
+
 			var div = document.createElement("div");
-			div.style.width = "0px";
-			div.style.height = "2px";
-			div.style.position = "absolute";
-			div.id = "progressBar";
-			div.style.backgroundColor = "red";
-			div.style.bottom = "0px";
-			div.style.zIndex = "1";
-			document.body.appendChild(div);
-		}
-		function MoveProgressBar(time) {
-			var elem = document.getElementById("progressBar");
+			div.id = "progressBar_" + id;
+			div.classList.add("progressbar");
+			//document.body.appendChild(div);
+			$("#room_" + id).append(div);
+
+		}
+		function MoveProgressBar(roomId, time) {
+			var elem = document.getElementById("progressBar_" + roomId);
 			var width = 1;
 			var id = setInterval(frame, time * 10);
 
@@ -1305,17 +1493,5 @@ optional:
 	</script>
 </head>
 <body>
-<div id="header" class="row">
-	<div class="header col-2">
-		<div class="font" id="roomHeader"></div>
-	</div>
-	<div class="col-1 courseText header">
-		<div class="font" id="courseHeading"></div>
-	</div>
-	<div class="square .col-2">
-		<div class="FreeSeatsFont" id="freeSeatsHeader"></div>
-	</div>
-</div>
-
 </body>
 </html>
diff --git a/modules-available/locationinfo/frontend/multidoorsign.html b/modules-available/locationinfo/frontend/multidoorsign.html
deleted file mode 100755
index 953db690..00000000
--- a/modules-available/locationinfo/frontend/multidoorsign.html
+++ /dev/null
@@ -1,1493 +0,0 @@
-<!--
-
-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;
-			display: flex;
-			background-color: #cacaca;
-			overflow: hidden;
-
-		}
-
-		.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: 0px;
-			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 {
-
-		}
-
-		.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;
-		}
-
-		.pcImg {
-			position: absolute;
-			left: 0;
-			bottom: 0;
-		}
-
-		.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'>
-
-		// new
-		var rooms = {};
-		var lastSwitchTime;
-		var roomsToshow = 0;
-		var lastRoomUpdateTime;
-		var lastCalendarUpdateTime;
-		var roomIds;
-		//Todo change these
-		var CalendarUpdateTime = 60 * 1000;
-		var RoomUpdateTime = 60 * 1000;
-
-		var date;
-
-		var configJson;
-
-		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", "Freitrag", "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()) {
-
-				return;
-			}
-
-
-		});
-		// Downloads the config of a room
-		function getConfig(id, room) {
-			$.ajax({
-				url: "../../../api.php?do=locationinfo&action=config&id=" + id,
-				dataType: 'json',
-				cache: false,
-				timeout: 30000,
-				success: function (result) {
-					if (configJson == null) {
-						if (result.room == null) {
-							var heading = $("#courseHeading");
-							heading.text("Error: wrong id");
-							heading.css({'font-size': "30px"});
-							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 () {
-					var heading = $("#courseHeading");
-					heading.text("Error: couldn't get the config");
-					heading.css({'font-size': "30px"});
-				}
-			})
-		}
-
-
-		// gets the Parameter IDs from the Urls
-		function getId() {
-			roomIds = getUrlParameter("id");
-			if (roomIds == null) {
-				$("#courseHeading").text("Error: id required");
-				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
-		function getParamerter(room) {
-			var lang;
-
-			lang = room.config.lang;
-
-
-			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;
-			}
-			if (getUrlParameter("vertical") == "true") {
-				room.config.vertical = true;
-			}
-			if (getUrlParameter("einkmode") == "true") {
-				room.config.einkmode = true;
-			}
-
-			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
-				|| room.config.switchtime < 1) {
-				room.config.switchtime = 5;
-			}
-			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.lang = getUrlParameter("lang");
-			}
-			$('html').attr('lang', lang);
-		}
-
-		// 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 property in rooms) {
-
-				var text = "<div class='roompadding'   id ='roompadding_" + rooms[property].id + "'></div>";
-				$("body").append(text);
-
-
-				var obj = document.getElementById("roompadding_" + rooms[property].id);
-				if (roomsToshow > 1) {
-					obj.style.padding = "5px";
-					if (i != 0) {
-						obj.style.paddingLeft = "0px";
-					}
-				}
-				obj.style.width = width;
-				obj.style.height = height;
-				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) {
-					console.log($("#square_" + rooms[property].id));
-					document.getElementById("square_" + rooms[property].id).style.width = "8vw";
-					document.getElementById("square_" + rooms[property].id).style.height = "8vw";
-					document.getElementById("roomHeader_" + rooms[property].id).style.fontSize = "2vw";
-					document.getElementById("freeSeatsHeader_" + rooms[property].id).style.fontSize = "5vw";
-					document.getElementById("courseHeading_" + rooms[property].id).style.fontSize = "2vw";
-				}
-
-
-				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: checks which rooms are in which mode
-		function getUpdateIdsforMode(modearray) {
-			var roomIdsToUpdate = "";
-			for (var property in rooms) {
-				if (rooms[property].config.mode in modearray) {
-					if (roomIdsToUpdate == "") {
-						roomIdsToUpdate = rooms[property].id;
-					} else {
-						roomIdsToUpdate = roomIdsToUpdate + "," + rooms[property].id;
-					}
-				}
-			}
-			return roomIdsToUpdate;
-		}
-
-		// Main Update loop, this loop runs every 1 seconds and calls all
-		// function which should be called periodically
-		function mainUpdateLoop() {
-
-			//todo add config reload
-
-
-			//updates calendar
-			if (lastCalendarUpdateTime == null || lastCalendarUpdateTime + CalendarUpdateTime < MyDate().getTime()) {
-
-				//Todo
-				var roomIdsToUpdate = getUpdateIdsforMode([1, 2, 3, 4]);
-
-				if (roomIdsToUpdate != "") {
-					// Todo update calendars
-					queryCalendars(roomIdsToUpdate);
-				}
-
-				lastCalendarUpdateTime = MyDate().getTime();
-			}
-
-
-			// updates Pcs states
-			if (lastRoomUpdateTime == null || lastRoomUpdateTime + RoomUpdateTime < MyDate().getTime()) {
-
-				var roomIdsToUpdate = getUpdateIdsforMode([1, 2, 3, 4]);
-
-				if (roomIdsToUpdate != "") {
-					queryRooms(roomIdsToUpdate);
-				}
-				lastRoomUpdateTime = MyDate().getTime();
-			}
-
-
-			// 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 * 1000 < 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 * 1000;
-						}
-					}
-
-					//
-				}
-				// 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;
-
-		}
-
-		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: false,
-				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;
-
-		}
-
-
-		function setUpCalendar(percent, daysToShow, room) {
-			generateCalendarDiv(percent, room);
-			var $calendar = $("#calendar_" + room.id).weekCalendar({
-				timeslotsPerHour: 1,
-				timeslotHeight: 20,
-				daysToShow: daysToShow,
-				height: function ($calendar) {
-					var height = $(window).height() - document.getElementById('header_' + room.id).clientHeight - 5;
-					if (room.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",
-				use24Hour: true,
-				readonly: true,
-				showHeader: false,
-				hourLine: true,
-				shortDays: t("shortDays"),
-				longDays: t("longDays"),
-				buttons: false,
-				timeSeparator: " " + t("to") + " ",
-				startOnFirstDayOfWeek: false,
-				displayFreeBusys: true,
-				defaultFreeBusy: {free: false}
-			});
-			getOpeningTimes(room);
-
-
-		}
-
-		function getOpeningTimes(room) {
-			$.getJSON("../../../api.php?do=locationinfo&action=openingtime&id=" + room.id, function (result) {
-				SetOpeningTimes(result[0].openingtime, room);
-				scaleCalendar(room);
-
-			})
-				.error(function () {
-					scaleCalendar(room);
-
-				})
-		}
-
-		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);
-
-		}
-
-		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
-			});
-		}
-		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) {
-					//todo Update every calendar
-					var l = result.length;
-					// Todo reimplement when backend working
-
-					for (var i = 0; i < l; i++) {
-
-						//todo test this
-
-						updateCalendar(result[i].calendar, rooms[result[i].id]);
-					}
-
-
-				}, error: function () {
-
-				}
-			});
-		}
-
-
-		function updateCalendar(json, room) {
-			if (json == "") {
-				console.log("Error: Calendar data was an empty string.");
-				return;
-			}
-			try {
-				room.timetable = result[i].calendar;
-				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) {
-				consol.log("Error: Couldnt add celndar data");
-			}
-		}
-
-		function scaleCalendar(room) {
-
-			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 = (44 + 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() - document.getElementById('header_' + room.id).clientHeight
-				- document.getElementsByClassName("wc-time-column-header")[0].clientHeight - 10;
-			if (roomsToshow > 1) {
-				clientHeight -= 5;
-			}
-			if (room.config.mode == 1 && room.config.vertical) {
-
-				clientHeight = clientHeight * (room.config.scale / 100);
-				clientHeight -= 22;
-
-			}
-
-
-			var height = clientHeight / (room.openTimes * cal.weekCalendar("option", "timeslotsPerHour"));
-			cal.weekCalendar("option", "timeslotHeight", height);
-			cal.weekCalendar("updateFreeBusy", room.openingTimesCalendar);
-		}
-		/**
-		 * @return {string}
-		 * @return {string}
-		 */
-
-		// used for countdown
-		// computes the time difference between 2 Date objects
-
-		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;
-		}
-
-		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;
-		}
-		/**
-		 * @return {boolean}
-		 */
-
-		// Checks if given room is open now
-		function IsOpenNow(room) {
-			var now = new MyDate();
-			if (room.openingTimes == null) {
-
-				return false;
-			}
-			var tmp = room.openingTimes[now.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 < now && closeDate > now) {
-					return true;
-				}
-			}
-			return false;
-		}
-		/**
-		 * @return {boolean}
-		 */
-		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;
-		}
-
-
-		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 Header Text  of a 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');
-			}
-		}
-
-		function UpdateRoomHeader(room) {
-			var tmp = room.getState();
-			if (tmp.state == "closed") {
-				$("#courseHeading_" + room.id).text(t("closed") + " " + GetTimeDiferenceAsString(tmp.end, new MyDate(), room));
-				SetFreeSeats(room.id, -1);
-			} else if (tmp.state == "ClaendarEvent") {
-				$("#courseHeading_" + room.id).text(state.titel);
-				SetFreeSeats(room.id, -1);
-			} else if (tmp.state == "Free") {
-				$("#courseHeading_" + room.id).text(t("free") + " " + GetTimeDiferenceAsString(tmp.end, new MyDate(), room));
-				SetFreeSeats(room.id, room.freePcs);
-			} else if (tmp.state == "FreeNoEnd") {
-				$("#courseHeading_" + room.id).text(t("free"));
-				SetFreeSeats(room.id, room.freePcs);
-			}
-		}
-
-
-		function ComputeCurrentState(room) {
-			if (!IsOpenNow(room)) {
-				room.state = {state: "closed", end: GetNextOpening(room), titel: "", 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: "", titel: "", next: ""};
-				return;
-			}
-
-			// no event so closing is next
-			if (event == null) {
-				room.state = {state: "Free", end: closing, titel: "", 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, titel: event.title, next: ""};
-				return;
-			}
-
-			// no closing so event is next
-			if (closing == null) {
-				room.state = {state: "Free", end: event.start, titel: "", next: "event"};
-				return;
-			}
-
-			// event sooner then closing
-			if (event.start.getTime() < closing) {
-				room.state = {state: "Free", end: event.start, titel: "", next: "event"};
-			} else if (event.start.getTime() > closing) {
-				room.state = {state: "Free", end: closing, titel: "", next: "closing"};
-			}
-
-		}
-
-		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;
-
-
-		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;
-			//document.body.appendChild(div);
-			$("#room_" + room.id).append(div);
-
-		}
-		function preInitRoom(room) {
-			$.getJSON("../../../api.php?do=locationinfo&action=roominfo&id=" + room.id + "&coords=1", function (result) {
-				if (result[0] == null) {
-					return;
-				}
-				initRoom(result[0].computer, (100 - room.config.scale) + "%", room);
-
-			}).error(function () {
-
-				generateRoomLayoutDiv((100 - room.config.scale) + "%", room);
-			})
-		}
-
-
-		function initRoom(layout, scale, room) {
-			var maxX;
-			var maxY;
-			var minY;
-			var minX;
-			var xDifference;
-			var yDifference;
-			room.layout = layout;
-
-			if (layout == null || layout.length == 0) {
-				return;
-			}
-			generateRoomLayoutDiv(scale, room);
-			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);
-		}
-
-		function generateOffsetAndScale(room) {
-			var clientHeight = ($(window).height() - 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));
-			}
-			($("#roomLayout")).height(clientHeight);
-			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];
-			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);
-		}
-
-		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 img = $('<img />',
-						{
-							id: "layout_PC_" + room.id + "_" + layout[i].id,
-							class: "pcImg"
-						})
-						.appendTo($('#roomLayout_' + room.id));
-				}
-			}
-			scaleRoom(room);
-			UpdatePc(layout, room);
-
-		}
-
-
-		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;
-					for (var i = 0; i < l; i++) {
-						UpdatePc(result[i].computer, rooms[result[i].id]);
-					}
-				}, error: function () {
-
-				}
-			})
-		}
-
-		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;
-				}
-			}
-		}
-
-		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_" + room.id + "_" + room.layout[i].id);
-					if (tmp != null) {
-						tmp.width = (picSizeX * room.scale);
-						tmp.height = (picSizeY * room.scale);
-						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";
-					}
-				}
-			}
-		}
-
-
-		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 == "0") {
-					if (supportSvg) {
-						img = "img/pc_free";
-					} else {
-						imgobj.style.backgroundColor = "green";
-					}
-					freePcs++;
-					// Pc in use
-				} else if (update[i].pcState == "1") {
-					if (supportSvg) {
-						img = "img/pc_used";
-					} else {
-						imgobj.style.backgroundColor = "red";
-					}
-					// PC off
-				} else if (update[i].pcState == "2") {
-					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 =============================================
-		 */
-
-		$(window).resize(function () {
-
-
-			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);
-		});
-
-		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 t(toTranslate) {
-			var r = translation[$('html')[0].lang][toTranslate];
-			if (r === undefined) {
-				r = translation['en'][toTranslate]
-			}
-			return r;
-		}
-
-		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;
-				}
-			}
-		}
-		function generateProgressBar(id) {
-
-			var div = document.createElement("div");
-			div.id = "progressBar_" + id;
-			div.classList.add("progressbar");
-			//document.body.appendChild(div);
-			$("#room_" + id).append(div);
-
-		}
-		function MoveProgressBar(roomId, time) {
-			var elem = document.getElementById("progressBar_" + roomId);
-			var width = 1;
-			var id = setInterval(frame, time * 10);
-
-			function frame() {
-				if (width >= 100) {
-					clearInterval(id);
-				} else {
-					width++;
-					elem.style.width = width + '%';
-				}
-			}
-		}
-
-
-	</script>
-</head>
-<body>
-</body>
-</html>
author	Michael Scherle	2017-03-03 20:23:56 +0100
committer	Michael Scherle	2017-03-03 20:23:56 +0100
commit	0b193e4737fd11328feb3be1b56c95fb040f0384 (patch)
tree	eecf2b9fc89b696c9639631cc2e987b5992edef6 /modules-available/locationinfo/frontend
parent	Fixed dummy class (diff)
download	slx-admin-0b193e4737fd11328feb3be1b56c95fb040f0384.tar.gz slx-admin-0b193e4737fd11328feb3be1b56c95fb040f0384.tar.xz slx-admin-0b193e4737fd11328feb3be1b56c95fb040f0384.zip