lsd_rails 0.1

data/Packages/mootools-more/Tests/Interactive/Interface/HtmlTable_(sortable).html

@@ -0,0 +1,256 @@
+<style>
+table {
+	border: solid #777;
+	border-width: 0px 0px 1px 1px;
+	margin: 10px 0px;
+}
+thead {
+	background: #777;
+	border-bottom: 1px solid #333;
+	color: #fff;
+}
+tr.table-tr-odd {
+	background: #ccc;
+}
+td, th {
+	padding: 4px;
+	border-right: 1px solid #777;
+	border-top: 1px solid #777;
+}
+th, th:hover {
+	cursor: pointer;
+	width: 100px;
+}
+th.table-th-sort {
+	color: #000;
+	background: #fff url(/asset/more/bullet_arrow_down.png) no-repeat right 3px;
+}
+th.table-th-sort-rev {
+	background: #fff url(/asset/more/bullet_arrow_up.png) no-repeat right 3px;
+}
+</style>
+Only sub heads should reflect column sort (and be sortable)
+<table id="single_multi_header_sort">
+	<thead>
+		<tr>
+			<th>col 1</th>
+			<th>col 2</th>
+		</tr>
+		<tr>
+			<th class="sorter">col 1 (sub)</th>
+			<th class="sorter">col 2 (sub)</th>
+		</tr>
+	</thead>
+	<tbody>
+		<tr>
+			<td>1</td>
+			<td>a</td>
+		</tr>
+		<tr>
+			<td>2</td>
+			<td>b</td>
+		</tr>
+		<tr>
+			<td>3</td>
+			<td>c</td>
+		</tr>
+		<tr>
+			<td>4</td>
+			<td>d</td>
+		</tr>
+	</tbody>
+</table>
+All header elements should reflect sort (and be sortable)
+<table id="multi_header_sorts">
+	<thead>
+		<tr>
+			<th>col 1</th>
+			<th>col 2</th>
+		</tr>
+		<tr>
+			<th>col 1 (sub)</th>
+			<th>col 2 (sub)</th>
+		</tr>
+	</thead>
+	<tbody>
+		<tr>
+			<td>1</td>
+			<td>a</td>
+		</tr>
+		<tr>
+			<td>2</td>
+			<td>b</td>
+		</tr>
+		<tr>
+			<td>3</td>
+			<td>c</td>
+		</tr>
+		<tr>
+			<td>4</td>
+			<td>d</td>
+		</tr>
+	</tbody>
+</table>
+<table id="hidden_sorts">
+	<thead>
+		<tr>
+			<th>col 1</th>
+			<th>col 2</th>
+		</tr>
+	</thead>
+	<tbody>
+		<tr>
+			<td><span style="display: none">1</span>1 b</td>
+			<td><span style="display: none">0.01</span>1 ms</td>
+		</tr>
+		<tr>
+			<td><span style="display: none">1024</span>1 B</td>
+			<td><span style="display: none">1</span>1 second</td>
+		</tr>
+		<tr>
+			<td><span style="display: none">1048576</span>1 MB</td>
+			<td><span style="display: none">60</span>1 minute</td>
+		</tr>
+		<tr>
+			<td><span style="display: none">1073741824</span>1 GB</td>
+			<td><span style="display: none">3600</span>1 hour</td>
+		</tr>
+	</tbody>
+</table>
+<p>Date should support sorting with empty fields</p>
+<table id="date_sort_w_empty">
+	<thead>
+		<tr>
+			<th>col 1</th>
+		</tr>
+	</thead>
+	<tbody>
+		<tr><td>1/10/2010</td></tr>
+		<tr><td>Jan 12, 2010</td></tr>
+		<tr><td></td></tr>
+		<tr><td>10-12-2010</td></tr>
+	</tbody>
+</table>
+
+<script src="/depender/build?require=More/HtmlTable.Sort"></script>
+<script>
+new HtmlTable($('single_multi_header_sort'), {
+	sortable: true,
+	thSelector: 'th.sorter'
+});
+
+new HtmlTable($('multi_header_sorts'), {
+	sortable: true
+});
+new HtmlTable($('hidden_sorts'), {
+	sortable: true
+});
+new HtmlTable($('date_sort_w_empty'), {
+	sortable: true,
+	parsers: ['date']
+});
+var t = new HtmlTable({
+	sortable: true,
+	headers: ['fruit', 'colors']
+});
+t.inject(document.body);
+t.push(['apple', 'red']);
+t.push(['lemon', 'yellow']);
+t.push(['plumbs', 'purple']);
+t.push(['grapes', 'green']);
+
+
+var data = [
+	{"id":56,"timezone":"Europe/Amsterdam","name":"Amsterdam","geolat":52.3789,"geolong":4.90067},
+	{"id":46,"timezone":"America/New_York","name":"Atlanta","geolat":33.7525,"geolong":-84.3888},
+	{"id":42,"timezone":"America/Chicago","name":"Austin","geolat":30.2669,"geolong":-97.7428},
+	{"id":63,"timezone":"America/New_York","name":"Baltimore","geolat":39.294255,"geolong":-76.614275},
+	{"id":24,"timezone":"America/New_York","name":"Boston","geolat":42.3583,"geolong":-71.0603},
+	{"id":32,"timezone":"America/Chicago","name":"Chicago","geolat":41.8858,"geolong":-87.6181},
+	{"id":64,"timezone":"America/New_York","name":"Cleveland","geolat":41.499819,"geolong":-81.693716},
+	{"id":43,"timezone":"America/Chicago","name":"Dallas / Fort Worth","geolat":32.7887,"geolong":-96.7676},
+	{"id":25,"timezone":"America/Denver","name":"Denver","geolat":39.734,"geolong":-105.026},
+	{"id":47,"timezone":"America/New_York","name":"Detroit","geolat":42.3333,"geolong":-83.0484},
+	{"id":48,"timezone":"America/Chicago","name":"Houston","geolat":29.7594,"geolong":-95.3594},
+	{"id":66,"timezone":"America/New_York","name":"Indianapolis","geolat":39.767016,"geolong":-86.156255},
+	{"id":65,"timezone":"America/Chicago","name":"Kansas City","geolat":39.090431,"geolong":-94.583644},
+	{"id":49,"timezone":"America/Los_Angeles","name":"Las Vegas","geolat":36.1721,"geolong":-115.122},
+	{"id":61,"timezone":"Europe/London","name":"London","geolat":51.50714,"geolong":-0.126171},
+	{"id":34,"timezone":"America/Los_Angeles","name":"Los Angeles","geolat":34.0443,"geolong":-118.251},
+	{"id":39,"timezone":"America/New_York","name":"Miami","geolat":25.7323,"geolong":-80.2436},
+	{"id":67,"timezone":"America/Chicago","name":"Milwaukee","geolat":43.038902,"geolong":-87.906474},
+	{"id":51,"timezone":"America/Chicago","name":"Minneapolis / St. Paul","geolat":44.9609,"geolong":-93.2642},
+	{"id":70,"timezone":"America/New_York","name":"Montreal","geolat":45.545447,"geolong":-73.639076},
+	{"id":52,"timezone":"America/Chicago","name":"New Orleans","geolat":29.9544,"geolong":-90.075},
+	{"id":22,"timezone":"America/New_York","name":"New York City","geolat":40.7255,"geolong":-73.9983},
+	{"id":72,"timezone":"America/Chicago","name":"Omaha","geolat":41.254006,"geolong":-95.999258},
+	{"id":33,"timezone":"America/New_York","name":"Philadelphia","geolat":39.8694,"geolong":-75.2731},
+	{"id":53,"timezone":"America/Phoenix","name":"Phoenix","geolat":33.4483,"geolong":-112.073},
+	{"id":60,"timezone":"America/New_York","name":"Pittsburgh","geolat":40.4405,"geolong":-79.9961},
+	{"id":37,"timezone":"America/Los_Angeles","name":"Portland","geolat":45.527,"geolong":-122.685},
+	{"id":57,"timezone":"America/New_York","name":"Raleigh / Durham","geolat":35.7797,"geolong":-78.6434},
+	{"id":73,"timezone":"America/New_York","name":"Richmond","geolat":37.542979,"geolong":-77.469092},
+	{"id":71,"timezone":"America/Denver","name":"Salt Lake City","geolat":40.760779,"geolong":-111.891047},
+	{"id":68,"timezone":"America/Chicago","name":"San Antonio","geolat":29.424122,"geolong":-98.493628},
+	{"id":38,"timezone":"America/Los_Angeles","name":"San Diego","geolat":32.7153,"geolong":-117.156},
+	{"id":23,"timezone":"America/Los_Angeles","name":"San Francisco","geolat":37.7587,"geolong":-122.433},
+	{"id":41,"timezone":"America/Los_Angeles","name":"Seattle","geolat":47.6036,"geolong":-122.326},
+	{"id":62,"timezone":"America/Chicago","name":"St. Louis","geolat":38.627491,"geolong":-90.198417},
+	{"id":69,"timezone":"America/New_York","name":"Toronto","geolat":43.670233,"geolong":-79.386755},
+	{"id":59,"timezone":"America/Vancouver","name":"Vancouver","geolat":49.259515,"geolong":-123.103867},
+	{"id":31,"timezone":"America/New_York","name":"Washington, DC","geolat":38.8964,"geolong":-77.0447}
+];
+var myArray = data.map(function(item){
+	return [item.id, item.name, item.timezone, item.geolat, item.geolong];
+});
+
+var myTable = new HtmlTable({
+
+	properties : {
+		border : 1,
+		cellspacing : 0,
+		cellpadding : 5
+	},
+	rows : myArray,
+	headers : ['ID', 'TimeZone', 'Name', 'GEO Latitude', 'GEO Longitude'],
+	sortable : true,
+	parsers : ['number', 'string', 'string', 'float', 'float']
+
+});
+$(myTable).inject(document.body);
+
+
+headers = ["hostname","model","rack","expire"];
+
+rows = [
+["FTP1.uits.uconn.edu", "Dell PowerEdge 1650", "A9", "2005-09-23"],
+["FTP2.uits.uconn.edu", "Dell PowerEdge 1650", "A9", "2005-09-23"],
+["Kerberos1.uits.uconn.edu", "Dell PowerEdge 1650", "A9", "2005-06-21"],
+["Kerberos2.uits.uconn.edu", "Dell PowerEdge 1650", "A9", "2005-06-21"],
+["Mail1.uits.uconn.edu", "Dell PowerEdge 1650", "A9", "2005-06-21"],
+["Mail2.uits.uconn.edu", "Dell PowerEdge 1650", "A9", "2005-06-21"],
+["SSGUnix.uits.uconn.edu", "Dell PowerEdge 1650", "A9", "2005-09-23"],
+["Web1.uits.uconn.edu", "Dell PowerEdge 1650", "A9", "2005-09-23"],
+["Web2.uits.uconn.edu", "Dell PowerEdge 1650", "A9", "2005-09-23"],
+["XEN1.uits.uconn.edu", "IBM XSeries", "C3", "2010-10-08"],
+["XEN2.uits.uconn.edu", "IBM XSeries", "C3", "2010-10-08"],
+["bluet.uconn.edu", "Dell Desktop","D4","2010-08-23"],
+["hm1.uits.uconn.edu", "Dell PowerEdge 6500", "C4", "2009-12-12"],
+["hm2.uits.uconn.edu", "Dell PowerEdge 6500", "C4", "2009-12-12"],
+["hm3.uits.uconn.edu", "Dell PowerEdge 6500", "C4", "2009-12-20"],
+["nicky.uconn.edu", "Dell PowerEdge 1850", "A9", "2009-04-12"]
+];
+
+var myTable = new HtmlTable({
+	properties: {
+		border: 1,
+		cellspacing: 0,
+		cellpadding: 4
+	},
+	headers: headers,
+	rows: rows,
+	sortable: true
+});
+myTable.inject(document.body);
+
+</script>

