Added custom scrollbar and more JS

2026-04-05 04:29:25 +01:00 · 2012-03-13 22:51:00 +01:00
parent f21677e5f4
commit c9ec401798
12 changed files with 11072 additions and 35 deletions
--- a/data/css/data_table.css
+++ b/data/css/data_table.css
@@ -286,12 +286,22 @@ td.details {
 }

 .paging_full_numbers span.paginate_button {
-	background-color: #e50000;
+	background-image: linear-gradient(bottom, rgb(82,0,0) 0%, rgb(117,0,10) 100%);
+background-image: -o-linear-gradient(bottom, rgb(82,0,0) 0%, rgb(117,0,10) 100%);
+background-image: -moz-linear-gradient(bottom, rgb(82,0,0) 0%, rgb(117,0,10) 100%);
+background-image: -webkit-linear-gradient(bottom, rgb(82,0,0) 0%, rgb(117,0,10) 100%);
+background-image: -ms-linear-gradient(bottom, rgb(82,0,0) 0%, rgb(117,0,10) 100%);
+border-bottom: 1px solid #000; 
 	color: #fff;
 }

 .paging_full_numbers span.paginate_button:hover {
-	background-color: #ff0000;
+	background-image: linear-gradient(bottom, rgb(117,0,10) 0%, rgb(82,0,0) 100%);
+background-image: -o-linear-gradient(bottom, rgb(117,0,10) 0%, rgb(82,0,0) 100%);
+background-image: -moz-linear-gradient(bottom, rgb(117,0,10) 0%, rgb(82,0,0) 100%);
+background-image: -webkit-linear-gradient(bottom, rgb(117,0,10) 0%, rgb(82,0,0) 100%);
+background-image: -ms-linear-gradient(bottom, rgb(117,0,10) 0%, rgb(82,0,0) 100%);
+border-bottom: 1px solid #000; 
 	color: #fff;
 }

--- a/data/css/jquery.jscrollpane.css
+++ b/data/css/jquery.jscrollpane.css
@@ -0,0 +1,125 @@
+/*
+ * CSS Styles that are needed by jScrollPane for it to operate correctly.
+ *
+ * Include this stylesheet in your site or copy and paste the styles below into your stylesheet - jScrollPane
+ * may not operate correctly without them.
+ */
+
+.jspContainer
+{
+	overflow: hidden;
+	position: relative;
+}
+
+.jspPane
+{
+	position: absolute;
+}
+
+.jspVerticalBar
+{
+	position: absolute;
+	top: 0;
+	right: 0;
+	width: 10px;
+	height: 100%;
+	background: red;
+}
+
+.jspHorizontalBar
+{
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	height: 10px;
+	background: red;
+}
+
+.jspVerticalBar *,
+.jspHorizontalBar *
+{
+	margin: 0;
+	padding: 0;
+}
+
+.jspCap
+{
+	display: none;
+}
+
+.jspHorizontalBar .jspCap
+{
+	float: left;
+}
+
+.jspTrack
+{
+	background: rgb(50,50,50);
+	position: relative;
+}
+
+.jspDrag
+{
+	background: rgb(30,30,30);
+	position: relative;
+	top: 0;
+	left: 0;
+	cursor: pointer;
+	border-radius: 20px;
+}
+.jspDrag:hover
+{
+	background: rgb(15,15,15);
+}
+
+.jspHorizontalBar .jspTrack,
+.jspHorizontalBar .jspDrag
+{
+	float: left;
+	height: 100%;
+}
+
+.jspArrow
+{
+	background: #50506d;
+	text-indent: -20000px;
+	display: block;
+	cursor: pointer;
+}
+
+.jspArrow.jspDisabled
+{
+	cursor: default;
+	background: #80808d;
+}
+
+.jspVerticalBar .jspArrow
+{
+	height: 10px;
+}
+
+.jspHorizontalBar .jspArrow
+{
+	width: 10px;
+	float: left;
+	height: 100%;
+}
+
+.jspVerticalBar .jspArrow:focus
+{
+	outline: none;
+}
+
+.jspCorner
+{
+	background: #eeeef4;
+	float: left;
+	height: 100%;
+}
+
+/* Yuk! CSS Hack for IE6 3 pixel bug :( */
+* html .jspCorner
+{
+	margin: 0 -3px 0 0;
+}
--- a/data/css/style.css
+++ b/data/css/style.css
@@ -37,7 +37,6 @@ body { font:13px/1.231 sans-serif; *font-size:small; }
 select, input, textarea, button { font:99% sans-serif; }
 pre, code, kbd, samp { font-family: monospace, sans-serif; }

-html { overflow-y: scroll; }
 a:hover, a:active { outline: none; }
 ul, ol { margin-left: 2em; }
 ol { list-style-type: decimal; }
