Added tags, jquery UI

author: Filipp Lepalaan <f@230.to> 2014-02-19 18:02:09 +0200
committer: Filipp Lepalaan <f@230.to> 2014-02-19 18:02:09 +0200
commit: 75ad7e4bd7d69243e7e5281c2642f00478fb072d (patch)
tree: eaaaf360902d369f42d94778aac8803db7973ce0 /apps/it/static/js/ui/demos
parent: cfc7c3f52544af8a71d3fa3988a06fee200d2c24 (diff)
download: pudding-75ad7e4bd7d69243e7e5281c2642f00478fb072d.tar.gz
pudding-75ad7e4bd7d69243e7e5281c2642f00478fb072d.tar.bz2
pudding-75ad7e4bd7d69243e7e5281c2642f00478fb072d.zip
204 files changed, 9617 insertions, 0 deletions
diff --git a/apps/it/static/js/ui/demos/accordion/collapsible.html b/apps/it/static/js/ui/demos/accordion/collapsible.html
new file mode 100644
index 0000000..edee8cd
--- /dev/null
+++ b/apps/it/static/js/ui/demos/accordion/collapsible.html
@@ -0,0 +1,50 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Accordion - Collapse content</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.accordion.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$(function() {
+		$( "#accordion" ).accordion({
+			collapsible: true
+		});
+	});
+	</script>
+</head>
+<body>
+
+<div id="accordion">
+	<h3>Section 1</h3>
+	<div>
+		<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
+	</div>
+	<h3>Section 2</h3>
+	<div>
+		<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
+	</div>
+	<h3>Section 3</h3>
+	<div>
+		<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
+		<ul>
+			<li>List item one</li>
+			<li>List item two</li>
+			<li>List item three</li>
+		</ul>
+	</div>
+	<h3>Section 4</h3>
+	<div>
+		<p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
+	</div>
+</div>
+
+<div class="demo-description">
+<p>By default, accordions always keep one section open. To allow for all sections to be be collapsible, set the <code>collapsible</code> option to true. Click on the currently open section to collapse its content pane.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/accordion/custom-icons.html b/apps/it/static/js/ui/demos/accordion/custom-icons.html
new file mode 100644
index 0000000..eee872c
--- /dev/null
+++ b/apps/it/static/js/ui/demos/accordion/custom-icons.html
@@ -0,0 +1,64 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Accordion - Customize icons</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.accordion.js"></script>
+	<script src="../../ui/jquery.ui.button.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$(function() {
+		var icons = {
+			header: "ui-icon-circle-arrow-e",
+			activeHeader: "ui-icon-circle-arrow-s"
+		};
+		$( "#accordion" ).accordion({
+			icons: icons
+		});
+		$( "#toggle" ).button().click(function() {
+			if ( $( "#accordion" ).accordion( "option", "icons" ) ) {
+				$( "#accordion" ).accordion( "option", "icons", null );
+			} else {
+				$( "#accordion" ).accordion( "option", "icons", icons );
+			}
+		});
+	});
+	</script>
+</head>
+<body>
+
+<div id="accordion">
+	<h3>Section 1</h3>
+	<div>
+		<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
+	</div>
+	<h3>Section 2</h3>
+	<div>
+		<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
+	</div>
+	<h3>Section 3</h3>
+	<div>
+		<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
+		<ul>
+			<li>List item one</li>
+			<li>List item two</li>
+			<li>List item three</li>
+		</ul>
+	</div>
+	<h3>Section 4</h3>
+	<div>
+		<p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
+	</div>
+</div>
+
+<button id="toggle">Toggle icons</button>
+
+<div class="demo-description">
+<p>Customize the header icons with the <code>icons</code> option, which accepts classes for the header's default and active (open) state.  Use any class from the UI CSS framework, or create custom classes with background images.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/accordion/default.html b/apps/it/static/js/ui/demos/accordion/default.html
new file mode 100644
index 0000000..03b3ae4
--- /dev/null
+++ b/apps/it/static/js/ui/demos/accordion/default.html
@@ -0,0 +1,80 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Accordion - Default functionality</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.accordion.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$(function() {
+		$( "#accordion" ).accordion();
+	});
+	</script>
+</head>
+<body>
+
+<div id="accordion">
+	<h3>Section 1</h3>
+	<div>
+		<p>
+		Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
+		ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
+		amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
+		odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
+		</p>
+	</div>
+	<h3>Section 2</h3>
+	<div>
+		<p>
+		Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
+		purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
+		velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
+		suscipit faucibus urna.
+		</p>
+	</div>
+	<h3>Section 3</h3>
+	<div>
+		<p>
+		Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
+		Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
+		ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
+		lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
+		</p>
+		<ul>
+			<li>List item one</li>
+			<li>List item two</li>
+			<li>List item three</li>
+		</ul>
+	</div>
+	<h3>Section 4</h3>
+	<div>
+		<p>
+		Cras dictum. Pellentesque habitant morbi tristique senectus et netus
+		et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
+		faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
+		mauris vel est.
+		</p>
+		<p>
+		Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
+		Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
+		inceptos himenaeos.
+		</p>
+	</div>
+</div>
+
+<div class="demo-description">
+<p>
+Click headers to expand/collapse content that is broken into logical sections, much like tabs.
+Optionally, toggle sections open/closed on mouseover.
+</p>
+<p>
+The underlying HTML markup is a series of headers (H3 tags) and content divs so the content is
+usable without JavaScript.
+</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/accordion/fillspace.html b/apps/it/static/js/ui/demos/accordion/fillspace.html
new file mode 100644
index 0000000..90eacf1
--- /dev/null
+++ b/apps/it/static/js/ui/demos/accordion/fillspace.html
@@ -0,0 +1,72 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Accordion - Fill space</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mouse.js"></script>
+	<script src="../../ui/jquery.ui.resizable.js"></script>
+	<script src="../../ui/jquery.ui.accordion.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	#accordion-resizer {
+		padding: 10px;
+		width: 350px;
+		height: 220px;
+	}
+	</style>
+	<script>
+	$(function() {
+		$( "#accordion" ).accordion({
+			heightStyle: "fill"
+		});
+	});
+	$(function() {
+		$( "#accordion-resizer" ).resizable({
+			minHeight: 140,
+			minWidth: 200,
+			resize: function() {
+				$( "#accordion" ).accordion( "refresh" );
+			}
+		});
+	});
+	</script>
+</head>
+<body>
+
+<h3 class="docs">Resize the outer container:</h3>
+
+<div id="accordion-resizer" class="ui-widget-content">
+	<div id="accordion">
+		<h3>Section 1</h3>
+		<div>
+			<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
+		</div>
+		<h3>Section 2</h3>
+		<div>
+			<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
+		</div>
+		<h3>Section 3</h3>
+		<div>
+			<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
+			<ul>
+				<li>List item one</li>
+				<li>List item two</li>
+				<li>List item three</li>
+			</ul>
+		</div>
+		<h3>Section 4</h3>
+		<div>
+			<p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
+		</div>
+	</div>
+</div>
+
+<div class="demo-description">
+<p>Because the accordion is comprised of block-level elements, by default its width fills the available horizontal space. To fill the vertical space allocated by its container, set the <code>heightStyle</code> option to <code>"fill"</code>, and the script will automatically set the dimensions of the accordion to the height of its parent container.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/accordion/hoverintent.html b/apps/it/static/js/ui/demos/accordion/hoverintent.html
new file mode 100644
index 0000000..3d845c5
--- /dev/null
+++ b/apps/it/static/js/ui/demos/accordion/hoverintent.html
@@ -0,0 +1,148 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Accordion - Open on hoverintent</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.accordion.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$(function() {
+		$( "#accordion" ).accordion({
+			event: "click hoverintent"
+		});
+	});
+
+	/*
+	 * hoverIntent | Copyright 2011 Brian Cherne
+	 * http://cherne.net/brian/resources/jquery.hoverIntent.html
+	 * modified by the jQuery UI team
+	 */
+	$.event.special.hoverintent = {
+		setup: function() {
+			$( this ).bind( "mouseover", jQuery.event.special.hoverintent.handler );
+		},
+		teardown: function() {
+			$( this ).unbind( "mouseover", jQuery.event.special.hoverintent.handler );
+		},
+		handler: function( event ) {
+			var currentX, currentY, timeout,
+				args = arguments,
+				target = $( event.target ),
+				previousX = event.pageX,
+				previousY = event.pageY;
+
+			function track( event ) {
+				currentX = event.pageX;
+				currentY = event.pageY;
+			};
+
+			function clear() {
+				target
+					.unbind( "mousemove", track )
+					.unbind( "mouseout", clear );
+				clearTimeout( timeout );
+			}
+
+			function handler() {
+				var prop,
+					orig = event;
+
+				if ( ( Math.abs( previousX - currentX ) +
+						Math.abs( previousY - currentY ) ) < 7 ) {
+					clear();
+
+					event = $.Event( "hoverintent" );
+					for ( prop in orig ) {
+						if ( !( prop in event ) ) {
+							event[ prop ] = orig[ prop ];
+						}
+					}
+					// Prevent accessing the original event since the new event
+					// is fired asynchronously and the old event is no longer
+					// usable (#6028)
+					delete event.originalEvent;
+
+					target.trigger( event );
+				} else {
+					previousX = currentX;
+					previousY = currentY;
+					timeout = setTimeout( handler, 100 );
+				}
+			}
+
+			timeout = setTimeout( handler, 100 );
+			target.bind({
+				mousemove: track,
+				mouseout: clear
+			});
+		}
+	};
+	</script>
+</head>
+<body>
+
+<div id="accordion">
+	<h3>Section 1</h3>
+	<div>
+		<p>
+		Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
+		ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
+		amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
+		odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
+		</p>
+	</div>
+	<h3>Section 2</h3>
+	<div>
+		<p>
+		Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
+		purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
+		velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
+		suscipit faucibus urna.
+		</p>
+	</div>
+	<h3>Section 3</h3>
+	<div>
+		<p>
+		Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
+		Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
+		ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
+		lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
+		</p>
+		<ul>
+			<li>List item one</li>
+			<li>List item two</li>
+			<li>List item three</li>
+		</ul>
+	</div>
+	<h3>Section 4</h3>
+	<div>
+		<p>
+		Cras dictum. Pellentesque habitant morbi tristique senectus et netus
+		et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
+		faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
+		mauris vel est.
+		</p>
+		<p>
+		Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
+		Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
+		inceptos himenaeos.
+		</p>
+	</div>
+</div>
+
+<div class="demo-description">
+<p>
+Click headers to expand/collapse content that is broken into logical sections, much like tabs.
+Optionally, toggle sections open/closed on mouseover.
+</p>
+<p>
+The underlying HTML markup is a series of headers (H3 tags) and content divs so the content is
+usable without JavaScript.
+</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/accordion/index.html b/apps/it/static/js/ui/demos/accordion/index.html
new file mode 100644
index 0000000..92bd33d
--- /dev/null
+++ b/apps/it/static/js/ui/demos/accordion/index.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Accordion Demos</title>
+</head>
+<body>
+
+<ul>
+	<li><a href="default.html">Default functionality</a></li>
+	<li><a href="fillspace.html">Fill space</a></li>
+	<li><a href="no-auto-height.html">No auto height</a></li>
+	<li><a href="collapsible.html">Collapse content</a></li>
+	<li><a href="hoverintent.html">Open on hoverintent</a></li>
+	<li><a href="custom-icons.html">Customize icons</a></li>
+	<li><a href="sortable.html">Sortable</a></li>
+</ul>
+
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/accordion/no-auto-height.html b/apps/it/static/js/ui/demos/accordion/no-auto-height.html
new file mode 100644
index 0000000..ddefaaa
--- /dev/null
+++ b/apps/it/static/js/ui/demos/accordion/no-auto-height.html
@@ -0,0 +1,50 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Accordion - No auto height</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.accordion.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$(function() {
+		$( "#accordion" ).accordion({
+			heightStyle: "content"
+		});
+	});
+	</script>
+</head>
+<body>
+
+<div id="accordion">
+	<h3>Section 1</h3>
+	<div>
+		<p>Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
+	</div>
+	<h3>Section 2</h3>
+	<div>
+		<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
+	</div>
+	<h3>Section 3</h3>
+	<div>
+		<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
+		<ul>
+			<li>List item</li>
+			<li>List item</li>
+			<li>List item</li>
+			<li>List item</li>
+			<li>List item</li>
+			<li>List item</li>
+			<li>List item</li>
+		</ul>
+	</div>
+</div>
+
+<div class="demo-description">
+<p>Setting <code>heightStyle: "content"</code> allows the accordion panels to keep their native height.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/accordion/sortable.html b/apps/it/static/js/ui/demos/accordion/sortable.html
new file mode 100644
index 0000000..a644f9f
--- /dev/null
+++ b/apps/it/static/js/ui/demos/accordion/sortable.html
@@ -0,0 +1,74 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Accordion - Sortable</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mouse.js"></script>
+	<script src="../../ui/jquery.ui.sortable.js"></script>
+	<script src="../../ui/jquery.ui.accordion.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	/* IE has layout issues when sorting (see #5413) */
+	.group { zoom: 1 }
+	</style>
+	<script>
+	$(function() {
+		$( "#accordion" )
+			.accordion({
+				header: "> div > h3"
+			})
+			.sortable({
+				axis: "y",
+				handle: "h3",
+				stop: function( event, ui ) {
+					// IE doesn't register the blur when sorting
+					// so trigger focusout handlers to remove .ui-state-focus
+					ui.item.children( "h3" ).triggerHandler( "focusout" );
+				}
+			});
+	});
+	</script>
+</head>
+<body>
+
+<div id="accordion">
+	<div class="group">
+		<h3>Section 1</h3>
+		<div>
+			<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
+		</div>
+	</div>
+	<div class="group">
+		<h3>Section 2</h3>
+		<div>
+			<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
+		</div>
+	</div>
+	<div class="group">
+		<h3>Section 3</h3>
+		<div>
+			<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
+			<ul>
+				<li>List item one</li>
+				<li>List item two</li>
+				<li>List item three</li>
+			</ul>
+		</div>
+	</div>
+	<div class="group">
+		<h3>Section 4</h3>
+		<div>
+			<p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
+		</div>
+	</div>
+</div>
+
+<div class="demo-description">
+<p>Drag the header to re-order panels.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/addClass/default.html b/apps/it/static/js/ui/demos/addClass/default.html
new file mode 100644
index 0000000..97eb2ff
--- /dev/null
+++ b/apps/it/static/js/ui/demos/addClass/default.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Effects - addClass demo</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.effect.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+		.toggler { width: 500px; height: 200px; position: relative; }
+		#button { padding: .5em 1em; text-decoration: none; }
+		#effect { width: 240px;  padding: 1em;  font-size: 1.2em; border: 1px solid #000; background: #eee; color: #333; }
+		.newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; }
+	</style>
+	<script>
+	$(function() {
+		$( "#button" ).click(function() {
+			$( "#effect" ).addClass( "newClass", 1000, callback );
+			return false;
+		});
+
+		function callback() {
+			setTimeout(function() {
+				$( "#effect" ).removeClass( "newClass" );
+			}, 1500 );
+		}
+	});
+	</script>
+</head>
+<body>
+
+<div class="toggler">
+	<div id="effect" class="ui-corner-all">
+			Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede.
+	</div>
+</div>
+
+<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>
+
+<div class="demo-description">
+<p>This demo adds a class which animates: text-indent, letter-spacing, width, height, padding, margin, and font-size.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/addClass/index.html b/apps/it/static/js/ui/demos/addClass/index.html
new file mode 100644
index 0000000..3620fd7
--- /dev/null
+++ b/apps/it/static/js/ui/demos/addClass/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Effects Demos</title>
+</head>
+<body>
+
+<ul>
+	<li><a href="default.html">Default functionality</a></li>
+</ul>
+
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/animate/default.html b/apps/it/static/js/ui/demos/animate/default.html
new file mode 100644
index 0000000..ca05a08
--- /dev/null
+++ b/apps/it/static/js/ui/demos/animate/default.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Effects - Animate demo</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.effect.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+		.toggler { width: 500px; height: 200px; position: relative; }
+		#button { padding: .5em 1em; text-decoration: none; }
+		#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; background: #fff; }
+		#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
+	</style>
+	<script>
+	$(function() {
+		var state = true;
+		$( "#button" ).click(function() {
+			if ( state ) {
+				$( "#effect" ).animate({
+					backgroundColor: "#aa0000",
+					color: "#fff",
+					width: 500
+				}, 1000 );
+			} else {
+				$( "#effect" ).animate({
+					backgroundColor: "#fff",
+					color: "#000",
+					width: 240
+				}, 1000 );
+			}
+			state = !state;
+		});
+	});
+	</script>
+</head>
+<body>
+
+<div class="toggler">
+	<div id="effect" class="ui-widget-content ui-corner-all">
+		<h3 class="ui-widget-header ui-corner-all">Animate</h3>
+		<p>
+			Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
+		</p>
+	</div>
+</div>
+
+<a href="#" id="button" class="ui-state-default ui-corner-all">Toggle Effect</a>
+
+<div class="demo-description">
+<p>Click the button above to preview the effect.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/animate/index.html b/apps/it/static/js/ui/demos/animate/index.html
new file mode 100644
index 0000000..3620fd7
--- /dev/null
+++ b/apps/it/static/js/ui/demos/animate/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Effects Demos</title>
+</head>
+<body>
+
+<ul>
+	<li><a href="default.html">Default functionality</a></li>
+</ul>
+
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/autocomplete/categories.html b/apps/it/static/js/ui/demos/autocomplete/categories.html
new file mode 100644
index 0000000..6601ebc
--- /dev/null
+++ b/apps/it/static/js/ui/demos/autocomplete/categories.html
@@ -0,0 +1,67 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Autocomplete - Categories</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.position.js"></script>
+	<script src="../../ui/jquery.ui.menu.js"></script>
+	<script src="../../ui/jquery.ui.autocomplete.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	.ui-autocomplete-category {
+		font-weight: bold;
+		padding: .2em .4em;
+		margin: .8em 0 .2em;
+		line-height: 1.5;
+	}
+	</style>
+	<script>
+	$.widget( "custom.catcomplete", $.ui.autocomplete, {
+		_renderMenu: function( ul, items ) {
+			var that = this,
+				currentCategory = "";
+			$.each( items, function( index, item ) {
+				if ( item.category != currentCategory ) {
+					ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
+					currentCategory = item.category;
+				}
+				that._renderItemData( ul, item );
+			});
+		}
+	});
+	</script>
+	<script>
+	$(function() {
+		var data = [
+			{ label: "anders", category: "" },
+			{ label: "andreas", category: "" },
+			{ label: "antal", category: "" },
+			{ label: "annhhx10", category: "Products" },
+			{ label: "annk K12", category: "Products" },
+			{ label: "annttop C13", category: "Products" },
+			{ label: "anders andersson", category: "People" },
+			{ label: "andreas andersson", category: "People" },
+			{ label: "andreas johnson", category: "People" }
+		];
+
+		$( "#search" ).catcomplete({
+			delay: 0,
+			source: data
+		});
+	});
+	</script>
+</head>
+<body>
+
+<label for="search">Search: </label>
+<input id="search">
+
+<div class="demo-description">
+<p>A categorized search result. Try typing "a" or "n".</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/autocomplete/combobox.html b/apps/it/static/js/ui/demos/autocomplete/combobox.html
new file mode 100644
index 0000000..f4d3e3f
--- /dev/null
+++ b/apps/it/static/js/ui/demos/autocomplete/combobox.html
@@ -0,0 +1,213 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Autocomplete - Combobox</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.button.js"></script>
+	<script src="../../ui/jquery.ui.position.js"></script>
+	<script src="../../ui/jquery.ui.menu.js"></script>
+	<script src="../../ui/jquery.ui.autocomplete.js"></script>
+	<script src="../../ui/jquery.ui.tooltip.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	.custom-combobox {
+		position: relative;
+		display: inline-block;
+	}
+	.custom-combobox-toggle {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		margin-left: -1px;
+		padding: 0;
+		/* support: IE7 */
+		*height: 1.7em;
+		*top: 0.1em;
+	}
+	.custom-combobox-input {
+		margin: 0;
+		padding: 0.3em;
+	}
+	</style>
+	<script>
+	(function( $ ) {
+		$.widget( "custom.combobox", {
+			_create: function() {
+				this.wrapper = $( "<span>" )
+					.addClass( "custom-combobox" )
+					.insertAfter( this.element );
+
+				this.element.hide();
+				this._createAutocomplete();
+				this._createShowAllButton();
+			},
+
+			_createAutocomplete: function() {
+				var selected = this.element.children( ":selected" ),
+					value = selected.val() ? selected.text() : "";
+
+				this.input = $( "<input>" )
+					.appendTo( this.wrapper )
+					.val( value )
+					.attr( "title", "" )
+					.addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" )
+					.autocomplete({
+						delay: 0,
+						minLength: 0,
+						source: $.proxy( this, "_source" )
+					})
+					.tooltip({
+						tooltipClass: "ui-state-highlight"
+					});
+
+				this._on( this.input, {
+					autocompleteselect: function( event, ui ) {
+						ui.item.option.selected = true;
+						this._trigger( "select", event, {
+							item: ui.item.option
+						});
+					},
+
+					autocompletechange: "_removeIfInvalid"
+				});
+			},
+
+			_createShowAllButton: function() {
+				var input = this.input,
+					wasOpen = false;
+
+				$( "<a>" )
+					.attr( "tabIndex", -1 )
+					.attr( "title", "Show All Items" )
+					.tooltip()
+					.appendTo( this.wrapper )
+					.button({
+						icons: {
+							primary: "ui-icon-triangle-1-s"
+						},
+						text: false
+					})
+					.removeClass( "ui-corner-all" )
+					.addClass( "custom-combobox-toggle ui-corner-right" )
+					.mousedown(function() {
+						wasOpen = input.autocomplete( "widget" ).is( ":visible" );
+					})
+					.click(function() {
+						input.focus();
+
+						// Close if already visible
+						if ( wasOpen ) {
+							return;
+						}
+
+						// Pass empty string as value to search for, displaying all results
+						input.autocomplete( "search", "" );
+					});
+			},
+
+			_source: function( request, response ) {
+				var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
+				response( this.element.children( "option" ).map(function() {
+					var text = $( this ).text();
+					if ( this.value && ( !request.term || matcher.test(text) ) )
+						return {
+							label: text,
+							value: text,
+							option: this
+						};
+				}) );
+			},
+
+			_removeIfInvalid: function( event, ui ) {
+
+				// Selected an item, nothing to do
+				if ( ui.item ) {
+					return;
+				}
+
+				// Search for a match (case-insensitive)
+				var value = this.input.val(),
+					valueLowerCase = value.toLowerCase(),
+					valid = false;
+				this.element.children( "option" ).each(function() {
+					if ( $( this ).text().toLowerCase() === valueLowerCase ) {
+						this.selected = valid = true;
+						return false;
+					}
+				});
+
+				// Found a match, nothing to do
+				if ( valid ) {
+					return;
+				}
+
+				// Remove invalid value
+				this.input
+					.val( "" )
+					.attr( "title", value + " didn't match any item" )
+					.tooltip( "open" );
+				this.element.val( "" );
+				this._delay(function() {
+					this.input.tooltip( "close" ).attr( "title", "" );
+				}, 2500 );
+				this.input.data( "ui-autocomplete" ).term = "";
+			},
+
+			_destroy: function() {
+				this.wrapper.remove();
+				this.element.show();
+			}
+		});
+	})( jQuery );
+
+	$(function() {
+		$( "#combobox" ).combobox();
+		$( "#toggle" ).click(function() {
+			$( "#combobox" ).toggle();
+		});
+	});
+	</script>
+</head>
+<body>
+
+<div class="ui-widget">
+	<label>Your preferred programming language: </label>
+	<select id="combobox">
+		<option value="">Select one...</option>
+		<option value="ActionScript">ActionScript</option>
+		<option value="AppleScript">AppleScript</option>
+		<option value="Asp">Asp</option>
+		<option value="BASIC">BASIC</option>
+		<option value="C">C</option>
+		<option value="C++">C++</option>
+		<option value="Clojure">Clojure</option>
+		<option value="COBOL">COBOL</option>
+		<option value="ColdFusion">ColdFusion</option>
+		<option value="Erlang">Erlang</option>
+		<option value="Fortran">Fortran</option>
+		<option value="Groovy">Groovy</option>
+		<option value="Haskell">Haskell</option>
+		<option value="Java">Java</option>
+		<option value="JavaScript">JavaScript</option>
+		<option value="Lisp">Lisp</option>
+		<option value="Perl">Perl</option>
+		<option value="PHP">PHP</option>
+		<option value="Python">Python</option>
+		<option value="Ruby">Ruby</option>
+		<option value="Scala">Scala</option>
+		<option value="Scheme">Scheme</option>
+	</select>
+</div>
+<button id="toggle">Show underlying select</button>
+
+<div class="demo-description">
+<p>A custom widget built by composition of Autocomplete and Button. You can either type something into the field to get filtered suggestions based on your input, or use the button to get the full list of selections.</p>
+<p>The input is read from an existing select-element for progressive enhancement, passed to Autocomplete with a customized source-option.</p>
+<p>This is not a supported or even complete widget. Its purely for demoing what autocomplete can do with a bit of customization. <a href="http://www.learningjquery.com/2010/06/a-jquery-ui-combobox-under-the-hood">For a detailed explanation of how the widget works, check out this Learning jQuery article.</a></p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/autocomplete/custom-data.html b/apps/it/static/js/ui/demos/autocomplete/custom-data.html
new file mode 100644
index 0000000..d1c98ef
--- /dev/null
+++ b/apps/it/static/js/ui/demos/autocomplete/custom-data.html
@@ -0,0 +1,90 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Autocomplete - Custom data and display</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.position.js"></script>
+	<script src="../../ui/jquery.ui.menu.js"></script>
+	<script src="../../ui/jquery.ui.autocomplete.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	#project-label {
+		display: block;
+		font-weight: bold;
+		margin-bottom: 1em;
+	}
+	#project-icon {
+		float: left;
+		height: 32px;
+		width: 32px;
+	}
+	#project-description {
+		margin: 0;
+		padding: 0;
+	}
+	</style>
+	<script>
+	$(function() {
+		var projects = [
+			{
+				value: "jquery",
+				label: "jQuery",
+				desc: "the write less, do more, JavaScript library",
+				icon: "jquery_32x32.png"
+			},
+			{
+				value: "jquery-ui",
+				label: "jQuery UI",
+				desc: "the official user interface library for jQuery",
+				icon: "jqueryui_32x32.png"
+			},
+			{
+				value: "sizzlejs",
+				label: "Sizzle JS",
+				desc: "a pure-JavaScript CSS selector engine",
+				icon: "sizzlejs_32x32.png"
+			}
+		];
+
+		$( "#project" ).autocomplete({
+			minLength: 0,
+			source: projects,
+			focus: function( event, ui ) {
+				$( "#project" ).val( ui.item.label );
+				return false;
+			},
+			select: function( event, ui ) {
+				$( "#project" ).val( ui.item.label );
+				$( "#project-id" ).val( ui.item.value );
+				$( "#project-description" ).html( ui.item.desc );
+				$( "#project-icon" ).attr( "src", "images/" + ui.item.icon );
+
+				return false;
+			}
+		})
+		.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
+			return $( "<li>" )
+				.append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
+				.appendTo( ul );
+		};
+	});
+	</script>
+</head>
+<body>
+
+<div id="project-label">Select a project (type "j" for a start):</div>
+<img id="project-icon" src="images/transparent_1x1.png" class="ui-state-default" alt="">
+<input id="project">
+<input type="hidden" id="project-id">
+<p id="project-description"></p>
+
+<div class="demo-description">
+<p>You can use your own custom data formats and displays by simply overriding the default focus and select actions.</p>
+<p>Try typing "j" to get a list of projects or just press the down arrow.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/autocomplete/default.html b/apps/it/static/js/ui/demos/autocomplete/default.html
new file mode 100644
index 0000000..2a925dd
--- /dev/null
+++ b/apps/it/static/js/ui/demos/autocomplete/default.html
@@ -0,0 +1,58 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Autocomplete - Default functionality</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.position.js"></script>
+	<script src="../../ui/jquery.ui.menu.js"></script>
+	<script src="../../ui/jquery.ui.autocomplete.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$(function() {
+		var availableTags = [
+			"ActionScript",
+			"AppleScript",
+			"Asp",
+			"BASIC",
+			"C",
+			"C++",
+			"Clojure",
+			"COBOL",
+			"ColdFusion",
+			"Erlang",
+			"Fortran",
+			"Groovy",
+			"Haskell",
+			"Java",
+			"JavaScript",
+			"Lisp",
+			"Perl",
+			"PHP",
+			"Python",
+			"Ruby",
+			"Scala",
+			"Scheme"
+		];
+		$( "#tags" ).autocomplete({
+			source: availableTags
+		});
+	});
+	</script>
+</head>
+<body>
+
+<div class="ui-widget">
+	<label for="tags">Tags: </label>
+	<input id="tags">
+</div>
+
+<div class="demo-description">
+<p>The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are tags for programming languages, give "ja" (for Java or JavaScript) a try.</p>
+<p>The datasource is a simple JavaScript array, provided to the widget using the source-option.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/autocomplete/folding.html b/apps/it/static/js/ui/demos/autocomplete/folding.html
new file mode 100644
index 0000000..d49abad
--- /dev/null
+++ b/apps/it/static/js/ui/demos/autocomplete/folding.html
@@ -0,0 +1,56 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Autocomplete - Accent folding</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.position.js"></script>
+	<script src="../../ui/jquery.ui.menu.js"></script>
+	<script src="../../ui/jquery.ui.autocomplete.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$(function() {
+		var names = [ "Jörn Zaefferer", "Scott González", "John Resig" ];
+
+		var accentMap = {
+			"á": "a",
+			"ö": "o"
+		};
+		var normalize = function( term ) {
+			var ret = "";
+			for ( var i = 0; i < term.length; i++ ) {
+				ret += accentMap[ term.charAt(i) ] || term.charAt(i);
+			}
+			return ret;
+		};
+
+		$( "#developer" ).autocomplete({
+			source: function( request, response ) {
+				var matcher = new RegExp( $.ui.autocomplete.escapeRegex( request.term ), "i" );
+				response( $.grep( names, function( value ) {
+					value = value.label || value.value || value;
+					return matcher.test( value ) || matcher.test( normalize( value ) );
+				}) );
+			}
+		});
+	});
+	</script>
+</head>
+<body>
+
+<div class="ui-widget">
+	<form>
+	<label for="developer">Developer: </label>
+	<input id="developer">
+	</form>
+</div>
+
+<div class="demo-description">
+<p>The autocomplete field uses a custom source option which will match results that have accented characters even when the text field doesn't contain accented characters. However if the you type in accented characters in the text field it is smart enough not to show results that aren't accented.</p>
+<p>Try typing "Jo" to see "John" and "Jörn", then type "Jö" to see only "Jörn".</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/autocomplete/images/jquery_32x32.png b/apps/it/static/js/ui/demos/autocomplete/images/jquery_32x32.png
new file mode 100644
index 0000000..9312f02
--- /dev/null
+++ b/apps/it/static/js/ui/demos/autocomplete/images/jquery_32x32.png
diff --git a/apps/it/static/js/ui/demos/autocomplete/images/jqueryui_32x32.png b/apps/it/static/js/ui/demos/autocomplete/images/jqueryui_32x32.png
new file mode 100644
index 0000000..e003d16
--- /dev/null
+++ b/apps/it/static/js/ui/demos/autocomplete/images/jqueryui_32x32.png
diff --git a/apps/it/static/js/ui/demos/autocomplete/images/sizzlejs_32x32.png b/apps/it/static/js/ui/demos/autocomplete/images/sizzlejs_32x32.png
new file mode 100644
index 0000000..4ce0704
--- /dev/null
+++ b/apps/it/static/js/ui/demos/autocomplete/images/sizzlejs_32x32.png
diff --git a/apps/it/static/js/ui/demos/autocomplete/images/transparent_1x1.png b/apps/it/static/js/ui/demos/autocomplete/images/transparent_1x1.png
new file mode 100644
index 0000000..c2da5b8
--- /dev/null
+++ b/apps/it/static/js/ui/demos/autocomplete/images/transparent_1x1.png
diff --git a/apps/it/static/js/ui/demos/autocomplete/images/ui-anim_basic_16x16.gif b/apps/it/static/js/ui/demos/autocomplete/images/ui-anim_basic_16x16.gif
new file mode 100644
index 0000000..084ecb8
--- /dev/null
+++ b/apps/it/static/js/ui/demos/autocomplete/images/ui-anim_basic_16x16.gif
diff --git a/apps/it/static/js/ui/demos/autocomplete/index.html b/apps/it/static/js/ui/demos/autocomplete/index.html
new file mode 100644
index 0000000..faa18d4
--- /dev/null
+++ b/apps/it/static/js/ui/demos/autocomplete/index.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Autocomplete Demos</title>
+</head>
+<body>
+
+<ul>
+	<li><a href="default.html">Default functionality</a></li>
+	<li><a href="remote.html">Remote datasource</a></li>
+	<li><a href="remote-with-cache.html">Remote with caching</a></li>
+	<li><a href="remote-jsonp.html">Remote JSONP datasource</a></li>
+	<li><a href="maxheight.html">Scrollable results</a></li>
+	<li><a href="combobox.html">Combobox</a></li>
+	<li><a href="custom-data.html">Custom data and display</a></li>
+	<li><a href="xml.html">XML data parsed once</a></li>
+	<li><a href="categories.html">Categories</a></li>
+	<li><a href="folding.html">Accent folding</a></li>
+	<li><a href="multiple.html">Multiple values</a></li>
+	<li><a href="multiple-remote.html">Multiple, remote</a></li>
+</ul>
+
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/autocomplete/london.xml b/apps/it/static/js/ui/demos/autocomplete/london.xml
new file mode 100644
index 0000000..2628549
--- /dev/null
+++ b/apps/it/static/js/ui/demos/autocomplete/london.xml
@@ -0,0 +1,114 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<geonames style="MEDIUM">
+<totalResultsCount>6987</totalResultsCount>
+<geoname>
+<name>London</name>
+<lat>51.5084152563931</lat>
+<lng>-0.125532746315002</lng>
+<geonameId>2643743</geonameId>
+<countryCode>GB</countryCode>
+<countryName>United Kingdom</countryName>
+
+<fcl>P</fcl>
+<fcode>PPLC</fcode>
+</geoname>
+<geoname>
+<name>London</name>
+<lat>42.983389283</lat>
+<lng>-81.233042387</lng>
+<geonameId>6058560</geonameId>
+<countryCode>CA</countryCode>
+<countryName>Canada</countryName>
+
+<fcl>P</fcl>
+<fcode>PPL</fcode>
+</geoname>
+<geoname>
+<name>East London</name>
+<lat>-33.0152850934643</lat>
+<lng>27.9116249084473</lng>
+<geonameId>1006984</geonameId>
+<countryCode>ZA</countryCode>
+<countryName>South Africa</countryName>
+
+<fcl>P</fcl>
+<fcode>PPL</fcode>
+</geoname>
+<geoname>
+<name>City</name>
+<lat>51.5133363996235</lat>
+<lng>-0.0890064239501953</lng>
+<geonameId>2643744</geonameId>
+<countryCode>GB</countryCode>
+<countryName>United Kingdom</countryName>
+
+<fcl>A</fcl>
+<fcode>ADM2</fcode>
+</geoname>
+<geoname>
+<name>London</name>
+<lat>37.1289771</lat>
+<lng>-84.0832646</lng>
+<geonameId>4298960</geonameId>
+<countryCode>US</countryCode>
+<countryName>United States</countryName>
+
+<fcl>P</fcl>
+<fcode>PPL</fcode>
+</geoname>
+<geoname>
+<name>The Tower of London</name>
+<lat>51.5082349601834</lat>
+<lng>-0.0763034820556641</lng>
+<geonameId>6286786</geonameId>
+<countryCode>GB</countryCode>
+<countryName>United Kingdom</countryName>
+
+<fcl>S</fcl>
+<fcode>CSTL</fcode>
+</geoname>
+<geoname>
+<name>London Reefs</name>
+<lat>8.85</lat>
+<lng>112.5333333</lng>
+<geonameId>1879967</geonameId>
+<countryCode>  </countryCode>
+<countryName>  </countryName>
+
+<fcl>U</fcl>
+<fcode>RFSU</fcode>
+</geoname>
+<geoname>
+<name>Greater London</name>
+<lat>51.5</lat>
+<lng>-0.1666667</lng>
+<geonameId>2648110</geonameId>
+<countryCode>GB</countryCode>
+<countryName>United Kingdom</countryName>
+
+<fcl>A</fcl>
+<fcode>ADM2</fcode>
+</geoname>
+<geoname>
+<name>London</name>
+<lat>46.1666667</lat>
+<lng>6.0166667</lng>
+<geonameId>2661811</geonameId>
+<countryCode>CH</countryCode>
+<countryName>Switzerland</countryName>
+
+<fcl>H</fcl>
+<fcode>STM</fcode>
+</geoname>
+<geoname>
+<name>London Borough of Islington</name>
+<lat>51.5333333</lat>
+<lng>-0.1333333</lng>
+<geonameId>3333156</geonameId>
+<countryCode>GB</countryCode>
+<countryName>United Kingdom</countryName>
+
+<fcl>A</fcl>
+<fcode>ADM2</fcode>
+</geoname>
+</geonames>
diff --git a/apps/it/static/js/ui/demos/autocomplete/maxheight.html b/apps/it/static/js/ui/demos/autocomplete/maxheight.html
new file mode 100644
index 0000000..570bc7e
--- /dev/null
+++ b/apps/it/static/js/ui/demos/autocomplete/maxheight.html
@@ -0,0 +1,71 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Autocomplete - Scrollable results</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.position.js"></script>
+	<script src="../../ui/jquery.ui.menu.js"></script>
+	<script src="../../ui/jquery.ui.autocomplete.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	.ui-autocomplete {
+		max-height: 100px;
+		overflow-y: auto;
+		/* prevent horizontal scrollbar */
+		overflow-x: hidden;
+	}
+	/* IE 6 doesn't support max-height
+	 * we use height instead, but this forces the menu to always be this tall
+	 */
+	* html .ui-autocomplete {
+		height: 100px;
+	}
+	</style>
+	<script>
+	$(function() {
+		var availableTags = [
+			"ActionScript",
+			"AppleScript",
+			"Asp",
+			"BASIC",
+			"C",
+			"C++",
+			"Clojure",
+			"COBOL",
+			"ColdFusion",
+			"Erlang",
+			"Fortran",
+			"Groovy",
+			"Haskell",
+			"Java",
+			"JavaScript",
+			"Lisp",
+			"Perl",
+			"PHP",
+			"Python",
+			"Ruby",
+			"Scala",
+			"Scheme"
+		];
+		$( "#tags" ).autocomplete({
+			source: availableTags
+		});
+	});
+	</script>
+</head>
+<body>
+
+<div class="ui-widget">
+	<label for="tags">Tags: </label>
+	<input id="tags">
+</div>
+
+<div class="demo-description">
+<p>When displaying a long list of options, you can simply set the max-height for the autocomplete menu to prevent the menu from growing too large. Try typing "a" or "s" above to get a long list of results that you can scroll through.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/autocomplete/multiple-remote.html b/apps/it/static/js/ui/demos/autocomplete/multiple-remote.html
new file mode 100644
index 0000000..4c798d0
--- /dev/null
+++ b/apps/it/static/js/ui/demos/autocomplete/multiple-remote.html
@@ -0,0 +1,80 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Autocomplete - Multiple, remote</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.position.js"></script>
+	<script src="../../ui/jquery.ui.menu.js"></script>
+	<script src="../../ui/jquery.ui.autocomplete.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	.ui-autocomplete-loading {
+		background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat;
+	}
+	</style>
+	<script>
+	$(function() {
+		function split( val ) {
+			return val.split( /,\s*/ );
+		}
+		function extractLast( term ) {
+			return split( term ).pop();
+		}
+
+		$( "#birds" )
+			// don't navigate away from the field on tab when selecting an item
+			.bind( "keydown", function( event ) {
+				if ( event.keyCode === $.ui.keyCode.TAB &&
+						$( this ).data( "ui-autocomplete" ).menu.active ) {
+					event.preventDefault();
+				}
+			})
+			.autocomplete({
+				source: function( request, response ) {
+					$.getJSON( "search.php", {
+						term: extractLast( request.term )
+					}, response );
+				},
+				search: function() {
+					// custom minLength
+					var term = extractLast( this.value );
+					if ( term.length < 2 ) {
+						return false;
+					}
+				},
+				focus: function() {
+					// prevent value inserted on focus
+					return false;
+				},
+				select: function( event, ui ) {
+					var terms = split( this.value );
+					// remove the current input
+					terms.pop();
+					// add the selected item
+					terms.push( ui.item.value );
+					// add placeholder to get the comma-and-space at the end
+					terms.push( "" );
+					this.value = terms.join( ", " );
+					return false;
+				}
+			});
+	});
+	</script>
+</head>
+<body>
+
+<div class="ui-widget">
+	<label for="birds">Birds: </label>
+	<input id="birds" size="50">
+</div>
+
+<div class="demo-description">
+<p>Usage: Enter at least two characters to get bird name suggestions. Select a value to continue adding more names.</p>
+<p>This is an example showing how to use the source-option along with some events to enable autocompleting multiple values into a single field.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/autocomplete/multiple.html b/apps/it/static/js/ui/demos/autocomplete/multiple.html
new file mode 100644
index 0000000..104e321
--- /dev/null
+++ b/apps/it/static/js/ui/demos/autocomplete/multiple.html
@@ -0,0 +1,93 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Autocomplete - Multiple values</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.position.js"></script>
+	<script src="../../ui/jquery.ui.menu.js"></script>
+	<script src="../../ui/jquery.ui.autocomplete.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$(function() {
+		var availableTags = [
+			"ActionScript",
+			"AppleScript",
+			"Asp",
+			"BASIC",
+			"C",
+			"C++",
+			"Clojure",
+			"COBOL",
+			"ColdFusion",
+			"Erlang",
+			"Fortran",
+			"Groovy",
+			"Haskell",
+			"Java",
+			"JavaScript",
+			"Lisp",
+			"Perl",
+			"PHP",
+			"Python",
+			"Ruby",
+			"Scala",
+			"Scheme"
+		];
+		function split( val ) {
+			return val.split( /,\s*/ );
+		}
+		function extractLast( term ) {
+			return split( term ).pop();
+		}
+
+		$( "#tags" )
+			// don't navigate away from the field on tab when selecting an item
+			.bind( "keydown", function( event ) {
+				if ( event.keyCode === $.ui.keyCode.TAB &&
+						$( this ).data( "ui-autocomplete" ).menu.active ) {
+					event.preventDefault();
+				}
+			})
+			.autocomplete({
+				minLength: 0,
+				source: function( request, response ) {
+					// delegate back to autocomplete, but extract the last term
+					response( $.ui.autocomplete.filter(
+						availableTags, extractLast( request.term ) ) );
+				},
+				focus: function() {
+					// prevent value inserted on focus
+					return false;
+				},
+				select: function( event, ui ) {
+					var terms = split( this.value );
+					// remove the current input
+					terms.pop();
+					// add the selected item
+					terms.push( ui.item.value );
+					// add placeholder to get the comma-and-space at the end
+					terms.push( "" );
+					this.value = terms.join( ", " );
+					return false;
+				}
+			});
+	});
+	</script>
+</head>
+<body>
+
+<div class="ui-widget">
+	<label for="tags">Tag programming languages: </label>
+	<input id="tags" size="50">
+</div>
+
+<div class="demo-description">
+<p>Usage: Type something, eg. "j" to see suggestions for tagging with programming languages. Select a value, then continue typing to add more.</p>
+<p>This is an example showing how to use the source-option along with some events to enable autocompleting multiple values into a single field.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/autocomplete/remote-jsonp.html b/apps/it/static/js/ui/demos/autocomplete/remote-jsonp.html
new file mode 100644
index 0000000..a2b4cc4
--- /dev/null
+++ b/apps/it/static/js/ui/demos/autocomplete/remote-jsonp.html
@@ -0,0 +1,82 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Autocomplete - Remote JSONP datasource</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.position.js"></script>
+	<script src="../../ui/jquery.ui.menu.js"></script>
+	<script src="../../ui/jquery.ui.autocomplete.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	.ui-autocomplete-loading {
+		background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat;
+	}
+	#city { width: 25em; }
+	</style>
+	<script>
+	$(function() {
+		function log( message ) {
+			$( "<div>" ).text( message ).prependTo( "#log" );
+			$( "#log" ).scrollTop( 0 );
+		}
+
+		$( "#city" ).autocomplete({
+			source: function( request, response ) {
+				$.ajax({
+					url: "http://ws.geonames.org/searchJSON",
+					dataType: "jsonp",
+					data: {
+						featureClass: "P",
+						style: "full",
+						maxRows: 12,
+						name_startsWith: request.term
+					},
+					success: function( data ) {
+						response( $.map( data.geonames, function( item ) {
+							return {
+								label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
+								value: item.name
+							}
+						}));
+					}
+				});
+			},
+			minLength: 2,
+			select: function( event, ui ) {
+				log( ui.item ?
+					"Selected: " + ui.item.label :
+					"Nothing selected, input was " + this.value);
+			},
+			open: function() {
+				$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
+			},
+			close: function() {
+				$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
+			}
+		});
+	});
+	</script>
+</head>
+<body>
+
+<div class="ui-widget">
+	<label for="city">Your city: </label>
+	<input id="city">
+	Powered by <a href="http://geonames.org">geonames.org</a>
+</div>
+
+<div class="ui-widget" style="margin-top:2em; font-family:Arial">
+	Result:
+	<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
+</div>
+
+<div class="demo-description">
+<p>The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are cities, displayed when at least two characters are entered into the field.</p>
+<p>In this case, the datasource is the <a href="http://geonames.org">geonames.org webservice</a>. While only the city name itself ends up in the input after selecting an element, more info is displayed in the suggestions to help find the right entry. That data is also available in callbacks, as illustrated by the Result area below the input.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/autocomplete/remote-with-cache.html b/apps/it/static/js/ui/demos/autocomplete/remote-with-cache.html
new file mode 100644
index 0000000..a560ef9
--- /dev/null
+++ b/apps/it/static/js/ui/demos/autocomplete/remote-with-cache.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Autocomplete - Remote with caching</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.position.js"></script>
+	<script src="../../ui/jquery.ui.menu.js"></script>
+	<script src="../../ui/jquery.ui.autocomplete.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	.ui-autocomplete-loading {
+		background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat;
+	}
+	</style>
+	<script>
+	$(function() {
+		var cache = {};
+		$( "#birds" ).autocomplete({
+			minLength: 2,
+			source: function( request, response ) {
+				var term = request.term;
+				if ( term in cache ) {
+					response( cache[ term ] );
+					return;
+				}
+
+				$.getJSON( "search.php", request, function( data, status, xhr ) {
+					cache[ term ] = data;
+					response( data );
+				});
+			}
+		});
+	});
+	</script>
+</head>
+<body>
+
+<div class="ui-widget">
+	<label for="birds">Birds: </label>
+	<input id="birds">
+</div>
+
+<div class="demo-description">
+<p>The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are bird names, displayed when at least two characters are entered into the field.</p>
+<p>Similar to the remote datasource demo, though this adds some local caching to improve performance. The cache here saves just one query, and could be extended to cache multiple values, one for each term.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/autocomplete/remote.html b/apps/it/static/js/ui/demos/autocomplete/remote.html
new file mode 100644
index 0000000..11c8160
--- /dev/null
+++ b/apps/it/static/js/ui/demos/autocomplete/remote.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Autocomplete - Remote datasource</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.position.js"></script>
+	<script src="../../ui/jquery.ui.menu.js"></script>
+	<script src="../../ui/jquery.ui.autocomplete.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	.ui-autocomplete-loading {
+		background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat;
+	}
+	</style>
+	<script>
+	$(function() {
+		function log( message ) {
+			$( "<div>" ).text( message ).prependTo( "#log" );
+			$( "#log" ).scrollTop( 0 );
+		}
+
+		$( "#birds" ).autocomplete({
+			source: "search.php",
+			minLength: 2,
+			select: function( event, ui ) {
+				log( ui.item ?
+					"Selected: " + ui.item.value + " aka " + ui.item.id :
+					"Nothing selected, input was " + this.value );
+			}
+		});
+	});
+	</script>
+</head>
+<body>
+
+<div class="ui-widget">
+	<label for="birds">Birds: </label>
+	<input id="birds">
+</div>
+
+<div class="ui-widget" style="margin-top:2em; font-family:Arial">
+	Result:
+	<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
+</div>
+
+<div class="demo-description">
+<p>The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are bird names, displayed when at least two characters are entered into the field.</p>
+<p>The datasource is a server-side script which returns JSON data, specified via a simple URL for the source-option. In addition, the minLength-option is set to 2 to avoid queries that would return too many results and the select-event is used to display some feedback.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/autocomplete/search.php b/apps/it/static/js/ui/demos/autocomplete/search.php
new file mode 100644
index 0000000..835772d
--- /dev/null
+++ b/apps/it/static/js/ui/demos/autocomplete/search.php
@@ -0,0 +1,590 @@
+<?php
+
+sleep( 3 );
+// no term passed - just exit early with no response
+if (empty($_GET['term'])) exit ;
+$q = strtolower($_GET["term"]);
+// remove slashes if they were magically added
+if (get_magic_quotes_gpc()) $q = stripslashes($q);
+
+$items = array(
+"Great Bittern"=>"Botaurus stellaris",
+"Little Grebe"=>"Tachybaptus ruficollis",
+"Black-necked Grebe"=>"Podiceps nigricollis",
+"Little Bittern"=>"Ixobrychus minutus",
+"Black-crowned Night Heron"=>"Nycticorax nycticorax",
+"Purple Heron"=>"Ardea purpurea",
+"White Stork"=>"Ciconia ciconia",
+"Spoonbill"=>"Platalea leucorodia",
+"Red-crested Pochard"=>"Netta rufina",
+"Common Eider"=>"Somateria mollissima",
+"Red Kite"=>"Milvus milvus",
+"Hen Harrier"=>"Circus cyaneus",
+"Montagu`s Harrier"=>"Circus pygargus",
+"Black Grouse"=>"Tetrao tetrix",
+"Grey Partridge"=>"Perdix perdix",
+"Spotted Crake"=>"Porzana porzana",
+"Corncrake"=>"Crex crex",
+"Common Crane"=>"Grus grus",
+"Avocet"=>"Recurvirostra avosetta",
+"Stone Curlew"=>"Burhinus oedicnemus",
+"Common Ringed Plover"=>"Charadrius hiaticula",
+"Kentish Plover"=>"Charadrius alexandrinus",
+"Ruff"=>"Philomachus pugnax",
+"Common Snipe"=>"Gallinago gallinago",
+"Black-tailed Godwit"=>"Limosa limosa",
+"Common Redshank"=>"Tringa totanus",
+"Sandwich Tern"=>"Sterna sandvicensis",
+"Common Tern"=>"Sterna hirundo",
+"Arctic Tern"=>"Sterna paradisaea",
+"Little Tern"=>"Sternula albifrons",
+"Black Tern"=>"Chlidonias niger",
+"Barn Owl"=>"Tyto alba",
+"Little Owl"=>"Athene noctua",
+"Short-eared Owl"=>"Asio flammeus",
+"European Nightjar"=>"Caprimulgus europaeus",
+"Common Kingfisher"=>"Alcedo atthis",
+"Eurasian Hoopoe"=>"Upupa epops",
+"Eurasian Wryneck"=>"Jynx torquilla",
+"European Green Woodpecker"=>"Picus viridis",
+"Crested Lark"=>"Galerida cristata",
+"White-headed Duck"=>"Oxyura leucocephala",
+"Pale-bellied Brent Goose"=>"Branta hrota",
+"Tawny Pipit"=>"Anthus campestris",
+"Whinchat"=>"Saxicola rubetra",
+"European Stonechat"=>"Saxicola rubicola",
+"Northern Wheatear"=>"Oenanthe oenanthe",
+"Savi`s Warbler"=>"Locustella luscinioides",
+"Sedge Warbler"=>"Acrocephalus schoenobaenus",
+"Great Reed Warbler"=>"Acrocephalus arundinaceus",
+"Bearded Reedling"=>"Panurus biarmicus",
+"Red-backed Shrike"=>"Lanius collurio",
+"Great Grey Shrike"=>"Lanius excubitor",
+"Woodchat Shrike"=>"Lanius senator",
+"Common Raven"=>"Corvus corax",
+"Yellowhammer"=>"Emberiza citrinella",
+"Ortolan Bunting"=>"Emberiza hortulana",
+"Corn Bunting"=>"Emberiza calandra",
+"Great Cormorant"=>"Phalacrocorax carbo",
+"Hawfinch"=>"Coccothraustes coccothraustes",
+"Common Shelduck"=>"Tadorna tadorna",
+"Bluethroat"=>"Luscinia svecica",
+"Grey Heron"=>"Ardea cinerea",
+"Barn Swallow"=>"Hirundo rustica",
+"Hooded Crow"=>"Corvus cornix",
+"Dunlin"=>"Calidris alpina",
+"Eurasian Pied Flycatcher"=>"Ficedula hypoleuca",
+"Eurasian Nuthatch"=>"Sitta europaea",
+"Short-toed Tree Creeper"=>"Certhia brachydactyla",
+"Wood Lark"=>"Lullula arborea",
+"Tree Pipit"=>"Anthus trivialis",
+"Eurasian Hobby"=>"Falco subbuteo",
+"Marsh Warbler"=>"Acrocephalus palustris",
+"Wood Sandpiper"=>"Tringa glareola",
+"Tawny Owl"=>"Strix aluco",
+"Lesser Whitethroat"=>"Sylvia curruca",
+"Barnacle Goose"=>"Branta leucopsis",
+"Common Goldeneye"=>"Bucephala clangula",
+"Western Marsh Harrier"=>"Circus aeruginosus",
+"Common Buzzard"=>"Buteo buteo",
+"Sanderling"=>"Calidris alba",
+"Little Gull"=>"Larus minutus",
+"Eurasian Magpie"=>"Pica pica",
+"Willow Warbler"=>"Phylloscopus trochilus",
+"Wood Warbler"=>"Phylloscopus sibilatrix",
+"Great Crested Grebe"=>"Podiceps cristatus",
+"Eurasian Jay"=>"Garrulus glandarius",
+"Common Redstart"=>"Phoenicurus phoenicurus",
+"Blue-headed Wagtail"=>"Motacilla flava",
+"Common Swift"=>"Apus apus",
+"Marsh Tit"=>"Poecile palustris",
+"Goldcrest"=>"Regulus regulus",
+"European Golden Plover"=>"Pluvialis apricaria",
+"Eurasian Bullfinch"=>"Pyrrhula pyrrhula",
+"Common Whitethroat"=>"Sylvia communis",
+"Meadow Pipit"=>"Anthus pratensis",
+"Greylag Goose"=>"Anser anser",
+"Spotted Flycatcher"=>"Muscicapa striata",
+"European Greenfinch"=>"Carduelis chloris",
+"Common Greenshank"=>"Tringa nebularia",
+"Great Spotted Woodpecker"=>"Dendrocopos major",
+"Greater Canada Goose"=>"Branta canadensis",
+"Mistle Thrush"=>"Turdus viscivorus",
+"Great Black-backed Gull"=>"Larus marinus",
+"Goosander"=>"Mergus merganser",
+"Great Egret"=>"Casmerodius albus",
+"Northern Goshawk"=>"Accipiter gentilis",
+"Dunnock"=>"Prunella modularis",
+"Stock Dove"=>"Columba oenas",
+"Common Wood Pigeon"=>"Columba palumbus",
+"Eurasian Woodcock"=>"Scolopax rusticola",
+"House Sparrow"=>"Passer domesticus",
+"Common House Martin"=>"Delichon urbicum",
+"Red Knot"=>"Calidris canutus",
+"Western Jackdaw"=>"Corvus monedula",
+"Brambling"=>"Fringilla montifringilla",
+"Northern Lapwing"=>"Vanellus vanellus",
+"European Reed Warbler"=>"Acrocephalus scirpaceus",
+"Lesser Black-backed Gull"=>"Larus fuscus",
+"Little Egret"=>"Egretta garzetta",
+"Little Stint"=>"Calidris minuta",
+"Common Linnet"=>"Carduelis cannabina",
+"Mute Swan"=>"Cygnus olor",
+"Common Cuckoo"=>"Cuculus canorus",
+"Black-headed Gull"=>"Larus ridibundus",
+"Greater White-fronted Goose"=>"Anser albifrons",
+"Great Tit"=>"Parus major",
+"Redwing"=>"Turdus iliacus",
+"Gadwall"=>"Anas strepera",
+"Fieldfare"=>"Turdus pilaris",
+"Tufted Duck"=>"Aythya fuligula",
+"Crested Tit"=>"Lophophanes cristatus",
+"Willow Tit"=>"Poecile montanus",
+"Eurasian Coot"=>"Fulica atra",
+"Common Blackbird"=>"Turdus merula",
+"Smew"=>"Mergus albellus",
+"Common Sandpiper"=>"Actitis hypoleucos",
+"Sand Martin"=>"Riparia riparia",
+"Purple Sandpiper"=>"Calidris maritima",
+"Northern Pintail"=>"Anas acuta",
+"Blue Tit"=>"Cyanistes caeruleus",
+"European Goldfinch"=>"Carduelis carduelis",
+"Eurasian Whimbrel"=>"Numenius phaeopus",
+"Common Reed Bunting"=>"Emberiza schoeniclus",
+"Eurasian Tree Sparrow"=>"Passer montanus",
+"Rook"=>"Corvus frugilegus",
+"European Robin"=>"Erithacus rubecula",
+"Bar-tailed Godwit"=>"Limosa lapponica",
+"Dark-bellied Brent Goose"=>"Branta bernicla",
+"Eurasian Oystercatcher"=>"Haematopus ostralegus",
+"Eurasian Siskin"=>"Carduelis spinus",
+"Northern Shoveler"=>"Anas clypeata",
+"Eurasian Wigeon"=>"Anas penelope",
+"Eurasian Sparrow Hawk"=>"Accipiter nisus",
+"Icterine Warbler"=>"Hippolais icterina",
+"Common Starling"=>"Sturnus vulgaris",
+"Long-tailed Tit"=>"Aegithalos caudatus",
+"Ruddy Turnstone"=>"Arenaria interpres",
+"Mew Gull"=>"Larus canus",
+"Common Pochard"=>"Aythya ferina",
+"Common Chiffchaff"=>"Phylloscopus collybita",
+"Greater Scaup"=>"Aythya marila",
+"Common Kestrel"=>"Falco tinnunculus",
+"Garden Warbler"=>"Sylvia borin",
+"Eurasian Collared Dove"=>"Streptopelia decaocto",
+"Eurasian Skylark"=>"Alauda arvensis",
+"Common Chaffinch"=>"Fringilla coelebs",
+"Common Moorhen"=>"Gallinula chloropus",
+"Water Pipit"=>"Anthus spinoletta",
+"Mallard"=>"Anas platyrhynchos",
+"Winter Wren"=>"Troglodytes troglodytes",
+"Common Teal"=>"Anas crecca",
+"Green Sandpiper"=>"Tringa ochropus",
+"White Wagtail"=>"Motacilla alba",
+"Eurasian Curlew"=>"Numenius arquata",
+"Song Thrush"=>"Turdus philomelos",
+"European Herring Gull"=>"Larus argentatus",
+"Grey Plover"=>"Pluvialis squatarola",
+"Carrion Crow"=>"Corvus corone",
+"Coal Tit"=>"Periparus ater",
+"Spotted Redshank"=>"Tringa erythropus",
+"Blackcap"=>"Sylvia atricapilla",
+"Egyptian Vulture"=>"Neophron percnopterus",
+"Razorbill"=>"Alca torda",
+"Alpine Swift"=>"Apus melba",
+"Long-legged Buzzard"=>"Buteo rufinus",
+"Audouin`s Gull"=>"Larus audouinii",
+"Balearic Shearwater"=>"Puffinus mauretanicus",
+"Upland Sandpiper"=>"Bartramia longicauda",
+"Greater Spotted Eagle"=>"Aquila clanga",
+"Ring Ouzel"=>"Turdus torquatus",
+"Yellow-browed Warbler"=>"Phylloscopus inornatus",
+"Blue Rock Thrush"=>"Monticola solitarius",
+"Buff-breasted Sandpiper"=>"Tryngites subruficollis",
+"Jack Snipe"=>"Lymnocryptes minimus",
+"White-rumped Sandpiper"=>"Calidris fuscicollis",
+"Ruddy Shelduck"=>"Tadorna ferruginea",
+"Cetti's Warbler"=>"Cettia cetti",
+"Citrine Wagtail"=>"Motacilla citreola",
+"Roseate Tern"=>"Sterna dougallii",
+"Black-legged Kittiwake"=>"Rissa tridactyla",
+"Pygmy Cormorant"=>"Phalacrocorax pygmeus",
+"Booted Eagle"=>"Aquila pennata",
+"Lesser White-fronted Goose"=>"Anser erythropus",
+"Little Bunting"=>"Emberiza pusilla",
+"Eleonora's Falcon"=>"Falco eleonorae",
+"European Serin"=>"Serinus serinus",
+"Twite"=>"Carduelis flavirostris",
+"Yellow-legged Gull"=>"Larus michahellis",
+"Gyr Falcon"=>"Falco rusticolus",
+"Greenish Warbler"=>"Phylloscopus trochiloides",
+"Red-necked Phalarope"=>"Phalaropus lobatus",
+"Mealy Redpoll"=>"Carduelis flammea",
+"Glaucous Gull"=>"Larus hyperboreus",
+"Great Skua"=>"Stercorarius skua",
+"Great Bustard"=>"Otis tarda",
+"Velvet Scoter"=>"Melanitta fusca",
+"Pine Grosbeak"=>"Pinicola enucleator",
+"House Crow"=>"Corvus splendens",
+"Hume`s Leaf Warbler"=>"Phylloscopus humei",
+"Great Northern Loon"=>"Gavia immer",
+"Long-tailed Duck"=>"Clangula hyemalis",
+"Lapland Longspur"=>"Calcarius lapponicus",
+"Northern Gannet"=>"Morus bassanus",
+"Eastern Imperial Eagle"=>"Aquila heliaca",
+"Little Auk"=>"Alle alle",
+"Lesser Spotted Woodpecker"=>"Dendrocopos minor",
+"Iceland Gull"=>"Larus glaucoides",
+"Parasitic Jaeger"=>"Stercorarius parasiticus",
+"Bewick`s Swan"=>"Cygnus bewickii",
+"Little Bustard"=>"Tetrax tetrax",
+"Little Crake"=>"Porzana parva",
+"Baillon`s Crake"=>"Porzana pusilla",
+"Long-tailed Jaeger"=>"Stercorarius longicaudus",
+"King Eider"=>"Somateria spectabilis",
+"Greater Short-toed Lark"=>"Calandrella brachydactyla",
+"Houbara Bustard"=>"Chlamydotis undulata",
+"Curlew Sandpiper"=>"Calidris ferruginea",
+"Common Crossbill"=>"Loxia curvirostra",
+"European Shag"=>"Phalacrocorax aristotelis",
+"Horned Grebe"=>"Podiceps auritus",
+"Common Quail"=>"Coturnix coturnix",
+"Bearded Vulture"=>"Gypaetus barbatus",
+"Lanner Falcon"=>"Falco biarmicus",
+"Middle Spotted Woodpecker"=>"Dendrocopos medius",
+"Pomarine Jaeger"=>"Stercorarius pomarinus",
+"Red-breasted Merganser"=>"Mergus serrator",
+"Eurasian Black Vulture"=>"Aegypius monachus",
+"Eurasian Dotterel"=>"Charadrius morinellus",
+"Common Nightingale"=>"Luscinia megarhynchos",
+"Northern willow warbler"=>"Phylloscopus trochilus acredula",
+"Manx Shearwater"=>"Puffinus puffinus",
+"Northern Fulmar"=>"Fulmarus glacialis",
+"Eurasian Eagle Owl"=>"Bubo bubo",
+"Orphean Warbler"=>"Sylvia hortensis",
+"Melodious Warbler"=>"Hippolais polyglotta",
+"Pallas's Leaf Warbler"=>"Phylloscopus proregulus",
+"Atlantic Puffin"=>"Fratercula arctica",
+"Black-throated Loon"=>"Gavia arctica",
+"Bohemian Waxwing"=>"Bombycilla garrulus",
+"Marsh Sandpiper"=>"Tringa stagnatilis",
+"Great Snipe"=>"Gallinago media",
+"Squacco Heron"=>"Ardeola ralloides",
+"Long-eared Owl"=>"Asio otus",
+"Caspian Tern"=>"Hydroprogne caspia",
+"Red-breasted Goose"=>"Branta ruficollis",
+"Red-throated Loon"=>"Gavia stellata",
+"Common Rosefinch"=>"Carpodacus erythrinus",
+"Red-footed Falcon"=>"Falco vespertinus",
+"Ross's Goose"=>"Anser rossii",
+"Red Phalarope"=>"Phalaropus fulicarius",
+"Pied Wagtail"=>"Motacilla yarrellii",
+"Rose-coloured Starling"=>"Sturnus roseus",
+"Rough-legged Buzzard"=>"Buteo lagopus",
+"Saker Falcon"=>"Falco cherrug",
+"European Roller"=>"Coracias garrulus",
+"Short-toed Eagle"=>"Circaetus gallicus",
+"Peregrine Falcon"=>"Falco peregrinus",
+"Merlin"=>"Falco columbarius",
+"Snow Goose"=>"Anser caerulescens",
+"Snowy Owl"=>"Bubo scandiacus",
+"Snow Bunting"=>"Plectrophenax nivalis",
+"Common Grasshopper Warbler"=>"Locustella naevia",
+"Golden Eagle"=>"Aquila chrysaetos",
+"Black-winged Stilt"=>"Himantopus himantopus",
+"Steppe Eagle"=>"Aquila nipalensis",
+"Pallid Harrier"=>"Circus macrourus",
+"European Storm-petrel"=>"Hydrobates pelagicus",
+"Horned Lark"=>"Eremophila alpestris",
+"Eurasian Treecreeper"=>"Certhia familiaris",
+"Taiga Bean Goose"=>"Anser fabalis",
+"Temminck`s Stint"=>"Calidris temminckii",
+"Terek Sandpiper"=>"Xenus cinereus",
+"Tundra Bean Goose"=>"Anser serrirostris",
+"European Turtle Dove"=>"Streptopelia turtur",
+"Leach`s Storm-petrel"=>"Oceanodroma leucorhoa",
+"Eurasian Griffon Vulture"=>"Gyps fulvus",
+"Paddyfield Warbler"=>"Acrocephalus agricola",
+"Osprey"=>"Pandion haliaetus",
+"Firecrest"=>"Regulus ignicapilla",
+"Water Rail"=>"Rallus aquaticus",
+"European Honey Buzzard"=>"Pernis apivorus",
+"Eurasian Golden Oriole"=>"Oriolus oriolus",
+"Whooper Swan"=>"Cygnus cygnus",
+"Two-barred Crossbill"=>"Loxia leucoptera",
+"White-tailed Eagle"=>"Haliaeetus albicilla",
+"Atlantic Murre"=>"Uria aalge",
+"Garganey"=>"Anas querquedula",
+"Black Redstart"=>"Phoenicurus ochruros",
+"Common Scoter"=>"Melanitta nigra",
+"Rock Pipit"=>"Anthus petrosus",
+"Lesser Spotted Eagle"=>"Aquila pomarina",
+"Cattle Egret"=>"Bubulcus ibis",
+"White-winged Black Tern"=>"Chlidonias leucopterus",
+"Black Stork"=>"Ciconia nigra",
+"Mediterranean Gull"=>"Larus melanocephalus",
+"Black Kite"=>"Milvus migrans",
+"Yellow Wagtail"=>"Motacilla flavissima",
+"Red-necked Grebe"=>"Podiceps grisegena",
+"Gull-billed Tern"=>"Gelochelidon nilotica",
+"Pectoral Sandpiper"=>"Calidris melanotos",
+"Barred Warbler"=>"Sylvia nisoria",
+"Red-throated Pipit"=>"Anthus cervinus",
+"Grey Wagtail"=>"Motacilla cinerea",
+"Richard`s Pipit"=>"Anthus richardi",
+"Black Woodpecker"=>"Dryocopus martius",
+"Little Ringed Plover"=>"Charadrius dubius",
+"Whiskered Tern"=>"Chlidonias hybrida",
+"Lesser Redpoll"=>"Carduelis cabaret",
+"Pallas' Bunting"=>"Emberiza pallasi",
+"Ferruginous Duck"=>"Aythya nyroca",
+"Whistling Swan"=>"Cygnus columbianus",
+"Black Brant"=>"Branta nigricans",
+"Marbled Teal"=>"Marmaronetta angustirostris",
+"Canvasback"=>"Aythya valisineria",
+"Redhead"=>"Aythya americana",
+"Lesser Scaup"=>"Aythya affinis",
+"Steller`s Eider"=>"Polysticta stelleri",
+"Spectacled Eider"=>"Somateria fischeri",
+"Harlequin Duck"=>"Histronicus histrionicus",
+"Black Scoter"=>"Melanitta americana",
+"Surf Scoter"=>"Melanitta perspicillata",
+"Barrow`s Goldeneye"=>"Bucephala islandica",
+"Falcated Duck"=>"Anas falcata",
+"American Wigeon"=>"Anas americana",
+"Blue-winged Teal"=>"Anas discors",
+"American Black Duck"=>"Anas rubripes",
+"Baikal Teal"=>"Anas formosa",
+"Green-Winged Teal"=>"Anas carolinensis",
+"Hazel Grouse"=>"Bonasa bonasia",
+"Rock Partridge"=>"Alectoris graeca",
+"Red-legged Partridge"=>"Alectoris rufa",
+"Yellow-billed Loon"=>"Gavia adamsii",
+"Cory`s Shearwater"=>"Calonectris borealis",
+"Madeiran Storm-Petrel"=>"Oceanodroma castro",
+"Great White Pelican"=>"Pelecanus onocrotalus",
+"Dalmatian Pelican"=>"Pelecanus crispus",
+"American Bittern"=>"Botaurus lentiginosus",
+"Glossy Ibis"=>"Plegadis falcinellus",
+"Spanish Imperial Eagle"=>"Aquila adalberti",
+"Lesser Kestrel"=>"Falco naumanni",
+"Houbara Bustard"=>"Chlamydotis undulata",
+"Crab-Plover"=>"Dromas ardeola",
+"Cream-coloured Courser"=>"Cursorius cursor",
+"Collared Pratincole"=>"Glareola pratincola",
+"Black-winged Pratincole"=>"Glareola nordmanni",
+"Killdeer"=>"Charadrius vociferus",
+"Lesser Sand Plover"=>"Charadrius mongolus",
+"Greater Sand Plover"=>"Charadrius leschenaultii",
+"Caspian Plover"=>"Charadrius asiaticus",
+"American Golden Plover"=>"Pluvialis dominica",
+"Pacific Golden Plover"=>"Pluvialis fulva",
+"Sharp-tailed Sandpiper"=>"Calidris acuminata",
+"Broad-billed Sandpiper"=>"Limicola falcinellus",
+"Spoon-Billed Sandpiper"=>"Eurynorhynchus pygmaeus",
+"Short-Billed Dowitcher"=>"Limnodromus griseus",
+"Long-billed Dowitcher"=>"Limnodromus scolopaceus",
+"Hudsonian Godwit"=>"Limosa haemastica",
+"Little Curlew"=>"Numenius minutus",
+"Lesser Yellowlegs"=>"Tringa flavipes",
+"Wilson`s Phalarope"=>"Phalaropus tricolor",
+"Pallas`s Gull"=>"Larus ichthyaetus",
+"Laughing Gull"=>"Larus atricilla",
+"Franklin`s Gull"=>"Larus pipixcan",
+"Bonaparte`s Gull"=>"Larus philadelphia",
+"Ring-billed Gull"=>"Larus delawarensis",
+"American Herring Gull"=>"Larus smithsonianus",
+"Caspian Gull"=>"Larus cachinnans",
+"Ivory Gull"=>"Pagophila eburnea",
+"Royal Tern"=>"Sterna maxima",
+"Brünnich`s Murre"=>"Uria lomvia",
+"Crested Auklet"=>"Aethia cristatella",
+"Parakeet Auklet"=>"Cyclorrhynchus psittacula",
+"Tufted Puffin"=>"Lunda cirrhata",
+"Laughing Dove"=>"Streptopelia senegalensis",
+"Great Spotted Cuckoo"=>"Clamator glandarius",
+"Great Grey Owl"=>"Strix nebulosa",
+"Tengmalm`s Owl"=>"Aegolius funereus",
+"Red-Necked Nightjar"=>"Caprimulgus ruficollis",
+"Chimney Swift"=>"Chaetura pelagica",
+"Green Bea-Eater"=>"Merops orientalis",
+"Grey-headed Woodpecker"=>"Picus canus",
+"Lesser Short-Toed Lark"=>"Calandrella rufescens",
+"Eurasian Crag Martin"=>"Hirundo rupestris",
+"Red-rumped Swallow"=>"Cecropis daurica",
+"Blyth`s Pipit"=>"Anthus godlewskii",
+"Pechora Pipit"=>"Anthus gustavi",
+"Grey-headed Wagtail"=>"Motacilla thunbergi",
+"Yellow-Headed Wagtail"=>"Motacilla lutea",
+"White-throated Dipper"=>"Cinclus cinclus",
+"Rufous-Tailed Scrub Robin"=>"Cercotrichas galactotes",
+"Thrush Nightingale"=>"Luscinia luscinia",
+"White-throated Robin"=>"Irania gutturalis",
+"Caspian Stonechat"=>"Saxicola maura variegata",
+"Western Black-eared Wheatear"=>"Oenanthe hispanica",
+"Rufous-tailed Rock Thrush"=>"Monticola saxatilis",
+"Red-throated Thrush/Black-throated"=>"Turdus ruficollis",
+"American Robin"=>"Turdus migratorius",
+"Zitting Cisticola"=>"Cisticola juncidis",
+"Lanceolated Warbler"=>"Locustella lanceolata",
+"River Warbler"=>"Locustella fluviatilis",
+"Blyth`s Reed Warbler"=>"Acrocephalus dumetorum",
+"Caspian Reed Warbler"=>"Acrocephalus fuscus",
+"Aquatic Warbler"=>"Acrocephalus paludicola",
+"Booted Warbler"=>"Acrocephalus caligatus",
+"Marmora's Warbler"=>"Sylvia sarda",
+"Dartford Warbler"=>"Sylvia undata",
+"Subalpine Warbler"=>"Sylvia cantillans",
+"Ménétries's Warbler"=>"Sylvia mystacea",
+"Rüppel's Warbler"=>"Sylvia rueppelli",
+"Asian Desert Warbler"=>"Sylvia nana",
+"Western Orphean Warbler"=>"Sylvia hortensis hortensis",
+"Arctic Warbler"=>"Phylloscopus borealis",
+"Radde`s Warbler"=>"Phylloscopus schwarzi",
+"Western Bonelli`s Warbler"=>"Phylloscopus bonelli",
+"Red-breasted Flycatcher"=>"Ficedula parva",
+"Eurasian Penduline Tit"=>"Remiz pendulinus",
+"Daurian Shrike"=>"Lanius isabellinus",
+"Long-Tailed Shrike"=>"Lanius schach",
+"Lesser Grey Shrike"=>"Lanius minor",
+"Southern Grey Shrike"=>"Lanius meridionalis",
+"Masked Shrike"=>"Lanius nubicus",
+"Spotted Nutcracker"=>"Nucifraga caryocatactes",
+"Daurian Jackdaw"=>"Corvus dauuricus",
+"Purple-Backed Starling"=>"Sturnus sturninus",
+"Red-Fronted Serin"=>"Serinus pusillus",
+"Arctic Redpoll"=>"Carduelis hornemanni",
+"Scottish Crossbill"=>"Loxia scotica",
+"Parrot Crossbill"=>"Loxia pytyopsittacus",
+"Black-faced Bunting"=>"Emberiza spodocephala",
+"Pink-footed Goose"=>"Anser brachyrhynchus",
+"Black-winged Kite"=>"Elanus caeruleus",
+"European Bee-eater"=>"Merops apiaster",
+"Sabine`s Gull"=>"Larus sabini",
+"Sooty Shearwater"=>"Puffinus griseus",
+"Lesser Canada Goose"=>"Branta hutchinsii",
+"Ring-necked Duck"=>"Aythya collaris",
+"Greater Flamingo"=>"Phoenicopterus roseus",
+"Iberian Chiffchaff"=>"Phylloscopus ibericus",
+"Ashy-headed Wagtail"=>"Motacilla cinereocapilla",
+"Stilt Sandpiper"=>"Calidris himantopus",
+"Siberian Stonechat"=>"Saxicola maurus",
+"Greater Yellowlegs"=>"Tringa melanoleuca",
+"Forster`s Tern"=>"Sterna forsteri",
+"Dusky Warbler"=>"Phylloscopus fuscatus",
+"Cirl Bunting"=>"Emberiza cirlus",
+"Olive-backed Pipit"=>"Anthus hodgsoni",
+"Sociable Lapwing"=>"Vanellus gregarius",
+"Spotted Sandpiper"=>"Actitis macularius",
+"Baird`s Sandpiper"=>"Calidris bairdii",
+"Rustic Bunting"=>"Emberiza rustica",
+"Yellow-browed Bunting"=>"Emberiza chrysophrys",
+"Great Shearwater"=>"Puffinus gravis",
+"Bonelli`s Eagle"=>"Aquila fasciata",
+"Calandra Lark"=>"Melanocorypha calandra",
+"Sardinian Warbler"=>"Sylvia melanocephala",
+"Ross's Gull"=>"Larus roseus",
+"Yellow-Breasted Bunting"=>"Emberiza aureola",
+"Pine Bunting"=>"Emberiza leucocephalos",
+"Black Guillemot"=>"Cepphus grylle",
+"Pied-billed Grebe"=>"Podilymbus podiceps",
+"Soft-plumaged Petrel"=>"Pterodroma mollis",
+"Bulwer's Petrel"=>"Bulweria bulwerii",
+"White-Faced Storm-Petrel"=>"Pelagodroma marina",
+"Pallas’s Fish Eagle"=>"Haliaeetus leucoryphus",
+"Sandhill Crane"=>"Grus canadensis",
+"Macqueen’s Bustard"=>"Chlamydotis macqueenii",
+"White-tailed Lapwing"=>"Vanellus leucurus",
+"Great Knot"=>"Calidris tenuirostris",
+"Semipalmated Sandpiper"=>"Calidris pusilla",
+"Red-necked Stint"=>"Calidris ruficollis",
+"Slender-billed Curlew"=>"Numenius tenuirostris",
+"Bridled Tern"=>"Onychoprion anaethetus",
+"Pallas’s Sandgrouse"=>"Syrrhaptes paradoxus",
+"European Scops Owl"=>"Otus scops",
+"Northern Hawk Owl"=>"Surnia ulula",
+"White-Throated Needletail"=>"Hirundapus caudacutus",
+"Belted Kingfisher"=>"Ceryle alcyon",
+"Blue-cheeked Bee-eater"=>"Merops persicus",
+"Black-headed Wagtail"=>"Motacilla feldegg",
+"Northern Mockingbird"=>"Mimus polyglottos",
+"Alpine Accentor"=>"Prunella collaris",
+"Red-flanked Bluetail"=>"Tarsiger cyanurus",
+"Isabelline Wheatear"=>"Oenanthe isabellina",
+"Pied Wheatear"=>"Oenanthe pleschanka",
+"Eastern Black-eared Wheatear"=>"Oenanthe melanoleuca",
+"Desert Wheatear"=>"Oenanthe deserti",
+"White`s Thrush"=>"Zoothera aurea",
+"Siberian Thrush"=>"Zoothera sibirica",
+"Eyebrowed Thrush"=>"Turdus obscurus",
+"Dusky Thrush"=>"Turdus eunomus",
+"Black-throated Thrush"=>"Turdus atrogularis",
+"Pallas`s Grasshopper Warbler"=>"Locustella certhiola",
+"Spectacled Warbler"=>"Sylvia conspicillata",
+"Two-barred Warbler"=>"Phylloscopus plumbeitarsus",
+"Eastern Bonelli’s Warbler"=>"Phylloscopus orientalis",
+"Collared Flycatcher"=>"Ficedula albicollis",
+"Wallcreeper"=>"Tichodroma muraria",
+"Turkestan Shrike"=>"Lanius phoenicuroides",
+"Steppe Grey Shrike"=>"Lanius pallidirostris",
+"Spanish Sparrow"=>"Passer hispaniolensis",
+"Red-eyed Vireo"=>"Vireo olivaceus",
+"Myrtle Warbler"=>"Dendroica coronata",
+"White-crowned Sparrow"=>"Zonotrichia leucophrys",
+"White-throated Sparrow"=>"Zonotrichia albicollis",
+"Cretzschmar`s Bunting"=>"Emberiza caesia",
+"Chestnut Bunting"=>"Emberiza rutila",
+"Red-headed Bunting"=>"Emberiza bruniceps",
+"Black-headed Bunting"=>"Emberiza melanocephala",
+"Indigo Bunting"=>"Passerina cyanea",
+"Balearic Woodchat Shrike"=>"Lanius senator badius",
+"Demoiselle Crane"=>"Grus virgo",
+"Chough"=>"Pyrrhocorax pyrrhocorax",
+"Red-Billed Chough"=>"Pyrrhocorax graculus",
+"Elegant Tern"=>"Sterna elegans",
+"Chukar"=>"Alectoris chukar",
+"Yellow-Billed Cuckoo"=>"Coccyzus americanus",
+"American Sandwich Tern"=>"Sterna sandvicensis acuflavida",
+"Olive-Tree Warbler"=>"Hippolais olivetorum",
+"Eastern Olivaceous Warbler"=>"Acrocephalus pallidus",
+"Indian Cormorant"=>"Phalacrocorax fuscicollis",
+"Spur-Winged Lapwing"=>"Vanellus spinosus",
+"Yelkouan Shearwater"=>"Puffinus yelkouan",
+"Trumpeter Finch"=>"Bucanetes githagineus",
+"Red Grouse"=>"Lagopus scoticus",
+"Rock Ptarmigan"=>"Lagopus mutus",
+"Long-Tailed Cormorant"=>"Phalacrocorax africanus",
+"Double-crested Cormorant"=>"Phalacrocorax auritus",
+"Magnificent Frigatebird"=>"Fregata magnificens",
+"Naumann's Thrush"=>"Turdus naumanni",
+"Oriental Pratincole"=>"Glareola maldivarum",
+"Bufflehead"=>"Bucephala albeola",
+"Snowfinch"=>"Montifrigilla nivalis",
+"Ural owl"=>"Strix uralensis",
+"Spanish Wagtail"=>"Motacilla iberiae",
+"Song Sparrow"=>"Melospiza melodia",
+"Rock Bunting"=>"Emberiza cia",
+"Siberian Rubythroat"=>"Luscinia calliope",
+"Pallid Swift"=>"Apus pallidus",
+"Eurasian Pygmy Owl"=>"Glaucidium passerinum",
+"Madeira Little Shearwater"=>"Puffinus baroli",
+"House Finch"=>"Carpodacus mexicanus",
+"Green Heron"=>"Butorides virescens",
+"Solitary Sandpiper"=>"Tringa solitaria",
+"Heuglin's Gull"=>"Larus heuglini"
+);
+
+
+$result = array();
+foreach ($items as $key=>$value) {
+	if (strpos(strtolower($key), $q) !== false) {
+		array_push($result, array("id"=>$value, "label"=>$key, "value" => strip_tags($key)));
+	}
+	if (count($result) > 11)
+		break;
+}
+
+// json_encode is available in PHP 5.2 and above, or you can install a PECL module in earlier versions
+echo json_encode($result);
+
+?>
+\ No newline at end of file
diff --git a/apps/it/static/js/ui/demos/autocomplete/xml.html b/apps/it/static/js/ui/demos/autocomplete/xml.html
new file mode 100644
index 0000000..098bc28
--- /dev/null
+++ b/apps/it/static/js/ui/demos/autocomplete/xml.html
@@ -0,0 +1,66 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Autocomplete - XML data parsed once</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.position.js"></script>
+	<script src="../../ui/jquery.ui.menu.js"></script>
+	<script src="../../ui/jquery.ui.autocomplete.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	.ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; }
+	</style>
+	<script>
+	$(function() {
+		function log( message ) {
+			$( "<div/>" ).text( message ).prependTo( "#log" );
+			$( "#log" ).attr( "scrollTop", 0 );
+		}
+
+		$.ajax({
+			url: "london.xml",
+			dataType: "xml",
+			success: function( xmlResponse ) {
+				var data = $( "geoname", xmlResponse ).map(function() {
+					return {
+						value: $( "name", this ).text() + ", " +
+							( $.trim( $( "countryName", this ).text() ) || "(unknown country)" ),
+						id: $( "geonameId", this ).text()
+					};
+				}).get();
+				$( "#birds" ).autocomplete({
+					source: data,
+					minLength: 0,
+					select: function( event, ui ) {
+						log( ui.item ?
+							"Selected: " + ui.item.value + ", geonameId: " + ui.item.id :
+							"Nothing selected, input was " + this.value );
+					}
+				});
+			}
+		});
+	});
+	</script>
+</head>
+<body>
+
+<div class="ui-widget">
+	<label for="birds">London matches: </label>
+	<input id="birds" />
+</div>
+
+<div class="ui-widget" style="margin-top:2em; font-family:Arial">
+	Result:
+	<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
+</div>
+
+<div class="demo-description">
+<p>This demo shows how to retrieve some XML data, parse it using jQuery's methods, then provide it to the autocomplete as the datasource.</p>
+<p>This should also serve as a reference on how to parse a remote XML datasource - the parsing would just happen for each request within the source-callback.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/button/checkbox.html b/apps/it/static/js/ui/demos/button/checkbox.html
new file mode 100644
index 0000000..704ae1e
--- /dev/null
+++ b/apps/it/static/js/ui/demos/button/checkbox.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Button - Checkboxes</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.button.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$(function() {
+		$( "#check" ).button();
+		$( "#format" ).buttonset();
+	});
+	</script>
+	<style>
+	#format { margin-top: 2em; }
+	</style>
+</head>
+<body>
+
+<input type="checkbox" id="check" /><label for="check">Toggle</label>
+
+<div id="format">
+	<input type="checkbox" id="check1" /><label for="check1">B</label>
+	<input type="checkbox" id="check2" /><label for="check2">I</label>
+	<input type="checkbox" id="check3" /><label for="check3">U</label>
+</div>
+
+<div class="demo-description">
+<p>A checkbox is styled as a toggle button with the button widget. The label element associated with the checkbox is used for the button text.</p>
+<p>This demo also demonstrates three checkboxes styled as a button set by calling <code>.buttonset()</code> on a common container.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/button/default.html b/apps/it/static/js/ui/demos/button/default.html
new file mode 100644
index 0000000..2318ecc
--- /dev/null
+++ b/apps/it/static/js/ui/demos/button/default.html
@@ -0,0 +1,34 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Button - Default functionality</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.button.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$(function() {
+		$( "input[type=submit], a, button" )
+			.button()
+			.click(function( event ) {
+				event.preventDefault();
+			});
+	});
+	</script>
+</head>
+<body>
+
+<button>A button element</button>
+
+<input type="submit" value="A submit button">
+
+<a href="#">An anchor</a>
+
+<div class="demo-description">
+<p>Examples of the markup that can be used for buttons: A button element, an input of type submit and an anchor.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/button/icons.html b/apps/it/static/js/ui/demos/button/icons.html
new file mode 100644
index 0000000..757a71c
--- /dev/null
+++ b/apps/it/static/js/ui/demos/button/icons.html
@@ -0,0 +1,49 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Button - Icons</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.button.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$(function() {
+		$( "button:first" ).button({
+			icons: {
+				primary: "ui-icon-locked"
+			},
+			text: false
+		}).next().button({
+			icons: {
+				primary: "ui-icon-locked"
+			}
+		}).next().button({
+			icons: {
+				primary: "ui-icon-gear",
+				secondary: "ui-icon-triangle-1-s"
+			}
+		}).next().button({
+			icons: {
+				primary: "ui-icon-gear",
+				secondary: "ui-icon-triangle-1-s"
+			},
+			text: false
+		});
+	});
+	</script>
+</head>
+<body>
+
+<button>Button with icon only</button>
+<button>Button with icon on the left</button>
+<button>Button with two icons</button>
+<button>Button with two icons and no text</button>
+
+<div class="demo-description">
+<p>Some buttons with various combinations of text and icons.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/button/index.html b/apps/it/static/js/ui/demos/button/index.html
new file mode 100644
index 0000000..7956059
--- /dev/null
+++ b/apps/it/static/js/ui/demos/button/index.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Button Demos</title>
+</head>
+<body>
+
+<ul>
+	<li><a href="default.html">Default functionality</a></li>
+	<li><a href="radio.html">Radios</a></li>
+	<li><a href="checkbox.html">Checkboxes</a></li>
+	<li><a href="icons.html">Icons</a></li>
+	<li><a href="toolbar.html">Toolbar</a></li>
+	<li><a href="splitbutton.html">Split Button</a></li>
+</ul>
+
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/button/radio.html b/apps/it/static/js/ui/demos/button/radio.html
new file mode 100644
index 0000000..1674b7c
--- /dev/null
+++ b/apps/it/static/js/ui/demos/button/radio.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Button - Radios</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.button.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$(function() {
+		$( "#radio" ).buttonset();
+	});
+	</script>
+</head>
+<body>
+
+<form>
+	<div id="radio">
+		<input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label>
+		<input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label>
+		<input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
+	</div>
+</form>
+
+<div class="demo-description">
+<p>A set of three radio buttons transformed into a button set.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/button/splitbutton.html b/apps/it/static/js/ui/demos/button/splitbutton.html
new file mode 100644
index 0000000..faf7f06
--- /dev/null
+++ b/apps/it/static/js/ui/demos/button/splitbutton.html
@@ -0,0 +1,69 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Button - Split button</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.button.js"></script>
+	<script src="../../ui/jquery.ui.position.js"></script>
+	<script src="../../ui/jquery.ui.menu.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+		.ui-menu { position: absolute; width: 100px; }
+	</style>
+	<script>
+	$(function() {
+		$( "#rerun" )
+			.button()
+			.click(function() {
+				alert( "Running the last action" );
+			})
+			.next()
+				.button({
+					text: false,
+					icons: {
+						primary: "ui-icon-triangle-1-s"
+					}
+				})
+				.click(function() {
+					var menu = $( this ).parent().next().show().position({
+						my: "left top",
+						at: "left bottom",
+						of: this
+					});
+					$( document ).one( "click", function() {
+						menu.hide();
+					});
+					return false;
+				})
+				.parent()
+					.buttonset()
+					.next()
+						.hide()
+						.menu();
+	});
+	</script>
+</head>
+<body>
+
+<div>
+	<div>
+		<button id="rerun">Run last action</button>
+		<button id="select">Select an action</button>
+	</div>
+	<ul>
+		<li><a href="#">Open...</a></li>
+		<li><a href="#">Save</a></li>
+		<li><a href="#">Delete</a></li>
+	</ul>
+</div>
+
+<div class="demo-description">
+<p>An example of a split button built with two buttons: A plain button with just text, one with only a primary icon
+and no text. Both are grouped together in a set.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/button/toolbar.html b/apps/it/static/js/ui/demos/button/toolbar.html
new file mode 100644
index 0000000..d5dcb26
--- /dev/null
+++ b/apps/it/static/js/ui/demos/button/toolbar.html
@@ -0,0 +1,118 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Button - Toolbar</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.button.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	#toolbar {
+		padding: 4px;
+		display: inline-block;
+	}
+	/* support: IE7 */
+	*+html #toolbar {
+		display: inline;
+	}
+	</style>
+	<script>
+	$(function() {
+		$( "#beginning" ).button({
+			text: false,
+			icons: {
+				primary: "ui-icon-seek-start"
+			}
+		});
+		$( "#rewind" ).button({
+			text: false,
+			icons: {
+				primary: "ui-icon-seek-prev"
+			}
+		});
+		$( "#play" ).button({
+			text: false,
+			icons: {
+				primary: "ui-icon-play"
+			}
+		})
+		.click(function() {
+			var options;
+			if ( $( this ).text() === "play" ) {
+				options = {
+					label: "pause",
+					icons: {
+						primary: "ui-icon-pause"
+					}
+				};
+			} else {
+				options = {
+					label: "play",
+					icons: {
+						primary: "ui-icon-play"
+					}
+				};
+			}
+			$( this ).button( "option", options );
+		});
+		$( "#stop" ).button({
+			text: false,
+			icons: {
+				primary: "ui-icon-stop"
+			}
+		})
+		.click(function() {
+			$( "#play" ).button( "option", {
+				label: "play",
+				icons: {
+					primary: "ui-icon-play"
+				}
+			});
+		});
+		$( "#forward" ).button({
+			text: false,
+			icons: {
+				primary: "ui-icon-seek-next"
+			}
+		});
+		$( "#end" ).button({
+			text: false,
+			icons: {
+				primary: "ui-icon-seek-end"
+			}
+		});
+		$( "#shuffle" ).button();
+		$( "#repeat" ).buttonset();
+	});
+	</script>
+</head>
+<body>
+
+<div id="toolbar" class="ui-widget-header ui-corner-all">
+	<button id="beginning">go to beginning</button>
+	<button id="rewind">rewind</button>
+	<button id="play">play</button>
+	<button id="stop">stop</button>
+	<button id="forward">fast forward</button>
+	<button id="end">go to end</button>
+
+	<input type="checkbox" id="shuffle" /><label for="shuffle">Shuffle</label>
+
+	<span id="repeat">
+		<input type="radio" id="repeat0" name="repeat" checked="checked" /><label for="repeat0">No Repeat</label>
+		<input type="radio" id="repeat1" name="repeat" /><label for="repeat1">Once</label>
+		<input type="radio" id="repeatall" name="repeat" /><label for="repeatall">All</label>
+	</span>
+</div>
+
+<div class="demo-description">
+<p>
+	A mediaplayer toolbar. Take a look at the underlying markup: A few button elements,
+	an input of type checkbox for the Shuffle button, and three inputs of type radio for the Repeat options.
+</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/datepicker/alt-field.html b/apps/it/static/js/ui/demos/datepicker/alt-field.html
new file mode 100644
index 0000000..8742da2
--- /dev/null
+++ b/apps/it/static/js/ui/demos/datepicker/alt-field.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Datepicker - Populate alternate field</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.datepicker.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$(function() {
+		$( "#datepicker" ).datepicker({
+			altField: "#alternate",
+			altFormat: "DD, d MM, yy"
+		});
+	});
+	</script>
+</head>
+<body>
+
+<p>Date: <input type="text" id="datepicker">&nbsp;<input type="text" id="alternate" size="30"/></p>
+
+<div class="demo-description">
+<p>Populate an alternate field with its own date format whenever a date is selected using the <code>altField</code> and <code>altFormat</code> options.  This feature could be used to present a human-friendly date for user selection, while passing a more computer-friendly date through for further processing.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/datepicker/animation.html b/apps/it/static/js/ui/demos/datepicker/animation.html
new file mode 100644
index 0000000..da8193e
--- /dev/null
+++ b/apps/it/static/js/ui/demos/datepicker/animation.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Datepicker - Animations</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.effect.js"></script>
+	<script src="../../ui/jquery.ui.effect-blind.js"></script>
+	<script src="../../ui/jquery.ui.effect-bounce.js"></script>
+	<script src="../../ui/jquery.ui.effect-clip.js"></script>
+	<script src="../../ui/jquery.ui.effect-drop.js"></script>
+	<script src="../../ui/jquery.ui.effect-fold.js"></script>
+	<script src="../../ui/jquery.ui.effect-slide.js"></script>
+	<script src="../../ui/jquery.ui.datepicker.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$(function() {
+		$( "#datepicker" ).datepicker();
+		$( "#anim" ).change(function() {
+			$( "#datepicker" ).datepicker( "option", "showAnim", $( this ).val() );
+		});
+	});
+	</script>
+</head>
+<body>
+
+<p>Date: <input type="text" id="datepicker" size="30"/></p>
+
+<p>Animations:<br />
+	<select id="anim">
+		<option value="show">Show (default)</option>
+		<option value="slideDown">Slide down</option>
+		<option value="fadeIn">Fade in</option>
+		<option value="blind">Blind (UI Effect)</option>
+		<option value="bounce">Bounce (UI Effect)</option>
+		<option value="clip">Clip (UI Effect)</option>
+		<option value="drop">Drop (UI Effect)</option>
+		<option value="fold">Fold (UI Effect)</option>
+		<option value="slide">Slide (UI Effect)</option>
+		<option value="">None</option>
+	</select>
+</p>
+
+<div class="demo-description">
+<p>Use different animations when opening or closing the datepicker.  Choose an animation from the dropdown, then click on the input to see its effect.  You can use one of the three standard animations or any of the UI Effects.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/datepicker/buttonbar.html b/apps/it/static/js/ui/demos/datepicker/buttonbar.html
new file mode 100644
index 0000000..d815740
--- /dev/null
+++ b/apps/it/static/js/ui/demos/datepicker/buttonbar.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Datepicker - Display button bar</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.datepicker.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$(function() {
+		$( "#datepicker" ).datepicker({
+			showButtonPanel: true
+		});
+	});
+	</script>
+</head>
+<body>
+
+<p>Date: <input type="text" id="datepicker"></p>
+
+<div class="demo-description">
+<p>Display a button for selecting Today's date and a Done button for closing the calendar with the boolean <code>showButtonPanel</code> option.  Each button is enabled by default when the bar is displayed, but can be turned off with additional options.  Button text is customizable.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/datepicker/date-formats.html b/apps/it/static/js/ui/demos/datepicker/date-formats.html
new file mode 100644
index 0000000..3a46308
--- /dev/null
+++ b/apps/it/static/js/ui/demos/datepicker/date-formats.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Datepicker - Format date</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.datepicker.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$(function() {
+		$( "#datepicker" ).datepicker();
+		$( "#format" ).change(function() {
+			$( "#datepicker" ).datepicker( "option", "dateFormat", $( this ).val() );
+		});
+	});
+	</script>
+</head>
+<body>
+
+<p>Date: <input type="text" id="datepicker" size="30"/></p>
+
+<p>Format options:<br />
+	<select id="format">
+		<option value="mm/dd/yy">Default - mm/dd/yy</option>
+		<option value="yy-mm-dd">ISO 8601 - yy-mm-dd</option>
+		<option value="d M, y">Short - d M, y</option>
+		<option value="d MM, y">Medium - d MM, y</option>
+		<option value="DD, d MM, yy">Full - DD, d MM, yy</option>
+		<option value="'day' d 'of' MM 'in the year' yy">With text - 'day' d 'of' MM 'in the year' yy</option>
+	</select>
+</p>
+
+<div class="demo-description">
+<p>Display date feedback in a variety of ways.  Choose a date format from the dropdown, then click on the input and select a date to see it in that format.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/datepicker/date-range.html b/apps/it/static/js/ui/demos/datepicker/date-range.html
new file mode 100644
index 0000000..4d878a4
--- /dev/null
+++ b/apps/it/static/js/ui/demos/datepicker/date-range.html
@@ -0,0 +1,44 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Datepicker - Select a Date Range</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.datepicker.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$(function() {
+		$( "#from" ).datepicker({
+			defaultDate: "+1w",
+			changeMonth: true,
+			numberOfMonths: 3,
+			onClose: function( selectedDate ) {
+				$( "#to" ).datepicker( "option", "minDate", selectedDate );
+			}
+		});
+		$( "#to" ).datepicker({
+			defaultDate: "+1w",
+			changeMonth: true,
+			numberOfMonths: 3,
+			onClose: function( selectedDate ) {
+				$( "#from" ).datepicker( "option", "maxDate", selectedDate );
+			}
+		});
+	});
+	</script>
+</head>
+<body>
+
+<label for="from">From</label>
+<input type="text" id="from" name="from"/>
+<label for="to">to</label>
+<input type="text" id="to" name="to"/>
+
+<div class="demo-description">
+<p>Select the date range to search for.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/datepicker/default.html b/apps/it/static/js/ui/demos/datepicker/default.html
new file mode 100644
index 0000000..2d66a6e
--- /dev/null
+++ b/apps/it/static/js/ui/demos/datepicker/default.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Datepicker - Default functionality</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.datepicker.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$(function() {
+		$( "#datepicker" ).datepicker();
+	});
+	</script>
+</head>
+<body>
+
+<p>Date: <input type="text" id="datepicker"></p>
+
+<div class="demo-description">
+<p>The datepicker is tied to a standard form input field.  Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay.  Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input's value.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/datepicker/dropdown-month-year.html b/apps/it/static/js/ui/demos/datepicker/dropdown-month-year.html
new file mode 100644
index 0000000..84b16c9
--- /dev/null
+++ b/apps/it/static/js/ui/demos/datepicker/dropdown-month-year.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Datepicker - Display month &amp; year menus</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.datepicker.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$(function() {
+		$( "#datepicker" ).datepicker({
+			changeMonth: true,
+			changeYear: true
+		});
+	});
+	</script>
+</head>
+<body>
+
+<p>Date: <input type="text" id="datepicker"></p>
+
+<div class="demo-description">
+<p>Show month and year dropdowns in place of the static month/year header to facilitate navigation through large timeframes.  Add the boolean <code>changeMonth</code> and <code>changeYear</code> options.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/datepicker/icon-trigger.html b/apps/it/static/js/ui/demos/datepicker/icon-trigger.html
new file mode 100644
index 0000000..b5c74c8
--- /dev/null
+++ b/apps/it/static/js/ui/demos/datepicker/icon-trigger.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Datepicker - Icon trigger</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.datepicker.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$(function() {
+		$( "#datepicker" ).datepicker({
+			showOn: "button",
+			buttonImage: "images/calendar.gif",
+			buttonImageOnly: true
+		});
+	});
+	</script>
+</head>
+<body>
+
+<p>Date: <input type="text" id="datepicker"></p>
+
+<div class="demo-description">
+<p>Click the icon next to the input field to show the datepicker.  Set the datepicker to open on focus (default behavior), on icon click, or both.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/datepicker/images/calendar.gif b/apps/it/static/js/ui/demos/datepicker/images/calendar.gif
new file mode 100644
index 0000000..d0abaa7
--- /dev/null
+++ b/apps/it/static/js/ui/demos/datepicker/images/calendar.gif
diff --git a/apps/it/static/js/ui/demos/datepicker/index.html b/apps/it/static/js/ui/demos/datepicker/index.html
new file mode 100644
index 0000000..eb903a2
--- /dev/null
+++ b/apps/it/static/js/ui/demos/datepicker/index.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Datepicker Demos</title>
+</head>
+<body>
+
+<ul>
+	<li><a href="default.html">Default functionality</a></li>
+	<li><a href="date-formats.html">Format date</a></li>
+	<li><a href="min-max.html">Restrict date range</a></li>
+	<li><a href="localization.html">Localize calendar</a></li>
+	<li><a href="alt-field.html">Populate alternate field</a></li>
+	<li><a href="inline.html">Display inline</a></li>
+	<li><a href="buttonbar.html">Display button bar</a></li>
+	<li><a href="dropdown-month-year.html">Display month &amp; year menus</a></li>		
+	<li><a href="other-months.html">Dates in other months</a></li>		
+	<li><a href="show-week.html">Show week of the year</a></li>		
+	<li><a href="multiple-calendars.html">Display multiple months</a></li>		
+	<li><a href="icon-trigger.html">Icon trigger</a></li>
+	<li><a href="animation.html">Animations</a></li>
+	<li><a href="date-range.html">Date Range</a></li>
+</ul>
+
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/datepicker/inline.html b/apps/it/static/js/ui/demos/datepicker/inline.html
new file mode 100644
index 0000000..cd8f606
--- /dev/null
+++ b/apps/it/static/js/ui/demos/datepicker/inline.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Datepicker - Display inline</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.datepicker.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$(function() {
+		$( "#datepicker" ).datepicker();
+	});
+	</script>
+</head>
+<body>
+
+Date: <div id="datepicker"></div>
+
+<div class="demo-description">
+<p>Display the datepicker embedded in the page instead of in an overlay.  Simply call .datepicker() on a div instead of an input.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/datepicker/jquery.ui.datepicker-ar.js b/apps/it/static/js/ui/demos/datepicker/jquery.ui.datepicker-ar.js
new file mode 100644
index 0000000..cef0f08
--- /dev/null
+++ b/apps/it/static/js/ui/demos/datepicker/jquery.ui.datepicker-ar.js
@@ -0,0 +1,23 @@
+/* Arabic Translation for jQuery UI date picker plugin. */
+/* Khaled Alhourani -- me@khaledalhourani.com */
+/* NOTE: monthNames are the original months names and they are the Arabic names, not the new months name فبراير - يناير and there isn't any Arabic roots for these months */
+jQuery(function($){
+	$.datepicker.regional['ar'] = {
+		closeText: 'إغلاق',
+		prevText: '&#x3C;السابق',
+		nextText: 'التالي&#x3E;',
+		currentText: 'اليوم',
+		monthNames: ['كانون الثاني', 'شباط', 'آذار', 'نيسان', 'مايو', 'حزيران',
+		'تموز', 'آب', 'أيلول',	'تشرين الأول', 'تشرين الثاني', 'كانون الأول'],
+		monthNamesShort: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+		dayNames: ['الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت'],
+		dayNamesShort: ['الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت'],
+		dayNamesMin: ['ح', 'ن', 'ث', 'ر', 'خ', 'ج', 'س'],
+		weekHeader: 'أسبوع',
+		dateFormat: 'dd/mm/yy',
+		firstDay: 6,
+  		isRTL: true,
+		showMonthAfterYear: false,
+		yearSuffix: ''};
+	$.datepicker.setDefaults($.datepicker.regional['ar']);
+});
diff --git a/apps/it/static/js/ui/demos/datepicker/jquery.ui.datepicker-fr.js b/apps/it/static/js/ui/demos/datepicker/jquery.ui.datepicker-fr.js
new file mode 100644
index 0000000..2d06743
--- /dev/null
+++ b/apps/it/static/js/ui/demos/datepicker/jquery.ui.datepicker-fr.js
@@ -0,0 +1,25 @@
+/* French initialisation for the jQuery UI date picker plugin. */
+/* Written by Keith Wood (kbwood{at}iinet.com.au),
+			  Stéphane Nahmani (sholby@sholby.net),
+			  Stéphane Raimbault <stephane.raimbault@gmail.com> */
+jQuery(function($){
+	$.datepicker.regional['fr'] = {
+		closeText: 'Fermer',
+		prevText: 'Précédent',
+		nextText: 'Suivant',
+		currentText: 'Aujourd\'hui',
+		monthNames: ['janvier', 'février', 'mars', 'avril', 'mai', 'juin',
+			'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre'],
+		monthNamesShort: ['janv.', 'févr.', 'mars', 'avril', 'mai', 'juin',
+			'juil.', 'août', 'sept.', 'oct.', 'nov.', 'déc.'],
+		dayNames: ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'],
+		dayNamesShort: ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'],
+		dayNamesMin: ['D','L','M','M','J','V','S'],
+		weekHeader: 'Sem.',
+		dateFormat: 'dd/mm/yy',
+		firstDay: 1,
+		isRTL: false,
+		showMonthAfterYear: false,
+		yearSuffix: ''};
+	$.datepicker.setDefaults($.datepicker.regional['fr']);
+});
diff --git a/apps/it/static/js/ui/demos/datepicker/jquery.ui.datepicker-he.js b/apps/it/static/js/ui/demos/datepicker/jquery.ui.datepicker-he.js
new file mode 100644
index 0000000..b9e8dee
--- /dev/null
+++ b/apps/it/static/js/ui/demos/datepicker/jquery.ui.datepicker-he.js
@@ -0,0 +1,23 @@
+/* Hebrew initialisation for the UI Datepicker extension. */
+/* Written by Amir Hardon (ahardon at gmail dot com). */
+jQuery(function($){
+	$.datepicker.regional['he'] = {
+		closeText: 'סגור',
+		prevText: '&#x3C;הקודם',
+		nextText: 'הבא&#x3E;',
+		currentText: 'היום',
+		monthNames: ['ינואר','פברואר','מרץ','אפריל','מאי','יוני',
+		'יולי','אוגוסט','ספטמבר','אוקטובר','נובמבר','דצמבר'],
+		monthNamesShort: ['ינו','פבר','מרץ','אפר','מאי','יוני',
+		'יולי','אוג','ספט','אוק','נוב','דצמ'],
+		dayNames: ['ראשון','שני','שלישי','רביעי','חמישי','שישי','שבת'],
+		dayNamesShort: ['א\'','ב\'','ג\'','ד\'','ה\'','ו\'','שבת'],
+		dayNamesMin: ['א\'','ב\'','ג\'','ד\'','ה\'','ו\'','שבת'],
+		weekHeader: 'Wk',
+		dateFormat: 'dd/mm/yy',
+		firstDay: 0,
+		isRTL: true,
+		showMonthAfterYear: false,
+		yearSuffix: ''};
+	$.datepicker.setDefaults($.datepicker.regional['he']);
+});
diff --git a/apps/it/static/js/ui/demos/datepicker/jquery.ui.datepicker-zh-TW.js b/apps/it/static/js/ui/demos/datepicker/jquery.ui.datepicker-zh-TW.js
new file mode 100644
index 0000000..b9105ea
--- /dev/null
+++ b/apps/it/static/js/ui/demos/datepicker/jquery.ui.datepicker-zh-TW.js
@@ -0,0 +1,23 @@
+/* Chinese initialisation for the jQuery UI date picker plugin. */
+/* Written by Ressol (ressol@gmail.com). */
+jQuery(function($){
+	$.datepicker.regional['zh-TW'] = {
+		closeText: '關閉',
+		prevText: '&#x3C;上月',
+		nextText: '下月&#x3E;',
+		currentText: '今天',
+		monthNames: ['一月','二月','三月','四月','五月','六月',
+		'七月','八月','九月','十月','十一月','十二月'],
+		monthNamesShort: ['一月','二月','三月','四月','五月','六月',
+		'七月','八月','九月','十月','十一月','十二月'],
+		dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
+		dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],
+		dayNamesMin: ['日','一','二','三','四','五','六'],
+		weekHeader: '周',
+		dateFormat: 'yy/mm/dd',
+		firstDay: 1,
+		isRTL: false,
+		showMonthAfterYear: true,
+		yearSuffix: '年'};
+	$.datepicker.setDefaults($.datepicker.regional['zh-TW']);
+});
diff --git a/apps/it/static/js/ui/demos/datepicker/localization.html b/apps/it/static/js/ui/demos/datepicker/localization.html
new file mode 100644
index 0000000..e2d2bb6
--- /dev/null
+++ b/apps/it/static/js/ui/demos/datepicker/localization.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Datepicker - Localize calendar</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.datepicker.js"></script>
+	<script src="jquery.ui.datepicker-ar.js"></script>
+	<script src="jquery.ui.datepicker-fr.js"></script>
+	<script src="jquery.ui.datepicker-he.js"></script>
+	<script src="jquery.ui.datepicker-zh-TW.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$(function() {
+		$( "#datepicker" ).datepicker( $.datepicker.regional[ "fr" ] );
+		$( "#locale" ).change(function() {
+			$( "#datepicker" ).datepicker( "option",
+				$.datepicker.regional[ $( this ).val() ] );
+		});
+	});
+	</script>
+</head>
+<body>
+
+<p>Date: <input type="text" id="datepicker"/>&nbsp;
+	<select id="locale">
+		<option value="ar">Arabic (&#8235;(&#1575;&#1604;&#1593;&#1585;&#1576;&#1610;&#1577;</option>
+		<option value="zh-TW">Chinese Traditional (&#32321;&#39636;&#20013;&#25991;)</option>
+		<option value="">English</option>
+		<option value="fr" selected="selected">French (Fran&ccedil;ais)</option>
+		<option value="he">Hebrew (&#8235;(&#1506;&#1489;&#1512;&#1497;&#1514;</option>
+	</select></p>
+
+<div class="demo-description">
+<p>Localize the datepicker calendar language and format (English / Western formatting is the default).  The datepicker includes built-in support for languages that read right-to-left, such as Arabic and Hebrew.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/datepicker/min-max.html b/apps/it/static/js/ui/demos/datepicker/min-max.html
new file mode 100644
index 0000000..52bf8cb
--- /dev/null
+++ b/apps/it/static/js/ui/demos/datepicker/min-max.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Datepicker - Restrict date range</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.datepicker.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$(function() {
+		$( "#datepicker" ).datepicker({ minDate: -20, maxDate: "+1M +10D" });
+	});
+	</script>
+</head>
+<body>
+
+<p>Date: <input type="text" id="datepicker"></p>
+
+<div class="demo-description">
+<p>Restrict the range of selectable dates with the <code>minDate</code> and <code>maxDate</code> options.  Set the beginning and end dates as actual dates (new Date(2009, 1 - 1, 26)), as a numeric offset from today (-20), or as a string of periods and units ('+1M +10D').  For the last, use 'D' for days, 'W' for weeks, 'M' for months, or 'Y' for years.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/datepicker/multiple-calendars.html b/apps/it/static/js/ui/demos/datepicker/multiple-calendars.html
new file mode 100644
index 0000000..0b7350e
--- /dev/null
+++ b/apps/it/static/js/ui/demos/datepicker/multiple-calendars.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Datepicker - Display multiple months</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.datepicker.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$(function() {
+		$( "#datepicker" ).datepicker({
+			numberOfMonths: 3,
+			showButtonPanel: true
+		});
+	});
+	</script>
+</head>
+<body>
+
+<p>Date: <input type="text" id="datepicker"></p>
+
+<div class="demo-description">
+<p>Set the <code>numberOfMonths</code> option to an integer of 2 or more to show multiple months in a single datepicker.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/datepicker/other-months.html b/apps/it/static/js/ui/demos/datepicker/other-months.html
new file mode 100644
index 0000000..eb7d774
--- /dev/null
+++ b/apps/it/static/js/ui/demos/datepicker/other-months.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Datepicker - Dates in other months</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.datepicker.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$(function() {
+		$( "#datepicker" ).datepicker({
+			showOtherMonths: true,
+			selectOtherMonths: true
+		});
+	});
+	</script>
+</head>
+<body>
+
+<p>Date: <input type="text" id="datepicker"></p>
+
+<div class="demo-description">
+<p>The datepicker can show dates that come from other than the main month
+	being displayed. These other dates can also be made selectable.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/datepicker/show-week.html b/apps/it/static/js/ui/demos/datepicker/show-week.html
new file mode 100644
index 0000000..c6c21d3
--- /dev/null
+++ b/apps/it/static/js/ui/demos/datepicker/show-week.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Datepicker - Show week of the year</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.datepicker.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$(function() {
+		$( "#datepicker" ).datepicker({
+			showWeek: true,
+			firstDay: 1
+		});
+	});
+	</script>
+</head>
+<body>
+
+<p>Date: <input type="text" id="datepicker"></p>
+
+<div class="demo-description">
+<p>The datepicker can show the week of the year. The default calculation follows
+	the ISO 8601 definition: the week starts on Monday, the first week of the year
+	contains the first Thursday of the year. This means that some days from one
+	year may be placed into weeks 'belonging' to another year.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/demos.css b/apps/it/static/js/ui/demos/demos.css
new file mode 100644
index 0000000..da9ad83
--- /dev/null
+++ b/apps/it/static/js/ui/demos/demos.css
@@ -0,0 +1,19 @@
+body {
+	font-size: 62.5%;
+	font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif";
+}
+
+table {
+	font-size: 1em;
+}
+
+.demo-description {
+	clear: both;
+	padding: 12px;
+	font-size: 1.3em;
+	line-height: 1.4em;
+}
+
+.ui-draggable, .ui-droppable {
+	background-position: top;
+}
diff --git a/apps/it/static/js/ui/demos/dialog/animated.html b/apps/it/static/js/ui/demos/dialog/animated.html
new file mode 100644
index 0000000..7bc2620
--- /dev/null
+++ b/apps/it/static/js/ui/demos/dialog/animated.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Dialog - Animation</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mouse.js"></script>
+	<script src="../../ui/jquery.ui.draggable.js"></script>
+	<script src="../../ui/jquery.ui.position.js"></script>
+	<script src="../../ui/jquery.ui.resizable.js"></script>
+	<script src="../../ui/jquery.ui.button.js"></script>
+	<script src="../../ui/jquery.ui.dialog.js"></script>
+	<script src="../../ui/jquery.ui.effect.js"></script>
+	<script src="../../ui/jquery.ui.effect-blind.js"></script>
+	<script src="../../ui/jquery.ui.effect-explode.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$(function() {
+		$( "#dialog" ).dialog({
+			autoOpen: false,
+			show: {
+				effect: "blind",
+				duration: 1000
+			},
+			hide: {
+				effect: "explode",
+				duration: 1000
+			}
+		});
+
+		$( "#opener" ).click(function() {
+			$( "#dialog" ).dialog( "open" );
+		});
+	});
+	</script>
+</head>
+<body>
+
+<div id="dialog" title="Basic dialog">
+	<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
+</div>
+
+<button id="opener">Open Dialog</button>
+
+<div class="demo-description">
+<p>Dialogs may be animated by specifying an effect for the show and/or hide properties.  You must include the individual effects file for any effects you would like to use.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/dialog/default.html b/apps/it/static/js/ui/demos/dialog/default.html
new file mode 100644
index 0000000..4c45d62
--- /dev/null
+++ b/apps/it/static/js/ui/demos/dialog/default.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Dialog - Default functionality</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mouse.js"></script>
+	<script src="../../ui/jquery.ui.draggable.js"></script>
+	<script src="../../ui/jquery.ui.position.js"></script>
+	<script src="../../ui/jquery.ui.resizable.js"></script>
+	<script src="../../ui/jquery.ui.button.js"></script>
+	<script src="../../ui/jquery.ui.dialog.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$(function() {
+		$( "#dialog" ).dialog();
+	});
+	</script>
+</head>
+<body>
+
+<div id="dialog" title="Basic dialog">
+	<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
+</div>
+
+<div class="demo-description">
+<p>The basic dialog window is an overlay positioned within the viewport and is protected from page content (like select elements) shining through with an iframe.  It has a title bar and a content area, and can be moved, resized and closed with the 'x' icon by default.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/dialog/index.html b/apps/it/static/js/ui/demos/dialog/index.html
new file mode 100644
index 0000000..6aaa3ec
--- /dev/null
+++ b/apps/it/static/js/ui/demos/dialog/index.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Dialog Demos</title>
+</head>
+<body>
+
+<ul>
+	<li><a href="default.html">Default functionality</a></li>
+	<li><a href="animated.html">Animated dialog</a></li>
+	<li><a href="modal.html">Modal dialog</a></li>
+	<li><a href="modal-message.html">Modal message</a></li>
+	<li><a href="modal-confirmation.html">Modal confirmation</a></li>
+	<li><a href="modal-form.html">Modal form</a></li>
+</ul>
+
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/dialog/modal-confirmation.html b/apps/it/static/js/ui/demos/dialog/modal-confirmation.html
new file mode 100644
index 0000000..4bcc234
--- /dev/null
+++ b/apps/it/static/js/ui/demos/dialog/modal-confirmation.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Dialog - Modal confirmation</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mouse.js"></script>
+	<script src="../../ui/jquery.ui.button.js"></script>
+	<script src="../../ui/jquery.ui.draggable.js"></script>
+	<script src="../../ui/jquery.ui.position.js"></script>
+	<script src="../../ui/jquery.ui.dialog.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$(function() {
+		$( "#dialog-confirm" ).dialog({
+			resizable: false,
+			height:140,
+			modal: true,
+			buttons: {
+				"Delete all items": function() {
+					$( this ).dialog( "close" );
+				},
+				Cancel: function() {
+					$( this ).dialog( "close" );
+				}
+			}
+		});
+	});
+	</script>
+</head>
+<body>
+
+<div id="dialog-confirm" title="Empty the recycle bin?">
+	<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
+</div>
+
+<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>
+
+<div class="demo-description">
+<p>Confirm an action that may be destructive or important.  Set the <code>modal</code> option to true, and specify primary and secondary user actions with the <code>buttons</code> option.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/dialog/modal-form.html b/apps/it/static/js/ui/demos/dialog/modal-form.html
new file mode 100644
index 0000000..b7bc8f9
--- /dev/null
+++ b/apps/it/static/js/ui/demos/dialog/modal-form.html
@@ -0,0 +1,157 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Dialog - Modal form</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mouse.js"></script>
+	<script src="../../ui/jquery.ui.button.js"></script>
+	<script src="../../ui/jquery.ui.draggable.js"></script>
+	<script src="../../ui/jquery.ui.position.js"></script>
+	<script src="../../ui/jquery.ui.resizable.js"></script>
+	<script src="../../ui/jquery.ui.button.js"></script>
+	<script src="../../ui/jquery.ui.dialog.js"></script>
+	<script src="../../ui/jquery.ui.effect.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+		body { font-size: 62.5%; }
+		label, input { display:block; }
+		input.text { margin-bottom:12px; width:95%; padding: .4em; }
+		fieldset { padding:0; border:0; margin-top:25px; }
+		h1 { font-size: 1.2em; margin: .6em 0; }
+		div#users-contain { width: 350px; margin: 20px 0; }
+		div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
+		div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
+		.ui-dialog .ui-state-error { padding: .3em; }
+		.validateTips { border: 1px solid transparent; padding: 0.3em; }
+	</style>
+	<script>
+	$(function() {
+		var name = $( "#name" ),
+			email = $( "#email" ),
+			password = $( "#password" ),
+			allFields = $( [] ).add( name ).add( email ).add( password ),
+			tips = $( ".validateTips" );
+
+		function updateTips( t ) {
+			tips
+				.text( t )
+				.addClass( "ui-state-highlight" );
+			setTimeout(function() {
+				tips.removeClass( "ui-state-highlight", 1500 );
+			}, 500 );
+		}
+
+		function checkLength( o, n, min, max ) {
+			if ( o.val().length > max || o.val().length < min ) {
+				o.addClass( "ui-state-error" );
+				updateTips( "Length of " + n + " must be between " +
+					min + " and " + max + "." );
+				return false;
+			} else {
+				return true;
+			}
+		}
+
+		function checkRegexp( o, regexp, n ) {
+			if ( !( regexp.test( o.val() ) ) ) {
+				o.addClass( "ui-state-error" );
+				updateTips( n );
+				return false;
+			} else {
+				return true;
+			}
+		}
+
+		$( "#dialog-form" ).dialog({
+			autoOpen: false,
+			height: 300,
+			width: 350,
+			modal: true,
+			buttons: {
+				"Create an account": function() {
+					var bValid = true;
+					allFields.removeClass( "ui-state-error" );
+
+					bValid = bValid && checkLength( name, "username", 3, 16 );
+					bValid = bValid && checkLength( email, "email", 6, 80 );
+					bValid = bValid && checkLength( password, "password", 5, 16 );
+
+					bValid = bValid && checkRegexp( name, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter." );
+					// From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
+					bValid = bValid && checkRegexp( email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. ui@jquery.com" );
+					bValid = bValid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9" );
+
+					if ( bValid ) {
+						$( "#users tbody" ).append( "<tr>" +
+							"<td>" + name.val() + "</td>" +
+							"<td>" + email.val() + "</td>" +
+							"<td>" + password.val() + "</td>" +
+						"</tr>" );
+						$( this ).dialog( "close" );
+					}
+				},
+				Cancel: function() {
+					$( this ).dialog( "close" );
+				}
+			},
+			close: function() {
+				allFields.val( "" ).removeClass( "ui-state-error" );
+			}
+		});
+
+		$( "#create-user" )
+			.button()
+			.click(function() {
+				$( "#dialog-form" ).dialog( "open" );
+			});
+	});
+	</script>
+</head>
+<body>
+
+<div id="dialog-form" title="Create new user">
+	<p class="validateTips">All form fields are required.</p>
+
+	<form>
+	<fieldset>
+		<label for="name">Name</label>
+		<input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
+		<label for="email">Email</label>
+		<input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
+		<label for="password">Password</label>
+		<input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
+	</fieldset>
+	</form>
+</div>
+
+
+<div id="users-contain" class="ui-widget">
+	<h1>Existing Users:</h1>
+	<table id="users" class="ui-widget ui-widget-content">
+		<thead>
+			<tr class="ui-widget-header ">
+				<th>Name</th>
+				<th>Email</th>
+				<th>Password</th>
+			</tr>
+		</thead>
+		<tbody>
+			<tr>
+				<td>John Doe</td>
+				<td>john.doe@example.com</td>
+				<td>johndoe1</td>
+			</tr>
+		</tbody>
+	</table>
+</div>
+<button id="create-user">Create new user</button>
+
+<div class="demo-description">
+<p>Use a modal dialog to require that the user enter data during a multi-step process.  Embed form markup in the content area, set the <code>modal</code> option to true, and specify primary and secondary user actions with the <code>buttons</code> option.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/dialog/modal-message.html b/apps/it/static/js/ui/demos/dialog/modal-message.html
new file mode 100644
index 0000000..f463ee8
--- /dev/null
+++ b/apps/it/static/js/ui/demos/dialog/modal-message.html
@@ -0,0 +1,49 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Dialog - Modal message</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mouse.js"></script>
+	<script src="../../ui/jquery.ui.button.js"></script>
+	<script src="../../ui/jquery.ui.draggable.js"></script>
+	<script src="../../ui/jquery.ui.position.js"></script>
+	<script src="../../ui/jquery.ui.resizable.js"></script>
+	<script src="../../ui/jquery.ui.button.js"></script>
+	<script src="../../ui/jquery.ui.dialog.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$(function() {
+		$( "#dialog-message" ).dialog({
+			modal: true,
+			buttons: {
+				Ok: function() {
+					$( this ).dialog( "close" );
+				}
+			}
+		});
+	});
+	</script>
+</head>
+<body>
+
+<div id="dialog-message" title="Download complete">
+	<p>
+		<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
+		Your files have downloaded successfully into the My Downloads folder.
+	</p>
+	<p>
+		Currently using <b>36% of your storage space</b>.
+	</p>
+</div>
+
+<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>
+
+<div class="demo-description">
+<p>Use a modal dialog to explicitly acknowledge information or an action before continuing their work.  Set the <code>modal</code> option to true, and specify a primary action (Ok) with the <code>buttons</code> option.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/dialog/modal.html b/apps/it/static/js/ui/demos/dialog/modal.html
new file mode 100644
index 0000000..af290d0
--- /dev/null
+++ b/apps/it/static/js/ui/demos/dialog/modal.html
@@ -0,0 +1,38 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Dialog - Basic modal</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mouse.js"></script>
+	<script src="../../ui/jquery.ui.draggable.js"></script>
+	<script src="../../ui/jquery.ui.position.js"></script>
+	<script src="../../ui/jquery.ui.resizable.js"></script>
+	<script src="../../ui/jquery.ui.button.js"></script>
+	<script src="../../ui/jquery.ui.dialog.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$(function() {
+		$( "#dialog-modal" ).dialog({
+			height: 140,
+			modal: true
+		});
+	});
+	</script>
+</head>
+<body>
+
+<div id="dialog-modal" title="Basic modal dialog">
+	<p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
+</div>
+
+<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>
+
+<div class="demo-description">
+<p>A modal dialog prevents the user from interacting with the rest of the page until it is closed.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/draggable/constrain-movement.html b/apps/it/static/js/ui/demos/draggable/constrain-movement.html
new file mode 100644
index 0000000..813fc50
--- /dev/null
+++ b/apps/it/static/js/ui/demos/draggable/constrain-movement.html
@@ -0,0 +1,58 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Draggable - Constrain movement</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mouse.js"></script>
+	<script src="../../ui/jquery.ui.draggable.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	.draggable { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
+	#draggable, #draggable2 { margin-bottom:20px; }
+	#draggable { cursor: n-resize; }
+	#draggable2 { cursor: e-resize; }
+	#containment-wrapper { width: 95%; height:150px; border:2px solid #ccc; padding: 10px; }
+	h3 { clear: left; }
+	</style>
+	<script>
+	$(function() {
+		$( "#draggable" ).draggable({ axis: "y" });
+		$( "#draggable2" ).draggable({ axis: "x" });
+
+		$( "#draggable3" ).draggable({ containment: "#containment-wrapper", scroll: false });
+		$( "#draggable5" ).draggable({ containment: "parent" });
+	});
+	</script>
+</head>
+<body>
+
+<h3>Constrain movement along an axis:</h3>
+
+<div id="draggable" class="draggable ui-widget-content">
+	<p>I can be dragged only vertically</p>
+</div>
+
+<div id="draggable2" class="draggable ui-widget-content">
+	<p>I can be dragged only horizontally</p>
+</div>
+
+<h3>Or to within another DOM element:</h3>
+<div id="containment-wrapper">
+	<div id="draggable3" class="draggable ui-widget-content">
+		<p>I'm contained within the box</p>
+	</div>
+
+	<div class="draggable ui-widget-content">
+		<p id="draggable5" class="ui-widget-header">I'm contained within my parent</p>
+	</div>
+</div>
+
+<div class="demo-description">
+<p>Constrain the movement of each draggable by defining the boundaries of the draggable area. Set the <code>axis</code> option to limit the draggable's path to the x- or y-axis, or use the <code>containment</code> option to specify a parent DOM element or a jQuery selector, like 'document.'</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/draggable/cursor-style.html b/apps/it/static/js/ui/demos/draggable/cursor-style.html
new file mode 100644
index 0000000..e87c75d
--- /dev/null
+++ b/apps/it/static/js/ui/demos/draggable/cursor-style.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Draggable - Cursor style</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mouse.js"></script>
+	<script src="../../ui/jquery.ui.draggable.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	#draggable, #draggable2, #draggable3 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
+	</style>
+	<script>
+	$(function() {
+		$( "#draggable" ).draggable({ cursor: "move", cursorAt: { top: 56, left: 56 } });
+		$( "#draggable2" ).draggable({ cursor: "crosshair", cursorAt: { top: -5, left: -5 } });
+		$( "#draggable3" ).draggable({ cursorAt: { bottom: 0 } });
+	});
+	</script>
+</head>
+<body>
+
+<div id="draggable" class="ui-widget-content">
+	<p>I will always stick to the center (relative to the mouse)</p>
+</div>
+
+<div id="draggable2" class="ui-widget-content">
+	<p>My cursor is at left -5 and top -5</p>
+</div>
+
+<div id="draggable3" class="ui-widget-content">
+	<p>My cursor position is only controlled for the 'bottom' value</p>
+</div>
+
+<div class="demo-description">
+<p>Position the cursor while dragging the object. By default the cursor appears in the center of the dragged object; use the <code>cursorAt</code> option to specify another location relative to the draggable (specify a pixel value from the top, right, bottom, and/or left).  Customize the cursor's appearance by supplying the <code>cursor</code> option with a valid CSS cursor value: default, move, pointer, crosshair, etc.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/draggable/default.html b/apps/it/static/js/ui/demos/draggable/default.html
new file mode 100644
index 0000000..a1f7a91
--- /dev/null
+++ b/apps/it/static/js/ui/demos/draggable/default.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Draggable - Default functionality</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mouse.js"></script>
+	<script src="../../ui/jquery.ui.draggable.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	#draggable { width: 150px; height: 150px; padding: 0.5em; }
+	</style>
+	<script>
+	$(function() {
+		$( "#draggable" ).draggable();
+	});
+	</script>
+</head>
+<body>
+
+<div id="draggable" class="ui-widget-content">
+	<p>Drag me around</p>
+</div>
+
+<div class="demo-description">
+<p>Enable draggable functionality on any DOM element. Move the draggable object by clicking on it with the mouse and dragging it anywhere within the viewport.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/draggable/delay-start.html b/apps/it/static/js/ui/demos/draggable/delay-start.html
new file mode 100644
index 0000000..5f45e42
--- /dev/null
+++ b/apps/it/static/js/ui/demos/draggable/delay-start.html
@@ -0,0 +1,38 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Draggable - Delay start</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mouse.js"></script>
+	<script src="../../ui/jquery.ui.draggable.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	#draggable, #draggable2 { width: 120px; height: 120px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
+	</style>
+	<script>
+	$(function() {
+		$( "#draggable" ).draggable({ distance: 20 });
+		$( "#draggable2" ).draggable({ delay: 1000 });
+		$( ".ui-draggable" ).disableSelection();
+	});
+	</script>
+</head>
+<body>
+
+<div id="draggable" class="ui-widget-content">
+	<p>Only if you drag me by 20 pixels, the dragging will start</p>
+</div>
+
+<div id="draggable2" class="ui-widget-content">
+	<p>Regardless of the distance, you have to drag and wait for 1000ms before dragging starts</p>
+</div>
+
+<div class="demo-description">
+<p>Delay the start of dragging for a number of milliseconds with the <code>delay</code> option; prevent dragging until the cursor is held down and dragged a specifed number of pixels with the <code>distance</code> option. </p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/draggable/events.html b/apps/it/static/js/ui/demos/draggable/events.html
new file mode 100644
index 0000000..9949a4c
--- /dev/null
+++ b/apps/it/static/js/ui/demos/draggable/events.html
@@ -0,0 +1,70 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Draggable - Events</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mouse.js"></script>
+	<script src="../../ui/jquery.ui.draggable.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	#draggable { width: 16em; padding: 0 1em; }
+	#draggable ul li { margin: 1em 0; padding: 0.5em 0; } * html #draggable ul li { height: 1%; }
+	#draggable ul li span.ui-icon { float: left; }
+	#draggable ul li span.count { font-weight: bold; }
+	</style>
+	<script>
+	$(function() {
+		var $start_counter = $( "#event-start" ),
+			$drag_counter = $( "#event-drag" ),
+			$stop_counter = $( "#event-stop" ),
+			counts = [ 0, 0, 0 ];
+
+		$( "#draggable" ).draggable({
+			start: function() {
+				counts[ 0 ]++;
+				updateCounterStatus( $start_counter, counts[ 0 ] );
+			},
+			drag: function() {
+				counts[ 1 ]++;
+				updateCounterStatus( $drag_counter, counts[ 1 ] );
+			},
+			stop: function() {
+				counts[ 2 ]++;
+				updateCounterStatus( $stop_counter, counts[ 2 ] );
+			}
+		});
+
+		function updateCounterStatus( $event_counter, new_count ) {
+			// first update the status visually...
+			if ( !$event_counter.hasClass( "ui-state-hover" ) ) {
+				$event_counter.addClass( "ui-state-hover" )
+					.siblings().removeClass( "ui-state-hover" );
+			}
+			// ...then update the numbers
+			$( "span.count", $event_counter ).text( new_count );
+		}
+	});
+	</script>
+</head>
+<body>
+
+<div id="draggable" class="ui-widget ui-widget-content">
+
+	<p>Drag me to trigger the chain of events.</p>
+
+	<ul class="ui-helper-reset">
+		<li id="event-start" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-play"></span>"start" invoked <span class="count">0</span>x</li>
+		<li id="event-drag" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-arrow-4"></span>"drag" invoked <span class="count">0</span>x</li>
+		<li id="event-stop" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-stop"></span>"stop" invoked <span class="count">0</span>x</li>
+	</ul>
+</div>
+
+<div class="demo-description">
+<p>Layer functionality onto the draggable using the <code>start</code>, <code>drag</code>, and <code>stop</code> events.  Start is fired at the start of the drag; drag during the drag; and stop when dragging stops.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/draggable/handle.html b/apps/it/static/js/ui/demos/draggable/handle.html
new file mode 100644
index 0000000..31dabc4
--- /dev/null
+++ b/apps/it/static/js/ui/demos/draggable/handle.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Draggable - Handles</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mouse.js"></script>
+	<script src="../../ui/jquery.ui.draggable.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	#draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
+	#draggable p { cursor: move; }
+	</style>
+	<script>
+	$(function() {
+		$( "#draggable" ).draggable({ handle: "p" });
+		$( "#draggable2" ).draggable({ cancel: "p.ui-widget-header" });
+		$( "div, p" ).disableSelection();
+	});
+	</script>
+</head>
+<body>
+
+<div id="draggable" class="ui-widget-content">
+	<p class="ui-widget-header">I can be dragged only by this handle</p>
+</div>
+
+<div id="draggable2" class="ui-widget-content">
+	<p>You can drag me around&hellip;</p>
+	<p class="ui-widget-header">&hellip;but you can't drag me by this handle.</p>
+</div>
+
+<div class="demo-description">
+<p>Allow dragging only when the cursor is over a specific part of the draggable.  Use the <code>handle</code> option to specify the jQuery selector of an element (or group of elements) used to drag the object.</p>
+<p>Or prevent dragging when the cursor is over a specific element (or group of elements) within the draggable.  Use the <code>cancel</code> option to specify a jQuery selector over which to "cancel" draggable functionality.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/draggable/index.html b/apps/it/static/js/ui/demos/draggable/index.html
new file mode 100644
index 0000000..9385068
--- /dev/null
+++ b/apps/it/static/js/ui/demos/draggable/index.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Draggable Demos</title>
+</head>
+<body>
+
+<ul>
+	<li><a href="default.html">Default functionality</a></li>
+	<li><a href="events.html">Events</a></li>
+	<li><a href="constrain-movement.html">Constrain movement</a></li>
+	<li><a href="delay-start.html">Delay start</a></li>
+	<li><a href="snap-to.html">Snap to element or grid</a></li>
+	<li><a href="scroll.html">Auto-scroll</a></li>
+	<li><a href="revert.html">Revert position</a></li>
+	<li><a href="visual-feedback.html">Visual feedback</a></li>
+	<li><a href="handle.html">Drag handle</a></li>
+	<li><a href="cursor-style.html">Cursor style</a></li>
+	<li><a href="sortable.html">Draggable + Sortable</a></li>
+</ul>
+
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/draggable/revert.html b/apps/it/static/js/ui/demos/draggable/revert.html
new file mode 100644
index 0000000..58282e7
--- /dev/null
+++ b/apps/it/static/js/ui/demos/draggable/revert.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Draggable - Revert position</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mouse.js"></script>
+	<script src="../../ui/jquery.ui.draggable.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	#draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
+	</style>
+	<script>
+	$(function() {
+		$( "#draggable" ).draggable({ revert: true });
+		$( "#draggable2" ).draggable({ revert: true, helper: "clone" });
+	});
+	</script>
+</head>
+<body>
+
+<div id="draggable" class="ui-widget-content">
+	<p>Revert the original</p>
+</div>
+
+<div id="draggable2" class="ui-widget-content">
+	<p>Revert the helper</p>
+</div>
+
+<div class="demo-description">
+<p>Return the draggable (or it's helper) to its original location when dragging stops with the boolean <code>revert</code> option.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/draggable/scroll.html b/apps/it/static/js/ui/demos/draggable/scroll.html
new file mode 100644
index 0000000..38b4404
--- /dev/null
+++ b/apps/it/static/js/ui/demos/draggable/scroll.html
@@ -0,0 +1,44 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Draggable - Auto-scroll</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mouse.js"></script>
+	<script src="../../ui/jquery.ui.draggable.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	#draggable, #draggable2, #draggable3 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
+	</style>
+	<script>
+	$(function() {
+		$( "#draggable" ).draggable({ scroll: true });
+		$( "#draggable2" ).draggable({ scroll: true, scrollSensitivity: 100 });
+		$( "#draggable3" ).draggable({ scroll: true, scrollSpeed: 100 });
+	});
+	</script>
+</head>
+<body>
+
+<div id="draggable" class="ui-widget-content">
+	<p>Scroll set to true, default settings</p>
+</div>
+
+<div id="draggable2" class="ui-widget-content">
+	<p>scrollSensitivity set to 100</p>
+</div>
+
+<div id="draggable3" class="ui-widget-content">
+	<p>scrollSpeed set to 100</p>
+</div>
+
+<div style='height: 5000px; width: 1px;'></div>
+
+<div class="demo-description">
+<p>Automatically scroll the document when the draggable is moved beyond the viewport. Set the <code>scroll</code> option to true to enable auto-scrolling, and fine-tune when scrolling is triggered and its speed with the <code>scrollSensitivity</code> and <code>scrollSpeed</code> options.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/draggable/snap-to.html b/apps/it/static/js/ui/demos/draggable/snap-to.html
new file mode 100644
index 0000000..8b2a887
--- /dev/null
+++ b/apps/it/static/js/ui/demos/draggable/snap-to.html
@@ -0,0 +1,61 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Draggable - Snap to element or grid</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mouse.js"></script>
+	<script src="../../ui/jquery.ui.draggable.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	.draggable { width: 90px; height: 80px; padding: 5px; float: left; margin: 0 10px 10px 0; font-size: .9em; }
+	.ui-widget-header p, .ui-widget-content p { margin: 0; }
+	#snaptarget { height: 140px; }
+	</style>
+	<script>
+	$(function() {
+		$( "#draggable" ).draggable({ snap: true });
+		$( "#draggable2" ).draggable({ snap: ".ui-widget-header" });
+		$( "#draggable3" ).draggable({ snap: ".ui-widget-header", snapMode: "outer" });
+		$( "#draggable4" ).draggable({ grid: [ 20, 20 ] });
+		$( "#draggable5" ).draggable({ grid: [ 80, 80 ] });
+	});
+	</script>
+</head>
+<body>
+
+<div id="snaptarget" class="ui-widget-header">
+	<p>I'm a snap target</p>
+</div>
+
+<br style="clear:both" />
+
+<div id="draggable" class="draggable ui-widget-content">
+	<p>Default (snap: true), snaps to all other draggable elements</p>
+</div>
+
+<div id="draggable2" class="draggable ui-widget-content">
+	<p>I only snap to the big box</p>
+</div>
+
+<div id="draggable3" class="draggable ui-widget-content">
+	<p>I only snap to the outer edges of the big box</p>
+</div>
+
+<div id="draggable4" class="draggable ui-widget-content">
+	<p>I snap to a 20 x 20 grid</p>
+</div>
+
+<div id="draggable5" class="draggable ui-widget-content">
+	<p>I snap to a 80 x 80 grid</p>
+</div>
+
+<div class="demo-description">
+<p>Snap the draggable to the inner or outer boundaries of a DOM element.  Use the <code>snap</code>, <code>snapMode</code> (inner, outer, both), and <code>snapTolerance</code> (distance in pixels the draggable must be from the element when snapping is invoked) options. </p>
+<p>Or snap the draggable to a grid.  Set the dimensions of grid cells (height and width in pixels) with the <code>grid</code> option.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/draggable/sortable.html b/apps/it/static/js/ui/demos/draggable/sortable.html
new file mode 100644
index 0000000..09bb6c4
--- /dev/null
+++ b/apps/it/static/js/ui/demos/draggable/sortable.html
@@ -0,0 +1,50 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Draggable + Sortable</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mouse.js"></script>
+	<script src="../../ui/jquery.ui.draggable.js"></script>
+	<script src="../../ui/jquery.ui.sortable.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
+	li { margin: 5px; padding: 5px; width: 150px; }
+	</style>
+	<script>
+	$(function() {
+		$( "#sortable" ).sortable({
+			revert: true
+		});
+		$( "#draggable" ).draggable({
+			connectToSortable: "#sortable",
+			helper: "clone",
+			revert: "invalid"
+		});
+		$( "ul, li" ).disableSelection();
+	});
+	</script>
+</head>
+<body>
+
+<ul>
+	<li id="draggable" class="ui-state-highlight">Drag me down</li>
+</ul>
+
+<ul id="sortable">
+	<li class="ui-state-default">Item 1</li>
+	<li class="ui-state-default">Item 2</li>
+	<li class="ui-state-default">Item 3</li>
+	<li class="ui-state-default">Item 4</li>
+	<li class="ui-state-default">Item 5</li>
+</ul>
+
+<div class="demo-description">
+<p>Draggables are built to interact seamlessly with <a href="http://jqueryui.com/sortable">sortables</a>.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/draggable/visual-feedback.html b/apps/it/static/js/ui/demos/draggable/visual-feedback.html
new file mode 100644
index 0000000..253a26d
--- /dev/null
+++ b/apps/it/static/js/ui/demos/draggable/visual-feedback.html
@@ -0,0 +1,70 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Draggable - Visual feedback</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mouse.js"></script>
+	<script src="../../ui/jquery.ui.draggable.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	#draggable, #draggable2, #draggable3, #set div { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
+	#draggable, #draggable2, #draggable3 { margin-bottom:20px; }
+	#set { clear:both; float:left; width: 368px; height: 120px; }
+	p { clear:both; margin:0; padding:1em 0; }
+	</style>
+	<script>
+	$(function() {
+		$( "#draggable" ).draggable({ helper: "original" });
+		$( "#draggable2" ).draggable({ opacity: 0.7, helper: "clone" });
+		$( "#draggable3" ).draggable({
+			cursor: "move",
+			cursorAt: { top: -12, left: -20 },
+			helper: function( event ) {
+				return $( "<div class='ui-widget-header'>I'm a custom helper</div>" );
+			}
+		});
+		$( "#set div" ).draggable({ stack: "#set div" });
+	});
+	</script>
+</head>
+<body>
+
+<h3 class="docs">With helpers:</h3>
+
+<div id="draggable" class="ui-widget-content">
+	<p>Original</p>
+</div>
+
+<div id="draggable2" class="ui-widget-content">
+	<p>Semi-transparent clone</p>
+</div>
+
+<div id="draggable3" class="ui-widget-content">
+	<p>Custom helper (in combination with cursorAt)</p>
+</div>
+
+<h3 class="docs">Stacked:</h3>
+<div id="set">
+	<div class="ui-widget-content">
+		<p>We are draggables..</p>
+	</div>
+
+	<div class="ui-widget-content">
+		<p>..whose z-indexes are controlled automatically..</p>
+	</div>
+
+	<div class="ui-widget-content">
+		<p>..with the stack option.</p>
+	</div>
+</div>
+
+<div class="demo-description">
+<p>Provide feedback to users as they drag an object in the form of a helper. The <code>helper</code> option accepts the values 'original' (the draggable object moves with the cursor), 'clone' (a duplicate of the draggable moves with the cursor), or a function that returns a DOM element (that element is shown near the cursor during drag). Control the helper's transparency with the <code>opacity</code> option.</p>
+<p>To clarify which draggable is in play, bring the draggable in motion to front. Use the <code>zIndex</code> option to set a higher z-index for the helper, if in play, or use the <code>stack</code> option to ensure that the last item dragged will appear on top of others in the same group on drag stop.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/droppable/accepted-elements.html b/apps/it/static/js/ui/demos/droppable/accepted-elements.html
new file mode 100644
index 0000000..51a8f93
--- /dev/null
+++ b/apps/it/static/js/ui/demos/droppable/accepted-elements.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Droppable - Accept</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mouse.js"></script>
+	<script src="../../ui/jquery.ui.draggable.js"></script>
+	<script src="../../ui/jquery.ui.droppable.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
+	#draggable, #draggable-nonvalid { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
+	</style>
+	<script>
+	$(function() {
+		$( "#draggable, #draggable-nonvalid" ).draggable();
+		$( "#droppable" ).droppable({
+			accept: "#draggable",
+			activeClass: "ui-state-hover",
+			hoverClass: "ui-state-active",
+			drop: function( event, ui ) {
+				$( this )
+					.addClass( "ui-state-highlight" )
+					.find( "p" )
+						.html( "Dropped!" );
+			}
+		});
+	});
+	</script>
+</head>
+<body>
+
+<div id="draggable-nonvalid" class="ui-widget-content">
+	<p>I'm draggable but can't be dropped</p>
+</div>
+
+<div id="draggable" class="ui-widget-content">
+	<p>Drag me to my target</p>
+</div>
+
+<div id="droppable" class="ui-widget-header">
+	<p>accept: '#draggable'</p>
+</div>
+
+<div class="demo-description">
+<p>Specify using the <code>accept</code> option which element (or group of elements) is accepted by the target droppable.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/droppable/default.html b/apps/it/static/js/ui/demos/droppable/default.html
new file mode 100644
index 0000000..56a7072
--- /dev/null
+++ b/apps/it/static/js/ui/demos/droppable/default.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Droppable - Default functionality</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mouse.js"></script>
+	<script src="../../ui/jquery.ui.draggable.js"></script>
+	<script src="../../ui/jquery.ui.droppable.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	#draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
+	#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
+	</style>
+	<script>
+	$(function() {
+		$( "#draggable" ).draggable();
+		$( "#droppable" ).droppable({
+			drop: function( event, ui ) {
+				$( this )
+					.addClass( "ui-state-highlight" )
+					.find( "p" )
+						.html( "Dropped!" );
+			}
+		});
+	});
+	</script>
+</head>
+<body>
+
+<div id="draggable" class="ui-widget-content">
+	<p>Drag me to my target</p>
+</div>
+
+<div id="droppable" class="ui-widget-header">
+	<p>Drop here</p>
+</div>
+
+<div class="demo-description">
+<p>Enable any DOM element to be droppable, a target for draggable elements.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/droppable/images/high_tatras.jpg b/apps/it/static/js/ui/demos/droppable/images/high_tatras.jpg
new file mode 100644
index 0000000..5723680
--- /dev/null
+++ b/apps/it/static/js/ui/demos/droppable/images/high_tatras.jpg
diff --git a/apps/it/static/js/ui/demos/droppable/images/high_tatras2.jpg b/apps/it/static/js/ui/demos/droppable/images/high_tatras2.jpg
new file mode 100644
index 0000000..1acad3a
--- /dev/null
+++ b/apps/it/static/js/ui/demos/droppable/images/high_tatras2.jpg
diff --git a/apps/it/static/js/ui/demos/droppable/images/high_tatras2_min.jpg b/apps/it/static/js/ui/demos/droppable/images/high_tatras2_min.jpg
new file mode 100644
index 0000000..493e082
--- /dev/null
+++ b/apps/it/static/js/ui/demos/droppable/images/high_tatras2_min.jpg
diff --git a/apps/it/static/js/ui/demos/droppable/images/high_tatras3.jpg b/apps/it/static/js/ui/demos/droppable/images/high_tatras3.jpg
new file mode 100644
index 0000000..e158b1a
--- /dev/null
+++ b/apps/it/static/js/ui/demos/droppable/images/high_tatras3.jpg
diff --git a/apps/it/static/js/ui/demos/droppable/images/high_tatras3_min.jpg b/apps/it/static/js/ui/demos/droppable/images/high_tatras3_min.jpg
new file mode 100644
index 0000000..4aa96b0
--- /dev/null
+++ b/apps/it/static/js/ui/demos/droppable/images/high_tatras3_min.jpg
diff --git a/apps/it/static/js/ui/demos/droppable/images/high_tatras4.jpg b/apps/it/static/js/ui/demos/droppable/images/high_tatras4.jpg
new file mode 100644
index 0000000..da4124d
--- /dev/null
+++ b/apps/it/static/js/ui/demos/droppable/images/high_tatras4.jpg
diff --git a/apps/it/static/js/ui/demos/droppable/images/high_tatras4_min.jpg b/apps/it/static/js/ui/demos/droppable/images/high_tatras4_min.jpg
new file mode 100644
index 0000000..794dbdf
--- /dev/null
+++ b/apps/it/static/js/ui/demos/droppable/images/high_tatras4_min.jpg
diff --git a/apps/it/static/js/ui/demos/droppable/images/high_tatras_min.jpg b/apps/it/static/js/ui/demos/droppable/images/high_tatras_min.jpg
new file mode 100644
index 0000000..51e0cde
--- /dev/null
+++ b/apps/it/static/js/ui/demos/droppable/images/high_tatras_min.jpg
diff --git a/apps/it/static/js/ui/demos/droppable/index.html b/apps/it/static/js/ui/demos/droppable/index.html
new file mode 100644
index 0000000..deca6e4
--- /dev/null
+++ b/apps/it/static/js/ui/demos/droppable/index.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Droppable Demos</title>
+</head>
+<body>
+
+<ul>
+	<li><a href="default.html">Default functionality</a></li>
+	<li><a href="accepted-elements.html">Accepted elements</a></li>
+	<li><a href="propagation.html">Prevent propagation</a></li>
+	<li><a href="visual-feedback.html">Visual feedback</a></li>
+	<li><a href="revert.html">Revert draggable position</a></li>
+	<li><a href="shopping-cart.html">Shopping Cart</a></li>
+	<li><a href="photo-manager.html">Simple photo manager</a></li>
+</ul>
+
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/droppable/photo-manager.html b/apps/it/static/js/ui/demos/droppable/photo-manager.html
new file mode 100644
index 0000000..08e2950
--- /dev/null
+++ b/apps/it/static/js/ui/demos/droppable/photo-manager.html
@@ -0,0 +1,182 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Droppable - Simple photo manager</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.position.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mouse.js"></script>
+	<script src="../../ui/jquery.ui.draggable.js"></script>
+	<script src="../../ui/jquery.ui.droppable.js"></script>
+	<script src="../../ui/jquery.ui.resizable.js"></script>
+	<script src="../../ui/jquery.ui.dialog.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	#gallery { float: left; width: 65%; min-height: 12em; }
+	.gallery.custom-state-active { background: #eee; }
+	.gallery li { float: left; width: 96px; padding: 0.4em; margin: 0 0.4em 0.4em 0; text-align: center; }
+	.gallery li h5 { margin: 0 0 0.4em; cursor: move; }
+	.gallery li a { float: right; }
+	.gallery li a.ui-icon-zoomin { float: left; }
+	.gallery li img { width: 100%; cursor: move; }
+
+	#trash { float: right; width: 32%; min-height: 18em; padding: 1%; }
+	#trash h4 { line-height: 16px; margin: 0 0 0.4em; }
+	#trash h4 .ui-icon { float: left; }
+	#trash .gallery h5 { display: none; }
+	</style>
+	<script>
+	$(function() {
+		// there's the gallery and the trash
+		var $gallery = $( "#gallery" ),
+			$trash = $( "#trash" );
+
+		// let the gallery items be draggable
+		$( "li", $gallery ).draggable({
+			cancel: "a.ui-icon", // clicking an icon won't initiate dragging
+			revert: "invalid", // when not dropped, the item will revert back to its initial position
+			containment: "document",
+			helper: "clone",
+			cursor: "move"
+		});
+
+		// let the trash be droppable, accepting the gallery items
+		$trash.droppable({
+			accept: "#gallery > li",
+			activeClass: "ui-state-highlight",
+			drop: function( event, ui ) {
+				deleteImage( ui.draggable );
+			}
+		});
+
+		// let the gallery be droppable as well, accepting items from the trash
+		$gallery.droppable({
+			accept: "#trash li",
+			activeClass: "custom-state-active",
+			drop: function( event, ui ) {
+				recycleImage( ui.draggable );
+			}
+		});
+
+		// image deletion function
+		var recycle_icon = "<a href='link/to/recycle/script/when/we/have/js/off' title='Recycle this image' class='ui-icon ui-icon-refresh'>Recycle image</a>";
+		function deleteImage( $item ) {
+			$item.fadeOut(function() {
+				var $list = $( "ul", $trash ).length ?
+					$( "ul", $trash ) :
+					$( "<ul class='gallery ui-helper-reset'/>" ).appendTo( $trash );
+
+				$item.find( "a.ui-icon-trash" ).remove();
+				$item.append( recycle_icon ).appendTo( $list ).fadeIn(function() {
+					$item
+						.animate({ width: "48px" })
+						.find( "img" )
+							.animate({ height: "36px" });
+				});
+			});
+		}
+
+		// image recycle function
+		var trash_icon = "<a href='link/to/trash/script/when/we/have/js/off' title='Delete this image' class='ui-icon ui-icon-trash'>Delete image</a>";
+		function recycleImage( $item ) {
+			$item.fadeOut(function() {
+				$item
+					.find( "a.ui-icon-refresh" )
+						.remove()
+					.end()
+					.css( "width", "96px")
+					.append( trash_icon )
+					.find( "img" )
+						.css( "height", "72px" )
+					.end()
+					.appendTo( $gallery )
+					.fadeIn();
+			});
+		}
+
+		// image preview function, demonstrating the ui.dialog used as a modal window
+		function viewLargerImage( $link ) {
+			var src = $link.attr( "href" ),
+				title = $link.siblings( "img" ).attr( "alt" ),
+				$modal = $( "img[src$='" + src + "']" );
+
+			if ( $modal.length ) {
+				$modal.dialog( "open" );
+			} else {
+				var img = $( "<img alt='" + title + "' width='384' height='288' style='display: none; padding: 8px;' />" )
+					.attr( "src", src ).appendTo( "body" );
+				setTimeout(function() {
+					img.dialog({
+						title: title,
+						width: 400,
+						modal: true
+					});
+				}, 1 );
+			}
+		}
+
+		// resolve the icons behavior with event delegation
+		$( "ul.gallery > li" ).click(function( event ) {
+			var $item = $( this ),
+				$target = $( event.target );
+
+			if ( $target.is( "a.ui-icon-trash" ) ) {
+				deleteImage( $item );
+			} else if ( $target.is( "a.ui-icon-zoomin" ) ) {
+				viewLargerImage( $target );
+			} else if ( $target.is( "a.ui-icon-refresh" ) ) {
+				recycleImage( $item );
+			}
+
+			return false;
+		});
+	});
+	</script>
+</head>
+<body>
+
+<div class="ui-widget ui-helper-clearfix">
+
+<ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">
+	<li class="ui-widget-content ui-corner-tr">
+		<h5 class="ui-widget-header">High Tatras</h5>
+		<img src="images/high_tatras_min.jpg" alt="The peaks of High Tatras" width="96" height="72" />
+		<a href="images/high_tatras.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
+		<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
+	</li>
+	<li class="ui-widget-content ui-corner-tr">
+		<h5 class="ui-widget-header">High Tatras 2</h5>
+		<img src="images/high_tatras2_min.jpg" alt="The chalet at the Green mountain lake" width="96" height="72" />
+		<a href="images/high_tatras2.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
+		<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
+	</li>
+	<li class="ui-widget-content ui-corner-tr">
+		<h5 class="ui-widget-header">High Tatras 3</h5>
+		<img src="images/high_tatras3_min.jpg" alt="Planning the ascent" width="96" height="72" />
+		<a href="images/high_tatras3.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
+		<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
+	</li>
+	<li class="ui-widget-content ui-corner-tr">
+		<h5 class="ui-widget-header">High Tatras 4</h5>
+		<img src="images/high_tatras4_min.jpg" alt="On top of Kozi kopka" width="96" height="72" />
+		<a href="images/high_tatras4.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
+		<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
+	</li>
+</ul>
+
+<div id="trash" class="ui-widget-content ui-state-default">
+	<h4 class="ui-widget-header"><span class="ui-icon ui-icon-trash">Trash</span> Trash</h4>
+</div>
+
+</div>
+
+<div class="demo-description">
+<p>You can delete an image either by dragging it to the Trash or by clicking the trash icon.</p>
+<p>You can "recycle" an image by dragging it back to the gallery or by clicking the recycle icon.</p>
+<p>You can view larger image by clicking the zoom icon. jQuery UI dialog widget is used for the modal window.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/droppable/propagation.html b/apps/it/static/js/ui/demos/droppable/propagation.html
new file mode 100644
index 0000000..247ac1c
--- /dev/null
+++ b/apps/it/static/js/ui/demos/droppable/propagation.html
@@ -0,0 +1,73 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Droppable - Prevent propagation</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mouse.js"></script>
+	<script src="../../ui/jquery.ui.draggable.js"></script>
+	<script src="../../ui/jquery.ui.droppable.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	#draggable { width: 100px; height: 40px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
+	#droppable, #droppable2 { width: 230px; height: 120px; padding: 0.5em; float: left; margin: 10px; }
+	#droppable-inner, #droppable2-inner { width: 170px; height: 60px; padding: 0.5em; float: left; margin: 10px; }
+	</style>
+	<script>
+	$(function() {
+		$( "#draggable" ).draggable();
+
+		$( "#droppable, #droppable-inner" ).droppable({
+			activeClass: "ui-state-hover",
+			hoverClass: "ui-state-active",
+			drop: function( event, ui ) {
+				$( this )
+					.addClass( "ui-state-highlight" )
+					.find( "> p" )
+						.html( "Dropped!" );
+				return false;
+			}
+		});
+
+		$( "#droppable2, #droppable2-inner" ).droppable({
+			greedy: true,
+			activeClass: "ui-state-hover",
+			hoverClass: "ui-state-active",
+			drop: function( event, ui ) {
+				$( this )
+					.addClass( "ui-state-highlight" )
+					.find( "> p" )
+						.html( "Dropped!" );
+			}
+		});
+	});
+	</script>
+</head>
+<body>
+
+<div id="draggable" class="ui-widget-content">
+	<p>Drag me to my target</p>
+</div>
+
+<div id="droppable" class="ui-widget-header">
+	<p>Outer droppable</p>
+	<div id="droppable-inner" class="ui-widget-header">
+		<p>Inner droppable (not greedy)</p>
+	</div>
+</div>
+
+<div id="droppable2" class="ui-widget-header">
+	<p>Outer droppable</p>
+	<div id="droppable2-inner" class="ui-widget-header">
+		<p>Inner droppable (greedy)</p>
+	</div>
+</div>
+
+<div class="demo-description">
+<p>When working with nested droppables &#8212; for example, you may have an editable directory structure displayed as a tree, with folder and document nodes &#8212; the <code>greedy</code> option set to true prevents event propagation when a draggable is dropped on a child node (droppable).</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/droppable/revert.html b/apps/it/static/js/ui/demos/droppable/revert.html
new file mode 100644
index 0000000..5b54101
--- /dev/null
+++ b/apps/it/static/js/ui/demos/droppable/revert.html
@@ -0,0 +1,54 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Droppable - Revert draggable position</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mouse.js"></script>
+	<script src="../../ui/jquery.ui.draggable.js"></script>
+	<script src="../../ui/jquery.ui.droppable.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	#draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
+	#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
+	</style>
+	<script>
+	$(function() {
+		$( "#draggable" ).draggable({ revert: "valid" });
+		$( "#draggable2" ).draggable({ revert: "invalid" });
+
+		$( "#droppable" ).droppable({
+			activeClass: "ui-state-default",
+			hoverClass: "ui-state-hover",
+			drop: function( event, ui ) {
+				$( this )
+					.addClass( "ui-state-highlight" )
+					.find( "p" )
+						.html( "Dropped!" );
+			}
+		});
+	});
+	</script>
+</head>
+<body>
+
+<div id="draggable" class="ui-widget-content">
+	<p>I revert when I'm dropped</p>
+</div>
+
+<div id="draggable2" class="ui-widget-content">
+	<p>I revert when I'm not dropped</p>
+</div>
+
+<div id="droppable" class="ui-widget-header">
+	<p>Drop me here</p>
+</div>
+
+<div class="demo-description">
+<p>Return the draggable (or it's helper) to its original location when dragging stops with the boolean <code>revert</code> option set on the draggable.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/droppable/shopping-cart.html b/apps/it/static/js/ui/demos/droppable/shopping-cart.html
new file mode 100644
index 0000000..aadaefe
--- /dev/null
+++ b/apps/it/static/js/ui/demos/droppable/shopping-cart.html
@@ -0,0 +1,94 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Droppable - Shopping Cart Demo</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mouse.js"></script>
+	<script src="../../ui/jquery.ui.draggable.js"></script>
+	<script src="../../ui/jquery.ui.droppable.js"></script>
+	<script src="../../ui/jquery.ui.sortable.js"></script>
+	<script src="../../ui/jquery.ui.accordion.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	h1 { padding: .2em; margin: 0; }
+	#products { float:left; width: 500px; margin-right: 2em; }
+	#cart { width: 200px; float: left; margin-top: 1em; }
+	/* style the list to maximize the droppable hitarea */
+	#cart ol { margin: 0; padding: 1em 0 1em 3em; }
+	</style>
+	<script>
+	$(function() {
+		$( "#catalog" ).accordion();
+		$( "#catalog li" ).draggable({
+			appendTo: "body",
+			helper: "clone"
+		});
+		$( "#cart ol" ).droppable({
+			activeClass: "ui-state-default",
+			hoverClass: "ui-state-hover",
+			accept: ":not(.ui-sortable-helper)",
+			drop: function( event, ui ) {
+				$( this ).find( ".placeholder" ).remove();
+				$( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
+			}
+		}).sortable({
+			items: "li:not(.placeholder)",
+			sort: function() {
+				// gets added unintentionally by droppable interacting with sortable
+				// using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
+				$( this ).removeClass( "ui-state-default" );
+			}
+		});
+	});
+	</script>
+</head>
+<body>
+
+<div id="products">
+	<h1 class="ui-widget-header">Products</h1>
+	<div id="catalog">
+		<h2><a href="#">T-Shirts</a></h2>
+		<div>
+			<ul>
+				<li>Lolcat Shirt</li>
+				<li>Cheezeburger Shirt</li>
+				<li>Buckit Shirt</li>
+			</ul>
+		</div>
+		<h2><a href="#">Bags</a></h2>
+		<div>
+			<ul>
+				<li>Zebra Striped</li>
+				<li>Black Leather</li>
+				<li>Alligator Leather</li>
+			</ul>
+		</div>
+		<h2><a href="#">Gadgets</a></h2>
+		<div>
+			<ul>
+				<li>iPhone</li>
+				<li>iPod</li>
+				<li>iPad</li>
+			</ul>
+		</div>
+	</div>
+</div>
+
+<div id="cart">
+	<h1 class="ui-widget-header">Shopping Cart</h1>
+	<div class="ui-widget-content">
+		<ol>
+			<li class="placeholder">Add your items here</li>
+		</ol>
+	</div>
+</div>
+
+<div class="demo-description">
+<p>Demonstrate how to use an accordion to structure products into a catalog and make use of drag and drop for adding them to a shopping cart, where they are sortable.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/droppable/visual-feedback.html b/apps/it/static/js/ui/demos/droppable/visual-feedback.html
new file mode 100644
index 0000000..f105373
--- /dev/null
+++ b/apps/it/static/js/ui/demos/droppable/visual-feedback.html
@@ -0,0 +1,72 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Droppable - Visual feedback</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mouse.js"></script>
+	<script src="../../ui/jquery.ui.draggable.js"></script>
+	<script src="../../ui/jquery.ui.droppable.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	#draggable, #draggable2 { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
+	#droppable, #droppable2 { width: 120px; height: 120px; padding: 0.5em; float: left; margin: 10px; }
+	h3 { clear: left; }
+	</style>
+	<script>
+	$(function() {
+		$( "#draggable" ).draggable();
+		$( "#droppable" ).droppable({
+			hoverClass: "ui-state-hover",
+			drop: function( event, ui ) {
+				$( this )
+					.addClass( "ui-state-highlight" )
+					.find( "p" )
+						.html( "Dropped!" );
+			}
+		});
+
+		$( "#draggable2" ).draggable();
+		$( "#droppable2" ).droppable({
+			accept: "#draggable2",
+			activeClass: "ui-state-default",
+			drop: function( event, ui ) {
+				$( this )
+					.addClass( "ui-state-highlight" )
+					.find( "p" )
+						.html( "Dropped!" );
+			}
+		});
+	});
+	</script>
+</head>
+<body>
+
+<h3>Feedback on hover:</h3>
+
+<div id="draggable" class="ui-widget-content">
+	<p>Drag me to my target</p>
+</div>
+
+<div id="droppable" class="ui-widget-header">
+	<p>Drop here</p>
+</div>
+
+<h3>Feedback on activating draggable:</h3>
+
+<div id="draggable2" class="ui-widget-content">
+	<p>Drag me to my target</p>
+</div>
+
+<div id="droppable2" class="ui-widget-header">
+	<p>Drop here</p>
+</div>
+
+<div class="demo-description">
+<p>Change the droppable's appearance on hover, or when the droppable is active (an acceptable draggable is dropped on it).  Use the <code>hoverClass</code> or <code>activeClass</code> options to specify respective classes.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/effect/default.html b/apps/it/static/js/ui/demos/effect/default.html
new file mode 100644
index 0000000..2a4aea3
--- /dev/null
+++ b/apps/it/static/js/ui/demos/effect/default.html
@@ -0,0 +1,102 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Effects - Effect demo</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.effect.js"></script>
+	<script src="../../ui/jquery.ui.effect-blind.js"></script>
+	<script src="../../ui/jquery.ui.effect-bounce.js"></script>
+	<script src="../../ui/jquery.ui.effect-clip.js"></script>
+	<script src="../../ui/jquery.ui.effect-drop.js"></script>
+	<script src="../../ui/jquery.ui.effect-explode.js"></script>
+	<script src="../../ui/jquery.ui.effect-fade.js"></script>
+	<script src="../../ui/jquery.ui.effect-fold.js"></script>
+	<script src="../../ui/jquery.ui.effect-highlight.js"></script>
+	<script src="../../ui/jquery.ui.effect-pulsate.js"></script>
+	<script src="../../ui/jquery.ui.effect-scale.js"></script>
+	<script src="../../ui/jquery.ui.effect-shake.js"></script>
+	<script src="../../ui/jquery.ui.effect-slide.js"></script>
+	<script src="../../ui/jquery.ui.effect-transfer.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+		.toggler { width: 500px; height: 200px; position: relative; }
+		#button { padding: .5em 1em; text-decoration: none; }
+		#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
+		#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
+		.ui-effects-transfer { border: 2px dotted gray; }
+	</style>
+	<script>
+	$(function() {
+		// run the currently selected effect
+		function runEffect() {
+			// get effect type from
+			var selectedEffect = $( "#effectTypes" ).val();
+
+			// most effect types need no options passed by default
+			var options = {};
+			// some effects have required parameters
+			if ( selectedEffect === "scale" ) {
+				options = { percent: 0 };
+			} else if ( selectedEffect === "transfer" ) {
+				options = { to: "#button", className: "ui-effects-transfer" };
+			} else if ( selectedEffect === "size" ) {
+				options = { to: { width: 200, height: 60 } };
+			}
+
+			// run the effect
+			$( "#effect" ).effect( selectedEffect, options, 500, callback );
+		};
+
+		// callback function to bring a hidden box back
+		function callback() {
+			setTimeout(function() {
+				$( "#effect" ).removeAttr( "style" ).hide().fadeIn();
+			}, 1000 );
+		};
+
+		// set effect from select menu value
+		$( "#button" ).click(function() {
+			runEffect();
+			return false;
+		});
+	});
+	</script>
+</head>
+<body>
+
+<div class="toggler">
+	<div id="effect" class="ui-widget-content ui-corner-all">
+		<h3 class="ui-widget-header ui-corner-all">Effect</h3>
+		<p>
+			Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
+		</p>
+	</div>
+</div>
+
+<select name="effects" id="effectTypes">
+	<option value="blind">Blind</option>
+	<option value="bounce">Bounce</option>
+	<option value="clip">Clip</option>
+	<option value="drop">Drop</option>
+	<option value="explode">Explode</option>
+	<option value="fade">Fade</option>
+	<option value="fold">Fold</option>
+	<option value="highlight">Highlight</option>
+	<option value="puff">Puff</option>
+	<option value="pulsate">Pulsate</option>
+	<option value="scale">Scale</option>
+	<option value="shake">Shake</option>
+	<option value="size">Size</option>
+	<option value="slide">Slide</option>
+	<option value="transfer">Transfer</option>
+</select>
+
+<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>
+
+<div class="demo-description">
+<p>Click the button above to show the effect.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/effect/easing.html b/apps/it/static/js/ui/demos/effect/easing.html
new file mode 100644
index 0000000..bd0d830
--- /dev/null
+++ b/apps/it/static/js/ui/demos/effect/easing.html
@@ -0,0 +1,102 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Effects - Easing demo</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.effect.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	.graph {
+		float: left;
+		margin-left: 10px;
+	}
+	</style>
+	<script>
+	$(function() {
+		if ( !$( "<canvas>" )[0].getContext ) {
+			$( "<div>" ).text(
+				"Your browser doesn't support canvas, which is required for this demo."
+			).appendTo( "#graphs" );
+			return;
+		}
+
+		var i = 0,
+			width = 100,
+			height = 100;
+
+		$.each( $.easing, function( name, impl ) {
+			var graph = $( "<div>" ).addClass( "graph" ).appendTo( "#graphs" ),
+				text = $( "<div>" ).text( ++i + ". " + name ).appendTo( graph ),
+				wrap = $( "<div>" ).appendTo( graph ).css( 'overflow', 'hidden' ),
+				canvas = $( "<canvas>" ).appendTo( wrap )[ 0 ];
+
+			canvas.width = width;
+			canvas.height = height;
+			var drawHeight = height * 0.8,
+				cradius = 10;
+				ctx = canvas.getContext( "2d" );
+			ctx.fillStyle = "black";
+
+			// draw background
+			ctx.beginPath();
+			ctx.moveTo( cradius, 0 );
+			ctx.quadraticCurveTo( 0, 0, 0, cradius );
+			ctx.lineTo( 0, height - cradius );
+			ctx.quadraticCurveTo( 0, height, cradius, height );
+			ctx.lineTo( width - cradius, height );
+			ctx.quadraticCurveTo( width, height, width, height - cradius );
+			ctx.lineTo( width, 0 );
+			ctx.lineTo( cradius, 0 );
+			ctx.fill();
+
+			// draw bottom line
+			ctx.strokeStyle = "#555";
+			ctx.beginPath();
+			ctx.moveTo( width * 0.1, drawHeight + .5 );
+			ctx.lineTo( width * 0.9, drawHeight + .5 );
+			ctx.stroke();
+
+			// draw top line
+			ctx.strokeStyle = "#555";
+			ctx.beginPath();
+			ctx.moveTo( width * 0.1, drawHeight * .3 - .5 );
+			ctx.lineTo( width * 0.9, drawHeight * .3 - .5 );
+			ctx.stroke();
+
+			// plot easing
+			ctx.strokeStyle = "white";
+			ctx.beginPath();
+			ctx.lineWidth = 2;
+			ctx.moveTo( width * 0.1, drawHeight );
+			$.each( new Array( width ), function( position ) {
+				var state = position / width,
+					val = impl( state, position, 0, 1, width );
+				ctx.lineTo( position * 0.8 + width * 0.1,
+					drawHeight - drawHeight * val * 0.7 );
+			});
+			ctx.stroke();
+
+			// animate on click
+			graph.click(function() {
+				wrap
+					.animate( { height: "hide" }, 2000, name )
+					.delay( 800 )
+					.animate( { height: "show" }, 2000, name );
+			});
+
+			graph.width( width ).height( height + text.height() + 10 );
+		});
+	});
+	</script>
+</head>
+<body>
+
+<div id="graphs"></div>
+
+<div class="demo-description">
+<p><strong>All easings provided by jQuery UI are drawn above, using a HTML canvas element</strong>. Click a diagram to see the easing in action.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/effect/index.html b/apps/it/static/js/ui/demos/effect/index.html
new file mode 100644
index 0000000..5da6bc6
--- /dev/null
+++ b/apps/it/static/js/ui/demos/effect/index.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Effects Demos</title>
+</head>
+<body>
+
+<ul>
+	<li><a href="default.html">Effect showcase</a></li>
+	<li><a href="easing.html">Easing showcase</a></li>
+</ul>
+
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/hide/default.html b/apps/it/static/js/ui/demos/hide/default.html
new file mode 100644
index 0000000..3cacd2a
--- /dev/null
+++ b/apps/it/static/js/ui/demos/hide/default.html
@@ -0,0 +1,95 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Effects - Hide Demo</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.effect.js"></script>
+	<script src="../../ui/jquery.ui.effect-blind.js"></script>
+	<script src="../../ui/jquery.ui.effect-bounce.js"></script>
+	<script src="../../ui/jquery.ui.effect-clip.js"></script>
+	<script src="../../ui/jquery.ui.effect-drop.js"></script>
+	<script src="../../ui/jquery.ui.effect-explode.js"></script>
+	<script src="../../ui/jquery.ui.effect-fold.js"></script>
+	<script src="../../ui/jquery.ui.effect-highlight.js"></script>
+	<script src="../../ui/jquery.ui.effect-pulsate.js"></script>
+	<script src="../../ui/jquery.ui.effect-scale.js"></script>
+	<script src="../../ui/jquery.ui.effect-shake.js"></script>
+	<script src="../../ui/jquery.ui.effect-slide.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	.toggler { width: 500px; height: 200px; }
+	#button { padding: .5em 1em; text-decoration: none; }
+	#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
+	#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
+	</style>
+	<script>
+	$(function() {
+		// run the currently selected effect
+		function runEffect() {
+			// get effect type from
+			var selectedEffect = $( "#effectTypes" ).val();
+
+			// most effect types need no options passed by default
+			var options = {};
+			// some effects have required parameters
+			if ( selectedEffect === "scale" ) {
+				options = { percent: 0 };
+			} else if ( selectedEffect === "size" ) {
+				options = { to: { width: 200, height: 60 } };
+			}
+
+			// run the effect
+			$( "#effect" ).hide( selectedEffect, options, 1000, callback );
+		};
+
+		// callback function to bring a hidden box back
+		function callback() {
+			setTimeout(function() {
+				$( "#effect" ).removeAttr( "style" ).hide().fadeIn();
+			}, 1000 );
+		};
+
+		// set effect from select menu value
+		$( "#button" ).click(function() {
+			runEffect();
+			return false;
+		});
+	});
+	</script>
+</head>
+<body>
+
+<div class="toggler">
+	<div id="effect" class="ui-widget-content ui-corner-all">
+		<h3 class="ui-widget-header ui-corner-all">Hide</h3>
+		<p>
+			Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
+		</p>
+	</div>
+</div>
+
+<select name="effects" id="effectTypes">
+	<option value="blind">Blind</option>
+	<option value="bounce">Bounce</option>
+	<option value="clip">Clip</option>
+	<option value="drop">Drop</option>
+	<option value="explode">Explode</option>
+	<option value="fold">Fold</option>
+	<option value="highlight">Highlight</option>
+	<option value="puff">Puff</option>
+	<option value="pulsate">Pulsate</option>
+	<option value="scale">Scale</option>
+	<option value="shake">Shake</option>
+	<option value="size">Size</option>
+	<option value="slide">Slide</option>
+</select>
+
+<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>
+
+<div class="demo-description">
+<p>Click the button above to preview the effect.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/hide/index.html b/apps/it/static/js/ui/demos/hide/index.html
new file mode 100644
index 0000000..3620fd7
--- /dev/null
+++ b/apps/it/static/js/ui/demos/hide/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Effects Demos</title>
+</head>
+<body>
+
+<ul>
+	<li><a href="default.html">Default functionality</a></li>
+</ul>
+
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/images/calendar.gif b/apps/it/static/js/ui/demos/images/calendar.gif
new file mode 100644
index 0000000..d0abaa7
--- /dev/null
+++ b/apps/it/static/js/ui/demos/images/calendar.gif
diff --git a/apps/it/static/js/ui/demos/images/demo-config-on-tile.gif b/apps/it/static/js/ui/demos/images/demo-config-on-tile.gif
new file mode 100644
index 0000000..a96b5bf
--- /dev/null
+++ b/apps/it/static/js/ui/demos/images/demo-config-on-tile.gif
diff --git a/apps/it/static/js/ui/demos/images/demo-config-on.gif b/apps/it/static/js/ui/demos/images/demo-config-on.gif
new file mode 100644
index 0000000..e3b6d7c
--- /dev/null
+++ b/apps/it/static/js/ui/demos/images/demo-config-on.gif
diff --git a/apps/it/static/js/ui/demos/images/demo-spindown-closed.gif b/apps/it/static/js/ui/demos/images/demo-spindown-closed.gif
new file mode 100644
index 0000000..ad4bd37
--- /dev/null
+++ b/apps/it/static/js/ui/demos/images/demo-spindown-closed.gif
diff --git a/apps/it/static/js/ui/demos/images/demo-spindown-open.gif b/apps/it/static/js/ui/demos/images/demo-spindown-open.gif
new file mode 100644
index 0000000..e1c60aa
--- /dev/null
+++ b/apps/it/static/js/ui/demos/images/demo-spindown-open.gif
diff --git a/apps/it/static/js/ui/demos/images/icon-docs-info.gif b/apps/it/static/js/ui/demos/images/icon-docs-info.gif
new file mode 100644
index 0000000..ea6d2be
--- /dev/null
+++ b/apps/it/static/js/ui/demos/images/icon-docs-info.gif
diff --git a/apps/it/static/js/ui/demos/images/pbar-ani.gif b/apps/it/static/js/ui/demos/images/pbar-ani.gif
new file mode 100644
index 0000000..cb59a04
--- /dev/null
+++ b/apps/it/static/js/ui/demos/images/pbar-ani.gif
diff --git a/apps/it/static/js/ui/demos/index.html b/apps/it/static/js/ui/demos/index.html
new file mode 100644
index 0000000..4739d76
--- /dev/null
+++ b/apps/it/static/js/ui/demos/index.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Demos</title>
+</head>
+<body>
+
+<ul>
+	<li><a href="accordion/">accordion</a></li>
+	<li><a href="addClass/">addClass</a></li>
+	<li><a href="animate/">animate</a></li>
+	<li><a href="autocomplete/">autocomplete</a></li>
+	<li><a href="button/">button</a></li>
+	<li><a href="datepicker/">datepicker</a></li>
+	<li><a href="dialog/">dialog</a></li>
+	<li><a href="draggable/">draggable</a></li>
+	<li><a href="droppable/">droppable</a></li>
+	<li><a href="effect/">effect</a></li>
+	<li><a href="hide/">hide</a></li>
+	<li><a href="menu/">menu</a></li>
+	<li><a href="position/">position</a></li>
+	<li><a href="progressbar/">progressbar</a></li>
+	<li><a href="removeClass/">removeClass</a></li>
+	<li><a href="resizable/">resizable</a></li>
+	<li><a href="selectable/">selectable</a></li>
+	<li><a href="show/">show</a></li>
+	<li><a href="slider/">slider</a></li>
+	<li><a href="sortable/">sortable</a></li>
+	<li><a href="spinner/">spinner</a></li>
+	<li><a href="switchClass/">switchClass</a></li>
+	<li><a href="tabs/">tabs</a></li>
+	<li><a href="toggle/">toggle</a></li>
+	<li><a href="toggleClass/">toggleClass</a></li>
+	<li><a href="tooltip/">tooltip</a></li>
+	<li><a href="widget/">widget</a></li>
+</ul>
+
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/menu/default.html b/apps/it/static/js/ui/demos/menu/default.html
new file mode 100644
index 0000000..d44b18b
--- /dev/null
+++ b/apps/it/static/js/ui/demos/menu/default.html
@@ -0,0 +1,67 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Menu - Default functionality</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.position.js"></script>
+	<script src="../../ui/jquery.ui.menu.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$(function() {
+		$( "#menu" ).menu();
+	});
+	</script>
+	<style>
+	.ui-menu { width: 150px; }
+	</style>
+</head>
+<body>
+
+<ul id="menu">
+	<li class="ui-state-disabled"><a href="#">Aberdeen</a></li>
+	<li><a href="#">Ada</a></li>
+	<li><a href="#">Adamsville</a></li>
+	<li><a href="#">Addyston</a></li>
+	<li>
+		<a href="#">Delphi</a>
+		<ul>
+			<li class="ui-state-disabled"><a href="#">Ada</a></li>
+			<li><a href="#">Saarland</a></li>
+			<li><a href="#">Salzburg</a></li>
+		</ul>
+	</li>
+	<li><a href="#">Saarland</a></li>
+	<li>
+		<a href="#">Salzburg</a>
+		<ul>
+			<li>
+				<a href="#">Delphi</a>
+				<ul>
+					<li><a href="#">Ada</a></li>
+					<li><a href="#">Saarland</a></li>
+					<li><a href="#">Salzburg</a></li>
+				</ul>
+			</li>
+			<li>
+				<a href="#">Delphi</a>
+				<ul>
+					<li><a href="#">Ada</a></li>
+					<li><a href="#">Saarland</a></li>
+					<li><a href="#">Salzburg</a></li>
+				</ul>
+			</li>
+			<li><a href="#">Perch</a></li>
+		</ul>
+	</li>
+	<li class="ui-state-disabled"><a href="#">Amesville</a></li>
+</ul>
+
+<div class="demo-description">
+<p>A menu with the default configuration, disabled items and nested menus. A list is transformed, adding theming, mouse and keyboard navigation support. Try to tab to the menu then use the cursor keys to navigate.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/menu/icons.html b/apps/it/static/js/ui/demos/menu/icons.html
new file mode 100644
index 0000000..daa66c3
--- /dev/null
+++ b/apps/it/static/js/ui/demos/menu/icons.html
@@ -0,0 +1,44 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Menu - Icons</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.position.js"></script>
+	<script src="../../ui/jquery.ui.menu.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$(function() {
+		$( "#menu" ).menu();
+	});
+	</script>
+	<style>
+	.ui-menu { width: 150px; }
+	</style>
+</head>
+<body>
+
+<ul id="menu">
+	<li><a href="#"><span class="ui-icon ui-icon-disk"></span>Save</a></li>
+	<li><a href="#"><span class="ui-icon ui-icon-zoomin"></span>Zoom In</a></li>
+	<li><a href="#"><span class="ui-icon ui-icon-zoomout"></span>Zoom Out</a></li>
+	<li class="ui-state-disabled"><a href="#"><span class="ui-icon ui-icon-print"></span>Print...</a></li>
+	<li>
+		<a href="#">Playback</a>
+		<ul>
+			<li><a href="#"><span class="ui-icon ui-icon-seek-start"></span>Prev</a></li>
+			<li><a href="#"><span class="ui-icon ui-icon-stop"></span>Stop</a></li>
+			<li><a href="#"><span class="ui-icon ui-icon-play"></span>Play</a></li>
+			<li><a href="#"><span class="ui-icon ui-icon-seek-end"></span>Next</a></li>
+		</ul>
+	</li>
+</ul>
+
+<div class="demo-description">
+<p>A menu with the default configuration, showing how to use a menu with icons.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/menu/index.html b/apps/it/static/js/ui/demos/menu/index.html
new file mode 100644
index 0000000..40e9e0b
--- /dev/null
+++ b/apps/it/static/js/ui/demos/menu/index.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Menu Demos</title>
+</head>
+<body>
+
+<ul>
+	<li><a href="default.html">Default functionality</a></li>
+	<li><a href="icons.html">Icons</a></li>
+</ul>
+
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/position/cycler.html b/apps/it/static/js/ui/demos/position/cycler.html
new file mode 100644
index 0000000..e33e3be
--- /dev/null
+++ b/apps/it/static/js/ui/demos/position/cycler.html
@@ -0,0 +1,107 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Position - Image Cycler</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.position.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	body {
+		margin: 0;
+	}
+	#container {
+		overflow: hidden;
+		position: relative;
+		height: 400px;
+	}
+
+	img {
+		position: absolute;
+	}
+	</style>
+	<script>
+	$(function() {
+		// TODO refactor into a widget and get rid of these plugin methods
+		$.fn.left = function( using ) {
+			return this.position({
+				my: "right middle",
+				at: "left+25 middle",
+				of: "#container",
+				collision: "none",
+				using: using
+			});
+		};
+		$.fn.right = function( using ) {
+			return this.position({
+				my: "left middle",
+				at: "right-25 middle",
+				of: "#container",
+				collision: "none",
+				using: using
+			});
+		};
+		$.fn.center = function( using ) {
+			return this.position({
+				my: "center middle",
+				at: "center middle",
+				of: "#container",
+				using: using
+			});
+		};
+
+		$( "img:eq(0)" ).left();
+		$( "img:eq(1)" ).center();
+		$( "img:eq(2)" ).right();
+
+		function animate( to ) {
+			$( this ).stop( true, false ).animate( to );
+		}
+		function next( event ) {
+			event.preventDefault();
+			$( "img:eq(2)" ).center( animate );
+			$( "img:eq(1)" ).left( animate );
+			$( "img:eq(0)" ).right().appendTo( "#container" );
+		}
+		function previous( event ) {
+			event.preventDefault();
+			$( "img:eq(0)" ).center( animate );
+			$( "img:eq(1)" ).right( animate );
+			$( "img:eq(2)" ).left().prependTo( "#container" );
+		}
+		$( "#previous" ).click( previous );
+		$( "#next" ).click( next );
+
+		$( "img" ).click(function( event ) {
+			$( "img" ).index( this ) === 0 ? previous( event ) : next( event );
+		});
+
+		$( window ).resize(function() {
+			$( "img:eq(0)" ).left( animate );
+			$( "img:eq(1)" ).center( animate );
+			$( "img:eq(2)" ).right( animate );
+		});
+	});
+	</script>
+</head>
+<body>
+
+<div id="container">
+	<img src="images/earth.jpg" width="458" height="308" alt="earth">
+	<img src="images/flight.jpg" width="512" height="307" alt="flight">
+	<img src="images/rocket.jpg" width="300" height="353" alt="rocket">
+
+	<a id="previous" href="#">Previous</a>
+	<a id="next" href="#">Next</a>
+</div>
+
+<div class="demo-description">
+<p>A photoviewer prototype using Position to place images at the center, left and right and cycle them.
+<br>Use the links at the top to cycle, or click on the images on the left and right.
+<br>Note how the images are repositioned when resizing the window.
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/position/default.html b/apps/it/static/js/ui/demos/position/default.html
new file mode 100644
index 0000000..6248c38
--- /dev/null
+++ b/apps/it/static/js/ui/demos/position/default.html
@@ -0,0 +1,137 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Position - Default functionality</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mouse.js"></script>
+	<script src="../../ui/jquery.ui.draggable.js"></script>
+	<script src="../../ui/jquery.ui.position.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	#parent {
+		width: 60%;
+		height: 40px;
+		margin: 10px auto;
+		padding: 5px;
+		border: 1px solid #777;
+		background-color: #fbca93;
+		text-align: center;
+	}
+	.positionable {
+		position: absolute;
+		display: block;
+		right: 0;
+		bottom: 0;
+		background-color: #bcd5e6;
+		text-align: center;
+	}
+	#positionable1 {
+		width: 75px;
+		height: 75px;
+	}
+	#positionable2 {
+		width: 120px;
+		height: 40px;
+	}
+	select, input {
+		margin-left: 15px;
+	}
+	</style>
+	<script>
+	$(function() {
+		function position() {
+			$( ".positionable" ).position({
+				of: $( "#parent" ),
+				my: $( "#my_horizontal" ).val() + " " + $( "#my_vertical" ).val(),
+				at: $( "#at_horizontal" ).val() + " " + $( "#at_vertical" ).val(),
+				collision: $( "#collision_horizontal" ).val() + " " + $( "#collision_vertical" ).val()
+			});
+		}
+
+		$( ".positionable" ).css( "opacity", 0.5 );
+
+		$( "select, input" ).bind( "click keyup change", position );
+
+		$( "#parent" ).draggable({
+			drag: position
+		});
+
+		position();
+	});
+	</script>
+</head>
+<body>
+
+<div id="parent">
+	<p>
+	This is the position parent element.
+	</p>
+</div>
+
+<div class="positionable" id="positionable1">
+	<p>
+	to position
+	</p>
+</div>
+
+<div class="positionable" id="positionable2">
+	<p>
+	to position 2
+	</p>
+</div>
+
+<div style="padding: 20px; margin-top: 75px;">
+	position...
+	<div style="padding-bottom: 20px;">
+		<b>my:</b>
+		<select id="my_horizontal">
+			<option value="left">left</option>
+			<option value="center">center</option>
+			<option value="right">right</option>
+		</select>
+		<select id="my_vertical">
+			<option value="top">top</option>
+			<option value="center">center</option>
+			<option value="bottom">bottom</option>
+		</select>
+	</div>
+	<div style="padding-bottom: 20px;">
+		<b>at:</b>
+		<select id="at_horizontal">
+			<option value="left">left</option>
+			<option value="center">center</option>
+			<option value="right">right</option>
+		</select>
+		<select id="at_vertical">
+			<option value="top">top</option>
+			<option value="center">center</option>
+			<option value="bottom">bottom</option>
+		</select>
+	</div>
+	<div style="padding-bottom: 20px;">
+		<b>collision:</b>
+		<select id="collision_horizontal">
+			<option value="flip">flip</option>
+			<option value="fit">fit</option>
+			<option value="flipfit">flipfit</option>
+			<option value="none">none</option>
+		</select>
+		<select id="collision_vertical">
+			<option value="flip">flip</option>
+			<option value="fit">fit</option>
+			<option value="flipfit">flipfit</option>
+			<option value="none">none</option>
+		</select>
+	</div>
+</div>
+
+<div class="demo-description">
+<p>Use the form controls to configure the positioning, or drag the positioned element to modify its offset.
+<br>Drag around the parent element to see collision detection in action.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/position/images/earth.jpg b/apps/it/static/js/ui/demos/position/images/earth.jpg
new file mode 100644
index 0000000..e5477f7
--- /dev/null
+++ b/apps/it/static/js/ui/demos/position/images/earth.jpg
diff --git a/apps/it/static/js/ui/demos/position/images/flight.jpg b/apps/it/static/js/ui/demos/position/images/flight.jpg
new file mode 100644
index 0000000..362bd1a
--- /dev/null
+++ b/apps/it/static/js/ui/demos/position/images/flight.jpg
diff --git a/apps/it/static/js/ui/demos/position/images/rocket.jpg b/apps/it/static/js/ui/demos/position/images/rocket.jpg
new file mode 100644
index 0000000..9c0495c
--- /dev/null
+++ b/apps/it/static/js/ui/demos/position/images/rocket.jpg
diff --git a/apps/it/static/js/ui/demos/position/index.html b/apps/it/static/js/ui/demos/position/index.html
new file mode 100644
index 0000000..a7b7548
--- /dev/null
+++ b/apps/it/static/js/ui/demos/position/index.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Position Demo</title>
+</head>
+<body>
+
+<ul>
+	<li><a href="default.html">Default functionality</a></li>
+	<li><a href="cycler.html">Cycling images</a></li>
+</ul>
+
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/progressbar/default.html b/apps/it/static/js/ui/demos/progressbar/default.html
new file mode 100644
index 0000000..3c66fdf
--- /dev/null
+++ b/apps/it/static/js/ui/demos/progressbar/default.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Progressbar - Default functionality</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.progressbar.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$(function() {
+		$( "#progressbar" ).progressbar({
+			value: 37
+		});
+	});
+	</script>
+</head>
+<body>
+
+<div id="progressbar"></div>
+
+<div class="demo-description">
+<p>Default determinate progress bar.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/progressbar/images/pbar-ani.gif b/apps/it/static/js/ui/demos/progressbar/images/pbar-ani.gif
new file mode 100644
index 0000000..cb59a04
--- /dev/null
+++ b/apps/it/static/js/ui/demos/progressbar/images/pbar-ani.gif
diff --git a/apps/it/static/js/ui/demos/progressbar/indeterminate.html b/apps/it/static/js/ui/demos/progressbar/indeterminate.html
new file mode 100644
index 0000000..7d070c2
--- /dev/null
+++ b/apps/it/static/js/ui/demos/progressbar/indeterminate.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Progressbar - Indeterminate Value</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.progressbar.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$(function() {
+		$( "#progressbar" ).progressbar({
+			value: false
+		});
+		$( "button" ).on( "click", function( event ) {
+			var target = $( event.target ),
+				progressbar = $( "#progressbar" ),
+				progressbarValue = progressbar.find( ".ui-progressbar-value" );
+
+			if ( target.is( "#numButton" ) ) {
+				progressbar.progressbar( "option", {
+					value: Math.floor( Math.random() * 100 )
+				});
+			} else if ( target.is( "#colorButton" ) ) {
+				progressbarValue.css({
+					"background": '#' + Math.floor( Math.random() * 16777215 ).toString( 16 )
+				});
+			} else if ( target.is( "#falseButton" ) ) {
+				progressbar.progressbar( "option", "value", false );
+			}
+		});
+	});
+	</script>
+	<style>
+	#progressbar .ui-progressbar-value {
+		background-color: #ccc;
+	}
+	</style>
+</head>
+<body>
+
+<div id="progressbar"></div>
+<button id="numButton">Random Value - Determinate</button>
+<button id="falseButton">Indeterminate</button>
+<button id="colorButton">Random Color</button>
+
+<div class="demo-description">
+<p>Indeterminate progress bar and switching between determinate and indeterminate styles.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/progressbar/index.html b/apps/it/static/js/ui/demos/progressbar/index.html
new file mode 100644
index 0000000..cfc054a
--- /dev/null
+++ b/apps/it/static/js/ui/demos/progressbar/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Progressbar Demos</title>
+</head>
+<body>
+
+<ul>
+	<li><a href="default.html">Default functionality</a></li>
+	<li><a href="indeterminate.html">Indeterminate</a></li>
+	<li><a href="label.html">Custom Labels</a></li>
+</ul>
+
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/progressbar/label.html b/apps/it/static/js/ui/demos/progressbar/label.html
new file mode 100644
index 0000000..06a5707
--- /dev/null
+++ b/apps/it/static/js/ui/demos/progressbar/label.html
@@ -0,0 +1,61 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Progressbar - Custom Label</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.progressbar.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	.ui-progressbar {
+		position: relative;
+	}
+	.progress-label {
+		position: absolute;
+		left: 50%;
+		top: 4px;
+		font-weight: bold;
+		text-shadow: 1px 1px 0 #fff;
+	}
+	</style>
+	<script>
+	$(function() {
+		var progressbar = $( "#progressbar" ),
+			progressLabel = $( ".progress-label" );
+
+		progressbar.progressbar({
+			value: false,
+			change: function() {
+				progressLabel.text( progressbar.progressbar( "value" ) + "%" );
+			},
+			complete: function() {
+				progressLabel.text( "Complete!" );
+			}
+		});
+
+		function progress() {
+			var val = progressbar.progressbar( "value" ) || 0;
+
+			progressbar.progressbar( "value", val + 1 );
+
+			if ( val < 99 ) {
+				setTimeout( progress, 100 );
+			}
+		}
+
+		setTimeout( progress, 3000 );
+	});
+	</script>
+</head>
+<body>
+
+<div id="progressbar"><div class="progress-label">Loading...</div></div>
+
+<div class="demo-description">
+<p>Custom updated label demo.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/removeClass/default.html b/apps/it/static/js/ui/demos/removeClass/default.html
new file mode 100644
index 0000000..cbd788a
--- /dev/null
+++ b/apps/it/static/js/ui/demos/removeClass/default.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Effects - removeClass Demo</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.effect.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	.toggler { width: 500px; height: 200px; position: relative; }
+	#button { padding: .5em 1em; text-decoration: none; }
+	#effect { position: relative;  width: 240px;  padding: 1em;  letter-spacing: 0; font-size: 1.2em; border: 1px solid #000; background: #eee; color: #333; }
+	.newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; }
+	</style>
+	<script>
+	$(function() {
+		$( "#button" ).click(function() {
+			$( "#effect" ).removeClass( "newClass", 1000, callback );
+			return false;
+		});
+
+		function callback() {
+			setTimeout(function() {
+				$( "#effect" ).addClass( "newClass" );
+			}, 1500 );
+		}
+	});
+	</script>
+</head>
+<body>
+
+<div class="toggler">
+	<div id="effect" class="newClass ui-corner-all">
+		Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede.
+	</div>
+</div>
+
+<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>
+
+<div class="demo-description">
+<p>Click the button above to preview the effect.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/removeClass/index.html b/apps/it/static/js/ui/demos/removeClass/index.html
new file mode 100644
index 0000000..3620fd7
--- /dev/null
+++ b/apps/it/static/js/ui/demos/removeClass/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Effects Demos</title>
+</head>
+<body>
+
+<ul>
+	<li><a href="default.html">Default functionality</a></li>
+</ul>
+
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/resizable/animate.html b/apps/it/static/js/ui/demos/resizable/animate.html
new file mode 100644
index 0000000..789a22f
--- /dev/null
+++ b/apps/it/static/js/ui/demos/resizable/animate.html
@@ -0,0 +1,36 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Resizable - Animate</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mouse.js"></script>
+	<script src="../../ui/jquery.ui.resizable.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	#resizable { width: 150px; height: 150px; padding: 0.5em; }
+	#resizable h3 { text-align: center; margin: 0; }
+	.ui-resizable-helper { border: 1px dotted gray; }
+	</style>
+	<script>
+	$(function() {
+		$( "#resizable" ).resizable({
+			animate: true
+		});
+	});
+	</script>
+</head>
+<body>
+
+<div id="resizable" class="ui-widget-content">
+	<h3 class="ui-widget-header">Animate</h3>
+</div>
+
+<div class="demo-description">
+<p>Animate the resize action using the <code>animate</code> option (boolean). When this option is set to true, drag the outline to the desired location; the element animates to that size on drag stop.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/resizable/aspect-ratio.html b/apps/it/static/js/ui/demos/resizable/aspect-ratio.html
new file mode 100644
index 0000000..e5cf5ba
--- /dev/null
+++ b/apps/it/static/js/ui/demos/resizable/aspect-ratio.html
@@ -0,0 +1,35 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Resizable - Preserve aspect ratio</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mouse.js"></script>
+	<script src="../../ui/jquery.ui.resizable.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	#resizable { width: 160px; height: 90px; padding: 0.5em; }
+	#resizable h3 { text-align: center; margin: 0; }
+	</style>
+	<script>
+	$(function() {
+		$( "#resizable" ).resizable({
+			aspectRatio: 16 / 9
+		});
+	});
+	</script>
+</head>
+<body>
+
+<div id="resizable" class="ui-widget-content">
+	<h3 class="ui-widget-header">Preserve aspect ratio</h3>
+</div>
+
+<div class="demo-description">
+<p>Maintain the existing aspect ratio or set a new one to constrain the proportions on resize. Set the <code>aspectRatio</code> option to true, and optionally pass in a new ratio (i.e., 4/3)</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/resizable/constrain-area.html b/apps/it/static/js/ui/demos/resizable/constrain-area.html
new file mode 100644
index 0000000..c062752
--- /dev/null
+++ b/apps/it/static/js/ui/demos/resizable/constrain-area.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Resizable - Constrain resize area</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mouse.js"></script>
+	<script src="../../ui/jquery.ui.resizable.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	#container { width: 300px; height: 300px; }
+	#container h3 { text-align: center; margin: 0; margin-bottom: 10px; }
+	#resizable { background-position: top left; width: 150px; height: 150px; }
+	#resizable, #container { padding: 0.5em; }
+	</style>
+	<script>
+	$(function() {
+		$( "#resizable" ).resizable({
+			containment: "#container"
+		});
+	});
+	</script>
+</head>
+<body>
+
+<div id="container" class="ui-widget-content">
+	<h3 class="ui-widget-header">Containment</h3>
+	<div id="resizable" class="ui-state-active">
+		<h3 class="ui-widget-header">Resizable</h3>
+	</div>
+</div>
+
+<div class="demo-description">
+<p>Define the boundaries of the resizable area. Use the <code>containment</code> option to specify a parent DOM element or a jQuery selector, like 'document.'</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/resizable/default.html b/apps/it/static/js/ui/demos/resizable/default.html
new file mode 100644
index 0000000..ab5deb4
--- /dev/null
+++ b/apps/it/static/js/ui/demos/resizable/default.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Resizable - Default functionality</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mouse.js"></script>
+	<script src="../../ui/jquery.ui.resizable.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	#resizable { width: 150px; height: 150px; padding: 0.5em; }
+	#resizable h3 { text-align: center; margin: 0; }
+	</style>
+	<script>
+	$(function() {
+		$( "#resizable" ).resizable();
+	});
+	</script>
+</head>
+<body>
+
+<div id="resizable" class="ui-widget-content">
+	<h3 class="ui-widget-header">Resizable</h3>
+</div>
+
+<div class="demo-description">
+<p>Enable any DOM element to be resizable.  With the cursor grab the right or bottom border and drag to the desired width or height.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/resizable/delay-start.html b/apps/it/static/js/ui/demos/resizable/delay-start.html
new file mode 100644
index 0000000..6ecd3b6
--- /dev/null
+++ b/apps/it/static/js/ui/demos/resizable/delay-start.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Resizable - Delay start</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mouse.js"></script>
+	<script src="../../ui/jquery.ui.resizable.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	#resizable, #resizable2 { width: 150px; height: 150px; padding: 0.5em; }
+	#resizable h3, #resizable2 h3 { text-align: center; margin: 0; }
+	</style>
+	<script>
+	$(function() {
+		$( "#resizable" ).resizable({
+			delay: 1000
+		});
+
+		$( "#resizable2" ).resizable({
+			distance: 40
+		});
+	});
+	</script>
+</head>
+<body>
+
+<h3 class="docs">Time delay (ms):</h3>
+<div id="resizable" class="ui-widget-content">
+	<h3 class="ui-widget-header">Time</h3>
+</div>
+
+<h3 class="docs">Distance delay (px):</h3>
+<div id="resizable2" class="ui-widget-content">
+	<h3 class="ui-widget-header">Distance</h3>
+</div>
+
+<div class="demo-description">
+<p>Delay the start of resizing for a number of milliseconds with the <code>delay</code> option; prevent resizing until the cursor is held down and dragged a specifed number of pixels with the <code>distance</code> option.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/resizable/helper.html b/apps/it/static/js/ui/demos/resizable/helper.html
new file mode 100644
index 0000000..b2d14d3
--- /dev/null
+++ b/apps/it/static/js/ui/demos/resizable/helper.html
@@ -0,0 +1,36 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Resizable - Helper</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mouse.js"></script>
+	<script src="../../ui/jquery.ui.resizable.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	#resizable { width: 150px; height: 150px; padding: 0.5em; }
+	#resizable h3 { text-align: center; margin: 0; }
+	.ui-resizable-helper { border: 2px dotted #00F; }
+	</style>
+	<script>
+	$(function() {
+		$( "#resizable" ).resizable({
+			helper: "ui-resizable-helper"
+		});
+	});
+	</script>
+</head>
+<body>
+
+<div id="resizable" class="ui-widget-content">
+	<h3 class="ui-widget-header">Helper</h3>
+</div>
+
+<div class="demo-description">
+<p>Display only an outline of the element while resizing by setting the <code>helper</code> option to a CSS class.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/resizable/index.html b/apps/it/static/js/ui/demos/resizable/index.html
new file mode 100644
index 0000000..7c626e2
--- /dev/null
+++ b/apps/it/static/js/ui/demos/resizable/index.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Resizable Demos</title>
+</head>
+<body>
+
+<ul>
+	<li><a href="default.html">Default functionality</a></li>
+	<li><a href="aspect-ratio.html">Preserve aspect ratio</a></li>
+	<li><a href="max-min.html">Maximum / minimum size</a></li>
+	<li><a href="constrain-area.html">Constrain resize area</a></li>
+	<li><a href="delay-start.html">Delay start</a></li>
+	<li><a href="snap-to-grid.html">Snap to grid</a></li>
+	<li><a href="visual-feedback.html">Visual feedback</a></li>
+	<li><a href="synchronous-resize.html">Synchronous resize</a></li>
+	<li><a href="animate.html">Animate</a></li>
+	<li><a href="helper.html">Resize Helper</a></li>
+	<li><a href="textarea.html">Textarea</a></li>
+</ul>
+
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/resizable/max-min.html b/apps/it/static/js/ui/demos/resizable/max-min.html
new file mode 100644
index 0000000..521b305
--- /dev/null
+++ b/apps/it/static/js/ui/demos/resizable/max-min.html
@@ -0,0 +1,38 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Resizable - Maximum / minimum size</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mouse.js"></script>
+	<script src="../../ui/jquery.ui.resizable.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	#resizable { width: 200px; height: 150px; padding: 5px; }
+	#resizable h3 { text-align: center; margin: 0; }
+	</style>
+	<script>
+	$(function() {
+		$( "#resizable" ).resizable({
+			maxHeight: 250,
+			maxWidth: 350,
+			minHeight: 150,
+			minWidth: 200
+		});
+	});
+	</script>
+</head>
+<body>
+
+<div id="resizable" class="ui-widget-content">
+	<h3 class="ui-widget-header">Resize larger / smaller</h3>
+</div>
+
+<div class="demo-description">
+<p>Limit the resizable element to a maximum or minimum height or width using the <code>maxHeight</code>, <code>maxWidth</code>, <code>minHeight</code>, and <code>minWidth</code> options.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/resizable/snap-to-grid.html b/apps/it/static/js/ui/demos/resizable/snap-to-grid.html
new file mode 100644
index 0000000..b55ec73
--- /dev/null
+++ b/apps/it/static/js/ui/demos/resizable/snap-to-grid.html
@@ -0,0 +1,35 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Resizable - Snap to grid</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mouse.js"></script>
+	<script src="../../ui/jquery.ui.resizable.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	#resizable { width: 150px; height: 150px; padding: 0.5em; }
+	#resizable h3 { text-align: center; margin: 0; }
+	</style>
+	<script>
+	$(function() {
+		$( "#resizable" ).resizable({
+			grid: 50
+		});
+	});
+	</script>
+</head>
+<body>
+
+<div id="resizable" class="ui-widget-content">
+	<h3 class="ui-widget-header">Grid</h3>
+</div>
+
+<div class="demo-description">
+<p>Snap the resizable element to a grid.  Set the dimensions of grid cells (height and width in pixels) with the <code>grid</code> option.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/resizable/synchronous-resize.html b/apps/it/static/js/ui/demos/resizable/synchronous-resize.html
new file mode 100644
index 0000000..a4e24a4
--- /dev/null
+++ b/apps/it/static/js/ui/demos/resizable/synchronous-resize.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Resizable - Synchronous resize</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mouse.js"></script>
+	<script src="../../ui/jquery.ui.resizable.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	#resizable { background-position: top left; }
+	#resizable, #also { width: 150px; height: 120px; padding: 0.5em; }
+	#resizable h3, #also h3 { text-align: center; margin: 0; }
+	#also { margin-top: 1em; }
+	</style>
+	<script>
+	$(function() {
+		$( "#resizable" ).resizable({
+			alsoResize: "#also"
+		});
+		$( "#also" ).resizable();
+	});
+	</script>
+</head>
+<body>
+
+<div id="resizable" class="ui-widget-header">
+	<h3 class="ui-state-active">Resize</h3>
+</div>
+
+<div id="also" class="ui-widget-content">
+	<h3 class="ui-widget-header">will also resize</h3>
+</div>
+
+<div class="demo-description">
+<p>Resize multiple elements simultaneously by clicking and dragging the sides of one.  Pass a shared selector into the <code>alsoResize</code> option.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/resizable/textarea.html b/apps/it/static/js/ui/demos/resizable/textarea.html
new file mode 100644
index 0000000..e82dae3
--- /dev/null
+++ b/apps/it/static/js/ui/demos/resizable/textarea.html
@@ -0,0 +1,34 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Resizable - Textarea</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mouse.js"></script>
+	<script src="../../ui/jquery.ui.resizable.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	.ui-resizable-se {
+		bottom: 17px;
+	}
+	</style>
+	<script>
+	$(function() {
+		$( "#resizable" ).resizable({
+			handles: "se"
+		});
+	});
+	</script>
+</head>
+<body>
+
+<textarea id="resizable" rows="5" cols="20"></textarea>
+
+<div class="demo-description">
+<p>Display only an outline of the element while resizing by setting the <code>helper</code> option to a CSS class.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/resizable/visual-feedback.html b/apps/it/static/js/ui/demos/resizable/visual-feedback.html
new file mode 100644
index 0000000..3532ba3
--- /dev/null
+++ b/apps/it/static/js/ui/demos/resizable/visual-feedback.html
@@ -0,0 +1,36 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Resizable - Visual feedback</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mouse.js"></script>
+	<script src="../../ui/jquery.ui.resizable.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	#resizable { width: 150px; height: 150px; padding: 0.5em; }
+	#resizable h3 { text-align: center; margin: 0; }
+	.ui-resizable-ghost { border: 1px dotted gray; }
+	</style>
+	<script>
+	$(function() {
+		$( "#resizable" ).resizable({
+			ghost: true
+		});
+	});
+	</script>
+</head>
+<body>
+
+<div id="resizable" class="ui-widget-content">
+	<h3 class="ui-widget-header">Ghost</h3>
+</div>
+
+<div class="demo-description">
+<p>Instead of showing the actual element during resize, set the <code>ghost</code> option to true to show a semi-transparent part of the element.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/selectable/default.html b/apps/it/static/js/ui/demos/selectable/default.html
new file mode 100644
index 0000000..369b3ab
--- /dev/null
+++ b/apps/it/static/js/ui/demos/selectable/default.html
@@ -0,0 +1,43 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Selectable - Default functionality</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mouse.js"></script>
+	<script src="../../ui/jquery.ui.selectable.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+
+	<style>
+	#feedback { font-size: 1.4em; }
+	#selectable .ui-selecting { background: #FECA40; }
+	#selectable .ui-selected { background: #F39814; color: white; }
+	#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
+	#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
+	</style>
+	<script>
+	$(function() {
+		$( "#selectable" ).selectable();
+	});
+	</script>
+</head>
+<body>
+
+<ol id="selectable">
+	<li class="ui-widget-content">Item 1</li>
+	<li class="ui-widget-content">Item 2</li>
+	<li class="ui-widget-content">Item 3</li>
+	<li class="ui-widget-content">Item 4</li>
+	<li class="ui-widget-content">Item 5</li>
+	<li class="ui-widget-content">Item 6</li>
+	<li class="ui-widget-content">Item 7</li>
+</ol>
+
+<div class="demo-description">
+<p>Enable a DOM element (or group of elements) to be selectable. Draw a box with your cursor to select items. Hold down the Ctrl key to make multiple non-adjacent selections. </p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/selectable/display-grid.html b/apps/it/static/js/ui/demos/selectable/display-grid.html
new file mode 100644
index 0000000..0445cb3
--- /dev/null
+++ b/apps/it/static/js/ui/demos/selectable/display-grid.html
@@ -0,0 +1,48 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Selectable - Display as grid</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mouse.js"></script>
+	<script src="../../ui/jquery.ui.selectable.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+
+	<style>
+	#feedback { font-size: 1.4em; }
+	#selectable .ui-selecting { background: #FECA40; }
+	#selectable .ui-selected { background: #F39814; color: white; }
+	#selectable { list-style-type: none; margin: 0; padding: 0; width: 450px; }
+	#selectable li { margin: 3px; padding: 1px; float: left; width: 100px; height: 80px; font-size: 4em; text-align: center; }
+	</style>
+	<script>
+	$(function() {
+		$( "#selectable" ).selectable();
+	});
+	</script>
+</head>
+<body>
+
+<ol id="selectable">
+	<li class="ui-state-default">1</li>
+	<li class="ui-state-default">2</li>
+	<li class="ui-state-default">3</li>
+	<li class="ui-state-default">4</li>
+	<li class="ui-state-default">5</li>
+	<li class="ui-state-default">6</li>
+	<li class="ui-state-default">7</li>
+	<li class="ui-state-default">8</li>
+	<li class="ui-state-default">9</li>
+	<li class="ui-state-default">10</li>
+	<li class="ui-state-default">11</li>
+	<li class="ui-state-default">12</li>
+</ol>
+
+<div class="demo-description">
+<p>To arrange selectable items as a grid, give them identical dimensions and float them using CSS.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/selectable/index.html b/apps/it/static/js/ui/demos/selectable/index.html
new file mode 100644
index 0000000..a82830c
--- /dev/null
+++ b/apps/it/static/js/ui/demos/selectable/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Selectable Demos</title>
+</head>
+<body>
+
+<ul>
+	<li><a href="default.html">Default functionality</a></li>
+	<li><a href="serialize.html">Serialize</a></li>
+	<li><a href="display-grid.html">Display as grid</a></li>
+</ul>
+
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/selectable/serialize.html b/apps/it/static/js/ui/demos/selectable/serialize.html
new file mode 100644
index 0000000..38edde9
--- /dev/null
+++ b/apps/it/static/js/ui/demos/selectable/serialize.html
@@ -0,0 +1,54 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Selectable - Serialize</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mouse.js"></script>
+	<script src="../../ui/jquery.ui.selectable.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+
+	<style>
+	#feedback { font-size: 1.4em; }
+	#selectable .ui-selecting { background: #FECA40; }
+	#selectable .ui-selected { background: #F39814; color: white; }
+	#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
+	#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
+	</style>
+	<script>
+	$(function() {
+		$( "#selectable" ).selectable({
+			stop: function() {
+				var result = $( "#select-result" ).empty();
+				$( ".ui-selected", this ).each(function() {
+					var index = $( "#selectable li" ).index( this );
+					result.append( " #" + ( index + 1 ) );
+				});
+			}
+		});
+	});
+	</script>
+</head>
+<body>
+
+<p id="feedback">
+<span>You've selected:</span> <span id="select-result">none</span>.
+</p>
+
+<ol id="selectable">
+	<li class="ui-widget-content">Item 1</li>
+	<li class="ui-widget-content">Item 2</li>
+	<li class="ui-widget-content">Item 3</li>
+	<li class="ui-widget-content">Item 4</li>
+	<li class="ui-widget-content">Item 5</li>
+	<li class="ui-widget-content">Item 6</li>
+</ol>
+
+<div class="demo-description">
+<p>Write a function that fires on the <code>stop</code> event to collect the index values of selected items.  Present values as feedback, or pass as a data string.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/show/default.html b/apps/it/static/js/ui/demos/show/default.html
new file mode 100644
index 0000000..dc3abd2
--- /dev/null
+++ b/apps/it/static/js/ui/demos/show/default.html
@@ -0,0 +1,97 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Effects - Show Demo</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.effect.js"></script>
+	<script src="../../ui/jquery.ui.effect-blind.js"></script>
+	<script src="../../ui/jquery.ui.effect-bounce.js"></script>
+	<script src="../../ui/jquery.ui.effect-clip.js"></script>
+	<script src="../../ui/jquery.ui.effect-drop.js"></script>
+	<script src="../../ui/jquery.ui.effect-explode.js"></script>
+	<script src="../../ui/jquery.ui.effect-fold.js"></script>
+	<script src="../../ui/jquery.ui.effect-highlight.js"></script>
+	<script src="../../ui/jquery.ui.effect-pulsate.js"></script>
+	<script src="../../ui/jquery.ui.effect-scale.js"></script>
+	<script src="../../ui/jquery.ui.effect-shake.js"></script>
+	<script src="../../ui/jquery.ui.effect-slide.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	.toggler { width: 500px; height: 200px; }
+	#button { padding: .5em 1em; text-decoration: none; }
+	#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
+	#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
+	</style>
+	<script>
+	$(function() {
+		// run the currently selected effect
+		function runEffect() {
+			// get effect type from
+			var selectedEffect = $( "#effectTypes" ).val();
+
+			// most effect types need no options passed by default
+			var options = {};
+			// some effects have required parameters
+			if ( selectedEffect === "scale" ) {
+				options = { percent: 100 };
+			} else if ( selectedEffect === "size" ) {
+				options = { to: { width: 280, height: 185 } };
+			}
+
+			// run the effect
+			$( "#effect" ).show( selectedEffect, options, 500, callback );
+		};
+
+		//callback function to bring a hidden box back
+		function callback() {
+			setTimeout(function() {
+				$( "#effect:visible" ).removeAttr( "style" ).fadeOut();
+			}, 1000 );
+		};
+
+		// set effect from select menu value
+		$( "#button" ).click(function() {
+			runEffect();
+			return false;
+		});
+
+		$( "#effect" ).hide();
+	});
+	</script>
+</head>
+<body>
+
+<div class="toggler">
+	<div id="effect" class="ui-widget-content ui-corner-all">
+		<h3 class="ui-widget-header ui-corner-all">Show</h3>
+		<p>
+			Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
+		</p>
+	</div>
+</div>
+
+<select name="effects" id="effectTypes">
+	<option value="blind">Blind</option>
+	<option value="bounce">Bounce</option>
+	<option value="clip">Clip</option>
+	<option value="drop">Drop</option>
+	<option value="explode">Explode</option>
+	<option value="fold">Fold</option>
+	<option value="highlight">Highlight</option>
+	<option value="puff">Puff</option>
+	<option value="pulsate">Pulsate</option>
+	<option value="scale">Scale</option>
+	<option value="shake">Shake</option>
+	<option value="size">Size</option>
+	<option value="slide">Slide</option>
+</select>
+
+<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>
+
+<div class="demo-description">
+<p>Click the button above to preview the effect.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/show/index.html b/apps/it/static/js/ui/demos/show/index.html
new file mode 100644
index 0000000..3620fd7
--- /dev/null
+++ b/apps/it/static/js/ui/demos/show/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Effects Demos</title>
+</head>
+<body>
+
+<ul>
+	<li><a href="default.html">Default functionality</a></li>
+</ul>
+
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/slider/colorpicker.html b/apps/it/static/js/ui/demos/slider/colorpicker.html
new file mode 100644
index 0000000..bf74b41
--- /dev/null
+++ b/apps/it/static/js/ui/demos/slider/colorpicker.html
@@ -0,0 +1,87 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Slider - Colorpicker</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mouse.js"></script>
+	<script src="../../ui/jquery.ui.slider.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	#red, #green, #blue {
+		float: left;
+		clear: left;
+		width: 300px;
+		margin: 15px;
+	}
+	#swatch {
+		width: 120px;
+		height: 100px;
+		margin-top: 18px;
+		margin-left: 350px;
+		background-image: none;
+	}
+	#red .ui-slider-range { background: #ef2929; }
+	#red .ui-slider-handle { border-color: #ef2929; }
+	#green .ui-slider-range { background: #8ae234; }
+	#green .ui-slider-handle { border-color: #8ae234; }
+	#blue .ui-slider-range { background: #729fcf; }
+	#blue .ui-slider-handle { border-color: #729fcf; }
+	</style>
+	<script>
+	function hexFromRGB(r, g, b) {
+		var hex = [
+			r.toString( 16 ),
+			g.toString( 16 ),
+			b.toString( 16 )
+		];
+		$.each( hex, function( nr, val ) {
+			if ( val.length === 1 ) {
+				hex[ nr ] = "0" + val;
+			}
+		});
+		return hex.join( "" ).toUpperCase();
+	}
+	function refreshSwatch() {
+		var red = $( "#red" ).slider( "value" ),
+			green = $( "#green" ).slider( "value" ),
+			blue = $( "#blue" ).slider( "value" ),
+			hex = hexFromRGB( red, green, blue );
+		$( "#swatch" ).css( "background-color", "#" + hex );
+	}
+	$(function() {
+		$( "#red, #green, #blue" ).slider({
+			orientation: "horizontal",
+			range: "min",
+			max: 255,
+			value: 127,
+			slide: refreshSwatch,
+			change: refreshSwatch
+		});
+		$( "#red" ).slider( "value", 255 );
+		$( "#green" ).slider( "value", 140 );
+		$( "#blue" ).slider( "value", 60 );
+	});
+	</script>
+</head>
+<body class="ui-widget-content" style="border:0;">
+
+<p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;">
+	<span class="ui-icon ui-icon-pencil" style="float:left; margin:-2px 5px 0 0;"></span>
+	Simple Colorpicker
+</p>
+
+<div id="red"></div>
+<div id="green"></div>
+<div id="blue"></div>
+
+<div id="swatch" class="ui-widget-content ui-corner-all"></div>
+
+<div class="demo-description">
+<p>Combine three sliders to create a simple RGB colorpicker.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/slider/default.html b/apps/it/static/js/ui/demos/slider/default.html
new file mode 100644
index 0000000..d637412
--- /dev/null
+++ b/apps/it/static/js/ui/demos/slider/default.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8" >
+	<title>jQuery UI Slider - Default functionality</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mouse.js"></script>
+	<script src="../../ui/jquery.ui.slider.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$(function() {
+		$( "#slider" ).slider();
+	});
+	</script>
+</head>
+<body>
+
+<div id="slider"></div>
+
+<div class="demo-description">
+<p>The basic slider is horizontal and has a single handle that can be moved with the mouse or by using the arrow keys.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/slider/hotelrooms.html b/apps/it/static/js/ui/demos/slider/hotelrooms.html
new file mode 100644
index 0000000..189f3d3
--- /dev/null
+++ b/apps/it/static/js/ui/demos/slider/hotelrooms.html
@@ -0,0 +1,49 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Slider - Slider bound to select</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mouse.js"></script>
+	<script src="../../ui/jquery.ui.slider.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$(function() {
+		var select = $( "#minbeds" );
+		var slider = $( "<div id='slider'></div>" ).insertAfter( select ).slider({
+			min: 1,
+			max: 6,
+			range: "min",
+			value: select[ 0 ].selectedIndex + 1,
+			slide: function( event, ui ) {
+				select[ 0 ].selectedIndex = ui.value - 1;
+			}
+		});
+		$( "#minbeds" ).change(function() {
+			slider.slider( "value", this.selectedIndex + 1 );
+		});
+	});
+	</script>
+</head>
+<body>
+
+<form id="reservation">
+	<label for="minbeds">Minimum number of beds</label>
+	<select name="minbeds" id="minbeds">
+		<option>1</option>
+		<option>2</option>
+		<option>3</option>
+		<option>4</option>
+		<option>5</option>
+		<option>6</option>
+	</select>
+</form>
+
+<div class="demo-description">
+<p>How to bind a slider to an existing select element. The select stays visible to display the change. When the select is changed, the slider is updated, too.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/slider/index.html b/apps/it/static/js/ui/demos/slider/index.html
new file mode 100644
index 0000000..2d05bb5
--- /dev/null
+++ b/apps/it/static/js/ui/demos/slider/index.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Slider Demos</title>
+</head>
+<body>
+
+<ul>
+	<li><a href="default.html">Default functionality</a></li>
+	<li><a href="steps.html">Snap to increments</a></li>
+	<li><a href="range.html">Range slider</a></li>
+	<li><a href="rangemin.html">Range with fixed minimum</a></li>
+	<li><a href="hotelrooms.html">Room reservation</a></li>
+	<li><a href="rangemax.html">Range with fixed maximum</a></li>
+	<li><a href="slider-vertical.html">Vertical slider</a></li>
+	<li><a href="range-vertical.html">Vertical range slider</a></li>
+	<li><a href="multiple-vertical.html">Multiple sliders</a></li>
+	<li><a href="colorpicker.html">Simple colorpicker</a></li>
+	<li><a href="side-scroll.html">Simple scrollbar</a></li>
+</ul>
+
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/slider/multiple-vertical.html b/apps/it/static/js/ui/demos/slider/multiple-vertical.html
new file mode 100644
index 0000000..66a3ab8
--- /dev/null
+++ b/apps/it/static/js/ui/demos/slider/multiple-vertical.html
@@ -0,0 +1,69 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Slider - Multiple sliders</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mouse.js"></script>
+	<script src="../../ui/jquery.ui.slider.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	#eq span {
+		height:120px; float:left; margin:15px
+	}
+	</style>
+	<script>
+	$(function() {
+		// setup master volume
+		$( "#master" ).slider({
+			value: 60,
+			orientation: "horizontal",
+			range: "min",
+			animate: true
+		});
+		// setup graphic EQ
+		$( "#eq > span" ).each(function() {
+			// read initial values from markup and remove that
+			var value = parseInt( $( this ).text(), 10 );
+			$( this ).empty().slider({
+				value: value,
+				range: "min",
+				animate: true,
+				orientation: "vertical"
+			});
+		});
+	});
+	</script>
+</head>
+<body>
+
+<p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;">
+	<span class="ui-icon ui-icon-volume-on" style="float:left; margin:-2px 5px 0 0;"></span>
+	Master volume
+</p>
+
+<div id="master" style="width:260px; margin:15px;"></div>
+
+<p class="ui-state-default ui-corner-all" style="padding:4px;margin-top:4em;">
+	<span class="ui-icon ui-icon-signal" style="float:left; margin:-2px 5px 0 0;"></span>
+	Graphic EQ
+</p>
+
+<div id="eq">
+	<span>88</span>
+	<span>77</span>
+	<span>55</span>
+	<span>33</span>
+	<span>40</span>
+	<span>45</span>
+	<span>70</span>
+</div>
+
+<div class="demo-description">
+<p>Combine horizontal and vertical sliders, each with their own options, to create the UI for a music player.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/slider/range-vertical.html b/apps/it/static/js/ui/demos/slider/range-vertical.html
new file mode 100644
index 0000000..31ecdb0
--- /dev/null
+++ b/apps/it/static/js/ui/demos/slider/range-vertical.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Slider - Vertical range slider</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mouse.js"></script>
+	<script src="../../ui/jquery.ui.slider.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$(function() {
+		$( "#slider-range" ).slider({
+			orientation: "vertical",
+			range: true,
+			values: [ 17, 67 ],
+			slide: function( event, ui ) {
+				$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
+			}
+		});
+		$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
+			" - $" + $( "#slider-range" ).slider( "values", 1 ) );
+	});
+	</script>
+</head>
+<body>
+
+<p>
+	<label for="amount">Target sales goal (Millions):</label>
+	<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
+</p>
+
+<div id="slider-range" style="height:250px;"></div>
+
+<div class="demo-description">
+<p>Change the orientation of the range slider to vertical.  Assign a height value via <code>.height()</code> or by setting the height through CSS, and set the <code>orientation</code> option to "vertical."</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/slider/range.html b/apps/it/static/js/ui/demos/slider/range.html
new file mode 100644
index 0000000..afde36d
--- /dev/null
+++ b/apps/it/static/js/ui/demos/slider/range.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Slider - Range slider</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mouse.js"></script>
+	<script src="../../ui/jquery.ui.slider.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$(function() {
+		$( "#slider-range" ).slider({
+			range: true,
+			min: 0,
+			max: 500,
+			values: [ 75, 300 ],
+			slide: function( event, ui ) {
+				$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
+			}
+		});
+		$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
+			" - $" + $( "#slider-range" ).slider( "values", 1 ) );
+	});
+	</script>
+</head>
+<body>
+
+<p>
+	<label for="amount">Price range:</label>
+	<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
+</p>
+
+<div id="slider-range"></div>
+
+<div class="demo-description">
+<p>Set the <code>range</code> option to true to capture a range of values with two drag handles.  The space between the handles is filled with a different background color to indicate those values are selected.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/slider/rangemax.html b/apps/it/static/js/ui/demos/slider/rangemax.html
new file mode 100644
index 0000000..d4cebe4
--- /dev/null
+++ b/apps/it/static/js/ui/demos/slider/rangemax.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Slider - Range with fixed maximum</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mouse.js"></script>
+	<script src="../../ui/jquery.ui.slider.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$(function() {
+		$( "#slider-range-max" ).slider({
+			range: "max",
+			min: 1,
+			max: 10,
+			value: 2,
+			slide: function( event, ui ) {
+				$( "#amount" ).val( ui.value );
+			}
+		});
+		$( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );
+	});
+	</script>
+</head>
+<body>
+
+<p>
+	<label for="amount">Minimum number of bedrooms:</label>
+	<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
+</p>
+<div id="slider-range-max"></div>
+
+<div class="demo-description">
+<p>Fix the maximum value of the range slider so that the user can only select a minimum.  Set the <code>range</code> option to "max."</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/slider/rangemin.html b/apps/it/static/js/ui/demos/slider/rangemin.html
new file mode 100644
index 0000000..cd86f9c
--- /dev/null
+++ b/apps/it/static/js/ui/demos/slider/rangemin.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Slider - Range with fixed minimum</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mouse.js"></script>
+	<script src="../../ui/jquery.ui.slider.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$(function() {
+		$( "#slider-range-min" ).slider({
+			range: "min",
+			value: 37,
+			min: 1,
+			max: 700,
+			slide: function( event, ui ) {
+				$( "#amount" ).val( "$" + ui.value );
+			}
+		});
+		$( "#amount" ).val( "$" + $( "#slider-range-min" ).slider( "value" ) );
+	});
+	</script>
+</head>
+<body>
+
+<p>
+	<label for="amount">Maximum price:</label>
+	<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
+</p>
+
+<div id="slider-range-min"></div>
+
+<div class="demo-description">
+<p>Fix the minimum value of the range slider so that the user can only select a maximum.  Set the <code>range</code> option to "min."</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/slider/side-scroll.html b/apps/it/static/js/ui/demos/slider/side-scroll.html
new file mode 100644
index 0000000..6c20a51
--- /dev/null
+++ b/apps/it/static/js/ui/demos/slider/side-scroll.html
@@ -0,0 +1,131 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Slider - Slider scrollbar</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mouse.js"></script>
+	<script src="../../ui/jquery.ui.slider.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	.scroll-pane { overflow: auto; width: 99%; float:left; }
+	.scroll-content { width: 2440px; float: left; }
+	.scroll-content-item { width: 100px; height: 100px; float: left; margin: 10px; font-size: 3em; line-height: 96px; text-align: center; }
+	.scroll-bar-wrap { clear: left; padding: 0 4px 0 2px; margin: 0 -1px -1px -1px; }
+	.scroll-bar-wrap .ui-slider { background: none; border:0; height: 2em; margin: 0 auto;  }
+	.scroll-bar-wrap .ui-handle-helper-parent { position: relative; width: 100%; height: 100%; margin: 0 auto; }
+	.scroll-bar-wrap .ui-slider-handle { top:.2em; height: 1.5em; }
+	.scroll-bar-wrap .ui-slider-handle .ui-icon { margin: -8px auto 0; position: relative; top: 50%; }
+	</style>
+	<script>
+	$(function() {
+		//scrollpane parts
+		var scrollPane = $( ".scroll-pane" ),
+			scrollContent = $( ".scroll-content" );
+
+		//build slider
+		var scrollbar = $( ".scroll-bar" ).slider({
+			slide: function( event, ui ) {
+				if ( scrollContent.width() > scrollPane.width() ) {
+					scrollContent.css( "margin-left", Math.round(
+						ui.value / 100 * ( scrollPane.width() - scrollContent.width() )
+					) + "px" );
+				} else {
+					scrollContent.css( "margin-left", 0 );
+				}
+			}
+		});
+
+		//append icon to handle
+		var handleHelper = scrollbar.find( ".ui-slider-handle" )
+		.mousedown(function() {
+			scrollbar.width( handleHelper.width() );
+		})
+		.mouseup(function() {
+			scrollbar.width( "100%" );
+		})
+		.append( "<span class='ui-icon ui-icon-grip-dotted-vertical'></span>" )
+		.wrap( "<div class='ui-handle-helper-parent'></div>" ).parent();
+
+		//change overflow to hidden now that slider handles the scrolling
+		scrollPane.css( "overflow", "hidden" );
+
+		//size scrollbar and handle proportionally to scroll distance
+		function sizeScrollbar() {
+			var remainder = scrollContent.width() - scrollPane.width();
+			var proportion = remainder / scrollContent.width();
+			var handleSize = scrollPane.width() - ( proportion * scrollPane.width() );
+			scrollbar.find( ".ui-slider-handle" ).css({
+				width: handleSize,
+				"margin-left": -handleSize / 2
+			});
+			handleHelper.width( "" ).width( scrollbar.width() - handleSize );
+		}
+
+		//reset slider value based on scroll content position
+		function resetValue() {
+			var remainder = scrollPane.width() - scrollContent.width();
+			var leftVal = scrollContent.css( "margin-left" ) === "auto" ? 0 :
+				parseInt( scrollContent.css( "margin-left" ) );
+			var percentage = Math.round( leftVal / remainder * 100 );
+			scrollbar.slider( "value", percentage );
+		}
+
+		//if the slider is 100% and window gets larger, reveal content
+		function reflowContent() {
+				var showing = scrollContent.width() + parseInt( scrollContent.css( "margin-left" ), 10 );
+				var gap = scrollPane.width() - showing;
+				if ( gap > 0 ) {
+					scrollContent.css( "margin-left", parseInt( scrollContent.css( "margin-left" ), 10 ) + gap );
+				}
+		}
+
+		//change handle position on window resize
+		$( window ).resize(function() {
+			resetValue();
+			sizeScrollbar();
+			reflowContent();
+		});
+		//init scrollbar size
+		setTimeout( sizeScrollbar, 10 );//safari wants a timeout
+	});
+	</script>
+</head>
+<body>
+
+<div class="scroll-pane ui-widget ui-widget-header ui-corner-all">
+	<div class="scroll-content">
+		<div class="scroll-content-item ui-widget-header">1</div>
+		<div class="scroll-content-item ui-widget-header">2</div>
+		<div class="scroll-content-item ui-widget-header">3</div>
+		<div class="scroll-content-item ui-widget-header">4</div>
+		<div class="scroll-content-item ui-widget-header">5</div>
+		<div class="scroll-content-item ui-widget-header">6</div>
+		<div class="scroll-content-item ui-widget-header">7</div>
+		<div class="scroll-content-item ui-widget-header">8</div>
+		<div class="scroll-content-item ui-widget-header">9</div>
+		<div class="scroll-content-item ui-widget-header">10</div>
+		<div class="scroll-content-item ui-widget-header">11</div>
+		<div class="scroll-content-item ui-widget-header">12</div>
+		<div class="scroll-content-item ui-widget-header">13</div>
+		<div class="scroll-content-item ui-widget-header">14</div>
+		<div class="scroll-content-item ui-widget-header">15</div>
+		<div class="scroll-content-item ui-widget-header">16</div>
+		<div class="scroll-content-item ui-widget-header">17</div>
+		<div class="scroll-content-item ui-widget-header">18</div>
+		<div class="scroll-content-item ui-widget-header">19</div>
+		<div class="scroll-content-item ui-widget-header">20</div>
+	</div>
+	<div class="scroll-bar-wrap ui-widget-content ui-corner-bottom">
+		<div class="scroll-bar"></div>
+	</div>
+</div>
+
+<div class="demo-description">
+<p>Use a slider to manipulate the positioning of content on the page. In this case, it acts as a scrollbar with the potential to capture values if needed.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/slider/slider-vertical.html b/apps/it/static/js/ui/demos/slider/slider-vertical.html
new file mode 100644
index 0000000..33fc8e0
--- /dev/null
+++ b/apps/it/static/js/ui/demos/slider/slider-vertical.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Slider - Vertical slider</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mouse.js"></script>
+	<script src="../../ui/jquery.ui.slider.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$(function() {
+		$( "#slider-vertical" ).slider({
+			orientation: "vertical",
+			range: "min",
+			min: 0,
+			max: 100,
+			value: 60,
+			slide: function( event, ui ) {
+				$( "#amount" ).val( ui.value );
+			}
+		});
+		$( "#amount" ).val( $( "#slider-vertical" ).slider( "value" ) );
+	});
+	</script>
+</head>
+<body>
+
+<p>
+	<label for="amount">Volume:</label>
+	<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
+</p>
+
+<div id="slider-vertical" style="height:200px;"></div>
+
+<div class="demo-description">
+<p>Change the orientation of the slider to vertical.  Assign a height value via <code>.height()</code> or by setting the height through CSS, and set the <code>orientation</code> option to "vertical."</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/slider/steps.html b/apps/it/static/js/ui/demos/slider/steps.html
new file mode 100644
index 0000000..92b6a14
--- /dev/null
+++ b/apps/it/static/js/ui/demos/slider/steps.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Slider - Snap to increments</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mouse.js"></script>
+	<script src="../../ui/jquery.ui.slider.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$(function() {
+		$( "#slider" ).slider({
+			value:100,
+			min: 0,
+			max: 500,
+			step: 50,
+			slide: function( event, ui ) {
+				$( "#amount" ).val( "$" + ui.value );
+			}
+		});
+		$( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) );
+	});
+	</script>
+</head>
+<body>
+
+<p>
+	<label for="amount">Donation amount ($50 increments):</label>
+	<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
+</p>
+
+<div id="slider"></div>
+
+<div class="demo-description">
+<p>Increment slider values with the <code>step</code> option set to an integer, commonly a dividend of the slider's maximum value.  The default increment is 1.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/sortable/connect-lists-through-tabs.html b/apps/it/static/js/ui/demos/sortable/connect-lists-through-tabs.html
new file mode 100644
index 0000000..f82fd8d
--- /dev/null
+++ b/apps/it/static/js/ui/demos/sortable/connect-lists-through-tabs.html
@@ -0,0 +1,72 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Sortable - Connect lists with Tabs</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mouse.js"></script>
+	<script src="../../ui/jquery.ui.sortable.js"></script>
+	<script src="../../ui/jquery.ui.droppable.js"></script>
+	<script src="../../ui/jquery.ui.tabs.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	#sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
+	</style>
+	<script>
+	$(function() {
+		$( "#sortable1, #sortable2" ).sortable().disableSelection();
+
+		var $tabs = $( "#tabs" ).tabs();
+
+		var $tab_items = $( "ul:first li", $tabs ).droppable({
+			accept: ".connectedSortable li",
+			hoverClass: "ui-state-hover",
+			drop: function( event, ui ) {
+				var $item = $( this );
+				var $list = $( $item.find( "a" ).attr( "href" ) )
+					.find( ".connectedSortable" );
+
+				ui.draggable.hide( "slow", function() {
+					$tabs.tabs( "option", "active", $tab_items.index( $item ) );
+					$( this ).appendTo( $list ).show( "slow" );
+				});
+			}
+		});
+	});
+	</script>
+</head>
+<body>
+
+<div id="tabs">
+	<ul>
+		<li><a href="#tabs-1">Nunc tincidunt</a></li>
+		<li><a href="#tabs-2">Proin dolor</a></li>
+	</ul>
+	<div id="tabs-1">
+		<ul id="sortable1" class="connectedSortable ui-helper-reset">
+			<li class="ui-state-default">Item 1</li>
+			<li class="ui-state-default">Item 2</li>
+			<li class="ui-state-default">Item 3</li>
+			<li class="ui-state-default">Item 4</li>
+			<li class="ui-state-default">Item 5</li>
+		</ul>
+	</div>
+	<div id="tabs-2">
+		<ul id="sortable2" class="connectedSortable ui-helper-reset">
+			<li class="ui-state-highlight">Item 1</li>
+			<li class="ui-state-highlight">Item 2</li>
+			<li class="ui-state-highlight">Item 3</li>
+			<li class="ui-state-highlight">Item 4</li>
+			<li class="ui-state-highlight">Item 5</li>
+		</ul>
+	</div>
+</div>
+
+<div class="demo-description">
+<p>Sort items from one list into another and vice versa, by dropping the list item on the appropriate tab above.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/sortable/connect-lists.html b/apps/it/static/js/ui/demos/sortable/connect-lists.html
new file mode 100644
index 0000000..b28991f
--- /dev/null
+++ b/apps/it/static/js/ui/demos/sortable/connect-lists.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Sortable - Connect lists</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mouse.js"></script>
+	<script src="../../ui/jquery.ui.sortable.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	#sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0 0 2.5em; float: left; margin-right: 10px; }
+	#sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
+	</style>
+	<script>
+	$(function() {
+		$( "#sortable1, #sortable2" ).sortable({
+			connectWith: ".connectedSortable"
+		}).disableSelection();
+	});
+	</script>
+</head>
+<body>
+
+<ul id="sortable1" class="connectedSortable">
+	<li class="ui-state-default">Item 1</li>
+	<li class="ui-state-default">Item 2</li>
+	<li class="ui-state-default">Item 3</li>
+	<li class="ui-state-default">Item 4</li>
+	<li class="ui-state-default">Item 5</li>
+</ul>
+
+<ul id="sortable2" class="connectedSortable">
+	<li class="ui-state-highlight">Item 1</li>
+	<li class="ui-state-highlight">Item 2</li>
+	<li class="ui-state-highlight">Item 3</li>
+	<li class="ui-state-highlight">Item 4</li>
+	<li class="ui-state-highlight">Item 5</li>
+</ul>
+
+<div class="demo-description">
+<p>
+	Sort items from one list into another and vice versa, by passing a selector into
+	the <code>connectWith</code> option. The simplest way to do this is to
+	group all related lists with a CSS class, and then pass that class into the
+	sortable function (i.e., <code>connectWith: '.myclass'</code>).
+</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/sortable/default.html b/apps/it/static/js/ui/demos/sortable/default.html
new file mode 100644
index 0000000..34795ad
--- /dev/null
+++ b/apps/it/static/js/ui/demos/sortable/default.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Sortable - Default functionality</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mouse.js"></script>
+	<script src="../../ui/jquery.ui.sortable.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
+	#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
+	#sortable li span { position: absolute; margin-left: -1.3em; }
+	</style>
+	<script>
+	$(function() {
+		$( "#sortable" ).sortable();
+		$( "#sortable" ).disableSelection();
+	});
+	</script>
+</head>
+<body>
+
+<ul id="sortable">
+	<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
+	<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
+	<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
+	<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
+	<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
+	<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
+	<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
+</ul>
+
+<div class="demo-description">
+<p>
+	Enable a group of DOM elements to be sortable. Click on and drag an
+	element to a new spot within the list, and the other items will adjust to
+	fit. By default, sortable items share <code>draggable</code> properties.
+</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/sortable/delay-start.html b/apps/it/static/js/ui/demos/sortable/delay-start.html
new file mode 100644
index 0000000..dad630a
--- /dev/null
+++ b/apps/it/static/js/ui/demos/sortable/delay-start.html
@@ -0,0 +1,61 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Sortable - Delay start</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mouse.js"></script>
+	<script src="../../ui/jquery.ui.sortable.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	#sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0; margin-bottom: 15px;zoom: 1; }
+	#sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 95%; }
+	</style>
+	<script>
+	$(function() {
+		$( "#sortable1" ).sortable({
+			delay: 300
+		});
+
+		$( "#sortable2" ).sortable({
+			distance: 15
+		});
+
+		$( "li" ).disableSelection();
+	});
+	</script>
+</head>
+<body>
+
+<h3 class="docs">Time delay of 300ms:</h3>
+
+<ul id="sortable1">
+	<li class="ui-state-default">Item 1</li>
+	<li class="ui-state-default">Item 2</li>
+	<li class="ui-state-default">Item 3</li>
+	<li class="ui-state-default">Item 4</li>
+</ul>
+
+<h3 class="docs">Distance delay of 15px:</h3>
+
+<ul id="sortable2">
+	<li class="ui-state-default">Item 1</li>
+	<li class="ui-state-default">Item 2</li>
+	<li class="ui-state-default">Item 3</li>
+	<li class="ui-state-default">Item 4</li>
+</ul>
+
+<div class="demo-description">
+<p>
+	Prevent accidental sorting either by delay (time) or distance. Set a number of
+	milliseconds the element needs to be dragged before sorting starts
+	with the <code>delay</code> option. Set a distance in pixels the element
+	needs to be dragged before sorting starts with the <code>distance</code>
+	option.
+</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/sortable/display-grid.html b/apps/it/static/js/ui/demos/sortable/display-grid.html
new file mode 100644
index 0000000..91aaa8d
--- /dev/null
+++ b/apps/it/static/js/ui/demos/sortable/display-grid.html
@@ -0,0 +1,48 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Sortable - Display as grid</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mouse.js"></script>
+	<script src="../../ui/jquery.ui.sortable.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	#sortable { list-style-type: none; margin: 0; padding: 0; width: 450px; }
+	#sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 100px; height: 90px; font-size: 4em; text-align: center; }
+	</style>
+	<script>
+	$(function() {
+		$( "#sortable" ).sortable();
+		$( "#sortable" ).disableSelection();
+	});
+	</script>
+</head>
+<body>
+
+<ul id="sortable">
+	<li class="ui-state-default">1</li>
+	<li class="ui-state-default">2</li>
+	<li class="ui-state-default">3</li>
+	<li class="ui-state-default">4</li>
+	<li class="ui-state-default">5</li>
+	<li class="ui-state-default">6</li>
+	<li class="ui-state-default">7</li>
+	<li class="ui-state-default">8</li>
+	<li class="ui-state-default">9</li>
+	<li class="ui-state-default">10</li>
+	<li class="ui-state-default">11</li>
+	<li class="ui-state-default">12</li>
+</ul>
+
+<div class="demo-description">
+<p>
+	To arrange sortable items as a grid, give them identical dimensions and
+	float them using CSS.
+</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/sortable/empty-lists.html b/apps/it/static/js/ui/demos/sortable/empty-lists.html
new file mode 100644
index 0000000..43a74ac
--- /dev/null
+++ b/apps/it/static/js/ui/demos/sortable/empty-lists.html
@@ -0,0 +1,63 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Sortable - Handle empty lists</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mouse.js"></script>
+	<script src="../../ui/jquery.ui.sortable.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	#sortable1, #sortable2, #sortable3 { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; background: #eee; padding: 5px; width: 143px;}
+	#sortable1 li, #sortable2 li, #sortable3 li { margin: 5px; padding: 5px; font-size: 1.2em; width: 120px; }
+	</style>
+	<script>
+	$(function() {
+		$( "ul.droptrue" ).sortable({
+			connectWith: "ul"
+		});
+
+		$( "ul.dropfalse" ).sortable({
+			connectWith: "ul",
+			dropOnEmpty: false
+		});
+
+		$( "#sortable1, #sortable2, #sortable3" ).disableSelection();
+	});
+	</script>
+</head>
+<body>
+
+<ul id="sortable1" class='droptrue'>
+	<li class="ui-state-default">Can be dropped..</li>
+	<li class="ui-state-default">..on an empty list</li>
+	<li class="ui-state-default">Item 3</li>
+	<li class="ui-state-default">Item 4</li>
+	<li class="ui-state-default">Item 5</li>
+</ul>
+
+<ul id="sortable2" class='dropfalse'>
+	<li class="ui-state-highlight">Cannot be dropped..</li>
+	<li class="ui-state-highlight">..on an empty list</li>
+	<li class="ui-state-highlight">Item 3</li>
+	<li class="ui-state-highlight">Item 4</li>
+	<li class="ui-state-highlight">Item 5</li>
+</ul>
+
+<ul id="sortable3" class='droptrue'>
+</ul>
+
+<br style="clear:both">
+
+<div class="demo-description">
+<p>
+	Prevent all items in a list from being dropped into a separate, empty list
+	using the <code>dropOnEmpty</code> option set to <code>false</code>.  By default,
+	sortable items can be dropped on empty lists.
+</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/sortable/index.html b/apps/it/static/js/ui/demos/sortable/index.html
new file mode 100644
index 0000000..66b0b5c
--- /dev/null
+++ b/apps/it/static/js/ui/demos/sortable/index.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Sortable Demos</title>
+</head>
+<body>
+
+<ul>
+	<li><a href="default.html">Default functionality</a></li>
+	<li><a href="placeholder.html">Drop placeholder</a></li>
+	<li><a href="connect-lists.html">Connect lists</a></li>
+	<li><a href="connect-lists-through-tabs.html">Connect lists through tabs</a></li>
+	<li><a href="empty-lists.html">Handle empty lists</a></li>
+	<li><a href="items.html">Include / exclude items</a></li>
+	<li><a href="delay-start.html">Delay start</a></li>
+	<li><a href="display-grid.html">Display as grid</a></li>
+	<li><a href="portlets.html">Portlets</a></li>
+</ul>
+
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/sortable/items.html b/apps/it/static/js/ui/demos/sortable/items.html
new file mode 100644
index 0000000..a370b08
--- /dev/null
+++ b/apps/it/static/js/ui/demos/sortable/items.html
@@ -0,0 +1,64 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Sortable - Include / exclude items</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mouse.js"></script>
+	<script src="../../ui/jquery.ui.sortable.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	#sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0; zoom: 1; }
+	#sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 3px; width: 90%; }
+	</style>
+	<script>
+	$(function() {
+		$( "#sortable1" ).sortable({
+			items: "li:not(.ui-state-disabled)"
+		});
+
+		$( "#sortable2" ).sortable({
+			cancel: ".ui-state-disabled"
+		});
+
+		$( "#sortable1 li, #sortable2 li" ).disableSelection();
+	});
+	</script>
+</head>
+<body>
+
+<h3 class="docs">Specify which items are sortable:</h3>
+
+<ul id="sortable1">
+	<li class="ui-state-default">Item 1</li>
+	<li class="ui-state-default ui-state-disabled">(I'm not sortable or a drop target)</li>
+	<li class="ui-state-default ui-state-disabled">(I'm not sortable or a drop target)</li>
+	<li class="ui-state-default">Item 4</li>
+</ul>
+
+<h3 class="docs">Cancel sorting (but keep as drop targets):</h3>
+
+<ul id="sortable2">
+	<li class="ui-state-default">Item 1</li>
+	<li class="ui-state-default ui-state-disabled">(I'm not sortable)</li>
+	<li class="ui-state-default ui-state-disabled">(I'm not sortable)</li>
+	<li class="ui-state-default">Item 4</li>
+</ul>
+
+<div class="demo-description">
+<p>
+	Specify which items are eligible to sort by passing a jQuery selector into
+	the <code>items</code> option. Items excluded from this option are not
+	sortable, nor are they valid targets for sortable items.
+</p>
+<p>
+	To only prevent sorting on certain items, pass a jQuery selector into the
+	<code>cancel</code> option. Cancelled items remain valid sort targets for
+	others.
+</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/sortable/placeholder.html b/apps/it/static/js/ui/demos/sortable/placeholder.html
new file mode 100644
index 0000000..ff29cf6
--- /dev/null
+++ b/apps/it/static/js/ui/demos/sortable/placeholder.html
@@ -0,0 +1,50 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Sortable - Drop placeholder</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mouse.js"></script>
+	<script src="../../ui/jquery.ui.sortable.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
+	#sortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; height: 1.5em; }
+	html>body #sortable li { height: 1.5em; line-height: 1.2em; }
+	.ui-state-highlight { height: 1.5em; line-height: 1.2em; }
+	</style>
+	<script>
+	$(function() {
+		$( "#sortable" ).sortable({
+			placeholder: "ui-state-highlight"
+		});
+		$( "#sortable" ).disableSelection();
+	});
+	</script>
+</head>
+<body>
+
+<ul id="sortable">
+	<li class="ui-state-default">Item 1</li>
+	<li class="ui-state-default">Item 2</li>
+	<li class="ui-state-default">Item 3</li>
+	<li class="ui-state-default">Item 4</li>
+	<li class="ui-state-default">Item 5</li>
+	<li class="ui-state-default">Item 6</li>
+	<li class="ui-state-default">Item 7</li>
+</ul>
+
+<div class="demo-description">
+<p>
+	When dragging a sortable item to a new location, other items will make room
+	for the that item by shifting to allow white space between them. Pass a
+	class into the <code>placeholder</code> option to style that space to
+	be visible.  Use the boolean <code>forcePlaceholderSize</code> option
+	to set dimensions on the placeholder.
+</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/sortable/portlets.html b/apps/it/static/js/ui/demos/sortable/portlets.html
new file mode 100644
index 0000000..546fe58
--- /dev/null
+++ b/apps/it/static/js/ui/demos/sortable/portlets.html
@@ -0,0 +1,115 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Sortable - Portlets</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mouse.js"></script>
+	<script src="../../ui/jquery.ui.sortable.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	body {
+		min-width: 520px;
+	}
+	.column {
+		width: 170px;
+		float: left;
+		padding-bottom: 100px;
+	}
+	.portlet {
+		margin: 0 1em 1em 0;
+		padding: 0.3em;
+	}
+	.portlet-header {
+		padding: 0.2em 0.3em;
+		margin-bottom: 0.5em;
+		position: relative;
+	}
+	.portlet-toggle {
+		position: absolute;
+		top: 50%;
+		right: 0;
+		margin-top: -8px;
+	}
+	.portlet-content {
+		padding: 0.4em;
+	}
+	.portlet-placeholder {
+		border: 1px dotted black;
+		margin: 0 1em 1em 0;
+		height: 50px;
+	}
+	</style>
+	<script>
+	$(function() {
+		$( ".column" ).sortable({
+			connectWith: ".column",
+			handle: ".portlet-header",
+			cancel: ".portlet-toggle",
+			placeholder: "portlet-placeholder ui-corner-all"
+		});
+
+		$( ".portlet" )
+			.addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
+			.find( ".portlet-header" )
+				.addClass( "ui-widget-header ui-corner-all" )
+				.prepend( "<span class='ui-icon ui-icon-minusthick portlet-toggle'></span>");
+
+		$( ".portlet-toggle" ).click(function() {
+			var icon = $( this );
+			icon.toggleClass( "ui-icon-minusthick ui-icon-plusthick" );
+			icon.closest( ".portlet" ).find( ".portlet-content" ).toggle();
+		});
+	});
+	</script>
+</head>
+<body>
+
+<div class="column">
+
+	<div class="portlet">
+		<div class="portlet-header">Feeds</div>
+		<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
+	</div>
+
+	<div class="portlet">
+		<div class="portlet-header">News</div>
+		<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
+	</div>
+
+</div>
+
+<div class="column">
+
+	<div class="portlet">
+		<div class="portlet-header">Shopping</div>
+		<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
+	</div>
+
+</div>
+
+<div class="column">
+
+	<div class="portlet">
+		<div class="portlet-header">Links</div>
+		<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
+	</div>
+
+	<div class="portlet">
+		<div class="portlet-header">Images</div>
+		<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
+	</div>
+
+</div>
+
+<div class="demo-description">
+<p>
+	Enable portlets (styled divs) as sortables and use the <code>connectWith</code>
+	option to allow sorting between columns.
+</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/spinner/currency.html b/apps/it/static/js/ui/demos/spinner/currency.html
new file mode 100644
index 0000000..ebe8d66
--- /dev/null
+++ b/apps/it/static/js/ui/demos/spinner/currency.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Spinner - Currency</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../external/jquery.mousewheel.js"></script>
+	<script src="../../external/globalize.js"></script>
+	<script src="../../external/globalize.culture.de-DE.js"></script>
+	<script src="../../external/globalize.culture.ja-JP.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.button.js"></script>
+	<script src="../../ui/jquery.ui.spinner.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$(function() {
+		$( "#currency" ).change(function() {
+			$( "#spinner" ).spinner( "option", "culture", $( this ).val() );
+		});
+
+		$( "#spinner" ).spinner({
+			min: 5,
+			max: 2500,
+			step: 25,
+			start: 1000,
+			numberFormat: "C"
+		});
+	});
+	</script>
+</head>
+<body>
+
+<p>
+	<label for="currency">Currency to donate</label>
+	<select id="currency" name="currency">
+		<option value="en-US">US $</option>
+		<option value="de-DE">EUR €</option>
+		<option value="ja-JP">YEN ¥</option>
+	</select>
+</p>
+<p>
+	<label for="spinner">Amount to donate:</label>
+	<input id="spinner" name="spinner" value="5">
+</p>
+
+<div class="demo-description">
+<p>Example of a donation form, with currency selection and amount spinner.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/spinner/decimal.html b/apps/it/static/js/ui/demos/spinner/decimal.html
new file mode 100644
index 0000000..06ef567
--- /dev/null
+++ b/apps/it/static/js/ui/demos/spinner/decimal.html
@@ -0,0 +1,56 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Spinner - Decimal</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../external/jquery.mousewheel.js"></script>
+	<script src="../../external/globalize.js"></script>
+	<script src="../../external/globalize.culture.de-DE.js"></script>
+	<script src="../../external/globalize.culture.ja-JP.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.button.js"></script>
+	<script src="../../ui/jquery.ui.spinner.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$(function() {
+		$( "#spinner" ).spinner({
+			step: 0.01,
+			numberFormat: "n"
+		});
+
+		$( "#culture" ).change(function() {
+			var current = $( "#spinner" ).spinner( "value" );
+			Globalize.culture( $(this).val() );
+			$( "#spinner" ).spinner( "value", current );
+		});
+	});
+	</script>
+</head>
+<body>
+
+<p>
+	<label for="spinner">Decimal spinner:</label>
+	<input id="spinner" name="spinner" value="5.06">
+</p>
+<p>
+	<label for="culture">Select a culture to use for formatting:</label>
+	<select id="culture">
+		<option value="en-EN" selected="selected">English</option>
+		<option value="de-DE">German</option>
+		<option value="ja-JP">Japanese</option>
+	</select>
+</p>
+
+<div class="demo-description">
+<p>
+	Example of a decimal spinner. Step is set to 0.01.
+	<br>The code handling the culture change reads the current spinner value,
+	then changes the culture, then sets the value again, resulting in an updated
+	formatting, based on the new culture.
+</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/spinner/default.html b/apps/it/static/js/ui/demos/spinner/default.html
new file mode 100644
index 0000000..ed46f96
--- /dev/null
+++ b/apps/it/static/js/ui/demos/spinner/default.html
@@ -0,0 +1,64 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Spinner - Default functionality</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../external/jquery.mousewheel.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.button.js"></script>
+	<script src="../../ui/jquery.ui.spinner.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$(function() {
+		var spinner = $( "#spinner" ).spinner();
+
+		$( "#disable" ).click(function() {
+			if ( spinner.spinner( "option", "disabled" ) ) {
+				spinner.spinner( "enable" );
+			} else {
+				spinner.spinner( "disable" );
+			}
+		});
+		$( "#destroy" ).click(function() {
+			if ( spinner.data( "ui-spinner" ) ) {
+				spinner.spinner( "destroy" );
+			} else {
+				spinner.spinner();
+			}
+		});
+		$( "#getvalue" ).click(function() {
+			alert( spinner.spinner( "value" ) );
+		});
+		$( "#setvalue" ).click(function() {
+			spinner.spinner( "value", 5 );
+		});
+
+		$( "button" ).button();
+	});
+	</script>
+</head>
+<body>
+
+<p>
+	<label for="spinner">Select a value:</label>
+	<input id="spinner" name="value">
+</p>
+
+<p>
+	<button id="disable">Toggle disable/enable</button>
+	<button id="destroy">Toggle widget</button>
+</p>
+
+<p>
+	<button id="getvalue">Get value</button>
+	<button id="setvalue">Set value to 5</button>
+</p>
+
+<div class="demo-description">
+<p>Default spinner.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/spinner/index.html b/apps/it/static/js/ui/demos/spinner/index.html
new file mode 100644
index 0000000..f3c74d0
--- /dev/null
+++ b/apps/it/static/js/ui/demos/spinner/index.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Spinner Demos</title>
+</head>
+<body>
+
+<ul>
+	<li><a href="default.html">Default functionality</a></li>
+	<li><a href="decimal.html">Decimal</a></li>
+	<li><a href="currency.html">Currency</a></li>
+	<li><a href="latlong.html">Map</a></li>
+	<li><a href="time.html">Time</a></li>
+	<li><a href="overflow.html">Overflow</a></li>
+</ul>
+
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/spinner/latlong.html b/apps/it/static/js/ui/demos/spinner/latlong.html
new file mode 100644
index 0000000..1c419ad
--- /dev/null
+++ b/apps/it/static/js/ui/demos/spinner/latlong.html
@@ -0,0 +1,57 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Spinner - Map</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../external/jquery.mousewheel.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.button.js"></script>
+	<script src="../../ui/jquery.ui.spinner.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$(function() {
+		function latlong() {
+			return new google.maps.LatLng( $("#lat").val(), $("#lng").val() );
+		}
+		function position() {
+			map.setCenter( latlong() );
+		}
+		$( "#lat, #lng" ).spinner({
+			step: .001,
+			change: position,
+			stop: position
+		});
+
+		var map = new google.maps.Map( $("#map")[0], {
+			zoom: 8,
+			center: latlong(),
+			mapTypeId: google.maps.MapTypeId.ROADMAP
+		});
+	});
+	</script>
+	<style>
+	#map {
+		width:500px;
+		height:500px;
+	}
+	</style>
+</head>
+<body>
+
+<label for="lat">Latitude</label>
+<input id="lat" name="lat" value="44.797">
+<br>
+<label for="lng">Longitude</label>
+<input id="lng" name="lng" value="-93.278">
+
+<div id="map"></div>
+
+<div class="demo-description">
+<p>Google Maps integration, using spinners to change latitude and longitude.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/spinner/overflow.html b/apps/it/static/js/ui/demos/spinner/overflow.html
new file mode 100644
index 0000000..2d5dd16
--- /dev/null
+++ b/apps/it/static/js/ui/demos/spinner/overflow.html
@@ -0,0 +1,44 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Spinner - Overflow</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../external/jquery.mousewheel.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.button.js"></script>
+	<script src="../../ui/jquery.ui.spinner.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$(function() {
+		$( "#spinner" ).spinner({
+			spin: function( event, ui ) {
+				if ( ui.value > 10 ) {
+					$( this ).spinner( "value", -10 );
+					return false;
+				} else if ( ui.value < -10 ) {
+					$( this ).spinner( "value", 10 );
+					return false;
+				}
+			}
+		});
+	});
+	</script>
+</head>
+<body>
+
+<p>
+	<label for="spinner">Select a value:</label>
+	<input id="spinner" name="value" />
+</p>
+
+<div class="demo-description">
+<p>
+Overflowing spinner restricted to a range of -10 to 10.
+For anything above 10, it'll overflow to -10, and the other way round.
+</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/spinner/time.html b/apps/it/static/js/ui/demos/spinner/time.html
new file mode 100644
index 0000000..f5dab29
--- /dev/null
+++ b/apps/it/static/js/ui/demos/spinner/time.html
@@ -0,0 +1,74 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Spinner - Time</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../external/jquery.mousewheel.js"></script>
+	<script src="../../external/globalize.js"></script>
+	<script src="../../external/globalize.culture.de-DE.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.button.js"></script>
+	<script src="../../ui/jquery.ui.spinner.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$.widget( "ui.timespinner", $.ui.spinner, {
+		options: {
+			// seconds
+			step: 60 * 1000,
+			// hours
+			page: 60
+		},
+
+		_parse: function( value ) {
+			if ( typeof value === "string" ) {
+				// already a timestamp
+				if ( Number( value ) == value ) {
+					return Number( value );
+				}
+				return +Globalize.parseDate( value );
+			}
+			return value;
+		},
+
+		_format: function( value ) {
+			return Globalize.format( new Date(value), "t" );
+		}
+	});
+
+	$(function() {
+		$( "#spinner" ).timespinner();
+
+		$( "#culture" ).change(function() {
+			var current = $( "#spinner" ).timespinner( "value" );
+			Globalize.culture( $(this).val() );
+			$( "#spinner" ).timespinner( "value", current );
+		});
+	});
+	</script>
+</head>
+<body>
+
+<p>
+	<label for="spinner">Time spinner:</label>
+	<input id="spinner" name="spinner" value="08:30 PM">
+</p>
+<p>
+	<label for="culture">Select a culture to use for formatting:</label>
+	<select id="culture">
+		<option value="en-EN" selected="selected">English</option>
+		<option value="de-DE">German</option>
+	</select>
+</p>
+
+<div class="demo-description">
+<p>
+	A custom widget extending spinner. Use the Globalization plugin to parse and output
+	a timestamp, with custom step and page options. Cursor up/down spins minutes, page up/down
+	spins hours.
+</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/switchClass/default.html b/apps/it/static/js/ui/demos/switchClass/default.html
new file mode 100644
index 0000000..1200699
--- /dev/null
+++ b/apps/it/static/js/ui/demos/switchClass/default.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Effects - switchClass Demo</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.effect.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	.toggler { width: 500px; height: 200px; position: relative; }
+	#button { padding: .5em 1em; text-decoration: none; }
+	#effect { position: relative; }
+	.newClass { width: 240px;  padding: 1em; letter-spacing: 0; font-size: 1.2em; margin: 0; }
+	.anotherNewClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; }
+	</style>
+	<script>
+	$(function() {
+		$( "#button" ).click(function(){
+			$( ".newClass" ).switchClass( "newClass", "anotherNewClass", 1000 );
+			$( ".anotherNewClass" ).switchClass( "anotherNewClass", "newClass", 1000 );
+			return false;
+		});
+	});
+	</script>
+</head>
+<body>
+
+<div class="toggler">
+	<div id="effect" class="newClass ui-corner-all">
+			Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede.
+	</div>
+</div>
+<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>
+
+<div class="demo-description">
+<p>Click the button above to preview the effect.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/switchClass/index.html b/apps/it/static/js/ui/demos/switchClass/index.html
new file mode 100644
index 0000000..3620fd7
--- /dev/null
+++ b/apps/it/static/js/ui/demos/switchClass/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Effects Demos</title>
+</head>
+<body>
+
+<ul>
+	<li><a href="default.html">Default functionality</a></li>
+</ul>
+
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/tabs/ajax.html b/apps/it/static/js/ui/demos/tabs/ajax.html
new file mode 100644
index 0000000..873a6f1
--- /dev/null
+++ b/apps/it/static/js/ui/demos/tabs/ajax.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Tabs - Content via Ajax</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.tabs.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$(function() {
+		$( "#tabs" ).tabs({
+			beforeLoad: function( event, ui ) {
+				ui.jqXHR.error(function() {
+					ui.panel.html(
+						"Couldn't load this tab. We'll try to fix this as soon as possible. " +
+						"If this wouldn't be a demo." );
+				});
+			}
+		});
+	});
+	</script>
+</head>
+<body>
+
+<div id="tabs">
+	<ul>
+		<li><a href="#tabs-1">Preloaded</a></li>
+		<li><a href="ajax/content1.html">Tab 1</a></li>
+		<li><a href="ajax/content2.html">Tab 2</a></li>
+		<li><a href="ajax/content3-slow.php">Tab 3 (slow)</a></li>
+		<li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li>
+	</ul>
+	<div id="tabs-1">
+		<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
+	</div>
+</div>
+
+<div class="demo-description">
+<p>Fetch external content via Ajax for the tabs by setting an href value in the tab links.  While the Ajax request is waiting for a response, the tab label changes to say "Loading...", then returns to the normal label once loaded.</p>
+<p>Tabs 3 and 4 demonstrate slow-loading and broken AJAX tabs, and how to handle serverside errors in those cases. Note: These two require a webserver to interpret PHP. They won't work from the filesystem.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/tabs/ajax/content1.html b/apps/it/static/js/ui/demos/tabs/ajax/content1.html
new file mode 100644
index 0000000..472bdfb
--- /dev/null
+++ b/apps/it/static/js/ui/demos/tabs/ajax/content1.html
@@ -0,0 +1,4 @@
+<p><strong>This content was loaded via ajax.</strong></p>
+<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
+<p>Mauris vitae ante. Curabitur augue. Nulla purus nibh, lobortis ut, feugiat at, aliquam id, purus. Sed venenatis, lorem venenatis volutpat commodo, purus quam lacinia justo, mattis interdum pede pede a odio. Fusce nibh. Morbi nisl mauris, dapibus in, tristique eget, accumsan et, pede. Donec mauris risus, pulvinar ut, faucibus eu, mollis in, nunc. In augue massa, commodo a, cursus vehicula, varius eu, dui. Suspendisse sodales suscipit lorem. Morbi malesuada, eros quis condimentum dignissim, lectus nibh tristique urna, non bibendum diam massa vel risus. Morbi suscipit. Proin egestas, eros at scelerisque scelerisque, dolor lacus fringilla lacus, ut ullamcorper mi magna at quam. Aliquam sed elit. Aliquam turpis purus, congue quis, iaculis id, ullamcorper sit amet, justo. Maecenas sed mauris. Proin magna justo, interdum in, tincidunt eu, viverra eu, turpis. Suspendisse mollis. In magna. Phasellus pellentesque, urna pellentesque convallis pellentesque, augue sem blandit pede, at rhoncus libero nisl a odio.</p>
+<p>Sed vitae nibh non magna semper tempor. Duis dolor. Nam congue laoreet arcu. Fusce lobortis enim quis ligula. Maecenas commodo odio id mi. Maecenas scelerisque tellus eu odio. Etiam dolor purus, lacinia a, imperdiet in, aliquam et, eros. In pellentesque. Nullam ac massa. Integer et turpis. Ut quam augue, congue non, imperdiet id, eleifend ac, nisi. Etiam ac arcu. Cras iaculis accumsan erat. Nullam vulputate sapien nec nisi pretium rhoncus. Aliquam a nibh. Vivamus est ante, fermentum a, tincidunt ut, imperdiet nec, velit. Aenean non tortor. Sed nec mauris eget tellus condimentum rutrum.</p>
+\ No newline at end of file
diff --git a/apps/it/static/js/ui/demos/tabs/ajax/content2.html b/apps/it/static/js/ui/demos/tabs/ajax/content2.html
new file mode 100644
index 0000000..18b03e4
--- /dev/null
+++ b/apps/it/static/js/ui/demos/tabs/ajax/content2.html
@@ -0,0 +1,4 @@
+<p><strong>This other content was loaded via ajax.</strong></p>
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec turpis justo, et facilisis ligula. In congue interdum odio, a scelerisque eros posuere ac. Aenean massa tellus, dictum sit amet laoreet ut, aliquam in orci. Duis eu aliquam ligula. Nullam vel placerat ligula. Fusce venenatis viverra dictum. Phasellus dui dolor, imperdiet in sodales at, mattis sed libero. Morbi ac ipsum ligula. Quisque suscipit dui vel diam pretium nec cursus lacus malesuada. Donec sollicitudin, eros eget dignissim mollis, risus leo feugiat tellus, vel posuere nisl ipsum eu erat. Quisque posuere lacinia imperdiet. Quisque nunc leo, elementum quis ultricies et, vehicula sit amet turpis. Nullam sed nunc nec nibh condimentum mattis. Quisque sed ligula sit amet nisi ultricies bibendum eget id nisi.</p>
+<p>Proin ut erat vel nunc tincidunt commodo. Curabitur feugiat, nisi et vehicula viverra, nisl orci eleifend arcu, sed blandit lectus nisl quis nisi. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Aenean rutrum gravida velit ac imperdiet. Integer vitae arcu risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin tincidunt orci at leo egestas porta. Vivamus ac augue et enim bibendum hendrerit ut id urna. Donec sollicitudin pulvinar turpis vitae scelerisque. Etiam tempor porttitor est sed blandit. Phasellus varius consequat leo eget tincidunt. Aliquam ac dui lectus. In et consectetur orci. Duis posuere nulla ac turpis faucibus vestibulum. Sed ut velit et dolor rhoncus dapibus. Sed sit amet pellentesque est.</p>
+<p>Nam in volutpat orci. Morbi sit amet orci in erat egestas dignissim. Etiam mi sapien, tempus sed iaculis a, adipiscing quis tellus. Suspendisse potenti. Nam malesuada tristique vestibulum. In tempor tellus dignissim neque consectetur eu vestibulum nisl pellentesque. Phasellus ultrices cursus velit, id aliquam nisl fringilla quis. Cras varius elit sed urna ultrices congue. Sed ornare odio sed velit pellentesque id varius nisl sodales. Sed auctor ligula egestas mi pharetra ut consectetur erat pharetra.</p>
+\ No newline at end of file
diff --git a/apps/it/static/js/ui/demos/tabs/ajax/content3-slow.php b/apps/it/static/js/ui/demos/tabs/ajax/content3-slow.php
new file mode 100644
index 0000000..7ad43ec
--- /dev/null
+++ b/apps/it/static/js/ui/demos/tabs/ajax/content3-slow.php
@@ -0,0 +1,7 @@
+<?php
+sleep(1);
+?>
+<p><strong>This content was loaded via ajax, though it took a second.</strong></p>
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec turpis justo, et facilisis ligula. In congue interdum odio, a scelerisque eros posuere ac. Aenean massa tellus, dictum sit amet laoreet ut, aliquam in orci. Duis eu aliquam ligula. Nullam vel placerat ligula. Fusce venenatis viverra dictum. Phasellus dui dolor, imperdiet in sodales at, mattis sed libero. Morbi ac ipsum ligula. Quisque suscipit dui vel diam pretium nec cursus lacus malesuada. Donec sollicitudin, eros eget dignissim mollis, risus leo feugiat tellus, vel posuere nisl ipsum eu erat. Quisque posuere lacinia imperdiet. Quisque nunc leo, elementum quis ultricies et, vehicula sit amet turpis. Nullam sed nunc nec nibh condimentum mattis. Quisque sed ligula sit amet nisi ultricies bibendum eget id nisi.</p>
+<p>Proin ut erat vel nunc tincidunt commodo. Curabitur feugiat, nisi et vehicula viverra, nisl orci eleifend arcu, sed blandit lectus nisl quis nisi. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Aenean rutrum gravida velit ac imperdiet. Integer vitae arcu risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin tincidunt orci at leo egestas porta. Vivamus ac augue et enim bibendum hendrerit ut id urna. Donec sollicitudin pulvinar turpis vitae scelerisque. Etiam tempor porttitor est sed blandit. Phasellus varius consequat leo eget tincidunt. Aliquam ac dui lectus. In et consectetur orci. Duis posuere nulla ac turpis faucibus vestibulum. Sed ut velit et dolor rhoncus dapibus. Sed sit amet pellentesque est.</p>
+<p>Nam in volutpat orci. Morbi sit amet orci in erat egestas dignissim. Etiam mi sapien, tempus sed iaculis a, adipiscing quis tellus. Suspendisse potenti. Nam malesuada tristique vestibulum. In tempor tellus dignissim neque consectetur eu vestibulum nisl pellentesque. Phasellus ultrices cursus velit, id aliquam nisl fringilla quis. Cras varius elit sed urna ultrices congue. Sed ornare odio sed velit pellentesque id varius nisl sodales. Sed auctor ligula egestas mi pharetra ut consectetur erat pharetra.</p>
+\ No newline at end of file
diff --git a/apps/it/static/js/ui/demos/tabs/ajax/content4-broken.php b/apps/it/static/js/ui/demos/tabs/ajax/content4-broken.php
new file mode 100644
index 0000000..55ea2fe
--- /dev/null
+++ b/apps/it/static/js/ui/demos/tabs/ajax/content4-broken.php
@@ -0,0 +1,3 @@
+<?php 
+header("HTTP/1.0 404 Not Found");
+?>
+\ No newline at end of file
diff --git a/apps/it/static/js/ui/demos/tabs/bottom.html b/apps/it/static/js/ui/demos/tabs/bottom.html
new file mode 100644
index 0000000..4841608
--- /dev/null
+++ b/apps/it/static/js/ui/demos/tabs/bottom.html
@@ -0,0 +1,58 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Tabs - Tabs at bottom</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.tabs.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$(function() {
+		$( "#tabs" ).tabs();
+
+		// fix the classes
+		$( ".tabs-bottom .ui-tabs-nav, .tabs-bottom .ui-tabs-nav > *" )
+			.removeClass( "ui-corner-all ui-corner-top" )
+			.addClass( "ui-corner-bottom" );
+
+		// move the nav to the bottom
+		$( ".tabs-bottom .ui-tabs-nav" ).appendTo( ".tabs-bottom" );
+	});
+	</script>
+	<style>
+	/* force a height so the tabs don't jump as content height changes */
+	#tabs .tabs-spacer { float: left; height: 200px; }
+	.tabs-bottom .ui-tabs-nav { clear: left; padding: 0 .2em .2em .2em; }
+	.tabs-bottom .ui-tabs-nav li { top: auto; bottom: 0; margin: 0 .2em 1px 0; border-bottom: auto; border-top: 0; }
+	.tabs-bottom .ui-tabs-nav li.ui-tabs-active { margin-top: -1px; padding-top: 1px; }
+	</style>
+</head>
+<body>
+
+<div id="tabs" class="tabs-bottom">
+	<ul>
+		<li><a href="#tabs-1">Nunc tincidunt</a></li>
+		<li><a href="#tabs-2">Proin dolor</a></li>
+		<li><a href="#tabs-3">Aenean lacinia</a></li>
+	</ul>
+	<div class="tabs-spacer"></div>
+	<div id="tabs-1">
+		<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
+	</div>
+	<div id="tabs-2">
+		<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
+	</div>
+	<div id="tabs-3">
+		<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
+		<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
+	</div>
+</div>
+
+<div class="demo-description">
+<p>With some additional CSS (for positioning) and JS (to put the right classes on elements) the tabs can be placed below their content.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/tabs/collapsible.html b/apps/it/static/js/ui/demos/tabs/collapsible.html
new file mode 100644
index 0000000..1f01aa3
--- /dev/null
+++ b/apps/it/static/js/ui/demos/tabs/collapsible.html
@@ -0,0 +1,48 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Tabs - Collapse content</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.tabs.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$(function() {
+		$( "#tabs" ).tabs({
+			collapsible: true
+		});
+	});
+	</script>
+</head>
+<body>
+
+<div id="tabs">
+	<ul>
+		<li><a href="#tabs-1">Nunc tincidunt</a></li>
+		<li><a href="#tabs-2">Proin dolor</a></li>
+		<li><a href="#tabs-3">Aenean lacinia</a></li>
+	</ul>
+	<div id="tabs-1">
+		<p><strong>Click this tab again to close the content pane.</strong></p>
+		<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
+	</div>
+	<div id="tabs-2">
+		<p><strong>Click this tab again to close the content pane.</strong></p>
+		<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
+	</div>
+	<div id="tabs-3">
+		<p><strong>Click this tab again to close the content pane.</strong></p>
+		<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
+	</div>
+</div>
+
+<div class="demo-description">
+<p>Click the selected tab to toggle its content closed/open.  To enable this functionality, set the <code>collapsible</code> option to true.</p>
+<pre><code>collapsible: true
+</code></pre>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/tabs/default.html b/apps/it/static/js/ui/demos/tabs/default.html
new file mode 100644
index 0000000..18e587e
--- /dev/null
+++ b/apps/it/static/js/ui/demos/tabs/default.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Tabs - Default functionality</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.tabs.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$(function() {
+		$( "#tabs" ).tabs();
+	});
+	</script>
+</head>
+<body>
+
+<div id="tabs">
+	<ul>
+		<li><a href="#tabs-1">Nunc tincidunt</a></li>
+		<li><a href="#tabs-2">Proin dolor</a></li>
+		<li><a href="#tabs-3">Aenean lacinia</a></li>
+	</ul>
+	<div id="tabs-1">
+		<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
+	</div>
+	<div id="tabs-2">
+		<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
+	</div>
+	<div id="tabs-3">
+		<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
+		<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
+	</div>
+</div>
+
+<div class="demo-description">
+<p>Click tabs to swap between content that is broken into logical sections.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/tabs/index.html b/apps/it/static/js/ui/demos/tabs/index.html
new file mode 100644
index 0000000..779dfd2
--- /dev/null
+++ b/apps/it/static/js/ui/demos/tabs/index.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Tabs Demos</title>
+</head>
+<body>
+
+<ul>
+	<li><a href="default.html">Default functionality</a></li>
+	<li><a href="ajax.html">Content via Ajax</a></li>
+	<li><a href="mouseover.html">Open on mouseover</a></li>
+	<li><a href="collapsible.html">Collapse content</a></li>
+	<li><a href="sortable.html">Sortable</a></li>
+	<li><a href="manipulation.html">Simple manipulation</a></li>
+	<li><a href="bottom.html">Tabs below content</a></li>
+</ul>
+
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/tabs/manipulation.html b/apps/it/static/js/ui/demos/tabs/manipulation.html
new file mode 100644
index 0000000..62239c4
--- /dev/null
+++ b/apps/it/static/js/ui/demos/tabs/manipulation.html
@@ -0,0 +1,122 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Tabs - Simple manipulation</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.position.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.button.js"></script>
+	<script src="../../ui/jquery.ui.tabs.js"></script>
+	<script src="../../ui/jquery.ui.dialog.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	#dialog label, #dialog input { display:block; }
+	#dialog label { margin-top: 0.5em; }
+	#dialog input, #dialog textarea { width: 95%; }
+	#tabs { margin-top: 1em; }
+	#tabs li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; }
+	#add_tab { cursor: pointer; }
+	</style>
+	<script>
+	$(function() {
+		var tabTitle = $( "#tab_title" ),
+			tabContent = $( "#tab_content" ),
+			tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>",
+			tabCounter = 2;
+
+		var tabs = $( "#tabs" ).tabs();
+
+		// modal dialog init: custom buttons and a "close" callback resetting the form inside
+		var dialog = $( "#dialog" ).dialog({
+			autoOpen: false,
+			modal: true,
+			buttons: {
+				Add: function() {
+					addTab();
+					$( this ).dialog( "close" );
+				},
+				Cancel: function() {
+					$( this ).dialog( "close" );
+				}
+			},
+			close: function() {
+				form[ 0 ].reset();
+			}
+		});
+
+		// addTab form: calls addTab function on submit and closes the dialog
+		var form = dialog.find( "form" ).submit(function( event ) {
+			addTab();
+			dialog.dialog( "close" );
+			event.preventDefault();
+		});
+
+		// actual addTab function: adds new tab using the input from the form above
+		function addTab() {
+			var label = tabTitle.val() || "Tab " + tabCounter,
+				id = "tabs-" + tabCounter,
+				li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) ),
+				tabContentHtml = tabContent.val() || "Tab " + tabCounter + " content.";
+
+			tabs.find( ".ui-tabs-nav" ).append( li );
+			tabs.append( "<div id='" + id + "'><p>" + tabContentHtml + "</p></div>" );
+			tabs.tabs( "refresh" );
+			tabCounter++;
+		}
+
+		// addTab button: just opens the dialog
+		$( "#add_tab" )
+			.button()
+			.click(function() {
+				dialog.dialog( "open" );
+			});
+
+		// close icon: removing the tab on click
+		tabs.delegate( "span.ui-icon-close", "click", function() {
+			var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );
+			$( "#" + panelId ).remove();
+			tabs.tabs( "refresh" );
+		});
+
+		tabs.bind( "keyup", function( event ) {
+			if ( event.altKey && event.keyCode === $.ui.keyCode.BACKSPACE ) {
+				var panelId = tabs.find( ".ui-tabs-active" ).remove().attr( "aria-controls" );
+				$( "#" + panelId ).remove();
+				tabs.tabs( "refresh" );
+			}
+		});
+	});
+	</script>
+</head>
+<body>
+
+<div id="dialog" title="Tab data">
+	<form>
+		<fieldset class="ui-helper-reset">
+			<label for="tab_title">Title</label>
+			<input type="text" name="tab_title" id="tab_title" value="" class="ui-widget-content ui-corner-all" />
+			<label for="tab_content">Content</label>
+			<textarea name="tab_content" id="tab_content" class="ui-widget-content ui-corner-all"></textarea>
+		</fieldset>
+	</form>
+</div>
+
+<button id="add_tab">Add Tab</button>
+
+<div id="tabs">
+	<ul>
+		<li><a href="#tabs-1">Nunc tincidunt</a> <span class="ui-icon ui-icon-close" role="presentation">Remove Tab</span></li>
+	</ul>
+	<div id="tabs-1">
+		<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
+	</div>
+</div>
+
+<div class="demo-description">
+<p>Simple tabs adding and removing.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/tabs/mouseover.html b/apps/it/static/js/ui/demos/tabs/mouseover.html
new file mode 100644
index 0000000..38e43d3
--- /dev/null
+++ b/apps/it/static/js/ui/demos/tabs/mouseover.html
@@ -0,0 +1,44 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Tabs - Open on mouseover</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.tabs.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$(function() {
+		$( "#tabs" ).tabs({
+			event: "mouseover"
+		});
+	});
+	</script>
+</head>
+<body>
+
+<div id="tabs">
+	<ul>
+		<li><a href="#tabs-1">Nunc tincidunt</a></li>
+		<li><a href="#tabs-2">Proin dolor</a></li>
+		<li><a href="#tabs-3">Aenean lacinia</a></li>
+	</ul>
+	<div id="tabs-1">
+		<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
+	</div>
+	<div id="tabs-2">
+		<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
+	</div>
+	<div id="tabs-3">
+		<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
+		<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
+	</div>
+</div>
+
+<div class="demo-description">
+<p>Toggle sections open/closed on mouseover with the <code>event</code> option. The default value for event is "click."</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/tabs/sortable.html b/apps/it/static/js/ui/demos/tabs/sortable.html
new file mode 100644
index 0000000..9eeba95
--- /dev/null
+++ b/apps/it/static/js/ui/demos/tabs/sortable.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Tabs - Sortable</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mouse.js"></script>
+	<script src="../../ui/jquery.ui.sortable.js"></script>
+	<script src="../../ui/jquery.ui.tabs.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$(function() {
+		var tabs = $( "#tabs" ).tabs();
+		tabs.find( ".ui-tabs-nav" ).sortable({
+			axis: "x",
+			stop: function() {
+				tabs.tabs( "refresh" );
+			}
+		});
+	});
+	</script>
+</head>
+<body>
+
+<div id="tabs">
+	<ul>
+		<li><a href="#tabs-1">Nunc tincidunt</a></li>
+		<li><a href="#tabs-2">Proin dolor</a></li>
+		<li><a href="#tabs-3">Aenean lacinia</a></li>
+	</ul>
+	<div id="tabs-1">
+		<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
+	</div>
+	<div id="tabs-2">
+		<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
+	</div>
+	<div id="tabs-3">
+		<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
+		<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
+	</div>
+</div>
+
+<div class="demo-description">
+<p>Drag the tabs above to re-order them.</p>
+<p>Making tabs sortable is as simple as calling <code>.sortable()</code> on the <code>.ui-tabs-nav</code> element.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/tabs/vertical.html b/apps/it/static/js/ui/demos/tabs/vertical.html
new file mode 100644
index 0000000..874a127
--- /dev/null
+++ b/apps/it/static/js/ui/demos/tabs/vertical.html
@@ -0,0 +1,54 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Tabs - Vertical Tabs functionality</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.tabs.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$(function() {
+		$( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
+		$( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );
+	});
+	</script>
+	<style>
+	.ui-tabs-vertical { width: 55em; }
+	.ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; }
+	.ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
+	.ui-tabs-vertical .ui-tabs-nav li a { display:block; }
+	.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; }
+	.ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;}
+	</style>
+</head>
+<body>
+
+<div id="tabs">
+	<ul>
+		<li><a href="#tabs-1">Nunc tincidunt</a></li>
+		<li><a href="#tabs-2">Proin dolor</a></li>
+		<li><a href="#tabs-3">Aenean lacinia</a></li>
+	</ul>
+	<div id="tabs-1">
+		<h2>Content heading 1</h2>
+		<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
+	</div>
+	<div id="tabs-2">
+		<h2>Content heading 2</h2>
+		<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
+	</div>
+	<div id="tabs-3">
+		<h2>Content heading 3</h2>
+		<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
+		<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
+	</div>
+</div>
+
+<div class="demo-description">
+<p>Click tabs to swap between content that is broken into logical sections.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/toggle/default.html b/apps/it/static/js/ui/demos/toggle/default.html
new file mode 100644
index 0000000..5150116
--- /dev/null
+++ b/apps/it/static/js/ui/demos/toggle/default.html
@@ -0,0 +1,103 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Effects - Toggle Demo</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.effect.js"></script>
+	<script src="../../ui/jquery.ui.effect-blind.js"></script>
+	<script src="../../ui/jquery.ui.effect-bounce.js"></script>
+	<script src="../../ui/jquery.ui.effect-clip.js"></script>
+	<script src="../../ui/jquery.ui.effect-drop.js"></script>
+	<script src="../../ui/jquery.ui.effect-explode.js"></script>
+	<script src="../../ui/jquery.ui.effect-fold.js"></script>
+	<script src="../../ui/jquery.ui.effect-highlight.js"></script>
+	<script src="../../ui/jquery.ui.effect-pulsate.js"></script>
+	<script src="../../ui/jquery.ui.effect-scale.js"></script>
+	<script src="../../ui/jquery.ui.effect-shake.js"></script>
+	<script src="../../ui/jquery.ui.effect-slide.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	.toggler {
+		width: 500px;
+		height: 200px;
+	}
+	#button {
+		padding: .5em 1em;
+		text-decoration: none;
+	}
+	#effect {
+		position: relative;
+		width: 240px;
+		height: 135px;
+		padding: 0.4em;
+	}
+	#effect h3 {
+		margin: 0;
+		padding: 0.4em;
+		text-align: center;
+	}
+	</style>
+	<script>
+	$(function() {
+		// run the currently selected effect
+		function runEffect() {
+			// get effect type from
+			var selectedEffect = $( "#effectTypes" ).val();
+
+			// most effect types need no options passed by default
+			var options = {};
+			// some effects have required parameters
+			if ( selectedEffect === "scale" ) {
+				options = { percent: 0 };
+			} else if ( selectedEffect === "size" ) {
+				options = { to: { width: 200, height: 60 } };
+			}
+
+			// run the effect
+			$( "#effect" ).toggle( selectedEffect, options, 500 );
+		};
+
+		// set effect from select menu value
+		$( "#button" ).click(function() {
+			runEffect();
+			return false;
+		});
+	});
+	</script>
+</head>
+<body>
+
+<div class="toggler">
+	<div id="effect" class="ui-widget-content ui-corner-all">
+		<h3 class="ui-widget-header ui-corner-all">Toggle</h3>
+		<p>
+			Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
+		</p>
+	</div>
+</div>
+
+<select name="effects" id="effectTypes">
+	<option value="blind">Blind</option>
+	<option value="bounce">Bounce</option>
+	<option value="clip">Clip</option>
+	<option value="drop">Drop</option>
+	<option value="explode">Explode</option>
+	<option value="fold">Fold</option>
+	<option value="highlight">Highlight</option>
+	<option value="puff">Puff</option>
+	<option value="pulsate">Pulsate</option>
+	<option value="scale">Scale</option>
+	<option value="shake">Shake</option>
+	<option value="size">Size</option>
+	<option value="slide">Slide</option>
+</select>
+
+<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>
+
+<div class="demo-description">
+<p>Click the button above to preview the effect.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/toggle/index.html b/apps/it/static/js/ui/demos/toggle/index.html
new file mode 100644
index 0000000..3620fd7
--- /dev/null
+++ b/apps/it/static/js/ui/demos/toggle/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Effects Demos</title>
+</head>
+<body>
+
+<ul>
+	<li><a href="default.html">Default functionality</a></li>
+</ul>
+
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/toggleClass/default.html b/apps/it/static/js/ui/demos/toggleClass/default.html
new file mode 100644
index 0000000..01fa1d5
--- /dev/null
+++ b/apps/it/static/js/ui/demos/toggleClass/default.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Effects - toggleClass Demo</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.effect.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	.toggler { width: 500px; height: 200px; position: relative; }
+	#button { padding: .5em 1em; text-decoration: none; }
+	#effect {position: relative;  width: 240px;  padding: 1em; letter-spacing: 0; font-size: 1.2em; border: 1px solid #000; background: #eee; color: #333; }
+	.newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; }
+	</style>
+	<script>
+	$(function() {
+		$( "#button" ).click(function() {
+			$( "#effect" ).toggleClass( "newClass", 1000 );
+			return false;
+		});
+	});
+	</script>
+</head>
+<body>
+
+<div class="toggler">
+	<div id="effect" class="newClass ui-corner-all">
+			Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede.
+	</div>
+</div>
+
+<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>
+
+<div class="demo-description">
+<p>Click the button above to preview the effect.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/toggleClass/index.html b/apps/it/static/js/ui/demos/toggleClass/index.html
new file mode 100644
index 0000000..3620fd7
--- /dev/null
+++ b/apps/it/static/js/ui/demos/toggleClass/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Effects Demos</title>
+</head>
+<body>
+
+<ul>
+	<li><a href="default.html">Default functionality</a></li>
+</ul>
+
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/tooltip/ajax/content1.html b/apps/it/static/js/ui/demos/tooltip/ajax/content1.html
new file mode 100644
index 0000000..a1401b2
--- /dev/null
+++ b/apps/it/static/js/ui/demos/tooltip/ajax/content1.html
@@ -0,0 +1 @@
+<p><strong>This content was loaded via ajax.</strong></p>
+\ No newline at end of file
diff --git a/apps/it/static/js/ui/demos/tooltip/ajax/content2.html b/apps/it/static/js/ui/demos/tooltip/ajax/content2.html
new file mode 100644
index 0000000..f4132d7
--- /dev/null
+++ b/apps/it/static/js/ui/demos/tooltip/ajax/content2.html
@@ -0,0 +1 @@
+<p><strong>This other content was loaded via ajax.</strong></p>
+\ No newline at end of file
diff --git a/apps/it/static/js/ui/demos/tooltip/custom-animation.html b/apps/it/static/js/ui/demos/tooltip/custom-animation.html
new file mode 100644
index 0000000..02f2003
--- /dev/null
+++ b/apps/it/static/js/ui/demos/tooltip/custom-animation.html
@@ -0,0 +1,54 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Tooltip - Custom animation demo</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.position.js"></script>
+	<script src="../../ui/jquery.ui.tooltip.js"></script>
+	<script src="../../ui/jquery.ui.effect.js"></script>
+	<script src="../../ui/jquery.ui.effect-explode.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$(function() {
+		$( "#show-option" ).tooltip({
+			show: {
+				effect: "slideDown",
+				delay: 250
+			}
+		});
+		$( "#hide-option" ).tooltip({
+			hide: {
+				effect: "explode",
+				delay: 250
+			}
+		});
+		$( "#open-event" ).tooltip({
+			show: null,
+			position: {
+				my: "left top",
+				at: "left bottom"
+			},
+			open: function( event, ui ) {
+				ui.tooltip.animate({ top: ui.tooltip.position().top + 10 }, "fast" );
+			}
+		});
+	});
+	</script>
+</head>
+<body>
+
+<p>There are various ways to customize the animation of a tooltip.</p>
+<p>You can use the <a id="show-option" href="http://jqueryui.com/demos/tooltip/#option-show" title="slide down on show">show</a> and
+<a id="hide-option" href="http://jqueryui.com/demos/tooltip/#option-hide" title="explode on hide">hide</a> options.</p>
+<p>You can also use the <a id="open-event" href="http://jqueryui.com/demos/tooltip/#event-open" title="move down on show">open event</a>.</p>
+
+<div class="demo-description">
+<p>This demo shows how to customize animations using the show and hide options,
+as well as the open event.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/tooltip/custom-content.html b/apps/it/static/js/ui/demos/tooltip/custom-content.html
new file mode 100644
index 0000000..70e54e2
--- /dev/null
+++ b/apps/it/static/js/ui/demos/tooltip/custom-content.html
@@ -0,0 +1,83 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Tooltip - Custom content</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.position.js"></script>
+	<script src="../../ui/jquery.ui.tooltip.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	.photo {
+		width: 300px;
+		text-align: center;
+	}
+	.photo .ui-widget-header {
+		margin: 1em 0;
+	}
+	.map {
+		width: 350px;
+		height: 350px;
+	}
+	.ui-tooltip {
+		max-width: 350px;
+	}
+	</style>
+	<script>
+	$(function() {
+		$( document ).tooltip({
+			items: "img, [data-geo], [title]",
+			content: function() {
+				var element = $( this );
+				if ( element.is( "[data-geo]" ) ) {
+					var text = element.text();
+					return "<img class='map' alt='" + text +
+						"' src='http://maps.google.com/maps/api/staticmap?" +
+						"zoom=11&size=350x350&maptype=terrain&sensor=false&center=" +
+						text + "'>";
+				}
+				if ( element.is( "[title]" ) ) {
+					return element.attr( "title" );
+				}
+				if ( element.is( "img" ) ) {
+					return element.attr( "alt" );
+				}
+			}
+		});
+	});
+	</script>
+</head>
+<body>
+
+<div class="ui-widget photo">
+	<div class="ui-widget-header ui-corner-all">
+		<h2>St. Stephen's Cathedral</h2>
+		<h3><a href="http://maps.google.com/maps?q=vienna,+austria&amp;z=11" data-geo>Vienna, Austria</a></h3>
+	</div>
+	<a href="http://en.wikipedia.org/wiki/File:Wien_Stefansdom_DSC02656.JPG">
+		<img src="images/st-stephens.jpg" alt="St. Stephen's Cathedral" class="ui-corner-all">
+	</a>
+</div>
+
+<div class="ui-widget photo">
+	<div class="ui-widget-header ui-corner-all">
+		<h2>Tower Bridge</h2>
+		<h3><a href="http://maps.google.com/maps?q=london,+england&amp;z=11" data-geo>London, England</a></h3>
+	</div>
+	<a href="http://en.wikipedia.org/wiki/File:Tower_bridge_London_Twilight_-_November_2006.jpg">
+		<img src="images/tower-bridge.jpg" alt="Tower Bridge" class="ui-corner-all">
+	</a>
+</div>
+
+<p>All images are part of <a href="http://commons.wikimedia.org/wiki/Main_Page">Wikimedia Commons</a>
+and are licensed under <a href="http://creativecommons.org/licenses/by-sa/3.0/deed.en" title="Creative Commons Attribution-ShareAlike 3.0">CC BY-SA 3.0</a> by the copyright holder.</p>
+
+<div class="demo-description">
+<p>Shows how to combine different event delegated tooltips into a single instance, by customizing the items and content options.</p>
+<p>We realize you may want to interact with the map tooltips. This is a planned feature for a future version.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/tooltip/custom-style.html b/apps/it/static/js/ui/demos/tooltip/custom-style.html
new file mode 100644
index 0000000..3cfc708
--- /dev/null
+++ b/apps/it/static/js/ui/demos/tooltip/custom-style.html
@@ -0,0 +1,95 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Tooltip - Custom Styling</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.tooltip.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.position.js"></script>
+	<script src="../../ui/jquery.ui.tooltip.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$(function() {
+		$( document ).tooltip({
+			position: {
+				my: "center bottom-20",
+				at: "center top",
+				using: function( position, feedback ) {
+					$( this ).css( position );
+					$( "<div>" )
+						.addClass( "arrow" )
+						.addClass( feedback.vertical )
+						.addClass( feedback.horizontal )
+						.appendTo( this );
+				}
+			}
+		});
+	});
+	</script>
+	<style>
+	.ui-tooltip, .arrow:after {
+		background: black;
+		border: 2px solid white;
+	}
+	.ui-tooltip {
+		padding: 10px 20px;
+		color: white;
+		border-radius: 20px;
+		font: bold 14px "Helvetica Neue", Sans-Serif;
+		text-transform: uppercase;
+		box-shadow: 0 0 7px black;
+	}
+	.arrow {
+		width: 70px;
+		height: 16px;
+		overflow: hidden;
+		position: absolute;
+		left: 50%;
+		margin-left: -35px;
+		bottom: -16px;
+	}
+	.arrow.top {
+		top: -16px;
+		bottom: auto;
+	}
+	.arrow.left {
+		left: 20%;
+	}
+	.arrow:after {
+		content: "";
+		position: absolute;
+		left: 20px;
+		top: -20px;
+		width: 25px;
+		height: 25px;
+		box-shadow: 6px 5px 9px -9px black;
+		-webkit-transform: rotate(45deg);
+		-moz-transform: rotate(45deg);
+		-ms-transform: rotate(45deg);
+		-o-transform: rotate(45deg);
+		tranform: rotate(45deg);
+	}
+	.arrow.top:after {
+		bottom: -20px;
+		top: auto;
+	}
+	</style>
+</head>
+<body>
+
+<p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover
+the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p>
+<p>But as it's not a native tooltip, it can be styled. Any themes built with
+<a href="http://themeroller.com" title="ThemeRoller: jQuery UI's theme builder application">ThemeRoller</a>
+will also style tooltips accordingly.</p>
+<p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p>
+<p><label for="age">Your age:</label> <input id="age" title="We ask for your age only for statistical purposes."></p>
+<p>Hover the field to see the tooltip.</p>
+
+<div class="demo-description">
+<p>Hover the links above or use the tab key to cycle the focus on each element.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/tooltip/default.html b/apps/it/static/js/ui/demos/tooltip/default.html
new file mode 100644
index 0000000..ef4e746
--- /dev/null
+++ b/apps/it/static/js/ui/demos/tooltip/default.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Tooltip - Default functionality</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.position.js"></script>
+	<script src="../../ui/jquery.ui.tooltip.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<script>
+	$(function() {
+		$( document ).tooltip();
+	});
+	</script>
+	<style>
+	label {
+		display: inline-block;
+		width: 5em;
+	}
+	</style>
+</head>
+<body>
+
+<p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover
+the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p>
+<p>But as it's not a native tooltip, it can be styled. Any themes built with
+<a href="http://themeroller.com" title="ThemeRoller: jQuery UI's theme builder application">ThemeRoller</a>
+will also style tooltips accordingly.</p>
+<p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p>
+<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes."></p>
+<p>Hover the field to see the tooltip.</p>
+
+<div class="demo-description">
+<p>Hover the links above or use the tab key to cycle the focus on each element.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/tooltip/forms.html b/apps/it/static/js/ui/demos/tooltip/forms.html
new file mode 100644
index 0000000..ef7f0e2
--- /dev/null
+++ b/apps/it/static/js/ui/demos/tooltip/forms.html
@@ -0,0 +1,65 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Tooltip - Forms</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.position.js"></script>
+	<script src="../../ui/jquery.ui.tooltip.js"></script>
+	<script src="../../ui/jquery.ui.button.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	label {
+		display: inline-block; width: 5em;
+	}
+	fieldset div {
+		margin-bottom: 2em;
+	}
+	fieldset .help {
+		display: inline-block;
+	}
+	.ui-tooltip {
+		width: 210px;
+	}
+	</style>
+	<script>
+	$(function() {
+		var tooltips = $( "[title]" ).tooltip();
+		$( "<button>" )
+			.text( "Show help" )
+			.button()
+			.click(function() {
+				tooltips.tooltip( "open" );
+			})
+			.insertAfter( "form" );
+	});
+	</script>
+</head>
+<body>
+
+<form>
+	<fieldset>
+		<div>
+			<label for="firstname">Firstname</label>
+			<input id="firstname" name="firstname" title="Please provide your firstname.">
+		</div>
+		<div>
+			<label for="lastname">Lastname</label>
+			<input id="lastname" name="lastname" title="Please provide also your lastname.">
+		</div>
+		<div>
+			<label for="address">Address</label>
+			<input id="address" name="address" title="Your home or work address.">
+		</div>
+	</fieldset>
+</form>
+
+<div class="demo-description">
+<p>Use the button below to display the help texts, or just focus or mouseover the indivdual inputs.</p>
+<p>A fixed width is defined in CSS to make the tooltips look consistent when displayed all at once.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/tooltip/images/st-stephens.jpg b/apps/it/static/js/ui/demos/tooltip/images/st-stephens.jpg
new file mode 100644
index 0000000..30fc36d
--- /dev/null
+++ b/apps/it/static/js/ui/demos/tooltip/images/st-stephens.jpg
diff --git a/apps/it/static/js/ui/demos/tooltip/images/tower-bridge.jpg b/apps/it/static/js/ui/demos/tooltip/images/tower-bridge.jpg
new file mode 100644
index 0000000..d1e14d6
--- /dev/null
+++ b/apps/it/static/js/ui/demos/tooltip/images/tower-bridge.jpg
diff --git a/apps/it/static/js/ui/demos/tooltip/index.html b/apps/it/static/js/ui/demos/tooltip/index.html
new file mode 100644
index 0000000..cebedd0
--- /dev/null
+++ b/apps/it/static/js/ui/demos/tooltip/index.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Tooltip Demos</title>
+</head>
+<body>
+
+<ul>
+	<li><a href="default.html">Default functionality</a></li>
+	<li><a href="custom-style.html">Custom style with arrow</a></li>
+	<li><a href="forms.html">Forms with tooltips</a></li>
+	<li><a href="tracking.html">Track the mouse</a></li>
+	<li><a href="custom-animation.html">Custom animation</a></li>
+	<li><a href="custom-content.html">Custom content</a></li>
+	<li><a href="video-player.html">Video Player</a></li>
+</ul>
+
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/tooltip/tracking.html b/apps/it/static/js/ui/demos/tooltip/tracking.html
new file mode 100644
index 0000000..db2aaaf
--- /dev/null
+++ b/apps/it/static/js/ui/demos/tooltip/tracking.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Tooltip - Track the mouse</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.position.js"></script>
+	<script src="../../ui/jquery.ui.tooltip.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	label {
+		display: inline-block;
+		width: 5em;
+	}
+	</style>
+	<script>
+	$(function() {
+		$( document ).tooltip({
+			track: true
+		});
+	});
+	</script>
+</head>
+<body>
+
+<p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover
+the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p>
+<p>But as it's not a native tooltip, it can be styled. Any themes built with
+<a href="http://themeroller.com" title="ThemeRoller: jQuery UI's theme builder application">ThemeRoller</a>
+will also style tooltips accordingly.</p>
+<p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p>
+<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes."></p>
+<p>Hover the field to see the tooltip.</p>
+
+<div class="demo-description">
+<p>Here the tooltips are positioned relative to the mouse, and follow the mouse while it moves above the element.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/tooltip/video-player.html b/apps/it/static/js/ui/demos/tooltip/video-player.html
new file mode 100644
index 0000000..3a4bc77
--- /dev/null
+++ b/apps/it/static/js/ui/demos/tooltip/video-player.html
@@ -0,0 +1,117 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Tooltip - Video Player demo</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.position.js"></script>
+	<script src="../../ui/jquery.ui.tooltip.js"></script>
+	<script src="../../ui/jquery.ui.button.js"></script>
+	<script src="../../ui/jquery.ui.menu.js"></script>
+	<script src="../../ui/jquery.ui.effect.js"></script>
+	<script src="../../ui/jquery.ui.effect-blind.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	.player {
+		width: 500px;
+		height: 300px;
+		border: 2px groove gray;
+		background: rgb(200, 200, 200);
+		text-align: center;
+		line-height: 300px;
+	}
+	.ui-tooltip {
+		border: 1px solid white;
+		background: rgba(20, 20, 20, 1);
+		color: white;
+	}
+	.set {
+		display: inline-block;
+	}
+	.notification {
+		position: absolute;
+		display: inline-block;
+		font-size: 2em;
+		padding: .5em;
+		box-shadow: 2px 2px 5px -2px rgba(0,0,0,0.5);
+	}
+	</style>
+	<script>
+	$(function() {
+		function notify( input ) {
+			var msg = "Selected " + $.trim( input.data( "tooltip-title" ) || input.text() );
+			$( "<div>" )
+				.appendTo( document.body )
+				.text( msg )
+				.addClass( "notification ui-state-default ui-corner-bottom" )
+				.position({
+					my: "center top",
+					at: "center top",
+					of: window
+				})
+				.show({
+					effect: "blind"
+				})
+				.delay( 1000 )
+				.hide({
+					effect: "blind",
+					duration: "slow"
+				}, function() {
+					$( this ).remove();
+				});
+		}
+
+		$( "button" ).each(function() {
+			var button = $( this ).button({
+				icons: {
+					primary: $( this ).data( "icon" )
+				},
+				text: !!$( this ).attr( "title" )
+			});
+			button.click(function() {
+				notify( button );
+			});
+		});
+		$( ".set" ).buttonset({
+			items: "button"
+		});
+
+		$( document ).tooltip({
+			position: {
+				my: "center top",
+				at: "center bottom+5",
+			},
+			show: {
+				duration: "fast"
+			},
+			hide: {
+				effect: "hide"
+			}
+		});
+	});
+	</script>
+</head>
+<body>
+
+<div class="player">Here Be Video (HTML5?)</div>
+<div class="tools">
+	<span class="set">
+		<button data-icon="ui-icon-circle-arrow-n" title="I like this">Like</button>
+		<button data-icon="ui-icon-circle-arrow-s">I dislike this</button>
+	</span>
+	<div class="set">
+		<button data-icon="ui-icon-circle-plus" title="Add to Watch Later">Add to</button>
+		<button class="menu" data-icon="ui-icon-triangle-1-s">Add to favorites or playlist</button>
+	</div>
+	<button title="Share this video">Share</button>
+	<button data-icon="ui-icon-alert">Flag as inappropriate</button>
+</div>
+
+<div class="demo-description">
+<p>A fake video player with like/share/stats button, each with a custom-styled tooltip.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/widget/default.html b/apps/it/static/js/ui/demos/widget/default.html
new file mode 100644
index 0000000..0ffc671
--- /dev/null
+++ b/apps/it/static/js/ui/demos/widget/default.html
@@ -0,0 +1,178 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Widget - Default functionality</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.position.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.button.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	.custom-colorize {
+		font-size: 20px;
+		position: relative;
+		width: 75px;
+		height: 75px;
+	}
+	.custom-colorize-changer {
+		font-size: 10px;
+		position: absolute;
+		right: 0;
+		bottom: 0;
+	}
+	</style>
+	<script>
+	$(function() {
+		// the widget definition, where "custom" is the namespace,
+		// "colorize" the widget name
+		$.widget( "custom.colorize", {
+			// default options
+			options: {
+				red: 255,
+				green: 0,
+				blue: 0,
+
+				// callbacks
+				change: null,
+				random: null
+			},
+
+			// the constructor
+			_create: function() {
+				this.element
+					// add a class for theming
+					.addClass( "custom-colorize" )
+					// prevent double click to select text
+					.disableSelection();
+
+				this.changer = $( "<button>", {
+					text: "change",
+					"class": "custom-colorize-changer"
+				})
+				.appendTo( this.element )
+				.button();
+
+				// bind click events on the changer button to the random method
+				this._on( this.changer, {
+					// _on won't call random when widget is disabled
+					click: "random"
+				});
+				this._refresh();
+			},
+
+			// called when created, and later when changing options
+			_refresh: function() {
+				this.element.css( "background-color", "rgb(" +
+					this.options.red +"," +
+					this.options.green + "," +
+					this.options.blue + ")"
+				);
+
+				// trigger a callback/event
+				this._trigger( "change" );
+			},
+
+			// a public method to change the color to a random value
+			// can be called directly via .colorize( "random" )
+			random: function( event ) {
+				var colors = {
+					red: Math.floor( Math.random() * 256 ),
+					green: Math.floor( Math.random() * 256 ),
+					blue: Math.floor( Math.random() * 256 )
+				};
+
+				// trigger an event, check if it's canceled
+				if ( this._trigger( "random", event, colors ) !== false ) {
+					this.option( colors );
+				}
+			},
+
+			// events bound via _on are removed automatically
+			// revert other modifications here
+			_destroy: function() {
+				// remove generated elements
+				this.changer.remove();
+
+				this.element
+					.removeClass( "custom-colorize" )
+					.enableSelection()
+					.css( "background-color", "transparent" );
+			},
+
+			// _setOptions is called with a hash of all options that are changing
+			// always refresh when changing options
+			_setOptions: function() {
+				// _super and _superApply handle keeping the right this-context
+				this._superApply( arguments );
+				this._refresh();
+			},
+
+			// _setOption is called for each individual option that is changing
+			_setOption: function( key, value ) {
+				// prevent invalid color values
+				if ( /red|green|blue/.test(key) && (value < 0 || value > 255) ) {
+					return;
+				}
+				this._super( key, value );
+			}
+		});
+
+		// initialize with default options
+		$( "#my-widget1" ).colorize();
+
+		// initialize with two customized options
+		$( "#my-widget2" ).colorize({
+			red: 60,
+			blue: 60
+		});
+
+		// initialize with custom green value
+		// and a random callback to allow only colors with enough green
+		$( "#my-widget3" ).colorize( {
+			green: 128,
+			random: function( event, ui ) {
+				return ui.green > 128;
+			}
+		});
+
+		// click to toggle enabled/disabled
+		$( "#disable" ).click(function() {
+			// use the custom selector created for each widget to find all instances
+			// all instances are toggled together, so we can check the state from the first
+			if ( $( ":custom-colorize" ).colorize( "option", "disabled" ) ) {
+				$( ":custom-colorize" ).colorize( "enable" );
+			} else {
+				$( ":custom-colorize" ).colorize( "disable" );
+			}
+		});
+
+		// click to set options after initialization
+		$( "#black" ).click( function() {
+			$( ":custom-colorize" ).colorize( "option", {
+				red: 0,
+				green: 0,
+				blue: 0
+			});
+		});
+	});
+	</script>
+</head>
+<body>
+
+<div>
+	<div id="my-widget1">color me</div>
+	<div id="my-widget2">color me</div>
+	<div id="my-widget3">color me</div>
+	<button id="disable">Toggle disabled option</button>
+	<button id="black">Go black</button>
+</div>
+
+<div class="demo-description">
+<p>This demo shows a simple custom widget built using the widget factory (jquery.ui.widget.js).</p>
+<p>The three boxes are initialized in different ways. Clicking them changes their background color. View source to see how it works, its heavily commented</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/widget/index.html b/apps/it/static/js/ui/demos/widget/index.html
new file mode 100644
index 0000000..d518b07
--- /dev/null
+++ b/apps/it/static/js/ui/demos/widget/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Widget Demo</title>
+</head>
+<body>
+
+<ul>
+	<li><a href="default.html">Default functionality</a></li>
+</ul>
+
+</body>
+</html>
author	Filipp Lepalaan <f@230.to>	2014-02-19 18:02:09 +0200
committer	Filipp Lepalaan <f@230.to>	2014-02-19 18:02:09 +0200
commit	75ad7e4bd7d69243e7e5281c2642f00478fb072d (patch)
tree	eaaaf360902d369f42d94778aac8803db7973ce0 /apps/it/static/js/ui/demos
parent	cfc7c3f52544af8a71d3fa3988a06fee200d2c24 (diff)
download	pudding-75ad7e4bd7d69243e7e5281c2642f00478fb072d.tar.gz pudding-75ad7e4bd7d69243e7e5281c2642f00478fb072d.tar.bz2 pudding-75ad7e4bd7d69243e7e5281c2642f00478fb072d.zip