+tabbedPlan is noch minimal und unsortiert

index.html

@@ -10,6 +10,7 @@
     <link rel="stylesheet" href="css/design.css">
     <link rel="stylesheet" href="css/marquee.css">
     <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
+    <script type="text/javascript" src="js/jquery-ui.min.js"></script>
     <script type="text/javascript" src="js/jquery.jcookie.min.js"></script>
     <script type="text/javascript" src="js/marquee.js"></script>
     <script type="text/javascript" src="js/panelAPI.js"></script>

panels/mensaPlan/script.js

@@ -13,7 +13,6 @@ this.loaded = function(panel, config) {
 	}
 
 	function fillTable( json ) {
-		var tableBody = document.getElementById("mensaPlanTableBody");
 		var day = new Date();
 		switch(day.getDay()){
 			case 0:
@@ -26,7 +25,6 @@ this.loaded = function(panel, config) {
 			var gerichte = json.dienstag.gerichte;
 			break;
 			case 3:
-			console.log("BLA");
 			var gerichte = json.mittwoch.gerichte;
 			break;
 			case 4:
@@ -39,18 +37,35 @@ this.loaded = function(panel, config) {
 			var gerichte = json.samstag.gerichte;
 			break;
 		}
+		var tableBody = document.getElementById("mensaPlanTable1Body");
 		tableBody.innerHtml = "";
+		var counter = 0;
+		var j = 0;
 		for(var i=0;i<gerichte.length;i++){
+			if(counter >= gerichte.length/2){
+				tableBody = document.getElementById("mensaPlanTable2Body");
+				tableBody.innerHtml = "";
+				j=0;
+			} else {
+				counter++;
+			}
 			var gericht = gerichte [i];
-			var row = tableBody.insertRow(i);
+			var row = tableBody.insertRow(j);
 			var cell1 = row.insertCell(0);
 			var cell2 = row.insertCell(1);
 			var cell3 = row.insertCell(2);
 			cell1.innerHTML = gericht.gericht;
 			cell2.innerHTML = gericht.art;
-			cell3.innerHTML = '<img src="'+gericht.kategorie+'" />';
+			cell3.innerHTML = '<img src="../panels/mensaPlan/img/'+gericht.kategorie+'" />';
+			j++;
 		}
 	}
 	
 	getMensaPlan();
+	
+	$(function() {
+		$( "#tabs" ).tabs();
+	});
+  
+  setInterval(function(){var currentTab = $("#tabs").tabs('option', 'active');if(currentTab==0){currentTab=1;}else{currentTab=0;};$( "#tabs" ).tabs({ active: currentTab });}, 120000);
 }

panels/mensaPlan/template.html

-<table id="mensaPlanTable" style="width:100%;height:100%">
-	<thead id="mensaPlanTableHead">
-		<tr>
-			<th colspan="3">Hauptmensa</th>
-		</tr>
-		<tr>
-			<th>Gericht</th>
-			<th>Art</th>
-			<th>Kategorie</th>
-		</tr>
-	</thead>
-	<tbody id="mensaPlanTableBody">
+<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
+
+<div id="tabs">
+	<ul>
+		<li><a href="#tabs-1">Normale Counter</a></li>
+		<li><a href="#tabs-2">Grill etc. Counter</a></li>
+	</ul>
+	<div id="tabs-1">
+		<table id="mensaPlanTable1" style="width:100%;height:100%">
+			<tbody id="mensaPlanTable1Body">
 			</tbody>
 		</table>
+	</div>
+	<div id="tabs-2">
+		<table id="mensaPlanTable2" style="width:100%;height:100%">
+			<tbody id="mensaPlanTable2Body">
+			</tbody>
+		</table>
+	</div>
+</div>