lsd_rails 0.1

data/Packages/mootools-more/Tests/Interactive/Forms/OverText.html

@@ -0,0 +1,116 @@
+<style>
+
+label {
+	color: #999;
+}
+
+.customOverText {
+	font-weight: bold;
+}
+
+</style>
+
+<div style="position: relative">
+
+	<p>
+		The input below should have some hint text. The links below can be used to disable and enable this text.
+		If you destroy the text, the DOM should no longer have the label anywhere (look in Firebug). After destruction,
+		the Enable link should not work.
+	</p>
+	<input alt="Enter some text" id="ot" />
+	<p>
+		<a id="disable">Disable</a> | <a id="enable" href="#">Enable</a> | <a id="destroy" href="#">Destroy</a>
+	</p>
+
+	<hr/>
+
+	<p>
+		In this example, the input starts off with a value. The input should not receive focus by default. To indicate
+		this, you should see the background is green.
+	</p>
+	<input alt="OverText Label" value="Default Value" id="ot_default" />
+
+	<hr/>
+
+	<p>
+		In this example you should see the overtext disappear when the password field is filled in. Enter a value and remove
+		focus from the first input (but don't focus the second one - click out, not tab).
+	</p>
+	<input alt="Enter your username" id="un" name="user">
+	<input alt="Enter your password" id="pw" name="password">
+
+	<hr/>
+
+	<p>
+		This overtext will have a other css class. The overtext should have a bold font
+	</p>
+	<input alt="Enter some text" id="ot_labelClass" />
+
+	<hr />
+
+	<p>
+		Finally, this link will remove all the inputs on the page. You should see all their text hints go away, too.<br />
+		<a id="clean">Clean</a>
+	</p>
+
+</div>
+
+<script src="/depender/build?require=More/OverText"></script>
+
+<script type="text/javascript">
+
+// First Input - with disable/enable/destroy methods
+var ot = $('ot'),
+	overtext1 = new OverText(ot);
+
+$('disable').addEvent('click', function(e){
+	e.stop();
+	overtext1.disable();
+});
+$('enable').addEvent('click', function(e){
+	e.stop();
+	overtext1.enable();
+});
+$('destroy').addEvent('click', function(e){
+	e.stop();
+	overtext1.destroy();
+});
+
+
+// Second input - Should have the value of the input as OverText
+var ot_default = $('ot_default'),
+	overtext2 = new OverText(ot_default);
+
+ot_default.setStyle('background-color', 'green');
+ot_default.addEvent('focus', function(){
+	this.setStyle('background-color', 'red');
+});
+
+
+// Polling - Automatically update the overtext when the value changes
+$$('#pw, #un').each(function(el){
+	new OverText(el, {
+		poll: true
+	});
+});
+$('un').addEvent('change', function(){
+	$('pw').set('value', 'asdfasdf');
+});
+
+
+// A overtext with a custom label class
+var ot_labelClass = $('ot_labelClass'),
+	overtext3 = new OverText(ot_labelClass, {
+		labelClass: 'customOverText'
+	});
+
+
+// Disposes all elements and all OverTexts on the page.
+$('clean').addEvent('click', function(e){
+	e.stop();
+	$$('input').dispose();
+	OverText.update();
+});
+
+</script>
+

data/Packages/mootools-more/Tests/Interactive/Forms/OverText.yml

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

data/Packages/mootools-more/Tests/Interactive/Fx/Fx.Accordion.html

@@ -0,0 +1,152 @@
+<style>
+	dt {
+		border: 1px solid #999;
+		background: #ddd;
+		margin: 2px;
+		padding: 2px;
+		cursor: pointer;
+	}
+	hr {
+		margin: 10px 0px;
+		background: #000;
+		border: none;
+		height: 3px;
+	}
+	p {
+		margin: 4px 0px;
+	}
+</style>
+<p>The headers below should display their corresponding section when clicked, hiding whichever section is currently visible. The "detach" link below should disable this behavior while the "attach" link should re-enable it. Also note that unlike the other examples on this page, this accordion will initialize without an effect (the first section will instantly be visible).</p>
+<dl id="acc1">
+  <dl>
+    <dt class="toggle"><b>first section</b></dt>
+    <dd class="stretcher">I'm the content for the first section.</dd>
+    <dt class="toggle"><b>second section</b></dt>
+    <dd class="stretcher">I'm the content for the second section.</dd>
+    <dt class="toggle"><b>third section</b></dt>
+    <dd class="stretcher">I'm the content for the third section.</dd>
+  </dl>
+</dl>
+<a id="detach">detach</a> | <a id="attach">attach</a>
+
+<script src="/depender/build?require=More/Fx.Accordion"></script>
+
+<script>
+var acc = new Fx.Accordion($$('#acc1 dt'), $$('#acc1 dd'), {
+	initialDisplayFx: false
+});
+$('detach').addEvent('click', function(){
+	acc.detach();
+});
+$('attach').addEvent('click', function(){
+	acc = new Fx.Accordion($$('#acc1 dt'), $$('#acc1 dd'));
+});
+</script>
+
+<hr/>
+
+<p>This example should behave as above, except the sections will be visible when you mouseover the headers, rather than click.</p>
+
+<dl id="acc2">
+  <dl>
+    <dt class="toggle"><b>first section</b></dt>
+    <dd class="stretcher">I'm the content for the first section.</dd>
+    <dt class="toggle"><b>second section</b></dt>
+    <dd class="stretcher">I'm the content for the second section.</dd>
+    <dt class="toggle"><b>third section</b></dt>
+    <dd class="stretcher">I'm the content for the third section.</dd>
+  </dl>
+</dl>
+<script>
+new Fx.Accordion($$('#acc2 dt'), $$('#acc2 dd'),{
+	trigger: 'mouseenter'
+});
+</script>
+
+<hr/>
+
+<p>The section below should have a 4th section, added dynamically, which is clickable like the others.</p>
+
+<dl id="acc3">
+    <dt class="toggle"><b>first section</b></dt>
+    <dd class="stretcher">I'm the content for the first section.</dd>
+    <dt class="toggle"><b>second section</b></dt>
+    <dd class="stretcher">I'm the content for the second section.</dd>
+    <dt class="toggle"><b>third section</b></dt>
+    <dd class="stretcher">I'm the content for the third section.</dd>
+</dl>
+<script>
+var acc3 = new Fx.Accordion($$('#acc3 dt'), $$('#acc3 dd'));
+var container = $('acc3');
+acc3.addSection(
+	new Element('dt',{'class': 'toggle', 'html' : '<b>fourth section</b>'}).inject(container),
+	new Element('dd',{'class': 'stretcher', 'html' : "I'n the content for the fourth section."}).inject(container)
+);
+</script>
+
+<hr/>
+
+<p>This example allows you to hide all the sections. You can expose any single section and click its header again to hide it without exposing another one.</p>
+
+<dl id="acc4">
+  <dl>
+    <dt class="toggle"><b>first section</b></dt>
+    <dd class="stretcher">I'm the content for the first section.</dd>
+    <dt class="toggle"><b>second section</b></dt>
+    <dd class="stretcher">I'm the content for the second section.</dd>
+    <dt class="toggle"><b>third section</b></dt>
+    <dd class="stretcher">I'm the content for the third section.</dd>
+  </dl>
+</dl>
+
+<script>
+new Fx.Accordion($$('#acc4 dt'), $$('#acc4 dd'),{
+	display: -1,
+	alwaysHide: true
+});
+</script>
+
+<hr/>
+
+<p>This section initializes with the second section visible rather than the first.</p>
+
+<dl id="acc5">
+  <dl>
+    <dt class="toggle"><b>first section</b></dt>
+    <dd class="stretcher">I'm the content for the first section.</dd>
+    <dt class="toggle"><b>second section</b></dt>
+    <dd class="stretcher">I'm the content for the second section.</dd>
+    <dt class="toggle"><b>third section</b></dt>
+    <dd class="stretcher">I'm the content for the third section.</dd>
+  </dl>
+</dl>
+
+<script>
+new Fx.Accordion($$('#acc5 dt'), $$('#acc5 dd'), {
+	display: 1
+});
+</script>
+
+<hr/>
+
+<p>It should set the height property to "<strong>auto</strong>" after the Fx. Note that it should do that on initialization too</p>
+
+<dl id="acc6">
+  <dl>
+    <dt class="toggle"><b>first section</b></dt>
+    <dd class="stretcher">I'm the content for the first section.</dd>
+    <dt class="toggle"><b>second section</b></dt>
+    <dd class="stretcher">I'm the content for the second section.</dd>
+    <dt class="toggle"><b>third section</b></dt>
+    <dd class="stretcher">I'm the content for the third section.</dd>
+  </dl>
+</dl>
+
+<script>
+new Fx.Accordion($$('#acc6 dt'), $$('#acc6 dd'), {
+	initialDisplayFx: false,
+	display: 2,
+	resetHeight: true
+});
+</script>
+

data/Packages/mootools-more/Tests/Interactive/Fx/Fx.Accordion.yml

@@ -0,0 +1,2 @@
+js-references:
+  - "More/Fx.Accordion"

data/Packages/mootools-more/Tests/Interactive/Fx/Fx.Elements.html

@@ -0,0 +1,34 @@
+<style>
+.exampleBar {
+	background-color:#BAEEB5;
+	border:1px solid #000000;
+	height:10px;
+	margin:2px 0;
+}
+</style>
+
+<p>
+	The boxes below should all resize together: the first one fades in and sizes from 100px to 200px, the second fades from 20% to 50%, and the last sizes to a height of 40px.
+</p>
+
+
+<div class="exampleBar"></div>
+<div class="exampleBar"></div>
+<div class="exampleBar"></div>
+
+<script src="/depender/build?require=More/Fx.Elements"></script>
+<script>
+var myElementsEffects = new Fx.Elements($$('div.exampleBar'));
+myElementsEffects.start({
+	'0': { /*	let's change the first element's opacity and width	*/
+		'opacity': [0,1],
+		'width': [100,200]
+	},
+	'1': { /*	and the second one's opacity	*/
+		'opacity': [0.2, 0.5]
+	},
+	'2': { /*	and the third's height	*/
+	'height': 40 /*	from whatever it's at now to 40	*/
+	}
+});
+</script>

data/Packages/mootools-more/Tests/Interactive/Fx/Fx.Elements.yml

@@ -0,0 +1,2 @@
+js-references:
+  - "More/Fx.Elements"

data/Packages/mootools-more/Tests/Interactive/Fx/Fx.Move.html

@@ -0,0 +1,91 @@
+
+
+<style>
+	#foo {
+		width: 200px;
+		height: 200px;
+		border: 2px solid black;
+		top: 50px;
+		left: 450px;
+		padding: 10px;
+		position: absolute;
+	}
+	#box {
+		width: 50px;
+		height: 50px;
+		background-color: #900;
+		border: 2px solid #700;
+		margin: 10px 20px 30px 40px;
+		padding: 0px;
+		z-index:1001;
+		position: absolute;
+	}
+</style>
+
+	<div id="foo" class="blackText">
+	This is a bunch of text. This is a bunch of text. This is a bunch of text. This is a bunch of text. This is a bunch of text. This is a bunch of text. This is a bunch of text. This is a bunch of text. This is a bunch of text. This is a bunch of text. This is a bunch of text. This is a bunch of text. This is a bunch of text. This is a bunch of text. This is a bunch of text.
+	</div>
+
+	<div id="box"></div>
+
+
+<script src="/depender/build?require=More/Fx.Move,Core/Element.Event"></script>
+<script>
+makeActions([
+	{
+		fn: function(){
+			//center
+			$('box').move({ignoreMargins: true, relativeTo: $('foo')});
+		},
+		title: 'center',
+		description: 'centers the red box on the larger box.'
+	},
+	{
+		fn: function(){
+			//upper left to upper left
+			$('box').move({ignoreMargins: true, relativeTo: $('foo'), position: 'upperLeft'});
+		},
+		title: 'upper left to upper left',
+		description: 'puts the upper left of the red box against the upper left of the larger box.'
+	},
+	{
+		fn: function(){
+			//bottom right to bottom right
+			$('box').move({ignoreMargins: true, relativeTo: $('foo'), position: 'bottomRight', edge: 'bottomRight'});
+		},
+		title: 'bottom right to bottom right',
+		description: 'puts the bottom right of the red box against the bottom right of the larger box'
+	},
+	{
+		fn: function(){
+			//center to bottom right
+			$('box').move({ignoreMargins: true, relativeTo: $('foo'), position: 'bottomRight', edge: 'center'});
+		},
+		title: 'center to bottom right',
+		description: 'puts the center of the red box on the bottom right corner of the larger box.'
+	},
+	{
+		fn: function(){
+			//right edge to right edge
+			$('box').move({ignoreMargins: true, relativeTo: $('foo'), position: 'centerRight', edge: 'centerRight'});
+		},
+		title: 'right center to right center',
+		description: 'puts the center right of the red box on the center right of the larger box.'
+	},
+	{
+		fn: function(){
+			//document.body position: upper left",
+			$(document.body).scrollTo(0, 100);
+			$('box').move({
+				ignoreMargins: true, relativeTo: document.body,
+				position: 'upperLeft',
+				edge: 'upperLeft',
+				ignoreScroll: true
+			});
+		},
+		title: 'upper left to document body\'s upper left corner',
+		description: 'puts the upper left corner to document body\'s upper left corner; it scrolls down a bit to test that this works even if the body is scrolled (you\'ll need to scroll back up to see).'
+	}
+
+]);
+</script>

