Initial Commit

11 files changed, 1929 insertions, 0 deletions

diff --git a/deck.js/samples/circle.svg b/deck.js/samples/circle.svg
new file mode 100755
index 0000000..b003203
--- /dev/null
+++ b/deck.js/samples/circle.svg
@@ -0,0 +1,167 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="500.95898"
+   height="485.79654"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.48.3.1 r9886"
+   sodipodi:docname="circle.svg">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1.1137321"
+     inkscape:cx="-177.36038"
+     inkscape:cy="320.05246"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer2"
+     showgrid="false"
+     inkscape:window-width="1920"
+     inkscape:window-height="1150"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     borderlayer="false"
+     width="0px"
+     height="0px" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-3.99267,14.222693)">
+    <g
+       id="circleRed"
+       transform="translate(12,-2)">
+      <path
+         inkscape:label="#red"
+         transform="translate(-131.31983,-224.25387)"
+         d="m 303.04577,311.92038 c 0,46.30502 -37.53764,83.84266 -83.84266,83.84266 -46.30502,0 -83.84266,-37.53764 -83.84266,-83.84266 0,-46.30502 37.53764,-83.84266 83.84266,-83.84266 46.30502,0 83.84266,37.53764 83.84266,83.84266 z"
+         sodipodi:ry="83.842659"
+         sodipodi:rx="83.842659"
+         sodipodi:cy="311.92038"
+         sodipodi:cx="219.20311"
+         id="circleRedCircle"
+         sodipodi:type="arc" />
+      <!--style="color:#000000;fill:#ff0000;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"-->
+      <path
+         inkscape:transform-center-y="0.10919907"
+         inkscape:transform-center-x="0.16050916"
+         d="m 109.81573,116.87269 -3.18712,-2.41404 -3.94033,1.11831 1.03709,-3.63743 -2.46543,-3.50916 4.44844,0.37725 1.86148,-3.17699 1.65601,3.67662 3.71619,1.10711 -3.2616,2.15748 z"
+         inkscape:randomized="0.05"
+         inkscape:rounded="0"
+         inkscape:flatsided="false"
+         sodipodi:arg2="1.7354672"
+         sodipodi:arg1="1.1071487"
+         sodipodi:r2="3.0115879"
+         sodipodi:r1="6.0231757"
+         sodipodi:cy="111.33737"
+         sodipodi:cx="106.84796"
+         sodipodi:sides="5"
+         id="path3480"
+         style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#0000ff;stroke-width:0.30000001;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+         sodipodi:type="star"
+         transform="translate(3.9926654,3.777383)" />
+      <text
+         sodipodi:linespacing="125%"
+         id="coolText"
+         y="115.65632"
+         x="108.87571"
+         style="font-size:2px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Arial;-inkscape-font-specification:Arial"
+         xml:space="preserve"
+         inkscape:label="#text4285"><tspan
+           y="115.65632"
+           x="108.87571"
+           id="tspan4287"
+           sodipodi:role="line">cool</tspan></text>
+    </g>
+    <path
+       sodipodi:type="arc"
+       style="color:#000000;fill:#00fe00;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       id="circleGreen"
+       sodipodi:cx="219.20311"
+       sodipodi:cy="311.92038"
+       sodipodi:rx="83.842659"
+       sodipodi:ry="83.842659"
+       d="m 303.04577,311.92038 c 0,46.30502 -37.53764,83.84266 -83.84266,83.84266 -46.30502,0 -83.84266,-37.53764 -83.84266,-83.84266 0,-46.30502 37.53764,-83.84266 83.84266,-83.84266 46.30502,0 83.84266,37.53764 83.84266,83.84266 z"
+       transform="matrix(1.3373494,0,0,1.3373494,-66.998809,-211.27187)"
+       inkscape:label="#green" />
+    <path
+       sodipodi:type="arc"
+       style="color:#000000;fill:#0017ff;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       id="circleBlue"
+       sodipodi:cx="219.20311"
+       sodipodi:cy="311.92038"
+       sodipodi:rx="83.842659"
+       sodipodi:ry="83.842659"
+       d="m 303.04577,311.92038 c 0,46.30502 -37.53764,83.84266 -83.84266,83.84266 -46.30502,0 -83.84266,-37.53764 -83.84266,-83.84266 0,-46.30502 37.53764,-83.84266 83.84266,-83.84266 46.30502,0 83.84266,37.53764 83.84266,83.84266 z"
+       transform="matrix(1.6024097,0,0,1.6024097,14.300214,-164.65004)"
+       inkscape:label="#blue" />
+    <text
+       xml:space="preserve"
+       style="font-size:13.80142117px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
+       x="60.66827"
+       y="-82.57074"
+       id="text2989"
+       sodipodi:linespacing="125%"><tspan
+         sodipodi:role="line"
+         id="tspan2991"
+         x="60.66827"
+         y="-82.57074">NB: for convenience we</tspan><tspan
+         sodipodi:role="line"
+         x="60.66827"
+         y="-65.318962"
+         id="tspan2993">use a layer (hidden) for boxes</tspan><tspan
+         sodipodi:role="line"
+         x="60.66827"
+         y="-48.067188"
+         id="tspan2995">that we will be using for zoom</tspan><tspan
+         sodipodi:role="line"
+         x="60.66827"
+         y="-30.815411"
+         id="tspan2997">Hit ctrl+shift+L for layer control (in inkscape)</tspan></text>
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer2"
+     inkscape:label="zoomboxes"
+     style="display:none">
+    <rect
+       style="opacity:0.7;color:#000000;fill:#ff0000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       id="zoomBox1"
+       width="12.289753"
+       height="12.682584"
+       x="112.90867"
+       y="121.1442"
+       inkscape:label="#rect3001" />
+  </g>
+</svg>
diff --git a/deck.js/samples/deck-anim.html b/deck.js/samples/deck-anim.html
new file mode 100644
index 0000000..8a87db0
--- /dev/null
+++ b/deck.js/samples/deck-anim.html
@@ -0,0 +1,182 @@
+<!DOCTYPE html>
+<!--[if lt IE 7]> <html class="no-js ie6" lang="en"> <![endif]-->
+<!--[if IE 7]>    <html class="no-js ie7" lang="en"> <![endif]-->
+<!--[if IE 8]>    <html class="no-js ie8" lang="en"> <![endif]-->
+<!--[if gt IE 8]><!-->  <html class="no-js" lang="en"> <!--<![endif]-->
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+            
+        <title>deck.anim.js test/demo</title>
+            
+        <meta name="description" content="deck.*.js">
+        <meta name="author" content="Rémi Emonet">
+        <!--meta name="viewport" content="width=1024, user-scalable=no"/-->
+            
+        <!-- Core and extension CSS files -->
+        <link rel="stylesheet" href="../core/deck.core.css">
+        <link rel="stylesheet" href="../extensions/status/deck.status.css">
+        <link rel="stylesheet" href="../extensions/hash/deck.hash.css">
+            
+        <!-- Style theme. More available in /themes/style/ or create your own. -->
+        <link rel="stylesheet" href="../themes/style/neon.css">
+            
+        <!-- Transition theme. More available in /themes/transition/ or create your own. -->
+        <!--link rel="stylesheet" href="../themes/transition/horizontal-slide.css"-->
+            
+        <script src="../modernizr.custom.js"></script>
+            
+        <!-- Grab CDN jQuery, with a protocol relative URL; fall back to local if offline -->
+        <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
+        <script>window.jQuery || document.write('<script src="../jquery-1.7.2.min.js"><\/script>')</script>
+            
+        <!-- Deck Core and extensions -->
+        <script src="../core/deck.core.js"></script>
+        <script src="../extensions/hash/deck.hash.js"></script>
+        <script src="../extensions/status/deck.status.js"></script>
+        <script src="../extensions/fit/deck.fit.js"></script>
+        <link rel="stylesheet" href="../extensions/fit/deck.fit-fs.css">
+
+        <script src="../extensions/step/deck.step.js"></script>
+        <script src="../extensions/events/deck.events.js"></script>
+        <script src="../extensions/anim/deck.anim.js"></script>
+
+            
+        <style type="text/css">
+            .deck-container>.slide {border: 1px dashed #333;} /* for the demo */
+            .slide h1 {font-size: 3em;}
+            .slide h1 b {color: #0F0;}
+            .slide h1 em {color: #445; text-shadow: none; font-size: .3em;}
+            .slide span.highlight {border: 1px solid red;}
+            .deck-container > .slide .deck-before, .deck-container > .slide .deck-previous {opacity: 0.6;} /* <-- override darkish neon theme --> */
+
+        </style>
+    </head>
+
+<!-- for the demo, the body is not the container so it can be resized by the user -->
+<body>
+
+This page surely has a purpose.<br/>
+Use left/right arrow keys to browse the presentation.<br/>
+
+<!-- for the demo, a resizeable wrapper around the container -->
+<div class="deck-container">
+
+<!-- Begin slides -->
+<section class="slide" id="title-slide">
+	<h1 title="use arrow keys to navigate">Getting started with deck.js:<br/><b>anim</b> extension
+            <br/><em>use right arrow to move on</em>
+        </h1>
+</section>
+
+<section class="slide">
+    <h2>Nested deck.js slides</h2>
+    <ul>
+        <li>Not an extension (in core deck.js)</li>
+        <li>Just have an element with the “slide” class…</li>
+        <li>… and it will appear (hit the right arrow now)</li>
+        <li class="slide">Hey! I appeared! (go on)</li>
+        <li class="slide">The gray-ish style is part of the theme</li>
+    </ul>
+</section>
+<section class="slide">
+    <h2>Show/Hide Elements</h2>
+    <ul>
+        <li>Go beyond sequential appearance <span class="demo1">… like this!</span></li>
+        <li class="slide">… for example</li>
+        <div class="anim-show slide" data-what=".demo1"></div>
+        <li class="slide">Or hide stuff</li>
+        <div class="anim-hide slide" data-what="h2"></div>
+        <li class="anim-show slide" data-what="h2" data-dur="1500">Let's get the title back, slowly :)</li>
+    </ul>
+</section>
+<section class="slide">
+    <h2>Add/Remove Classes</h2>
+    <ul>
+        <li class="slide">We can also <span class="demo1">add</span>/remove classes: like the “highlight”</li>
+        <li class="slide"><span class="demo2 highlight">This is highlight by default</span> (styled with css)</li>
+        <li class="slide">We can add a class</li>
+        <div class="anim-addclass slide" data-what=".demo1" data-class="highlight"></div>
+        <li class="slide">And remove it</li>
+        <div class="anim-removeclass slide" data-what=".demo1,.demo2" data-class="highlight"></div>
+    </ul>
+</section>
+<section class="slide">
+    <h2>Attribute Animations</h2>
+    <ul>
+        <li class="slide">We can animate any <span class="demo1">attribute</span>, like the <span class="demo1">color</span></li>
+        <li class="slide">Let's try</li>
+        <div class="anim-attribute slide" data-what=".demo1" data-attr="color:#FF0000"></div>
+        <div class="anim-attribute slide" data-what=".demo1:first" data-attr="color:#00FF00"></div>
+        <div class="anim-attribute slide" data-what=".demo1" data-attr="color:#0000FF"></div>
+        <li class="slide">Or the <span class="demo2">size</span></li>
+        <div class="anim-attribute slide" data-what=".demo2" data-attr="font-size:8em"></div>
+        <li class="slide">Or play multiple animations</li>
+        <div class="anim-attribute slide anim-continue" data-what=".demo2" data-attr="font-size:.5em"></div>
+        <div class="anim-attribute slide anim-continue" data-what=".demo2" data-attr="color:#FF0000"></div>
+        <div class="anim-attribute slide" data-what=".demo2,.demo1" data-attr="font-size:3em"></div>
+    </ul>
+</section>
+<section class="slide">
+    <h2>Video Control</h2>
+    <video style="float:right" src="simple.ogv" height="400" width="400" onclick="this.paused ? this.play() : this.pause()" controls="true"></video>
+    <ul>
+        <li>Starts paused</li>
+        <li>Plays on "next"</li>
+        <li>Then pauses on "next"</li>
+        <li>Then next slide</li>
+    </ul>
+    <div class="anim-play slide" data-what="video"></div>
+    <div class="anim-pause slide" data-what="video"></div>
+</section>
+<section class="slide">
+    <h2>The “anim” extension</h2>
+    <ul>
+        <li>Works in conjunction with</li>
+        <ul>
+            <li>“events”: extension that triggers events<br/>   (notify the slide when it becomes current)</li>
+            <li>“step”: extension that also trigger init events<br/>   (knowing about toplevel vs nested slides)</li>
+        </ul>
+        <li>Uses open attributes "data-*" (see source)</li>
+        <li>Adds animation classes</li>
+        <ul>
+            <li>anim-show/hide, anim-addclass/removeclass,</li>
+            <li>anim-attribute, anim-play, anim-pause, …</li>
+        </ul>
+    </ul>
+</section>
+<section class="slide">
+    <h2>Browser support</h2>
+    <ul>
+        <li>Should be ok</li>
+    </ul>
+</section>
+
+<!-- DEMO: anim -->
+
+<!-- deck.navigation snippet -->
+<!--a href="#" class="deck-prev-link" title="Previous">&#8592;</a>
+<a href="#" class="deck-next-link" title="Next">&#8594;</a-->
+
+<!-- deck.status snippet -->
+<!--p class="deck-status">
+	<span class="deck-status-current"></span>
+	/
+	<span class="deck-status-total"></span>
+</p-->
+
+<!-- deck.hash snippet -->
+<a href="." title="Permalink to this slide" class="deck-permalink">#</a>
+
+<!-- Initialize the deck -->
+<script>
+$(function() {
+	$.deck('.slide', {
+            // fitMarginX:100, fitMarginY:100,
+            // fitMode: "stretched" //"center middle" //"bottom right" //"top left"
+        });
+});
+</script>
+</div>
+</body>
+</html>
diff --git a/deck.js/samples/deck-clone.html b/deck.js/samples/deck-clone.html
new file mode 100644
index 0000000..e4b77a2
--- /dev/null
+++ b/deck.js/samples/deck-clone.html
@@ -0,0 +1,195 @@
+<!DOCTYPE html>
+<!--[if lt IE 7]> <html class="no-js ie6" lang="en"> <![endif]-->
+<!--[if IE 7]>    <html class="no-js ie7" lang="en"> <![endif]-->
+<!--[if IE 8]>    <html class="no-js ie8" lang="en"> <![endif]-->
+<!--[if gt IE 8]><!-->  <html class="no-js" lang="en"> <!--<![endif]-->
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+            
+        <title>deck.clone.js test/demo</title>
+            
+        <meta name="description" content="deck.*.js">
+        <meta name="author" content="Rémi Emonet">
+        <!--meta name="viewport" content="width=1024, user-scalable=no"/-->
+            
+        <!-- Core and extension CSS files -->
+        <link rel="stylesheet" href="../core/deck.core.css">
+        <link rel="stylesheet" href="../extensions/status/deck.status.css">
+        <link rel="stylesheet" href="../extensions/hash/deck.hash.css">
+
+        <!-- Style theme. More available in /themes/style/ or create your own. -->
+        <link rel="stylesheet" href="../themes/style/neon.css">
+            
+        <!-- Transition theme. More available in /themes/transition/ or create your own. -->
+        <!--link rel="stylesheet" href="../themes/transition/horizontal-slide.css"-->
+            
+        <script src="../modernizr.custom.js"></script>
+            
+        <!-- Grab CDN jQuery, with a protocol relative URL; fall back to local if offline -->
+        <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
+        <script>window.jQuery || document.write('<script src="../jquery-1.7.2.min.js"><\/script>')</script>
+            
+        <!-- Deck Core and extensions -->
+        <script src="../core/deck.core.js"></script>
+        <script src="../extensions/hash/deck.hash.js"></script>
+        <script src="../extensions/status/deck.status.js"></script>
+        <script src="../extensions/fit/deck.fit.js"></script>
+        <link rel="stylesheet" href="../extensions/fit/deck.fit-fs.css">
+        <script src="../extensions/step/deck.step.js"></script>
+
+        <script src="../extensions/clone/deck.clone.js"></script>
+
+            
+        <style type="text/css">
+            body.has-clones .deck-container {background: grey;}
+            .deck-container>.slide {border: 1px dashed #333;} /* for the demo */
+            .slide h1 {font-size: 3em;}
+            .slide h1 b {color: #0F0;}
+            .slide h1 em, .slide .smallcomment {color: #445; text-shadow: none; font-size: .3em;}
+            .slide .smallcomment {font-size: .6em;}
+        </style>
+    </head>
+
+<!-- for the demo, the body is not the container so it can be resized by the user -->
+<body>
+
+This page surely has a purpose.<br/>
+Use left/right arrow keys to browse the presentation.<br/>
+
+<!-- for the demo, a resizeable wrapper around the container -->
+<div class="deck-container">
+
+<!-- Begin slides -->
+<section class="slide" id="title-slide">
+	<h1 title="use arrow keys to navigate">Getting started with deck.js:<br/><b>clone</b> extension
+            <br/><em>use right arrow to move on</em>
+        </h1>
+</section>
+
+<section class="slide">
+    <h2>“clone”: What?</h2>
+    <ul>
+        <li>Duplicate your window</li>
+        <li>Forwards events to all clones</li>
+        <li>Replicates mouse pointer</li>
+        <li>Usage
+            <ul>
+                <li>put a second view on a second screen</li>
+                <li>view next slide on your view (theme)</li>
+                <li>view notes on your view (extension)</li>
+            </ul>
+        </li>
+    </ul>
+</section>
+
+<section class="slide">
+    <h2>“clone”: let's get cloned</h2>
+    <div class="firefox-message" style="position: absolute; border: 2px solid red; background: #181818; padding: 1em; margin: 1em; font-size: .8em; margin-top: 0;">
+        With firefox and "file://..." URLs (local files), the popup might be blocked, refusing to be shown.
+        To fix that:
+        <ul>
+            <li>on the bar that pops up, click on Preferences&gt;Edit Pop-Up Blocker Preferences…</li>
+            <li>type “&lt;file&gt;” (without the quotes, with the brackets)</li>
+            <li>click allow</li>
+            <li>click close</li>
+            <li>close the poped-up bar and hit 'c' again</li>
+        </ul>
+    </div>
+    <ul>
+        <li>Clone your view!
+            <ul>
+                <li>NB: the browser will probably open a new tab</li>
+                <li>clone your view by typing 'c'
+                    <br/><span class="smallcomment">(in local, show how to <a class="show-firefox-message">tell firefox to not block the popup</a>)</span>
+                </li>
+                <li>detach your tab (drag it out of the browser)</li>
+                <li>go to the main view and hit the right arrow</li>
+            </ul>
+        </li>
+    </ul>
+</section>
+<script>
+$(function() {
+   $('.firefox-message').hide();
+   $('.firefox-message').click(function(){
+      $('.firefox-message').hide(300);
+   });
+   $('.show-firefox-message').click(function(){
+      $('.firefox-message').fadeIn(500);
+   });
+});
+</script>
+
+<section class="slide">
+    <h2>“clone”: Propagation</h2>
+    <ul>
+        <li class="slide">Slide events are propagated to clone(s)
+            <ul>
+                <li class="slide">from master to clone(s)</li>
+                <li class="slide">try left/right arrows</li>
+                <li class="slide">try up arrow (with the “<a href="deck-step.html">step</a>” extension)</li>
+            </ul>
+        </li>
+        <li class="slide">Mouse pointer is replicated
+            <ul>
+                <li class="slide">try to move your mouse (on the master)</li>
+                <li class="slide">custom style using HTML+CSS</li>
+                <li class="slide">examples: red box, centered green box, …</li>
+            </ul>
+        </li>
+    </ul>
+</section>
+
+<section class="slide">
+    <h2>“clone”: Styling</h2>
+    <ul>
+        <li class="slide">Master view styling
+            <ul>
+                <li>adds the “has-clones” class when cloned</li>
+                <li>in this deck: gray background</li>
+                <li>allow for a presenter view (next slide, notes, …)</li>
+            </ul>
+        </li>
+    </ul>
+</section>
+
+<section class="slide">
+    <h2>Browser support</h2>
+    <ul>
+        <li>Should be ok</li>
+    </ul>
+</section>
+<!-- DEMO: clone -->
+
+<!-- deck.navigation snippet -->
+<!--a href="#" class="deck-prev-link" title="Previous">&#8592;</a>
+<a href="#" class="deck-next-link" title="Next">&#8594;</a-->
+
+<!-- deck.status snippet -->
+<!--p class="deck-status">
+	<span class="deck-status-current"></span>
+	/
+	<span class="deck-status-total"></span>
+</p-->
+
+<!-- deck.clone snippet: simple red box with top-left corner as cursor position -->
+<div class="clonepointer" style="position:absolute; width:20px; height:20px; background-color:red; z-index:10"></div>
+<!-- deck.clone snippet: simple green box with center as cursor position -->
+<div class="clonepointer" style="position:absolute; z-index:11"><div style="margin: -13px 0 0 -13px; width:18px; height:18px; border:4px solid green;"></div></div>
+
+<!-- deck.hash snippet -->
+<a href="." title="Permalink to this slide" class="deck-permalink">#</a>
+
+<!-- Initialize the deck -->
+<script>
+$(function() {
+	$.deck('.slide', {
+            // fitMarginX:100, fitMarginY:100,
+            // fitMode: "stretched" //"center middle" //"bottom right" //"top left"
+        });
+});
+</script>
+</div>
+</body>
+</html>
diff --git a/deck.js/samples/deck-fit.html b/deck.js/samples/deck-fit.html
new file mode 100644
index 0000000..b69bff4
--- /dev/null
+++ b/deck.js/samples/deck-fit.html
@@ -0,0 +1,229 @@
+<!DOCTYPE html>
+<!--[if lt IE 7]> <html class="no-js ie6" lang="en"> <![endif]-->
+<!--[if IE 7]>    <html class="no-js ie7" lang="en"> <![endif]-->
+<!--[if IE 8]>    <html class="no-js ie8" lang="en"> <![endif]-->
+<!--[if gt IE 8]><!-->  <html class="no-js" lang="en"> <!--<![endif]-->
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+            
+        <title>deck.fit.js test/demo</title>
+            
+        <meta name="description" content="deck.fit.js">
+        <meta name="author" content="Rémi Emonet">
+        <!--meta name="viewport" content="width=1024, user-scalable=no"/-->
+            
+        <!-- Core and extension CSS files -->
+        <link rel="stylesheet" href="../core/deck.core.css">
+        <link rel="stylesheet" href="../extensions/status/deck.status.css">
+        <link rel="stylesheet" href="../extensions/hash/deck.hash.css">
+            
+        <!-- Style theme. More available in /themes/style/ or create your own. -->
+        <link rel="stylesheet" href="../themes/style/neon.css">
+            
+        <!-- Transition theme. More available in /themes/transition/ or create your own. -->
+        <!--link rel="stylesheet" href="../themes/transition/horizontal-slide.css"-->
+            
+        <script src="../modernizr.custom.js"></script>
+            
+        <!-- Grab CDN jQuery, with a protocol relative URL; fall back to local if offline -->
+        <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
+        <script>window.jQuery || document.write('<script src="../jquery-1.7.2.min.js"><\/script>')</script>
+            
+        <!-- Deck Core and extensions -->
+        <script src="../core/deck.core.js"></script>
+        <script src="../extensions/hash/deck.hash.js"></script>
+        <script src="../extensions/status/deck.status.js"></script>
+        <script src="../extensions/fit/deck.fit.js"></script> <!-- WE ADD THE deck.fit.js extension -->
+            
+        <style type="text/css">
+/* style override */
+html, body {margin:0;padding:0}
+.deck-container {
+}
+/* for the demo */
+.slide h1 {font-size: 3em;}
+.slide h1 b {color: #0F0;}
+.slide h1 em {color: #445; text-shadow: none; font-size: .3em;}
+
+.resizeable { /* for the demo */
+    background: #900;
+    margin: 0; padding: 20px;
+    width: 600px; height: 450px; /* just the initial size for the resizeable demo */
+    resize: both;
+    overflow: hidden; /* needed for the resize handle to be really shown in ffox */
+    border: 1px solid blue;
+}
+.deck-container {
+    width: 100%; height: 100%; /* to get a proper filling of the parent */
+    margin: 0; padding: 0; /* any margin is handled by the parent or the fit extension */
+    border: 1px solid red; /* for the demo */
+}
+.deck-container .slide {
+    width: 100%; height: 100%; /* to get a proper filling of the parent */
+    min-width:0; min-height:0; /* undoing some hurting style */
+    overflow: hidden; /* don't show slides outside of their box */
+    /* margin:0; padding:0; /* remove possible margins */
+    border: 2px solid white; /* for the demo */
+}
+.deck-container .slide {background:
+           url(rectangle.png) bottom left no-repeat,
+           url(rectangle.png) top left no-repeat,
+           url(rectangle.png) bottom right no-repeat,
+           url(rectangle.png) right no-repeat,
+           url(rectangle.png) left no-repeat,
+           url(rectangle.png) top no-repeat,
+           url(rectangle.png) bottom no-repeat,
+           url(rectangle.png) top right no-repeat
+}
+.deck-container.fullscreen { /* for the demo but could be reused */
+    position: absolute;
+    left:0; top:0; width:100%; height:100%;
+    border: 0;
+}
+        </style>
+    </head>
+
+<!-- for the demo, the body is not the container so it can be resized by the user -->
+<body>
+
+<!-- for the demo, a select changes the fitMode -->
+<select class="fitModeSelect" style="float:right">
+    <option value="center middle" selected="true">(default) fitMode: "center middle"</option>
+    <option value="top left">fitMode: "top left"</option>
+    <option value="bottom right">fitMode: "bottom right"</option>
+    <option value="stretched">fitMode: "stretched"</option>
+</select>
+This page demonstrates the use of the "fit" extension for deck.js.<br/>
+Use left/right arrow keys to browse the presentation.<br/>
+
+<!-- for the demo, a resizeable wrapper around the container -->
+<div class="resizeable">
+<div class="deck-container">
+
+<!-- Begin slides -->
+<section class="slide" id="title-slide">
+    <h1>Getting started with deck.js:<br/><b>fit</b> extension
+        <br/><em>use right arrow to move on</em>
+    </h1>
+</section>
+
+<section class="slide">
+    <h2>“fit”: What It Does</h2>
+    <ul>
+        <li>
+            <h3>Before anything</h3> please resize the slides by dragging <em>the bottom right corner of the dark-red frame</em>
+        </li>
+        <li>
+            More on the next slide
+        </li>
+    </ul>
+</section>
+<section class="slide">
+    <h2>Designing for “fit”</h2>
+    <ul>
+        <li>You decide on a design dimension<br/> (default: 800x600)</li>
+        <li>You write all your slides<br/> as if they were exactly of this size</li>
+        <br/>
+        <li>You put your slides in a container of any size</li>
+        <li>You decide how they should adapt (e.g., center)</li>
+        <br/>
+        <li>And “fit” handles it!</li>
+    </ul>
+</section>
+<section class="slide">
+    <h2>Playing with “fit” demo</h2>
+    <ul>
+        <li>Resize the red box</li>
+        <li>Change the “fitMode”<br/> with the select on the top-right of this page</li>
+        <li>Press the 's' key to make the slides fit to the window</li>
+    </ul>
+</section>
+<section class="slide">
+    <h2>Browser support</h2>
+    <ul>
+        <li>Did it work for you? :)</li>
+        <li>Should be ok on good browsers</li>
+    </ul>
+</section>
+<section class="slide">
+    <h2>Notes about the demo</h2>
+    <ul>
+        <li>The 8 yellow boxes are to test background elements. You may use them into your slides, e.g., for footer, logos, …</li>
+        <li>The red border just helps understanding where the “deck-container” is</li>
+        <li>The white border just helps understanding where each “slide” is</li>
+        <li>The white border also illustrates the “fitMarginX” and “fitMarginY” options that can be used for adding a margin around the slides</li>
+    </ul>
+</section>
+
+<!-- DEMO: fit -->
+
+<!-- deck.navigation snippet -->
+<!--a href="#" class="deck-prev-link" title="Previous">&#8592;</a>
+<a href="#" class="deck-next-link" title="Next">&#8594;</a-->
+
+<!-- deck.status snippet -->
+<!--p class="deck-status">
+	<span class="deck-status-current"></span>
+	/
+	<span class="deck-status-total"></span>
+</p-->
+
+<!-- deck.hash snippet -->
+<a href="." title="Permalink to this slide" class="deck-permalink">#</a>
+
+
+
+<!-- Initialize the deck -->
+<script>
+$(function() {
+	$.deck('.slide', {
+            // fitMarginX:100, fitMarginY:100,
+            // fitMode: "stretched" //"center middle" //"bottom right" //"top left"
+        });
+});
+</script>
+    <script> /* This script is just for the demo with live resizing */
+        $(function(){
+            var $c = $(".deck-container");
+            var xy = $c.width()+"x"+$c.height();
+            var update = function() {
+                var nxy = $c.width()+"x"+$c.height();
+                if (nxy != xy) {
+                    xy = nxy;
+                    $["deck"]('enableScale');
+                }
+                window.setTimeout(update, 200);
+            }
+            window.setTimeout(update, 200);
+        });
+    </script>
+    <script> /* This script is just for the demo: change fitMode using a select */
+        $(function(){
+        $(".fitModeSelect").change(function() {
+           $(".fitModeSelect option:selected").each(function () {
+              $['deck']('getOptions').fitMode = $(this).attr('value');
+              $["deck"]('enableScale');
+           });
+           $(".fitModeSelect").blur(); // to avoid the key strokes doing both nextSlide and changing the selected value in the select
+        });
+        $(".fitModeSelect").change();
+        });
+    </script>
+    <script> /* This script is just for the demo: unbinds the 's' key and use it to switch to fullscreen */
+        $(function(){
+        var deck = 'deck';
+        var $d = $(document);
+        var opts = $[deck]('getOptions');
+        $d.unbind('keydown.deckscale').bind('keydown.deckscale', function(e) {
+            if (e.which === opts.keys.scale || $.inArray(e.which, opts.keys.scale) > -1) {
+                $(".deck-container").toggleClass("fullscreen");
+                e.preventDefault();
+            }
+        })
+        });
+    </script>        
+</div>
+</div>
+</body>
+</html>
diff --git a/deck.js/samples/deck-simplemath.html b/deck.js/samples/deck-simplemath.html
new file mode 100644
index 0000000..9e7693a
--- /dev/null
+++ b/deck.js/samples/deck-simplemath.html
@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<!--[if lt IE 7]> <html class="no-js ie6" lang="en"> <![endif]-->
+<!--[if IE 7]>    <html class="no-js ie7" lang="en"> <![endif]-->
+<!--[if IE 8]>    <html class="no-js ie8" lang="en"> <![endif]-->
+<!--[if gt IE 8]><!-->  <html class="no-js" lang="en"> <!--<![endif]-->
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+            
+        <title>deck.simplemath.js test/demo</title>
+            
+        <meta name="description" content="deck.*.js">
+        <meta name="author" content="Rémi Emonet">
+        <!--meta name="viewport" content="width=1024, user-scalable=no"/-->
+            
+        <!-- Core and extension CSS files -->
+        <link rel="stylesheet" href="../core/deck.core.css">
+        <link rel="stylesheet" href="../extensions/status/deck.status.css">
+        <link rel="stylesheet" href="../extensions/hash/deck.hash.css">
+            
+        <!-- Style theme. More available in /themes/style/ or create your own. -->
+        <link rel="stylesheet" href="../themes/style/neon.css">
+            
+        <!-- Transition theme. More available in /themes/transition/ or create your own. -->
+        <!--link rel="stylesheet" href="../themes/transition/horizontal-slide.css"-->
+            
+        <script src="../modernizr.custom.js"></script>
+            
+        <!-- Grab CDN jQuery, with a protocol relative URL; fall back to local if offline -->
+        <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
+        <script>window.jQuery || document.write('<script src="../jquery-1.7.2.min.js"><\/script>')</script>
+            
+        <!-- Deck Core and extensions -->
+        <script src="../core/deck.core.js"></script>
+        <script src="../extensions/hash/deck.hash.js"></script>
+        <script src="../extensions/status/deck.status.js"></script>
+        <script src="../extensions/fit/deck.fit.js"></script>
+        <link rel="stylesheet" href="../extensions/fit/deck.fit-fs.css">
+
+        <script src="../libs/display-latex2.user.js"></script>
+        <script src="../extensions/simplemath/deck.simplemath.js"></script>
+
+            
+        <style type="text/css">
+            .deck-container .slide {border: 1px dashed #333;} /* for the demo */
+            .slide h1 {font-size: 3em;}
+            .slide h1 b {color: #0F0;}
+            .slide h1 em {color: #445; text-shadow: none; font-size: .3em;}
+        </style>
+    </head>
+
+<!-- for the demo, the body is not the container so it can be resized by the user -->
+<body>
+
+This page surely has a purpose.<br/>
+Use left/right arrow keys to browse the presentation.<br/>
+
+<!-- for the demo, a resizeable wrapper around the container -->
+<div class="deck-container">
+
+<!-- Begin slides -->
+<section class="slide" id="title-slide">
+	<h1 title="use arrow keys to navigate">Getting started with deck.js:<br/><b>simplemath</b> extension
+            <br/><em>use right arrow to move on</em>
+        </h1>
+</section>
+
+<section class="slide">
+    <h2>“simplemath”: What?</h2>
+    <ul>
+        <li>Add math equations in your slides</li>
+        <li>Use latex syntax</li>
+        <li>Just wrap your maths in a "span" element</li>
+        <li>Wants to learn latex syntax?</li>
+        <ul>
+            <li>view the source of this page</li>
+            <li>view <a href="http://www.andy-roberts.net/writing/latex/mathematics_1">online resources</a> (there are a lot)</li>
+        </ul>
+        <li>… examples on the next slide</li>
+    </ul>
+</section>
+<section class="slide">
+    <h2>“simplemath” in action</h2>
+    <ul>
+        <li>
+            <span class="latex">e=mc^2</span>
+                      <span class="latex">(\frac{x^2}{y^3})</span>
+                      <span class="latex">[\begin{array}{cc} \sqrt{x} & 2 \\ 3 & x^4 \end{array}]</span>
+        </li>
+        <li><span class="latex">
+                f(n) = \left\{
+                \begin{array}{l l}
+                   n/2      & \mbox{if } n \mbox{ is even}\\
+                   -(n+1)/2 & \mbox{if } n \mbox{ is odd}
+                \end{array}
+        </span></li>
+        <li><span class="latex">a^2 + \frac{1}{\sqrt{a^2 + \frac{1}{\sqrt{a^2 + \frac{1}{\sqrt{a^2 + b^{\infty}}}}}}}</span></li>
+        <br/>
+    </ul>
+</section>
+<section class="slide">
+    <h2>Principle</h2>
+    <ul>
+        <li>Written in Javascript</li>
+        <li>Interprets latex syntax</li>
+        <li>Generates MathML (web standard for maths)</li>
+        <li>Lets your browser render the MathML</li>
+        <br/>
+        <li>Works fully offline</li>
+        <ul style="list-style-type:none">
+            <li>− depends on browser support for MathML</li>
+            <li>+ works offline :)</li>
+
+        </ul>
+    </ul>
+</section>
+<section class="slide">
+    <h2>Browser support</h2>
+    <ul>
+        <li>Did it work for you? :)</li>
+        <li>See <a href="https://en.wikipedia.org/wiki/MathML#Web_browsers">the wikipedia page on MathML</a></li>
+    </ul>
+</section>
+<!-- DEMO: simplemath -->
+
+<!-- deck.navigation snippet -->
+<!--a href="#" class="deck-prev-link" title="Previous">&#8592;</a>
+<a href="#" class="deck-next-link" title="Next">&#8594;</a-->
+
+<!-- deck.status snippet -->
+<!--p class="deck-status">
+	<span class="deck-status-current"></span>
+	/
+	<span class="deck-status-total"></span>
+</p-->
+
+<!-- deck.hash snippet -->
+<a href="." title="Permalink to this slide" class="deck-permalink">#</a>
+
+<!-- Initialize the deck -->
+<script>
+$(function() {
+	$.deck('.slide', {
+            // fitMarginX:100, fitMarginY:100,
+            // fitMode: "stretched" //"center middle" //"bottom right" //"top left"
+        });
+});
+</script>
+</div>
+</body>
+</html>
diff --git a/deck.js/samples/deck-smartsyntax.html b/deck.js/samples/deck-smartsyntax.html
new file mode 100644
index 0000000..0fab88d
--- /dev/null
+++ b/deck.js/samples/deck-smartsyntax.html
@@ -0,0 +1,191 @@
+<!DOCTYPE html>
+<!--[if lt IE 7]> <html class="no-js ie6" lang="en"> <![endif]-->
+<!--[if IE 7]>    <html class="no-js ie7" lang="en"> <![endif]-->
+<!--[if IE 8]>    <html class="no-js ie8" lang="en"> <![endif]-->
+<!--[if gt IE 8]><!-->  <html class="no-js" lang="en"> <!--<![endif]-->
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+            
+        <title>deck.smartsyntax.js test/demo</title>
+            
+        <meta name="description" content="deck.*.js">
+        <meta name="author" content="Rémi Emonet">
+        <!--meta name="viewport" content="width=1024, user-scalable=no"/-->
+            
+        <!-- Core and extension CSS files -->
+        <link rel="stylesheet" href="../core/deck.core.css">
+        <link rel="stylesheet" href="../extensions/status/deck.status.css">
+        <link rel="stylesheet" href="../extensions/hash/deck.hash.css">
+            
+        <!-- Style theme. More available in /themes/style/ or create your own. -->
+        <link rel="stylesheet" href="../themes/style/neon.css">
+            
+        <!-- Transition theme. More available in /themes/transition/ or create your own. -->
+        <!--link rel="stylesheet" href="../themes/transition/horizontal-slide.css"-->
+            
+        <script src="../modernizr.custom.js"></script>
+            
+        <!-- Grab CDN jQuery, with a protocol relative URL; fall back to local if offline -->
+        <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
+        <script>window.jQuery || document.write('<script src="../jquery-1.7.2.min.js"><\/script>')</script>
+            
+        <!-- Deck Core and extensions -->
+        <script src="../core/deck.core.js"></script>
+        <script src="../extensions/hash/deck.hash.js"></script>
+        <!--script src="../extensions/status/deck.status.js"></script--->
+        <script src="../extensions/fit/deck.fit.js"></script>
+        <link rel="stylesheet" href="../extensions/fit/deck.fit-fs.css">
+
+        <script src="../extensions/step/deck.step.js"></script>
+        <script src="../extensions/events/deck.events.js"></script>
+        <script src="../extensions/anim/deck.anim.js"></script>
+        <script src="../libs/jquerysvg/jquery.svg.min.js"></script>
+        <script src="../libs/jquerysvg/jquery.svganim.min.js"></script>
+        <script src="../extensions/svg/deck.svg.js"></script>
+        <script src="../libs/display-latex2.user.js"></script>
+        <script src="../extensions/simplemath/deck.simplemath.js"></script>
+
+        <script src="../extensions/smartsyntax/deck.smartsyntax.js"></script>
+
+            
+        <style type="text/css">
+            .deck-container>.slide {border: 1px dashed #333;} /* for the demo */
+            .slide ul ul {margin-bottom: 0.25em;} /* remove some big spacing with neon nested lists */
+            .deck-container > .slide .deck-before, .deck-container > .slide .deck-previous {opacity: 0.6;} /* <-- override darkish neon theme --> */
+            .slide h1 {font-size: 3em;}
+            .slide h1 b {color: #0F0;}
+            .slide h1 em {color: #445; text-shadow: none; font-size: .3em;}
+            .slide h1 em {color: #445; text-shadow: none; font-size: .3em; display: inline-block;}
+            .slide .smaller {text-shadow: none; font-size: .8em;}
+
+            .slide b {color: blue;}
+            .slide .highlight {color: red;}
+            .funny b {color: chartreuse}
+            .svgThatFloatsRight {float: right}
+
+            .slide .floatright {float:right;}
+            .slide div.svgitem {display: inline-block; vertical-align: middle;}
+        </style>
+    </head>
+
+<!-- for the demo, the body is not the container so it can be resized by the user -->
+<body>
+<svg id="svg-image-blur">
+    <filter id="blur-effect-1">
+        <feGaussianBlur stdDeviation="5" />
+    </filter>
+</svg>
+
+This page surely has a purpose.<br/>
+Use left/right arrow keys to browse the presentation.<br/>
+
+<!-- for the demo, a resizeable wrapper around the container -->
+<div class="deck-container">
+
+<section class="smart">
+    ==Getting started with deck.js:<br/><b>smartsyntax</b> extension<br/><em>use right arrow to move on</em>==#title-slide
+
+    =SmartSynt. ≃ Wiki Synt.=
+    * Easy bullet points (numbered or not)
+    * To learn smart syntax
+    ** Go through the current presentation<br/>to get an idea of what is possible
+    ** View the source of this page (Ctrl+U)
+
+    =SmartSynt. ≃ Wiki++=
+    * Easy class additions
+    *# on the slide itself (see next one)
+    *# on a bullet point (like this one who has a 'highlight' class)[highlight]
+    * Allow tags e.g. <b>this is inside a &lt;b> tag</b>
+    * NB
+    ** &lt;b> (bold) is styled in blue
+    ** 'highlight' class is styled in red
+
+    =Styled Slide=[funny]
+    * In the "smart syntax" source
+    ** this slide has the custom 'funny' class
+    * In the css of this page
+    ** &lt;b> tags within a 'funny' are styled in chartreuse (green)
+    ** (with <tt>.funny b {color: chartreuse}</tt>)
+    * and an example: <b>chartreuse is great!</b>, (<a href="http://duckduckgo.com/?q=chartreuse">learn more on chartreuse</a>)
+
+    =Deck.js Friendly=
+    * Friend with deck.js
+    ** creation of slides (<tt>&lt;section></tt> with a <tt>slide</tt> class)
+    * Friend with the theme conventions
+    ** title slides with a <tt>&lt;h1></tt> (using "<tt>==....==</tt>")
+    ** normal slides with a <tt>&lt;h2></tt> (using "<tt>=....=</tt>")
+
+    =Deck.*.js Friendly=
+    @svg: svgThatFloatsRight smiley.svg 150px 150px
+    * Friend with some deck.js extensions
+    ** SVG inclusion <br/>(smiley from <a href="http://openclipart.org/detail/77641/smiley-face-by-inky2010">inky2010</a>)
+    ** Latex maths using a pair of $$ signs
+    *** $E = mc^2$
+    *** $c = \sqrt{a^2+b^2}$
+    *** (use two consecutive dollar signs to output a dollar)[smaller]
+    ** more on next slide
+
+    =Animations Friendly=
+    * Progressive display: use the <tt>slide</tt> class
+    * This has both <tt>slide</tt> and <tt>highlight</tt> classes[slide][highlight]
+    * Next: more things[slide]
+    @svg: svg,floatright smiley.svg 150px 300px
+    <video class="myvid" style="float:left" src="simple.ogv" height="200" width="200" onclick="this.paused ? this.play() : this.pause()" controls="true"></video>
+
+    @anim-appear:800: #bottom | #left + #right | .svg #reflect + -#bottom | @#zoom | @#far | #bottom
+    @anim-play: .myvid
+    @anim-pause: video
+    @anim-attribute:400: h2: font-size: .75em
+    @anim-attribute:400: h2: font-size: 2.5em
+</section>
+
+<!-- we can make stop the smartsyntax section and start another afterwards -->
+<section class="slide">
+    <h2>Browser support</h2>
+    <ul>
+        <li>Should be ok</li>
+    </ul>
+</section>
+
+<section class="smart">
+    =Additional Notes=
+    * Case insensitive… <tt><span class="s1">@ANIM-…</span> ≡ <span class="s2">@aNiM-…</span> ≡ <span class="s3">@anim-…</span></tt>
+    @ANIM-APPEAR:600: .s1
+    @aNiM-aPPear:600: .s2
+    @anim-appear:600: .s3
+    * No compilation phase[slide]
+    ** interpreted at loading time
+    ** faster development
+    * Backward compatible with old version[slide]
+
+</section>
+
+<!-- DEMO: smartsyntax -->
+
+<!-- deck.navigation snippet -->
+<!--a href="#" class="deck-prev-link" title="Previous">&#8592;</a>
+<a href="#" class="deck-next-link" title="Next">&#8594;</a-->
+
+<!-- deck.status snippet -->
+<!--p class="deck-status">
+	<span class="deck-status-current"></span>
+	/
+	<span class="deck-status-total"></span>
+</p-->
+
+<!-- deck.hash snippet -->
+<a href="." title="Permalink to this slide" class="deck-permalink">#</a>
+
+<!-- Initialize the deck -->
+<script>
+$(function() {
+	$.deck('.slide', {
+            // fitMarginX:100, fitMarginY:100,
+            // fitMode: "stretched" //"center middle" //"bottom right" //"top left"
+        });
+});
+</script>
+</div>
+</body>
+</html>
diff --git a/deck.js/samples/deck-step.html b/deck.js/samples/deck-step.html
new file mode 100644
index 0000000..36a84d0
--- /dev/null
+++ b/deck.js/samples/deck-step.html
@@ -0,0 +1,174 @@
+<!DOCTYPE html>
+<!--[if lt IE 7]> <html class="no-js ie6" lang="en"> <![endif]-->
+<!--[if IE 7]>    <html class="no-js ie7" lang="en"> <![endif]-->
+<!--[if IE 8]>    <html class="no-js ie8" lang="en"> <![endif]-->
+<!--[if gt IE 8]><!-->  <html class="no-js" lang="en"> <!--<![endif]-->
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+            
+        <title>deck.step.js test/demo</title>
+            
+        <meta name="description" content="deck.*.js">
+        <meta name="author" content="Rémi Emonet">
+        <!--meta name="viewport" content="width=1024, user-scalable=no"/-->
+            
+        <!-- Core and extension CSS files -->
+        <link rel="stylesheet" href="../core/deck.core.css">
+        <link rel="stylesheet" href="../extensions/status/deck.status.css">
+        <link rel="stylesheet" href="../extensions/hash/deck.hash.css">
+            
+        <!-- Style theme. More available in /themes/style/ or create your own. -->
+        <link rel="stylesheet" href="../themes/style/neon.css">
+            
+        <!-- Transition theme. More available in /themes/transition/ or create your own. -->
+        <!--link rel="stylesheet" href="../themes/transition/horizontal-slide.css"-->
+            
+        <script src="../modernizr.custom.js"></script>
+            
+        <!-- Grab CDN jQuery, with a protocol relative URL; fall back to local if offline -->
+        <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
+        <script>window.jQuery || document.write('<script src="../jquery-1.7.2.min.js"><\/script>')</script>
+            
+        <!-- Deck Core and extensions -->
+        <script src="../core/deck.core.js"></script>
+        <script src="../extensions/hash/deck.hash.js"></script>
+        <script src="../extensions/status/deck.status.js"></script>
+        <script src="../extensions/fit/deck.fit.js"></script>
+        <link rel="stylesheet" href="../extensions/fit/deck.fit-fs.css">
+
+        <script src="../extensions/step/deck.step.js"></script>
+
+            
+        <style type="text/css">
+            .deck-container>.slide {border: 1px dashed #333;} /* for the demo */
+            .slide h1 {font-size: 3em;}
+            .slide h1 b {color: #0F0;}
+            .slide h1 em {color: #445; text-shadow: none; font-size: .3em;}
+            .slide .demo {font-size: .3em;}
+        </style>
+    </head>
+
+<!-- for the demo, the body is not the container so it can be resized by the user -->
+<body>
+
+This page surely has a purpose.<br/>
+Use left/right arrow keys to browse the presentation.<br/>
+
+<!-- for the demo, a resizeable wrapper around the container -->
+<div class="deck-container">
+
+<!-- Begin slides -->
+<section class="slide" id="title-slide">
+	<h1 title="use arrow keys to navigate">Getting started with deck.js:<br/><b>step</b> extension
+            <br/><em>use right arrow to move on</em>
+        </h1>
+</section>
+
+<section class="slide">
+    <h2>Nested deck.js slides</h2>
+    <ul>
+        <li>Not an extension (in core deck.js)</li>
+        <li>Just have an element with the “slide” class…</li>
+        <li>… and it will appear (hit the right arrow now)</li>
+        <li class="slide">Hey! I appeared! (go on)</li>
+        <li class="slide">The gray-ish style is part of the theme</li>
+    </ul>
+</section>
+<section class="slide">
+    <h2>Why the step extension?</h2>
+    <ul>
+        <li class="slide">
+        <span class="slide">Nested slides</span>
+        <span class="slide">are cool</span>
+        <span class="slide">and useful</span>
+        </li>
+        <li class="slide">But there is a problem</li>
+        <li class="slide">
+        <span class="slide">Navigating</span>
+        <span class="slide">is</span>
+        <span class="slide">annoying</span>
+        <span class="slide">with</span>
+        <span class="slide">nesting</span>
+        <span class="slide">!!!</span>
+        </li>
+        <li class="slide">Example:<br/> Try using the left arrow to go back to previous slide</li>
+        <li class="slide">Probably annoying!?</li>
+        <li class="slide">Now try hitting the up arrow</li>
+        <li class="slide">More on the next slide…</li>
+    </ul>
+</section>
+<section class="slide">
+    <h2>The “step” extension</h2>
+    <br/>
+    <ul>
+        <li>Adds new key shortcuts</li>
+        <ul>
+            <li>up arrow: previous top level slide</li>
+            <li>down arrow: next top level slide</li>
+        </ul>
+    </ul>
+</section>
+</section>
+<section class="slide">
+    <h2>More “step”<span class="demo"> </span></h2>
+    <br/>
+    <ul>
+        <li class="slide">Other stuff… not visible
+            <ul>
+                <li>Defaults to not counting nested slides<br/>   (if you use the status extension)</li>
+                <li>Add notifications events to nested slides when the parent gets activated (for animations)</li>
+                <li>(The title ends in "21", see why in the source)</li>
+            </ul>
+        </li>
+        <!-- demotoshow shows a message (specific to this page) -->
+        <div class="demotoshow1 slide"></div> <!-- any "slide" receives a notification when the toplevel gets shown -->
+        <div class="demotoshow2 onshowtoplevel"></div> <!-- "onshowtoplevel" is a second default class that gets inited -->
+        <!-- the first of these two is a "slide", so it will get activated when "right arrow" is pressed, and the previous part will get gray -->
+        <!-- the second one is not a "slide", so it won't influence the navigation at all -->
+    </ul>
+</section>
+<section class="slide">
+    <h2>Browser support</h2>
+    <ul>
+        <li>Should be ok</li>
+    </ul>
+</section>
+
+<!-- DEMO: step -->
+
+<!-- deck.navigation snippet -->
+<!--a href="#" class="deck-prev-link" title="Previous">&#8592;</a>
+<a href="#" class="deck-next-link" title="Next">&#8594;</a-->
+
+<!-- deck.status snippet -->
+<!--p class="deck-status">
+	<span class="deck-status-current"></span>
+	/
+	<span class="deck-status-total"></span>
+</p-->
+
+<!-- deck.hash snippet -->
+<a href="." title="Permalink to this slide" class="deck-permalink">#</a>
+
+<!-- Initialize the deck -->
+<script>
+$(function() {
+
+        // we register the listeners before call the deck init
+        $('.demotoshow1').bind('deck.toplevelBecameCurrent', function() {
+            $(".demo").html($(".demo").html()+"1");
+        });
+        $('.demotoshow2').bind('deck.toplevelBecameCurrent', function() {
+            $(".demo").html($(".demo").html()+"2");
+        });
+        
+	$.deck('.slide', {
+            // fitMarginX:100, fitMarginY:100,
+            // fitMode: "stretched" //"center middle" //"bottom right" //"top left"
+        });
+});
+</script>
+</div>
+</body>
+</html>
diff --git a/deck.js/samples/deck-svg.html b/deck.js/samples/deck-svg.html
new file mode 100644
index 0000000..ee98779
--- /dev/null
+++ b/deck.js/samples/deck-svg.html
@@ -0,0 +1,368 @@
+<!DOCTYPE html>
+<!--[if lt IE 7]> <html class="no-js ie6" lang="en"> <![endif]-->
+<!--[if IE 7]>    <html class="no-js ie7" lang="en"> <![endif]-->
+<!--[if IE 8]>    <html class="no-js ie8" lang="en"> <![endif]-->
+<!--[if gt IE 8]><!-->  <html class="no-js" lang="en"> <!--<![endif]-->
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+            
+        <title>deck.svg.js test/demo</title>
+            
+        <meta name="description" content="deck.*.js">
+        <meta name="author" content="Rémi Emonet">
+        <!--meta name="viewport" content="width=1024, user-scalable=no"/-->
+            
+        <!-- Core and extension CSS files -->
+        <link rel="stylesheet" href="../core/deck.core.css">
+        <link rel="stylesheet" href="../extensions/status/deck.status.css">
+        <link rel="stylesheet" href="../extensions/hash/deck.hash.css">
+            
+        <!-- Style theme. More available in /themes/style/ or create your own. -->
+        <link rel="stylesheet" href="../themes/style/neon.css">
+            
+        <!-- Transition theme. More available in /themes/transition/ or create your own. -->
+        <!--link rel="stylesheet" href="../themes/transition/horizontal-slide.css"-->
+            
+        <script src="../modernizr.custom.js"></script>
+            
+        <!-- Grab CDN jQuery, with a protocol relative URL; fall back to local if offline -->
+        <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
+        <script>window.jQuery || document.write('<script src="../jquery-1.7.2.min.js"><\/script>')</script>
+            
+        <!-- Deck Core and extensions -->
+        <script src="../core/deck.core.js"></script>
+        <script src="../extensions/hash/deck.hash.js"></script>
+        <!--script src="../extensions/status/deck.status.js"></script--->
+        <script src="../extensions/fit/deck.fit.js"></script>
+        <link rel="stylesheet" href="../extensions/fit/deck.fit-fs.css">
+
+        <script src="../extensions/step/deck.step.js"></script>
+        <script src="../extensions/events/deck.events.js"></script>
+        <script src="../extensions/anim/deck.anim.js"></script>
+        <script src="../libs/jquerysvg/jquery.svg.min.js"></script>
+        <script src="../libs/jquerysvg/jquery.svganim.min.js"></script>
+        <script src="../extensions/svg/deck.svg.js"></script>
+
+            
+        <style type="text/css">
+            .deck-container>.slide {border: 1px dashed #333;} /* for the demo */
+            .slide ul ul {margin-bottom: 0.25em;} /* remove some big spacing with neon nested lists */
+            .slide h1 {font-size: 3em;}
+            .slide h1 b {color: #0F0;}
+            .slide h1 em {color: #445; text-shadow: none; font-size: .3em;}
+            .slide h1 em {color: #445; text-shadow: none; font-size: .3em; display: inline-block;}
+            .slide span.highlight {border: 1px solid red;}
+            .deck-container > .slide .deck-before, .deck-container > .slide .deck-previous {opacity: 0.6;} /* <-- override darkish neon theme --> */
+            div.floatright {float:right;}
+            div.svgitem {display: inline-block; vertical-align: middle;}
+
+            .svgitem #circleRedCircle {fill: #D00; stroke-width: 20px; stroke: white;}
+            .style1 #circleRedCircle {fill: #D00; stroke-width: 20px; stroke: white;}
+            .style2 #circleRedCircle {fill: #999; stroke-width: 5px; stroke: green;}
+            .style3 #circleRedCircle {fill: yellow; stroke-width: 5px; stroke: red;}
+            .style3 #circleRedCircle:hover {stroke-width: 25px; filter: blur(10px)}
+            .style3 #circleBlue:hover {fill: #F00;}
+
+            /* playing with blur: http://css-plus.com/2012/03/gaussian-blur/ */
+            .style3 #circleRedCircle:hover, .style3 #circleGreen:hover {
+              -webkit-transition: all 0.5s ease-out; 
+                 -moz-transition: all 0.5s ease-out; 
+                  -ms-transition: all 0.5s ease-out; 
+                   -o-transition: all 0.5s ease-out; 
+                      transition: all 0.5s ease-out;
+            }
+            .style3 #circleRedCircle:hover, .style3 #circleGreen:hover { -webkit-filter: blur(5px); filter: url(#blur-effect-1); }
+        </style>
+    </head>
+
+<!-- for the demo, the body is not the container so it can be resized by the user -->
+<body>
+<svg id="svg-image-blur">
+    <filter id="blur-effect-1">
+        <feGaussianBlur stdDeviation="5" />
+    </filter>
+</svg>
+
+This page surely has a purpose.<br/>
+Use left/right arrow keys to browse the presentation.<br/>
+
+<!-- for the demo, a resizeable wrapper around the container -->
+<div class="deck-container">
+
+<!-- Begin slides -->
+<section class="slide" id="title-slide">
+	<h1 title="use arrow keys to navigate">Getting started with deck.js:<br/><b>svg</b> extension
+            <br/><em>use right arrow to move on</em>
+            <br/><em class="ffox">(Firefox may ask for a plugin: just close the message and click on the page to give the focus back)</em>
+        </h1>
+</section>
+
+<section class="slide">
+    <h2>SVG Introduction</h2>
+    <ul>
+        <li>Scalable Vector Graphics (SVG)
+            <ul>
+                <li>Standard format for the web (and more)</li>
+                <li>Vector graphics: arbitrary stretching, no pixels</li>
+                <li>Cool editors (e.g., <a href="http://inkscape.org/">Inkscape</a>)</li>
+                <li>Lot of existing SVG (smiley by <a href="http://openclipart.org/detail/77641/smiley-face-by-inky2010">inky2010</a>)</li>
+            </ul>
+        </li>
+        <a href="http://openclipart.org/detail/77641/smiley-face-by-inky2010">
+        <object type="deckjs/svg" class="svgitem floatright">
+            <param name="src" value="smiley.svg" />
+            <param name="width" value="200px" />
+            <param name="height" value="200px" />
+        </object>
+        </a>
+    </ul>
+</section>
+<section class="slide">
+    <h2>The “svg” extension</h2>
+    <ul>
+        <li><a href="http://tavmjong.free.fr/SVG/SVG_IN_HTML/svg_in_html.html">Existing ways</a> of integrating SVG in HTML
+            <ul>
+                <li>Inline: the SVG content must be in the HTML file</li>
+                <li><tt>img</tt> tag: no interactivity support</li>
+                <li><tt>iframe/object/embed</tt> tags: separate DOM tree (styling and manipulation made harder)</li>
+            </ul>
+        </li>
+        <li>Deck.svg.js extension
+            <ul>
+                <li>does “inline” inclusion of external SVG files</li>
+                <li>uses a custom "object" tag and <a href="http://keith-wood.name/svg.html">jquery-svg</a></li>
+            </ul>
+        </li>
+    </ul>
+</section>
+<section class="slide">
+    <h2>Deck.svg.js: size</h2>
+    <object type="deckjs/svg" class="svgitem">
+        <param name="src" value="smiley.svg" />
+        <param name="width" value="10px" />
+        <param name="height" value="10px" />
+    </object>
+    <object type="deckjs/svg" class="svgitem">
+        <param name="src" value="smiley.svg" />
+        <param name="width" value="21px" />
+        <param name="height" value="21px" />
+    </object>
+    <object type="deckjs/svg" class="svgitem">
+        <param name="src" value="smiley.svg" />
+        <param name="width" value="42px" />
+        <param name="height" value="42px" />
+    </object>
+    <object type="deckjs/svg" class="svgitem">
+        <param name="src" value="smiley.svg" />
+        <param name="width" value="85px" />
+        <param name="height" value="85px" />
+    </object>
+    <object type="deckjs/svg" class="svgitem">
+        <param name="src" value="smiley.svg" />
+        <param name="width" value="175px" />
+        <param name="height" value="175px" />
+    </object>
+    <object type="deckjs/svg" class="svgitem">
+        <param name="src" value="smiley.svg" />
+        <param name="width" value="350px" />
+        <param name="height" value="350px" />
+    </object>
+</section>
+<section class="slide">
+    <h2>Deck.svg.js: autosize</h2>
+    <ul><li>Does not work in chrome?<br/>(should see two smileys below)</li></ul>
+    <object type="deckjs/svg" class="svgitem">
+        <param name="src" value="smiley.svg" />
+        <param name="width" value="350px" />
+    </object>
+    <object type="deckjs/svg" class="svgitem">
+        <param name="src" value="smiley.svg" />
+        <param name="height" value="350px" />
+    </object>
+</section>
+<section class="slide">
+    <h2>Deck.svg.js: stretching</h2>
+    <object type="deckjs/svg" class="svgitem">
+        <param name="src" value="smiley.svg" />
+        <param name="width" value="100px" />
+        <param name="height" value="150px" />
+    </object>
+    <object type="deckjs/svg" class="svgitem">
+        <param name="src" value="smiley.svg" />
+        <param name="width" value="100px" />
+        <param name="height" value="150px" />
+        <param name="stretch" value="true" />
+    </object>
+    <object type="deckjs/svg" class="svgitem">
+        <param name="src" value="smiley.svg" />
+        <param name="width" value="100px" />
+        <param name="height" value="200px" />
+        <param name="stretch" value="true" />
+    </object>
+    <object type="deckjs/svg" class="svgitem">
+        <param name="src" value="smiley.svg" />
+        <param name="width" value="100px" />
+        <param name="height" value="250px" />
+        <param name="stretch" value="true" />
+    </object>
+    <object type="deckjs/svg" class="svgitem">
+        <param name="src" value="smiley.svg" />
+        <param name="width" value="100px" />
+        <param name="height" value="300px" />
+        <param name="stretch" value="true" />
+    </object>
+    <object type="deckjs/svg" class="svgitem">
+        <param name="src" value="smiley.svg" />
+        <param name="width" value="100px" />
+        <param name="height" value="350px" />
+        <param name="stretch" value="true" />
+    </object>
+    <object type="deckjs/svg" class="svgitem">
+        <param name="src" value="smiley.svg" />
+        <param name="width" value="100px" />
+        <param name="height" value="450px" />
+        <param name="stretch" value="true" />
+    </object>
+</section>
+<section class="slide">
+    <h2>Deck.svg.js: CSS styling</h2>
+    <object type="deckjs/svg" class="svgitem style1">
+        <param name="src" value="circle.svg" />
+        <param name="width" value="200px" />
+        <param name="height" value="200px" />
+    </object>
+    <object type="deckjs/svg" class="svgitem style2">
+        <param name="src" value="circle.svg" />
+        <param name="width" value="200px" />
+        <param name="height" value="200px" />
+    </object>
+    <object type="deckjs/svg" class="svgitem style3">
+        <param name="src" value="circle.svg" />
+        <param name="width" value="200px" />
+        <param name="height" value="200px" />
+    </object>
+    <ul>
+        <li>The same file is included three times using different styles (move your mouse on the yellow circle)</li>
+        <li>Needs for the SVG file to not contain the css attribute of interest<br/>(removed manually for the example)</li>
+    </ul>
+</section>
+<section class="slide">
+    <h2>svg+anim: show/hide</h2>
+    <object type="deckjs/svg" class="svgitem svg1">
+        <param name="src" value="smiley.svg" />
+        <param name="width" value="200px" />
+        <param name="height" value="200px" />
+    </object>
+    <object type="deckjs/svg" class="svgitem svg2">
+        <param name="src" value="smiley.svg" />
+        <param name="width" value="200px" />
+        <param name="height" value="200px" />
+    </object>
+    <object type="deckjs/svg" class="svgitem svg3">
+        <param name="src" value="smiley.svg" />
+        <param name="width" value="200px" />
+        <param name="height" value="200px" />
+    </object>
+    <ul>
+        <li>Use normal “anim” extension</li>
+        <li>Smooth operation thanks to <a href="http://keith-wood.name/svg.html">jquery-svg</a></li>
+        <li>Make stuff appear/disappear, …</li>
+    </ul>
+    <div class="anim-show slide" data-what=".svg2 svg"></div>
+    <div class="anim-show slide" data-what=".svg2 #left"></div>
+    <div class="anim-show slide" data-what=".svg2 #bottom"></div>
+    <div class="anim-show slide" data-what=".svg2 #right"></div>
+    <div class="anim-show slide" data-what=".svg2 #reflect"></div>
+    <div class="anim-hide slide" data-what="#left, #right, .svg2 #bottom"></div>
+    <div class="anim-show slide anim-continue" data-what="#left, #right, .svg2 #bottom"></div>
+    <div class="anim-hide slide" data-what=".svg3"></div>
+</section>
+<section class="slide">
+    <h2>svg+anim: svg attributes</h2>
+    <object type="deckjs/svg" class="svgitem svg1">
+        <param name="src" value="circle.svg" />
+        <param name="width" value="200px" />
+        <param name="height" value="200px" />
+    </object>
+    <object type="deckjs/svg" class="svgitem svg2">
+        <param name="src" value="circle.svg" />
+        <param name="width" value="200px" />
+        <param name="height" value="200px" />
+    </object>
+    <object type="deckjs/svg" class="svgitem svg3">
+        <param name="src" value="circle.svg" />
+        <param name="width" value="200px" />
+        <param name="height" value="200px" />
+    </object>
+    <div class="anim-hide slide" data-what=".svg1 #circleRed, .svg1 #circleBlue"></div>
+    <div class="anim-hide slide anim-continue" data-what=".svg2 #circleBlue, .svg1 #circleGreen"></div>
+    <div class="anim-show slide" data-what=".svg1 #circleRed, .svg2 #circleRed"></div>
+    <ul class="slide"><li>The "view box" can be animate, and that's awesome</li></ul>
+    <!--div class="anim-attribute slide" data-what=".svg1 svg, .svg2 svg" data-attr="svgViewBox:110 120.5 17 17"></div not fully working (jquerysvg pb?) -->
+    <div class="anim-viewboxas slide" data-what=".svg1 svg, .svg2 svg" data-as="#zoomBox1"></div>
+    <!--div class="anim-attribute slide" data-what=".svg1 #coolText" data-attr="svg-transform: rotate(90)"></div-->
+</section>
+<!--section class="slide">
+    <h2>Add/Remove Classes</h2>
+    <ul>
+        <li class="slide">We can also <span class="demo1">add</span>/remove classes: like the “highlight”</li>
+        <li class="slide"><span class="demo2 highlight">This is highlight by default</span> (styled with css)</li>
+        <li class="slide">We can add a class</li>
+        <div class="anim-addclass slide" data-what=".demo1" data-class="highlight"></div>
+        <li class="slide">And remove it</li>
+        <div class="anim-removeclass slide" data-what=".demo1,.demo2" data-class="highlight"></div>
+    </ul>
+</section-->
+<!--section class="slide">
+    <h2>The “svg” extension</h2>
+    <ul>
+        <li>Works in conjunction with</li>
+        <ul>
+            <li>“events”: extension that triggers events<br/>   (notify the slide when it becomes current)</li>
+            <li>“step”: extension that also trigger init events<br/>   (knowing about toplevel vs nested slides)</li>
+        </ul>
+        <li>Uses open attributes "data-*" (see source)</li>
+        <li>Adds animation classes</li>
+        <ul>
+            <li>anim-show/hide, anim-addclass/removeclass,</li>
+            <li>anim-attribute, anim-play, anim-pause, …</li>
+        </ul>
+    </ul>
+</section-->
+<section class="slide">
+    <h2>Browser support</h2>
+    <ul>
+        <li>Should be ok with a decent browser</li>
+        <li>Chrome problem when only width or height is specified</li>
+    </ul>
+</section>
+
+<!-- DEMO: svg -->
+
+<!-- deck.navigation snippet -->
+<!--a href="#" class="deck-prev-link" title="Previous">&#8592;</a>
+<a href="#" class="deck-next-link" title="Next">&#8594;</a-->
+
+<!-- deck.status snippet -->
+<!--p class="deck-status">
+	<span class="deck-status-current"></span>
+	/
+	<span class="deck-status-total"></span>
+</p-->
+
+<!-- deck.hash snippet -->
+<a href="." title="Permalink to this slide" class="deck-permalink">#</a>
+
+<!-- Initialize the deck -->
+<script>
+$(function() {
+	$.deck('.slide', {
+            // fitMarginX:100, fitMarginY:100,
+            // fitMode: "stretched" //"center middle" //"bottom right" //"top left"
+        });
+});
+</script>
+</div>
+</body>
+</html>
diff --git a/deck.js/samples/rectangle.png b/deck.js/samples/rectangle.png
new file mode 100644
index 0000000..bea0b6a
--- /dev/null
+++ b/deck.js/samples/rectangle.png
diff --git a/deck.js/samples/simple.ogv b/deck.js/samples/simple.ogv
new file mode 100644
index 0000000..70fc871
--- /dev/null
+++ b/deck.js/samples/simple.ogv
diff --git a/deck.js/samples/smiley.svg b/deck.js/samples/smiley.svg
new file mode 100755
index 0000000..aeecf69
--- /dev/null
+++ b/deck.js/samples/smiley.svg
@@ -0,0 +1,272 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="200"
+   height="200"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.48.3.1 r9886"
+   sodipodi:docname="smiley.svg">
+  <defs
+     id="defs4">
+    <filter
+       x="-0.1171589"
+       y="-0.13548033"
+       width="1.2343178"
+       height="1.2709607"
+       color-interpolation-filters="sRGB"
+       id="filter4112">
+      <feGaussianBlur
+         id="feGaussianBlur4114"
+         stdDeviation="9.7319538" />
+    </filter>
+    <radialGradient
+       cx="200.99496"
+       cy="183.04042"
+       r="86.833374"
+       fx="200.99496"
+       fy="183.04042"
+       id="radialGradient5213"
+       xlink:href="#linearGradient3959"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(-0.01247785,-0.77362204,0.9051095,-0.01459876,14.306029,334.58889)" />
+    <linearGradient
+       id="linearGradient3959">
+      <stop
+         id="stop3961"
+         style="stop-color:#00ffff;stop-opacity:1"
+         offset="0" />
+      <stop
+         id="stop3963"
+         style="stop-color:#00ffff;stop-opacity:0"
+         offset="1" />
+    </linearGradient>
+    <linearGradient
+       x1="240.8517"
+       y1="-35.273369"
+       x2="178.73732"
+       y2="205.57832"
+       id="linearGradient5215"
+       xlink:href="#linearGradient3973"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(455.60801,222.60417)" />
+    <linearGradient
+       id="linearGradient3973">
+      <stop
+         id="stop3975"
+         style="stop-color:#ffffff;stop-opacity:1"
+         offset="0" />
+      <stop
+         id="stop3977"
+         style="stop-color:#ffffff;stop-opacity:0"
+         offset="1" />
+    </linearGradient>
+    <linearGradient
+       x1="157.18742"
+       y1="100.99799"
+       x2="151.48305"
+       y2="128.88608"
+       id="linearGradient5217"
+       xlink:href="#linearGradient4153"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(-0.54256638,0.14634927,-0.29910372,-0.26547378,718.04314,141.22157)" />
+    <linearGradient
+       id="linearGradient4153">
+      <stop
+         id="stop4155"
+         style="stop-color:#ffffff;stop-opacity:1"
+         offset="0" />
+      <stop
+         id="stop4157"
+         style="stop-color:#ffffff;stop-opacity:0"
+         offset="1" />
+    </linearGradient>
+    <linearGradient
+       x1="157.18742"
+       y1="100.99799"
+       x2="151.48305"
+       y2="128.88608"
+       id="linearGradient5219"
+       xlink:href="#linearGradient4153"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(-0.54256638,0.14634927,-0.29910372,-0.26547378,765.61377,139.50575)" />
+    <linearGradient
+       id="linearGradient3799">
+      <stop
+         id="stop3801"
+         style="stop-color:#ffffff;stop-opacity:1"
+         offset="0" />
+      <stop
+         id="stop3803"
+         style="stop-color:#ffffff;stop-opacity:0"
+         offset="1" />
+    </linearGradient>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1.8101934"
+     inkscape:cx="-23.134185"
+     inkscape:cy="108.14566"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer2"
+     showgrid="false"
+     inkscape:window-width="1600"
+     inkscape:window-height="850"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     borderlayer="false"
+     inkscape:snap-page="true" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-5.908984,9.0723069)">
+    <g
+       transform="translate(-520.99785,-282.60186)"
+       id="g5196">
+      <path
+         inkscape:connector-curvature="0"
+         d="m 259.8663,144.73158 c 0,47.6067 -38.87662,86.19956 -86.83337,86.19956 -47.95675,0 -86.833376,-38.59286 -86.833376,-86.19956 0,-47.606697 38.876626,-86.199552 86.833376,-86.199552 47.95675,0 86.83337,38.592855 86.83337,86.199552 z"
+         transform="matrix(0.82542448,0,-0.16994034,0.18041549,514.68602,419.72807)"
+         id="path4650"
+         style="opacity:0.76999996;fill:#434343;fill-opacity:1;stroke:none;filter:url(#filter4112)" />
+      <path
+         inkscape:connector-curvature="0"
+         d="m 259.8663,144.73158 c 0,47.6067 -38.87662,86.19956 -86.83337,86.19956 -47.95675,0 -86.833376,-38.59286 -86.833376,-86.19956 0,-47.606697 38.876626,-86.199552 86.833376,-86.199552 47.95675,0 86.83337,38.592855 86.83337,86.199552 z"
+         transform="translate(453.07273,226.40709)"
+         id="path4652"
+         style="fill:#0000ff;fill-opacity:1;stroke:none" />
+      <path
+         inkscape:connector-curvature="0"
+         d="m 259.8663,144.73158 c 0,47.6067 -38.87662,86.19956 -86.83337,86.19956 -47.95675,0 -86.833376,-38.59286 -86.833376,-86.19956 0,-47.606697 38.876626,-86.199552 86.833376,-86.199552 47.95675,0 86.83337,38.592855 86.83337,86.199552 z"
+         transform="translate(453.07273,226.40709)"
+         id="path4654"
+         style="fill:url(#radialGradient5213);fill-opacity:1;stroke:none" />
+      <path
+         inkscape:connector-curvature="0"
+         d="m 628.60801,293.91667 c -16.97304,0.16673 -35.78645,5.21304 -47.21875,18.1875 11.41222,42.17165 65.8215,66.53703 104.4375,44.96875 4.8731,-2.76624 11.39862,-5.548 14.15625,-10.03125 -8.59889,-30.8005 -39.23863,-54.03831 -71.375,-53.125 z"
+         id="reflect"
+         style="fill:url(#linearGradient5215);fill-opacity:1;stroke:none"
+         inkscape:label="#path4656" />
+      <g
+         id="left"
+         inkscape:label="#g48">
+        <path
+           style="fill:#000000;fill-opacity:1;stroke:none"
+           id="path4658"
+           d="m 562.46601,329.28391 c 1.94927,-1.52526 3.94632,-3.00495 5.85078,-4.5957 1.74064,-1.66573 3.86664,-2.69411 5.64985,-4.24913 1.65402,-1.32519 3.15997,-2.79316 4.72926,-4.20758 0.74214,-0.79082 1.55726,-1.51793 2.37956,-2.24447 2.69652,-2.36166 4.50859,-0.4418 1.81209,1.9199 l 0,0 c -0.80062,0.69109 -1.55127,1.41263 -2.28547,2.16097 -1.66086,1.48812 -3.25284,3.04194 -4.99897,4.44125 -1.86049,1.52021 -3.85564,2.6856 -5.67838,4.27284 -2.21368,1.82262 -4.49175,3.58084 -6.78253,5.27742 -2.94692,1.88915 -3.6231,-0.88634 -0.67619,-2.7755 z"
+           inkscape:connector-curvature="0" />
+        <path
+           style="fill:#f9f9f9;fill-opacity:1;stroke:none"
+           id="path4662"
+           transform="matrix(1.2318841,0,0,1.6041667,401.07798,151.85202)"
+           d="m 171.13147,119.37877 c 0,8.40118 -6.52673,15.21169 -14.57787,15.21169 -8.05113,0 -14.57786,-6.81051 -14.57786,-15.21169 0,-8.40118 6.52673,-15.21169 14.57786,-15.21169 8.05114,0 14.57787,6.81051 14.57787,15.21169 z"
+           inkscape:connector-curvature="0" />
+        <g
+           id="g4664"
+           transform="matrix(0.6645897,0,0,1,187.82755,211.29642)">
+          <path
+             style="fill:#000000;fill-opacity:1;stroke:none"
+             id="path4666"
+             transform="matrix(0.84257609,0,0,0.84257609,471.14016,23.754892)"
+             d="m 171.13147,119.37877 c 0,8.40118 -6.52673,15.21169 -14.57787,15.21169 -8.05113,0 -14.57786,-6.81051 -14.57786,-15.21169 0,-8.40118 6.52673,-15.21169 14.57786,-15.21169 8.05114,0 14.57787,6.81051 14.57787,15.21169 z"
+             inkscape:connector-curvature="0" />
+          <path
+             style="fill:url(#linearGradient5217);fill-opacity:1;stroke:none"
+             id="path4668"
+             d="m 605.66314,134.60426 c 2.58606,-0.78514 3.89522,-2.41527 3.26391,-3.8335 -5.04318,-0.3142 -10.23043,0.56622 -14.88229,1.11525 0.76566,2.46016 7.25062,4.17951 11.61838,2.71825 z"
+             inkscape:connector-curvature="0" />
+        </g>
+      </g>
+      <g
+         id="right"
+         inkscape:label="#g41">
+        <path
+           style="fill:#000000;fill-opacity:1;stroke:none"
+           id="path4660"
+           d="m 671.82503,330.672 c -2.16108,-1.20659 -4.36233,-2.36077 -6.48922,-3.63897 -1.97659,-1.37753 -4.2357,-2.06594 -6.23728,-3.3275 -1.83852,-1.05442 -3.55274,-2.27273 -5.32129,-3.42836 -0.85517,-0.66694 -1.77261,-1.25976 -2.69707,-1.85087 -3.02831,-1.91781 -4.52281,0.25841 -1.49451,2.17626 l 0,0 c 0.89757,0.55943 1.75046,1.15665 2.59124,1.78287 1.87039,1.21434 3.68285,2.50421 5.6238,3.61767 2.07257,1.21527 4.2235,2.0592 6.2691,3.34653 2.46817,1.45964 4.99001,2.84571 7.51492,4.16893 3.20289,1.41234 3.44319,-1.4342 0.24031,-2.84656 z"
+           inkscape:connector-curvature="0" />
+        <path
+           style="fill:#f9f9f9;fill-opacity:1;stroke:none"
+           id="path4670"
+           d="m 662.69008,348.51611 c 0,13.47689 -7.33075,24.40208 -16.37369,24.40208 -9.04294,0 -16.37369,-10.92519 -16.37369,-24.40208 0,-13.4769 7.33075,-24.40209 16.37369,-24.40209 9.04294,0 16.37369,10.92519 16.37369,24.40209 z"
+           inkscape:connector-curvature="0" />
+        <g
+           id="g4672"
+           transform="matrix(0.6645897,0,0,1,208.30119,219.8887)">
+          <path
+             style="fill:#000000;fill-opacity:1;stroke:none"
+             id="path4674"
+             transform="matrix(0.84257609,0,0,0.84257609,517.44315,22.039072)"
+             d="m 171.13147,119.37877 c 0,8.40118 -6.52673,15.21169 -14.57787,15.21169 -8.05113,0 -14.57786,-6.81051 -14.57786,-15.21169 0,-8.40118 6.52673,-15.21169 14.57786,-15.21169 8.05114,0 14.57787,6.81051 14.57787,15.21169 z"
+             inkscape:connector-curvature="0" />
+          <path
+             style="fill:url(#linearGradient5219);fill-opacity:1;stroke:none"
+             id="path4676"
+             d="m 653.23377,132.88844 c 2.58606,-0.78514 3.89522,-2.41527 3.26391,-3.8335 -5.04318,-0.3142 -10.23043,0.56622 -14.88229,1.11525 0.76566,2.46016 7.25062,4.17951 11.61838,2.71825 z"
+             inkscape:connector-curvature="0" />
+        </g>
+      </g>
+      <path
+         inkscape:connector-curvature="0"
+         d="m 171.13147,119.37877 c 0,8.40118 -6.52673,15.21169 -14.57787,15.21169 -8.05113,0 -14.57786,-6.81051 -14.57786,-15.21169 0,-8.40118 6.52673,-15.21169 14.57786,-15.21169 8.05114,0 14.57787,6.81051 14.57787,15.21169 z"
+         transform="matrix(0.66459167,0,0,0.92590939,500.32602,305.20869)"
+         id="bottom"
+         style="fill:#000000;fill-opacity:1;stroke:none"
+         inkscape:label="#path4604" />
+    </g>
+    <g
+       inkscape:groupmode="layer"
+       id="layer2"
+       inkscape:label="Invisible Rects"
+       style="display:none">
+      <rect
+         style="opacity:0.7;color:#000000;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+         id="zoom"
+         width="53.515625"
+         height="65.234375"
+         x="101.61211"
+         y="30.771442"
+         inkscape:label="#rect3021" />
+      <rect
+         style="opacity:0.7;color:#000000;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+         id="far"
+         width="374.4758"
+         height="330.95184"
+         x="-88.975266"
+         y="-79.713989"
+         inkscape:label="#rect3021" />
+    </g>
+  </g>
+</svg>