@@ -167,7 +166,7 @@ a.blue {

 #container { width: 960px; margin: auto; }

-body { background-color: #313131; color: #c2c2c2;}
+body { background-color: #313131; color: #c2c2c2; overflow: hidden; overflow-y: hidden; overflow-x: hidden; }



@@ -199,7 +198,54 @@ left: 0px;
 z-index: 998;
 }

-div#updatebar { box-shadow: 5px 5px 3px #000; text-align: center; width: 300px; min-height: 60px; position: fixed; bottom: 20px; right: 10px; z-index: 9999; padding: 20px; margin: auto; background-color: rgba(0,0,0,0.8); }
+div.btnClose 
+{
+    overflow: hidden;
+    -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px;
+    background-color: rgb(60,0,5);
+    cursor: pointer;
+    width: 18px;
+    height: 18px;
+    position: relative;
+    top: -29px;
+    right: -29px;
+    float: right;
+    border: 1px solid #000;
+    box-shadow: 0px 0px 3px #000;
+    font-weight: bold;
+    font-size: 12px;
+    line-height: 18px;
+}
+
+div#updatebar  
+{
+    background-image: linear-gradient(bottom, rgb(97,0,0) 0%, rgb(122,0,0) 100%);
+background-image: -o-linear-gradient(bottom, rgb(97,0,0) 0%, rgb(122,0,0) 100%);
+background-image: -moz-linear-gradient(bottom, rgb(97,0,0) 0%, rgb(122,0,0) 100%);
+background-image: -webkit-linear-gradient(bottom, rgb(97,0,0) 0%, rgb(122,0,0) 100%);
+background-image: -ms-linear-gradient(bottom, rgb(97,0,0) 0%, rgb(122,0,0) 100%);
+    box-shadow: 0px 0px 6px #000; text-align: center; 
+    width: 300px; 
+    min-height: 60px; 
+    position: fixed; 
+    bottom: 25px; 
+    right: 25px; 
+    z-index: 9999; 
+    padding: 20px; 
+}
+    
+a.update-link 
+{
+    margin: 30px;
+    border-radius: 3px;
+    padding: 10px 5px 10px 5px; 
+    font-size: 22px; 
+    background-image: linear-gradient(bottom, rgb(8,97,0) 0%, rgb(0,199,7) 100%);
+background-image: -o-linear-gradient(bottom, rgb(8,97,0) 0%, rgb(0,199,7) 100%);
+background-image: -moz-linear-gradient(bottom, rgb(8,97,0) 0%, rgb(0,199,7) 100%);
+background-image: -webkit-linear-gradient(bottom, rgb(8,97,0) 0%, rgb(0,199,7) 100%);
+background-image: -ms-linear-gradient(bottom, rgb(8,97,0) 0%, rgb(0,199,7) 100%);
+               }    
 div#logo { padding-left: 10px; }

 ul#nav { position: fixed; top: 60px; left: 0px; list-style-type: none; height: 100%; width: 200px; padding: 0; margin: 0; background-color: #343434; border-right: 1px solid #000; padding-top: 30px; z-index: 300;}
@@ -259,8 +305,8 @@ height: 40px;
 padding: 0px 9px 0px 9px;
 line-height: 40px;
 display: inline-block; 
-border-left: 1px solid #000;
-border-right: 1px solid #000;
+border-left: 1px solid rgb(50,50,50);
+border-right: 1px solid rgb(25,25,25);
 margin: 0;
 }

@@ -322,9 +368,11 @@ border: 0;
 border-left: 1px solid #909090;
 color: #fff;
 }
+
 div#searchbar input[type=submit]:hover { 
 background-color: #ac0000; 
 text-shadow: 1px 1px 3px #000; }
+
 div#searchbar select 
 { 
 	color: #fff;
@@ -333,7 +381,17 @@ div#searchbar select
 	border-color: rgb(70,0,10);
 }

-div#main { position: absolute; top: 90px; left: 200px; width: 100%; min-width: 200px; min-height: 300px; margin: 20px; }
+div#main  
+{
+    position: absolute; 
+    top: 105px; 
+    left: 200px;
+    padding: 5px;
+    min-width: 200px; 
+    min-height: 300px;
+    height: 100%;
+    width: 100%;
+}

 /*Filter position*/
 .dataTables_filter 
@@ -405,7 +463,7 @@ table#artist_table th#select { text-align: left; }
 table#artist_table th#name { text-align: left; min-width: 32%; }
 table#artist_table th#status { text-align: left; min-width: 8%; }
 table#artist_table th#album { text-align: left; min-width: 49%; }
-table#artist_table th#have { text-align: center; width: 60px; }
+table#artist_table th#have { text-align: center; width: 11%; }

 table#artist_table td#name { vertical-align: middle; text-align: left; }
 table#artist_table td#status { vertical-align: middle; text-align: left; }
@@ -414,6 +472,9 @@ table#artist_table td#have { vertical-align: middle; }

 #artist_table div { color: #000; text-shadow: 1px 1px rgb(100,100,100); font-size: 12px; font-weight: bold; }

+/*
+    Paddingheader
+*/
 div#paddingheader { 
 padding-top: 48px; 
 font-size: 24px; 
@@ -421,6 +482,8 @@ font-weight: bold;
 text-align: left; 
 }
 div#nopaddingheader { font-size: 24px; font-weight: bold; text-align: left; }
+
+
 table#album_table { width: 100%; }
 /* Album Tableheader*/
 table#album_table th#select { vertical-align: middle; text-align: left; min-width: 10px; }
@@ -450,7 +513,9 @@ table#album_table td#bitrate { vertical-align: middle; text-align: left; font-si

 div#albumheader { margin: 20px 0px 40px 0px; min-height: 200px; }

-/* Track table*/
+/*
+    Track
+*/
 div#track_wrapper { font-size: 16px; width: 100%; clear:both;  }
 div#track_table { margin-top: 20px; }
 table#track_table th#number { text-align: right; min-width: 8px; }
@@ -475,19 +540,26 @@ table#history_table td#size { vertical-align: middle; text-align: left; min-widt
 table#history_table td#status { vertical-align: middle; text-align: left; font-size: 14px; }
 table#history_table td#action { vertical-align: middle; text-align: left; font-size: 14px; }

+/*
+    Log
+*/
 #log_table_wrapper { padding-top: 20px; }
 table#log_table { width: 100%; }

 table#log_table th#timestamp { text-align: left; min-width: 150px; }
 table#log_table th#level { text-align: left; min-width: 60px; }
 table#log_table th#message { text-align: left; min-width: 500px; }
-
+/*
+    Upcoming
+*/
+/*Upcoming Tablehead*/
 table#upcoming_table th#albumart { text-align: left; min-width: 20%; }
 table#upcoming_table th#albumname { text-align: left; min-width: 200px; }
 table#upcoming_table th#artistname { text-align: left; min-width: 150px; }
 table#upcoming_table th#reldate { text-align: left; min-width: 100px; }
 table#upcoming_table th#type { text-align: left; min-width: 75px; }