data/Packages/mootools-more/Tests/Interactive/Fx/Fx.Move.yml

@@ -0,0 +1,2 @@
+js-references:
+  - "More/Fx.Move"

data/Packages/mootools-more/Tests/Interactive/Fx/Fx.Reveal.html

@@ -0,0 +1,42 @@
+<style>
+#success {
+	width: 200px;
+	height: 64px;
+	border: 1px solid #000;
+	background: #fff;
+	font-size: 16px;
+	line-height: 16px;
+	padding: 80px 0px 40px;
+	text-align: center;
+}
+</style>
+
+<p>When the JavaScript on this page finishes loading, a box with a message of success should appear.</p>
+
+<hr/>
+
+<p>The links below should let you hide and show the box.</p>
+<p>
+	<a id="reveal">reveal</a> | <a id="dissolve">dissolve</a>
+</p>
+
+<div id="success">
+	Woot! It works!
+	<input type="text" />
+	<input type="text" id="overtext" alt="Some Placeholder" />
+</div>
+
+<p>This text is after the box and moves as it appears</p>
+
+
+<script src="/depender/build?require=More/Fx.Reveal,More/OverText,Core/Element.Event"></script>
+<script>
+
+new OverText($('overtext'));
+
+var rev = new Fx.Reveal($('success'));
+
+$('reveal').addEvent('click', rev.reveal.bind(rev));
+$('dissolve').addEvent('click', rev.dissolve.bind(rev));
+
+</script>

