1 files changed, 124 insertions, 0 deletions
diff --git a/framework/Web/Javascripts/tests/Effects.html b/framework/Web/Javascripts/tests/Effects.html
new file mode 100644
index 00000000..6ee5324b
--- /dev/null
+++ b/framework/Web/Javascripts/tests/Effects.html
@@ -0,0 +1,124 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+<head>
+	<title>Effects demo page</title>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <script type="text/javascript" src="../../base.js"></script>
+  <script type="text/javascript" src="../../dom.js"></script>
+  <script type="text/javascript" src="../../effects.js"></script>
+</head>
+
+<body style="font: 0.9em Arial;background: #f5f5f5;">
+<h1>Effect.Fade()</h1>
+
+<p>Call with <code>new Effect.Fade(element)</code></p>
+<p>Example: <code>onclick="new Effect.Fade(this)"</code></p>
+
+<div id="fade" onclick="new Effect.Fade(this)" style="border:1px solid red; padding:1em;">
+   Click here or the image to start effect
+</div>
+
+
+<h1>Effect.Highlight()</h1>
+
+<p>Call with <code>new Effect.Highlight(element)</code></p>
+<p>Example: <code>onclick="new Effect.Highlight(this)"</code></p>
+
+<div id="fade" onclick="new Effect.Highlight(this)" style="border:1px solid red; padding:1em;">
+   Click here or the image to start effect
+</div>
+
+<h1>Effect.Appear()</h1>
+
+<p>Call with <code>new Effect.Appear(element)</code></p>
+<p>Example: <code>onclick="new Effect.Appear('appear')"</code></p>
+
+<a href="#" onclick="new Effect.Appear('appear')">Start effect</a>
+
+<div id="appear" style="border:1px solid red; padding:1em;display:none;background:#fff;">
+   This is just some text
+</div>
+
+<h1>Effect.Scale()</h1>
+
+<p>Call with <code>new Effect.Scale(element, percent)</code></p>
+<p>Note: if you scale a div, all contained elements must have width or height set with <tt>em</tt>. If you
+scale an image, width and height are not required to be set. Also, Effect.Scale is aware of other scaling effects done on
+the target element, and will act accordingly. The <tt>percent</tt> parameter is always relative of the original size of the element.</p>
+<p>Example: <code>onmouseover="new Effect.Scale('scale',150)" onmouseout="new Effect.Scale('scale',100)"</code></p>
+
+<div style="height:100px">
+<img src="fungii_logo.gif" style="width:130px;" onmouseover="new Effect.Scale(this,150)" onmouseout="new Effect.Scale(this,100)"/>
+<img src="fungii_logo.gif" style="width:130px;" onmouseover="new Effect.Scale(this,150)" onmouseout="new Effect.Scale(this,100)"/>
+<img src="fungii_logo.gif" style="width:130px;" onmouseover="new Effect.Scale(this,150)" onmouseout="new Effect.Scale(this,100)"/>
+<img src="fungii_logo.gif" style="width:130px;" onmouseover="new Effect.Scale(this,150)" onmouseout="new Effect.Scale(this,100)"/>
+</div>
+
+<h1>Effect.Squish()</h1>
+<p>Call with <code>new Effect.Squish(element)</code></p>
+<div id="squish" style="border:1px solid red; width:250px; height:150px;background:#fff;" onclick="new Effect.Squish(this)">
+   Click me to squish.<br/>
+   <img src="fungii_logo.gif" style="width:100%;" />
+
+</div>
+
+<h1>Effect.Puff()</h1>
+<p>Call with <code>new Effect.Puff(element)</code></p>
+<p>Works with absolute and relative positioned elements. In this example, divs with <tt>float:left</tt> are used.</p>
+<div id="puff1" style="float:left;margin-right:1em;border:1px solid red; padding:1em;width:10em;height:5em;background:#fff;" onclick="new Effect.Puff(this)">
+   (floating) Click me to puff.<br/>
+   <img src="fungii_logo.gif" style="width:8em" />
+
+</div>
+<div id="puff2" style="float:left;margin-right:1em;border:1px solid red; padding:1em;width:10em;height:5em;background:#f8f;" onclick="new Effect.Puff(this)">
+   (floating) Click me to puff.<br/>
+   <img src="fungii_logo.gif" style="width:8em" />
+</div>
+<div id="puff3" style="float:left;margin-right:1em;border:1px solid red; padding:1em;width:10em;height:5em;background:#ff8;" onclick="new Effect.Puff(this)">
+   (floating) Click me to puff.<br/>
+   <img src="fungii_logo.gif" style="width:8em" />
+</div>
+<div id="puff4" style="float:left;margin-right:1em;border:1px solid red; padding:1em;width:10em;height:5em;background:#fff;" onclick="new Effect.Puff(this)">
+   (floating) Click me to puff.<br/>
+
+   <img src="fungii_logo.gif" style="width:8em" />
+</div>
+<div id="puff5" style="float:left;margin-right:1em;border:1px solid red; padding:1em;width:10em;height:5em;background:#f8f;" onclick="new Effect.Puff(this)">
+   (floating) Click me to puff.<br/>
+   <img src="fungii_logo.gif" style="width:8em" />
+</div>
+<div id="puff6" style="float:left;margin-right:1em;border:1px solid red; padding:1em;width:10em;height:5em;background:#ff8;" onclick="new Effect.Puff(this)">
+   (floating) Click me to puff.<br/>
+   <img src="fungii_logo.gif" style="width:8em" />
+</div>
+
+<div id="puff11" style="float:left;margin-right:1em;border:1px solid red; padding:1em;width:10em;height:5em;background:#fff;" onclick="new Effect.Puff(this)">
+   (floating) Click me to puff.<br/>
+   <img src="fungii_logo.gif" style="width:8em" />
+</div>
+<div id="puff12" style="float:left;margin-right:1em;border:1px solid red; padding:1em;width:10em;height:5em;background:#f8f;" onclick="new Effect.Puff(this)">
+   (floating) Click me to puff.<br/>
+   <img src="fungii_logo.gif" style="width:8em" />
+</div>
+<div id="puff13" style="float:left;margin-right:1em;border:1px solid red; padding:1em;width:10em;height:5em;background:#ff8;" onclick="new Effect.Puff(this)">
+   (floating) Click me to puff.<br/>
+
+   <img src="fungii_logo.gif" style="width:8em" />
+</div>
+<div id="puff14" style="float:left;margin-right:1em;border:1px solid red; padding:1em;width:10em;height:5em;background:#fff;" onclick="new Effect.Puff(this)">
+   (floating) Click me to puff.<br/>
+   <img src="fungii_logo.gif" style="width:8em" />
+</div>
+<div id="puff15" style="float:left;margin-right:1em;border:1px solid red; padding:1em;width:10em;height:5em;background:#f8f;" onclick="new Effect.Puff(this)">
+   (floating) Click me to puff.<br/>
+   <img src="fungii_logo.gif" style="width:8em" />
+</div>
+
+<div id="puff16" style="float:left;margin-right:1em;border:1px solid red; padding:1em;width:10em;height:5em;background:#ff8;" onclick="new Effect.Puff(this)">
+   (floating) Click me to puff.<br/>
+   <img src="fungii_logo.gif" style="width:8em" />
+</div>
+
+</body>
+</html>
+\ No newline at end of file