+/*Upcoming Tabledata*/
 table#upcoming_table td#select { vertical-align: middle; text-align: left; }
 table#upcoming_table td#albumart { vertical-align: middle; text-align: left; min-width: 50px; }
 table#upcoming_table td#albumname { vertical-align: middle; text-align: left; min-width: 200px; }
@@ -496,6 +568,7 @@ table#upcoming_table td#reldate { vertical-align: middle; text-align: left; min-
 table#upcoming_table td#type { vertical-align: middle; text-align: left; min-width: 75px; }
 table#upcoming_table td#status { vertical-align: middle; text-align: left; }

+/*Wanted Tablehead*/
 table#wanted_table { width: 100%; }
 table#wanted_table th#albumart { text-align: left; min-width: 50px; }
 table#wanted_table th#albumname { text-align: left; min-width: 200px; }
@@ -503,6 +576,7 @@ table#wanted_table th#artistname { text-align: left; min-width: 150px; }
 table#wanted_table th#reldate { text-align: left; min-width: 100px; }
 table#wanted_table th#type { text-align: left; min-width: 75px; }

+/*Wanted Tabledata*/
 table#wanted_table td#select { vertical-align: middle; text-align: left; }
 table#wanted_table td#albumart { vertical-align: middle; text-align: left; min-width: 50px; }
 table#wanted_table td#albumname { vertical-align: middle; text-align: left; min-width: 200px; }
@@ -511,6 +585,7 @@ table#wanted_table td#reldate { vertical-align: middle; text-align: left; min-wi
 table#wanted_table td#type { vertical-align: middle; text-align: left; min-width: 75px; }
 table#wanted_table td#status { vertical-align: middle; text-align: left; }

+/*Search Results Tablehead*/
 table#searchresults_table th#albumname { text-align: left; min-width: 225px; }
 table#searchresults_table th#artistname { text-align: left; min-width: 325px; }
 table#searchresults_table th#score { text-align: left; min-width: 75px; }
@@ -519,9 +594,22 @@ table#searchresults_table td#albumname { vertical-align: middle; text-align: lef
 table#searchresults_table td#artistname { vertical-align: middle; text-align: left; min-width: 300px; }
 table#searchresults_table td#score { vertical-align: middle; text-align: left; min-width: 75px; }