data/Packages/mootools-more/Tests/Interactive/Fx/Fx.Reveal.yml

@@ -0,0 +1,2 @@
+js-references:
+  - "More/Fx.Reveal"

data/Packages/mootools-more/Tests/Interactive/Fx/Fx.Scroll_(element).html

@@ -0,0 +1,107 @@
+<div id="scrollExample" style="height: 300px; overflow: auto; width: 400px;">
+	<ul style="width: 500px;">
+		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
+		<li id="yellow" style="color: yellow">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
+		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
+		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
+		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
+		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
+		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
+		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
+		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
+		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
+		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
+		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
+		<li id="red" style="color:red">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
+		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
+		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
+		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
+		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
+		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
+		<li id="green" style="color:green; border:1px solid black;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
+		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
+		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
+		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
+		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
+		<li id="blue" style="color:blue">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
+		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
+	</ul>
+
+</div>
+
+<script src="/depender/build?require=More/Fx.Scroll,Core/Element.Event"></script>
+<script>
+var fx = new Fx.Scroll('scrollExample', {duration: 500});
+makeActions([
+	{
+		title: 'Scroll the box to the bottom.',
+		fn: fx.toBottom.bind(fx)
+	},
+	{
+		title: 'Scroll the box to the right.',
+		fn: fx.toRight.bind(fx)
+	},
+	{
+		title: 'Scroll the box to the top.',
+		fn: fx.toTop.bind(fx)
+	},
+	{
+		title: 'Scroll the box to the left.',
+		fn: fx.toLeft.bind(fx)
+	},
+	{
+		title: 'Scroll the box to the coordinates (20, 20).',
+		fn: function(){
+			fx.setOptions({offset: {x: 500, y: 500}});
+			fx.start(20, 20).chain(function(){ fx.setOptions({offset: {x: 0, y: 0}}); });
+		}
+	},
+	{
+		title: 'Scroll to the center of the red item, using the offset option.',
+		fn: function(){
+			var red = document.id('red');
+			fx.setOptions({offset: {y: red.getHeight() / 2}});
+			fx.toElement('red').chain(function(){ fx.setOptions({offset: {y: 0}}); });
+		}
+	},
+	{
+		title: 'Scroll to top of the red item.',
+		fn: fx.toElement.bind(fx, 'red')
+	},
+	{
+		title: 'Scroll the blue item into view.',
+		fn: function(){
+			fx.set(0,0);
+			fx.toElementEdge('blue', 'y');
+		}
+	},
+	{
+		title: 'Scroll the yellow item into view (from below).',
+		fn: function(){
+			fx.set(0,500);
+			fx.toElementEdge('yellow', 'y');
+		}
+	},
+	{
+		title: 'Scroll to the center of the green item.',
+		fn: function(){
+			fx.set(0,0);
+			fx.toElementCenter('green');
+		}
+	},
+	{
+		title: 'Scroll to the center of the green item\'s x axis.',
+		fn: function(){
+			fx.set(0,0);
+			fx.toElementCenter('green','x');
+		}
+	},
+	{
+		title: 'Scroll to the center of the green item\'s y axis.',
+		fn: function(){
+			fx.set(0,0);
+			fx.toElementCenter('green','y');
+		}
+	}
+]);
+</script>