data/Packages/mootools-more/Tests/Interactive/Interface/HtmlTable_(sortable).yml

@@ -0,0 +1,3 @@
+js-references:
+  - "More/HtmlTable"
+  - "More/HtmlTable.Sort"

data/Packages/mootools-more/Tests/Interactive/Interface/HtmlTable_(zebra).html

@@ -0,0 +1,93 @@
+<style>
+table {
+	border: solid #777;
+	border-width: 0px 0px 1px 1px;
+	margin: 10px 0px;
+}
+thead {
+	background: #777;
+	border-bottom: 1px solid #333;
+	color: #fff;
+}
+tr.table-tr-odd {
+	background: #ccc;
+}
+td, th {
+	padding: 4px;
+	border-right: 1px solid #777;
+	border-top: 1px solid #777;
+}
+th, th:hover {
+	cursor: pointer;
+	width: 100px;
+}
+th.table-th-sort {
+	color: #000;
+	background: #fff url(/asset/more/bullet_arrow_down.png) no-repeat right 3px;
+}
+th.table-th-sort-rev {
+	background: #fff url(/asset/more/bullet_arrow_up.png) no-repeat right 3px;
+}
+</style>
+<script src="/depender/build?require=More/HtmlTable.Sort,More/HtmlTable.Zebra"></script>
+<script>
+var data = [
+	{"id":56,"timezone":"Europe/Amsterdam","name":"Amsterdam","geolat":52.3789,"geolong":4.90067},
+	{"id":46,"timezone":"America/New_York","name":"Atlanta","geolat":33.7525,"geolong":-84.3888},
+	{"id":42,"timezone":"America/Chicago","name":"Austin","geolat":30.2669,"geolong":-97.7428},
+	{"id":63,"timezone":"America/New_York","name":"Baltimore","geolat":39.294255,"geolong":-76.614275},
+	{"id":24,"timezone":"America/New_York","name":"Boston","geolat":42.3583,"geolong":-71.0603},
+	{"id":32,"timezone":"America/Chicago","name":"Chicago","geolat":41.8858,"geolong":-87.6181},
+	{"id":64,"timezone":"America/New_York","name":"Cleveland","geolat":41.499819,"geolong":-81.693716},
+	{"id":43,"timezone":"America/Chicago","name":"Dallas / Fort Worth","geolat":32.7887,"geolong":-96.7676},
+	{"id":25,"timezone":"America/Denver","name":"Denver","geolat":39.734,"geolong":-105.026},
+	{"id":47,"timezone":"America/New_York","name":"Detroit","geolat":42.3333,"geolong":-83.0484},
+	{"id":48,"timezone":"America/Chicago","name":"Houston","geolat":29.7594,"geolong":-95.3594},
+	{"id":66,"timezone":"America/New_York","name":"Indianapolis","geolat":39.767016,"geolong":-86.156255},
+	{"id":65,"timezone":"America/Chicago","name":"Kansas City","geolat":39.090431,"geolong":-94.583644},
+	{"id":49,"timezone":"America/Los_Angeles","name":"Las Vegas","geolat":36.1721,"geolong":-115.122},
+	{"id":61,"timezone":"Europe/London","name":"London","geolat":51.50714,"geolong":-0.126171},
+	{"id":34,"timezone":"America/Los_Angeles","name":"Los Angeles","geolat":34.0443,"geolong":-118.251},
+	{"id":39,"timezone":"America/New_York","name":"Miami","geolat":25.7323,"geolong":-80.2436},
+	{"id":67,"timezone":"America/Chicago","name":"Milwaukee","geolat":43.038902,"geolong":-87.906474},
+	{"id":51,"timezone":"America/Chicago","name":"Minneapolis / St. Paul","geolat":44.9609,"geolong":-93.2642},
+	{"id":70,"timezone":"America/New_York","name":"Montreal","geolat":45.545447,"geolong":-73.639076},
+	{"id":52,"timezone":"America/Chicago","name":"New Orleans","geolat":29.9544,"geolong":-90.075},
+	{"id":22,"timezone":"America/New_York","name":"New York City","geolat":40.7255,"geolong":-73.9983},
+	{"id":72,"timezone":"America/Chicago","name":"Omaha","geolat":41.254006,"geolong":-95.999258},
+	{"id":33,"timezone":"America/New_York","name":"Philadelphia","geolat":39.8694,"geolong":-75.2731},
+	{"id":53,"timezone":"America/Phoenix","name":"Phoenix","geolat":33.4483,"geolong":-112.073},
+	{"id":60,"timezone":"America/New_York","name":"Pittsburgh","geolat":40.4405,"geolong":-79.9961},
+	{"id":37,"timezone":"America/Los_Angeles","name":"Portland","geolat":45.527,"geolong":-122.685},
+	{"id":57,"timezone":"America/New_York","name":"Raleigh / Durham","geolat":35.7797,"geolong":-78.6434},
+	{"id":73,"timezone":"America/New_York","name":"Richmond","geolat":37.542979,"geolong":-77.469092},
+	{"id":71,"timezone":"America/Denver","name":"Salt Lake City","geolat":40.760779,"geolong":-111.891047},
+	{"id":68,"timezone":"America/Chicago","name":"San Antonio","geolat":29.424122,"geolong":-98.493628},
+	{"id":38,"timezone":"America/Los_Angeles","name":"San Diego","geolat":32.7153,"geolong":-117.156},
+	{"id":23,"timezone":"America/Los_Angeles","name":"San Francisco","geolat":37.7587,"geolong":-122.433},
+	{"id":41,"timezone":"America/Los_Angeles","name":"Seattle","geolat":47.6036,"geolong":-122.326},
+	{"id":62,"timezone":"America/Chicago","name":"St. Louis","geolat":38.627491,"geolong":-90.198417},
+	{"id":69,"timezone":"America/New_York","name":"Toronto","geolat":43.670233,"geolong":-79.386755},
+	{"id":59,"timezone":"America/Vancouver","name":"Vancouver","geolat":49.259515,"geolong":-123.103867},
+	{"id":31,"timezone":"America/New_York","name":"Washington, DC","geolat":38.8964,"geolong":-77.0447}
+];
+var myArray = data.map(function(item){
+	return [item.id, item.name, item.timezone, item.geolat, item.geolong];
+});
+
+var myTable = new HtmlTable({
+
+	properties : {
+		border : 1,
+		cellspacing : 0,
+		cellpadding : 5
+  },
+  zebra: true,
+	rows : myArray,
+	headers : ['ID', 'TimeZone', 'Name', 'GEO Latitude', 'GEO Longitude'],
+	sortable : true,
+	parsers : ['number', 'string', 'string', 'float', 'float']
+
+});
+$(myTable).inject(document.body);
+</script>

