roda-component 0.0.10 → 0.1.0

data/test/dummy/public/chat/bower/jScrollPane/ajax_content.html

@@ -0,0 +1,73 @@
+
+	<p>
+		Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
+		Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
+		sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
+		Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
+		commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros
+		ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.
+		Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna
+		eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis
+		luctus, metus
+	</p>
+	<p>
+		Vestibulum dictum consectetur magna eu egestas. Praesent molestie dapibus erat, sit amet sodales
+		lectus congue ut. Nam adipiscing, tortor ac blandit egestas, lorem ligula posuere ipsum, nec
+		faucibus nisl enim eu purus. Quisque bibendum diam quis nunc eleifend at molestie libero tincidunt.
+		Quisque tincidunt sapien a sapien pellentesque consequat. Mauris adipiscing venenatis augue ut
+		tempor. Donec auctor mattis quam quis aliquam. Nullam ultrices erat in dolor pharetra bibendum.
+		Suspendisse eget odio ut libero imperdiet rhoncus. Curabitur aliquet, ipsum sit amet aliquet varius,
+		est urna ullamcorper magna, sed eleifend libero nunc non erat. Vivamus semper turpis ac turpis
+		volutpat non cursus velit aliquam. Fusce id tortor id sapien porta egestas. Nulla venenatis luctus
+		libero et suscipit. Sed sed purus risus. Donec auctor, leo nec eleifend vehicula, lacus felis
+		sollicitudin est, vitae lacinia lectus urna nec libero. Aliquam pellentesque, arcu condimentum
+		pharetra vestibulum, lectus felis malesuada felis, vel fringilla dolor dui tempus nisi. In hac
+		habitasse platea dictumst. Ut imperdiet mauris vitae eros varius eget accumsan lectus adipiscing.
+	</p>
+	<p>
+		Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
+		Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
+		amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
+	</p>
+	<p>
+		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices
+		eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci
+		mi, in pharetra ligula. Nulla facilisi. Nulla facilisi. Mauris convallis venenatis massa, quis
+		consectetur felis ornare quis. Sed aliquet nunc ac ante molestie ultricies. Nam pulvinar ultricies
+		bibendum. Vivamus diam leo, faucibus et vehicula eu, molestie sit amet dui. Proin nec orci et elit
+		semper ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
+		mus. Sed quis urna mi, ac dignissim mauris. Quisque mollis ornare mauris, sed laoreet diam malesuada
+		quis. Proin vel elementum ante. Donec hendrerit arcu ac odio tincidunt posuere. Vestibulum nec risus
+		eu lacus semper viverra.
+	</p>
+	<p>
+		Quisque et massa leo, sit amet adipiscing nisi. Mauris vel condimentum dolor. Duis quis ullamcorper
+		eros. Proin metus dui, facilisis id bibendum sed, aliquet non ipsum. Aenean pulvinar risus eu nisi
+		dictum eleifend. Maecenas mattis dolor eget lectus pretium eget molestie libero auctor. Praesent sit
+		amet tellus sed nibh convallis semper. Curabitur nisl odio, feugiat non dapibus sed, tincidunt ut
+		est. Nullam erat velit, suscipit aliquet commodo sit amet, mollis in mauris. Curabitur pharetra
+		dictum interdum. In posuere pretium ultricies. Curabitur volutpat eros vehicula quam ultrices
+		varius. Proin volutpat enim a massa tempor ornare. Sed ullamcorper fermentum nisl, ac hendrerit sem
+		feugiat ac. Donec porttitor ullamcorper quam. Morbi pretium adipiscing quam, quis bibendum diam
+		congue eget. Sed at lectus at est malesuada iaculis. Sed fermentum quam dui. Donec eget ipsum dolor,
+		id mollis nisi. Donec fermentum vehicula porta.
+	</p>
+	<p>
+		Vestibulum dictum consectetur magna eu egestas. Praesent molestie dapibus erat, sit amet sodales
+		lectus congue ut. Nam adipiscing, tortor ac blandit egestas, lorem ligula posuere ipsum, nec
+		faucibus nisl enim eu purus. Quisque bibendum diam quis nunc eleifend at molestie libero tincidunt.
+		Quisque tincidunt sapien a sapien pellentesque consequat. Mauris adipiscing venenatis augue ut
+		tempor. Donec auctor mattis quam quis aliquam. Nullam ultrices erat in dolor pharetra bibendum.
+		Suspendisse eget odio ut libero imperdiet rhoncus. Curabitur aliquet, ipsum sit amet aliquet varius,
+		est urna ullamcorper magna, sed eleifend libero nunc non erat. Vivamus semper turpis ac turpis
+		volutpat non cursus velit aliquam. Fusce id tortor id sapien porta egestas. Nulla venenatis luctus
+		libero et suscipit. Sed sed purus risus. Donec auctor, leo nec eleifend vehicula, lacus felis
+		sollicitudin est, vitae lacinia lectus urna nec libero. Aliquam pellentesque, arcu condimentum
+		pharetra vestibulum, lectus felis malesuada felis, vel fringilla dolor dui tempus nisi. In hac
+		habitasse platea dictumst. Ut imperdiet mauris vitae eros varius eget accumsan lectus adipiscing.
+	</p>
+	<p>
+		Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
+		Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
+		amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
+	</p>

