Added better tab handling

You can scroll through tabs if there are too many with some buttons.
Minimum/maximum size of tabs.
Tabs don't flex anymore.

www/css/style.css

@@ -9,7 +9,7 @@ html,body{
 	width: 100%;
 	height: 100%;
 }
-.unselectable,#tabs-list span.tab{
+.unselectable,#tabs-list div.tab{
 	-webkit-touch-callout: none;
 	-webkit-user-select: none;
 	-khtml-user-select: none;
@@ -31,18 +31,12 @@ html,body{
 	right: 0;
 	top: 0;
 	width: 100%;
-	height: 20px;
+	height: 40px;
 	border-bottom-style: solid;
 	background-color: white;
 	transition: height 0.3s;
 	z-index: 10;
 }
-#head:hover{
-	height: 24px;
-}
-#head.hovered{
-	height: 40px;
-}
 #info{
 	display: table;
 	width: 100%;
@@ -56,8 +50,8 @@ html,body{
 }
 #content{
 	width: 100%;
-	height: calc(100% - 41px);
-	top: 20px;
+	height: calc(100% - 61px);
+	top: 41px;
 	left: 0;
 }
 #settings,#users{
@@ -141,16 +135,39 @@ html,body{
 	overflow: auto;
 }
 #tabs-list{
-	display: table;
-	width: 100%;
-	height: 100%;
+	width: calc(100% - 42px);
+	height: 20px;
 	position: absolute;
 	left: 0;
 	top: 20px;
-	cursor: pointer;
+	overflow: hidden;
 }
-#tabs-list span.tab{
-	display: table-cell;
+#tabs-list div.tab{
+	float: left;
+	min-width: 100px;
+	max-width: 200px;
+	height: 19px;
+	overflow: hidden;
+	position: relative;
+}
+#tabs-list div.tab.clicked{
+	background-color: lightgrey;
+}
+#tabs-scroll-left{
+	position: absolute;
+	right: 20px;
+	top: 20px;
+	height: 20px;
+	width: 20px;
+}
+#tabs-scroll-right{
+	position: absolute;
+	right: 0;
+	top: 20px;
+	height: 20px;
+	width: 20px;
+}
+#tabs-list div.tab, #tabs-scroll-right,#tabs-scroll-left{
 	border-style: solid;
 	border-top-right-radius: 3px;
 	border-top-left-radius: 3px;
@@ -162,10 +179,13 @@ html,body{
 	border-width: 1px;
 	padding: 0;
 	margin: 0;
+	background-color: white;
+	cursor: pointer;
+	clear: none;
 }
-#tabs-list span.tab.clicked{
-	background-color: lightgrey;
-}
-#tabs-list span.tab:hover{
+#tabs-list div.tab:hover, #tabs-scroll-right:hover,#tabs-scroll-left:hover{
 	background-color: grey;
+}
+#tabs-scroll-left.disabled, #tabs-scroll-right.disabled{
+	background-color: lightgrey;
 }

www/index.html

@@ -21,6 +21,8 @@
 				<span id="topic"></span>
 			</div>
 			<div id="tabs-list"></div>
+			<div id="tabs-scroll-left"></div>
+			<div id="tabs-scroll-right"></div>
 		</div>
 		<div id="content">
 			<ul id="content-list"></ul>

www/js/omnomirc.js

@@ -180,7 +180,7 @@
 		},
 		tabObj: function(id){
 			if(typeof id !== 'undefined'){
-				return $('<span>')
+				return $('<div>')
 					.addClass('tab')
 					.text(tabs[id].title)
 					.mouseup(function(e){
@@ -209,6 +209,12 @@
 								$o.removeTab(id);
 								return false;
 							})
+							.css({
+								'position': 'absolute',
+								'background-color': 'inherit',
+								'top': 0,
+								'right': 0
+							})
 							.html('&times;')
 					)
 					.data('id',id);
@@ -226,6 +232,12 @@
 				}
 				$tl.append(tab);
 			}
+			if($tl.get(0).scrollHeight-20 != $tl.scrollTop()){
+				$('#tabs-scroll-right').removeClass('disabled');
+			}
+			if($tl.scrollTop() != 0){
+				$('#tabs-scroll-left').removeClass('disabled');
+			}
 		}
 	});
 	String.prototype.htmlentities = function(){
@@ -282,22 +294,6 @@
 			$('#settings, #users, #head').removeClass('hovered').removeClass('open');
 			$('#settings, #users').children('.close-button').hide()
 		});
-		$h.hoverIntent({
-			out: function(){
-				$h.removeClass('hovered');
-			},
-			over: function(){},
-			timeout: 1000
-		}).hover(function(){
-			hht = setTimeout(function(){
-				event('Head HoverIntent timeout','timeout');
-				$('#head:hover').addClass('hovered');
-			},1000);
-		},function(){
-			clearInterval(hht);
-		}).click(function(){
-			$(this).addClass('hovered');
-		});
 		$('.unselectable').attr('unselectable','on');
 		$.contextMenu({
 			selector: 'span.tab',
@@ -329,8 +325,30 @@
 			zIndex: 99999,
 			trigger: 'right'
 		});
+		$('#tabs-scroll-right').click(function(){
+			event('scroll right');
+			$tl.scrollTop(($tl.scrollTop()||0)+20);
+			if($tl.get(0).scrollHeight-20 == $tl.scrollTop()){
+				$('#tabs-scroll-right').addClass('disabled');
+			}
+			$('#tabs-scroll-left').removeClass('disabled');
+		});
+		$('#tabs-scroll-left').click(function(){
+			event('scroll left');
+			$tl.scrollTop(($tl.scrollTop()||0)-20);
+			if($tl.scrollTop() == 0){
+				$('#tabs-scroll-left').addClass('disabled');
+			}
+			$('#tabs-scroll-right').removeClass('disabled');
+		});
+		(function scrollup(){
+			if($tl.scrollTop() != 0){
+				$('#tabs-scroll-left').click();
+				setTimeout(scrollup,10);
+			}
+		})();
 		//DEBUG
-		for(var i=0;i<10;i++){
+		for(var i=0;i<20;i++){
 			tabs.push({
 				name: '#Tab'+i,
 				title: 'Tab '+i,