Add new snap.js

Web/resources/Snap.js/.gitignore

+#################
+## Eclipse
+#################
+
+*.pydevproject
+.project
+.metadata
+bin/
+tmp/
+*.tmp
+*.bak
+*.swp
+*~.nib
+local.properties
+.classpath
+.settings/
+.loadpath
+
+# External tool builders
+.externalToolBuilders/
+
+# Locally stored "Eclipse launch configurations"
+*.launch
+
+# CDT-specific
+.cproject
+
+# PDT-specific
+.buildpath
+
+
+#################
+## Visual Studio
+#################
+
+## Ignore Visual Studio temporary files, build results, and
+## files generated by popular Visual Studio add-ons.
+
+# User-specific files
+*.suo
+*.user
+*.sln.docstates
+
+# Build results
+[Dd]ebug/
+[Rr]elease/
+*_i.c
+*_p.c
+*.ilk
+*.meta
+*.obj
+*.pch
+*.pdb
+*.pgc
+*.pgd
+*.rsp
+*.sbr
+*.tlb
+*.tli
+*.tlh
+*.tmp
+*.vspscc
+.builds
+*.dotCover
+
+## TODO: If you have NuGet Package Restore enabled, uncomment this
+#packages/
+
+# Visual C++ cache files
+ipch/
+*.aps
+*.ncb
+*.opensdf
+*.sdf
+
+# Visual Studio profiler
+*.psess
+*.vsp
+
+# ReSharper is a .NET coding add-in
+_ReSharper*
+
+# Installshield output folder
+[Ee]xpress
+
+# DocProject is a documentation generator add-in
+DocProject/buildhelp/
+DocProject/Help/*.HxT
+DocProject/Help/*.HxC
+DocProject/Help/*.hhc
+DocProject/Help/*.hhk
+DocProject/Help/*.hhp
+DocProject/Help/Html2
+DocProject/Help/html
+
+# Click-Once directory
+publish
+
+# Others
+[Bb]in
+[Oo]bj
+sql
+TestResults
+*.Cache
+ClientBin
+stylecop.*
+~$*
+*.dbmdl
+Generated_Code #added for RIA/Silverlight projects
+
+# Backup & report files from converting an old project file to a newer
+# Visual Studio version. Backup files are not needed, because we have git ;-)
+_UpgradeReport_Files/
+Backup*/
+UpgradeLog*.XML
+
+
+
+############
+## Windows
+############
+
+# Windows image file caches
+Thumbs.db
+
+# Folder config file
+Desktop.ini
+
+
+#############
+## Python
+#############
+
+*.py[co]
+
+# Packages
+*.egg
+*.egg-info
+dist
+build
+eggs
+parts
+bin
+var
+sdist
+develop-eggs
+.installed.cfg
+
+# Installer logs
+pip-log.txt
+
+# Unit test / coverage reports
+.coverage
+.tox
+
+#Translations
+*.mo
+
+#Mr Developer
+.mr.developer.cfg
+
+# Mac crap
+.DS_Store

Web/resources/Snap.js/README.md