-div.progress-container { border: 1px solid #313131; width: 100px; height: 15px; margin: 2px 5px 2px 0; padding: 1px; background: #414141; color: white; }
-div.progress-container > div { height: 100%; margin: 1px; }
-.havetracks { font-size: 12px; position: relative; width: 100px; text-align: center; }
+/*progress container*/
+div.progress-container { border: 1px solid #000; width: 100%; height: 15px; margin: 2px 5px 2px 5px; background: #414141; }
+/*Progress bar*/
+div.progress-container > div  
+{
+height: 100%; 
+background-image: linear-gradient(bottom, rgb(44,97,0) 0%, rgb(69,122,0) 100%);
+background-image: -o-linear-gradient(bottom, rgb(44,97,0) 0%, rgb(69,122,0) 100%);
+background-image: -moz-linear-gradient(bottom, rgb(44,97,0) 0%, rgb(69,122,0) 100%);
+background-image: -webkit-linear-gradient(bottom, rgb(44,97,0) 0%, rgb(69,122,0) 100%);
+background-image: -ms-linear-gradient(bottom, rgb(44,97,0) 0%, rgb(69,122,0) 100%);
+}
+/*text format for match/procent*/
+.searchscrore,
+.havetracks { font-size: 12px; position: relative; width: 100%; text-align: center; color: #fff; text-shadow: 1px 1px 3px #000; }
+

 footer { margin: 20px auto 20px auto; }
 div#version { text-align: center; font-weight: bold; }
@@ -568,7 +656,6 @@ div#shutdown{ text-align: center; vertical-align: middle; }
 }

@media screen and (max-device-width: 480px) {
-
  html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; }
 }

--- a/data/images/retry.png
+++ b/data/images/retry.png
--- a/data/interfaces/default/artist.html
+++ b/data/interfaces/default/artist.html
@@ -106,7 +106,15 @@
 					<a href="queueAlbum?AlbumID=${album['AlbumID']}&ArtistID=${album['ArtistID']}" title="Retry the same download again"><img src="../images/retry.png" style="margin-left: 5px;" /></a><a href="queueAlbum?AlbumID=${album['AlbumID']}&ArtistID=${album['ArtistID']}&new=True" title="Try a new download, skipping all previously tried nzbs"><img src="../images/new.png" alt="New" style="margin-left: 5px;" /></a>
 				%endif
 				</td>
-				<td id="have"><span title="${percent}"><span><div class="progress-container"><div style="width:${percent}%"><div class="havetracks">${havetracks}/${totaltracks}</div></div></div></td>
+				<td id="have"><span title="${percent}"><span>
+					<div class="progress-container" title="You have ${havetracks} of a total ${totaltracks}">
+						<div style="width:${percent}%">
+							<div class="havetracks">
+								${havetracks}/${totaltracks}
+							</div>
+						</div>
+					</div>
+				</td>
 				<td id="bitrate">${bitrate}</td>
 			</tr>
 		%endfor
--- a/data/interfaces/default/base.html
+++ b/data/interfaces/default/base.html
@@ -21,6 +21,33 @@
 	<link rel="shortcut icon" href="images/favicon.ico">
 	<link rel="apple-touch-icon" href="images/headphoneslogo.png">
 	<link rel="stylesheet" href="css/style.css?v=2">
+	
+	<script src="js/jquery-1.7.1.js"></script>
+	<script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.6.2.min.js"%3E%3C/script%3E'))</script>
+	${next.javascriptIncludes()}
+	
+	<script src="js/plugins.js"></script>
+	<script src="js/script.js"></script>
+	
+	<!-- Script by Brinken -->
+		<script type="text/javascript" src="js/FancyScript.js"></script>
+	
+		<!-- jScrollPane -->
+			<!-- styles needed by jScrollPane -->
+			<link type="text/css" href="css/jquery.jscrollpane.css" rel="stylesheet" media="all" />
+			<!-- jScrollPane script -->
+			<script type="text/javascript" src="js/jquery.jscrollpane.js" ></script>
+			<!-- Mousewheel support -->
+			<script type="text/javascript" src="js/jquery.mousewheel.min.js" ></script>
+			<!-- Add to Scrollbars #main -->
+			<script>
+			$(function()
+			{
+				$('.main').jScrollPane();
+			});
+			</script>
+			
+		
 	${next.headIncludes()}
 	
 	<script src="js/libs/modernizr-1.7.min.js"></script>
@@ -29,11 +56,21 @@
 	<div id="container">
 		% if not headphones.CURRENT_VERSION:
            <div id="updatebar">
-                You're running an unknown version of Headphones. <a class="blue" href="update">Click here to update</a>
+				<div class="btnClose" title="Close" >X</div>
+                You're running an unknown version of Headphones. 
+				<br />
+				<br />
+				<br />
+				<a class="update-link" href="update">Validate</a>
            </div>
            % elif headphones.CURRENT_VERSION != headphones.LATEST_VERSION and headphones.INSTALL_TYPE != 'win':
            <div id="updatebar">
-                A <a class="blue" href="http://github.com/rembo10/headphones/compare/${headphones.CURRENT_VERSION}...${headphones.LATEST_VERSION}"> newer version</a> is available. You're ${headphones.COMMITS_BEHIND} commits behind. <a class="blue" href="update">Click here to update</a>
+				<div class="btnClose" title="Close" >X</div>
+                A <a class="update-link" href="http://github.com/rembo10/headphones/compare/${headphones.CURRENT_VERSION}...${headphones.LATEST_VERSION}"> newer version</a> is available. You're ${headphones.COMMITS_BEHIND} commits behind. 
+				<br />
+				<br />
+				<br />
+				<a class="update-link" href="update">Update</a>
            </div>
 			% endif
 		<header>
@@ -54,7 +91,7 @@
 			<div class="clear" />
 		</header>
 		<ul id="nav">
-				<li><a href="home">Library</a></li>
+				<li><a class="elseSelect" href="home">Home</a></li>
 				<li><a href="upcoming">Upcoming</a></li>
 				<li><a href="extras">Suggestions</a></li>
 				<li><a href="manage">Manage</a></li>
@@ -67,21 +104,13 @@
 		</div>
 		<div id="main" class="main">
 			${next.body()}
-			<div class="clear" />
 		</div>

 		<footer>
 		</footer>
 	</div>
-
-	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
-	<script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.6.2.min.js"%3E%3C/script%3E'))</script>
-	${next.javascriptIncludes()}
 	
-	<script src="js/plugins.js"></script>
-	<script src="js/script.js"></script>
-	<script src="js/ActiveLinks.js"></script>
-
+</script>
 	<!--[if lt IE 7 ]>
 	<script src="js/libs/dd_belatedpng.js"></script>
 	<script> DD_belatedPNG.fix('img, .png_bg');</script>
--- a/data/interfaces/default/searchresults.html
+++ b/data/interfaces/default/searchresults.html
@@ -3,7 +3,7 @@
 <%def name="body()">

 	<div id="paddingheader">
-		<h1>Search Results<h1>
+		<h1>Search Results</h1>
 	</div>
 	<table class="display" id="searchresults_table">
 		<thead>
@@ -30,7 +30,17 @@
 					<td id="albumname"><a href="${result['albumurl']}">${result['title']}</a></td>
 				%endif
 					<td id="artistname"><a href="${result['url']}">${result['uniquename']}</a></td>
-					<td id="score">${result['score']}</td>
+					<td id="score">
+						<div class="searchscore" title="The match result is: ${result['score']}%">
+										${result['score']}%
+									
+							<div class="progress-container">
+								<div style="width: ${result['score']}%">
+									
+								</div>
+							</div>
+							</div>
+					</td>
 				%if type == 'album':	
 					<td id="add"><a href="addReleaseById?rid=${result['albumid']}">Add this album</a></td>
 				%else:
--- a/data/js/FancyScript.js
+++ b/data/js/FancyScript.js
@@ -4,21 +4,33 @@ $(document).ready(function () {
        var hreflink = $(this).attr("href");
        if (hreflink == location.href.split("/").pop()) {
            $(this).parent().addClass("selected");
-        }
+		}
    });
 });
 //Resize #main to fit window size