data/Packages/mootools-more/Tests/Interactive/Interface/HtmlTable_(zebra).yml

@@ -0,0 +1,3 @@
+js-references:
+  - "More/HtmlTable"
+  - "More/HtmlTable.Zebra"

data/Packages/mootools-more/Tests/Interactive/Interface/Keyboard_(nested).html

@@ -0,0 +1,129 @@
+
+<style>
+
+.content div {
+	border: 1px solid white;
+	color: #fff;
+	background: #000;
+}
+.group div {
+	padding: 4px;
+}
+.content .active {
+	border: 1px solid black;
+	color: #000;
+	background: #fff;
+}
+.group {
+	opacity: 0.5;
+}
+.activeGroup {
+	opacity: 1;
+}
+
+</style>
+<div class="content">
+	<p>
+		Use the links to enable/disable the keyboards controlling the sections below. Using the keys for the active section will toggle each example from black to white.
+	</p>
+
+	<dl id="actions"></dl>
+
+
+	<h2>group 1</h2>
+	<div id="group1" class="group">
+		<div id="sa">shift + a</div>
+		<div id="enter">enter</div>
+		<div id="up">up</div>
+	</div>
+	<h2>group 2</h2>
+	<div id="group2" class="group">
+		<div id="ctrld">ctrl+d</div>
+		<div id="space">space</div>
+		<div id="escape">escape</div>
+	</div>
+</div>
+<script src="/depender/build?require=More/Keyboard,Core/Element.Event"></script>
+
+<script>
+
+var kbs = {
+	kb: new Keyboard({title: 'kb'}),
+	kb1: new Keyboard({
+		title: 'kb1',
+		onActivate: function(){
+			$('group1').addClass('activeGroup');
+		},
+		onDeactivate: function(){
+			$('group1').removeClass('activeGroup');
+		},
+		events: {
+			'shift+a': function(){
+				$('sa').toggleClass('active');
+			},
+			'enter': function(){
+				$('enter').toggleClass('active');
+			},
+			'up': function(){
+				$('up').toggleClass('active');
+			}
+		}
+	}),
+
+	kb2: new Keyboard({
+		title: 'kb2',
+		onActivate: function(){
+			$('group2').addClass('activeGroup');
+		},
+		onDeactivate: function(){
+			$('group2').removeClass('activeGroup');
+		},
+		events: {
+			'control+d': function(){
+				$('ctrld').toggleClass('active');
+			},
+			'space': function(e){
+				e.preventDefault();
+				$('space').toggleClass('active');
+			},
+			'esc': function(){
+				$('escape').toggleClass('active');
+			}
+		}
+	})
+};
+
+kbs.kb.manage(kbs.kb1);
+kbs.kb.manage(kbs.kb2);
+kbs.kb.activate();
+kbs.kb1.activate();
+
+makeActions([
+	{
+		title: 'Activate Keyboard 1',
+		fn: function(){
+			kbs.kb1.activate();
+		}
+	},
+	{
+		title: 'Activate Keyboard 2',
+		fn: function(){
+			kbs.kb2.activate();
+		}
+	},
+	{
+		title: 'Deactivate all keyboards.',
+		fn: function(){
+			kbs.kb.deactivate();
+		}
+	},
+	{
+		title: 'Reactivate deactivated keyboard.',
+		description: 'Reactivates the keyboard that was active last when all were deactivated.',
+		fn: function(){
+			kbs.kb.activate();
+		}
+	}
+]);
+
+</script>