data/Packages/mootools-more/Tests/Interactive/Fx/Fx.Scroll_(element).yml

@@ -0,0 +1,2 @@
+js-references:
+  - "More/Fx.Scroll"

data/Packages/mootools-more/Tests/Interactive/Fx/Fx.Scroll_(window).html

@@ -0,0 +1,88 @@
+<style>
+#actions {
+	top: 10px;
+	left: 10px;
+	position: fixed;
+}
+#scrollExample li {
+	margin: 20px 0px;
+}
+
+</style>
+
+<div id="scrollExample" style="position: absolute; left: 420px; top: 10px">
+	<ul style="width: 1500px;">
+		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
+		<li id="yellow" style="color: yellow">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
+		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
+		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
+		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
+		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
+		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
+		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
+		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
+		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
+		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
+		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
+		<li id="red" style="color:red">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
+		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
+		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
+		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
+		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
+		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
+		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
+		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
+		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
+		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
+		<li id="blue" style="color:blue">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
+		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
+	</ul>
+
+
+</div>
+
+<script src="/depender/build?require=More/Fx.Scroll,Core/Element.Event,More/Element.Pin"></script>
+<script>
+var fx = new Fx.Scroll(document.body, {duration: 500});
+makeActions([
+	{
+		title: 'Scroll the window to the bottom.',
+		fn: fx.toBottom.bind(fx)
+	},
+	{
+		title: 'Scroll the window to the right.',
+		fn: fx.toRight.bind(fx)
+	},
+	{
+		title: 'Scroll the window to the top.',
+		fn: fx.toTop.bind(fx)
+	},
+	{
+		title: 'Scroll the window to the left.',
+		fn: fx.toLeft.bind(fx)
+	},
+	{
+		title: 'Scroll to the red item.',
+		fn: fx.toElement.pass('red', fx)
+	},
+	{
+		title: 'Scroll the y axis only to the red item.',
+		fn: fx.toElement.pass(['red', 'y'], fx)
+	},
+	{
+		title: 'Scroll the blue item into view.',
+		fn: function(){
+			fx.set(0,0);
+			fx.toElementEdge('blue', 'y');
+		}
+	},
+	{
+		title: 'Scroll the yellow item into view (from below).',
+		fn: function(){
+			fx.set(0,500);
+			fx.toElementEdge('yellow', 'y');
+		}
+	}
+]);
+$('actions').pin();
+</script>

data/Packages/mootools-more/Tests/Interactive/Fx/Fx.Scroll_(window).yml

@@ -0,0 +1,2 @@
+js-references:
+  - "More/Fx.Scroll"