-$(document).ready(function () {
+$(document).ready(function() {
+	//On load set #main height & width
 	windowWidth = $(window).width();
 	windowHeight = $(window).height();
 	menuWidth = $("#nav").width();
-	$("#main").width(windowWidth - menuWidth - 40);
+	headerHeight = $("header").height();
+	$("#main").height(windowHeight - headerHeight - 40);
+	$("#main").width(windowWidth - menuWidth - 10);
 });

 //On window resize
-$(window).resize(function () {
+$(window).resize(function() {
 	windowWidth = $(window).width();
 	windowHeight = $(window).height();
 	menuWidth = $("#nav").width();
-	$("#main").width(windowWidth - menuWidth - 40);
+	headerHeight = $("header").height();
+	$("#main").height(windowHeight - headerHeight - 40);
+	$("#main").width(windowWidth - menuWidth - 10);
+});
+
+//Update close
+$(document).ready(function () {
+	$(".btnClose").click(function() {
+		$("#updatebar").fadeOut("slow");
+	});
 });
--- a/data/js/jquery-1.7.1.js
+++ b/data/js/jquery-1.7.1.js
--- a/data/js/jquery.jscrollpane.js
+++ b/data/js/jquery.jscrollpane.js
--- a/data/js/jquery.jscrollpane.min.js
+++ b/data/js/jquery.jscrollpane.min.js
@@ -0,0 +1,11 @@
+/*
+ * jScrollPane - v2.0.0beta11 - 2011-07-04
+ * http://jscrollpane.kelvinluck.com/
+ *
+ * Copyright (c) 2010 Kelvin Luck
+ * Dual licensed under the MIT and GPL licenses.
+ */
+(function(b,a,c){b.fn.jScrollPane=function(e){function d(D,O){var az,Q=this,Y,ak,v,am,T,Z,y,q,aA,aF,av,i,I,h,j,aa,U,aq,X,t,A,ar,af,an,G,l,au,ay,x,aw,aI,f,L,aj=true,P=true,aH=false,k=false,ap=D.clone(false,false).empty(),ac=b.fn.mwheelIntent?"mwheelIntent.jsp":"mousewheel.jsp";aI=D.css("paddingTop")+" "+D.css("paddingRight")+" "+D.css("paddingBottom")+" "+D.css("paddingLeft");f=(parseInt(D.css("paddingLeft"),10)||0)+(parseInt(D.css("paddingRight"),10)||0);function at(aR){var aM,aO,aN,aK,aJ,aQ,aP=false,aL=false;az=aR;if(Y===c){aJ=D.scrollTop();aQ=D.scrollLeft();D.css({overflow:"hidden",padding:0});ak=D.innerWidth()+f;v=D.innerHeight();D.width(ak);Y=b('<div class="jspPane" />').css("padding",aI).append(D.children());am=b('<div class="jspContainer" />').css({width:ak+"px",height:v+"px"}).append(Y).appendTo(D)}else{D.css("width","");aP=az.stickToBottom&&K();aL=az.stickToRight&&B();aK=D.innerWidth()+f!=ak||D.outerHeight()!=v;if(aK){ak=D.innerWidth()+f;v=D.innerHeight();am.css({width:ak+"px",height:v+"px"})}if(!aK&&L==T&&Y.outerHeight()==Z){D.width(ak);return}L=T;Y.css("width","");D.width(ak);am.find(">.jspVerticalBar,>.jspHorizontalBar").remove().end()}Y.css("overflow","auto");if(aR.contentWidth){T=aR.contentWidth}else{T=Y[0].scrollWidth}Z=Y[0].scrollHeight;Y.css("overflow","");y=T/ak;q=Z/v;aA=q>1;aF=y>1;if(!(aF||aA)){D.removeClass("jspScrollable");Y.css({top:0,width:am.width()-f});n();E();R();w();ai()}else{D.addClass("jspScrollable");aM=az.maintainPosition&&(I||aa);if(aM){aO=aD();aN=aB()}aG();z();F();if(aM){N(aL?(T-ak):aO,false);M(aP?(Z-v):aN,false)}J();ag();ao();if(az.enableKeyboardNavigation){S()}if(az.clickOnTrack){p()}C();if(az.hijackInternalLinks){m()}}if(az.autoReinitialise&&!aw){aw=setInterval(function(){at(az)},az.autoReinitialiseDelay)}else{if(!az.autoReinitialise&&aw){clearInterval(aw)}}aJ&&D.scrollTop(0)&&M(aJ,false);aQ&&D.scrollLeft(0)&&N(aQ,false);D.trigger("jsp-initialised",[aF||aA])}function aG(){if(aA){am.append(b('<div class="jspVerticalBar" />').append(b('<div class="jspCap jspCapTop" />'),b('<div class="jspTrack" />').append(b('<div class="jspDrag" />').append(b('<div class="jspDragTop" />'),b('<div class="jspDragBottom" />'))),b('<div class="jspCap jspCapBottom" />')));U=am.find(">.jspVerticalBar");aq=U.find(">.jspTrack");av=aq.find(">.jspDrag");if(az.showArrows){ar=b('<a class="jspArrow jspArrowUp" />').bind("mousedown.jsp",aE(0,-1)).bind("click.jsp",aC);af=b('<a class="jspArrow jspArrowDown" />').bind("mousedown.jsp",aE(0,1)).bind("click.jsp",aC);if(az.arrowScrollOnHover){ar.bind("mouseover.jsp",aE(0,-1,ar));af.bind("mouseover.jsp",aE(0,1,af))}al(aq,az.verticalArrowPositions,ar,af)}t=v;am.find(">.jspVerticalBar>.jspCap:visible,>.jspVerticalBar>.jspArrow").each(function(){t-=b(this).outerHeight()});av.hover(function(){av.addClass("jspHover")},function(){av.removeClass("jspHover")}).bind("mousedown.jsp",function(aJ){b("html").bind("dragstart.jsp selectstart.jsp",aC);av.addClass("jspActive");var s=aJ.pageY-av.position().top;b("html").bind("mousemove.jsp",function(aK){V(aK.pageY-s,false)}).bind("mouseup.jsp mouseleave.jsp",ax);return false});o()}}function o(){aq.height(t+"px");I=0;X=az.verticalGutter+aq.outerWidth();Y.width(ak-X-f);try{if(U.position().left===0){Y.css("margin-left",X+"px")}}catch(s){}}function z(){if(aF){am.append(b('<div class="jspHorizontalBar" />').append(b('<div class="jspCap jspCapLeft" />'),b('<div class="jspTrack" />').append(b('<div class="jspDrag" />').append(b('<div class="jspDragLeft" />'),b('<div class="jspDragRight" />'))),b('<div class="jspCap jspCapRight" />')));an=am.find(">.jspHorizontalBar");G=an.find(">.jspTrack");h=G.find(">.jspDrag");if(az.showArrows){ay=b('<a class="jspArrow jspArrowLeft" />').bind("mousedown.jsp",aE(-1,0)).bind("click.jsp",aC);x=b('<a class="jspArrow jspArrowRight" />').bind("mousedown.jsp",aE(1,0)).bind("click.jsp",aC);
+if(az.arrowScrollOnHover){ay.bind("mouseover.jsp",aE(-1,0,ay));x.bind("mouseover.jsp",aE(1,0,x))}al(G,az.horizontalArrowPositions,ay,x)}h.hover(function(){h.addClass("jspHover")},function(){h.removeClass("jspHover")}).bind("mousedown.jsp",function(aJ){b("html").bind("dragstart.jsp selectstart.jsp",aC);h.addClass("jspActive");var s=aJ.pageX-h.position().left;b("html").bind("mousemove.jsp",function(aK){W(aK.pageX-s,false)}).bind("mouseup.jsp mouseleave.jsp",ax);return false});l=am.innerWidth();ah()}}function ah(){am.find(">.jspHorizontalBar>.jspCap:visible,>.jspHorizontalBar>.jspArrow").each(function(){l-=b(this).outerWidth()});G.width(l+"px");aa=0}function F(){if(aF&&aA){var aJ=G.outerHeight(),s=aq.outerWidth();t-=aJ;b(an).find(">.jspCap:visible,>.jspArrow").each(function(){l+=b(this).outerWidth()});l-=s;v-=s;ak-=aJ;G.parent().append(b('<div class="jspCorner" />').css("width",aJ+"px"));o();ah()}if(aF){Y.width((am.outerWidth()-f)+"px")}Z=Y.outerHeight();q=Z/v;if(aF){au=Math.ceil(1/y*l);if(au>az.horizontalDragMaxWidth){au=az.horizontalDragMaxWidth}else{if(au<az.horizontalDragMinWidth){au=az.horizontalDragMinWidth}}h.width(au+"px");j=l-au;ae(aa)}if(aA){A=Math.ceil(1/q*t);if(A>az.verticalDragMaxHeight){A=az.verticalDragMaxHeight}else{if(A<az.verticalDragMinHeight){A=az.verticalDragMinHeight}}av.height(A+"px");i=t-A;ad(I)}}function al(aK,aM,aJ,s){var aO="before",aL="after",aN;if(aM=="os"){aM=/Mac/.test(navigator.platform)?"after":"split"}if(aM==aO){aL=aM}else{if(aM==aL){aO=aM;aN=aJ;aJ=s;s=aN}}aK[aO](aJ)[aL](s)}function aE(aJ,s,aK){return function(){H(aJ,s,this,aK);this.blur();return false}}function H(aM,aL,aP,aO){aP=b(aP).addClass("jspActive");var aN,aK,aJ=true,s=function(){if(aM!==0){Q.scrollByX(aM*az.arrowButtonSpeed)}if(aL!==0){Q.scrollByY(aL*az.arrowButtonSpeed)}aK=setTimeout(s,aJ?az.initialDelay:az.arrowRepeatFreq);aJ=false};s();aN=aO?"mouseout.jsp":"mouseup.jsp";aO=aO||b("html");aO.bind(aN,function(){aP.removeClass("jspActive");aK&&clearTimeout(aK);aK=null;aO.unbind(aN)})}function p(){w();if(aA){aq.bind("mousedown.jsp",function(aO){if(aO.originalTarget===c||aO.originalTarget==aO.currentTarget){var aM=b(this),aP=aM.offset(),aN=aO.pageY-aP.top-I,aK,aJ=true,s=function(){var aS=aM.offset(),aT=aO.pageY-aS.top-A/2,aQ=v*az.scrollPagePercent,aR=i*aQ/(Z-v);if(aN<0){if(I-aR>aT){Q.scrollByY(-aQ)}else{V(aT)}}else{if(aN>0){if(I+aR<aT){Q.scrollByY(aQ)}else{V(aT)}}else{aL();return}}aK=setTimeout(s,aJ?az.initialDelay:az.trackClickRepeatFreq);aJ=false},aL=function(){aK&&clearTimeout(aK);aK=null;b(document).unbind("mouseup.jsp",aL)};s();b(document).bind("mouseup.jsp",aL);return false}})}if(aF){G.bind("mousedown.jsp",function(aO){if(aO.originalTarget===c||aO.originalTarget==aO.currentTarget){var aM=b(this),aP=aM.offset(),aN=aO.pageX-aP.left-aa,aK,aJ=true,s=function(){var aS=aM.offset(),aT=aO.pageX-aS.left-au/2,aQ=ak*az.scrollPagePercent,aR=j*aQ/(T-ak);if(aN<0){if(aa-aR>aT){Q.scrollByX(-aQ)}else{W(aT)}}else{if(aN>0){if(aa+aR<aT){Q.scrollByX(aQ)}else{W(aT)}}else{aL();return}}aK=setTimeout(s,aJ?az.initialDelay:az.trackClickRepeatFreq);aJ=false},aL=function(){aK&&clearTimeout(aK);aK=null;b(document).unbind("mouseup.jsp",aL)};s();b(document).bind("mouseup.jsp",aL);return false}})}}function w(){if(G){G.unbind("mousedown.jsp")}if(aq){aq.unbind("mousedown.jsp")}}function ax(){b("html").unbind("dragstart.jsp selectstart.jsp mousemove.jsp mouseup.jsp mouseleave.jsp");if(av){av.removeClass("jspActive")}if(h){h.removeClass("jspActive")}}function V(s,aJ){if(!aA){return}if(s<0){s=0}else{if(s>i){s=i}}if(aJ===c){aJ=az.animateScroll}if(aJ){Q.animate(av,"top",s,ad)}else{av.css("top",s);ad(s)}}function ad(aJ){if(aJ===c){aJ=av.position().top}am.scrollTop(0);I=aJ;var aM=I===0,aK=I==i,aL=aJ/i,s=-aL*(Z-v);if(aj!=aM||aH!=aK){aj=aM;aH=aK;D.trigger("jsp-arrow-change",[aj,aH,P,k])}u(aM,aK);Y.css("top",s);D.trigger("jsp-scroll-y",[-s,aM,aK]).trigger("scroll")}function W(aJ,s){if(!aF){return}if(aJ<0){aJ=0}else{if(aJ>j){aJ=j}}if(s===c){s=az.animateScroll}if(s){Q.animate(h,"left",aJ,ae)
+}else{h.css("left",aJ);ae(aJ)}}function ae(aJ){if(aJ===c){aJ=h.position().left}am.scrollTop(0);aa=aJ;var aM=aa===0,aL=aa==j,aK=aJ/j,s=-aK*(T-ak);if(P!=aM||k!=aL){P=aM;k=aL;D.trigger("jsp-arrow-change",[aj,aH,P,k])}r(aM,aL);Y.css("left",s);D.trigger("jsp-scroll-x",[-s,aM,aL]).trigger("scroll")}function u(aJ,s){if(az.showArrows){ar[aJ?"addClass":"removeClass"]("jspDisabled");af[s?"addClass":"removeClass"]("jspDisabled")}}function r(aJ,s){if(az.showArrows){ay[aJ?"addClass":"removeClass"]("jspDisabled");x[s?"addClass":"removeClass"]("jspDisabled")}}function M(s,aJ){var aK=s/(Z-v);V(aK*i,aJ)}function N(aJ,s){var aK=aJ/(T-ak);W(aK*j,s)}function ab(aW,aR,aK){var aO,aL,aM,s=0,aV=0,aJ,aQ,aP,aT,aS,aU;try{aO=b(aW)}catch(aN){return}aL=aO.outerHeight();aM=aO.outerWidth();am.scrollTop(0);am.scrollLeft(0);while(!aO.is(".jspPane")){s+=aO.position().top;aV+=aO.position().left;aO=aO.offsetParent();if(/^body|html$/i.test(aO[0].nodeName)){return}}aJ=aB();aP=aJ+v;if(s<aJ||aR){aS=s-az.verticalGutter}else{if(s+aL>aP){aS=s-v+aL+az.verticalGutter}}if(aS){M(aS,aK)}aQ=aD();aT=aQ+ak;if(aV<aQ||aR){aU=aV-az.horizontalGutter}else{if(aV+aM>aT){aU=aV-ak+aM+az.horizontalGutter}}if(aU){N(aU,aK)}}function aD(){return -Y.position().left}function aB(){return -Y.position().top}function K(){var s=Z-v;return(s>20)&&(s-aB()<10)}function B(){var s=T-ak;return(s>20)&&(s-aD()<10)}function ag(){am.unbind(ac).bind(ac,function(aM,aN,aL,aJ){var aK=aa,s=I;Q.scrollBy(aL*az.mouseWheelSpeed,-aJ*az.mouseWheelSpeed,false);return aK==aa&&s==I})}function n(){am.unbind(ac)}function aC(){return false}function J(){Y.find(":input,a").unbind("focus.jsp").bind("focus.jsp",function(s){ab(s.target,false)})}function E(){Y.find(":input,a").unbind("focus.jsp")}function S(){var s,aJ,aL=[];aF&&aL.push(an[0]);aA&&aL.push(U[0]);Y.focus(function(){D.focus()});D.attr("tabindex",0).unbind("keydown.jsp keypress.jsp").bind("keydown.jsp",function(aO){if(aO.target!==this&&!(aL.length&&b(aO.target).closest(aL).length)){return}var aN=aa,aM=I;switch(aO.keyCode){case 40:case 38:case 34:case 32:case 33:case 39:case 37:s=aO.keyCode;aK();break;case 35:M(Z-v);s=null;break;case 36:M(0);s=null;break}aJ=aO.keyCode==s&&aN!=aa||aM!=I;return !aJ}).bind("keypress.jsp",function(aM){if(aM.keyCode==s){aK()}return !aJ});if(az.hideFocus){D.css("outline","none");if("hideFocus" in am[0]){D.attr("hideFocus",true)}}else{D.css("outline","");if("hideFocus" in am[0]){D.attr("hideFocus",false)}}function aK(){var aN=aa,aM=I;switch(s){case 40:Q.scrollByY(az.keyboardSpeed,false);break;case 38:Q.scrollByY(-az.keyboardSpeed,false);break;case 34:case 32:Q.scrollByY(v*az.scrollPagePercent,false);break;case 33:Q.scrollByY(-v*az.scrollPagePercent,false);break;case 39:Q.scrollByX(az.keyboardSpeed,false);break;case 37:Q.scrollByX(-az.keyboardSpeed,false);break}aJ=aN!=aa||aM!=I;return aJ}}function R(){D.attr("tabindex","-1").removeAttr("tabindex").unbind("keydown.jsp keypress.jsp")}function C(){if(location.hash&&location.hash.length>1){var aL,aJ,aK=escape(location.hash);try{aL=b(aK)}catch(s){return}if(aL.length&&Y.find(aK)){if(am.scrollTop()===0){aJ=setInterval(function(){if(am.scrollTop()>0){ab(aK,true);b(document).scrollTop(am.position().top);clearInterval(aJ)}},50)}else{ab(aK,true);b(document).scrollTop(am.position().top)}}}}function ai(){b("a.jspHijack").unbind("click.jsp-hijack").removeClass("jspHijack")}function m(){ai();b("a[href^=#]").addClass("jspHijack").bind("click.jsp-hijack",function(){var s=this.href.split("#"),aJ;if(s.length>1){aJ=s[1];if(aJ.length>0&&Y.find("#"+aJ).length>0){ab("#"+aJ,true);return false}}})}function ao(){var aK,aJ,aM,aL,aN,s=false;am.unbind("touchstart.jsp touchmove.jsp touchend.jsp click.jsp-touchclick").bind("touchstart.jsp",function(aO){var aP=aO.originalEvent.touches[0];aK=aD();aJ=aB();aM=aP.pageX;aL=aP.pageY;aN=false;s=true}).bind("touchmove.jsp",function(aR){if(!s){return}var aQ=aR.originalEvent.touches[0],aP=aa,aO=I;Q.scrollTo(aK+aM-aQ.pageX,aJ+aL-aQ.pageY);aN=aN||Math.abs(aM-aQ.pageX)>5||Math.abs(aL-aQ.pageY)>5;
+return aP==aa&&aO==I}).bind("touchend.jsp",function(aO){s=false}).bind("click.jsp-touchclick",function(aO){if(aN){aN=false;return false}})}function g(){var s=aB(),aJ=aD();D.removeClass("jspScrollable").unbind(".jsp");D.replaceWith(ap.append(Y.children()));ap.scrollTop(s);ap.scrollLeft(aJ)}b.extend(Q,{reinitialise:function(aJ){aJ=b.extend({},az,aJ);at(aJ)},scrollToElement:function(aK,aJ,s){ab(aK,aJ,s)},scrollTo:function(aK,s,aJ){N(aK,aJ);M(s,aJ)},scrollToX:function(aJ,s){N(aJ,s)},scrollToY:function(s,aJ){M(s,aJ)},scrollToPercentX:function(aJ,s){N(aJ*(T-ak),s)},scrollToPercentY:function(aJ,s){M(aJ*(Z-v),s)},scrollBy:function(aJ,s,aK){Q.scrollByX(aJ,aK);Q.scrollByY(s,aK)},scrollByX:function(s,aK){var aJ=aD()+Math[s<0?"floor":"ceil"](s),aL=aJ/(T-ak);W(aL*j,aK)},scrollByY:function(s,aK){var aJ=aB()+Math[s<0?"floor":"ceil"](s),aL=aJ/(Z-v);V(aL*i,aK)},positionDragX:function(s,aJ){W(s,aJ)},positionDragY:function(aJ,s){V(aJ,s)},animate:function(aJ,aM,s,aL){var aK={};aK[aM]=s;aJ.animate(aK,{duration:az.animateDuration,easing:az.animateEase,queue:false,step:aL})},getContentPositionX:function(){return aD()},getContentPositionY:function(){return aB()},getContentWidth:function(){return T},getContentHeight:function(){return Z},getPercentScrolledX:function(){return aD()/(T-ak)},getPercentScrolledY:function(){return aB()/(Z-v)},getIsScrollableH:function(){return aF},getIsScrollableV:function(){return aA},getContentPane:function(){return Y},scrollToBottom:function(s){V(i,s)},hijackInternalLinks:function(){m()},destroy:function(){g()}});at(O)}e=b.extend({},b.fn.jScrollPane.defaults,e);b.each(["mouseWheelSpeed","arrowButtonSpeed","trackClickSpeed","keyboardSpeed"],function(){e[this]=e[this]||e.speed});return this.each(function(){var f=b(this),g=f.data("jsp");if(g){g.reinitialise(e)}else{g=new d(f,e);f.data("jsp",g)}})};b.fn.jScrollPane.defaults={showArrows:false,maintainPosition:true,stickToBottom:false,stickToRight:false,clickOnTrack:true,autoReinitialise:false,autoReinitialiseDelay:500,verticalDragMinHeight:0,verticalDragMaxHeight:99999,horizontalDragMinWidth:0,horizontalDragMaxWidth:99999,contentWidth:c,animateScroll:false,animateDuration:300,animateEase:"linear",hijackInternalLinks:false,verticalGutter:4,horizontalGutter:4,mouseWheelSpeed:0,arrowButtonSpeed:0,arrowRepeatFreq:50,arrowScrollOnHover:false,trackClickSpeed:0,trackClickRepeatFreq:70,verticalArrowPositions:"split",horizontalArrowPositions:"split",enableKeyboardNavigation:true,hideFocus:false,keyboardSpeed:0,initialDelay:300,speed:30,scrollPagePercent:0.8}})(jQuery,this);
--- a/data/js/jquery.mousewheel.js
+++ b/data/js/jquery.mousewheel.js
@@ -0,0 +1,84 @@
+/*! Copyright (c) 2011 Brandon Aaron (http://brandonaaron.net)
+ * Licensed under the MIT License (LICENSE.txt).
+ *
+ * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
+ * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
+ * Thanks to: Seamus Leahy for adding deltaX and deltaY
+ *
+ * Version: 3.0.6
+ * 
+ * Requires: 1.2.2+
+ */
+
+(function($) {
+
+var types = ['DOMMouseScroll', 'mousewheel'];
+
+if ($.event.fixHooks) {
+    for ( var i=types.length; i; ) {
+        $.event.fixHooks[ types[--i] ] = $.event.mouseHooks;
+    }
+}
+
+$.event.special.mousewheel = {
+    setup: function() {
+        if ( this.addEventListener ) {
+            for ( var i=types.length; i; ) {
+                this.addEventListener( types[--i], handler, false );
+            }
+        } else {
+            this.onmousewheel = handler;
+        }
+    },
+    
+    teardown: function() {
+        if ( this.removeEventListener ) {
+            for ( var i=types.length; i; ) {
+                this.removeEventListener( types[--i], handler, false );
+            }
+        } else {
+            this.onmousewheel = null;
+        }
+    }
+};
+
+$.fn.extend({
+    mousewheel: function(fn) {
+        return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
+    },
+    
+    unmousewheel: function(fn) {
+        return this.unbind("mousewheel", fn);
+    }
+});
+
+
+function handler(event) {
+    var orgEvent = event || window.event, args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true, deltaX = 0, deltaY = 0;
+    event = $.event.fix(orgEvent);
+    event.type = "mousewheel";
+    
+    // Old school scrollwheel delta
+    if ( orgEvent.wheelDelta ) { delta = orgEvent.wheelDelta/120; }
+    if ( orgEvent.detail     ) { delta = -orgEvent.detail/3; }
+    
+    // New school multidimensional scroll (touchpads) deltas
+    deltaY = delta;
+    
+    // Gecko
+    if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
+        deltaY = 0;
+        deltaX = -1*delta;
+    }
+    
+    // Webkit
+    if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/120; }
+    if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = -1*orgEvent.wheelDeltaX/120; }
+    
+    // Add event and delta to the front of the arguments
+    args.unshift(event, delta, deltaX, deltaY);
+    
+    return ($.event.dispatch || $.event.handle).apply(this, args);
+}
+
+})(jQuery);