data/Packages/mootools-more/Tests/Interactive/Interface/Keyboard_(nested).yml

@@ -0,0 +1,2 @@
+js-references:
+  - "More/Keyboard"

data/Packages/mootools-more/Tests/Interactive/Interface/Keyboard_(single).html

@@ -0,0 +1,93 @@
+<style>
+.content div {
+	border: 1px solid white;
+	color: #fff;
+	background: #000;
+}
+.group div {
+	padding: 4px;
+}
+.content .active {
+	border: 1px solid black;
+	color: #000;
+	background: #fff;
+}
+.content .group {
+	opacity: 0.5;
+}
+.content .activeGroup {
+	opacity: 1;
+}
+
+</style>
+<div class="content">
+	<p>
+		Use the links to enable/disable the keyboards controlling the section below. Using the keys will toggle each example from black to white. Keyboard by default should be disabled.
+	</p>
+
+	<dl id="actions"></dl>
+	<div id="group" class="group">
+		<div id="sa">shift + a</div>
+		<div id="enter">enter</div>
+		<div id="up">up</div>
+		<div id="ctrld">ctrl+d</div>
+		<div id="space">space</div>
+		<div id="escape">escape</div>
+		<div id="colon">shift+;</div>
+		<div id="bracket">]</div>
+	</div>
+</div>
+
+<script src="/depender/build?require=More/Keyboard,Core/Element.Event"></script>
+<script>
+var kb = new Keyboard({
+	events: {
+		'shift+a': function(){
+			$('sa').toggleClass('active');
+		},
+		'enter': function(){
+			$('enter').toggleClass('active');
+		},
+		'up': function(){
+			$('up').toggleClass('active');
+		},
+		'control+d': function(){
+			$('ctrld').toggleClass('active');
+		},
+		'space': function(){
+			$('space').toggleClass('active');
+		},
+		'esc': function(){
+			$('escape').toggleClass('active');
+		},
+		'shift+;': function(){
+			$('colon').toggleClass('active');
+		},
+		']': function(){
+			$('bracket').toggleClass('active');
+		}
+	},
+	onActivate: function(){
+		$('group').addClass('activeGroup');
+	},
+	onDeactivate: function(){
+		$('group').removeClass('activeGroup');
+	}
+});
+makeActions([
+	{
+		title: 'Activate keyboard.',
+		fn: function(){
+			kb.activate();
+		}
+	},
+	{
+		title: 'Deactivate keyboard.',
+		fn: function(){
+			kb.deactivate();
+		}
+	}
+]);
+
+
+</script>