data/test/dummy/public/chat/bower/jScrollPane/anchors.html

@@ -0,0 +1,140 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+		"http://www.w3.org/TR/html4/loose.dtd">
+<html>
+	<head>
+
+		<title>jScrollPane anchors demo</title>
+
+		<!-- styles specific to demo site -->
+		<link type="text/css" href="style/demo.css" rel="stylesheet" media="all" />
+		<!-- styles needed by jScrollPane - include in your own sites -->
+		<link type="text/css" href="style/jquery.jscrollpane.css" rel="stylesheet" media="all" />
+
+		<style type="text/css" id="page-css">
+			/* Styles specific to this particular page */
+			.scroll-pane
+			{
+				width: 100%;
+				height: 200px;
+				overflow: auto;
+			}
+		</style>
+
+		<!-- latest jQuery direct from google's CDN -->
+		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+		<!-- the mousewheel plugin -->
+		<script type="text/javascript" src="script/jquery.mousewheel.js"></script>
+		<!-- the jScrollPane script -->
+		<script type="text/javascript" src="script/jquery.jscrollpane.min.js"></script>
+		<!-- scripts specific to this demo site -->
+		<script type="text/javascript" src="script/demo.js"></script>
+
+		<script type="text/javascript" id="sourcecode">
+			$(function()
+			{
+				$('.scroll-pane').jScrollPane(
+					{
+						hijackInternalLinks: true
+					}
+				);
+			});
+		</script>
+	</head>
+	<body>
+		<div id="top-nav">
+			<img src="image/logo.png" width="196" height="69" alt="jScrollPane">
+			<ul>
+				<li><a href="index.html">Home</a></li>
+				<li><a href="index.html#examples">Examples</a></li>
+				<li><a href="index.html#themes">Themes</a></li>
+				<li><a href="index.html#usage">How to use</a></li>
+				<li><a href="faqs.html">FAQs</a></li>
+				<li><a href="known_issues.html">Known issues</a></li>
+				<li><a href="index.html#support">Support</a></li>
+				<li><a href="index.html#download">Download</a></li>
+			</ul>
+		</div>
+		<div id="container">
+			<h1>jScrollPane - anchors demo page</h1>
+			<p>
+				This demonstration shows how jScrollPane can check the location.hash when the page loads and
+				automatically scroll the pane to the correct place if the hash refers to an element within the scroll
+				pane. jScrollPane can also hijack links within your page and automatically convert relevant ones to
+				scroll the jScrollPane. As an example, the following links will scroll to the paragraphs in the scroll
+				pane below: <a href="#para1">1</a>, <a href="#para2">2</a>, <a href="#para3">3</a>,
+				<a href="#para4">4</a> and <a href="#para5">5</a>. <a href="#sourcecode-display">This link</a> (to the
+				sourcecode listing below) is also an internal link but because its target isn't within the scrollpane
+				we don't mess with it.
+			</p>
+			<p>
+				<strong>Note</strong> that the link hijacking functionality is off by default (as it has a small
+				performance overhead so if you don't need it you might as well not have it). To enable it pass
+				<strong><a href="settings.html#hijackInternalLinks">hijackInternalLinks</a>: true</strong> in with
+				your settings (as I do on this page). Internally only one live event is bound to the document body.
+			</p>
+			<div class="scroll-pane">
+				<p id="para1">
+					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices
+					eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci
+					mi, in pharetra ligula. Nulla facilisi. Nulla facilisi. Mauris convallis venenatis massa, quis
+					consectetur felis ornare quis. Sed aliquet nunc ac ante molestie ultricies. Nam pulvinar ultricies
+					bibendum. Vivamus diam leo, faucibus et vehicula eu, molestie sit amet dui. Proin nec orci et elit
+					semper ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
+					mus. Sed quis urna mi, ac dignissim mauris. Quisque mollis ornare mauris, sed laoreet diam malesuada
+					quis. Proin vel elementum ante. Donec hendrerit arcu ac odio tincidunt posuere. Vestibulum nec risus
+					eu lacus semper viverra.
+				</p>
+				<p id="para2">
+					Vestibulum dictum consectetur magna eu egestas. Praesent molestie dapibus erat, sit amet sodales
+					lectus congue ut. Nam adipiscing, tortor ac blandit egestas, lorem ligula posuere ipsum, nec
+					faucibus nisl enim eu purus. Quisque bibendum diam quis nunc eleifend at molestie libero tincidunt.
+					Quisque tincidunt sapien a sapien pellentesque consequat. Mauris adipiscing venenatis augue ut
+					tempor. Donec auctor mattis quam quis aliquam. Nullam ultrices erat in dolor pharetra bibendum.
+					Suspendisse eget odio ut libero imperdiet rhoncus. Curabitur aliquet, ipsum sit amet aliquet varius,
+					est urna ullamcorper magna, sed eleifend libero nunc non erat. Vivamus semper turpis ac turpis
+					volutpat non cursus velit aliquam. Fusce id tortor id sapien porta egestas. Nulla venenatis luctus
+					libero et suscipit. Sed sed purus risus. Donec auctor, leo nec eleifend vehicula, lacus felis
+					sollicitudin est, vitae lacinia lectus urna nec libero. Aliquam pellentesque, arcu condimentum
+					pharetra vestibulum, lectus felis malesuada felis, vel fringilla dolor dui tempus nisi. In hac
+					habitasse platea dictumst. Ut imperdiet mauris vitae eros varius eget accumsan lectus adipiscing.
+				</p>
+				<p id="para3">
+					Quisque et massa leo, sit amet adipiscing nisi. Mauris vel condimentum dolor. Duis quis ullamcorper
+					eros. Proin metus dui, facilisis id bibendum sed, aliquet non ipsum. Aenean pulvinar risus eu nisi
+					dictum eleifend. Maecenas mattis dolor eget lectus pretium eget molestie libero auctor. Praesent sit
+					amet tellus sed nibh convallis semper. Curabitur nisl odio, feugiat non dapibus sed, tincidunt ut
+					est. Nullam erat velit, suscipit aliquet commodo sit amet, mollis in mauris. Curabitur pharetra
+					dictum interdum. In posuere pretium ultricies. Curabitur volutpat eros vehicula quam ultrices
+					varius. Proin volutpat enim a massa tempor ornare. Sed ullamcorper fermentum nisl, ac hendrerit sem
+					feugiat ac. Donec porttitor ullamcorper quam. Morbi pretium adipiscing quam, quis bibendum diam
+					congue eget. Sed at lectus at est malesuada iaculis. Sed fermentum quam dui. Donec eget ipsum dolor,
+					id mollis nisi. Donec fermentum vehicula porta.
+				</p>
+				<p id="para4">
+					Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
+					Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
+					sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
+					Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
+					commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros
+					ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.
+					Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna
+					eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis
+					luctus, metus
+				</p>
+				<p id="para5">
+					Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
+					Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
+					amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
+				</p>
+			</div>
+			<h2>Page javascript</h2>
+			<div id="sourcecode-display">
+				<p>The contents of this div will be replaced by the javascript added to this page</p>
+			</div>
+			<h2>Page CSS</h2>
+			<div id="css-display">
+				<p>The contents of this div will be replaced by the CSS added to this page</p>
+			</div>
+		</div>
+	</body>
+</html>

data/test/dummy/public/chat/bower/jScrollPane/api.html

@@ -0,0 +1,190 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+		"http://www.w3.org/TR/html4/loose.dtd">
+<html>
+	<head>
+
+		<title>jScrollPane - API documentation</title>
+
+		<!-- styles specific to demo site -->
+		<link type="text/css" href="style/demo.css" rel="stylesheet" media="all" />
+
+		<!-- latest jQuery direct from google's CDN -->
+		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+		<!-- scripts specific to this demo site -->
+		<script type="text/javascript" src="script/demo.js"></script>
+	</head>
+	<body>
+		<div id="top-nav">
+			<img src="image/logo.png" width="196" height="69" alt="jScrollPane">
+			<ul>
+				<li><a href="index.html">Home</a></li>
+				<li><a href="index.html#examples">Examples</a></li>
+				<li><a href="index.html#themes">Themes</a></li>
+				<li><a href="index.html#usage">How to use</a></li>
+				<li><a href="faqs.html">FAQs</a></li>
+				<li><a href="known_issues.html">Known issues</a></li>
+				<li><a href="index.html#support">Support</a></li>
+				<li><a href="index.html#download">Download</a></li>
+			</ul>
+		</div>
+		<div id="container">
+			<h1>jScrollPane - API documentation</h1>
+			<p>
+				This page shows how you can use the jScrollPane API (in addition to the <a href="settings.html">
+				settings object</a> and the <a href="events.html">events</a> which are dispatched) to update your
+				jScrollPane after it's has been initially created.
+			</p>
+			<p>
+				To get a reference to the API for a particular scrollpane you will need to access the 'jsp' variable in
+				the <em>data</em> of the element you applied jScrollPane to. e.g.
+			</p>
+			<pre>var element = $('#my-element').jScrollPane({/* ...settings... */});
+var api = element.data('jsp');</pre>
+			<p>
+				Once you have a reference to the API you can call any of the following methods on it:
+			</p>
+			<h2 id="reinitialise">reinitialise(s)</h2>
+			<p>
+				Reinitialises the scroll pane (if it's internal dimensions have changed since the last time it
+				was initialised). The settings object which is passed in will override any settings from the
+				previous time it was initialised - if you don't pass any settings then the ones from the previous
+				initialisation will be used.
+			</p>
+			<h2 id="scrollToElement">scrollToElement(ele, stickToTop, animate)</h2>
+			<p>
+				Scrolls the specified element (a jQuery object, DOM node or jQuery selector string) into view so
+				that it can be seen within the viewport. If stickToTop is true then the element will appear at
+				the top of the viewport, if it is false then the viewport will scroll as little as possible to
+				show the element. You can also specify if you want animation to occur. If you don't provide this
+				argument then the animateScroll value from the settings object is used instead.
+			</p>
+			<h2 id="scrollTo">scrollTo(destX, destY, animate)</h2>
+			<p>
+				Scrolls the pane so that the specified co-ordinates within the content are at the top left
+				of the viewport. animate is optional and if not passed then the value of animateScroll from
+				the settings object this jScrollPane was initialised with is used.
+			</p>
+			<h2 id="scrollToX">scrollToX(destX, animate)</h2>
+			<p>
+				Scrolls the pane so that the specified co-ordinate within the content is at the left of the
+				viewport. animate is optional and if not passed then the value of animateScroll from the settings
+				object this jScrollPane was initialised with is used.
+			</p>
+			<h2 id="scrollToY">scrollToY(destY, animate)</h2>
+			<p>
+				Scrolls the pane so that the specified co-ordinate within the content is at the top of the
+				viewport. animate is optional and if not passed then the value of animateScroll from the settings
+				object this jScrollPane was initialised with is used.
+			</p>
+			<h2 id="scrollToPercentX">scrollToPercentX(destPercentX, animate)</h2>
+			<p>
+				Scrolls the pane to the specified percentage of its maximum horizontal scroll position. animate
+				is optional and if not passed then the value of animateScroll from the settings object this
+				jScrollPane was initialised with is used.
+			</p>
+			<h2 id="scrollToPercentY">scrollToPercentY(destPercentY, animate)</h2>
+			<p>
+				Scrolls the pane to the specified percentage of its maximum vertical scroll position. animate
+				is optional and if not passed then the value of animateScroll from the settings object this
+				jScrollPane was initialised with is used.
+			</p>
+			<h2 id="scrollBy">scrollBy(deltaX, deltaY, animate)</h2>
+			<p>
+				Scrolls the pane by the specified amount of pixels. animate is optional and if not passed then
+				the value of animateScroll from the settings object this jScrollPane was initialised with is used.
+			</p>
+			<h2 id="scrollByX">scrollByX(deltaX, animate)</h2>
+			<p>
+				Scrolls the pane by the specified amount of pixels. animate is optional and if not passed then
+				the value of animateScroll from the settings object this jScrollPane was initialised with is used.
+			</p>
+			<h2 id="scrollByY">scrollByY(deltaY, animate)</h2>
+			<p>
+				Scrolls the pane by the specified amount of pixels. animate is optional and if not passed then
+				the value of animateScroll from the settings object this jScrollPane was initialised with is used.
+			</p>
+			<h2 id="positionDragX">positionDragX(x, animate)</h2>
+			<p>
+				Positions the horizontal drag at the specified x position (and updates the viewport to reflect
+				this). animate is optional and if not passed then the value of animateScroll from the settings
+				object this jScrollPane was initialised with is used.
+			</p>
+			<h2 id="positionDragY">positionDragY(y, animate)</h2>
+			<p>
+				Positions the vertical drag at the specified y position (and updates the viewport to reflect
+				this). animate is optional and if not passed then the value of animateScroll from the settings
+				object this jScrollPane was initialised with is used.
+			</p>
+			<h2 id="animate">animate(ele, prop, value, stepCallback)</h2>
+			<p>
+				This method is called when jScrollPane is trying to animate to a new position. You can override
+				it if you want to provide advanced animation functionality. It is passed the following arguments:
+			</p>
+			<ul class="link-list">
+				<li><strong>ele</strong> - the element whose position is being animated</li>
+				<li><strong>prop</strong> - the property that is being animated</li>
+				<li><strong>value</strong> - the value it's being animated to</li>
+				<li><strong>stepCallback</strong> - a function that you must execute each time you update the value of the property</li>
+			</ul>
+			<p>
+				You can use the default implementation (see <a href="script/jquery.jscrollpane.js">sourcecode</a>) as a
+				starting point for your own implementation.
+			</p>
+			<h2 id="getContentPositionX">getContentPositionX()</h2>
+			<p>
+				Returns the current x position of the viewport with regards to the content pane.
+			</p>
+			<h2 id="getContentPositionY">getContentPositionY()</h2>
+			<p>
+				Returns the current y position of the viewport with regards to the content pane.
+			</p>
+			<h2 id="getContentWidth">getContentWidth()</h2>
+			<p>
+				Returns the width of the content within the scroll pane.
+			</p>
+			<h2 id="getContentHeight">getContentHeight()</h2>
+			<p>
+				Returns the height of the content within the scroll pane.
+			</p>
+			<h2 id="getIsScrollableH">getIsScrollableH()</h2>
+			<p>
+				Returns whether or not this scrollpane has a horizontal scrollbar.
+			</p>
+			<h2 id="getPercentScrolledX">getPercentScrolledX()</h2>
+			<p>
+				Returns the horizontal position of the viewport within the pane content.
+			</p>
+			<h2 id="getPercentScrolledY">getPercentScrolledY()</h2>
+			<p>
+				Returns the vertical position of the viewport within the pane content.
+			</p>
+			<h2 id="getIsScrollableV">getIsScrollableV()</h2>
+			<p>
+				Returns whether or not this scrollpane has a vertical scrollbar.
+			</p>
+			<h2 id="getContentPane">getContentPane()</h2>
+			<p>
+				Gets a reference to the content pane. It is important that you use this method if you want to
+				edit the content of your jScrollPane as if you access the element directly then you may have some
+				problems (as your original element has had additional elements for the scrollbars etc added into
+				it).
+			</p>
+			<h2 id="scrollToBottom">scrollToBottom(animate)</h2>
+			<p>
+				Scrolls this jScrollPane down as far as it can currently scroll. If animate isn't passed then the
+				animateScroll value from settings is used instead.
+			</p>
+			<h2 id="hijackInternalLinks">hijackInternalLinks()</h2>
+			<p>
+				Hijacks the links on the page which link to content inside the scrollpane. If you have changed
+				the content of your page (e.g. via AJAX) and want to make sure any new anchor links to the
+				contents of your scroll pane will work then call this function.
+			</p>
+			<h2 id="destroy">destroy()</h2>
+			<p>
+				Destroys the jScrollPane on the instance matching this API object and restores the browser's
+				default behaviour. <a href="destroy.html">Example</a>.
+			</p>
+		</div>
+	</body>
+</html>

data/test/dummy/public/chat/bower/jScrollPane/arrow_hover.html

@@ -0,0 +1,208 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+		"http://www.w3.org/TR/html4/loose.dtd">
+<html>
+	<head>
+
+		<title>jScrollPane arrow hover demo</title>
+
+		<!-- styles specific to demo site -->
+		<link type="text/css" href="style/demo.css" rel="stylesheet" media="all" />
+		<!-- styles needed by jScrollPane - include in your own sites -->
+		<link type="text/css" href="style/jquery.jscrollpane.css" rel="stylesheet" media="all" />
+
+		<style type="text/css" id="page-css">
+			/* Styles specific to this particular page */
+			.scroll-pane
+			{
+				width: 100%;
+				height: 200px;
+				overflow: auto;
+			}
+			.horizontal-only
+			{
+				height: auto;
+				max-height: 200px;
+			}
+		</style>
+
+		<!-- latest jQuery direct from google's CDN -->
+		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+		<!-- the mousewheel plugin -->
+		<script type="text/javascript" src="script/jquery.mousewheel.js"></script>
+		<!-- the jScrollPane script -->
+		<script type="text/javascript" src="script/jquery.jscrollpane.min.js"></script>
+		<!-- scripts specific to this demo site -->
+		<script type="text/javascript" src="script/demo.js"></script>
+
+		<script type="text/javascript" id="sourcecode">
+			$(function()
+			{
+				$('.scroll-pane').jScrollPane(
+					{
+						showArrows: true,
+						arrowScrollOnHover: true
+					}
+				);
+			});
+		</script>
+	</head>
+	<body>
+		<div id="top-nav">
+			<img src="image/logo.png" width="196" height="69" alt="jScrollPane">
+			<ul>
+				<li><a href="index.html">Home</a></li>
+				<li><a href="index.html#examples">Examples</a></li>
+				<li><a href="index.html#themes">Themes</a></li>
+				<li><a href="index.html#usage">How to use</a></li>
+				<li><a href="faqs.html">FAQs</a></li>
+				<li><a href="known_issues.html">Known issues</a></li>
+				<li><a href="index.html#support">Support</a></li>
+				<li><a href="index.html#download">Download</a></li>
+			</ul>
+		</div>
+		<div id="container">
+			<h1>jScrollPane - arrow hover example</h1>
+			<p>
+				This demonstration builds on the <a href="arrows.html">scrollpane arrows example</a> and adds in the
+				ability for the scrollpane to automatically scroll when you are hovering over the arrow buttons. If you
+				want this functionality then simply pass in <strong><a href="settings.html#arrowScrollOnHover">
+				arrowScrollOnHover</a>: true</strong> when you initialise your scrollpane.
+			</p>
+
+			<h2>Vertical only</h2>
+			<div class="scroll-pane">
+				<p>
+					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices
+					eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci
+					mi, in pharetra ligula. Nulla facilisi. Nulla facilisi. Mauris convallis venenatis massa, quis
+					consectetur felis ornare quis. Sed aliquet nunc ac ante molestie ultricies. Nam pulvinar ultricies
+					bibendum. Vivamus diam leo, faucibus et vehicula eu, molestie sit amet dui. Proin nec orci et elit
+					semper ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
+					mus. Sed quis urna mi, ac dignissim mauris. Quisque mollis ornare mauris, sed laoreet diam malesuada
+					quis. Proin vel elementum ante. Donec hendrerit arcu ac odio tincidunt posuere. Vestibulum nec risus
+					eu lacus semper viverra.
+				</p>
+				<p>
+					Vestibulum dictum consectetur magna eu egestas. Praesent molestie dapibus erat, sit amet sodales
+					lectus congue ut. Nam adipiscing, tortor ac blandit egestas, lorem ligula posuere ipsum, nec
+					faucibus nisl enim eu purus. Quisque bibendum diam quis nunc eleifend at molestie libero tincidunt.
+					Quisque tincidunt sapien a sapien pellentesque consequat. Mauris adipiscing venenatis augue ut
+					tempor. Donec auctor mattis quam quis aliquam. Nullam ultrices erat in dolor pharetra bibendum.
+					Suspendisse eget odio ut libero imperdiet rhoncus. Curabitur aliquet, ipsum sit amet aliquet varius,
+					est urna ullamcorper magna, sed eleifend libero nunc non erat. Vivamus semper turpis ac turpis
+					volutpat non cursus velit aliquam. Fusce id tortor id sapien porta egestas. Nulla venenatis luctus
+					libero et suscipit. Sed sed purus risus. Donec auctor, leo nec eleifend vehicula, lacus felis
+					sollicitudin est, vitae lacinia lectus urna nec libero. Aliquam pellentesque, arcu condimentum
+					pharetra vestibulum, lectus felis malesuada felis, vel fringilla dolor dui tempus nisi. In hac
+					habitasse platea dictumst. Ut imperdiet mauris vitae eros varius eget accumsan lectus adipiscing.
+				</p>
+				<p>
+					Quisque et massa leo, sit amet adipiscing nisi. Mauris vel condimentum dolor. Duis quis ullamcorper
+					eros. Proin metus dui, facilisis id bibendum sed, aliquet non ipsum. Aenean pulvinar risus eu nisi
+					dictum eleifend. Maecenas mattis dolor eget lectus pretium eget molestie libero auctor. Praesent sit
+					amet tellus sed nibh convallis semper. Curabitur nisl odio, feugiat non dapibus sed, tincidunt ut
+					est. Nullam erat velit, suscipit aliquet commodo sit amet, mollis in mauris. Curabitur pharetra
+					dictum interdum. In posuere pretium ultricies. Curabitur volutpat eros vehicula quam ultrices
+					varius. Proin volutpat enim a massa tempor ornare. Sed ullamcorper fermentum nisl, ac hendrerit sem
+					feugiat ac. Donec porttitor ullamcorper quam. Morbi pretium adipiscing quam, quis bibendum diam
+					congue eget. Sed at lectus at est malesuada iaculis. Sed fermentum quam dui. Donec eget ipsum dolor,
+					id mollis nisi. Donec fermentum vehicula porta.
+				</p>
+				<p>
+					Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
+					Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
+					sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
+					Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
+					commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros
+					ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.
+					Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna
+					eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis
+					luctus, metus
+				</p>
+				<p>
+					Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
+					Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
+					amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
+				</p>
+			</div>
+			<h2>Horizontal only</h2>
+			<div class="scroll-pane horizontal-only">
+				<p style="width: 1000px;">
+					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices
+					eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci
+					mi, in pharetra ligula. Nulla facilisi. Nulla facilisi. Mauris convallis venenatis massa, quis
+					consectetur felis ornare quis. Sed aliquet nunc ac ante molestie ultricies. Nam pulvinar ultricies
+					bibendum. Vivamus diam leo, faucibus et vehicula eu, molestie sit amet dui. Proin nec orci et elit
+					semper ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
+					mus. Sed quis urna mi, ac dignissim mauris. Quisque mollis ornare mauris, sed laoreet diam malesuada
+					quis. Proin vel elementum ante. Donec hendrerit arcu ac odio tincidunt posuere. Vestibulum nec risus
+					eu lacus semper viverra.
+				</p>
+			</div>
+			<h2>Both</h2>
+			<div class="scroll-pane">
+				<p style="width: 1000px">
+					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices
+					eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci
+					mi, in pharetra ligula. Nulla facilisi. Nulla facilisi. Mauris convallis venenatis massa, quis
+					consectetur felis ornare quis. Sed aliquet nunc ac ante molestie ultricies. Nam pulvinar ultricies
+					bibendum. Vivamus diam leo, faucibus et vehicula eu, molestie sit amet dui. Proin nec orci et elit
+					semper ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
+					mus. Sed quis urna mi, ac dignissim mauris. Quisque mollis ornare mauris, sed laoreet diam malesuada
+					quis. Proin vel elementum ante. Donec hendrerit arcu ac odio tincidunt posuere. Vestibulum nec risus
+					eu lacus semper viverra.
+				</p>
+				<p>
+					Vestibulum dictum consectetur magna eu egestas. Praesent molestie dapibus erat, sit amet sodales
+					lectus congue ut. Nam adipiscing, tortor ac blandit egestas, lorem ligula posuere ipsum, nec
+					faucibus nisl enim eu purus. Quisque bibendum diam quis nunc eleifend at molestie libero tincidunt.
+					Quisque tincidunt sapien a sapien pellentesque consequat. Mauris adipiscing venenatis augue ut
+					tempor. Donec auctor mattis quam quis aliquam. Nullam ultrices erat in dolor pharetra bibendum.
+					Suspendisse eget odio ut libero imperdiet rhoncus. Curabitur aliquet, ipsum sit amet aliquet varius,
+					est urna ullamcorper magna, sed eleifend libero nunc non erat. Vivamus semper turpis ac turpis
+					volutpat non cursus velit aliquam. Fusce id tortor id sapien porta egestas. Nulla venenatis luctus
+					libero et suscipit. Sed sed purus risus. Donec auctor, leo nec eleifend vehicula, lacus felis
+					sollicitudin est, vitae lacinia lectus urna nec libero. Aliquam pellentesque, arcu condimentum
+					pharetra vestibulum, lectus felis malesuada felis, vel fringilla dolor dui tempus nisi. In hac
+					habitasse platea dictumst. Ut imperdiet mauris vitae eros varius eget accumsan lectus adipiscing.
+				</p>
+				<p>
+					Quisque et massa leo, sit amet adipiscing nisi. Mauris vel condimentum dolor. Duis quis ullamcorper
+					eros. Proin metus dui, facilisis id bibendum sed, aliquet non ipsum. Aenean pulvinar risus eu nisi
+					dictum eleifend. Maecenas mattis dolor eget lectus pretium eget molestie libero auctor. Praesent sit
+					amet tellus sed nibh convallis semper. Curabitur nisl odio, feugiat non dapibus sed, tincidunt ut
+					est. Nullam erat velit, suscipit aliquet commodo sit amet, mollis in mauris. Curabitur pharetra
+					dictum interdum. In posuere pretium ultricies. Curabitur volutpat eros vehicula quam ultrices
+					varius. Proin volutpat enim a massa tempor ornare. Sed ullamcorper fermentum nisl, ac hendrerit sem
+					feugiat ac. Donec porttitor ullamcorper quam. Morbi pretium adipiscing quam, quis bibendum diam
+					congue eget. Sed at lectus at est malesuada iaculis. Sed fermentum quam dui. Donec eget ipsum dolor,
+					id mollis nisi. Donec fermentum vehicula porta.
+				</p>
+				<p>
+					Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
+					Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
+					sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
+					Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
+					commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros
+					ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.
+					Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna
+					eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis
+					luctus, metus
+				</p>
+				<p>
+					Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
+					Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
+					amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
+				</p>
+			</div>
+			<h2>Page javascript</h2>
+			<div id="sourcecode-display">
+				<p>The contents of this div will be replaced by the javascript added to this page</p>
+			</div>
+			<h2>Page CSS</h2>
+			<div id="css-display">
+				<p>The contents of this div will be replaced by the CSS added to this page</p>
+			</div>
+		</div>
+	</body>
+</html>