+# Snap.js
+A Library for creating beautiful mobile shelfs in Javascript
+
+<a href="http://www.screenr.com/embed/0EJ7" target="_blank">View Video Preview</a>
+
+<a href="http://jakiestfu.github.io/Snap.js/" target="_blank">View Demos</a>
+
+<a href="http://www.screenr.com/embed/0EJ7" target="_blank"><img src="http://i.imgur.com/t3mGcEx.gif"></a>
+
+* [Features](#features)
+* [Support](#support)
+* [Installation](#installation)
+* [Usage](#usage)
+* [Settings &amp; Defaults](#settings-and-defaults)
+* [Public Methods](#public-methods)
+* [Gotchas](#gotchas)
+* [FAQ's](#faq)
+* [Compliments](#compliments)
+* [Licensing](#licensing)
+* [Extras](#extras)
+
+## Features
+* Library Independent
+* High Customization
+* Flick Support
+* User Intent Detection
+* Disable Hyperextension
+* Event Hooks
+* CSS3 Powered Animations with IE fallbacks
+* Drag Support
+* Drag Handle Support
+* Programatic API
+* "No-Drag" Elements
+* Definable Easing Mode
+* Enable/Disable Events
+* Disabled Sides (left or right)
+* Supports [Ratchet](http://maker.github.com/ratchet/) (with templates!)
+
+## Support
+* Firefox 10+
+* Wide Webkit Support (including Android WebKit 2.3.X)
+* IE 10
+* IE 9 Supports Toggling, Dragging but no Transitions
+* IE 7/8 Supports Toggling but no dragging or Transitions
+
+## Installation
+
+As standalone just include the file in a script tag:
+
+```html
+<script src="snap.js"></script>
+```
+
+As a <a href="http://component.io" target="_blank">web component</a> do:
+
+```shell
+$ component install jakiestfu/Snap.js
+```
+
+## Usage
+
+```javascript
+var snapper = new Snap({
+  element: document.getElementById('content')
+});
+```
+
+## Settings and Defaults
+```javascript
+settings = {
+    element: null,
+    dragger: null,
+    disable: 'none',
+    addBodyClasses: true,
+    hyperextensible: true,
+    resistance: 0.5,
+    flickThreshold: 50,
+    transitionSpeed: 0.3,
+    easing: 'ease',
+    maxPosition: 266,
+    minPosition: -266,
+    tapToClose: true,
+    touchToDrag: true,
+    slideIntent: 40,
+    minDragDistance: 5
+}
+```
+
+* `element`: The element which the user will be sliding side to side
+* `dragger`: The element which the user will be using to slide the target element side to side
+* `disable`: String, set to 'left' or 'right' to disable the respective side
+* `addBodyClasses`: Add classes to the body to signify which side is being opened
+* `hyperextensible`: If false, pane may not be slide past the minPosition and maxPosition
+* `resistance`: The cooeficcient used to slow sliding when user has passed max or min threshold
+* `flickThreshold`: Number of pixels the user needs to swiftly travel to activate a "flick" open
+* `transitionSpeed`: The speed at which the pane slides open or closed
+* `easing`: The CSS3 Easing method you want to use for transitions
+* `maxPosition`: Maximum number of pixels the pane may be slid to the right
+* `minPosition`: Maximum number of pixels the pane may be slid to the left
+* `tapToClose`: If true, tapping an open pane will close it
+* `touchToDrag`: If true, dragging the target `settings.element` will open/close the pane
+* `minDragDistance`: The minimum amount of pixels the user needs to drag within the `slideIntent` degrees to move the pane 
+* `slideIntent`: The number of degrees the user must initiate sliding in towards the left or right (see diagram below)
+
+Notes on Slide Intent: The slide intent is an int between 0 and 90, and represents the degrees in the first quadrant of a circle that you would like to have mirrored on the X *and* Y axis. For example, if you have 40 set as your `slideIntent` value, the user would only be able to slide the pane by dragging in the blue area in the diagram below. Once intent has been defined, it will not change until the user releases.
+
+<img src="http://i.imgur.com/uG2CNR8.png">
+
+
+## Public Methods
+
+### `open`: Opens the pane to the specified side
+
+```javascript
+snapper.open('left');
+// OR
+snapper.open('right');
+```
+
+### `close`: Closes the pane
+
+```javascript
+snapper.close();
+```
+
+### `expand`: Opens the pane entirely
+
+```javascript
+snapper.expand('left');
+// OR
+snapper.expand('right');
+```
+
+### `disable`: Disables sliding events
+
+```javascript
+snapper.disable();
+```
+
+### `enable`: Enables sliding events after disabling
+
+```javascript
+snapper.enable();
+```
+
+### `on`: Adds an event hook
+
+```javascript
+snapper.on('start', function(){
+  // Do Something
+});
+```
+The available methods to hook into are as follows:
+
+* `start`: Fired when touching down on the draggable pane and it begins to move
+* `drag`: Fired when the pane has been moved or slid
+* `end`: Fired when the pane has been let go of
+* `animating`: Fired when the pane is animating
+* `animated`: Fired when the pane is finished it's animations
+* `ignore`: Fired when trying to drag the pane but ended up dragging on an ignored element
+* `close`: Fired when close is called directly or if tapToClose is set to true
+* `open`: Fired when the menu is opened
+* `expandLeft`: Fired on expand('left')
+* `expandRight`: Fired on expand('right')
+* `enable`: Fired on enable
+* `disable`: Fired on disable
+
+### `off`: Removes an event hook
+
+```javascript
+snapper.off('drag');
+```
+The event names listed above apply for the `off` method.
+
+
+### `settings`: Updates the settings for an already instantiated object
+```javascript
+snapper.settings({yourSettings});
+```
+Currently, `settings.element`, `settings.touchToDrag` cannot be updated. To update the element, instantiate a new object. To allow listening to a drag, use `snapper.enable()`
+
+### `state`: Returns detailed information about the state of the pane
+
+```javascript
+var data = snapper.state();
+```
+The data returned from the `state` method will look like the following:
+
+```javascript
+{
+    state: "closed", // State of the Pane
+    info:{
+        opening: "left", // Side which user intends to open
+        towards: "right", // Direction user is dragging towards
+        hyperExtending: false, // True if user is pulling past predefined bounds
+        halfway: false, // True if pane is at least halfway open
+        flick: false, // True if user has moved pane X amount of pixels in the open/close direction without changing directions
+        translation:{
+            absolute: 20, // Pixels pane has translated
+            relative: 21, // Pixels pane has translated relative to starting translation
+            sinceDirectionChange: 10, // Pixels pane has translated since the direction of the pane has changed
+            percentage: 40.571649 // The percentage that the Pane is open. Good or animating other things
+        }
+    }
+} 
+```
+
+## Gotchas
+
+### Layout
+The layout itself is what most people will have a hard time emulating, so the simplest approach I have found is as follows:
+
+Two absolute elements, one to represent *all* the content, and another to represent *all* the drawers. The content has a higher z-index than the drawers. Within the drawers element, it's direct children should represent the containers for the drawers, these should be `fixed` or `absolute`. Assigning classes to your drawers to specify which side it is on is recommended. All absolutely positioned elements should have 0 for `top, left, right, bottom` properties, excluding your panes which will have `auto` set to their respective sides and a width assigned. The width of your drawers is usually the same number you want to use for `minPosition` and `maxPosition`
+
+```html
+div.drawers {position: absolute;}
+    div.left-drawer  {position: absolute;}
+        [content]
+    div.right-drawer  {position: absolute;}
+        [content]
+div#content {position: absolute;}
+    [top-bars]
+    [content] {overflow: auto}
+    [bottom-bars]
+```
+
+A sample layout is found in demo/apps/default.html.
+
+### Independent Scrolling
+Some CSS is required to get some smooth ass scrolling. Utilize the CSS below to apply this to any of your elements:
+```css
+.scrollable{
+    overflow: auto;
+    -webkit-transition-property: top, bottom;
+    transition-property: top, bottom;
+    -webkit-transition-duration: .2s, .2s;
+    transition-duration: .2s, .2s;
+    -webkit-transition-timing-function: linear, linear;
+    transition-timing-function: linear, linear;
+    -webkit-overflow-scrolling: touch;
+}
+```
+
+### Z-Indeces and Display
+Because of the nature of this code, drawers are just kind of stacked behind the content. To bring the proper drawer to the front, you can hook into Snaps.js' CSS classes:
+
+With `addBodyClasses` set to `true` in your initialize options, one of the two classess will be added to the body tag: `.snapjs-left` or `.snapjs-right`, depending on which pane is being open, respectively. This being said, you can apply your CSS like the following to show the proper drawers:
+
+```css
+.snapjs-right .left-drawer,
+.snapjs-left .right-drawer {
+    display: none;
+}
+```
+
+## FAQ
+
+### - How do I make a toggle button?
+Toggles have been a popular request, but rather than bog the library down with additional methods, you can utilize the powerful API of Snap.js to create your own toggle. Toggles can be done like the following:
+
+```javascript
+myToggleButton.addEventListener('click', function(){
+
+    if( snapper.state().state=="left" ){
+        snapper.close();
+    } else {
+        snapper.open('left');
+    }
+
+});
+```
+
+### - How do I disable Snap.js dragging for my touch slider?
+Snap.js supports cascading cancellation of events via a data attribute `data-snap-ignore`. If you were to use a slider, your markup might look like the following:
+
+```html
+<div class="slider" data-snap-ignore="true">
+    <ul>
+        <li><img src="slide.jpg"></li>
+        <li><img src="slide.jpg"></li>
+        <li><img src="slide.jpg"></li>
+        <li><img src="slide.jpg"></li>
+        <li><img src="slide.jpg"></li>
+    </ul>
+</div>
+```
+
+All interactions on children elements of the element with the `data-snap-ignore` attribute will have their Snap.js events ignored.
+
+
+### - I am using Push.js from Ratchet, I keep losing my events on my elements, how can I fix this?
+Simple. As wack as Push.js is (yes, it is in desperate need of attention as of v1.0.0), we can still solve this problem with it's only callback, `'push'`.
+
+```javascript
+// The function that will initialize your Snap.js instance
+var doSnap = function(){
+    if(window.snapper){
+         // Snap.js already exists, we just need to re-bind events
+        window.snapper.enable();
+    } else {
+        // Initialize Snap.js
+        window.snapper = new Snap({
+            element: document.getElementById('content')
+        });
+    } 
+};
+
+window.addEventListener('push', doSnap);
+doSnap();
+```
+
+### - Snap.js works on my Android device but i cannot scroll the content in my drawers, what gives?
+Older Android devices (and iPhone as well) do not have native support for overflow scrolling. To solve this, you may use the wonderful library called [iScroll](https://github.com/cubiq/iscroll)
+
+### - `transform: translate3d()` breaks my fixed child elements, how can I solve this?
+[This is a problem with Chromium](https://code.google.com/p/chromium/issues/detail?id=20574) and should be fixed soon. I would advise not having your direct children element set to fixed, that may possibly solve your problem.
+
+### - I am experiencing a weird flicker when the CSS transform is applied
+To solve the flicker, apply the following CSS to the element in question
+```css
+#content{
+    backface-visibility:hidden;
+    -webkit-backface-visibility:hidden; /* Chrome and Safari */
+    -moz-backface-visibility:hidden; /* Firefox */
+    -ms-backface-visibility:hidden; /* Internet Explorer 10+ */
+}
+```
+
+## Compliments
+
+This code attempts to make your webapp's feel more "native". These other repos go well with it, too!
+
+* [Snap.js](https://github.com/jakiestfu/Snap.js)
+* [AppScroll.js](https://github.com/jakiestfu/AppScroll)
+* [fastclick](https://github.com/ftlabs/fastclick)
+
+## Licensing
+
+MIT, dawg

Web/resources/Snap.js/component.json

+{
+  "name": "Snap.js",
+  "description": "A Library for creating beautiful mobile shelfs in Javascript (Facebook and Path style side menus)",
+  "version": "1.9.2",
+  "author": "Jacob Kelley <jakie8@gmail.com>",
+  "keywords": [
+    "mobile shelfs",
+    "nav",
+    "menu",
+    "mobile",
+    "side menu"
+  ],
+  "license": "MIT",
+  "main": "snap.js",
+  "scripts": ["snap.js"]
+}

Web/resources/Snap.js/demo/apps/classNames.html

+<!DOCTYPE HTML><html lang="en-US">
    <head>
        <title>Snap.js</title>
        <meta http-equiv="x-ua-compatible" content="IE=edge" />
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-touch-fullscreen" content="yes">
        <link rel="stylesheet" type="text/css" href="../../snap.css" />
        <link rel="stylesheet" type="text/css" href="../assets/demo.css" />
    </head>
    <body>
        <div class="snap-drawers">
            <div class="snap-drawer snap-drawer-left">
                <div>
                    <h3>Snap.js</h3>
                    <div class="demo-social">
                        <a href="https://twitter.com/share" class="twitter-share-button" data-lang="en" data-text="Snap.js - A Library for creating beautiful mobile shelfs in Javascript" data-url="http://jakiestfu.github.com/Snap.js/" data-count="none" data-via="jakiestfu">Tweet</a>
                        <a href="https://twitter.com/jakiestfu" class="twitter-follow-button" data-show-count="false" data-lang="en">Follow @jakiestfu</a>
                        <iframe src="http://ghbtns.com/github-btn.html?user=jakiestfu&amp;repo=Snap.js&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="120" height="20"></iframe>
                    </div>
                    <h4>Demos</h4>
                    <ul>
                        <li><a href="default.html">Default</a></li>
                        <li><a href="noDrag.html">No Drag</a></li>
                        <li><a href="dragElement.html">Drag Element</a></li>
                        <li><a href="rightDisabled.html">Right Disabled</a></li>
                        <li><a href="hyperextend.html">Hyperextension Disabled</a></li>
                        <li><a href="skinnyThreshold.html">Skinny Threshold</a></li>
                        <li><a href="toggles.html">Toggles</a></li>
                        <li><a href="classNames.html">Class Names</a></li>
                        <li><a href="expand.html">Expanding</a></li>
                        <li><a href="settings.html">Settings</a></li>
                        <li><a href="ratchet/template.html">Ratchet</a></li>
                    </ul>
                    <div>
                        <p>The class names demo shows how you can utilize the classess added by Snap.js to adjust hidden content. In this case, we're showing the same menu on both sides of the app via CSS and classess.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non erat ac leo ultrices blandit sed vel risus. Pellentesque facilisis blandit auctor. Maecenas vestibulum vulputate tincidunt. Mauris nec quam libero. Fusce eget ligula non leo varius condimentum quis ac elit. Donec id urna ut neque semper ultrices. Proin ut suscipit felis. Nullam neque felis, ullamcorper scelerisque volutpat vel, vehicula vehicula neque. Aenean scelerisque elit ac erat sagittis ullamcorper.</p>
                    </div>
                </div>
            </div>
            <div class="snap-drawer snap-drawer-right"></div>
        </div>
        
        <div id="content" class="snap-content" style="opacity:0.8;">
            <div id="toolbar">
                <a href="#" id="open-left"></a>
                <h1>Class Names</h1>
            </div>
        </div>
        <script type="text/javascript" src="../../snap.js"></script>
        <script type="text/javascript">
            var snapper = new Snap({
                element: document.getElementById('content')
            });
            
        </script>
        <script type="text/javascript" src="../assets/demo.js"></script>
        <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>       
    </body></html>
\ No newline at end of file

Web/resources/Snap.js/demo/apps/default.html

+<!DOCTYPE HTML><html lang="en-US">
    <head>
        <title>Snap.js</title>
        <meta http-equiv="x-ua-compatible" content="IE=edge" />
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-touch-fullscreen" content="yes">
        <link rel="stylesheet" type="text/css" href="../../snap.css" />
        <link rel="stylesheet" type="text/css" href="../assets/demo.css" />
    </head>
    <body>
        <div class="snap-drawers">
            <div class="snap-drawer snap-drawer-left">
                <div>
                    <h3>Snap.js</h3>
                    <div class="demo-social">
                        <a href="https://twitter.com/share" class="twitter-share-button" data-lang="en" data-text="Snap.js - A Library for creating beautiful mobile shelfs in Javascript" data-url="http://jakiestfu.github.com/Snap.js/" data-count="none" data-via="jakiestfu">Tweet</a>
                        <a href="https://twitter.com/jakiestfu" class="twitter-follow-button" data-show-count="false" data-lang="en">Follow @jakiestfu</a>
                        <iframe src="http://ghbtns.com/github-btn.html?user=jakiestfu&amp;repo=Snap.js&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="120" height="20"></iframe>
                    </div>
                    <h4>Demos</h4>
                    <ul>
                        <li><a href="default.html">Default</a></li>
                        <li><a href="noDrag.html">No Drag</a></li>
                        <li><a href="dragElement.html">Drag Element</a></li>
                        <li><a href="rightDisabled.html">Right Disabled</a></li>
                        <li><a href="hyperextend.html">Hyperextension Disabled</a></li>
                        <li><a href="skinnyThreshold.html">Skinny Threshold</a></li>
                        <li><a href="toggles.html">Toggles</a></li>
                        <li><a href="classNames.html">Class Names</a></li>
                        <li><a href="expand.html">Expanding</a></li>
                        <li><a href="settings.html">Settings</a></li>
                        <li><a href="ratchet/template.html">Ratchet</a></li>
                    </ul>
                    <div>
                        <p>The Default demo shows basic Snap.js functionality</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non erat ac leo ultrices blandit sed vel risus. Pellentesque facilisis blandit auctor. Maecenas vestibulum vulputate tincidunt. Mauris nec quam libero. Fusce eget ligula non leo varius condimentum quis ac elit. Donec id urna ut neque semper ultrices. Proin ut suscipit felis. Nullam neque felis, ullamcorper scelerisque volutpat vel, vehicula vehicula neque. Aenean scelerisque elit ac erat sagittis ullamcorper.</p>
                    </div>
                </div>
            </div>
            <div class="snap-drawer snap-drawer-right"></div>
        </div>
        
        <div id="content" class="snap-content">
            <div id="toolbar">
                <a href="#" id="open-left"></a>
                <h1>Default</h1>
            </div>
        </div>
        <script type="text/javascript" src="../../snap.js"></script>
        <script type="text/javascript">
            var snapper = new Snap({
                element: document.getElementById('content')
            });
            
        </script>
        <script type="text/javascript" src="../assets/demo.js"></script>
        <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>       
    </body></html>
\ No newline at end of file

Web/resources/Snap.js/demo/apps/dragElement.html

+<!DOCTYPE HTML>
+<html lang="en-US">
+    <head>
+        <title>Snap.js</title>
+        <meta http-equiv="x-ua-compatible" content="IE=edge" />
+        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-touch-fullscreen" content="yes">
+        <link rel="stylesheet" type="text/css" href="../../snap.css" />
+        <link rel="stylesheet" type="text/css" href="../assets/demo.css" />
+    </head>
+    <body>
+        <div class="snap-drawers">
+            <div class="snap-drawer snap-drawer-left">
+                <div>
+                    <h3>Snap.js</h3>
+                    <div class="demo-social">
+                        <a href="https://twitter.com/share" class="twitter-share-button" data-lang="en" data-text="Snap.js - A Library for creating beautiful mobile shelfs in Javascript" data-url="http://jakiestfu.github.com/Snap.js/" data-count="none" data-via="jakiestfu">Tweet</a>
+                        <a href="https://twitter.com/jakiestfu" class="twitter-follow-button" data-show-count="false" data-lang="en">Follow @jakiestfu</a>
+                        <iframe src="http://ghbtns.com/github-btn.html?user=jakiestfu&amp;repo=Snap.js&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="120" height="20"></iframe>
+                    </div>
+                    <h4>Demos</h4>
+                    <ul>
+                        <li><a href="default.html">Default</a></li>
+                        <li><a href="noDrag.html">No Drag</a></li>
+                        <li><a href="dragElement.html">Drag Element</a></li>
+                        <li><a href="rightDisabled.html">Right Disabled</a></li>
+                        <li><a href="hyperextend.html">Hyperextension Disabled</a></li>
+                        <li><a href="skinnyThreshold.html">Skinny Threshold</a></li>
+                        <li><a href="toggles.html">Toggles</a></li>
+                        <li><a href="classNames.html">Class Names</a></li>
+                        <li><a href="expand.html">Expanding</a></li>
+                        <li><a href="settings.html">Settings</a></li>
+                        <li><a href="ratchet/template.html">Ratchet</a></li>
+                    </ul>
+                    <div>
+                        <p>Data attributes can be used to define elements that you want to have prevent sliding of a pane (maybe a photo slider, etc)</p>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non erat ac leo ultrices blandit sed vel risus. Pellentesque facilisis blandit auctor. Maecenas vestibulum vulputate tincidunt. Mauris nec quam libero. Fusce eget ligula non leo varius condimentum quis ac elit. Donec id urna ut neque semper ultrices. Proin ut suscipit felis. Nullam neque felis, ullamcorper scelerisque volutpat vel, vehicula vehicula neque. Aenean scelerisque elit ac erat sagittis ullamcorper.</p>
+                    </div>
+                </div>
+            </div>
+            <div class="snap-drawer snap-drawer-right"></div>
+        </div>
+        
+        <div id="content" class="snap-content">
+            <div id="toolbar">
+                <a href="#" id="open-left"></a>
+                <h1>Drag Element</h1>
+            </div>
+            <div id="do-drag">Drag Handle</div>
+        </div>
+        
+        <script type="text/javascript" src="../../snap.js"></script>
+        <script type="text/javascript">
+            var snapper = new Snap({
+                element: document.getElementById('content'),
+                dragger: document.getElementById('do-drag')
+            });
+        </script>
+        <script type="text/javascript" src="../assets/demo.js"></script>
+        <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>       
+    </body>
+</html>

Web/resources/Snap.js/demo/apps/expand.html

+<!DOCTYPE HTML>
+<html lang="en-US">
+    <head>
+        <title>Snap.js</title>
+        <meta http-equiv="x-ua-compatible" content="IE=edge" />
+        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-touch-fullscreen" content="yes">
+        <link rel="stylesheet" type="text/css" href="../../snap.css" />
+        <link rel="stylesheet" type="text/css" href="../assets/demo.css" />
+    </head>
+    <body>
+        <div class="snap-drawers">
+            <div class="snap-drawer snap-drawer-left">
+                <div>
+                	<div class="search">
+                    	<input type="text" id="search" placeholder="Search for Things">
+                    </div>
+                    <div class="drawer-inner">
+                        <h3>Snap.js</h3>
+                        <div class="demo-social">
+                            <a href="https://twitter.com/share" class="twitter-share-button" data-lang="en" data-text="Snap.js - A Library for creating beautiful mobile shelfs in Javascript" data-url="http://jakiestfu.github.com/Snap.js/" data-count="none" data-via="jakiestfu">Tweet</a>
+                            <a href="https://twitter.com/jakiestfu" class="twitter-follow-button" data-show-count="false" data-lang="en">Follow @jakiestfu</a>
+                            <iframe src="http://ghbtns.com/github-btn.html?user=jakiestfu&amp;repo=Snap.js&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="120" height="20"></iframe>
+                        </div>
+                        <h4>Demos</h4>
+                        <ul>
+                            <li><a href="default.html">Default</a></li>
+	                        <li><a href="noDrag.html">No Drag</a></li>
+	                        <li><a href="dragElement.html">Drag Element</a></li>
+	                        <li><a href="rightDisabled.html">Right Disabled</a></li>
+	                        <li><a href="hyperextend.html">Hyperextension Disabled</a></li>
+	                        <li><a href="skinnyThreshold.html">Skinny Threshold</a></li>
+	                        <li><a href="toggles.html">Toggles</a></li>
+	                        <li><a href="classNames.html">Class Names</a></li>
+	                        <li><a href="expand.html">Expanding</a></li>
+	                        <li><a href="settings.html">Settings</a></li>
+	                        <li><a href="ratchet/template.html">Ratchet</a></li>
+                        </ul>
+                        <div>
+                            <p>Expanding is when the app disappears completely and the entire app's drawer takes up the usable space. Good for searching</p>
+                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non erat ac leo ultrices blandit sed vel risus. Pellentesque facilisis blandit auctor. Maecenas vestibulum vulputate tincidunt. Mauris nec quam libero. Fusce eget ligula non leo varius condimentum quis ac elit. Donec id urna ut neque semper ultrices. Proin ut suscipit felis. Nullam neque felis, ullamcorper scelerisque volutpat vel, vehicula vehicula neque. Aenean scelerisque elit ac erat sagittis ullamcorper.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="snap-drawer snap-drawer-right"></div>
+        </div>
+        
+        <div id="content" class="snap-content">
+            <div id="toolbar">
+                <a href="#" id="open-left"></a>
+                <h1>Expanding</h1>
+            </div>
+        </div>
+        <script type="text/javascript" src="../../snap.js"></script>
+        <script type="text/javascript">
+        	var snapper = new Snap({
+                element: document.getElementById('content'),
+                disable: 'right'
+            });
+            
+            document.getElementById('search').addEventListener('focus', function(){
+            	snapper.expand('left');
+            });
+            
+            document.getElementById('search').addEventListener('blur', function(){
+            	snapper.open('left');
+            });
+            
+        </script>
+        
+        <script type="text/javascript" src="../assets/demo.js"></script>
+        <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>       
+    </body>
+</html>

Web/resources/Snap.js/demo/apps/hyperextend.html

+<!DOCTYPE HTML><html lang="en-US">
    <head>
        <title>Snap.js</title>
        <meta http-equiv="x-ua-compatible" content="IE=edge" />
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-touch-fullscreen" content="yes">
        <link rel="stylesheet" type="text/css" href="../../snap.css" />
        <link rel="stylesheet" type="text/css" href="../assets/demo.css" />
    </head>
    <body>
        <div class="snap-drawers">
            <div class="snap-drawer snap-drawer-left">
                <div>
                    <h3>Snap.js</h3>
                    <div class="demo-social">
                        <a href="https://twitter.com/share" class="twitter-share-button" data-lang="en" data-text="Snap.js - A Library for creating beautiful mobile shelfs in Javascript" data-url="http://jakiestfu.github.com/Snap.js/" data-count="none" data-via="jakiestfu">Tweet</a>
                        <a href="https://twitter.com/jakiestfu" class="twitter-follow-button" data-show-count="false" data-lang="en">Follow @jakiestfu</a>
                        <iframe src="http://ghbtns.com/github-btn.html?user=jakiestfu&amp;repo=Snap.js&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="120" height="20"></iframe>
                    </div>
                    <h4>Demos</h4>
                    <ul>
                        <li><a href="default.html">Default</a></li>
                        <li><a href="noDrag.html">No Drag</a></li>
                        <li><a href="dragElement.html">Drag Element</a></li>
                        <li><a href="rightDisabled.html">Right Disabled</a></li>
                        <li><a href="hyperextend.html">Hyperextension Disabled</a></li>
                        <li><a href="skinnyThreshold.html">Skinny Threshold</a></li>
                        <li><a href="toggles.html">Toggles</a></li>
                        <li><a href="classNames.html">Class Names</a></li>
                        <li><a href="expand.html">Expanding</a></li>
                        <li><a href="settings.html">Settings</a></li>
                        <li><a href="ratchet/template.html">Ratchet</a></li>
                    </ul>
                    <div>
                        <p>The Default demo shows basic Snap.js functionality</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non erat ac leo ultrices blandit sed vel risus. Pellentesque facilisis blandit auctor. Maecenas vestibulum vulputate tincidunt. Mauris nec quam libero. Fusce eget ligula non leo varius condimentum quis ac elit. Donec id urna ut neque semper ultrices. Proin ut suscipit felis. Nullam neque felis, ullamcorper scelerisque volutpat vel, vehicula vehicula neque. Aenean scelerisque elit ac erat sagittis ullamcorper.</p>
                    </div>
                </div>
            </div>
            <div class="snap-drawer snap-drawer-right"></div>
        </div>
        
        <div id="content" class="snap-content">
            <div id="toolbar">
                <a href="#" id="open-left"></a>
                <h1>No Hyperextension</h1>
            </div>
        </div>
        <script type="text/javascript" src="../../snap.js"></script>
        <script type="text/javascript">
            var snapper = new Snap({
                element: document.getElementById('content'),
                hyperextensible: false
            });
            
        </script>
        <script type="text/javascript" src="../assets/demo.js"></script>
        <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>       
    </body></html>
\ No newline at end of file

Web/resources/Snap.js/demo/apps/noDrag.html

+<!DOCTYPE HTML>
+<html lang="en-US">
+    <head>
+        <title>Snap.js</title>
+        <meta http-equiv="x-ua-compatible" content="IE=edge" />
+        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-touch-fullscreen" content="yes">
+        <link rel="stylesheet" type="text/css" href="../../snap.css" />
+        <link rel="stylesheet" type="text/css" href="../assets/demo.css" />
+    </head>
+    <body>
+        <div class="snap-drawers">
+            <div class="snap-drawer snap-drawer-left">
+                <div>
+                    <h3>Snap.js</h3>
+                    <div class="demo-social">
+                        <a href="https://twitter.com/share" class="twitter-share-button" data-lang="en" data-text="Snap.js - A Library for creating beautiful mobile shelfs in Javascript" data-url="http://jakiestfu.github.com/Snap.js/" data-count="none" data-via="jakiestfu">Tweet</a>
+                        <a href="https://twitter.com/jakiestfu" class="twitter-follow-button" data-show-count="false" data-lang="en">Follow @jakiestfu</a>
+                        <iframe src="http://ghbtns.com/github-btn.html?user=jakiestfu&amp;repo=Snap.js&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="120" height="20"></iframe>
+                    </div>
+                    <h4>Demos</h4>
+                    <ul>
+                        <li><a href="default.html">Default</a></li>
+                        <li><a href="noDrag.html">No Drag</a></li>
+                        <li><a href="dragElement.html">Drag Element</a></li>
+                        <li><a href="rightDisabled.html">Right Disabled</a></li>
+                        <li><a href="hyperextend.html">Hyperextension Disabled</a></li>
+                        <li><a href="skinnyThreshold.html">Skinny Threshold</a></li>
+                        <li><a href="toggles.html">Toggles</a></li>
+                        <li><a href="classNames.html">Class Names</a></li>
+                        <li><a href="expand.html">Expanding</a></li>
+                        <li><a href="settings.html">Settings</a></li>
+                        <li><a href="ratchet/template.html">Ratchet</a></li>
+                    </ul>
+                    <div>
+                        <p>Data attributes can be used to define elements that you want to have prevent sliding of a pane (maybe a photo slider, etc)</p>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non erat ac leo ultrices blandit sed vel risus. Pellentesque facilisis blandit auctor. Maecenas vestibulum vulputate tincidunt. Mauris nec quam libero. Fusce eget ligula non leo varius condimentum quis ac elit. Donec id urna ut neque semper ultrices. Proin ut suscipit felis. Nullam neque felis, ullamcorper scelerisque volutpat vel, vehicula vehicula neque. Aenean scelerisque elit ac erat sagittis ullamcorper.</p>
+                    </div>
+                </div>
+            </div>
+            <div class="snap-drawer snap-drawer-right"></div>
+        </div>
+        
+        <div id="content" class="snap-content">
+            <div id="toolbar">
+                <a href="#" id="open-left"></a>
+                <h1>No Drag</h1>
+            </div>
+            <div id="no-drag" data-snap-ignore="true">No Drag</div>
+        </div>
+        
+        <script type="text/javascript" src="../../snap.js"></script>
+        <script type="text/javascript">
+            var snapper = new Snap({
+                element: document.getElementById('content')
+            });
+        </script>
+        <script type="text/javascript" src="../assets/demo.js"></script>
+        <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>       
+    </body>
+</html>

Web/resources/Snap.js/demo/apps/ratchet/ratchet.css

+/**
+ * ==================================
+ * Ratchet v1.0.0
+ * Licensed under The MIT License
+ * http://opensource.org/licenses/MIT
+ * ==================================
+ */
+
+/* Hard reset
+-------------------------------------------------- */
+
+html,
+body,
+div,
+span,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+section,
+summary,
+time,
+audio,
+video {
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+/* Prevents iOS text size adjust after orientation change, without disabling (Thanks to @necolas) */
+html {
+  -webkit-text-size-adjust: 100%;
+      -ms-text-size-adjust: 100%;
+}
+
+/* Base styles
+-------------------------------------------------- */
+
+body {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  font: 14px/1.25 "Helvetica Neue", sans-serif;
+  color: #222;
+  background-color: #fff;
+}
+
+/* Universal link styling */
+a {
+  color: #0882f0;
+  text-decoration: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* Removes the dark touch outlines on links */
+}
+
+/* Wrapper to be used around all content not in .bar-title and .bar-tab */
+.content {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: auto;
+  background: #fff;
+  -webkit-transition-property: top, bottom;
+          transition-property: top, bottom;
+  -webkit-transition-duration: .2s, .2s;  
+          transition-duration: .2s, .2s;  
+  -webkit-transition-timing-function: linear, linear;
+          transition-timing-function: linear, linear;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* Hack to force all relatively and absolutely positioned elements still render while scrolling
+   Note: This is a bug for "-webkit-overflow-scrolling: touch" */
+.content > * {
+  -webkit-transform: translateZ(0px);
+          transform: translateZ(0px);
+}
+
+/* Utility wrapper to pad in components like forms, block buttons and segmented-controllers so they're not full-bleed */
+.content-padded {
+  padding: 10px;
+}
+
+/* Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab.
+   Note: For these to work, content must come after both bars in the markup */
+.bar-title ~ .content {
+  top: 44px;
+}
+.bar-tab ~ .content {
+  bottom: 51px;
+}
+.bar-header-secondary ~ .content {
+  top: 88px;
+}/* General bar styles
+-------------------------------------------------- */
+
+[class*="bar-"] {
+  position: fixed;
+  right: 0;
+  left: 0;
+  z-index: 10;
+  height: 44px;
+  padding: 5px;
+  box-sizing: border-box;
+}
+
+/* Modifier class to dock any bar below .bar-title */
+.bar-header-secondary {
+  top: 45px;
+}
+
+/* Modifier class to dock any bar to bottom of viewport */
+.bar-footer {
+  bottom: 0;
+}
+
+/* Generic bar for wrapping buttons, segmented controllers, etc. */
+.bar-standard {
+  background-color: #f2f2f2;
+  background-image: -webkit-linear-gradient(top, #f2f2f2 0, #e5e5e5 100%);
+  background-image: linear-gradient(to bottom, #f2f2f2 0, #e5e5e5 100%);
+  border-bottom: 1px solid #aaa;
+  box-shadow: inset 0 1px 1px -1px #fff;
+}
+
+/* Flip border position to top for footer bars */
+.bar-footer.bar-standard,
+.bar-footer-secondary.bar-standard {
+  border-top: 1px solid #aaa;
+  border-bottom-width: 0;
+}
+
+/* Title bar
+-------------------------------------------------- */
+
+/* Bar docked to top of viewport for showing page title and actions */
+.bar-title {
+  top: 0;
+  display: -webkit-box;
+  display: box;
+  background-color: #1eb0e9;
+  background-image: -webkit-linear-gradient(top, #1eb0e9 0, #109adc 100%);
+  background-image: linear-gradient(to bottom, #1eb0e9 0, #109adc 100%);
+  border-bottom: 1px solid #0e5895;
+  box-shadow: inset 0 1px 1px -1px rgba(255, 255, 255, .8);
+  -webkit-box-orient: horizontal;
+          box-orient: horizontal;
+}
+
+/* Centered text in the .bar-title */
+.bar-title .title {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  width: 100%;
+  font-size: 20px;
+  font-weight: bold;
+  line-height: 44px;
+  color: #fff;
+  text-align: center;
+  text-shadow: 0 -1px rgba(0, 0, 0, .5);
+  white-space: nowrap;
+}
+
+.bar-title > a:not([class*="button"]) {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+/* Retain specified title color */
+.bar-title .title a {
+  color: inherit;
+}
+
+/* Tab bar
+-------------------------------------------------- */
+
+/* Bar docked to bottom used for primary app navigation */
+.bar-tab {
+  bottom: 0;
+  height: 50px;
+  padding: 0;
+  background-color: #393939;
+  background-image: -webkit-linear-gradient(top, #393939 0, #2b2b2b 100%);
+  background-image: linear-gradient(to bottom, #393939 0, #2b2b2b 100%);
+  border-top: 1px solid #000;
+  border-bottom-width: 0;
+  box-shadow: inset 0 1px 1px -1px rgba(255, 255, 255, .6);
+}
+
+/* Wrapper for individual tab */
+.tab-inner {
+  display: -webkit-box;
+  display: box;
+  height: 100%;
+  list-style: none;
+  -webkit-box-orient: horizontal;
+          box-orient: horizontal;
+}
+
+/* Navigational tab */
+.tab-item {
+  height: 100%;
+  padding-top: 9px;
+  text-align: center;
+  box-sizing: border-box;
+  -webkit-box-flex: 1;
+          box-flex: 1;
+}
+
+/* Active state for tab */
+.tab-item.active {
+  box-shadow: inset 0 0 20px rgba(0, 0, 0, .5);
+}
+
+/* Icon for tab  */
+.tab-icon {
+  display: block;
+  height: 18px;
+  margin: 0 auto;
+}
+
+/* Label for tab */
+.tab-label {
+  margin-top: 1px;
+  font-size: 10px;
+  font-weight: bold;
+  color: #fff;
+  text-shadow: 0 1px rgba(0, 0, 0, .3);
+}
+
+/* Buttons in title bars
+-------------------------------------------------- */
+
+/* Generic style for all buttons in .bar-title */
+.bar-title [class*="button"] {
+  position: relative;
+  z-index: 10; /* Places buttons over full width title */
+  font-size: 12px;
+  line-height: 23px;
+  color: #fff;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
+  background-color: #1eb0e9;
+  background-image: -webkit-linear-gradient(top, #1eb0e9 0, #0984c6 100%);
+  background-image: linear-gradient(to bottom, #1eb0e9 0, #0984c6 100%);
+  border: 1px solid #0e5895;
+  box-shadow: 0 1px rgba(255, 255, 255, .25);
+  -webkit-box-flex: 0;
+          box-flex: 0;
+}
+
+
+/* Hacky way to right align buttons outside of flex-box system
+   Note: is only absolutely positioned button, would be better if flex-box had an "align right" option */
+.bar-title .title + [class*="button"]:last-child,
+.bar-title .button + [class*="button"]:last-child,
+.bar-title [class*="button"].pull-right {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+}
+
+/* Override standard button active states */
+.bar-title .button:active {
+  color: #fff;
+  background-color: #0876b1;
+}
+
+/* Directional buttons in title bars (thanks to @GregorAdams for solution - http://cssnerd.com/2011/11/30/the-best-pure-css3-ios-style-arrow-back-button/)
+-------------------------------------------------- */
+
+/* Add relative positioning so :before content is positioned properly */
+.bar-title .button-prev,
+.bar-title .button-next {
+  position: relative;
+}
+
+/* Prev/next button base styles */
+.bar-title .button-prev {
+  margin-left: 7px; /* Push over to make room for :before content */
+  border-left: 0;
+  border-bottom-left-radius: 10px 15px;
+  border-top-left-radius: 10px 15px;
+}
+.bar-title .button-next {
+  margin-right: 7px; /* Push over to make room for :before content */
+  border-right: 0;
+  border-top-right-radius: 10px 15px;
+  border-bottom-right-radius: 10px 15px;
+}
+
+/* Pointed part of directional button */
+.bar-title .button-prev:before,
+.bar-title .button-next:before {
+  position: absolute;
+  top: 2px;
+  width: 27px;
+  height: 27px;
+  border-radius: 30px 100px 2px 40px / 2px 40px 30px 100px;
+  content: '';
+  box-shadow: inset 1px 0 #0e5895, inset 0 1px #0e5895;
+  -webkit-mask-image: -webkit-gradient(linear, left top, right bottom, from(#000), color-stop(.33, #000), color-stop(.5, transparent), to(transparent));
+                  mask-image: gradient(linear, left top, right bottom, from(#000), color-stop(.33, #000), color-stop(.5, transparent), to(transparent));
+}
+.bar-title .button-prev:before {
+  left: -5px;
+  background-image: -webkit-gradient(linear, left bottom, right top, from(#0984c6), to(#1eb0e9));
+  background-image: gradient(linear, left bottom, right top, from(#0984c6), to(#1eb0e9));
+  border-left: 1.5px solid rgba(255, 255, 255, .25);
+  -webkit-transform: rotate(-45deg) skew(-10deg, -10deg);
+          transform: rotate(-45deg) skew(-10deg, -10deg);
+}
+.bar-title .button-next:before {
+  right: -5px;
+  background-image: -webkit-gradient(linear, left bottom, right top, from(#1eb0e9), to(#0984c6));
+  background-image: gradient(linear, left bottom, right top, from(#1eb0e9), to(#0984c6));
+  border-top: 1.5px solid rgba(255, 255, 255, .25);
+  -webkit-transform: rotate(135deg) skew(-10deg, -10deg);
+          transform: rotate(135deg) skew(-10deg, -10deg);
+}
+
+/* Active states for the directional buttons */
+.bar-title .button-prev:active,
+.bar-title .button-next:active,
+.bar-title .button-prev:active:before,
+.bar-title .button-next:active:before {
+  color: #fff;
+  background-color: #0876b1;
+  background-image: none;
+}
+.bar-title .button-prev:active:before,
+.bar-title .button-next:active:before {
+  content: '';
+}
+.bar-title .button-prev:active:before {
+  box-shadow: inset 0 3px 3px rgba(0, 0, 0, .2);
+}
+.bar-title .button-next:active:before {
+  box-shadow: inset 0 -3px 3px rgba(0, 0, 0, .2);
+}
+
+/* Block buttons in any bar
+-------------------------------------------------- */
+
+/* Add proper padding and replace buttons normal dropshadow with a shine from bar */
+[class*="bar"] .button-block {
+  padding: 7px 0;
+  margin-bottom: 0;
+  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .4), 0 1px rgba(255, 255, 255, .8);
+}
+
+/* Override standard padding changes for .button-blocks */
+[class*="bar"] .button-block:active {
+  padding: 7px 0;
+}
+
+/* Segmented controller in any bar
+-------------------------------------------------- */
+
+/* Remove standard segmented bottom margin */
+[class*="bar-"] .segmented-controller {
+  margin-bottom: 0;
+}
+
+/* Add margins between segmented controllers and buttons */
+[class*="bar-"] .segmented-controller + [class*="button"],
+[class*="bar-"] [class*="button"] + .segmented-controller {
+  margin-left: 5px;
+}
+
+/* Segmented controller in a title bar
+-------------------------------------------------- */
+
+.bar-title .segmented-controller {
+  line-height: 18px;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
+  background-color: #1eb0e9;
+  background-image: -webkit-linear-gradient(top, #1eb0e9 0, #0984c6 100%);
+  background-image: linear-gradient(to bottom, #1eb0e9 0, #0984c6 100%);
+  border: 1px solid #0e5895;
+  border-radius: 3px;
+  box-shadow: 0 1px rgba(255, 255, 255, .25);
+  -webkit-box-flex: 1;
+          box-flex: 1;
+}
+
+/* Set color for tab border and highlight */
+.bar-title .segmented-controller li {
+  border-left: 1px solid #0e5895;
+  box-shadow: inset 1px 0 rgba(255, 255, 255, .25);
+}
+
+/* Remove inset shadow from first tab or one to the right of the active tab  */
+.bar-title .segmented-controller .active + li,
+.bar-title .segmented-controller li:first-child {
+  box-shadow: none;
+}
+
+/* Remove left-hand border from first tab */
+.bar-title .segmented-controller li:first-child {
+  border-left-width: 0;
+}
+
+/* Depressed state (active) */
+.bar-title .segmented-controller li.active {
+  background-color: #0082c4;
+  box-shadow: inset 0 1px 6px rgba(0, 0, 0, .3);
+}
+
+/* Set color of links to white */
+.bar-title .segmented-controller li > a {
+  color: #fff;
+}
+
+
+/* Search forms in standard bar
+-------------------------------------------------- */
+
+/* Position/size search bar within the bar */
+.bar-standard input[type=search] {
+  height: 32px;
+  margin: 0;
+}/* Lists
+-------------------------------------------------- */
+
+/* Remove usual bullet styles from list */
+.list {
+  margin-bottom: 10px;
+  list-style: none;
+  background-color: #fff;
+}
+
+/* Pad each list item and add dividers */
+.list li {
+  position: relative;
+  padding: 20px 60px 20px 10px; /* Given extra right padding to accomodate counts, chevrons or buttons */
+  border-bottom: 1px solid rgba(0, 0, 0, .1);
+}
+
+/* Give top border to first list items */
+.list li:first-child {
+  border-top: 1px solid rgba(0, 0, 0, .1);
+}
+
+/* If a list of links, make sure the child <a> takes up full list item tap area (want to avoid selecting child buttons though) */
+.list li > a:not([class*="button"]) {
+  position: relative;
+  display: block;
+  padding: inherit;
+  margin: -20px -60px -20px -10px;
+  color: inherit;
+}
+
+/* Inset list
+-------------------------------------------------- */
+
+.list.inset {
+  width: auto;
+  margin-right: 10px;
+  margin-left: 10px;
+  border: 1px solid rgba(0, 0, 0, .1);
+  border-radius: 6px;
+  box-sizing: border-box;
+}
+
+/* Remove border from first/last standard list items to avoid double border at top/bottom of lists */
+.list.inset li:first-child {
+  border-top-width: 0;
+}
+.list.inset li:last-child {
+  border-bottom-width: 0;
+}
+
+
+/* List dividers
+-------------------------------------------------- */
+
+.list .list-divider {
+  position: relative;
+  top: -1px;
+  padding-top: 6px;
+  padding-bottom: 6px;
+  font-size: 12px;
+  font-weight: bold;
+  line-height: 18px;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
+  background-color: #f8f8f8;
+  background-image: -webkit-linear-gradient(top, #f8f8f8 0, #eee 100%);
+  background-image: linear-gradient(to bottom, #f8f8f8 0, #eee 100%);
+  border-top: 1px solid rgba(0, 0, 0, .1);
+  border-bottom: 1px solid rgba(0, 0, 0, .1);
+  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .4);
+}
+
+/* Rounding first divider on inset lists and remove border on the top */
+.list.inset .list-divider:first-child {
+  top: 0;
+  border-top-width: 0;
+  border-radius: 6px 6px 0 0;
+}
+
+/* Rounding last divider on inset lists */
+.list.inset .list-divider:last-child {
+  border-radius: 0 0 6px 6px;
+}
+
+/* Right-aligned subcontent in lists (chevrons, buttons, counts and toggles)
+-------------------------------------------------- */
+.list .chevron,
+.list [class*="button"],
+.list [class*="count"],
+.list .toggle {
+  position: absolute;
+  top: 50%;
+  right: 10px;
+}
+
+ /* Position chevrons/counts vertically centered on the right in list items */
+.list .chevron,
+.list [class*="count"] {
+  margin-top: -10px; /* Half height of chevron */
+}
+
+/* Push count over if there's a sibling chevron */
+.list .chevron + [class*="count"] {
+  right: 30px;
+}
+
+/* Position buttons vertically centered on the right in list items */
+.list [class*="button"] {
+  left: auto;
+  margin-top: -14px; /* Half height of button */
+}
+
+.list .toggle {
+  margin-top: -15px; /* Half height of toggle */
+}/* Forms
+-------------------------------------------------- */
+
+/* Force form elements to inherit font styles */
+input,
+textarea,
+button,
+select {
+  font-family: inherit;
+  font-size: inherit;
+}
+
+/* Stretch inputs/textareas to full width and add height to maintain a consistent baseline */
+select,
+textarea,
+input[type="text"],
+input[type=search],
+input[type="password"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="date"],
+input[type="month"],
+input[type="time"],
+input[type="week"],
+input[type="number"],
+input[type="email"],
+input[type="url"],
+input[type="tel"],
+input[type="color"],
+.input-group {
+  width: 100%;
+  height: 40px;
+  padding: 10px;
+  margin-bottom: 10px;
+  background: #fff;
+  border: 1px solid rgba(0, 0, 0, .2);
+  border-radius: 3px;
+  box-shadow: 0 1px 1px rgba(255, 255, 255, .2), inset 0 1px 1px rgba(0, 0, 0, .1);
+  -webkit-appearance: none;
+  box-sizing: border-box;
+}
+
+/* Fully round search input */
+input[type=search] {
+  height: 34px;
+  font-size: 14px;
+  border-radius: 30px;
+}
+
+/* Allow text area's height to grow larger than a normal input */
+textarea {
+  height: auto;
+}
+
+/* Style select button to look like part of the Ratchet's style */
+select {
+  height: auto;
+  font-size: 14px;
+  background-color: #f8f8f8;
+  background-image: -webkit-linear-gradient(top, #f8f8f8 0%, #d4d4d4 100%);
+  background-image: linear-gradient(to bottom, #f8f8f8 0%, #d4d4d4 100%);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1);
+}
+
+
+/* Input groups (cluster multiple inputs together into a single group)
+-------------------------------------------------- */
+
+/* Reset from initial form setup styles */
+.input-group {
+  width: auto;
+  height: auto;
+  padding: 0;
+}
+
+/* Remove spacing, borders, shadows and rounding since it all belongs on the .input-group not the input */
+.input-group input {
+  margin-bottom: 0;
+  background-color: transparent;
+  border: 0;
+  border-bottom: 1px solid rgba(0, 0, 0, .2);
+  border-radius: 0;
+  box-shadow: none;
+}
+
+/* Remove bottom border on last input to avoid double bottom border */
+.input-group input:last-child {
+  border-bottom-width: 0;
+}
+
+/* Input groups with labels
+-------------------------------------------------- */
+
+/* To use labels with input groups, wrap a label and an input in an .input-row */
+.input-row {
+  overflow: hidden;
+  border-bottom: 1px solid rgba(0, 0, 0, .2);
+}
+
+/* Remove bottom border on last input-row to avoid double bottom border */
+.input-row:last-child {
+  border-bottom-width: 0;
+}
+
+/* Labels get floated left with a set percentage width */
+.input-row label {
+  float: left;
+  width: 25%;
+  padding: 11px 10px 9px 13px; /* Optimizing the baseline for mobile. */
+  font-weight: bold;
+}
+
+/* Actual inputs float to right of labels and also have a set percentage */
+.input-row label + input {
+  float: right;
+  width: 65%;
+  padding-left: 0;
+  margin-bottom: 0;
+  border-bottom: 0;
+}/* General button styles
+-------------------------------------------------- */
+
+[class*="button"] {
+  position: relative;
+  display: inline-block;
+  padding: 4px 12px;
+  margin: 0;
+  font-weight: bold;
+  line-height: 18px;
+  color: #333;
+  text-align: center;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+  vertical-align: top;
+  cursor: pointer;
+  background-color: #f8f8f8;
+  background-image: -webkit-linear-gradient(top, #f8f8f8 0, #d4d4d4 100%);
+  background-image: linear-gradient(to bottom, #f8f8f8 0, #d4d4d4 100%);
+  border: 1px solid rgba(0, 0, 0, .3);
+  border-radius: 3px;
+  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .4), 0 1px 2px rgba(0, 0, 0, .05);
+}
+
+/* Active */
+[class*="button"]:active {
+  padding-top: 5px;
+  padding-bottom: 3px;
+  color: #333;
+  background-color: #ccc;
+  background-image: none;
+  box-shadow: inset 0 3px 3px rgba(0, 0, 0, .2);
+}
+
+/* Button modifiers
+-------------------------------------------------- */
+
+/* Overriding styles for buttons with modifiers  */
+.button-main,
+.button-positive,
+.button-negative {
+  color: #fff;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
+}
+
+/* Main button */
+.button-main {
+  background-color: #1eafe7;
+  background-image: -webkit-linear-gradient(top, #1eafe7 0, #1a97c8 100%);
+  background-image: linear-gradient(to bottom, #1eafe7 0, #1a97c8 100%);
+  border: 1px solid #117aaa;
+}
+
+/* Positive button  */
+.button-positive {
+  background-color: #34ba15;
+  background-image: -webkit-linear-gradient(top, #34ba15 0, #2da012 100%);
+  background-image: linear-gradient(to bottom, #34ba15 0, #2da012 100%);
+  border: 1px solid #278f0f;
+}
+
+/* Negative button  */
+.button-negative {
+  background-color: #e71e1e;
+  background-image: -webkit-linear-gradient(top, #e71e1e 0,#c71a1a 100%);
+  background-image: linear-gradient(to bottom, #e71e1e 0, #c71a1a 100%);
+  border: 1px solid #b51a1a;
+}
+
+/* Active state for buttons with modifiers */
+.button-main:active,
+.button-positive:active,
+.button-negative:active {
+  color: #fff;
+}
+.button-main:active {
+  background-color: #0876b1;
+}
+.button-positive:active {
+  background-color: #298f11;
+}
+.button-negative:active {
+  background-color: #b21a1a;
+}
+
+/* Block level buttons (full width buttons) */
+.button-block {
+  display: block;
+  padding: 11px 0 13px;
+  margin-bottom: 10px;
+  font-size: 16px;
+}
+
+/* Active state for block level buttons */
+.button-block:active {
+  padding: 12px 0;
+}
+
+/* Counts in buttons
+-------------------------------------------------- */
+
+/* Generic styles for all counts within buttons */
+[class*="button"] [class*="count"] {
+  padding-top: 2px;
+  padding-bottom: 2px;
+  margin-right: -4px;
+  margin-left: 4px;
+  text-shadow: none;
+  background-color: rgba(0, 0, 0, .2);
+  box-shadow: inset 0 1px 1px -1px #000000, 0 1px 1px -1px #fff;
+}
+
+/* Position counts within block level buttons
+   Note: These are absolutely positioned so that text of button isn't "pushed" by count and always
+   stays at true center of button */
+.button-block [class*="count"] {
+  position: absolute;
+  right: 0;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  margin-right: 10px;
+}/* Chevrons
+-------------------------------------------------- */
+
+.chevron {
+  display: block;
+  height: 20px;
+}
+
+/* Base styles for both 1/2's of the chevron */
+.chevron:before,
+.chevron:after {
+  position: relative;
+  display: block;
+  width: 12px;
+  height: 4px;
+  background-color: #999;
+  content: '';
+}
+
+/* Position and rotate respective 1/2's of the chevron */
+.chevron:before {
+  top: 5px;
+  -webkit-transform: rotate(45deg);
+          transform: rotate(45deg);
+}
+.chevron:after {
+  top: 7px;
+  -webkit-transform: rotate(-45deg);
+          transform: rotate(-45deg);
+}/* General count styles
+-------------------------------------------------- */
+
+[class*="count"] {
+  display: inline-block;
+  padding: 4px 9px;
+  font-size: 12px;
+  font-weight: bold;
+  line-height: 13px;
+  color: #fff;
+  background-color: rgba(0, 0, 0, .3);
+  border-radius: 100px;
+}
+
+/* Count modifiers
+-------------------------------------------------- */
+
+/* Overriding styles for counts with modifiers  */
+.count-main,
+.count-positive,
+.count-negative {
+  color: #fff;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
+}
+
+/* Main count  */
+.count-main {
+  background-color: #1eafe7;
+  background-image: -webkit-linear-gradient(top, #1eafe7 0, #1a97c8 100%);
+  background-image: linear-gradient(to bottom, #1eafe7 0, #1a97c8 100%);
+}
+
+/* Positive count  */
+.count-positive {
+  background-color: #34ba15;
+  background-image: -webkit-linear-gradient(top, #34ba15 0, #2da012 100%);
+  background-image: linear-gradient(to bottom, #34ba15 0, #2da012 100%);
+}
+
+/* Negative count  */
+.count-negative {
+  background-color: #e71e1e;
+  background-image: -webkit-linear-gradient(top, #e71e1e 0,#c71a1a 100%);
+  background-image: linear-gradient(to bottom, #e71e1e 0, #c71a1a 100%);
+}/* Segmented controllers
+-------------------------------------------------- */
+
+.segmented-controller {
+  display: -webkit-box;
+  display: box;
+  margin-bottom: 10px;
+  overflow: hidden;
+  font-size: 12px;
+  font-weight: bold;
+  text-shadow: 0 1px rgba(255, 255, 255, .5);
+  list-style: none;
+  background-color: #f8f8f8;
+  background-image: -webkit-linear-gradient(top, #f8f8f8 0, #d4d4d4 100%);
+  background-image: linear-gradient(to bottom, #f8f8f8 0, #d4d4d4 100%);
+  border: 1px solid #aaa;
+  border-radius: 3px;
+  box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(255, 255, 255, .8);
+  -webkit-box-orient: horizontal;
+          box-orient: horizontal;
+}
+
+/* Section within controller */
+.segmented-controller li {
+  overflow: hidden;
+  text-align: center;
+  white-space: nowrap;
+  border-left: 1px solid #aaa;
+  box-shadow: inset 1px 0 rgba(255, 255, 255, .5);
+  -webkit-box-flex: 1;
+          box-flex: 1;
+}
+
+/* Link that fills each section */
+.segmented-controller li > a {
+  display: block;
+  padding: 8px 16px;
+  overflow: hidden;
+  line-height: 15px;
+  color: #333;
+  text-overflow: ellipsis;
+}
+
+/* Remove border-left and shadow from first section */
+.segmented-controller li:first-child {
+  border-left-width: 0;
+  box-shadow: none;
+}
+
+/* Active segment of controller */
+.segmented-controller li.active {
+  background-color: #ccc;
+  box-shadow: inset 0 1px 5px rgba(0, 0, 0, .3);
+}
+
+.segmented-controller-item {
+  display: none;
+}
+
+.segmented-controller-item.active {
+  display: block;
+}/* Popovers (to be used with popovers.js)
+-------------------------------------------------- */
+
+.popover {
+  position: fixed;
+  top: 55px;
+  left: 50%;
+  z-index: 20;
+  display: none;
+  width: 280px;
+  padding: 5px;
+  margin-left: -146px;
+  background-color: #555;
+  background-image: -webkit-linear-gradient(top, #555 5%, #555 6%, #111 30%);
+  background-image: linear-gradient(to bottom, #555 5%, #555 6%,#111 30%);
+  border: 1px solid #111;
+  border-radius: 6px;
+  opacity: 0;
+  box-shadow: inset 0 1px 1px -1px #fff, 0 3px 10px rgba(0, 0, 0, .3);
+  -webkit-transform: translate3d(0, -15px, 0);
+          transform: translate3d(0, -15px, 0);
+  -webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
+                  transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
+}
+
+/* Caret on top of popover using CSS triangles (thanks to @chriscoyier for solution) */
+.popover:before,
+.popover:after {
+  position: absolute;
+  left: 50%;
+  width: 0;
+  height: 0;
+  content: '';
+}
+.popover:before {
+  top: -20px;
+  margin-left: -21px;
+  border-right: 21px solid transparent;
+  border-bottom: 21px solid #111;
+  border-left: 21px solid transparent;
+}
+.popover:after {
+  top: -19px;
+  margin-left: -20px;
+  border-right: 20px solid transparent;
+  border-bottom: 20px solid #555;
+  border-left: 20px solid transparent;
+}
+
+/* Wrapper for a title and buttons */
+.popover-header {
+  display: -webkit-box;
+  display: box;
+  height: 34px;
+  margin-bottom: 5px;
+}
+
+/* Centered title for popover */
+.popover-header .title {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  margin: 15px 0;
+  font-size: 16px;
+  font-weight: bold;
+  line-height: 12px;
+  color: #fff;
+  text-align: center;
+  text-shadow: 0 -1px rgba(0, 0, 0, .5);
+}
+
+/* Generic style for all buttons in .popover-header */
+.popover-header [class*="button"] {
+  z-index: 25;
+  font-size: 12px;
+  line-height: 22px;
+  color: #fff;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
+  background-color: #454545;
+  background-image: -webkit-linear-gradient(top, #454545 0, #353535 100%);
+  background-image: linear-gradient(to bottom, #454545 0, #353535 100%);
+  border: 1px solid #111;
+  -webkit-box-flex: 0;
+          box-flex: 0;
+}
+
+/* Hacky way to right align buttons outside of flex-box system
+   Note: is only absolutely positioned button, would be better if flex-box had an "align right" option */
+.popover-header .title + [class*="button"]:last-child,
+.popover-header .button + [class*="button"]:last-child,
+.popover-header [class*="button"].pull-right {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+}
+
+/* Active state for popover header buttons */
+.popover-header .button:active {
+  color: #fff;
+  background-color: #0876b1;
+}
+
+/* Popover animation
+-------------------------------------------------- */
+
+.popover.visible {
+  opacity: 1;
+  -webkit-transform: translate3d(0, 0, 0);
+          transform: translate3d(0, 0, 0);
+}
+
+/* Backdrop (used as invisible touch escape)
+-------------------------------------------------- */
+
+.backdrop {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 10;
+}
+
+/* Block level buttons in popovers
+-------------------------------------------------- */
+
+/* Positioning and giving darker border to look sharp against dark popover */
+.popover .button-block {
+  margin-bottom: 5px;
+  border: 1px solid #111;
+}
+
+/* Remove extra margin on bottom of last button */
+.popover .button-block:last-child {
+  margin-bottom: 0;
+}
+
+/* Lists in popovers
+-------------------------------------------------- */
+
+.popover .list {
+  width: auto;
+  max-height: 250px;
+  margin-right: 0;
+  margin-bottom: 0;
+  margin-left: 0;
+  overflow: auto;
+  background-color: #fff;
+  border: 1px solid #000;
+  border-radius: 3px;
+  -webkit-overflow-scrolling: touch;
+}/* Slider styles (to be used with sliders.js)
+-------------------------------------------------- */
+
+/* Width/height of slider */
+.slider,
+.slider > li {
+  width: 100%;
+  height: 200px;
+}
+
+/* Outer wrapper for slider */
+.slider {
+  overflow: hidden;
+  background-color: #000;
+}
+
+/* Inner wrapper for slider (width of all slides together) */
+.slider > ul {
+  position: relative;
+  font-size: 0; /* Remove spaces from inline-block children */
+  white-space: nowrap;
+  -webkit-transition: all 0 linear;
+          transition: all 0 linear;
+}
+
+/* Individual slide */
+.slider > ul > li {
+  display: inline-block;
+  vertical-align: top; /* Ensure that li always aligns to top */
+  width: 100%; 
+  height: 100%;
+}
+
+/* Required reset of font-size to same as standard body */
+.slider > ul > li > * {
+  font-size: 14px;
+}/* Toggle styles (to be used with toggles.js)
+-------------------------------------------------- */
+
+.toggle {
+  position: relative;
+  width: 75px;
+  height: 28px;
+  background-color: #eee;
+  border: 1px solid #bbb;
+  border-radius: 20px;
+  box-shadow: inset 0 0 4px rgba(0, 0, 0, .1);
+}
+
+/* Text indicating "on" or "off". Default is "off" */
+.toggle:before {
+  position: absolute;
+  right: 13px;
+  font-weight: bold;
+  line-height: 28px;
+  color: #777;
+  text-shadow: 0 1px #fff;
+  text-transform: uppercase;
+  content: "Off";
+}
+
+/* Sliding handle */
+.toggle-handle {
+  position: absolute;
+  top: -1px;
+  left: -1px;
+  z-index: 2;
+  width: 28px;
+  height: 28px;
+  background-color: #fff;
+  background-image: -webkit-linear-gradient(top, #fff 0, #f2f2f2 100%);
+  background-image: linear-gradient(to bottom, #fff 0, #f2f2f2 100%);
+  border: 1px solid rgba(0, 0, 0, .2);
+  border-radius: 100px;
+  -webkit-transition: -webkit-transform 0.1s ease-in-out, border 0.1s ease-in-out;
+                  transition: transform 0.1s ease-in-out, border 0.1s ease-in-out;
+}
+
+/* Active state for toggle */
+.toggle.active {
+  background-color: #19a8e4;
+  background-image: -webkit-linear-gradient(top, #088cd4 0, #19a8e4 100%);
+  background-image: linear-gradient(to bottom, #088cd4 0, #19a8e4 100%);
+  border: 1px solid #096c9d;
+  box-shadow: inset 0 0 15px rgba(255, 255, 255, .25);
+}
+
+/* Active state for toggle handle */
+.toggle.active .toggle-handle {
+  border-color: #0a76ad;
+  -webkit-transform: translate3d(48px,0,0);
+          transform: translate3d(48px,0,0);
+}
+
+/* Change "off" to "on" for active state */
+.toggle.active:before {
+  right: auto;
+  left: 15px;
+  color: #fff;
+  text-shadow: 0 -1px rgba(0, 0, 0, 0.25);
+  content: "On";
+}/* Push styles (to be used with push.js)
+-------------------------------------------------- */
+
+/* Fade animation */
+.content.fade {
+  left: 0;
+  opacity: 0;
+  -webkit-transition: opacity .2s ease-in-out;
+          transition: opacity .2s ease-in-out;
+}
+.content.fade.in {
+  opacity: 1;
+}
+
+/* Slide animation */
+.content.slide {
+  -webkit-transform: translate3d(0, 0, 0);
+          transform: translate3d(0, 0, 0);
+ -webkit-transition: -webkit-transform .25s ease-in-out;
+         transition:         transform .25s ease-in-out;
+}
+.content.slide.left {
+  -webkit-transform: translate3d(-100%, 0, 0);
+          transform: translate3d(-100%, 0, 0);
+}
+.content.slide.right {
+  -webkit-transform: translate3d(100%, 0, 0);
+          transform: translate3d(100%, 0, 0);
+}
\ No newline at end of file

Web/resources/Snap.js/demo/apps/ratchet/ratchet.js

+/**
+ * ==================================
+ * Ratchet v1.0.0
+ * Licensed under The MIT License
+ * http://opensource.org/licenses/MIT
+ * ==================================
+ */
+
+/* ----------------------------------
+ * POPOVER v1.0.0
+ * Licensed under The MIT License
+ * http://opensource.org/licenses/MIT
+ * ---------------------------------- */
+
+!function () {
+
+  var popover;
+
+  var findPopovers = function (target) {
+    var i, popovers = document.querySelectorAll('a');
+    for (; target && target !== document; target = target.parentNode) {
+      for (i = popovers.length; i--;) { if (popovers[i] === target) return target; }
+    }
+  };
+
+  var onPopoverHidden = function () {
+    document.body.removeChild(backdrop);
+    popover.style.display = 'none';
+    popover.removeEventListener('webkitTransitionEnd', onPopoverHidden);
+  }
+
+  var backdrop = function () {
+    var element = document.createElement('div');
+
+    element.classList.add('backdrop');
+
+    element.addEventListener('touchend', function () {
+      popover.addEventListener('webkitTransitionEnd', onPopoverHidden);
+      popover.classList.remove('visible');
+    });
+
+    return element;
+  }();
+
+  var getPopover = function (e) {
+    var anchor = findPopovers(e.target);
+
+    if (!anchor || !anchor.hash) return;
+
+    popover = document.querySelector(anchor.hash);
+
+    if (!popover || !popover.classList.contains('popover')) return;
+
+    return popover;
+  }
+
+  window.addEventListener('touchend', function (e) {
+    var popover = getPopover(e);
+
+    if (!popover) return;
+
+    popover.style.display = 'block';
+    popover.offsetHeight;
+    popover.classList.add('visible');
+
+    popover.parentNode.appendChild(backdrop);
+  });
+
+  window.addEventListener('click', function (e) { if (getPopover(e)) e.preventDefault(); });
+
+}();
+/* ----------------------------------
+ * PUSH v1.0.0
+ * Licensed under The MIT License
+ * inspired by chris's jquery.pjax.js
+ * http://opensource.org/licenses/MIT
+ * ---------------------------------- */
+
+!function () {
+
+  var noop = function () {};
+
+
+  // Pushstate cacheing
+  // ==================
+
+  var isScrolling;
+  var maxCacheLength = 20;
+  var cacheMapping   = sessionStorage;
+  var domCache       = {};
+  var transitionMap  = {
+    'slide-in'  : 'slide-out',
+    'slide-out' : 'slide-in',
+    'fade'      : 'fade'
+  };
+  var bars = {
+    bartab             : '.bar-tab',
+    bartitle           : '.bar-title',
+    barfooter          : '.bar-footer',
+    barheadersecondary : '.bar-header-secondary'
+  }
+
+  var cacheReplace = function (data, updates) {
+    PUSH.id = data.id;
+    if (updates) data = getCached(data.id);
+    cacheMapping[data.id] = JSON.stringify(data);
+    window.history.replaceState(data.id, data.title, data.url);
+    domCache[data.id] = document.body.cloneNode(true);
+  };
+
+  var cachePush = function () {
+    var id = PUSH.id;
+
+    var cacheForwardStack = JSON.parse(cacheMapping.cacheForwardStack || '[]');
+    var cacheBackStack    = JSON.parse(cacheMapping.cacheBackStack    || '[]');
+
+    cacheBackStack.push(id);
+
+    while (cacheForwardStack.length)               delete cacheMapping[cacheForwardStack.shift()];
+    while (cacheBackStack.length > maxCacheLength) delete cacheMapping[cacheBackStack.shift()];
+
+    window.history.pushState(null, '', cacheMapping[PUSH.id].url);
+
+    cacheMapping.cacheForwardStack = JSON.stringify(cacheForwardStack);
+    cacheMapping.cacheBackStack    = JSON.stringify(cacheBackStack);
+  };
+
+  var cachePop = function (id, direction) {
+    var forward           = direction == 'forward';
+    var cacheForwardStack = JSON.parse(cacheMapping.cacheForwardStack || '[]');
+    var cacheBackStack    = JSON.parse(cacheMapping.cacheBackStack    || '[]');
+    var pushStack         = forward ? cacheBackStack    : cacheForwardStack;
+    var popStack          = forward ? cacheForwardStack : cacheBackStack;
+
+    if (PUSH.id) pushStack.push(PUSH.id);
+    popStack.pop();
+
+    cacheMapping.cacheForwardStack = JSON.stringify(cacheForwardStack);
+    cacheMapping.cacheBackStack    = JSON.stringify(cacheBackStack);
+  };
+
+  var getCached = function (id) {
+    return JSON.parse(cacheMapping[id] || null) || {};
+  };
+
+  var getTarget = function (e) {
+    var target = findTarget(e.target);
+
+    if (
+      !  target
+      || e.which > 1
+      || e.metaKey
+      || e.ctrlKey
+      || isScrolling
+      || location.protocol !== target.protocol
+      || location.host     !== target.host
+      || !target.hash && /#/.test(target.href)
+      || target.hash && target.href.replace(target.hash, '') === location.href.replace(location.hash, '')
+      || target.getAttribute('data-ignore') == 'push'
+    ) return;
+
+    return target;
+  };
+
+
+  // Main event handlers (touchend, popstate)
+  // ==========================================
+
+  var touchend = function (e) {
+    var target = getTarget(e);
+
+    if (!target) return;
+
+    e.preventDefault();
+
+    PUSH({
+      url        : target.href,
+      hash       : target.hash,
+      timeout    : target.getAttribute('data-timeout'),
+      transition : target.getAttribute('data-transition')
+    });
+  };
+
+  var popstate = function (e) {
+    var key;
+    var barElement;
+    var activeObj;
+    var activeDom;
+    var direction;
+    var transition;
+    var transitionFrom;
+    var transitionFromObj;
+    var id = e.state;
+
+    if (!id || !cacheMapping[id]) return;
+
+    direction = PUSH.id < id ? 'forward' : 'back';
+
+    cachePop(id, direction);
+
+    activeObj = getCached(id);
+    activeDom = domCache[id];
+
+    if (activeObj.title) document.title = activeObj.title;
+
+    if (direction == 'back') {
+      transitionFrom    = JSON.parse(direction == 'back' ? cacheMapping.cacheForwardStack : cacheMapping.cacheBackStack);
+      transitionFromObj = getCached(transitionFrom[transitionFrom.length - 1]);
+    } else {
+      transitionFromObj = activeObj;
+    }
+
+    if (direction == 'back' && !transitionFromObj.id) return PUSH.id = id;
+
+    transition = direction == 'back' ? transitionMap[transitionFromObj.transition] : transitionFromObj.transition;
+
+    if (!activeDom) {
+      return PUSH({
+        id         : activeObj.id,
+        url        : activeObj.url,
+        title      : activeObj.title,
+        timeout    : activeObj.timeout,
+        transition : transition,
+        ignorePush : true
+      });
+    }
+
+    if (transitionFromObj.transition) {
+      activeObj = extendWithDom(activeObj, '.content', activeDom.cloneNode(true));
+      for (key in bars) {
+        barElement = document.querySelector(bars[key])
+        if (activeObj[key]) swapContent(activeObj[key], barElement);
+        else if (barElement) barElement.parentNode.removeChild(barElement);
+      }
+    }
+
+    swapContent(
+      (activeObj.contents || activeDom).cloneNode(true),
+      document.querySelector('.content'),
+      transition
+    );
+
+    PUSH.id = id;
+
+    document.body.offsetHeight; // force reflow to prevent scroll
+  };
+
+
+  // Core PUSH functionality
+  // =======================
+
+  var PUSH = function (options) {
+    var key;
+    var data = {};
+    var xhr  = PUSH.xhr;
+
+    options.container = options.container || options.transition ? document.querySelector('.content') : document.body;
+
+    for (key in bars) {
+      options[key] = options[key] || document.querySelector(bars[key]);
+    }
+
+    if (xhr && xhr.readyState < 4) {
+      xhr.onreadystatechange = noop;
+      xhr.abort()
+    }
+
+    xhr = new XMLHttpRequest();
+    xhr.open('GET', options.url, true);
+    xhr.setRequestHeader('X-PUSH', 'true');
+
+    xhr.onreadystatechange = function () {
+      if (options._timeout) clearTimeout(options._timeout);
+      if (xhr.readyState == 4) xhr.status == 200 ? success(xhr, options) : failure(options.url);
+    };
+
+    if (!PUSH.id) {
+      cacheReplace({
+        id         : +new Date,
+        url        : window.location.href,
+        title      : document.title,
+        timeout    : options.timeout,
+        transition : null
+      });
+    }
+
+    if (options.timeout) {
+      options._timeout = setTimeout(function () {  xhr.abort('timeout'); }, options.timeout);
+    }
+
+    xhr.send();
+
+    if (xhr.readyState && !options.ignorePush) cachePush();
+  };
+
+
+  // Main XHR handlers
+  // =================
+
+  var success = function (xhr, options) {
+    var key;
+    var barElement;
+    var data = parseXHR(xhr, options);
+
+    if (!data.contents) return locationReplace(options.url);
+
+    if (data.title) document.title = data.title;
+
+    if (options.transition) {
+      for (key in bars) {
+        barElement = document.querySelector(bars[key])
+        if (data[key]) swapContent(data[key], barElement);
+        else if (barElement) barElement.parentNode.removeChild(barElement);
+      }
+    }
+
+    swapContent(data.contents, options.container, options.transition, function () {
+      cacheReplace({
+        id         : options.id || +new Date,
+        url        : data.url,
+        title      : data.title,
+        timeout    : options.timeout,
+        transition : options.transition
+      }, options.id);
+      triggerStateChange();
+    });
+
+    if (!options.ignorePush && window._gaq) _gaq.push(['_trackPageview']) // google analytics
+    if (!options.hash) return;
+  };
+
+  var failure = function (url) {
+    throw new Error('Could not get: ' + url)
+  };
+
+
+  // PUSH helpers
+  // ============
+
+  var swapContent = function (swap, container, transition, complete) {
+    var enter;
+    var containerDirection;
+    var swapDirection;
+
+    if (!transition) {
+      if (container) container.innerHTML = swap.innerHTML;
+      else if (swap.classList.contains('content')) document.body.appendChild(swap);
+      else document.body.insertBefore(swap, document.querySelector('.content'));
+    } else {
+      enter  = /in$/.test(transition);
+
+      if (transition == 'fade') {
+        container.classList.add('in');
+        container.classList.add('fade');
+        swap.classList.add('fade');
+      }
+
+      if (/slide/.test(transition)) {
+        swap.classList.add(enter ? 'right' : 'left');
+        swap.classList.add('slide');
+        container.classList.add('slide');
+      }
+
+      container.parentNode.insertBefore(swap, container);
+    }
+
+    if (!transition) complete && complete();
+
+    if (transition == 'fade') {
+      container.offsetWidth; // force reflow
+      container.classList.remove('in');
+      container.addEventListener('webkitTransitionEnd', fadeContainerEnd);
+
+      function fadeContainerEnd() {
+        container.removeEventListener('webkitTransitionEnd', fadeContainerEnd);
+        swap.classList.add('in');
+        swap.addEventListener('webkitTransitionEnd', fadeSwapEnd);
+      }
+      function fadeSwapEnd () {
+        swap.removeEventListener('webkitTransitionEnd', fadeSwapEnd);
+        container.parentNode.removeChild(container);
+        swap.classList.remove('fade');
+        swap.classList.remove('in');
+        complete && complete();
+      }
+    }
+
+    if (/slide/.test(transition)) {
+      container.offsetWidth; // force reflow
+      swapDirection      = enter ? 'right' : 'left'
+      containerDirection = enter ? 'left' : 'right'
+      container.classList.add(containerDirection);
+      swap.classList.remove(swapDirection);
+      swap.addEventListener('webkitTransitionEnd', slideEnd);
+
+      function slideEnd() {
+        swap.removeEventListener('webkitTransitionEnd', slideEnd);
+        swap.classList.remove('slide');
+        swap.classList.remove(swapDirection);
+        container.parentNode.removeChild(container);
+        complete && complete();
+      }
+    }
+  };
+
+  var triggerStateChange = function () {
+    var e = new CustomEvent('push', {
+      detail: { state: getCached(PUSH.id) },
+      bubbles: true,
+      cancelable: true
+    });
+
+    window.dispatchEvent(e);
+  };
+
+  var findTarget = function (target) {
+    var i, toggles = document.querySelectorAll('a');
+    for (; target && target !== document; target = target.parentNode) {
+      for (i = toggles.length; i--;) { if (toggles[i] === target) return target; }
+    }
+  };
+
+  var locationReplace = function (url) {
+    window.history.replaceState(null, '', '#');
+    window.location.replace(url);
+  };
+
+  var parseURL = function (url) {
+    var a = document.createElement('a'); a.href = url; return a;
+  };
+
+  var extendWithDom = function (obj, fragment, dom) {
+    var i;
+    var result    = {};
+
+    for (i in obj) result[i] = obj[i];
+
+    Object.keys(bars).forEach(function (key) {
+      var el = dom.querySelector(bars[key]);
+      if (el) el.parentNode.removeChild(el);
+      result[key] = el;
+    });
+
+    result.contents = dom.querySelector(fragment);
+
+    return result;
+  };
+
+  var parseXHR = function (xhr, options) {
+    var head;
+    var body;
+    var data = {};
+    var responseText = xhr.responseText;
+
+    data.url = options.url;
+
+    if (!responseText) return data;
+
+    if (/<html/i.test(responseText)) {
+      head           = document.createElement('div');
+      body           = document.createElement('div');
+      head.innerHTML = responseText.match(/<head[^>]*>([\s\S.]*)<\/head>/i)[0]
+      body.innerHTML = responseText.match(/<body[^>]*>([\s\S.]*)<\/body>/i)[0]
+    } else {
+      head           = body = document.createElement('div');
+      head.innerHTML = responseText;
+    }
+
+    data.title = head.querySelector('title');
+    data.title = data.title && data.title.innerText.trim();
+
+    if (options.transition) data = extendWithDom(data, '.content', body);
+    else data.contents = body;
+
+    return data;
+  };
+
+
+  // Attach PUSH event handlers
+  // ==========================
+
+  window.addEventListener('touchstart', function () { isScrolling = false; });
+  window.addEventListener('touchmove', function () { isScrolling = true; })
+  window.addEventListener('touchend', touchend);
+  window.addEventListener('click', function (e) { if (getTarget(e)) e.preventDefault(); });
+  window.addEventListener('popstate', popstate);
+
+}();/* ----------------------------------
+ * TABS v1.0.0
+ * Licensed under The MIT License
+ * http://opensource.org/licenses/MIT
+ * ---------------------------------- */
+
+!function () {
+  var getTarget = function (target) {
+    var i, popovers = document.querySelectorAll('.segmented-controller li a');
+    for (; target && target !== document; target = target.parentNode) {
+      for (i = popovers.length; i--;) { if (popovers[i] === target) return target; }
+    }
+  };
+
+  window.addEventListener("touchend", function (e) {
+    var activeTab;
+    var activeBody;
+    var targetBody;
+    var targetTab;
+    var className     = 'active';
+    var classSelector = '.' + className;
+    var targetAnchor  = getTarget(e.target);
+
+    if (!targetAnchor) return;
+
+    targetTab = targetAnchor.parentNode;
+    activeTab = targetTab.parentNode.querySelector(classSelector);
+
+    if (activeTab) activeTab.classList.remove(className);
+
+    targetTab.classList.add(className);
+
+    if (!targetAnchor.hash) return;
+
+    targetBody = document.querySelector(targetAnchor.hash);
+
+    if (!targetBody) return;
+
+    activeBody = targetBody.parentNode.querySelector(classSelector);
+
+    if (activeBody) activeBody.classList.remove(className);
+
+    targetBody.classList.add(className)
+  });
+
+  window.addEventListener('click', function (e) { if (getTarget(e.target)) e.preventDefault(); });
+}();/* ----------------------------------
+ * SLIDER v1.0.0
+ * Licensed under The MIT License
+ * Adapted from Brad Birdsall's swipe
+ * http://opensource.org/licenses/MIT
+ * ---------------------------------- */
+
+!function () {
+
+  var pageX;
+  var pageY;
+  var slider;
+  var deltaX;
+  var deltaY;
+  var offsetX;
+  var lastSlide;
+  var startTime;
+  var resistance;
+  var sliderWidth;
+  var slideNumber;
+  var isScrolling;
+  var scrollableArea;
+
+  var getSlider = function (target) {
+    var i, sliders = document.querySelectorAll('.slider ul');
+    for (; target && target !== document; target = target.parentNode) {
+      for (i = sliders.length; i--;) { if (sliders[i] === target) return target; }
+    }
+  }
+
+  var getScroll = function () {
+    var translate3d = slider.style.webkitTransform.match(/translate3d\(([^,]*)/);
+    return parseInt(translate3d ? translate3d[1] : 0)
+  };
+
+  var setSlideNumber = function (offset) {
+    var round = offset ? (deltaX < 0 ? 'ceil' : 'floor') : 'round';
+    slideNumber = Math[round](getScroll() / ( scrollableArea / slider.children.length) );
+    slideNumber += offset;
+    slideNumber = Math.min(slideNumber, 0);
+    slideNumber = Math.max(-(slider.children.length - 1), slideNumber);
+  }
+
+  var onTouchStart = function (e) {
+    slider = getSlider(e.target);
+
+    if (!slider) return;
+
+    var firstItem  = slider.querySelector('li');
+
+    scrollableArea = firstItem.offsetWidth * slider.children.length;
+    isScrolling    = undefined;
+    sliderWidth    = slider.offsetWidth;
+    resistance     = 1;
+    lastSlide      = -(slider.children.length - 1);
+    startTime      = +new Date;
+    pageX          = e.touches[0].pageX;
+    pageY          = e.touches[0].pageY;
+
+    setSlideNumber(0);
+
+    slider.style['-webkit-transition-duration'] = 0;
+  };
+
+  var onTouchMove = function (e) {
+    if (e.touches.length > 1 || !slider) return; // Exit if a pinch || no slider
+
+    deltaX = e.touches[0].pageX - pageX;
+    deltaY = e.touches[0].pageY - pageY;
+    pageX  = e.touches[0].pageX;
+    pageY  = e.touches[0].pageY;
+
+    if (typeof isScrolling == 'undefined') {
+      isScrolling = Math.abs(deltaY) > Math.abs(deltaX);
+    }
+
+    if (isScrolling) return;
+
+    offsetX = (deltaX / resistance) + getScroll();
+
+    e.preventDefault();
+
+    resistance = slideNumber == 0         && deltaX > 0 ? (pageX / sliderWidth) + 1.25 :
+                 slideNumber == lastSlide && deltaX < 0 ? (Math.abs(pageX) / sliderWidth) + 1.25 : 1;
+
+    slider.style.webkitTransform = 'translate3d(' + offsetX + 'px,0,0)';
+  };
+
+  var onTouchEnd = function (e) {
+    if (!slider || isScrolling) return;
+
+    setSlideNumber(
+      (+new Date) - startTime < 1000 && Math.abs(deltaX) > 15 ? (deltaX < 0 ? -1 : 1) : 0
+    );
+
+    offsetX = slideNumber * sliderWidth;
+
+    slider.style['-webkit-transition-duration'] = '.2s';
+    slider.style.webkitTransform = 'translate3d(' + offsetX + 'px,0,0)';
+
+    e = new CustomEvent('slide', {
+      detail: { slideNumber: Math.abs(slideNumber) },
+      bubbles: true,
+      cancelable: true
+    });
+
+    slider.parentNode.dispatchEvent(e);
+  };
+
+  window.addEventListener('touchstart', onTouchStart);
+  window.addEventListener('touchmove', onTouchMove);
+  window.addEventListener('touchend', onTouchEnd);
+
+}();
+/* ----------------------------------
+ * TOGGLE v1.0.0
+ * Licensed under The MIT License
+ * http://opensource.org/licenses/MIT
+ * ---------------------------------- */
+
+!function () {
+
+  var start     = {};
+  var touchMove = false;
+  var distanceX = false;
+  var toggle    = false;
+
+  var findToggle = function (target) {
+    var i, toggles = document.querySelectorAll('.toggle');
+    for (; target && target !== document; target = target.parentNode) {
+      for (i = toggles.length; i--;) { if (toggles[i] === target) return target; }
+    }
+  }
+
+  window.addEventListener('touchstart', function (e) {
+    e = e.originalEvent || e;
+
+    toggle = findToggle(e.target);
+
+    if (!toggle) return;
+
+    var handle      = toggle.querySelector('.toggle-handle');
+    var toggleWidth = toggle.offsetWidth;
+    var handleWidth = handle.offsetWidth;
+    var offset      = toggle.classList.contains('active') ? toggleWidth - handleWidth : 0;
+
+    start     = { pageX : e.touches[0].pageX - offset, pageY : e.touches[0].pageY };
+    touchMove = false;
+
+    // todo: probably should be moved to the css
+    toggle.style['-webkit-transition-duration'] = 0;
+  });
+
+  window.addEventListener('touchmove', function (e) {
+    e = e.originalEvent || e;
+
+    if (e.touches.length > 1) return; // Exit if a pinch
+
+    if (!toggle) return;
+
+    var handle      = toggle.querySelector('.toggle-handle');
+    var current     = e.touches[0];
+    var toggleWidth = toggle.offsetWidth;
+    var handleWidth = handle.offsetWidth;
+    var offset      = toggleWidth - handleWidth;
+
+    touchMove = true;
+    distanceX = current.pageX - start.pageX;
+
+    if (Math.abs(distanceX) < Math.abs(current.pageY - start.pageY)) return;
+
+    e.preventDefault();
+
+    if (distanceX < 0)      return handle.style.webkitTransform = 'translate3d(0,0,0)';
+    if (distanceX > offset) return handle.style.webkitTransform = 'translate3d(' + offset + 'px,0,0)';
+
+    handle.style.webkitTransform = 'translate3d(' + distanceX + 'px,0,0)';
+
+    toggle.classList[(distanceX > (toggleWidth/2 - handleWidth/2)) ? 'add' : 'remove']('active');
+  });
+
+  window.addEventListener('touchend', function (e) {
+    if (!toggle) return;
+
+    var handle      = toggle.querySelector('.toggle-handle');
+    var toggleWidth = toggle.offsetWidth;
+    var handleWidth = handle.offsetWidth;
+    var offset      = toggleWidth - handleWidth;
+    var slideOn     = (!touchMove && !toggle.classList.contains('active')) || (touchMove && (distanceX > (toggleWidth/2 - handleWidth/2)));
+
+    if (slideOn) handle.style.webkitTransform = 'translate3d(' + offset + 'px,0,0)';
+    else handle.style.webkitTransform = 'translate3d(0,0,0)';
+
+    toggle.classList[slideOn ? 'add' : 'remove']('active');
+
+    e = new CustomEvent('toggle', {
+      detail: { isActive: slideOn },
+      bubbles: true,
+      cancelable: true
+    });
+
+    toggle.dispatchEvent(e);
+
+    touchMove = false;
+    toggle    = false;
+  });
+
+}();

Web/resources/Snap.js/demo/apps/ratchet/template.html

+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>Ratchet template page</title>
+
+		<!-- Sets initial viewport load and disables zooming	-->
+		<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
+
+		<!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->
+		<meta name="apple-mobile-web-app-capable" content="yes">
+		<meta name="apple-mobile-web-app-status-bar-style" content="black">
+
+		<!-- Set Apple icons for when prototype is saved to home screen -->
+		<link rel="apple-touch-icon-precomposed" sizes="114x114" href="touch-icons/apple-touch-icon-114x114.png">
+		<link rel="apple-touch-icon-precomposed" sizes="72x72" href="touch-icons/apple-touch-icon-72x72.png">
+		<link rel="apple-touch-icon-precomposed" sizes="57x57" href="touch-icons/apple-touch-icon-57x57.png">
+
+		<!-- Include the base Snap.js CSS -->
+		<link rel="stylesheet" href="../../../snap.css">
+
+		<!-- Include the compiled Ratchet CSS -->
+		<link rel="stylesheet" href="ratchet.css">
+
+		<!-- Include the compiled Ratchet JS -->
+		<script src="ratchet.js"></script>
+
+		<!-- Intro paragraph styles. Delete once you start using this page -->
+		<style type="text/css">
+			.snap-drawers .list{margin: 0;}
+
+			.welcome {
+				line-height: 1.5;
+				color: #555;
+			}
+			h2{
+				padding: 15px;
+				font-weight: normal;
+				font-size: 36px;
+			}
+		</style>
+
+	</head>
+	<body>
+	
+	<div class="snap-drawers">
+		<div class="snap-drawer snap-drawer-left" id="left-drawer">
+			<ul class="list">
+              <h2>Snap.js</h2>
+			  <li class="list-divider">Share</li>
+			  <li>
+			  	<div class="demo-social">
+        		  <iframe src="http://ghbtns.com/github-btn.html?user=jakiestfu&amp;repo=Snap.js&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="120" height="20"></iframe>
+				</div>
+			  </li>
+			  <li class="list-divider">Demos</li>
+			  <li><a href="../default.html" data-ignore="push">Default</a></li>
+			  <li><a href="../noDrag.html" data-ignore="push">No Drag</a></li>
+			  <li><a href="../rightDisabled.html" data-ignore="push">Right Disabled</a></li>
+			  <li><a href="../skinnyThreshold.html" data-ignore="push">Skinny Threshold</a></li>
+			  <li><a href="../toggles.html" data-ignore="push">Toggles</a></li>
+			  <li><a href="../classNames.html" data-ignore="push">Class Names</a></li>
+	          <li><a href="../expand.html" data-ignore="push">Expanding</a></li>
+	          <li><a href="../settings.html" data-ignore="push">Settings</a></li>
+			  <li><a href="template.html" data-ignore="push">Ratchet</a></li>
+			</ul>
+		</div>
+		<div class="snap-drawer snap-drawer-right" id="right-drawer">
+			<ul class="list">
+			  <li>List item 1 <span class="chevron"></span></li>
+			  <li>List item 2 <span class="chevron"></span></li>
+			  <li>List item 3 <span class="chevron"></span></li>
+			  <li>List item 4 <span class="chevron"></span></li>
+			  <li>List item 5 <span class="chevron"></span></li>
+			  <li>List item 6 <span class="chevron"></span></li>
+			  <li>List item 7 <span class="chevron"></span></li>
+			  <li>List item 8 <span class="chevron"></span></li>
+			  <li>List item 9 <span class="chevron"></span></li>
+			  <li>List item 10 <span class="chevron"></span></li>
+			  <li>List item 1 <span class="chevron"></span></li>
+			  <li>List item 12 <span class="chevron"></span></li>
+			  <li>List item 13 <span class="chevron"></span></li>
+			  <li>List item 14 <span class="chevron"></span></li>
+			  <li>List item 15 <span class="chevron"></span></li>
+			  <li>List item 16 <span class="chevron"></span></li>
+			  <li>List item 17 <span class="chevron"></span></li>
+			  <li>List item 18 <span class="chevron"></span></li>
+			  <li>List item 19 <span class="chevron"></span></li>
+			  <li>List item 20 <span class="chevron"></span></li>
+			</ul>
+		</div>
+	</div>
+	
+	<div id="content" class="snap-content">
+	
+		<!-- Make sure all your bars are the first things in your <body> -->
+		<header class="bar-title">
+			<button class="button" id="toggle-left">Left</button>
+			<h1 class="title">Ratchet</h1>
+			<button class="button" id="toggle-right">Right</button>
+		</header>
+	
+		<!-- Wrap all non-bar HTML in the .content div (this is actually what scrolls) -->
+		<div class="content">
+			<div class="content-padded">
+				<p class="welcome">Thanks for downloading Ratchet. This is an example HTML page that's linked up to compiled Ratchet CSS and JS, has the proper meta tags and the HTML structure. Need some more help before you start filling this with your own content? Check out some Ratchet resorces:</p>
+			</div>
+	
+			<ul class="list inset">
+				<li>
+					<a href="http://maker.github.com/ratchet/">
+						<strong>Ratchet documentation</strong>
+						<span class="chevron"></span>
+					</a>
+				</li>
+				<li>
+					<a href="http://www.github.com/maker/ratchet/">
+						<strong>Ratchet on Github</strong>
+						<span class="chevron"></span>
+					</a>
+				</li>
+				<li>
+					<a href="https://groups.google.com/forum/#!forum/goratchet">
+						<strong>Ratchet Google group</strong>
+						<span class="chevron"></span>
+					</a>
+				</li>
+				<li>
+					<a href="http://www.twitter.com/GoRatchet">
+						<strong>Ratchet on Twitter</strong>
+						<span class="chevron"></span>
+					</a>
+				</li>
+				<li>
+					<a href="http://maker.github.com/ratchet/">
+						<strong>Ratchet documentation</strong>
+						<span class="chevron"></span>
+					</a>
+				</li>
+				<li>
+					<a href="http://www.github.com/maker/ratchet/">
+						<strong>Ratchet on Github</strong>
+						<span class="chevron"></span>
+					</a>
+				</li>
+				<li>
+					<a href="https://groups.google.com/forum/#!forum/goratchet">
+						<strong>Ratchet Google group</strong>
+						<span class="chevron"></span>
+					</a>
+				</li>
+				<li>
+					<a href="http://www.twitter.com/GoRatchet">
+						<strong>Ratchet on Twitter</strong>
+						<span class="chevron"></span>
+					</a>
+				</li>
+			</ul>
+	
+		</div>
+	</div>
+	<script type="text/javascript" src="../../../snap.js"></script>
+	<script type="text/javascript">
+	
+		var 
+		
+		// Helper
+		$ = function(id){
+			return document.getElementById(id);
+		},
+		
+		// Instance
+		snapper = new Snap({
+			element: document.getElementById('content')
+		}),
+		
+		// 
+		UpdateDrawers = function(){
+			var state = snapper.state(),
+				towards = state.info.towards,
+				opening = state.info.opening;
+			if(opening=='right' && towards=='left'){
+				$('right-drawer').classList.add('active-drawer');
+				$('left-drawer').classList.remove('active-drawer');
+			} else if(opening=='left' && towards=='right') {
+				$('right-drawer').classList.remove('active-drawer');
+				$('left-drawer').classList.add('active-drawer');
+			}
+		};
+		
+		snapper.on('drag', UpdateDrawers);
+		snapper.on('animating', UpdateDrawers);
+		snapper.on('animated', UpdateDrawers);
+		
+		$('toggle-left').addEventListener('click', function(){
+			snapper.open('left');
+		});
+		
+		$('toggle-right').addEventListener('click', function(){
+			snapper.open('right');
+		});
+		
+	</script>
+	<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>		
+    </body>
+</html>

Web/resources/Snap.js/demo/apps/rightDisabled.html

+<!DOCTYPE HTML><html lang="en-US">
    <head>
        <title>Snap.js</title>
        <meta http-equiv="x-ua-compatible" content="IE=edge" />
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-touch-fullscreen" content="yes">
        <link rel="stylesheet" type="text/css" href="../../snap.css" />
        <link rel="stylesheet" type="text/css" href="../assets/demo.css" />
    </head>
    <body>
        <div class="snap-drawers">
            <div class="snap-drawer snap-drawer-left">
                <div>
                    <h3>Snap.js</h3>
                    <div class="demo-social">
                        <a href="https://twitter.com/share" class="twitter-share-button" data-lang="en" data-text="Snap.js - A Library for creating beautiful mobile shelfs in Javascript" data-url="http://jakiestfu.github.com/Snap.js/" data-count="none" data-via="jakiestfu">Tweet</a>
                        <a href="https://twitter.com/jakiestfu" class="twitter-follow-button" data-show-count="false" data-lang="en">Follow @jakiestfu</a>
                        <iframe src="http://ghbtns.com/github-btn.html?user=jakiestfu&amp;repo=Snap.js&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="120" height="20"></iframe>
                    </div>
                    <h4>Demos</h4>
                    <ul>
                        <li><a href="default.html">Default</a></li>
                        <li><a href="noDrag.html">No Drag</a></li>
                        <li><a href="dragElement.html">Drag Element</a></li>
                        <li><a href="rightDisabled.html">Right Disabled</a></li>
                        <li><a href="hyperextend.html">Hyperextension Disabled</a></li>
                        <li><a href="skinnyThreshold.html">Skinny Threshold</a></li>
                        <li><a href="toggles.html">Toggles</a></li>
                        <li><a href="classNames.html">Class Names</a></li>
                        <li><a href="expand.html">Expanding</a></li>
                        <li><a href="settings.html">Settings</a></li>
                        <li><a href="ratchet/template.html">Ratchet</a></li>
                    </ul>
                    <div>
                        <p>This demo has the menu on the right side disabled</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non erat ac leo ultrices blandit sed vel risus. Pellentesque facilisis blandit auctor. Maecenas vestibulum vulputate tincidunt. Mauris nec quam libero. Fusce eget ligula non leo varius condimentum quis ac elit. Donec id urna ut neque semper ultrices. Proin ut suscipit felis. Nullam neque felis, ullamcorper scelerisque volutpat vel, vehicula vehicula neque. Aenean scelerisque elit ac erat sagittis ullamcorper.</p>
                    </div>
                </div>
            </div>
            <div class="snap-drawer snap-drawer-right"></div>
        </div>
        
        <div id="content" class="snap-content">
            <div id="toolbar">
                <a href="#" id="open-left"></a>
                <h1>Right Disabled</h1>
            </div>
        </div>
        <script type="text/javascript" src="../../snap.js"></script>
        <script type="text/javascript">
            var snapper = new Snap({
                element: document.getElementById('content'),
                disable: 'right'
            });
            
        </script>
        <script type="text/javascript" src="../assets/demo.js"></script>
        <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>       
    </body></html>
\ No newline at end of file

Web/resources/Snap.js/demo/apps/settings.html

+<!DOCTYPE HTML><html lang="en-US">
    <head>
        <title>Snap.js</title>
        <meta http-equiv="x-ua-compatible" content="IE=edge" />
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-touch-fullscreen" content="yes">
        <link rel="stylesheet" type="text/css" href="../../snap.css" />
        <link rel="stylesheet" type="text/css" href="../assets/demo.css" />
    </head>
    <body>
        <div class="snap-drawers">
            <div class="snap-drawer snap-drawer-left">
                <div>
                    <h3>Snap.js</h3>
                    <div class="demo-social">
                        <a href="https://twitter.com/share" class="twitter-share-button" data-lang="en" data-text="Snap.js - A Library for creating beautiful mobile shelfs in Javascript" data-url="http://jakiestfu.github.com/Snap.js/" data-count="none" data-via="jakiestfu">Tweet</a>
                        <a href="https://twitter.com/jakiestfu" class="twitter-follow-button" data-show-count="false" data-lang="en">Follow @jakiestfu</a>
                        <iframe src="http://ghbtns.com/github-btn.html?user=jakiestfu&amp;repo=Snap.js&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="120" height="20"></iframe>
                    </div>
                    <h4>Demos</h4>
                    <ul>
                        <li><a href="default.html">Default</a></li>
                        <li><a href="noDrag.html">No Drag</a></li>
                        <li><a href="dragElement.html">Drag Element</a></li>
                        <li><a href="rightDisabled.html">Right Disabled</a></li>
                        <li><a href="hyperextend.html">Hyperextension Disabled</a></li>
                        <li><a href="skinnyThreshold.html">Skinny Threshold</a></li>
                        <li><a href="toggles.html">Toggles</a></li>
                        <li><a href="classNames.html">Class Names</a></li>
                        <li><a href="expand.html">Expanding</a></li>
                        <li><a href="settings.html">Settings</a></li>
                        <li><a href="ratchet/template.html">Ratchet</a></li>
                    </ul>
                    <div>
                        <p>You can update the settings of an instantiated snap object by calling the settings method.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non erat ac leo ultrices blandit sed vel risus. Pellentesque facilisis blandit auctor. Maecenas vestibulum vulputate tincidunt. Mauris nec quam libero. Fusce eget ligula non leo varius condimentum quis ac elit. Donec id urna ut neque semper ultrices. Proin ut suscipit felis. Nullam neque felis, ullamcorper scelerisque volutpat vel, vehicula vehicula neque. Aenean scelerisque elit ac erat sagittis ullamcorper.</p>
                    </div>
                </div>
            </div>
            <div class="snap-drawer snap-drawer-right"></div>
        </div>

        <div id="content" class="snap-content">
            <div id="toolbar">
                <a href="#" id="open-left"></a>
                <h1>Updatable Settings</h1>
            </div>

            <div style="padding-top: 50px">

            	<div class="opt">
            		<p>Change Speed: </p>
                	<select data-key="speed">
                    	<option value="0.3">Normal</option>
                    	<option value="1">Slow</option>
                    	<option value="0.2">Fast</option>
                    </select>
            	</div>
                
                <div class="opt">
                    <p>Change Easing</p>
                    <select data-key="easing">
                    	<option value="ease">ease</option>
                    	<option value="linear">linear</option>
                    	<option value="cubic-bezier(0.175, 0.885, 0.320, 1.275)">easeOutBack (Bezier Curve)</option>
                    </select>
            	</div>
            	
            	<div class="opt">
                    <p>Disable</p>
                    <select data-key="disable">
                    	<option value="none">None</option>
                    	<option value="left">Left</option>
                    	<option value="right">Right</option>
                    </select>
            	</div>
            	<div class="opt">
                    <p>And More!</p>
                </div>
            </div>
        </div>
        <script type="text/javascript" src="../../snap.js"></script>
        <script type="text/javascript">
            var snapper = new Snap({
	                element: document.getElementById('content')
	            }),
	            updateSnap = function(){
	            	var key = this.dataset.key,
	            		val = this.value,
	            		opts = {};
	            	switch(key){
	            		case 'speed':
	            			opts.transitionSpeed = parseFloat(val, 10);
	            			break;
	            		case 'easing':
	            			opts.easing = val;
	            			break;
	            		case 'disable':
	            			opts.disable = val;
	            			break;
	            	}

	            	snapper.settings(opts);
	            },
	            selects = document.getElementsByTagName('select'),
	            i;

            for(i=0; i<selects.length; i++){
            	selects[i].addEventListener('change', updateSnap);
            }

        </script>
        <script type="text/javascript" src="../assets/demo.js"></script>
        <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>       
    </body></html>
\ No newline at end of file

Web/resources/Snap.js/demo/apps/skinnyThreshold.html

+<!DOCTYPE HTML><html lang="en-US">
    <head>
        <title>Snap.js</title>
        <meta http-equiv="x-ua-compatible" content="IE=edge" />
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-touch-fullscreen" content="yes">
        <link rel="stylesheet" type="text/css" href="../../snap.css" />
        <link rel="stylesheet" type="text/css" href="../assets/demo.css" />
    </head>
    <body>
        <div class="snap-drawers">
            <div class="snap-drawer snap-drawer-left">
                <div>
                    <h3>Snap.js</h3>
                    <div class="demo-social">
                        <a href="https://twitter.com/share" class="twitter-share-button" data-lang="en" data-text="Snap.js - A Library for creating beautiful mobile shelfs in Javascript" data-url="http://jakiestfu.github.com/Snap.js/" data-count="none" data-via="jakiestfu">Tweet</a>
                        <a href="https://twitter.com/jakiestfu" class="twitter-follow-button" data-show-count="false" data-lang="en">Follow @jakiestfu</a>
                        <iframe src="http://ghbtns.com/github-btn.html?user=jakiestfu&amp;repo=Snap.js&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="120" height="20"></iframe>
                    </div>
                    <h4>Demos</h4>
                    <ul>
                        <li><a href="default.html">Default</a></li>
                        <li><a href="noDrag.html">No Drag</a></li>
                        <li><a href="dragElement.html">Drag Element</a></li>
                        <li><a href="rightDisabled.html">Right Disabled</a></li>
                        <li><a href="hyperextend.html">Hyperextension Disabled</a></li>
                        <li><a href="skinnyThreshold.html">Skinny Threshold</a></li>
                        <li><a href="toggles.html">Toggles</a></li>
                        <li><a href="classNames.html">Class Names</a></li>
                        <li><a href="expand.html">Expanding</a></li>
                        <li><a href="settings.html">Settings</a></li>
                        <li><a href="ratchet/template.html">Ratchet</a></li>
                    </ul>
                    <div>
                        <p>You can define the width of your app's sliding space</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non erat ac leo ultrices blandit sed vel risus. Pellentesque facilisis blandit auctor. Maecenas vestibulum vulputate tincidunt. Mauris nec quam libero. Fusce eget ligula non leo varius condimentum quis ac elit. Donec id urna ut neque semper ultrices. Proin ut suscipit felis. Nullam neque felis, ullamcorper scelerisque volutpat vel, vehicula vehicula neque. Aenean scelerisque elit ac erat sagittis ullamcorper.</p>
                    </div>
                </div>
            </div>
            <div class="snap-drawer snap-drawer-right"></div>
        </div>
        
        <div id="content" class="snap-content">
            <div id="toolbar">
                <a href="#" id="open-left"></a>
                <h1>Skinny Threshold</h1>
            </div>
        </div>
        <script type="text/javascript" src="../../snap.js"></script>
        <script type="text/javascript">
            var snapper = new Snap({
                element: document.getElementById('content'),
                maxPosition: 100,
                minPosition: -100
            });
            
        </script>
        <script type="text/javascript" src="../assets/demo.js"></script>
        <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>       
    </body></html>
\ No newline at end of file

Web/resources/Snap.js/demo/apps/toggles.html

+<!DOCTYPE HTML><html lang="en-US">
    <head>
        <title>Snap.js</title>
        <meta http-equiv="x-ua-compatible" content="IE=edge" />
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-touch-fullscreen" content="yes">
        <link rel="stylesheet" type="text/css" href="../../snap.css" />
        <link rel="stylesheet" type="text/css" href="../assets/demo.css" />
    </head>
    <body>
        <div class="snap-drawers">
            <div class="snap-drawer snap-drawer-left">
                <div>
                    <h3>Snap.js</h3>
                    <div class="demo-social">
                        <a href="https://twitter.com/share" class="twitter-share-button" data-lang="en" data-text="Snap.js - A Library for creating beautiful mobile shelfs in Javascript" data-url="http://jakiestfu.github.com/Snap.js/" data-count="none" data-via="jakiestfu">Tweet</a>
                        <a href="https://twitter.com/jakiestfu" class="twitter-follow-button" data-show-count="false" data-lang="en">Follow @jakiestfu</a>
                        <iframe src="http://ghbtns.com/github-btn.html?user=jakiestfu&amp;repo=Snap.js&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="120" height="20"></iframe>
                    </div>
                    <h4>Demos</h4>
                    <ul>
                        <li><a href="default.html">Default</a></li>
                        <li><a href="noDrag.html">No Drag</a></li>
                        <li><a href="dragElement.html">Drag Element</a></li>
                        <li><a href="rightDisabled.html">Right Disabled</a></li>
                        <li><a href="hyperextend.html">Hyperextension Disabled</a></li>
                        <li><a href="skinnyThreshold.html">Skinny Threshold</a></li>
                        <li><a href="toggles.html">Toggles</a></li>
                        <li><a href="classNames.html">Class Names</a></li>
                        <li><a href="expand.html">Expanding</a></li>
                        <li><a href="settings.html">Settings</a></li>
                        <li><a href="ratchet/template.html">Ratchet</a></li>
                    </ul>
                    <div>
                        <p>Toggles are easy to create. Snap.js gives you the state of the pane and allows you to make decisions simply.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non erat ac leo ultrices blandit sed vel risus. Pellentesque facilisis blandit auctor. Maecenas vestibulum vulputate tincidunt. Mauris nec quam libero. Fusce eget ligula non leo varius condimentum quis ac elit. Donec id urna ut neque semper ultrices. Proin ut suscipit felis. Nullam neque felis, ullamcorper scelerisque volutpat vel, vehicula vehicula neque. Aenean scelerisque elit ac erat sagittis ullamcorper.</p>
                    </div>
                </div>
            </div>
            <div class="snap-drawer snap-drawer-right"></div>
        </div>
        
        <div id="content" class="snap-content">
            <div id="toolbar">
                <a href="#" id="open-left"></a>
                <h1>Toggles</h1>
            </div>
            <div class="toggler" id="ol">Open Left</div>
            <div class="toggler" id="or">Open Right</div>
        </div>
        <script type="text/javascript" src="../../snap.js"></script>
        <script type="text/javascript" src="../assets/demo.js"></script>
        <script type="text/javascript">
            var snapper = new Snap({
                element: document.getElementById('content')
            });
            addEvent(document.getElementById('ol'), 'click', function(){
                snapper.open('left');
            });

            addEvent(document.getElementById('or'), 'click', function(){
                snapper.open('right');
            });
            
        </script>
        <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>       
    
        
    </body></html>
\ No newline at end of file

Web/resources/Snap.js/demo/assets/demo.css

+/* Show "Left" drawer for the "Right" drawer in the demo */.snapjs-right .snap-drawer-left {
	display: block;
	right: 0;
	left: auto;}
/* Hide the actual "Right" drawer in the demo */.snapjs-right .snap-drawer-right {
	display: none;}
/* Show the "Drag" background in the demo */#content {
	background: #BFC7D8 url(drag.png) center 75% no-repeat;}
/* Demo toolbar styles */#toolbar {
  background: #536ea7;
  border-bottom: 1px solid #111b32;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  width: auto;
  height: 44px;}
#toolbar h1 {
  color: #fff;
  font-size: 16px;
  line-height: 22px;
  text-align: center;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.8);
  position: absolute;
  top: 0;
  right: 44px;
  left: 44px;
  width: auto;
  height: 44px;}
#open-left {
  background: url(open.png) center center no-repeat;
  display: block;
  width: 44px;
  height: 44px;}
/* Show the red "No Drag" box in the demo */#no-drag,#do-drag {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 50%;
	height: 100px;
	margin-left: -25%;
	margin-top: -50px;
	background: red;
	color: #FFF;
	text-align: center;
	line-height: 100px;}#do-drag{
	background: green;}
/* Styles for the social buttons in the demo */.demo-social {
	padding: 0 15px;}
/* Show the translucent white "Toggle" boxes in the demo */.toggler {
	width: 80%;
	background: rgba(255,255,255,0.5);
	margin: 0 auto;
	position: relative;
	top: 70px;
	padding: 20px;
	margin-bottom: 20px;
	text-align: center;}
/* Styles for expanding "Search" input in the "Expanding" demo */.search {
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
	   -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
	        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);}
#search {
	height: 30px;
	width: 87%;
	margin: 7px 7px 0 7px;
	background: linear-gradient(#414A5A,#4C5464);
	background: -webkit-linear-gradient(#414A5A,#4C5464);
	padding-left: 15px;
	border: 1px solid #222936;
	-webkit-border-radius: 25px;
	   -moz-border-radius: 25px;
	        border-radius: 25px;
	-webkit-box-shadow: inset 0 1px 2px -1px rgba(0, 0, 0, 0.5),0 1px 2px -1px rgba(255, 255, 255, 0.4);
	   -moz-box-shadow: inset 0 1px 2px -1px rgba(0, 0, 0, 0.5),0 1px 2px -1px rgba(255, 255, 255, 0.4);
	        box-shadow: inset 0 1px 2px -1px rgba(0, 0, 0, 0.5),0 1px 2px -1px rgba(255, 255, 255, 0.4);}
#search:focus {
	outline: none;
	border-color: #151515;}
/* Styles for fading out the drawer content in the "Expanding" demo */.drawer-inner {
	-webkit-transition: opacity 0.3s ease; 
	   -moz-transition: opacity 0.3s ease; 
	    -ms-transition: opacity 0.3s ease; 
	     -o-transition: opacity 0.3s ease; 
	        transition: opacity 0.3s ease; }
.snapjs-expand-left .drawer-inner,.snapjs-expand-right .drawer-inner {
	opacity: 0;}
/* Styles for the "Settings" demo */.opt {
	padding: 20px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);}
.opt p {
	font-weight: bold;
	margin-top: 0;
	margin-bottom: 5px;
	color: #222;
	color: rgba(0, 0, 0, 0.6);}
/* Default demo styles */.snap-content {
  background: #BFC7D8;}
.snap-drawers {
  background: #323949;}
.snap-drawer {
	background: #323949;
	color: #eee;}
.snap-drawer h3 {
  font-size: 36px;
  font-weight: normal;
  margin: 15px;}
.snap-drawer h4 {
  padding: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 0;}
.snap-drawer ul {
  padding: 0;
  margin: 0;
  list-style-type: none;}
.snap-drawer li > a {
  display: block;
  border-bottom: 1px solid rgba(0,0,0, 0.1);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 15px;
  font-weight: bold;
  text-shadow: 0 1px 0 #000;
  text-decoration: none;
  color: #ccc;
  text-indent: 20px;}
.snap-drawer p {
  opacity: 0.5;
  padding: 15px;
  font-size: 12px;}
\ No newline at end of file

Web/resources/Snap.js/demo/assets/demo.js

+var addEvent = function addEvent(element, eventName, func) {
+	if (element.addEventListener) {
+    	return element.addEventListener(eventName, func, false);
+    } else if (element.attachEvent) {
+        return element.attachEvent("on" + eventName, func);
+    }
+};
+
+addEvent(document.getElementById('open-left'), 'click', function(){
+	snapper.open('left');
+});
+
+/* Prevent Safari opening links when viewing as a Mobile App */
+(function (a, b, c) {
+    if(c in b && b[c]) {
+        var d, e = a.location,
+            f = /^(a|html)$/i;
+        a.addEventListener("click", function (a) {
+            d = a.target;
+            while(!f.test(d.nodeName)) d = d.parentNode;
+            "href" in d && (d.href.indexOf("http") || ~d.href.indexOf(e.host)) && (a.preventDefault(), e.href = d.href)
+        }, !1)
+    }
+})(document, window.navigator, "standalone");
\ No newline at end of file

Web/resources/Snap.js/demo/index.html

+<meta http-equiv="REFRESH" content="0;url=http://jakiestfu.github.io/Snap.js/demo/apps/default.html"></HEAD>
\ No newline at end of file

Web/resources/Snap.js/snap.css

+html, body {
+  font-family: sans-serif;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.snap-content {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: auto;
+  height: auto;
+  z-index: 2;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  -webkit-transform: translate3d(0, 0, 0);
+     -moz-transform: translate3d(0, 0, 0);
+      -ms-transform: translate3d(0, 0, 0);
+       -o-transform: translate3d(0, 0, 0);
+          transform: translate3d(0, 0, 0);
+}
+
+.snap-drawers {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: auto;
+  height: auto;
+}
+
+.snap-drawer {
+  position: absolute;
+  top: 0;
+  right: auto;
+  bottom: 0;
+  left: auto;
+  width: 265px;
+  height: auto;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  -webkit-transition: width 0.3s ease;
+     -moz-transition: width 0.3s ease;
+      -ms-transition: width 0.3s ease;
+       -o-transition: width 0.3s ease;
+          transition: width 0.3s ease;
+}
+
+.snap-drawer-left {
+  left: 0;
+  z-index: 1;
+}
+
+.snap-drawer-right {
+  right: 0;
+  z-index: 1;
+}
+
+.snapjs-left .snap-drawer-right,
+.snapjs-right .snap-drawer-left {
+  display: none;
+}
+
+.snapjs-expand-left .snap-drawer-left,
+.snapjs-expand-right .snap-drawer-right {
+  width: 100%;
+}

Web/resources/Snap.js/snap.js

+/*
+ * Snap.js
+ *
+ * Copyright 2013, Jacob Kelley - http://jakiestfu.com/
+ * Released under the MIT Licence
+ * http://opensource.org/licenses/MIT
+ *
+ * Github:  http://github.com/jakiestfu/Snap.js/
+ * Version: 1.9.3
+ */
+/*jslint browser: true*/
+/*global define, module, ender*/
+(function(win, doc) {
+    'use strict';
+    var Snap = Snap || function(userOpts) {
+        var settings = {
+            element: null,
+            dragger: null,
+            disable: 'none',
+            addBodyClasses: true,
+            hyperextensible: true,
+            resistance: 0.5,
+            flickThreshold: 50,
+            transitionSpeed: 0.3,
+            easing: 'ease',
+            maxPosition: 266,
+            minPosition: -266,
+            tapToClose: true,
+            touchToDrag: true,
+            slideIntent: 40, // degrees
+            minDragDistance: 5
+        },
+        cache = {
+            simpleStates: {
+                opening: null,
+                towards: null,
+                hyperExtending: null,
+                halfway: null,
+                flick: null,
+                translation: {
+                    absolute: 0,
+                    relative: 0,
+                    sinceDirectionChange: 0,
+                    percentage: 0
+                }
+            }
+        },
+        eventList = {},
+        utils = {
+            hasTouch: ('ontouchstart' in doc.documentElement || win.navigator.msPointerEnabled),
+            eventType: function(action) {
+                var eventTypes = {
+                        down: (utils.hasTouch ? 'touchstart' : 'mousedown'),
+                        move: (utils.hasTouch ? 'touchmove' : 'mousemove'),
+                        up: (utils.hasTouch ? 'touchend' : 'mouseup'),
+                        out: (utils.hasTouch ? 'touchcancel' : 'mouseout')
+                    };
+                return eventTypes[action];
+            },
+            page: function(t, e){
+                return (utils.hasTouch && e.touches.length && e.touches[0]) ? e.touches[0]['page'+t] : e['page'+t];
+            },
+            klass: {
+                has: function(el, name){
+                    return (el.className).indexOf(name) !== -1;
+                },
+                add: function(el, name){
+                    if(!utils.klass.has(el, name) && settings.addBodyClasses){
+                        el.className += " "+name;
+                    }
+                },
+                remove: function(el, name){
+                    if(settings.addBodyClasses){
+                        el.className = (el.className).replace(name, "").replace(/^\s+|\s+$/g, '');
+                    }
+                }
+            },
+            dispatchEvent: function(type) {
+                if (typeof eventList[type] === 'function') {
+                    return eventList[type].call();
+                }
+            },
+            vendor: function(){
+                var tmp = doc.createElement("div"),
+                    prefixes = 'webkit Moz O ms'.split(' '),
+                    i;
+                for (i in prefixes) {
+                    if (typeof tmp.style[prefixes[i] + 'Transition'] !== 'undefined') {
+                        return prefixes[i];
+                    }
+                }
+            },
+            transitionCallback: function(){
+                return (cache.vendor==='Moz' || cache.vendor==='ms') ? 'transitionend' : cache.vendor+'TransitionEnd';
+            },
+            canTransform: function(){
+                return typeof settings.element.style[cache.vendor+'Transform'] !== 'undefined';
+            },
+            deepExtend: function(destination, source) {
+                var property;
+                for (property in source) {
+                    if (source[property] && source[property].constructor && source[property].constructor === Object) {
+                        destination[property] = destination[property] || {};
+                        utils.deepExtend(destination[property], source[property]);
+                    } else {
+                        destination[property] = source[property];
+                    }
+                }
+                return destination;
+            },
+            angleOfDrag: function(x, y) {
+                var degrees, theta;
+                // Calc Theta
+                theta = Math.atan2(-(cache.startDragY - y), (cache.startDragX - x));
+                if (theta < 0) {
+                    theta += 2 * Math.PI;
+                }
+                // Calc Degrees
+                degrees = Math.floor(theta * (180 / Math.PI) - 180);
+                if (degrees < 0 && degrees > -180) {
+                    degrees = 360 - Math.abs(degrees);
+                }
+                return Math.abs(degrees);
+            },
+            events: {
+                addEvent: function addEvent(element, eventName, func) {
+                    if (element.addEventListener) {
+                        return element.addEventListener(eventName, func, false);
+                    } else if (element.attachEvent) {
+                        return element.attachEvent("on" + eventName, func);
+                    }
+                },
+                removeEvent: function addEvent(element, eventName, func) {
+                    if (element.addEventListener) {
+                        return element.removeEventListener(eventName, func, false);
+                    } else if (element.attachEvent) {
+                        return element.detachEvent("on" + eventName, func);
+                    }
+                },
+                prevent: function(e) {
+                    if (e.preventDefault) {
+                        e.preventDefault();
+                    } else {
+                        e.returnValue = false;
+                    }
+                }
+            },
+            parentUntil: function(el, attr) {
+                var isStr = typeof attr === 'string';
+                while (el.parentNode) {
+                    if (isStr && el.getAttribute && el.getAttribute(attr)){
+                        return el;
+                    } else if(!isStr && el === attr){
+                        return el;
+                    }
+                    el = el.parentNode;
+                }
+                return null;
+            }
+        },
+        action = {
+            translate: {
+                get: {
+                    matrix: function(index) {
+
+                        if( !utils.canTransform() ){
+                            return parseInt(settings.element.style.left, 10);
+                        } else {
+                            var matrix = win.getComputedStyle(settings.element)[cache.vendor+'Transform'].match(/\((.*)\)/),
+                                ieOffset = 8;
+                            if (matrix) {
+                                matrix = matrix[1].split(',');
+                                if(matrix.length===16){
+                                    index+=ieOffset;
+                                }
+                                return parseInt(matrix[index], 10);
+                            }
+                            return 0;
+                        }
+                    }
+                },
+                easeCallback: function(){
+                    settings.element.style[cache.vendor+'Transition'] = '';
+                    cache.translation = action.translate.get.matrix(4);
+                    cache.easing = false;
+                    clearInterval(cache.animatingInterval);
+
+                    if(cache.easingTo===0){
+                        utils.klass.remove(doc.body, 'snapjs-right');
+                        utils.klass.remove(doc.body, 'snapjs-left');
+                    }
+
+                    utils.dispatchEvent('animated');
+                    utils.events.removeEvent(settings.element, utils.transitionCallback(), action.translate.easeCallback);
+                },
+                easeTo: function(n) {
+
+                    if( !utils.canTransform() ){
+                        cache.translation = n;
+                        action.translate.x(n);
+                    } else {
+                        cache.easing = true;
+                        cache.easingTo = n;
+
+                        settings.element.style[cache.vendor+'Transition'] = 'all ' + settings.transitionSpeed + 's ' + settings.easing;
+
+                        cache.animatingInterval = setInterval(function() {
+                            utils.dispatchEvent('animating');
+                        }, 1);
+                        
+                        utils.events.addEvent(settings.element, utils.transitionCallback(), action.translate.easeCallback);
+                        action.translate.x(n);
+                    }
+                    if(n===0){
+                           settings.element.style[cache.vendor+'Transform'] = '';
+                       }
+                },
+                x: function(n) {
+                    if( (settings.disable==='left' && n>0) ||
+                        (settings.disable==='right' && n<0)
+                    ){ return; }
+                    
+                    if( !settings.hyperextensible ){
+                        if( n===settings.maxPosition || n>settings.maxPosition ){
+                            n=settings.maxPosition;
+                        } else if( n===settings.minPosition || n<settings.minPosition ){
+                            n=settings.minPosition;
+                        }
+                    }
+                    
+                    n = parseInt(n, 10);
+                    if(isNaN(n)){
+                        n = 0;
+                    }
+
+                    if( utils.canTransform() ){
+                        var theTranslate = 'translate3d(' + n + 'px, 0,0)';
+                        settings.element.style[cache.vendor+'Transform'] = theTranslate;
+                    } else {
+                        settings.element.style.width = (win.innerWidth || doc.documentElement.clientWidth)+'px';
+
+                        settings.element.style.left = n+'px';
+                        settings.element.style.right = '';
+                    }
+                }
+            },
+            drag: {
+                listen: function() {
+                    cache.translation = 0;
+                    cache.easing = false;
+                    utils.events.addEvent(settings.element, utils.eventType('down'), action.drag.startDrag);
+                    utils.events.addEvent(settings.element, utils.eventType('move'), action.drag.dragging);
+                    utils.events.addEvent(settings.element, utils.eventType('up'), action.drag.endDrag);
+                },
+                stopListening: function() {
+                    utils.events.removeEvent(settings.element, utils.eventType('down'), action.drag.startDrag);
+                    utils.events.removeEvent(settings.element, utils.eventType('move'), action.drag.dragging);
+                    utils.events.removeEvent(settings.element, utils.eventType('up'), action.drag.endDrag);
+                },
+                startDrag: function(e) {
+                    // No drag on ignored elements
+                    var target = e.target ? e.target : e.srcElement,
+                        ignoreParent = utils.parentUntil(target, 'data-snap-ignore');
+                    
+                    if (ignoreParent) {
+                        utils.dispatchEvent('ignore');
+                        return;
+                    }
+                    
+                    
+                    if(settings.dragger){
+                        var dragParent = utils.parentUntil(target, settings.dragger);
+                        
+                        // Only use dragger if we're in a closed state
+                        if( !dragParent && 
+                            (cache.translation !== settings.minPosition && 
+                            cache.translation !== settings.maxPosition
+                        )){
+                            return;
+                        }
+                    }
+                    
+                    utils.dispatchEvent('start');
+                    settings.element.style[cache.vendor+'Transition'] = '';
+                    cache.isDragging = true;
+                    cache.hasIntent = null;
+                    cache.intentChecked = false;
+                    cache.startDragX = utils.page('X', e);
+                    cache.startDragY = utils.page('Y', e);
+                    cache.dragWatchers = {
+                        current: 0,
+                        last: 0,
+                        hold: 0,
+                        state: ''
+                    };
+                    cache.simpleStates = {
+                        opening: null,
+                        towards: null,
+                        hyperExtending: null,
+                        halfway: null,
+                        flick: null,
+                        translation: {
+                            absolute: 0,
+                            relative: 0,
+                            sinceDirectionChange: 0,
+                            percentage: 0
+                        }
+                    };
+                },
+                dragging: function(e) {
+                    if (cache.isDragging && settings.touchToDrag) {
+
+                        var thePageX = utils.page('X', e),
+                            thePageY = utils.page('Y', e),
+                            translated = cache.translation,
+                            absoluteTranslation = action.translate.get.matrix(4),
+                            whileDragX = thePageX - cache.startDragX,
+                            openingLeft = absoluteTranslation > 0,
+                            translateTo = whileDragX,
+                            diff;
+
+                        // Shown no intent already
+                        if((cache.intentChecked && !cache.hasIntent)){
+                            return;
+                        }
+
+                        if(settings.addBodyClasses){
+                            if((absoluteTranslation)>0){
+                                utils.klass.add(doc.body, 'snapjs-left');
+                                utils.klass.remove(doc.body, 'snapjs-right');
+                            } else if((absoluteTranslation)<0){
+                                utils.klass.add(doc.body, 'snapjs-right');
+                                utils.klass.remove(doc.body, 'snapjs-left');
+                            }
+                        }
+
+                        if (cache.hasIntent === false || cache.hasIntent === null) {
+                            var deg = utils.angleOfDrag(thePageX, thePageY),
+                                inRightRange = (deg >= 0 && deg <= settings.slideIntent) || (deg <= 360 && deg > (360 - settings.slideIntent)),
+                                inLeftRange = (deg >= 180 && deg <= (180 + settings.slideIntent)) || (deg <= 180 && deg >= (180 - settings.slideIntent));
+                            if (!inLeftRange && !inRightRange) {
+                                cache.hasIntent = false;
+                            } else {
+                                cache.hasIntent = true;
+                            }
+                            cache.intentChecked = true;
+                        }
+
+                        if (
+                            (settings.minDragDistance>=Math.abs(thePageX-cache.startDragX)) || // Has user met minimum drag distance?
+                            (cache.hasIntent === false)
+                        ) {
+                            return;
+                        }
+
+                        utils.events.prevent(e);
+                        utils.dispatchEvent('drag');
+
+                        cache.dragWatchers.current = thePageX;
+                        // Determine which direction we are going
+                        if (cache.dragWatchers.last > thePageX) {
+                            if (cache.dragWatchers.state !== 'left') {
+                                cache.dragWatchers.state = 'left';
+                                cache.dragWatchers.hold = thePageX;
+                            }
+                            cache.dragWatchers.last = thePageX;
+                        } else if (cache.dragWatchers.last < thePageX) {
+                            if (cache.dragWatchers.state !== 'right') {
+                                cache.dragWatchers.state = 'right';
+                                cache.dragWatchers.hold = thePageX;
+                            }
+                            cache.dragWatchers.last = thePageX;
+                        }
+                        if (openingLeft) {
+                            // Pulling too far to the right
+                            if (settings.maxPosition < absoluteTranslation) {
+                                diff = (absoluteTranslation - settings.maxPosition) * settings.resistance;
+                                translateTo = whileDragX - diff;
+                            }
+                            cache.simpleStates = {
+                                opening: 'left',
+                                towards: cache.dragWatchers.state,
+                                hyperExtending: settings.maxPosition < absoluteTranslation,
+                                halfway: absoluteTranslation > (settings.maxPosition / 2),
+                                flick: Math.abs(cache.dragWatchers.current - cache.dragWatchers.hold) > settings.flickThreshold,
+                                translation: {
+                                    absolute: absoluteTranslation,
+                                    relative: whileDragX,
+                                    sinceDirectionChange: (cache.dragWatchers.current - cache.dragWatchers.hold),
+                                    percentage: (absoluteTranslation/settings.maxPosition)*100
+                                }
+                            };
+                        } else {
+                            // Pulling too far to the left
+                            if (settings.minPosition > absoluteTranslation) {
+                                diff = (absoluteTranslation - settings.minPosition) * settings.resistance;
+                                translateTo = whileDragX - diff;
+                            }
+                            cache.simpleStates = {
+                                opening: 'right',
+                                towards: cache.dragWatchers.state,
+                                hyperExtending: settings.minPosition > absoluteTranslation,
+                                halfway: absoluteTranslation < (settings.minPosition / 2),
+                                flick: Math.abs(cache.dragWatchers.current - cache.dragWatchers.hold) > settings.flickThreshold,
+                                translation: {
+                                    absolute: absoluteTranslation,
+                                    relative: whileDragX,
+                                    sinceDirectionChange: (cache.dragWatchers.current - cache.dragWatchers.hold),
+                                    percentage: (absoluteTranslation/settings.minPosition)*100
+                                }
+                            };
+                        }
+                        action.translate.x(translateTo + translated);
+                    }
+                },
+                endDrag: function(e) {
+                    if (cache.isDragging) {
+                        utils.dispatchEvent('end');
+                        var translated = action.translate.get.matrix(4);
+
+                        // Tap Close
+                        if (cache.dragWatchers.current === 0 && translated !== 0 && settings.tapToClose) {
+                            utils.dispatchEvent('close');
+                            utils.events.prevent(e);
+                            action.translate.easeTo(0);
+                            cache.isDragging = false;
+                            cache.startDragX = 0;
+                            return;
+                        }
+
+                        // Revealing Left
+                        if (cache.simpleStates.opening === 'left') {
+                            // Halfway, Flicking, or Too Far Out
+                            if ((cache.simpleStates.halfway || cache.simpleStates.hyperExtending || cache.simpleStates.flick)) {
+                                if (cache.simpleStates.flick && cache.simpleStates.towards === 'left') { // Flicking Closed
+                                    action.translate.easeTo(0);
+                                } else if (
+                                    (cache.simpleStates.flick && cache.simpleStates.towards === 'right') || // Flicking Open OR
+                                    (cache.simpleStates.halfway || cache.simpleStates.hyperExtending) // At least halfway open OR hyperextending
+                                ) {
+                                    action.translate.easeTo(settings.maxPosition); // Open Left
+                                }
+                            } else {
+                                action.translate.easeTo(0); // Close Left
+                            }
+                            // Revealing Right
+                        } else if (cache.simpleStates.opening === 'right') {
+                            // Halfway, Flicking, or Too Far Out
+                            if ((cache.simpleStates.halfway || cache.simpleStates.hyperExtending || cache.simpleStates.flick)) {
+                                if (cache.simpleStates.flick && cache.simpleStates.towards === 'right') { // Flicking Closed
+                                    action.translate.easeTo(0);
+                                } else if (
+                                    (cache.simpleStates.flick && cache.simpleStates.towards === 'left') || // Flicking Open OR
+                                    (cache.simpleStates.halfway || cache.simpleStates.hyperExtending) // At least halfway open OR hyperextending
+                                ) {
+                                    action.translate.easeTo(settings.minPosition); // Open Right
+                                }
+                            } else {
+                                action.translate.easeTo(0); // Close Right
+                            }
+                        }
+                        cache.isDragging = false;
+                        cache.startDragX = utils.page('X', e);
+                    }
+                }
+            }
+        },
+        init = function(opts) {
+            if (opts.element) {
+                utils.deepExtend(settings, opts);
+                cache.vendor = utils.vendor();
+                action.drag.listen();
+            }
+        };
+        /*
+         * Public
+         */
+        this.open = function(side) {
+            utils.dispatchEvent('open');
+            utils.klass.remove(doc.body, 'snapjs-expand-left');
+            utils.klass.remove(doc.body, 'snapjs-expand-right');
+
+            if (side === 'left') {
+                cache.simpleStates.opening = 'left';
+                cache.simpleStates.towards = 'right';
+                utils.klass.add(doc.body, 'snapjs-left');
+                utils.klass.remove(doc.body, 'snapjs-right');
+                action.translate.easeTo(settings.maxPosition);
+            } else if (side === 'right') {
+                cache.simpleStates.opening = 'right';
+                cache.simpleStates.towards = 'left';
+                utils.klass.remove(doc.body, 'snapjs-left');
+                utils.klass.add(doc.body, 'snapjs-right');
+                action.translate.easeTo(settings.minPosition);
+            }
+        };
+        this.close = function() {
+            utils.dispatchEvent('close');
+            action.translate.easeTo(0);
+        };
+        this.expand = function(side){
+            var to = win.innerWidth || doc.documentElement.clientWidth;
+
+            if(side==='left'){
+                utils.dispatchEvent('expandLeft');
+                utils.klass.add(doc.body, 'snapjs-expand-left');
+                utils.klass.remove(doc.body, 'snapjs-expand-right');
+            } else {
+                utils.dispatchEvent('expandRight');
+                utils.klass.add(doc.body, 'snapjs-expand-right');
+                utils.klass.remove(doc.body, 'snapjs-expand-left');
+                to *= -1;
+            }
+            action.translate.easeTo(to);
+        };
+
+        this.on = function(evt, fn) {
+            eventList[evt] = fn;
+            return this;
+        };
+        this.off = function(evt) {
+            if (eventList[evt]) {
+                eventList[evt] = false;
+            }
+        };
+
+        this.enable = function() {
+            utils.dispatchEvent('enable');
+            action.drag.listen();
+        };
+        this.disable = function() {
+            utils.dispatchEvent('disable');
+            action.drag.stopListening();
+        };
+
+        this.settings = function(opts){
+            utils.deepExtend(settings, opts);
+        };
+
+        this.state = function() {
+            var state,
+                fromLeft = action.translate.get.matrix(4);
+            if (fromLeft === settings.maxPosition) {
+                state = 'left';
+            } else if (fromLeft === settings.minPosition) {
+                state = 'right';
+            } else {
+                state = 'closed';
+            }
+            return {
+                state: state,
+                info: cache.simpleStates
+            };
+        };
+        init(userOpts);
+    };
+    if ((typeof module !== 'undefined') && module.exports) {
+        module.exports = Snap;
+    }
+    if (typeof ender === 'undefined') {
+        this.Snap = Snap;
+    }
+    if ((typeof define === "function") && define.amd) {
+        define("snap", [], function() {
+            return Snap;
+        });
+    }
+}).call(this, window, document);

Web/resources/Snap.js/snap.min.js

+/*
+ * Snap.js
+ *
+ * Copyright 2013, Jacob Kelley - http://jakiestfu.com/
+ * Released under the MIT Licence
+ * http://opensource.org/licenses/MIT
+ *
+ * Github:  http://github.com/jakiestfu/Snap.js/
+ * Version: 1.9.2
+ */
+ (function(c,b){var a=a||function(k){var f={element:null,dragger:null,disable:"none",addBodyClasses:true,hyperextensible:true,resistance:0.5,flickThreshold:50,transitionSpeed:0.3,easing:"ease",maxPosition:266,minPosition:-266,tapToClose:true,touchToDrag:true,slideIntent:40,minDragDistance:5},e={simpleStates:{opening:null,towards:null,hyperExtending:null,halfway:null,flick:null,translation:{absolute:0,relative:0,sinceDirectionChange:0,percentage:0}}},h={},d={hasTouch:(b.ontouchstart===null),eventType:function(m){var l={down:(d.hasTouch?"touchstart":"mousedown"),move:(d.hasTouch?"touchmove":"mousemove"),up:(d.hasTouch?"touchend":"mouseup"),out:(d.hasTouch?"touchcancel":"mouseout")};return l[m]},page:function(l,m){return(d.hasTouch&&m.touches.length&&m.touches[0])?m.touches[0]["page"+l]:m["page"+l]},klass:{has:function(m,l){return(m.className).indexOf(l)!==-1},add:function(m,l){if(!d.klass.has(m,l)&&f.addBodyClasses){m.className+=" "+l}},remove:function(m,l){if(f.addBodyClasses){m.className=(m.className).replace(l,"").replace(/^\s+|\s+$/g,"")}}},dispatchEvent:function(l){if(typeof h[l]==="function"){return h[l].call()}},vendor:function(){var m=b.createElement("div"),n="webkit Moz O ms".split(" "),l;for(l in n){if(typeof m.style[n[l]+"Transition"]!=="undefined"){return n[l]}}},transitionCallback:function(){return(e.vendor==="Moz"||e.vendor==="ms")?"transitionend":e.vendor+"TransitionEnd"},canTransform:function(){return typeof f.element.style[e.vendor+"Transform"]!=="undefined"},deepExtend:function(l,n){var m;for(m in n){if(n[m]&&n[m].constructor&&n[m].constructor===Object){l[m]=l[m]||{};d.deepExtend(l[m],n[m])}else{l[m]=n[m]}}return l},angleOfDrag:function(l,o){var n,m;m=Math.atan2(-(e.startDragY-o),(e.startDragX-l));if(m<0){m+=2*Math.PI}n=Math.floor(m*(180/Math.PI)-180);if(n<0&&n>-180){n=360-Math.abs(n)}return Math.abs(n)},events:{addEvent:function g(m,l,n){if(m.addEventListener){return m.addEventListener(l,n,false)}else{if(m.attachEvent){return m.attachEvent("on"+l,n)}}},removeEvent:function g(m,l,n){if(m.addEventListener){return m.removeEventListener(l,n,false)}else{if(m.attachEvent){return m.detachEvent("on"+l,n)}}},prevent:function(l){if(l.preventDefault){l.preventDefault()}else{l.returnValue=false}}},parentUntil:function(n,l){var m=typeof l==="string";while(n.parentNode){if(m&&n.getAttribute&&n.getAttribute(l)){return n}else{if(!m&&n===l){return n}}n=n.parentNode}return null}},i={translate:{get:{matrix:function(n){if(!d.canTransform()){return parseInt(f.element.style.left,10)}else{var m=c.getComputedStyle(f.element)[e.vendor+"Transform"].match(/\((.*)\)/),l=8;if(m){m=m[1].split(",");if(m.length===16){n+=l}return parseInt(m[n],10)}return 0}}},easeCallback:function(){f.element.style[e.vendor+"Transition"]="";e.translation=i.translate.get.matrix(4);e.easing=false;clearInterval(e.animatingInterval);if(e.easingTo===0){d.klass.remove(b.body,"snapjs-right");d.klass.remove(b.body,"snapjs-left")}d.dispatchEvent("animated");d.events.removeEvent(f.element,d.transitionCallback(),i.translate.easeCallback)},easeTo:function(l){if(!d.canTransform()){e.translation=l;i.translate.x(l)}else{e.easing=true;e.easingTo=l;f.element.style[e.vendor+"Transition"]="all "+f.transitionSpeed+"s "+f.easing;e.animatingInterval=setInterval(function(){d.dispatchEvent("animating")},1);d.events.addEvent(f.element,d.transitionCallback(),i.translate.easeCallback);i.translate.x(l)}if(l===0){f.element.style[e.vendor+"Transform"]=""}},x:function(m){if((f.disable==="left"&&m>0)||(f.disable==="right"&&m<0)){return}if(!f.hyperextensible){if(m===f.maxPosition||m>f.maxPosition){m=f.maxPosition}else{if(m===f.minPosition||m<f.minPosition){m=f.minPosition}}}m=parseInt(m,10);if(isNaN(m)){m=0}if(d.canTransform()){var l="translate3d("+m+"px, 0,0)";f.element.style[e.vendor+"Transform"]=l}else{f.element.style.width=(c.innerWidth||b.documentElement.clientWidth)+"px";f.element.style.left=m+"px";f.element.style.right=""}}},drag:{listen:function(){e.translation=0;e.easing=false;d.events.addEvent(f.element,d.eventType("down"),i.drag.startDrag);d.events.addEvent(f.element,d.eventType("move"),i.drag.dragging);d.events.addEvent(f.element,d.eventType("up"),i.drag.endDrag)},stopListening:function(){d.events.removeEvent(f.element,d.eventType("down"),i.drag.startDrag);d.events.removeEvent(f.element,d.eventType("move"),i.drag.dragging);d.events.removeEvent(f.element,d.eventType("up"),i.drag.endDrag)},startDrag:function(n){var m=n.target?n.target:n.srcElement,l=d.parentUntil(m,"data-snap-ignore");if(l){d.dispatchEvent("ignore");return}if(f.dragger){var o=d.parentUntil(m,f.dragger);if(!o&&(e.translation!==f.minPosition&&e.translation!==f.maxPosition)){return}}d.dispatchEvent("start");f.element.style[e.vendor+"Transition"]="";e.isDragging=true;e.hasIntent=null;e.intentChecked=false;e.startDragX=d.page("X",n);e.startDragY=d.page("Y",n);e.dragWatchers={current:0,last:0,hold:0,state:""};e.simpleStates={opening:null,towards:null,hyperExtending:null,halfway:null,flick:null,translation:{absolute:0,relative:0,sinceDirectionChange:0,percentage:0}}},dragging:function(s){if(e.isDragging&&f.touchToDrag){var v=d.page("X",s),u=d.page("Y",s),t=e.translation,o=i.translate.get.matrix(4),n=v-e.startDragX,p=o>0,q=n,w;if((e.intentChecked&&!e.hasIntent)){return}if(f.addBodyClasses){if((o)>0){d.klass.add(b.body,"snapjs-left");d.klass.remove(b.body,"snapjs-right")}else{if((o)<0){d.klass.add(b.body,"snapjs-right");d.klass.remove(b.body,"snapjs-left")}}}if(e.hasIntent===false||e.hasIntent===null){var m=d.angleOfDrag(v,u),l=(m>=0&&m<=f.slideIntent)||(m<=360&&m>(360-f.slideIntent)),r=(m>=180&&m<=(180+f.slideIntent))||(m<=180&&m>=(180-f.slideIntent));if(!r&&!l){e.hasIntent=false}else{e.hasIntent=true}e.intentChecked=true}if((f.minDragDistance>=Math.abs(v-e.startDragX))||(e.hasIntent===false)){return}d.events.prevent(s);d.dispatchEvent("drag");e.dragWatchers.current=v;if(e.dragWatchers.last>v){if(e.dragWatchers.state!=="left"){e.dragWatchers.state="left";e.dragWatchers.hold=v}e.dragWatchers.last=v}else{if(e.dragWatchers.last<v){if(e.dragWatchers.state!=="right"){e.dragWatchers.state="right";e.dragWatchers.hold=v}e.dragWatchers.last=v}}if(p){if(f.maxPosition<o){w=(o-f.maxPosition)*f.resistance;q=n-w}e.simpleStates={opening:"left",towards:e.dragWatchers.state,hyperExtending:f.maxPosition<o,halfway:o>(f.maxPosition/2),flick:Math.abs(e.dragWatchers.current-e.dragWatchers.hold)>f.flickThreshold,translation:{absolute:o,relative:n,sinceDirectionChange:(e.dragWatchers.current-e.dragWatchers.hold),percentage:(o/f.maxPosition)*100}}}else{if(f.minPosition>o){w=(o-f.minPosition)*f.resistance;q=n-w}e.simpleStates={opening:"right",towards:e.dragWatchers.state,hyperExtending:f.minPosition>o,halfway:o<(f.minPosition/2),flick:Math.abs(e.dragWatchers.current-e.dragWatchers.hold)>f.flickThreshold,translation:{absolute:o,relative:n,sinceDirectionChange:(e.dragWatchers.current-e.dragWatchers.hold),percentage:(o/f.minPosition)*100}}}i.translate.x(q+t)}},endDrag:function(m){if(e.isDragging){d.dispatchEvent("end");var l=i.translate.get.matrix(4);if(e.dragWatchers.current===0&&l!==0&&f.tapToClose){d.dispatchEvent("close");d.events.prevent(m);i.translate.easeTo(0);e.isDragging=false;e.startDragX=0;return}if(e.simpleStates.opening==="left"){if((e.simpleStates.halfway||e.simpleStates.hyperExtending||e.simpleStates.flick)){if(e.simpleStates.flick&&e.simpleStates.towards==="left"){i.translate.easeTo(0)}else{if((e.simpleStates.flick&&e.simpleStates.towards==="right")||(e.simpleStates.halfway||e.simpleStates.hyperExtending)){i.translate.easeTo(f.maxPosition)}}}else{i.translate.easeTo(0)}}else{if(e.simpleStates.opening==="right"){if((e.simpleStates.halfway||e.simpleStates.hyperExtending||e.simpleStates.flick)){if(e.simpleStates.flick&&e.simpleStates.towards==="right"){i.translate.easeTo(0)}else{if((e.simpleStates.flick&&e.simpleStates.towards==="left")||(e.simpleStates.halfway||e.simpleStates.hyperExtending)){i.translate.easeTo(f.minPosition)}}}else{i.translate.easeTo(0)}}}e.isDragging=false;e.startDragX=d.page("X",m)}}}},j=function(l){if(l.element){d.deepExtend(f,l);e.vendor=d.vendor();i.drag.listen()}};this.open=function(l){d.dispatchEvent("open");d.klass.remove(b.body,"snapjs-expand-left");d.klass.remove(b.body,"snapjs-expand-right");if(l==="left"){e.simpleStates.opening="left";e.simpleStates.towards="right";d.klass.add(b.body,"snapjs-left");d.klass.remove(b.body,"snapjs-right");i.translate.easeTo(f.maxPosition)}else{if(l==="right"){e.simpleStates.opening="right";e.simpleStates.towards="left";d.klass.remove(b.body,"snapjs-left");d.klass.add(b.body,"snapjs-right");i.translate.easeTo(f.minPosition)}}};this.close=function(){d.dispatchEvent("close");i.translate.easeTo(0)};this.expand=function(l){var m=c.innerWidth||b.documentElement.clientWidth;if(l==="left"){d.dispatchEvent("expandLeft");d.klass.add(b.body,"snapjs-expand-left");d.klass.remove(b.body,"snapjs-expand-right")}else{d.dispatchEvent("expandRight");d.klass.add(b.body,"snapjs-expand-right");d.klass.remove(b.body,"snapjs-expand-left");m*=-1}i.translate.easeTo(m)};this.on=function(l,m){h[l]=m;return this};this.off=function(l){if(h[l]){h[l]=false}};this.enable=function(){d.dispatchEvent("enable");i.drag.listen()};this.disable=function(){d.dispatchEvent("disable");i.drag.stopListening()};this.settings=function(l){d.deepExtend(f,l)};this.state=function(){var l,m=i.translate.get.matrix(4);if(m===f.maxPosition){l="left"}else{if(m===f.minPosition){l="right"}else{l="closed"}}return{state:l,info:e.simpleStates}};j(k)};if((typeof module!=="undefined")&&module.exports){module.exports=a}if(typeof ender==="undefined"){this.Snap=a}if((typeof define==="function")&&define.amd){define("snap",[],function(){return a})}}).call(this,window,document);