data/Packages/mootools-more/Tests/Interactive/Interface/Keyboard_(single).yml

@@ -0,0 +1,2 @@
+js-references:
+  - "More/Keyboard"

data/Packages/mootools-more/Tests/Interactive/Interface/Mask.html

@@ -0,0 +1,63 @@
+<style>
+
+
+#actions {
+	float: right;
+}
+</style>
+
+<link rel="stylesheet" href="/asset/more/mask.css" type="text/css" media="screen" name="no name" charset="utf-8">
+
+<div style="border: 2px solid #777; background: #fbb; padding: 20px; height: 700px; width: 400px;">
+	<div id="foo" style="width: 200px; height: 200px; overflow:hidden; background:#555; border: 10px solid #000;">
+		foo<br>
+		foo<br>
+		foo<br>
+		foo<br>
+		foo<br>
+	</div>
+</div>
+
+<script src="/depender/build?require=More/Mask,Core/Element.Event"></script>
+
+<script>
+
+makeActions([
+	{
+		title: "Mask:element",
+		description: "Overlays a target element with a semi-transparent layer.",
+		fn: function(){
+			$('foo').mask();
+		}
+	},
+	{
+		title: "Unmask:element",
+		description: "Hides the overlay layer.",
+		fn: function(){
+			$('foo').unmask();
+		}
+	},
+	{
+		title: "Document:mask",
+		description: "Overlays the window with a semi-transparent layer. Scroll down to verify it covers the whole document. Clicking the mask will remove it.",
+		fn: function(){
+			$(document.body).mask({
+				style: {
+					background: '#666',
+					opacity: 0.6
+				},
+				hideOnClick: true
+			});
+		}
+	},
+	{
+		title: "Document:unmask",
+		description: "Hides the document's overlay.",
+		fn: function(){
+			$(document.body).unmask();
+		}
+	}
+
+]);
+
+</script>

data/Packages/mootools-more/Tests/Interactive/Interface/Mask.yml

@@ -0,0 +1,2 @@
+js-references:
+  - "More/Mask"