major

css/fonts.less

@@ -0,0 +1,16 @@
+@font-face {
+  font-family: 'MozTT-Regular';
+  src: url('fonts/MozTT-Regular.ttf');
+}
+@font-face {
+  font-family: 'MozTT-Light';
+  src: url('fonts/MozTT-Light.ttf');
+}
+@font-face {
+  font-family: 'MozTT-Medium';
+  src: url('fonts/MozTT-Medium.ttf');
+}
+@font-face {
+  font-family: 'MozTT-Bold';
+  src: url('fonts/MozTT-Bold.ttf');
+}

css/main.less

@@ -1,6 +1,10 @@
+@import 'fonts';
+
+
 html, body {
   margin: 0;
   font-size: 10px;
+  overflow: hidden;
 }
 
 *::-moz-focus-inner {
@@ -10,38 +14,162 @@ html, body {
   outline: none;
 }
 
+.hidden {
+  display: none;
+  visibility: none;
+}
+
 div#container {
   position: absolute;
 }
 
 canvas {
-  border: 1px solid gray;
   position: absolute;
   top: 0;
   left: 0;
 }
 
-header {
+.separator {
-  width: 100%;
+  display: block;
-  height: 5rem;
+  height: 4.8rem;
-  background: #4d4d4d;
+  width: 0.1rem;
-  background: -moz-linear-gradient(top, #4d4d4d 0%, #333333 100%);
+  &.long {
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d4d4d), color-stop(100%,#333333));
+    background: url('imgs/div_line_lg_black.png');
-  background: -webkit-linear-gradient(top, #4d4d4d 0%,#333333 100%);
+  }
-  background: -o-linear-gradient(top, #4d4d4d 0%,#333333 100%);
+  &.small {
-  background: -ms-linear-gradient(top, #4d4d4d 0%,#333333 100%);
+    background: url('imgs/div_line_sm_black.png');
-  background: linear-gradient(to bottom, #4d4d4d 0%,#333333 100%);
+  }
-  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d4d4d', endColorstr='#333333',GradientType=0 );
+  &.left {
-
+    float: left;
-  #menu {
+  }
-    width: 3rem;
+  &.right {
-    height: 5rem;
+    float: right;
+  }
+  &.menu {
     position: relative;
-    lefT: -0.9rem;
+    left: -3rem;
-    background: url('imgs/menu.png') center center no-repeat, darken(#4d4d4d, 10%);
+  }
+}
+
+.overlay {
+  z-index: 9999;
+  position: absolute;
+  left: 0;
+  top: 5.3rem;;
+}
+
+button {
   -moz-appearance: none;
+  z-index: 1;
+  position: relative;
   border: none;
 }
+
+
+
+
+header {
+  width: 100%;
+  height: 5.3rem;
+  background: url('imgs/header_bg_black.png');
+
+  button {
+    width: 5rem;
+    height: 5rem;
+  }
+
+  .menu {
+    background: url('imgs/menu.png') -12px center no-repeat;
+    float: left;
+    &:active {
+      background: url('imgs/menu.png') -12px center no-repeat, url('imgs/bg_overlay_pressed_1.png') left no-repeat;
+    }
+  }
+
+  .save {
+    background: url('imgs/download.png') center center no-repeat;
+    float: right;
+    &:active {
+      background: url('imgs/download.png') center center no-repeat, url('imgs/bg_overlay_pressed_2.png') center center;
+    }
+  }
+
+  #title {
+    color: white;
+    font-size: 11pt;
+    font-family: 'MozTT-Regular';
+    float: left;
+    margin: 1.5rem 0;
+    position: relative;
+    left: -2rem;
+  }
+}
+
+
+#menu {
+  height: 100%;
+  width: 15rem;
+  background: #262626;
+  display: block;
+  position: absolute;
+  left: -15rem;
+  top: 5rem;
+  color: white;
+  font-family: 'MozTT-Light';
+  font-size: 8pt;
+
+  &.pulled {
+    left: 0;
+  }
+
+  button[id^='set'], p {
+    background: none;
+    display: block;
+    width: 75%;
+    color: white;
+    text-align: left;
+    margin: 1rem 2.5rem;
+    font-family: 'MozTT-Light';
+    font-size: 8pt;
+    padding: 0 0.6rem;
+  }
+  span {
+    float: right;
+    font-size: 7pt;
+  }
+  div[role='slider'] {
+    width: 60%;
+    float: right;
+    margin: 0 2rem 0 0;
+  
+    div {
+      overflow: visible;
+      button {
+        margin-top: -3.4rem;
+        left: 0%;
+      }
+    }
+  }
+  .icon-settings {
+    display: block;
+    margin: 1rem 0.5rem;
+    
+    &:before {
+      content: '';
+      background: url('imgs/settings.png') center center no-repeat;
+      background-size: 2rem;
+      width: 2rem;
+      height: 2rem;
+      display: block;
+      float: left;
+      margin: -0.3rem 0.5rem 0 0;
+    }
+  }
+
+  .options {
+    display: block;
+    margin-top: 1rem;
+  }
 }
 
 

css/seekbars.css

@@ -0,0 +1,80 @@
+/* ----------------------------------
+* Seekbars
+* ---------------------------------- */
+div[role="slider"] {
+  position: relative;
+  height: 3.5rem;
+}
+
+div[role="slider"] > div {
+  display: block;
+  padding: 0;
+  overflow-y: hidden;
+  position: relative;
+  height: 100%;
+}
+
+div[role="slider"] progress {
+  width: 100%;
+  background: #000;
+  border: none;
+  height: 0.1rem;
+  display: block;
+  border-radius: 0;
+  margin-top: 1.9rem;
+}
+
+div[role="slider"] progress::-moz-progress-bar {
+  background: #01c5ed;
+  height: 0.6rem;
+  margin-top: -0.3rem;
+  border-radius: 0;
+}
+
+div[role="slider"] > label {
+  font-size: 1.5rem;
+  line-height: 3.8rem;
+  font-family: sans-serif;
+  color: #00aacb;
+  float: right;
+  padding: 0 0 0 1rem;
+  height: 3.5rem;
+  width: auto;
+}
+
+div[role="slider"] label:first-of-type {
+  float: left;
+  padding: 0 1rem 0 0;
+}
+
+div[role="slider"] > label.icon {
+  width: 3rem;
+  height: 3rem;
+  margin-top: 0.5rem;
+  font-size: 0;
+  background: no-repeat right top / 3rem auto;
+}
+
+div[role="slider"] > label.icon:first-of-type {
+  background-position: top left;
+}
+
+div[role="slider"] button {
+  width: 3.2rem;
+  height: 3.2rem;
+  background: url(seekbars/images/ui/handler.png) no-repeat center center / 3rem auto;
+  font: 0/0 a;
+  position: absolute;
+  top: 50%;
+  left: 0;
+  margin: -1.5rem 0 0 -1.6rem;
+  border-radius: 3.2rem;
+  border: solid 0.1rem transparent;
+  transition: border 0.15s ease;
+  padding: 0;
+  z-index: 10;
+}
+
+div[role="slider"] button:active {
+  border: solid 0.5rem #01c5ed;
+}

css/seekbars/seekbars.css

@@ -0,0 +1,79 @@
+/* ----------------------------------
+* Seekbars
+* ---------------------------------- */
+div[role="slider"] {
+  position: relative;
+  height: 3.5rem;
+}
+
+div[role="slider"] > div {
+  display: block;
+  overflow: hidden;
+  padding: 0;
+  position: relative;
+  height: 100%;
+}
+
+div[role="slider"] progress {
+  width: 100%;
+  background: #000;
+  border: none;
+  height: 0.1rem;
+  display: block;
+  border-radius: 0;
+  margin-top: 1.9rem;
+}
+
+div[role="slider"] progress::-moz-progress-bar {
+  background: #01c5ed;
+  height: 0.6rem;
+  margin-top: -0.3rem;
+  border-radius: 0;
+}
+
+div[role="slider"] > label {
+  font-size: 1.5rem;
+  line-height: 3.8rem;
+  font-family: sans-serif;
+  color: #00aacb;
+  float: right;
+  padding: 0 0 0 1rem;
+  height: 3.5rem;
+  width: auto;
+}
+
+div[role="slider"] label:first-of-type {
+  float: left;
+  padding: 0 1rem 0 0;
+}
+
+div[role="slider"] > label.icon {
+  width: 3rem;
+  height: 3rem;
+  margin-top: 0.5rem;
+  font-size: 0;
+  background: no-repeat right top / 3rem auto;
+}
+
+div[role="slider"] > label.icon:first-of-type {
+  background-position: top left;
+}
+
+div[role="slider"] button {
+  width: 3.2rem;
+  height: 3.2rem;
+  background: url(seekbars/images/ui/handler.png) no-repeat center center / 3rem auto;
+  font: 0/0 a;
+  position: absolute;
+  top: 50%;
+  left: 0;
+  margin: -1.5rem 0 0 -1.6rem;
+  border-radius: 3.2rem;
+  border: solid 0.1rem transparent;
+  transition: border 0.15s ease;
+  padding: 0;
+}
+
+div[role="slider"] button:active {
+  border: solid 0.5rem #01c5ed;
+}

css/switches.css

@@ -0,0 +1,94 @@
+/* ----------------------------------
+ * CHECKBOXES / RADIOS
+ * ---------------------------------- */
+
+label.pack-checkbox,
+label.pack-radio,
+label.pack-switch {
+  display: inline-block;
+  vertical-align: middle;
+  width: 5rem;
+  height: 5rem;
+  position: relative;
+  background: none;
+}
+
+label.pack-checkbox input,
+label.pack-radio input,
+label.pack-switch input {
+  margin: 0;
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+label.pack-checkbox input ~ span:after,
+label.pack-radio input ~ span:after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin: -1.1rem 0 0 -1.1rem;
+  width: 2.2rem;
+  height: 2.2rem;
+  pointer-events: none;
+}
+
+label.pack-checkbox input ~ span:after {
+  background: url(switches/images/check/default.png) no-repeat center top / 2.2rem auto;
+}
+
+label.pack-radio input ~ span:after {
+  background: url(switches/images/radio/default.png) no-repeat center top / 2.2rem auto;
+}
+
+label.pack-checkbox input:checked ~ span:after,
+label.pack-radio input:checked ~ span:after,
+label.pack-switch input:checked ~ span:after {
+  background-position: center bottom;
+}
+
+/* 'Dangerous' switches */
+
+label.pack-checkbox.danger input ~ span:after {
+  background-image: url(switches/images/check/danger.png);
+}
+
+label.pack-radio.danger input ~ span:after {
+  background-image: url(switches/images/radio/danger.png);
+}
+
+
+/* ----------------------------------
+ * ON/OFF SWITCHES
+ * ---------------------------------- */
+
+label.pack-switch input ~ span:after {
+  content: '';
+  position: absolute;
+  right: 0;
+  top: 50%;
+  width: 6rem;
+  margin: -1.4rem 0rem 0rem;
+  height: 2.7rem;
+  pointer-events: none;
+  border-radius: 1.35rem;
+  overflow: hidden;
+  background: #e6e6e6 url(switches/images/switch/background_off.png) no-repeat -3.2rem 0rem / 9.2rem 2.7rem;
+  transition: background 0.2s ease;
+}
+
+/* switch: 'ON' state */
+label.pack-switch input:checked ~ span:after {
+  background: #e6e6e6 url(switches/images/switch/background.png) no-repeat 0rem 0rem / 9.2rem 2.7rem;
+}
+
+/* switch: disabled state */
+label.pack-switch input:disabled ~ span:after {
+  opacity: 0.4;
+}
+
+label.pack-switch input.uninit ~ span:after {
+  transition: none;
+}

css/value_selector.css

@@ -0,0 +1,203 @@
+/* ----------------------------------
+ * Value selector (Single & Multiple)
+ * ---------------------------------- */
+
+/* Main dialog setup */
+form[role="dialog"][data-type="value-selector"] {
+  background: url(value_selector/images/ui/pattern.png) repeat left top, url(value_selector/images/ui/gradient.png) no-repeat left top / 100% 100%;
+  overflow: hidden;
+  position: absolute;
+  z-index: 100;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 0 0 7rem;
+  color: #fff;
+  font-family: sans-serif;
+}
+
+form[role="dialog"][data-type="value-selector"] > section {
+  padding: 0 1.5rem 0;
+  -moz-box-sizing: padding-box;
+  width: 100%;
+  height: 100%;
+}
+
+form[role="dialog"][data-type="value-selector"] h1 {
+  font-weight: 400;
+  font-size: 1.9rem;
+  line-height: 4.8rem;
+  color: #fff;
+  border-bottom: 0.1rem solid #616262;
+  background: rgba(0 ,0, 0, .2);
+  margin: 0 -1.5rem;
+  padding: 0 3rem 1rem;
+  height: 4.8rem;
+  -moz-box-sizing: border-box;
+}
+
+/* Specific component code */
+form[role="dialog"][data-type="value-selector"] [role="listbox"] {
+  position: relative;
+  padding: 0;
+  margin: 0 -1.5rem;
+  max-height: calc(100% - 5rem);
+  overflow: auto;
+  border-top: solid 0.1rem #222323;
+}
+
+form[role="dialog"][data-type="value-selector"] .scrollable:before {
+  content: "";
+  display: block;
+  position: absolute;
+  pointer-events: none;
+  top: 4.8rem;
+  left: 0;
+  right: 0;
+  bottom: 6.9rem;
+  background: url(value_selector/images/ui/shadow.png) repeat-x left top, url(value_selector/images/ui/shadow-invert.png) repeat-x left bottom;
+}
+
+form[role="dialog"][data-type="value-selector"] [role="listbox"] li {
+  margin: 0;
+  padding: 0 1.5rem;
+  height: auto;
+  list-style: none;
+  position: relative;
+  font-weight: lighter;
+  font-size: 2.2rem;
+  line-height: 3.9rem;
+  color: #fff;
+  transition: background-color 0.2s ease;
+}
+
+form[role="dialog"][data-type="value-selector"] [role="listbox"] li:first-child label {
+  border-top-color: transparent;
+}
+
+form[role="dialog"][data-type="value-selector"] [role="listbox"] li label {
+  outline: none;
+  display: block;
+  color: #fff;
+  border-top: 0.1rem solid #666;
+  border-bottom: 0.1rem solid #000;
+}
+
+form[role="dialog"][data-type="value-selector"] [role="listbox"] li:last-child label {
+  border-bottom-color: transparent;
+}
+
+form[role="dialog"][data-type="value-selector"] [role="listbox"] li label span {
+  display: block;
+  padding: 1rem 1.5rem;
+  line-height: 4rem;
+  word-wrap: break-word;
+}
+
+/* Pressed status */
+form[role="dialog"][data-type="value-selector"] [role="listbox"] li:active {
+  background-color: #00ABCC;
+}
+
+form[role="dialog"][data-type="value-selector"] [role="listbox"] li:active label {
+  border-color: transparent;
+}
+
+form[role="dialog"][data-type="value-selector"] [role="listbox"] li:active + li label {
+  border-top-color: #000;
+}
+
+form[role="dialog"][data-type="value-selector"] [role="listbox"] li:active label span {
+  color: #fff !important;
+  background-image: none;
+}
+
+/* Checked status */
+form[role="dialog"][data-type="value-selector"] [role="listbox"] li[aria-selected="true"] span {
+  padding-right: 2.6rem;
+  margin-right: 1.2rem;
+  color: #00abcd;
+  background: transparent url(value_selector/images/icons/checked.png) no-repeat 100% 50%;
+  background-size: 2rem;
+}
+
+
+/* Menu & buttons setup */
+form[role="dialog"][data-type="value-selector"] menu {
+  white-space: nowrap;
+  margin: 0;
+  padding: 1.5rem;
+  border-top: solid 0.1rem rgba(255, 255, 255, 0.1);
+  background: #2d2d2d url(value_selector/images/ui/pattern.png) repeat left top;
+  display: block;
+  overflow: hidden;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+form[role="dialog"][data-type="value-selector"] menu button::-moz-focus-inner {
+  border: none;
+  outline: none;
+}
+
+form[role="dialog"][data-type="value-selector"] menu button {
+  width: calc((100% - 1rem) / 2);
+  height: 3.8rem;
+  margin: 0 0 1rem;
+  padding: 0 1.5rem;
+  -moz-box-sizing: border-box;
+  display: inline-block;
+  vertical-align: middle;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  background: #fafafa url(value_selector/images/ui/default.png) repeat-x left bottom/ auto 100%;
+  border: 0.1rem solid #a6a6a6;
+  border-radius: 0.3rem;
+  font-weight: 500;
+  font-size: 1.6rem;
+  line-height: 3.8rem;
+  color: #333;
+  text-align: center;
+  text-shadow: 0.1rem 0.1rem 0 rgba(255,255,255,0.3);
+  text-decoration: none;
+  outline: none;
+}
+
+/* Press (default & affirmative) */
+form[role="dialog"][data-type="value-selector"] menu button:active,
+form[role="dialog"][data-type="value-selector"] menu button.affirmative:active {
+  border-color: #008aaa;
+  background: #008aaa;
+  color: #333;
+}
+
+/* affirmative */
+form[role="dialog"][data-type="value-selector"] menu button.affirmative {
+  background-image: url(value_selector/images/ui/affirmative.png);
+  background-color: #00caf2;
+  border-color: #008eab;
+}
+
+form[role="dialog"][data-type="value-selector"] menu button:last-child {
+  margin-left: 1rem;
+}
+
+form[role="dialog"][data-type="value-selector"] menu button,
+form[role="dialog"][data-type="value-selector"] menu button:first-child {
+  margin: 0;
+}
+
+form[role="dialog"][data-type="value-selector"] menu button.full {
+  width: 100%;
+}
+
+/* Right to left tweaks */
+html[dir="rtl"] #value-selector li input:checked + span,
+html[dir="rtl"] #value-selector li[aria-selected="true"] span {
+  padding-left: 2.6rem;
+  margin-left: 1.2rem;
+}

img/icons/icon2.svg

@@ -0,0 +1,102 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="60"
+   height="60"
+   id="svg3029"
+   version="1.1"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="icon2.svg"
+   inkscape:export-filename="/home/mahdi/Documents/Workshop/Mobile Editor/img/icons/icon128.png"
+   inkscape:export-xdpi="192"
+   inkscape:export-ydpi="192">
+  <defs
+     id="defs3031" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1"
+     inkscape:cx="-12.897528"
+     inkscape:cy="62.276464"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     inkscape:grid-bbox="true"
+     inkscape:document-units="px"
+     inkscape:window-width="1600"
+     inkscape:window-height="876"
+     inkscape:window-x="0"
+     inkscape:window-y="24"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata3034">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="layer1"
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     transform="translate(0,12)">
+    <path
+       sodipodi:type="arc"
+       style="fill:#374146;fill-opacity:1;stroke:none"
+       id="path3037"
+       sodipodi:cx="31.428572"
+       sodipodi:cy="29.285715"
+       sodipodi:rx="26.428572"
+       sodipodi:ry="26.428572"
+       d="m 57.857143,29.285715 c 0,14.596097 -11.832474,26.428572 -26.428571,26.428572 C 16.832475,55.714287 5,43.881812 5,29.285715 5,14.689618 16.832475,2.8571434 31.428572,2.8571434 c 14.596097,0 26.428571,11.8324746 26.428571,26.4285716 z"
+       transform="matrix(1.0972973,0,0,1.0972973,-4.4864869,-14.135136)" />
+    <image
+       y="-11.715099"
+       x="0.21543235"
+       id="image3962"
+       xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAABHNCSVQICAgIfAhkiAAABwNJREFU aIHlm01MG+kZx3/vjIevNTEfNhvA3RqWbmirqKcGlMKlbZRL0kMPrSqUgIxCyIVISc45IUWRckmv vVXNIWqVNjRqN60qVZuqXdE0yiZebdRslV3YJSZmiw3YgzHD9PB6YuPYMLbHHqT+pUfGlud9n5+f 93nejxmEaZr8P0lx24F6y1ODNkWJz/cbSpVeV5acAhZ5ZuZZOSr8vtWeUkWbb0hUmcOWQwLYccqp In3kg1v9VNZYFcBq1okdwKi0kXr3WQmwADTkr7yN8xG1078n+5opt/9ygVUk7HbW3JQnaxnKiHY5 wB4kbBo5pA6CFKARCW0rAHbn4YasHSRYkL6kyfm3r+wAW43pHCxYSzu3bt3afPbsWfPc3Fzzfl/e b0hrQDOwwQGBFUJYRUvLvqqAEggExNmzZ72apsWuXbuWLHX9XhFWgbeAFAcAVgjRIIRoBToAH9CC HHkqIGKxGHNzc7qmaW/Pzs6WHN6lgAXQCmziYjUWUi1CiE4kZBO5hc4b9vz58535+fktRVF6rl69 WnSpWgq4Jfu66SiBTVmgQCfgJRtFO3b//v2tly9fehobG/3F2i4GbA3ldadB7EgI0YAEbaUM0Hy7 c+dOUlGUrps3b74xtIsB+5AVuV7LReB1VH3IHLVWUhXZ0tKSGYlENtPpdG9hP4XAVlUuWeVqISGE B/AjU6li0Hy7e/eurqpq2/Xr15vy+yoE9iFh61aVhRCNQAD5YzsCC4hkMkkkEkl5vd5dUVYK/vZS x9zNFiY/uV2Qo3bv3j0d8M/Pz6tWn/nAXmRVrkvu5lXhktNMtbaysmJGo9HMw4cPA1a/+cDWcK65 hBDNyMg6HtVCe/z4sa4oymGrbwtYIAtGzYGz004XNYxsvj148CCtqmr77du3FcidabUgt1g1LVZC CAV4G5mzdVEikWB1ddU0DKMd+MqK8FvUZ1UVQO5faz6U8y0ajW4h53fqBiyE8CLrRF1hAWVxcTGj adqhfOBmYKuGsAKZt67o1atXr4GtHG6khsDI6cfWiUQttLi4aGRH2C7gmmwDs4XKmm9d0fLysqko ShPkgDVqV6E7s+27plQqZS1hXwNb2zBHz5izuRvAxegCaJomFEXxQA7YJHfG66R8uJi7ltra2jxm 9vDOAt6hNsAduBxdgI6ODs0wjF3AGWTh0p3qJFusfMhUcVWHDx9uUFV1E3LAm8jFR9zBfqwjGtcV DAZbDMNYgxzwBjIaXzrYj48DAhwKhXymaX4OufyKI6cPJ9VKHXZDdqynp6dN1/Uo5CL8X6At+96p BYiXA1CwfD6f6vf7W6PR6Bewu0onkFu3qoe1EELD5cWGpRMnTnSaprk8MzOTgd3PeHwJfB1n8ti6 Q+C6jh071qPr+iPrfb5Ti0AvcnqqVg24sA0stK6ursa+vj5/Op1+Ugx4C1gC3nMAuKqDdKdsbGys d3t7+9Pz58+nigEDfAx8m+rzz/Xoer1ez9DQUH88Hv8g37HC57TiwDLwTeAJ1cnVHD537lzIMIyF 6enpL/I/L+bUQ+AouTuIlcjExaEcCoWaRkdH+3Rdv1voWDHgdeATYKQK4AwuDudLly4dTaVSH05O TsbsAAN8hFwaDlYInHYLNhwOv9Pb2+tJJpN/LOZYKWAD+BNwHHmHoFzpbsAODw+3nT59ejAej/9i amqq6FZ3r8KSAD4ATiGXibZlmqaB3IHVLW8HBgaar1y5ciyRSPw6HA6/LOXbfpX0U+AR8GPkUW45 WqsXbDAYbJqdnf1eKpV6f3x8/B97OWVn6ngC/Bv4KXDIPi+r9YAdHBxsuXHjxohpmn8/c+bM+/s5 Zfd56Q+RK7GfAb8FXtm4JkaN5+Ljx4/7Ll++PKTr+h/GxsZ+b+each4Qf4Q8KPgJ8ABZyUvKNM24 EGKT8lPBli5cuBA6derUe7FY7Ffj4+N/s3tdJY8PdwA/Qha1vyBztXjjQnwH+Ea5HeylI0eOtMzM zBwNBoPEYrGfT05OLpZzfaUPiKvAEPBdYB65OntjGhBCtAM/rKSDQvl8PnV6evrdkZGRd9fX1/+8 vr7+m1JTz16q9l8A2oDvA18D/pW1XSefQogfUMXxUXd3d8PExET/8PBwv2EYz1ZXV38ZDoeXKm2v WmBLXciIHwE+B54CL4C0EKKXMpepnZ2dnpMnT3aNjo6+EwqFOjc2Nj7a2Nj43cTExH+qddQpYEvN wLeQS9JeYAVYuHjx4sDTp0+VhYUFPRqNbiWTSUPTNNHR0aG1t7d7uru7m0KhkLevr+9Qf3+/PxAI eHVd/2xtbe2fuq7/dWpqKuGUg04D50sFgkAwEokMvHjx4qimaa2qqrYoitIAsLOzs2UYRiqTySQz mcxKOp1e0HX9k+3t7SeV5Kcd1RL4QOp/GtofUQrANYgAAAAASUVORK5CYII= "
+       height="60"
+       width="60" />
+    <path
+       style="fill:#5b5b5b;fill-opacity:1;stroke:#383838;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 40.415998,-0.2045792 c 0,0 -22.715805,23.0693572 -23.422911,25.0139012 -0.707107,1.944544 -2.740039,7.601398 -2.032932,8.485281 0.707106,0.883883 7.689786,-1.502602 9.015611,-2.828427 C 25.301591,29.140351 47.60072,6.06032 47.840618,4.833556 48.06427,3.68987 41.877086,-1.6684275 40.415998,-0.2045792 z"
+       id="path3054"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cssssc" />
+    <path
+       style="fill:#494949;fill-opacity:1;stroke:none"
+       d="m 44.875383,3.203193 c 0,0 -23.929105,24.058149 -24.015804,24.932991 -0.0867,0.874841 1.387194,2.71201 1.820692,2.187104 C 23.11377,29.798383 46.435977,5.9152018 46.522677,5.0403605 46.609378,4.1655182 45.222182,3.2906768 44.875383,3.203193 z"
+       id="path3841"
+       inkscape:connector-curvature="0" />
+    <path
+       style="fill:#545454;fill-opacity:1;stroke:none"
+       d="m 42.401427,1.6217284 c 0,0 -23.399153,24.3933116 -23.394823,24.6432736 0.0043,0.249963 1.094444,1.292086 1.650364,0.907398 0.55592,-0.384687 23.207727,-24.0757977 23.264805,-24.3893335 0.05708,-0.3135357 -1.2693,-1.1031781 -1.520346,-1.1613381 z"
+       id="path3861"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccssc" />
+    <path
+       style="fill:#494949;fill-opacity:1;stroke:none"
+       d="m 15.695313,42.429687 c 0,0 -0.515625,1.960938 -0.359375,2.539063 0.0078,0 0.141085,0.342965 2.430147,-0.344535 -0.01563,0.0078 -0.647057,-2.041553 -2.070772,-2.194528 z"
+       id="path3865"
+       inkscape:connector-curvature="0"
+       transform="translate(0,-12)"
+       sodipodi:nodetypes="cccc" />
+  </g>
+</svg>

index.html

@@ -5,13 +5,21 @@
     <title></title>
     <meta charset='UTF-8'>
     <link rel='stylesheet/less' href='css/main.less'>
+    <link rel='stylesheet' href='css/switches.css'>
+    <link rel='stylesheet' href='css/value_selector.css'>
+    <link rel='stylesheet' href='css/seekbars.css'>
     <script src='js/less-1.5.0.min.js'></script>
+    <script src='js/libs/mobilebrowsers.js'></script>
   </head>
   
   <body>
   
     <header>
-      <button id='menu'></button>
+      <button class='menu'></button>
+      <span class='separator long left menu'></span>
+      <p id='title'>Sketchy</p>
+      <button class='save'></button>
+      <span class='separator small right'></span>
     </header>
 
     <div id='container'>
@@ -19,6 +27,69 @@
       <canvas></canvas>
     </div>
 
+    <div id='menu'>
+      <p class='icon-settings'>Settings</p>
+      <div class='options'>
+        <div class='general'>
+          <button id='settype'>Brush Type<span>Sketch</span></button>
+          <button id='setcolor'>Color<span>#000000</span></button>
+          <button id='setlineJoin'>Line Join<span>Round</span></button>
+          <button id='setlineCap'>Line Cap<span>Round</span></button>
+          <p id='lineWidth'>Line Width <span>2</span></p>
+           <div role="slider" aria-valuemin="0" aria-valuenow="80" aria-valuemax="100" aria-valuetext="slider description">
+              <div>
+                  <progress value="2" max="100"></progress>
+                <button>handler</button>
+              </div>
+            </div> 
+          </div>
+      </div>
+    </div>
+
+    <form role='dialog' data-type='value-selector' id='type' class='hidden'>
+      <section class='scrollable'>
+        <h1>Brush Type</h1>
+        <ol role='listbox'>
+          <li role='option' aria-selected='true'><label role='presentation'><span>Sketch</span></label></li>
+          <li role='option'><label role='presentation'><span>Fur</span></label></li>
+          <li role='option'><label role='presentation'><span>Pen</span></label></li>
+          <li role='option'><label role='presentation'><span>Line</span></label></li>
+        </ol>
+      </section>
+      <menu>
+        <button class='affirmative full'>Cancel</button>
+      </menu>
+    </form>
+
+    <form role='dialog' data-type='value-selector' id='lineJoin' class='hidden'>
+      <section class='scrollable'>
+        <h1>Line Join</h1>
+        <ol role='listbox'>
+          <li role='option' aria-selected='true'><label role='presentation'><span>Round</span></label></li>
+          <li role='option'><label role='presentation'><span>Bevel</span></label></li>
+          <li role='option'><label role='presentation'><span>Miter</span></label></li>
+        </ol>
+      </section>
+      <menu>
+        <button class='affirmative full'>Cancel</button>
+      </menu>
+    </form>
+
+    <form role='dialog' data-type='value-selector' id='lineCap' class='hidden'>
+      <section class='scrollable'>
+        <h1>Line Cap</h1>
+        <ol role='listbox'>
+          <li role='option' aria-selected='true'><label role='presentation'><span>Round</span></label></li>
+          <li role='option'><label role='presentation'><span>Square</span></label></li>
+          <li role='option'><label role='presentation'><span>Butt</span></label></li>
+        </ol>
+      </section>
+      <menu>
+        <button class='affirmative full'>Cancel</button>
+      </menu>
+    </form>
+
+    <script src='js/libs/yepnope.min.js'></script>
     <script src='js/libs/zepto.min.js'></script>
     <script src='js/functions.js'></script>
     <script src='js/main.js'></script>

js/events.js

@@ -0,0 +1,84 @@
+  $('.menu').click(function() {
+    $('#menu').toggleClass('pulled');
+  })
+  $('.save').click(function() {
+    var data = $c[0].toDataURL();
+    var img = $('<img src="' + data + '" width="' + $c.width() + '" height="' + $c.height() + '" class="overlay"/>');
+    $('body').append(img);
+  })
+  $c.last().bind('mousedown', function(e) {
+    e.preventDefault();
+    var xy = relative(e.pageX, e.pageY);
+    startPoint(xy.x, xy.y);
+    window.active = true;
+  }).bind('mousemove', function(e) {
+    e.preventDefault();
+    if (!window.active || settings.type == 'line') return;
+    var xy = relative(e.pageX, e.pageY);
+    drawPoint(xy.x, xy.y);
+  }).bind('mouseup mouseout', function(e) {
+    e.preventDefault();
+    window.active = false;
+
+    if(window.points.history.last < window.points.history.length-1) {
+      window.points.history.splice(window.points.history.last+1);
+    }
+
+    window.points.history.push({
+      data: c.getImageData(0, 0, $c.width(), $c.height()),
+      points: window.points.slice(0)
+    })
+    window.points.history.last = window.points.history.length-1;
+  })
+  
+  // Value Selector
+  
+  var $selector = $('form[data-type="value-selector"]');
+
+  $selector.find('li').on('mouseup', function(e) {
+    alert(e.type);
+    $(this).parent().find('li').removeAttr('aria-selected');
+    $(this).attr('aria-selected', 'true');
+    var prop = $(this).parents('form').attr('id'),
+        key  = $(this).find('label span').html().toLowerCase();
+    window.settings[prop] = key;
+
+    $('button[id="set' + prop + '"] span').html(key[0].toUpperCase() + key.substr(1));
+
+    $(this).parents('form').addClass('hidden');
+  })
+
+  $selector.submit(function(e) {
+    e.preventDefault();
+    $(this).addClass('hidden');
+  })
+
+  // Value Selector Callers
+  
+  var $btn = $('button[id^="set"]');
+  $btn.each(function() {
+    var target = /set(.*)/.exec($(this).attr('id'))[1];
+    $(this).on('mouseup', function(e) {
+      e.preventDefault();
+      $('form[id="' + target + '"]').removeClass('hidden');
+    })
+  })
+
+  // Seekbar
+
+  var sliderLeft = $('div[role="slider"] button').offset().left;
+  $('div[role="slider"] button').on('mousedown', function() {
+    $(this).attr('data-moving','true');
+  }).on('mousemove', function(e) {
+    if( $(this).attr('data-moving') ) {
+      var x = e.pageX - sliderLeft - 15;
+      if( x <= 100 && x > 0 ) {
+        $(this).css('left', x+'%');
+        $(this).parent().find('progress').attr('value', x);
+        settings.lineWidth = x / 10;
+        $('#lineWidth span').html(x);
+      }
+    }
+  }).on('mouseup mouseleave', function() {
+    $(this).removeAttr('data-moving');
+  })

js/functions.js

@@ -7,7 +7,7 @@ function sizeAndPos() {
   var w = $(window).width(),
       h = $(window).height();
   $c.attr('width', w);
-  $c.attr('height',h - 50);
+  $c.attr('height',h - 53);
   c.clearRect(0,0, $c.width(), $c.height());
   c.putImageData(data, 0, 0);
 }
@@ -104,11 +104,6 @@ function startPoint(x, y) {
     points[points.length-1].start = undefined;
     return;
   }
-
-  if(current.type == 'ribbon') {
-    settings.ribbonTimes = 1;
-  }
-
   points.push(current);
 }
 
@@ -116,7 +111,7 @@ function drawPoint(x,y) {
   var capture = points[points.length-1];
 
   switch(capture.type) {
-    case 'draw': {
+    case 'pen': {
       line(capture.x, capture.y, x, y);
 
       var current = {
@@ -160,7 +155,7 @@ function drawPoint(x,y) {
       points.push(current);
 
       for( var i = 0, len = points.length-1; i < len; i++ ) {
-        if(threshold(points[i].x, points[i].y, current.x, current.y, 40)) {
+        if(threshold(points[i].x, points[i].y, current.x, current.y, settings.lineWidth*20)) {
           var x = points[i].x - current.x,
               y = points[i].y - current.y;
           var l = settings.furLength || 0.2;

js/libs/mobilebrowsers.js

@@ -0,0 +1 @@
+(function(a,b){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))window.mobile=true})(navigator.userAgent||navigator.vendor||window.opera,'http://detectmobilebrowser.com/mobile');

js/libs/two.min.js

@@ -1,108 +0,0 @@
-(function(){var p=this,l=p._,e={},j=Array.prototype,m=Object.prototype,c=j.push,b=j.slice,h=j.concat,x=m.toString,a=m.hasOwnProperty,k=j.forEach,q=j.map,s=j.reduce,f=j.reduceRight,r=j.filter,B=j.every,w=j.some,u=j.indexOf,y=j.lastIndexOf,m=Array.isArray,n=Object.keys,t=Function.prototype.bind,d=function(g){if(g instanceof d)return g;if(!(this instanceof d))return new d(g);this._wrapped=g};"undefined"!==typeof exports?("undefined"!==typeof module&&module.exports&&(exports=module.exports=d),exports._=
-d):p._=d;d.VERSION="1.5.1";var v=d.each=d.forEach=function(g,a,b){if(null!=g)if(k&&g.forEach===k)g.forEach(a,b);else if(g.length===+g.length)for(var f=0,c=g.length;f<c&&a.call(b,g[f],f,g)!==e;f++);else for(f in g)if(d.has(g,f)&&a.call(b,g[f],f,g)===e)break};d.map=d.collect=function(g,d,a){var b=[];if(null==g)return b;if(q&&g.map===q)return g.map(d,a);v(g,function(g,f,c){b.push(d.call(a,g,f,c))});return b};d.reduce=d.foldl=d.inject=function(g,a,b,f){var c=2<arguments.length;null==g&&(g=[]);if(s&&g.reduce===
-s)return f&&(a=d.bind(a,f)),c?g.reduce(a,b):g.reduce(a);v(g,function(g,d,n){c?b=a.call(f,b,g,d,n):(b=g,c=!0)});if(!c)throw new TypeError("Reduce of empty array with no initial value");return b};d.reduceRight=d.foldr=function(g,a,b,c){var n=2<arguments.length;null==g&&(g=[]);if(f&&g.reduceRight===f)return c&&(a=d.bind(a,c)),n?g.reduceRight(a,b):g.reduceRight(a);var h=g.length;if(h!==+h)var k=d.keys(g),h=k.length;v(g,function(d,f,t){f=k?k[--h]:--h;n?b=a.call(c,b,g[f],f,t):(b=g[f],n=!0)});if(!n)throw new TypeError("Reduce of empty array with no initial value");
-return b};d.find=d.detect=function(g,d,a){var b;z(g,function(g,f,c){if(d.call(a,g,f,c))return b=g,!0});return b};d.filter=d.select=function(g,d,a){var b=[];if(null==g)return b;if(r&&g.filter===r)return g.filter(d,a);v(g,function(g,f,c){d.call(a,g,f,c)&&b.push(g)});return b};d.reject=function(g,a,b){return d.filter(g,function(g,d,f){return!a.call(b,g,d,f)},b)};d.every=d.all=function(g,a,b){a||(a=d.identity);var f=!0;if(null==g)return f;if(B&&g.every===B)return g.every(a,b);v(g,function(g,d,c){if(!(f=
-f&&a.call(b,g,d,c)))return e});return!!f};var z=d.some=d.any=function(g,a,b){a||(a=d.identity);var f=!1;if(null==g)return f;if(w&&g.some===w)return g.some(a,b);v(g,function(g,d,c){if(f||(f=a.call(b,g,d,c)))return e});return!!f};d.contains=d.include=function(g,d){return null==g?!1:u&&g.indexOf===u?-1!=g.indexOf(d):z(g,function(g){return g===d})};d.invoke=function(g,a){var f=b.call(arguments,2),c=d.isFunction(a);return d.map(g,function(g){return(c?a:g[a]).apply(g,f)})};d.pluck=function(g,a){return d.map(g,
-function(g){return g[a]})};d.where=function(g,a,b){return d.isEmpty(a)?b?void 0:[]:d[b?"find":"filter"](g,function(g){for(var d in a)if(a[d]!==g[d])return!1;return!0})};d.findWhere=function(g,a){return d.where(g,a,!0)};d.max=function(g,a,b){if(!a&&d.isArray(g)&&g[0]===+g[0]&&65535>g.length)return Math.max.apply(Math,g);if(!a&&d.isEmpty(g))return-Infinity;var f={computed:-Infinity,value:-Infinity};v(g,function(g,d,c){d=a?a.call(b,g,d,c):g;d>f.computed&&(f={value:g,computed:d})});return f.value};d.min=
-function(g,a,b){if(!a&&d.isArray(g)&&g[0]===+g[0]&&65535>g.length)return Math.min.apply(Math,g);if(!a&&d.isEmpty(g))return Infinity;var f={computed:Infinity,value:Infinity};v(g,function(g,d,c){d=a?a.call(b,g,d,c):g;d<f.computed&&(f={value:g,computed:d})});return f.value};d.shuffle=function(g){var a,b=0,f=[];v(g,function(g){a=d.random(b++);f[b-1]=f[a];f[a]=g});return f};var J=function(g){return d.isFunction(g)?g:function(d){return d[g]}};d.sortBy=function(g,a,b){var f=J(a);return d.pluck(d.map(g,function(g,
-d,a){return{value:g,index:d,criteria:f.call(b,g,d,a)}}).sort(function(g,d){var a=g.criteria,b=d.criteria;if(a!==b){if(a>b||void 0===a)return 1;if(a<b||void 0===b)return-1}return g.index<d.index?-1:1}),"value")};var C=function(g,a,b,f){var c={},n=J(null==a?d.identity:a);v(g,function(d,a){var h=n.call(b,d,a,g);f(c,h,d)});return c};d.groupBy=function(g,a,b){return C(g,a,b,function(g,a,b){(d.has(g,a)?g[a]:g[a]=[]).push(b)})};d.countBy=function(g,a,b){return C(g,a,b,function(g,a){d.has(g,a)||(g[a]=0);
-g[a]++})};d.sortedIndex=function(g,a,b,f){b=null==b?d.identity:J(b);a=b.call(f,a);for(var c=0,n=g.length;c<n;){var h=c+n>>>1;b.call(f,g[h])<a?c=h+1:n=h}return c};d.toArray=function(g){return!g?[]:d.isArray(g)?b.call(g):g.length===+g.length?d.map(g,d.identity):d.values(g)};d.size=function(g){return null==g?0:g.length===+g.length?g.length:d.keys(g).length};d.first=d.head=d.take=function(g,d,a){return null==g?void 0:null!=d&&!a?b.call(g,0,d):g[0]};d.initial=function(g,d,a){return b.call(g,0,g.length-
-(null==d||a?1:d))};d.last=function(g,d,a){return null==g?void 0:null!=d&&!a?b.call(g,Math.max(g.length-d,0)):g[g.length-1]};d.rest=d.tail=d.drop=function(g,d,a){return b.call(g,null==d||a?1:d)};d.compact=function(g){return d.filter(g,d.identity)};var D=function(g,a,b){if(a&&d.every(g,d.isArray))return h.apply(b,g);v(g,function(g){d.isArray(g)||d.isArguments(g)?a?c.apply(b,g):D(g,a,b):b.push(g)});return b};d.flatten=function(g,d){return D(g,d,[])};d.without=function(g){return d.difference(g,b.call(arguments,
-1))};d.uniq=d.unique=function(g,a,b,f){d.isFunction(a)&&(f=b,b=a,a=!1);b=b?d.map(g,b,f):g;var c=[],n=[];v(b,function(b,f){if(a?!f||n[n.length-1]!==b:!d.contains(n,b))n.push(b),c.push(g[f])});return c};d.union=function(){return d.uniq(d.flatten(arguments,!0))};d.intersection=function(g){var a=b.call(arguments,1);return d.filter(d.uniq(g),function(g){return d.every(a,function(a){return 0<=d.indexOf(a,g)})})};d.difference=function(g){var a=h.apply(j,b.call(arguments,1));return d.filter(g,function(g){return!d.contains(a,
-g)})};d.zip=function(){for(var g=d.max(d.pluck(arguments,"length").concat(0)),a=Array(g),b=0;b<g;b++)a[b]=d.pluck(arguments,""+b);return a};d.object=function(g,d){if(null==g)return{};for(var a={},b=0,f=g.length;b<f;b++)d?a[g[b]]=d[b]:a[g[b][0]]=g[b][1];return a};d.indexOf=function(g,a,b){if(null==g)return-1;var f=0,c=g.length;if(b)if("number"==typeof b)f=0>b?Math.max(0,c+b):b;else return f=d.sortedIndex(g,a),g[f]===a?f:-1;if(u&&g.indexOf===u)return g.indexOf(a,b);for(;f<c;f++)if(g[f]===a)return f;
-return-1};d.lastIndexOf=function(g,d,a){if(null==g)return-1;var b=null!=a;if(y&&g.lastIndexOf===y)return b?g.lastIndexOf(d,a):g.lastIndexOf(d);for(a=b?a:g.length;a--;)if(g[a]===d)return a;return-1};d.range=function(g,d,a){1>=arguments.length&&(d=g||0,g=0);a=arguments[2]||1;for(var b=Math.max(Math.ceil((d-g)/a),0),f=0,c=Array(b);f<b;)c[f++]=g,g+=a;return c};var L=function(){};d.bind=function(g,a){var f,c;if(t&&g.bind===t)return t.apply(g,b.call(arguments,1));if(!d.isFunction(g))throw new TypeError;
-f=b.call(arguments,2);return c=function(){if(!(this instanceof c))return g.apply(a,f.concat(b.call(arguments)));L.prototype=g.prototype;var d=new L;L.prototype=null;var n=g.apply(d,f.concat(b.call(arguments)));return Object(n)===n?n:d}};d.partial=function(d){var a=b.call(arguments,1);return function(){return d.apply(this,a.concat(b.call(arguments)))}};d.bindAll=function(a){var f=b.call(arguments,1);if(0===f.length)throw Error("bindAll must be passed function names");v(f,function(b){a[b]=d.bind(a[b],
-a)});return a};d.memoize=function(a,b){var f={};b||(b=d.identity);return function(){var c=b.apply(this,arguments);return d.has(f,c)?f[c]:f[c]=a.apply(this,arguments)}};d.delay=function(a,d){var f=b.call(arguments,2);return setTimeout(function(){return a.apply(null,f)},d)};d.defer=function(a){return d.delay.apply(d,[a,1].concat(b.call(arguments,1)))};d.throttle=function(a,d,b){var f,c,n,h=null,k=0;b||(b={});var t=function(){k=!1===b.leading?0:new Date;h=null;n=a.apply(f,c)};return function(){var e=
-new Date;!k&&!1===b.leading&&(k=e);var m=d-(e-k);f=this;c=arguments;0>=m?(clearTimeout(h),h=null,k=e,n=a.apply(f,c)):!h&&!1!==b.trailing&&(h=setTimeout(t,m));return n}};d.debounce=function(a,d,b){var f,c=null;return function(){var n=this,h=arguments,k=b&&!c;clearTimeout(c);c=setTimeout(function(){c=null;b||(f=a.apply(n,h))},d);k&&(f=a.apply(n,h));return f}};d.once=function(a){var d=!1,b;return function(){if(d)return b;d=!0;b=a.apply(this,arguments);a=null;return b}};d.wrap=function(a,d){return function(){var b=
-[a];c.apply(b,arguments);return d.apply(this,b)}};d.compose=function(){var a=arguments;return function(){for(var d=arguments,b=a.length-1;0<=b;b--)d=[a[b].apply(this,d)];return d[0]}};d.after=function(a,d){return function(){if(1>--a)return d.apply(this,arguments)}};d.keys=n||function(a){if(a!==Object(a))throw new TypeError("Invalid object");var b=[],f;for(f in a)d.has(a,f)&&b.push(f);return b};d.values=function(a){var b=[],f;for(f in a)d.has(a,f)&&b.push(a[f]);return b};d.pairs=function(a){var b=
-[],f;for(f in a)d.has(a,f)&&b.push([f,a[f]]);return b};d.invert=function(a){var b={},f;for(f in a)d.has(a,f)&&(b[a[f]]=f);return b};d.functions=d.methods=function(a){var b=[],f;for(f in a)d.isFunction(a[f])&&b.push(f);return b.sort()};d.extend=function(a){v(b.call(arguments,1),function(d){if(d)for(var b in d)a[b]=d[b]});return a};d.pick=function(a){var d={},f=h.apply(j,b.call(arguments,1));v(f,function(b){b in a&&(d[b]=a[b])});return d};d.omit=function(a){var f={},c=h.apply(j,b.call(arguments,1)),
-n;for(n in a)d.contains(c,n)||(f[n]=a[n]);return f};d.defaults=function(a){v(b.call(arguments,1),function(d){if(d)for(var b in d)void 0===a[b]&&(a[b]=d[b])});return a};d.clone=function(a){return!d.isObject(a)?a:d.isArray(a)?a.slice():d.extend({},a)};d.tap=function(a,d){d(a);return a};var M=function(a,b,f,c){if(a===b)return 0!==a||1/a==1/b;if(null==a||null==b)return a===b;a instanceof d&&(a=a._wrapped);b instanceof d&&(b=b._wrapped);var n=x.call(a);if(n!=x.call(b))return!1;switch(n){case "[object String]":return a==
-String(b);case "[object Number]":return a!=+a?b!=+b:0==a?1/a==1/b:a==+b;case "[object Date]":case "[object Boolean]":return+a==+b;case "[object RegExp]":return a.source==b.source&&a.global==b.global&&a.multiline==b.multiline&&a.ignoreCase==b.ignoreCase}if("object"!=typeof a||"object"!=typeof b)return!1;for(var h=f.length;h--;)if(f[h]==a)return c[h]==b;var h=a.constructor,k=b.constructor;if(h!==k&&(!d.isFunction(h)||!(h instanceof h&&d.isFunction(k)&&k instanceof k)))return!1;f.push(a);c.push(b);h=
-0;k=!0;if("[object Array]"==n){if(h=a.length,k=h==b.length)for(;h--&&(k=M(a[h],b[h],f,c)););}else{for(var t in a)if(d.has(a,t)&&(h++,!(k=d.has(b,t)&&M(a[t],b[t],f,c))))break;if(k){for(t in b)if(d.has(b,t)&&!h--)break;k=!h}}f.pop();c.pop();return k};d.isEqual=function(a,d){return M(a,d,[],[])};d.isEmpty=function(a){if(null==a)return!0;if(d.isArray(a)||d.isString(a))return 0===a.length;for(var b in a)if(d.has(a,b))return!1;return!0};d.isElement=function(a){return!!(a&&1===a.nodeType)};d.isArray=m||
-function(a){return"[object Array]"==x.call(a)};d.isObject=function(a){return a===Object(a)};v("Arguments Function String Number Date RegExp".split(" "),function(a){d["is"+a]=function(d){return x.call(d)=="[object "+a+"]"}});d.isArguments(arguments)||(d.isArguments=function(a){return!(!a||!d.has(a,"callee"))});"function"!==typeof/./&&(d.isFunction=function(a){return"function"===typeof a});d.isFinite=function(a){return isFinite(a)&&!isNaN(parseFloat(a))};d.isNaN=function(a){return d.isNumber(a)&&a!=
-+a};d.isBoolean=function(a){return!0===a||!1===a||"[object Boolean]"==x.call(a)};d.isNull=function(a){return null===a};d.isUndefined=function(a){return void 0===a};d.has=function(d,b){return a.call(d,b)};d.noConflict=function(){p._=l;return this};d.identity=function(a){return a};d.times=function(a,d,b){for(var f=Array(Math.max(0,a)),c=0;c<a;c++)f[c]=d.call(b,c);return f};d.random=function(a,d){null==d&&(d=a,a=0);return a+Math.floor(Math.random()*(d-a+1))};var K={escape:{"&":"&amp;","<":"&lt;",">":"&gt;",
-'"':"&quot;","'":"&#x27;","/":"&#x2F;"}};K.unescape=d.invert(K.escape);var S={escape:RegExp("["+d.keys(K.escape).join("")+"]","g"),unescape:RegExp("("+d.keys(K.unescape).join("|")+")","g")};d.each(["escape","unescape"],function(a){d[a]=function(d){return null==d?"":(""+d).replace(S[a],function(d){return K[a][d]})}});d.result=function(a,b){if(null!=a){var f=a[b];return d.isFunction(f)?f.call(a):f}};d.mixin=function(a){v(d.functions(a),function(b){var f=d[b]=a[b];d.prototype[b]=function(){var a=[this._wrapped];
-c.apply(a,arguments);a=f.apply(d,a);return this._chain?d(a).chain():a}})};var T=0;d.uniqueId=function(a){var d=++T+"";return a?a+d:d};d.templateSettings={evaluate:/<%([\s\S]+?)%>/g,interpolate:/<%=([\s\S]+?)%>/g,escape:/<%-([\s\S]+?)%>/g};var N=/(.)^/,U={"'":"'","\\":"\\","\r":"r","\n":"n","\t":"t","\u2028":"u2028","\u2029":"u2029"},G=/\\|'|\r|\n|\t|\u2028|\u2029/g;d.template=function(a,b,f){var c;f=d.defaults({},f,d.templateSettings);var n=RegExp([(f.escape||N).source,(f.interpolate||N).source,(f.evaluate||
-N).source].join("|")+"|$","g"),h=0,k="__p+='";a.replace(n,function(d,b,f,c,n){k+=a.slice(h,n).replace(G,function(a){return"\\"+U[a]});b&&(k+="'+\n((__t=("+b+"))==null?'':_.escape(__t))+\n'");f&&(k+="'+\n((__t=("+f+"))==null?'':__t)+\n'");c&&(k+="';\n"+c+"\n__p+='");h=n+d.length;return d});k+="';\n";f.variable||(k="with(obj||{}){\n"+k+"}\n");k="var __t,__p='',__j=Array.prototype.join,print=function(){__p+=__j.call(arguments,'');};\n"+k+"return __p;\n";try{c=new Function(f.variable||"obj","_",k)}catch(t){throw t.source=
-k,t;}if(b)return c(b,d);b=function(a){return c.call(this,a,d)};b.source="function("+(f.variable||"obj")+"){\n"+k+"}";return b};d.chain=function(a){return d(a).chain()};d.mixin(d);v("pop push reverse shift sort splice unshift".split(" "),function(a){var b=j[a];d.prototype[a]=function(){var f=this._wrapped;b.apply(f,arguments);("shift"==a||"splice"==a)&&0===f.length&&delete f[0];return this._chain?d(f).chain():f}});v(["concat","join","slice"],function(a){var b=j[a];d.prototype[a]=function(){var a=b.apply(this._wrapped,
-arguments);return this._chain?d(a).chain():a}});d.extend(d.prototype,{chain:function(){this._chain=!0;return this},value:function(){return this._wrapped}})}).call(this);var Backbone=Backbone||{};
-(function(){var p=[].slice,l=function(e,m,c){var b;e=-1;var h=m.length;switch(c.length){case 0:for(;++e<h;)(b=m[e]).callback.call(b.ctx);break;case 1:for(;++e<h;)(b=m[e]).callback.call(b.ctx,c[0]);break;case 2:for(;++e<h;)(b=m[e]).callback.call(b.ctx,c[0],c[1]);break;case 3:for(;++e<h;)(b=m[e]).callback.call(b.ctx,c[0],c[1],c[2]);break;default:for(;++e<h;)(b=m[e]).callback.apply(b.ctx,c)}},e=Backbone.Events={on:function(e,m,c){this._events||(this._events={});(this._events[e]||(this._events[e]=[])).push({callback:m,
-context:c,ctx:c||this});return this},once:function(e,m,c){var b=this,h=_.once(function(){b.off(e,h);m.apply(this,arguments)});h._callback=m;this.on(e,h,c);return this},off:function(e,m,c){var b,h,x,a,k,q,s,f;if(!this._events)return this;if(!e&&!m&&!c)return this._events={},this;a=e?[e]:_.keys(this._events);k=0;for(q=a.length;k<q;k++)if(e=a[k],b=this._events[e]){x=[];if(m||c){s=0;for(f=b.length;s<f;s++)h=b[s],(m&&m!==(h.callback._callback||h.callback)||c&&c!==h.context)&&x.push(h)}this._events[e]=
-x}return this},trigger:function(e){if(!this._events)return this;var m=p.call(arguments,1),c=this._events[e],b=this._events.all;c&&l(this,c,m);b&&l(this,b,arguments);return this},listenTo:function(e,m,c){var b=this._listeners||(this._listeners={}),h=e._listenerId||(e._listenerId=_.uniqueId("l"));b[h]=e;e.on(m,c||this,this);return this},stopListening:function(e,m,c){var b=this._listeners;if(b){if(e)e.off(m,c,this),!m&&!c&&delete b[e._listenerId];else{for(var h in b)b[h].off(null,null,this);this._listeners=
-{}}return this}}};e.bind=e.on;e.unbind=e.off;"undefined"!==typeof exports&&("undefined"!==typeof module&&module.exports&&(exports=module.exports=e),exports.Backbone=exports.Backbone||Backbone)})();(function(){function p(c){var b=(new Date).getTime(),h=Math.max(0,16-(b-e)),m=l.setTimeout(function(){c(b+h)},h);e=b+h;return m}var l=this,e=0,j=["ms","moz","webkit","o"];if("undefined"!==typeof exports)"undefined"!==typeof module&&module.exports&&(exports=module.exports=p),exports.requestAnimationFrame=p;else{for(var m=0;m<j.length&&!l.requestAnimationFrame;++m)l.requestAnimationFrame=l[j[m]+"RequestAnimationFrame"],l.cancelAnimationFrame=l[j[m]+"CancelAnimationFrame"]||l[j[m]+"CancelRequestAnimationFrame"];
-l.requestAnimationFrame||(l.requestAnimationFrame=p);l.cancelAnimationFrame||(l.cancelAnimationFrame=function(c){clearTimeout(c)})}})();(function(){function p(){var a=document.body.getBoundingClientRect(),b=this.width=a.width,a=this.height=a.height;this.renderer.setSize(b,a);this.trigger(f.Events.resize,b,a)}var l=this,e=l.Two||{},j=Math.sin,m=Math.cos,c=Math.atan2,b=Math.sqrt,h=Math.abs,x=Math.PI,a=2*x,k=x/2,q=Math.pow,s={hasEventListeners:_.isFunction(l.addEventListener),bind:function(a,b,d,f){this.hasEventListeners?a.addEventListener(b,d,!!f):a.attachEvent("on"+b,d);return this},unbind:function(a,b,d,f){this.hasEventListeners?
-a.removeEventListeners(b,d,!!f):a.detachEvent("on"+b,d);return this}},f=l.Two=function(a){a=_.defaults(a||{},{fullscreen:!1,width:640,height:480,type:f.Types.svg,autostart:!1});this.type=a.type;this.renderer=new f[this.type](this);f.Utils.setPlaying.call(this,a.autostart);this.frameCount=0;a.fullscreen?(a=_.bind(p,this),_.extend(document.body.style,{overflow:"hidden",margin:0,padding:0,top:0,left:0,right:0,bottom:0,position:"fixed"}),_.extend(this.renderer.domElement.style,{display:"block",top:0,
-left:0,right:0,bottom:0,position:"fixed"}),s.bind(l,"resize",a),a()):(this.renderer.setSize(a.width,a.height),this.width=a.width,this.height=a.height);this.scene=new f.Group;this.renderer.add(this.scene);f.Instances.push(this)};_.extend(f,{Array:l.Float32Array||Array,Types:{webgl:"WebGLRenderer",svg:"SVGRenderer",canvas:"CanvasRenderer"},Version:"v0.2.1",Properties:{hierarchy:"hierarchy",demotion:"demotion"},Events:{play:"play",pause:"pause",update:"update",render:"render",resize:"resize",change:"change",
-remove:"remove",insert:"insert"},Resolution:8,Instances:[],noConflict:function(){l.Two=e;return this},Utils:{Curve:{CollinearityEpsilon:q(10,-30),RecursionLimit:16,CuspLimit:0,Tolerance:{distance:0.25,angle:0,epsilon:0.01}},setPlaying:function(a){_.defer(_.bind(function(){this.playing=!!a},this))},getComputedMatrix:function(a){for(var b=new f.Matrix;a&&a._matrix;){var d=a._matrix.elements;b.multiply(d[0],d[1],d[2],d[3],d[4],d[5],d[6],d[7],d[8],d[9]);a=a.parent}return b},applySvgAttributes:function(a,
-b){b.cap="butt";b.join="bevel";_.each(a.attributes,function(a){switch(a.nodeName){case "visibility":b.visible=!!a.nodeValue;break;case "stroke-linecap":b.cap=a.nodeValue;break;case "stroke-linejoin":b.join=a.nodeValue;break;case "stroke-miterlimit":b.miter=a.nodeValue;break;case "stroke-width":b.linewidth=parseFloat(a.nodeValue);break;case "stroke-opacity":case "fill-opacity":b.opacity=a.nodeValue;break;case "fill":b.fill=a.nodeValue;break;case "stroke":b.stroke=a.nodeValue}});return b},read:{svg:function(){return f.Utils.read.g.apply(this,
-arguments)},g:function(a){var b=new f.Group;this.add(b);_.each(a.childNodes,function(a){if(a.localName){var c=a.localName.toLowerCase();c in f.Utils.read&&(a=f.Utils.read[c].call(this,a),b.add(a))}},this);return f.Utils.applySvgAttributes(a,b)},polygon:function(a,b){var d=a.points;if(d){var c=_.map(_.range(d.numberOfItems),function(a){a=d.getItem(a);return new f.Vector(a.x,a.y)}),c=(new f.Polygon(c,!b)).noStroke();return f.Utils.applySvgAttributes(a,c)}},polyline:function(a){return f.Utils.read.polygon(a,
-!0)},path:function(a){var b=a.getAttribute("d"),b=_.flatten(_.map(_.compact(b.split(/M/g)),function(a){a=_.map(_.compact(a.split(/m/g)),function(a,b){return 0>=b?a:"m"+a});a[0]="M"+a[0];return a})),d=new f.Vector,c=new f.Vector,b=_.map(b,function(b){var h,k=!1,e=!1;b=_.flatten(_.map(b.match(/[a-z][^a-z]*/ig),function(a){var b,n,m=a[0],t=m.toLowerCase();h=a.slice(1).trim().split(/[\s,]+|(?=[+\-])/);k=m===t;var q,j,s;switch(t){case "z":e=!0;break;case "m":case "l":n=parseFloat(h[0]);b=parseFloat(h[1]);
-b=new f.Vector(n,b);k&&b.addSelf(d);d.copy(b);break;case "h":case "v":n="h"===t?"x":"y";a="x"===n?"y":"x";b=new f.Vector;b[n]=parseFloat(h[0]);b[a]=d[a];k&&(b[n]+=d[n]);d.copy(b);break;case "s":case "c":b=d.x;a=d.y;"c"===t?(m=parseFloat(h[0]),n=parseFloat(h[1]),t=parseFloat(h[2]),q=parseFloat(h[3]),j=parseFloat(h[4]),s=parseFloat(h[5])):(q=f.Utils.getReflection(d,c,k),m=q.x,n=q.y,t=parseFloat(h[0]),q=parseFloat(h[1]),j=parseFloat(h[2]),s=parseFloat(h[3]));k&&(m+=b,n+=a,t+=b,q+=a,j+=b,s+=a);b=f.Utils.subdivide(b,
-a,m,n,t,q,j,s);d.set(j,s);c.set(t,q);(n=b[b.length-1])&&!n.equals(d)&&b.push(d.clone());break;case "t":case "q":b=d.x;a=d.y;c.isZero()?(m=b,n=a):(m=c.x,a=c.y);"q"===t?(t=parseFloat(h[0]),q=parseFloat(h[1]),j=parseFloat(h[1]),s=parseFloat(h[2])):(q=f.Utils.getReflection(d,c,k),t=q.x,q=q.y,j=parseFloat(h[0]),s=parseFloat(h[1]));k&&(m+=b,n+=a,t+=b,q+=a,j+=b,s+=a);b=f.Utils.subdivide(b,a,m,n,t,q,j,s);d.set(j,s);c.set(t,q);n=b[b.length-1];n.equals(d)||b.push(d.clone());break;case "a":throw new f.Utils.Error("not yet able to interpret Elliptical Arcs.");
-}return b}));if(!(1>=b.length))return b=_.compact(b),b=(new f.Polygon(b,e)).noStroke(),f.Utils.applySvgAttributes(a,b)});return _.compact(b)},circle:function(b){var c=parseFloat(b.getAttribute("cx")),d=parseFloat(b.getAttribute("cy")),h=parseFloat(b.getAttribute("r")),k=f.Resolution,e=_.map(_.range(k),function(b){var d=b/k*a;b=h*m(d);d=h*j(d);return new f.Vector(b,d)},this),e=(new f.Polygon(e,!0,!0)).noStroke();e.translation.set(c,d);return f.Utils.applySvgAttributes(b,e)},ellipse:function(b){var c=
-parseFloat(b.getAttribute("cx")),d=parseFloat(b.getAttribute("cy")),h=parseFloat(b.getAttribute("rx")),k=parseFloat(b.getAttribute("ry")),e=f.Resolution,q=_.map(_.range(e),function(b){var d=b/e*a;b=h*m(d);d=k*j(d);return new f.Vector(b,d)},this),q=(new f.Polygon(q,!0,!0)).noStroke();q.translation.set(c,d);return f.Utils.applySvgAttributes(b,q)},rect:function(a){var b=parseFloat(a.getAttribute("x")),d=parseFloat(a.getAttribute("y")),c=parseFloat(a.getAttribute("width")),h=parseFloat(a.getAttribute("height")),
-c=c/2,h=h/2,k=[new f.Vector(c,h),new f.Vector(-c,h),new f.Vector(-c,-h),new f.Vector(c,-h)],k=(new f.Polygon(k,!0)).noStroke();k.translation.set(b+c,d+h);return f.Utils.applySvgAttributes(a,k)},line:function(a){var b=parseFloat(a.getAttribute("x1")),d=parseFloat(a.getAttribute("y1")),c=parseFloat(a.getAttribute("x2")),h=parseFloat(a.getAttribute("y2")),c=(c-b)/2,h=(h-d)/2,k=[new f.Vector(-c,-h),new f.Vector(c,h)],k=(new f.Polygon(k)).noFill();k.translation.set(b+c,d+h);return f.Utils.applySvgAttributes(a,
-k)}},subdivide:function(b,k,d,e,m,q,j,s,l){var r=f.Utils.Curve.CollinearityEpsilon,B=f.Utils.Curve.RecursionLimit,u=f.Utils.Curve.CuspLimit,w=f.Utils.Curve.Tolerance,p;l=l||0;if(l>B)return[];var B=(b+d)/2,y=(k+e)/2,G=(d+m)/2,g=(e+q)/2,O=(m+j)/2,P=(q+s)/2,Q=(B+G)/2,R=(y+g)/2,G=(G+O)/2,g=(g+P)/2,E=(Q+G)/2,F=(R+g)/2;p=j-b;var A=s-k,H=h((d-j)*A-(e-s)*p),I=h((m-j)*A-(q-s)*p);if(0<l){if(H>r&&I>r&&(H+I)*(H+I)<=w.distance*(p*p+A*A)){if(w.angle<w.epsilon)return[new f.Vector(E,F)];p=c(q-e,m-d);r=h(p-c(e-k,
-d-b));p=h(c(s-q,j-m)-p);r>=x&&(r=a-r);p>=x&&(p=a-p);if(r+p<w.angle)return[new f.Vector(E,F)];if(0!==u){if(r>u)return[new f.Vector(d,e)];if(p>u)return[new f.Vector(m,q)]}}}else if(H>r)if(H*H<=w.distance*(p*p+A*A)){if(w.angle<w.epsilon)return[new f.Vector(E,F)];r=h(c(q-e,m-d)-c(e-k,d-b));r>=x&&(r=a-r);if(r<w.angle)return[new f.Vector(d,e),new f.Vector(m,q)];if(0!==u&&r>u)return[new f.Vector(d,e)]}else if(I>r){if(I*I<=w.distance*(p*p+A*A)){if(w.angle<w.epsilon)return[new f.Vector(E,F)];r=h(c(s-q,j-m)-
-c(q-e,m-d));r>=x&&(r=a-r);if(r<w.angle)return[new f.Vector(d,e),new f.Vector(m,q)];if(0!==u&&r>u)return[new f.Vector2(m,q)]}}else if(p=E-(b+j)/2,A=F-(k+s)/2,p*p+A*A<=w.distance)return[new f.Vector(E,F)];return f.Utils.subdivide(b,k,B,y,Q,R,E,F,l+1).concat(f.Utils.subdivide(E,F,G,g,O,P,j,s,l+1))},getCurveFromPoints:function(a,b){for(var d=[],f=a.length,c=f-1,h=0;h<f;h++){var k=a[h],e={x:k.x,y:k.y};d.push(e);var k=b?y(h-1,f):Math.max(h-1,0),m=b?y(h+1,f):Math.min(h+1,c);u(a[k],e,a[m]);!e.u.x&&!e.u.y&&
-(e.u.x=e.x,e.u.y=e.y);!e.v.x&&!e.v.y&&(e.v.x=e.x,e.v.y=e.y)}return d},getControlPoints:function(a,b,d){var f=w(a,b),c=w(d,b);a=r(a,b);d=r(d,b);var h=(f+c)/2;if(1E-4>a||1E-4>d)return b.u={x:b.x,y:b.y},b.v={x:b.x,y:b.y},b;a*=0.33;d*=0.33;h=c<f?h+k:h-k;f={x:b.x+m(h)*a,y:b.y+j(h)*a};h-=x;c={x:b.x+m(h)*d,y:b.y+j(h)*d};b.u=f;b.v=c;return b},getReflection:function(a,b,d){var c=a.distanceTo(b);if(1E-4>=c)return d?new f.Vector:a.clone();b=w(a,b);return new f.Vector(c*Math.cos(b)+(d?0:a.x),c*Math.sin(b)+(d?
-0:a.y))},angleBetween:function(a,b){return c(a.y-b.y,a.x-b.x)},distanceBetweenSquared:function(a,b){var d=a.x-b.x,f=a.y-b.y;return d*d+f*f},distanceBetween:function(a,f){return b(B(a,f))},mod:function(a,b){for(;0>a;)a+=b;return a%b},Collection:function(){Array.call(this);1<arguments.length?Array.prototype.push.apply(this,arguments):arguments[0]&&Array.isArray(arguments[0])&&Array.prototype.push.apply(this,arguments[0])},Error:function(a){this.name="two.js";this.message=a}}});f.Utils.Error.prototype=
-Error();f.Utils.Error.prototype.constructor=f.Utils.Error;f.Utils.Collection.prototype=[];f.Utils.Collection.constructor=f.Utils.Collection;_.extend(f.Utils.Collection.prototype,Backbone.Events,{pop:function(){var a=Array.prototype.pop.apply(this,arguments);this.trigger(f.Events.remove,[a]);return a},shift:function(){var a=Array.prototype.shift.apply(this,arguments);this.trigger(f.Events.remove,[a]);return a},push:function(){var a=Array.prototype.push.apply(this,arguments);this.trigger(f.Events.insert,
-arguments);return a},unshift:function(){var a=Array.prototype.unshift.apply(this,arguments);this.trigger(f.Events.insert,arguments);return a},splice:function(){var a=Array.prototype.splice.apply(this,arguments),b;this.trigger(f.Events.remove,a);2<arguments.length&&(b=this.slice(arguments[0],arguments.length-2),this.trigger(f.Events.insert,b));return a}});var r=f.Utils.distanceBetween,B=f.Utils.distanceBetweenSquared,w=f.Utils.angleBetween,u=f.Utils.getControlPoints,y=f.Utils.mod;_.extend(f.prototype,
-Backbone.Events,{appendTo:function(a){a.appendChild(this.renderer.domElement);return this},play:function(){f.Utils.setPlaying.call(this,!0);return this.trigger(f.Events.play)},pause:function(){this.playing=!1;return this.trigger(f.Events.pause)},update:function(){_.defer(_.bind(function(){var a=!!this._lastFrame,b=(l.performance&&l.performance.now?l.performance:Date).now();this.frameCount++;a&&(this.timeDelta=parseFloat((b-this._lastFrame).toFixed(3)));this._lastFrame=b;var a=this.width,b=this.height,
-d=this.renderer;(a!==d.width||b!==d.height)&&d.setSize(a,b);this.trigger(f.Events.update,this.frameCount,this.timeDelta);this.render()},this));return this},render:function(){this.renderer.render();return this.trigger(f.Events.render,this.frameCount)},add:function(a){var b=a;_.isArray(a)||(b=_.toArray(arguments));this.scene.add(b);return this},remove:function(a){var b=a;_.isArray(a)||(b=_.toArray(arguments));this.scene.remove(b);return this},clear:function(){_.each(this.scene.children,function(a){a.remove()});
-return this},makeLine:function(a,b,d,c){d=(d-a)/2;c=(c-b)/2;var h=[new f.Vector(-d,-c),new f.Vector(d,c)],h=(new f.Polygon(h)).noFill();h.translation.set(a+d,b+c);this.scene.add(h);return h},makeRectangle:function(a,b,d,c){d/=2;c/=2;c=[new f.Vector(d,c),new f.Vector(-d,c),new f.Vector(-d,-c),new f.Vector(d,-c)];c=new f.Polygon(c,!0);c.translation.set(a,b);this.scene.add(c);return c},makeCircle:function(a,b,d){return this.makeEllipse(a,b,d,d)},makeEllipse:function(b,c,d,h){var k=f.Resolution,e=_.map(_.range(k),
-function(b){var c=b/k*a;b=d*m(c);c=h*j(c);return new f.Vector(b,c)},this),e=new f.Polygon(e,!0,!0);e.translation.set(b,c);this.scene.add(e);return e},makeCurve:function(a){var b=arguments.length,d=a;if(!_.isArray(a))for(var d=[],c=0;c<b;c+=2){var h=arguments[c];if(!_.isNumber(h))break;d.push(new f.Vector(h,arguments[c+1]))}var b=arguments[b-1],d=new f.Polygon(d,!(_.isBoolean(b)&&b),!0),b=d.getBoundingClientRect(),k=b.left+b.width/2,e=b.top+b.height/2;_.each(d.vertices,function(a){a.x-=k;a.y-=e});
-d.translation.set(k,e);this.scene.add(d);return d},makePolygon:function(a){var b=arguments.length,d=a;if(!_.isArray(a))for(var d=[],c=0;c<b;c+=2){var h=arguments[c];if(!_.isNumber(h))break;d.push(new f.Vector(h,arguments[c+1]))}b=arguments[b-1];d=new f.Polygon(d,!(_.isBoolean(b)&&b));b=d.getBoundingClientRect();d.center().translation.set(b.left+b.width/2,b.top+b.height/2);this.scene.add(d);return d},makeGroup:function(a){var b=a;_.isArray(a)||(b=_.toArray(arguments));var d=new f.Group;this.scene.add(d);
-d.add(b);return d},interpret:function(a){var b=a.tagName.toLowerCase();if(!(b in f.Utils.read))return null;a=f.Utils.read[b].call(this,a);this.add(a);return a}});(function(){_.each(f.Instances,function(a){a.playing&&a.update()});requestAnimationFrame(arguments.callee)})();"function"===typeof define&&define.amd?define(function(){return f}):"undefined"!=typeof module&&module.exports&&(module.exports=f)})();(function(){var p=Two.Vector=function(e,j){this.x=e||0;this.y=j||0};_.extend(p,{MakeGetterSetter:function(e,j,m){var c="_"+j;Object.defineProperty(e,j,{get:function(){return this[c]},set:function(b){this[c]=b;this.trigger(Two.Events.change,j)}});e[c]=m}});_.extend(p.prototype,Backbone.Events,{set:function(e,j){this.x=e;this.y=j;return this},copy:function(e){this.x=e.x;this.y=e.y;return this},clear:function(){this.y=this.x=0;return this},clone:function(){return new p(this.x,this.y)},add:function(e,
-j){this.x=e.x+j.x;this.y=e.y+j.y;return this},addSelf:function(e){this.x+=e.x;this.y+=e.y;return this},sub:function(e,j){this.x=e.x-j.x;this.y=e.y-j.y;return this},subSelf:function(e){this.x-=e.x;this.y-=e.y;return this},multiplySelf:function(e){this.x*=e.x;this.y*=e.y;return this},multiplyScalar:function(e){this.x*=e;this.y*=e;return this},divideScalar:function(e){e?(this.x/=e,this.y/=e):this.set(0,0);return this},negate:function(){return this.multiplyScalar(-1)},dot:function(e){return this.x*e.x+
-this.y*e.y},lengthSquared:function(){return this.x*this.x+this.y*this.y},length:function(){return Math.sqrt(this.lengthSquared())},normalize:function(){return this.divideScalar(this.length())},distanceTo:function(e){return Math.sqrt(this.distanceToSquared(e))},distanceToSquared:function(e){var j=this.x-e.x;e=this.y-e.y;return j*j+e*e},setLength:function(e){return this.normalize().multiplyScalar(e)},equals:function(e){return 1E-4>this.distanceTo(e)},lerp:function(e,j){return this.set((e.x-this.x)*
-j+this.x,(e.y-this.y)*j+this.y)},isZero:function(){return 1E-4>this.length()}});var l={set:function(e,j){this._x=e;this._y=j;return this.trigger(Two.Events.change)},copy:function(e){this._x=e.x;this._y=e.y;return this.trigger(Two.Events.change)},clear:function(){this._y=this._x=0;return this.trigger(Two.Events.change)},clone:function(){return new p(this._x,this._y)},add:function(e,j){this._x=e.x+j.x;this._y=e.y+j.y;return this.trigger(Two.Events.change)},addSelf:function(e){this._x+=e.x;this._y+=
-e.y;return this.trigger(Two.Events.change)},sub:function(e,j){this._x=e.x-j.x;this._y=e.y-j.y;return this.trigger(Two.Events.change)},subSelf:function(e){this._x-=e.x;this._y-=e.y;return this.trigger(Two.Events.change)},multiplySelf:function(e){this._x*=e.x;this._y*=e.y;return this.trigger(Two.Events.change)},multiplyScalar:function(e){this._x*=e;this._y*=e;return this.trigger(Two.Events.change)},divideScalar:function(e){return e?(this._x/=e,this._y/=e,this.trigger(Two.Events.change)):this.clear()},
-negate:function(){return this.multiplyScalar(-1)},dot:function(e){return this._x*e.x+this._y*e.y},lengthSquared:function(){return this._x*this._x+this._y*this._y},length:function(){return Math.sqrt(this.lengthSquared())},normalize:function(){return this.divideScalar(this.length())},distanceTo:function(e){return Math.sqrt(this.distanceToSquared(e))},distanceToSquared:function(e){var j=this._x-e.x;e=this._y-e.y;return j*j+e*e},setLength:function(e){return this.normalize().multiplyScalar(e)},equals:function(e){return 1E-4>
-this.distanceTo(e)},lerp:function(e,j){return this.set((e.x-this._x)*j+this._x,(e.y-this._y)*j+this._y)},isZero:function(){return 1E-4>this.length()}};Two.Vector.prototype.bind=Two.Vector.prototype.on=function(){this._bound||(Two.Vector.MakeGetterSetter(this,"x",this.x),Two.Vector.MakeGetterSetter(this,"y",this.y),_.extend(this,l),this._bound=!0);Backbone.Events.bind.apply(this,arguments);return this}})();(function(){_.range(6);var p=Math.cos,l=Math.sin,e=Math.tan,j=Two.Matrix=function(e,c,b,h,j,a){this.elements=new Two.Array(9);var k=e;_.isArray(k)||(k=_.toArray(arguments));this.identity().set(k)};_.extend(j,{Identity:[1,0,0,0,1,0,0,0,1],Multiply:function(e,c){if(3>=c.length){var b=c[0]||0,h=c[1]||0,j=c[2]||0;return{x:e[0]*b+e[1]*h+e[2]*j,y:e[3]*b+e[4]*h+e[5]*j,z:e[6]*b+e[7]*h+e[8]*j}}var b=e[0],h=e[1],j=e[2],a=e[3],k=e[4],q=e[5],s=e[6],f=e[7],r=e[8],l=c[0],p=c[1],u=c[2],y=c[3],n=c[4],t=c[5],d=c[6],
-v=c[7],z=c[8];return[b*l+h*y+j*d,b*p+h*n+j*v,b*u+h*t+j*z,a*l+k*y+q*d,a*p+k*n+q*v,a*u+k*t+q*z,s*l+f*y+r*d,s*p+f*n+r*v,s*u+f*t+r*z]}});_.extend(j.prototype,Backbone.Events,{set:function(e,c,b,h,j,a){var k=e;_.isArray(k)||(k=_.toArray(arguments));_.each(k,function(a,b){_.isNumber(a)&&(this.elements[b]=a)},this);return this.trigger(Two.Events.change)},identity:function(){this.set(j.Identity);return this},multiply:function(e,c,b,h,j,a,k,q,s){var f=arguments,r=f.length;if(1>=r)return _.each(this.elements,
-function(a,b){this.elements[b]=a*e},this),this.trigger(Two.Events.change);if(3>=r)return e=e||0,c=c||0,b=b||0,j=this.elements,{x:j[0]*e+j[1]*c+j[2]*b,y:j[3]*e+j[4]*c+j[5]*b,z:j[6]*e+j[7]*c+j[8]*b};r=this.elements;A0=r[0];A1=r[1];A2=r[2];A3=r[3];A4=r[4];A5=r[5];A6=r[6];A7=r[7];A8=r[8];B0=f[0];B1=f[1];B2=f[2];B3=f[3];B4=f[4];B5=f[5];B6=f[6];B7=f[7];B8=f[8];this.elements[0]=A0*B0+A1*B3+A2*B6;this.elements[1]=A0*B1+A1*B4+A2*B7;this.elements[2]=A0*B2+A1*B5+A2*B8;this.elements[3]=A3*B0+A4*B3+A5*B6;this.elements[4]=
-A3*B1+A4*B4+A5*B7;this.elements[5]=A3*B2+A4*B5+A5*B8;this.elements[6]=A6*B0+A7*B3+A8*B6;this.elements[7]=A6*B1+A7*B4+A8*B7;this.elements[8]=A6*B2+A7*B5+A8*B8;return this.trigger(Two.Events.change)},inverse:function(e){var c=this.elements;e=e||new Two.Matrix;var b=c[0],h=c[1],j=c[2],a=c[3],k=c[4],q=c[5],s=c[6],f=c[7],c=c[8],r=c*k-q*f,l=-c*a+q*s,p=f*a-k*s,u=b*r+h*l+j*p;if(!u)return null;u=1/u;e.elements[0]=r*u;e.elements[1]=(-c*h+j*f)*u;e.elements[2]=(q*h-j*k)*u;e.elements[3]=l*u;e.elements[4]=(c*b-
-j*s)*u;e.elements[5]=(-q*b+j*a)*u;e.elements[6]=p*u;e.elements[7]=(-f*b+h*s)*u;e.elements[8]=(k*b-h*a)*u;return e},scale:function(e,c){1>=arguments.length&&(c=e);return this.multiply(e,0,0,0,c,0,0,0,1)},rotate:function(e){var c=p(e);e=l(e);return this.multiply(c,-e,0,e,c,0,0,0,1)},translate:function(e,c){return this.multiply(1,0,e,0,1,c,0,0,1)},skewX:function(j){j=e(j);return this.multiply(1,j,0,0,1,0,0,0,1)},skewY:function(j){j=e(j);return this.multiply(1,0,0,j,1,0,0,0,1)},toString:function(){return this.toArray().join(" ")},
-toArray:function(e){var c=this.elements,b=parseFloat(c[0].toFixed(3)),h=parseFloat(c[1].toFixed(3)),j=parseFloat(c[2].toFixed(3)),a=parseFloat(c[3].toFixed(3)),k=parseFloat(c[4].toFixed(3)),q=parseFloat(c[5].toFixed(3));if(e){e=parseFloat(c[6].toFixed(3));var s=parseFloat(c[7].toFixed(3)),c=parseFloat(c[8].toFixed(3));return[b,a,e,h,k,s,j,q,c]}return[b,a,h,k,j,q]},clone:function(){return new Two.Matrix(this.elements[0],this.elements[1],this.elements[2],this.elements[3],this.elements[4],this.elements[5],
-this.elements[6],this.elements[7],this.elements[8])}})})();(function(){function p(c){var b={},e=c.id,l=c.translation,a=c.rotation,k=c.scale,q=c.stroke,s=c.linewidth,f=c.fill,r=c.opacity,p=c.visible,w=c.cap,u=c.join,y=c.miter,n=c.curved,t=c.closed,d=c.vertices;e&&(b.id=m.Identifier+e);l&&(_.isNumber(k)&&_.isNumber(a))&&(b.transform="matrix("+c._matrix.toString()+")");q&&(b.stroke=q);f&&(b.fill=f);r&&(b["stroke-opacity"]=b["fill-opacity"]=r);b.visibility=p?"visible":"hidden";w&&(b["stroke-linecap"]=w);u&&(b["stroke-linejoin"]=u);y&&(b["stroke-miterlimit"]=
-y);s&&(b["stroke-width"]=s);d&&(b.d=j.toString(d,t,n));return b}var l=Two.Utils.getCurveFromPoints,e=Two.Utils.mod,j={version:1.1,ns:"http://www.w3.org/2000/svg",xlink:"http://www.w3.org/1999/xlink",createElement:function(c,b){var e=document.createElementNS(this.ns,c);"svg"===c&&(b=_.defaults(b||{},{version:this.version}));_.isObject(b)&&this.setAttributes(e,b);return e},setAttributes:function(c,b){_.each(b,function(b,c){this.setAttribute(c,b)},c);return this},removeAttributes:function(c,b){_.each(b,
-function(b){this.removeAttribute(b)},c);return this},toString:function(c,b,h){var j=c.length,a=j-1;if(!h)return _.map(c,function(c,e){var f;f=(0>=e?"M":"L")+(" "+c.x.toFixed(3)+" "+c.y.toFixed(3));e>=a&&b&&(f+=" Z");return f}).join(" ");var k=l(c,b);return _.map(k,function(c,h){var f,m=b?e(h-1,j):Math.max(h-1,0),l=b?e(h+1,j):Math.min(h+1,a);f=k[m];var l=k[l],m=f.v.x.toFixed(3),p=f.v.y.toFixed(3),u=c.u.x.toFixed(3),y=c.u.y.toFixed(3),n=c.x.toFixed(3),t=c.y.toFixed(3);f=0>=h?"M "+n+" "+t:"C "+m+" "+
-p+" "+u+" "+y+" "+n+" "+t;h>=a&&b&&(m=c.v.x.toFixed(3),p=c.v.y.toFixed(3),u=l.u.x.toFixed(3),y=l.u.y.toFixed(3),n=l.x.toFixed(3),t=l.y.toFixed(3),f=f+(" C "+m+" "+p+" "+u+" "+y+" "+n+" "+t)+" Z");return f}).join(" ")}},m=Two[Two.Types.svg]=function(){this.count=0;this.domElement=j.createElement("svg");this.elements=[];this.domElement.style.visibility="hidden";this.unveil=_.once(_.bind(function(){this.domElement.style.visibility="visible"},this))};_.extend(m,{Identifier:"two-",Utils:j});_.extend(m.prototype,
-Backbone.Events,{setSize:function(c,b){this.width=c;this.height=b;j.setAttributes(this.domElement,{width:c,height:b});return this},add:function(c){var b=c,e=this.elements,m=this.domElement;_.isArray(c)||(b=_.map(arguments,function(a){return a}));_.each(b,function(a){var b;b=a instanceof Two.Group;if(_.isUndefined(a.id)){var c=this.count;this.count++;a.id=c}b?(b="g",_.isUndefined(a.parent)&&(a.parent=this,a.unbind(Two.Events.change).bind(Two.Events.change,_.bind(this.update,this))),a=p(a),delete a.stroke,
-delete a.fill,delete a["fill-opacity"],delete a["stroke-opacity"],delete a["stroke-linecap"],delete a["stroke-linejoin"],delete a["stroke-miterlimit"],delete a["stroke-width"]):(b="path",a=p(a));a=j.createElement(b,a);m.appendChild(a);e.push(a)},this);return this},update:function(c,b,e,m,a){var k=this.elements,q=k[c];switch(b){case Two.Properties.hierarchy:_.each(e,function(a){q.appendChild(k[a])});break;case Two.Properties.demotion:_.each(e,function(a){q.removeChild(k[a])});break;default:a:{c=b;
-switch(c){case "matrix":c="transform";e="matrix("+e.toString()+")";break;case "visible":c="visibility";e=e?"visible":"hidden";break;case "cap":c="stroke-linecap";break;case "join":c="stroke-linejoin";break;case "miter":c="stroke-miterlimit";break;case "linewidth":c="stroke-width";break;case "vertices":c="d";e=j.toString(e,m,a);break;case "opacity":j.setAttributes(q,{"stroke-opacity":e,"fill-opacity":e});break a}q.setAttribute(c,e)}}return this},render:function(){this.unveil();return this}})})();(function(){var p=Two.Utils.getCurveFromPoints,l=Two.Utils.mod,e=function(b){_.each(b,function(b,c){this[c]=b},this);this.children=[]};_.extend(e.prototype,{appendChild:function(b){var c=b.parent;_.isUndefined(c)||c.removeChild(b);this.children.push(b);b.parent=this;return this},removeChild:function(b){b=_.indexOf(this.children,b);return 0>b?this:this.children.splice(b,1)[0]},render:function(b){var c=this.matrix;b.save();b.transform(c[0],c[1],c[2],c[3],c[4],c[5]);_.each(this.children,function(c){c.render(b)});
-b.restore();return this}});var j=function(b){_.each(b,function(b,c){this[c]=b},this)};_.extend(j.prototype,{render:function(b){var c=this.matrix,e=this.stroke,a=this.linewidth,k=this.fill,j=this.opacity,m=this.cap,f=this.join,r=this.miter,p=this.curved,w=this.closed,u=this.commands,y=u.length,n=y-1;if(!this.visible)return this;b.save();c&&b.transform(c[0],c[1],c[2],c[3],c[4],c[5]);k&&(b.fillStyle=k);e&&(b.strokeStyle=e);a&&(b.lineWidth=a);r&&(b.miterLimit=r);f&&(b.lineJoin=f);m&&(b.lineCap=m);_.isNumber(j)&&
-(b.globalAlpha=j);b.beginPath();_.each(u,function(a,d){var f=a.x.toFixed(3),c=a.y.toFixed(3);if(p){var e=w?l(d-1,y):Math.max(d-1,0),h=w?l(d+1,y):Math.min(d+1,n),k=u[e],h=u[h],e=k.v.x.toFixed(3),k=k.v.y.toFixed(3),j=a.u.x.toFixed(3),q=a.u.y.toFixed(3);0>=d?b.moveTo(f,c):(b.bezierCurveTo(e,k,j,q,f,c),d>=n&&w&&(e=a.v.x.toFixed(3),k=a.v.y.toFixed(3),j=h.u.x.toFixed(3),q=h.u.y.toFixed(3),f=h.x.toFixed(3),c=h.y.toFixed(3),b.bezierCurveTo(e,k,j,q,f,c)))}else 0>=d?b.moveTo(f,c):b.lineTo(f,c)});w&&!p&&b.closePath();
-b.fill();b.stroke();b.restore()}});var m={devicePixelRatio:this.devicePixelRatio||1,getBackingStoreRatio:function(b){return b.webkitBackingStorePixelRatio||b.mozBackingStorePixelRatio||b.msBackingStorePixelRatio||b.oBackingStorePixelRatio||b.backingStorePixelRatio||1},getRatio:function(b){return this.devicePixelRatio/this.getBackingStoreRatio(b)},toArray:function(b,c,e){return!c?_.map(b,function(a){return{x:a.x,y:a.y}}):p(b,e)}},c=Two[Two.Types.canvas]=function(){this.count=0;this.domElement=document.createElement("canvas");
-this.ctx=this.domElement.getContext("2d");this.overdraw=!1;this.elements=[];this.stage=null};_.extend(c,{Group:e,Element:j,getStyles:function(b){var c={},e=b.id,a=b._matrix,k=b.stroke,j=b.linewidth,s=b.fill,f=b.opacity,l=b.visible,p=b.cap,w=b.join,u=b.miter,y=b.curved,n=b.closed;b=b.vertices;e&&(c.id=e);_.isObject(a)&&(c.matrix=a.toArray());k&&(c.stroke=k);s&&(c.fill=s);_.isNumber(f)&&(c.opacity=f);p&&(c.cap=p);w&&(c.join=w);u&&(c.miter=u);j&&(c.linewidth=j);b&&(c.commands=m.toArray(b,y,n));c.visible=
-!!l;c.curved=!!y;c.closed=!!n;return c},setStyles:function(b,c,e,a,k){switch(c){case "matrix":c="matrix";e=e.toArray();break;case "vertices":c="commands",b.curved=k,b.closed=a,e=m.toArray(e,b.curved,b.closed)}b[c]=e},Utils:m});_.extend(c.prototype,Backbone.Events,{setSize:function(b,c,e){this.width=b;this.height=c;this.ratio=_.isUndefined(e)?m.getRatio(this.ctx):e;this.domElement.width=b*this.ratio;this.domElement.height=c*this.ratio;_.extend(this.domElement.style,{width:b+"px",height:c+"px"});return this},
-add:function(b){constructor=Object.getPrototypeOf(this).constructor;var c=b,e=this.elements,a=constructor.Group,k=constructor.Element,j=constructor.getStyles;_.isArray(b)||(c=_.map(arguments,function(a){return a}));_.each(c,function(b){var c;c=b instanceof Two.Group;var h=_.isNull(this.stage);if(_.isUndefined(b.id)){var m=this.count;this.count++;b.id=m}c?(c=j.call(this,b),delete c.stroke,delete c.fill,delete c.opacity,delete c.cap,delete c.join,delete c.miter,delete c.linewidth,c=new a(c),h&&(this.stage=
-c,this.stage.object=b,b.parent=this,b.unbind(Two.Events.change).bind(Two.Events.change,_.bind(this.update,this)))):c=new k(j.call(this,b));e.push(c);h||this.stage.appendChild(c)},this);return this},update:function(b,c,e,a,k,j){var m=Object.getPrototypeOf(this).constructor,f=this.elements,l=f[b];switch(c){case Two.Properties.hierarchy:_.each(e,function(a){l.appendChild(f[a])});break;case Two.Properties.demotion:_.each(e,function(a){l.removeChild(f[a]);this.elements[a]=null},this);break;default:m.setStyles.call(this,
-l,c,e,a,k,j)}return this},render:function(){if(_.isNull(this.stage))return this;1!==this.ratio&&(this.ctx.save(),this.ctx.scale(this.ratio,this.ratio));this.overdraw||this.ctx.clearRect(0,0,this.width,this.height);this.stage.render(this.ctx);1!==this.ratio&&this.ctx.restore();return this}})})();(function(){function p(a,b){var c=Math.min(a.top,b.top),e=Math.min(a.left,b.left),f=Math.max(a.right,b.right),h=Math.max(a.bottom,b.bottom);return{top:c,left:e,right:f,bottom:h,width:f-e,height:h-c,centroid:{x:-e,y:-c}}}var l=Two[Two.Types.canvas],e=Two.Matrix.Multiply,j=Two[Two.Types.canvas].Utils.toArray,m=Two.Utils.mod,c=function(a){l.Group.call(this,a)};_.extend(c.prototype,l.Group.prototype,{appendChild:function(){l.Group.prototype.appendChild.apply(this,arguments);this.updateMatrix();return this},
-updateTexture:function(a){_.each(this.children,function(b){b.updateTexture(a)});return this},updateMatrix:function(a){var b=a&&a._matrix||this.parent&&this.parent._matrix;a=a&&a._scale||this.parent&&this.parent._scale;if(!b)return this;this._matrix=e(this.matrix,b);this._scale=this.scale*a;_.each(this.children,function(a){a.updateMatrix(this)},this);return this},render:function(a,b){_.each(this.children,function(c){c.render(a,b)})}});var b=function(a){l.Element.call(this,a)};_.extend(b.prototype,
-l.Element.prototype,{updateMatrix:function(a){var b=a&&a._matrix||this.parent&&this.parent._matrix;a=a&&a._scale||this.parent&&this.parent._scale;if(!b)return this;this._matrix=e(this.matrix,b);this._scale=this.scale*a;return this},updateTexture:function(a){h.updateTexture(a,this);return this},render:function(a,b){if(!this.visible||!this.opacity||!this.buffer)return this;a.bindBuffer(a.ARRAY_BUFFER,this.textureCoordsBuffer);a.vertexAttribPointer(b.textureCoords,2,a.FLOAT,!1,0,0);a.bindTexture(a.TEXTURE_2D,
-this.texture);a.uniformMatrix3fv(b.matrix,!1,this._matrix);a.bindBuffer(a.ARRAY_BUFFER,this.buffer);a.vertexAttribPointer(b.position,2,a.FLOAT,!1,0,0);a.drawArrays(a.TRIANGLES,0,6);return this}});var h={canvas:document.createElement("canvas"),uv:new Two.Array([0,0,1,0,0,1,0,1,1,0,1,1]),getBoundingClientRect:function(a,b,c){var e=Infinity,f=-Infinity,h=Infinity,j=-Infinity;_.each(a,function(a){var b=a.x,k=a.y,m;h=Math.min(k,h);e=Math.min(b,e);f=Math.max(b,f);j=Math.max(k,j);c&&(b=a.u.x,k=a.u.y,m=a.v.x,
-a=a.v.y,h=Math.min(k,a,h),e=Math.min(b,m,e),f=Math.max(b,m,f),j=Math.max(k,a,j))});_.isNumber(b)&&(h-=b,e-=b,f+=b,j+=b);return{top:h,left:e,right:f,bottom:j,width:f-e,height:j-h,centroid:{x:-e,y:-h}}},getTriangles:function(a){var b=a.top,c=a.left,e=a.right;a=a.bottom;return new Two.Array([c,b,e,b,c,a,c,a,e,b,e,a])},updateCanvas:function(a){var b=a.commands,c=this.canvas,e=this.ctx,f=a._scale,h=a.stroke,j=a.linewidth*f,l=a.fill,p=a.opacity,x=a.cap,n=a.join,t=a.miter,d=a.curved,v=a.closed,z=b.length,
-J=z-1;c.width=Math.max(Math.ceil(a.rect.width*f),1);c.height=Math.max(Math.ceil(a.rect.height*f),1);a=a.rect.centroid;var C=a.x*f,D=a.y*f;e.clearRect(0,0,c.width,c.height);l&&(e.fillStyle=l);h&&(e.strokeStyle=h);j&&(e.lineWidth=j);t&&(e.miterLimit=t);n&&(e.lineJoin=n);x&&(e.lineCap=x);_.isNumber(p)&&(e.globalAlpha=p);e.beginPath();_.each(b,function(a,c){var h=(a.x*f+C).toFixed(3),j=(a.y*f+D).toFixed(3);if(d){var l=v?m(c-1,z):Math.max(c-1,0),q=v?m(c+1,z):Math.min(c+1,J),n=b[l],q=b[q],l=(n.v.x*f+C).toFixed(3),
-n=(n.v.y*f+D).toFixed(3),p=(a.u.x*f+C).toFixed(3),g=(a.u.y*f+D).toFixed(3);0>=c?e.moveTo(h,j):(e.bezierCurveTo(l,n,p,g,h,j),c>=J&&v&&(l=(a.v.x*f+C).toFixed(3),n=(a.v.y*f+D).toFixed(3),p=(q.u.x*f+C).toFixed(3),g=(q.u.y*f+D).toFixed(3),h=(q.x*f+C).toFixed(3),j=(q.y*f+D).toFixed(3),e.bezierCurveTo(l,n,p,g,h,j)))}else 0>=c?e.moveTo(h,j):e.lineTo(h,j)});v&&!d&&e.closePath();e.fill();e.stroke()},updateTexture:function(a,b){this.updateCanvas(b);b.texture&&a.deleteTexture(b.texture);a.bindBuffer(a.ARRAY_BUFFER,
-b.textureCoordsBuffer);b.texture=a.createTexture();a.bindTexture(a.TEXTURE_2D,b.texture);a.texParameteri(a.TEXTURE_2D,a.TEXTURE_WRAP_S,a.CLAMP_TO_EDGE);a.texParameteri(a.TEXTURE_2D,a.TEXTURE_WRAP_T,a.CLAMP_TO_EDGE);a.texParameteri(a.TEXTURE_2D,a.TEXTURE_MIN_FILTER,a.LINEAR);0>=this.canvas.width||0>=this.canvas.height||a.texImage2D(a.TEXTURE_2D,0,a.RGBA,a.RGBA,a.UNSIGNED_BYTE,this.canvas)},updateBuffer:function(a,b,c){_.isObject(b.buffer)&&a.deleteBuffer(b.buffer);b.buffer=a.createBuffer();a.bindBuffer(a.ARRAY_BUFFER,
-b.buffer);a.enableVertexAttribArray(c.position);a.bufferData(a.ARRAY_BUFFER,b.triangles,a.STATIC_DRAW);_.isObject(b.textureCoordsBuffer)&&a.deleteBuffer(b.textureCoordsBuffer);b.textureCoordsBuffer=a.createBuffer();a.bindBuffer(a.ARRAY_BUFFER,b.textureCoordsBuffer);a.enableVertexAttribArray(c.textureCoords);a.bufferData(a.ARRAY_BUFFER,this.uv,a.STATIC_DRAW)},program:{create:function(a,b){var c=a.createProgram();_.each(b,function(b){a.attachShader(c,b)});a.linkProgram(c);if(!a.getProgramParameter(c,
-a.LINK_STATUS))throw error=a.getProgramInfoLog(c),a.deleteProgram(c),new Two.Utils.Error("unable to link program: "+error);return c}},shaders:{create:function(a,b,c){c=a.createShader(a[c]);a.shaderSource(c,b);a.compileShader(c);if(!a.getShaderParameter(c,a.COMPILE_STATUS))throw b=a.getShaderInfoLog(c),a.deleteShader(c),new Two.Utils.Error("unable to compile shader "+c+": "+b);return c},types:{vertex:"VERTEX_SHADER",fragment:"FRAGMENT_SHADER"},vertex:"attribute vec2 a_position;\nattribute vec2 a_textureCoords;\n\nuniform mat3 u_matrix;\nuniform vec2 u_resolution;\n\nvarying vec2 v_textureCoords;\n\nvoid main() {\n   vec2 projected = (u_matrix * vec3(a_position, 1)).xy;\n   vec2 normal = projected / u_resolution;\n   vec2 clipspace = (normal * 2.0) - 1.0;\n\n   gl_Position = vec4(clipspace * vec2(1.0, -1.0), 0.0, 1.0);\n   v_textureCoords = a_textureCoords;\n}",
-fragment:"precision mediump float;\n\nuniform sampler2D u_image;\nvarying vec2 v_textureCoords;\n\nvoid main() {\n  gl_FragColor = texture2D(u_image, v_textureCoords);\n}"}};h.ctx=h.canvas.getContext("2d");var x=Two[Two.Types.webgl]=function(a){this.count=0;this.domElement=document.createElement("canvas");this.elements=[];this.stage=null;a=_.defaults(a||{},{antialias:!1,alpha:!0,premultipliedAlpha:!0,stencil:!0,preserveDrawingBuffer:!1});a=this.ctx=this.domElement.getContext("webgl",a)||this.domElement.getContext("experimental-webgl",
-a);if(!this.ctx)throw new Two.Utils.Error("unable to create a webgl context. Try using another renderer.");var b=h.shaders.create(a,h.shaders.vertex,h.shaders.types.vertex),c=h.shaders.create(a,h.shaders.fragment,h.shaders.types.fragment);this.program=h.program.create(a,[b,c]);a.useProgram(this.program);this.program.position=a.getAttribLocation(this.program,"a_position");this.program.matrix=a.getUniformLocation(this.program,"u_matrix");this.program.textureCoords=a.getAttribLocation(this.program,"a_textureCoords");
-a.disable(a.DEPTH_TEST);a.enable(a.BLEND);a.blendEquationSeparate(a.FUNC_ADD,a.FUNC_ADD);a.blendFuncSeparate(a.SRC_ALPHA,a.ONE_MINUS_SRC_ALPHA,a.ONE,a.ONE_MINUS_SRC_ALPHA)};_.extend(x,{Group:c,Element:b,getStyles:function(a){var c={},e=a.id,m=a._matrix,f=a.stroke,l=a.linewidth,p=a.fill,x=a.opacity,u=a.visible,y=a.cap,n=a.join,t=a.miter,d=a.curved,v=a.closed,z=a.vertices;e&&(c.id=e);_.isObject(m)&&(c.matrix=c._matrix=m.toArray(!0),c.scale=c._scale=1);f&&(c.stroke=f);p&&(c.fill=p);_.isNumber(x)&&(c.opacity=
-x);y&&(c.cap=y);n&&(c.join=n);t&&(c.miter=t);l&&(c.linewidth=l);z&&(c.vertices=j(z,d,v),c.commands=c.vertices,c.rect=h.getBoundingClientRect(c.commands,c.linewidth,c.curved),c.triangles=h.getTriangles(c.rect));c.visible=!!u;c.curved=!!d;c.closed=!!v;a instanceof Two.Polygon&&(h.updateBuffer(this.ctx,c,this.program),b.prototype.updateTexture.call(c,this.ctx));return c},setStyles:function(a,b,c,e,f,m){var l=!1;/matrix/.test(b)?(a[b]=c.toArray(!0),_.isNumber(e)&&(l=a.scale!==e,a.scale=e),a.updateMatrix()):
-/(stroke|fill|opacity|cap|join|miter|linewidth)/.test(b)?(a[b]=c,a.rect=p(h.getBoundingClientRect(a.commands,a.linewidth,a.curved),a.rect),a.triangles=h.getTriangles(a.rect),h.updateBuffer(this.ctx,a,this.program),l=!0):"vertices"===b?(_.isUndefined(e)||(a.closed=e),_.isUndefined(f)||(a.curved=f),m?a.commands=j(c,a.curved,a.closed):(a.vertices=j(c,a.curved,a.closed),a.commands=a.vertices),a.rect=p(h.getBoundingClientRect(a.vertices,a.linewidth,a.curved),a.rect),a.triangles=h.getTriangles(a.rect),
-h.updateBuffer(this.ctx,a,this.program),l=!0):a[b]=c;l&&a.updateTexture(this.ctx)}});_.extend(x.prototype,Backbone.Events,l.prototype,{setSize:function(a,b){l.prototype.setSize.apply(this,arguments);this.ratio=1;this.domElement.width=a;this.domElement.height=b;this.ctx.viewport(0,0,a,b);var c=this.ctx.getUniformLocation(this.program,"u_resolution");this.ctx.uniform2f(c,a,b);return this},render:function(){if(_.isNull(this.stage))return this;this.stage.render(this.ctx,this.program);return this}})})();(function(){var p=Two.Shape=function(l){this._matrix=new Two.Matrix;var e=_.debounce(_.bind(function(){var e=this._matrix.identity().translate(this.translation.x,this.translation.y).scale(this.scale).rotate(this.rotation);this.trigger(Two.Events.change,this.id,"matrix",e,this.scale)},this),0);this._rotation=0;Object.defineProperty(this,"rotation",{get:function(){return this._rotation},set:function(j){this._rotation=j;e()}});this._scale="scale";Object.defineProperty(this,"scale",{get:function(){return this._scale},
-set:function(j){this._scale=j;e()}});this.translation=new Two.Vector;this.rotation=0;this.scale=1;this.translation.bind(Two.Events.change,e);if(l)return this;p.MakeGetterSetter(this,p.Properties);this.fill="#fff";this.stroke="#000";this.opacity=this.linewidth=1;this.visible=!0;this.join=this.cap="round";this.miter=1};_.extend(p,{Properties:"fill stroke linewidth opacity visible cap join miter".split(" "),MakeGetterSetter:function(l,e){_.isArray(e)||(e=[e]);_.each(e,function(e){var m="_"+e;Object.defineProperty(l,
-e,{get:function(){return this[m]},set:function(c){this[m]=c;this.trigger(Two.Events.change,this.id,e,c,this)}})})}});_.extend(p.prototype,Backbone.Events,{addTo:function(l){l.add(this);return this},noFill:function(){this.fill="transparent";return this},noStroke:function(){this.stroke="transparent";return this},clone:function(){var l=new p;l.translation.copy(this.translation);_.each(p.Properties,function(e){l[e]=this[e]},this);return this}})})();(function(){var p=Two.Group=function(){Two.Shape.call(this,!0);delete this.stroke;delete this.fill;delete this.linewidth;delete this.opacity;delete this.cap;delete this.join;delete this.miter;p.MakeGetterSetter(this,Two.Shape.Properties);this.children={}};_.extend(p,{MakeGetterSetter:function(l,e){_.isArray(e)||(e=[e]);_.each(e,function(e){var m="_"+e;Object.defineProperty(l,e,{get:function(){return this[m]},set:function(c){this[m]=c;_.each(this.children,function(b){b[e]=c})}})})}});_.extend(p.prototype,
-Two.Shape.prototype,{clone:function(l){l=l||this.parent;var e=_.map(this.children,function(e){return e.clone(l)}),j=new p;l.add(j);j.add(e);j.translation.copy(this.translation);j.rotation=this.rotation;j.scale=this.scale;return j},corner:function(){var l=this.getBoundingClientRect(!0),e={x:l.left,y:l.top};_.each(this.children,function(j){j.translation.subSelf(e)});return this},center:function(){var l=this.getBoundingClientRect(!0);l.centroid={x:l.left+l.width/2,y:l.top+l.height/2};_.each(this.children,
-function(e){e.translation.subSelf(l.centroid)});return this},add:function(l){var e=l,j=this.children,m=this.parent,c=[];_.isArray(l)||(e=_.toArray(arguments));var b=_.bind(function(b,c,a,e,j,m){this.trigger(Two.Events.change,b,c,a,e,j,m)},this);_.each(e,function(e){if(e){var l=e.id,a=e.parent;_.isUndefined(l)&&(m.add(e),l=e.id);_.isUndefined(j[l])&&(a&&delete a.children[l],j[l]=e,e.parent=this,e.unbind(Two.Events.change).bind(Two.Events.change,b),c.push(l))}},this);0<c.length&&this.trigger(Two.Events.change,
-this.id,Two.Properties.hierarchy,c);return this},remove:function(l){var e=l,j=this.children,m=this.parent,c=[];if(0>=arguments.length&&m)return m.remove(this),this;_.isArray(l)||(e=_.toArray(arguments));_.each(e,function(b){var e=b.id;e in j&&(delete j[e],delete b.parent,b.unbind(Two.Events.change),c.push(e))});0<c.length&&this.trigger(Two.Events.change,this.id,Two.Properties.demotion,c);return this},getBoundingClientRect:function(l){var e=Infinity,j=-Infinity,m=Infinity,c=-Infinity;_.each(this.children,
-function(b){b=b.getBoundingClientRect(!0);m&&(e&&j&&c)&&(m=Math.min(b.top,m),e=Math.min(b.left,e),j=Math.max(b.right,j),c=Math.max(b.bottom,c))},this);var b=l?this._matrix:Two.Utils.getComputedMatrix(this);l=b.multiply(e,m,1);b=b.multiply(j,c,1);return{top:l.y,left:l.x,right:b.x,bottom:b.y,width:b.x-l.x,height:b.y-l.y}},noFill:function(){_.each(this.children,function(l){l.noFill()});return this},noStroke:function(){_.each(this.children,function(l){l.noStroke()});return this}})})();(function(){var p=Math.min,l=Math.max,e=Math.round,j=Two.Polygon=function(j,c,b){Two.Shape.call(this);c=!!c;b=!!b;var h=0,x=1,a=!1,k=!1,q,s=[],f=_.debounce(_.bind(function(){var f,j;if(a||k){f=q.length;j=f-1;f=e(h*j);j=e(x*j);for(s.length=0;f<j+1;f++)s.push(q[f])}this.trigger(Two.Events.change,this.id,"vertices",s,c,b,a);k=a=!1},this),0);Object.defineProperty(this,"closed",{get:function(){return c},set:function(a){c=!!a;f()}});Object.defineProperty(this,"curved",{get:function(){return b},set:function(a){b=
-!!a;f()}});Object.defineProperty(this,"beginning",{get:function(){return h},set:function(b){h=p(l(b,0),1);a=!0;f()}});Object.defineProperty(this,"ending",{get:function(){return x},set:function(b){x=p(l(b,0),1);a=!0;f()}});Object.defineProperty(this,"vertices",{get:function(){return q},set:function(a){var b=_.bind(function(a){_.each(a,function(a){a.bind(Two.Events.change,f)},this);k=!0;f()},this),c=_.bind(function(a){_.each(a,function(a){a.unbind(Two.Events.change,f)},this);k=!0;f()},this);q&&q.unbind();
-q=new Two.Utils.Collection(a.slice(0));q.bind(Two.Events.insert,b);q.bind(Two.Events.remove,c);k=!0;b(q)}});this.vertices=j};_.extend(j.prototype,Two.Shape.prototype,{clone:function(){var e=_.map(this.vertices,function(b){return new Two.Vector(b.x,b.y)}),c=new j(e,this.closed,this.curved);_.each(Two.Shape.Properties,function(b){c[b]=this[b]},this);c.translation.copy(this.translation);c.rotation=this.rotation;c.scale=this.scale;return c},corner:function(){var e=this.getBoundingClientRect(!0),c={x:e.left,
-y:e.top};_.each(this.vertices,function(b){b.subSelf(c)});return this},center:function(){var e=this.getBoundingClientRect(!0);e.centroid={x:e.left+e.width/2,y:e.top+e.height/2};_.each(this.vertices,function(c){c.subSelf(e.centroid)});return this},remove:function(){if(!this.parent)return this;this.parent.remove(this);return this},getBoundingClientRect:function(e){var c=this.linewidth,b=Infinity,h=-Infinity,j=Infinity,a=-Infinity;_.each(this.vertices,function(c){var e=c.x;c=c.y;j=Math.min(c,j);b=Math.min(e,
-b);h=Math.max(e,h);a=Math.max(c,a)});j-=c;b-=c;h+=c;a+=c;c=e?this._matrix:Two.Utils.getComputedMatrix(this);e=c.multiply(b,j,1);c=c.multiply(h,a,1);return{top:e.y,left:e.x,right:c.x,bottom:c.y,width:c.x-e.x,height:c.y-e.y}}})})();

js/libs/yepnope.min.js

@@ -0,0 +1,2 @@
+/*yepnope1.5.x|WTFPL*/
+(function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f<d;f++)g=a[f].split("="),(e=z[g.shift()])&&(c=e(c,g));for(f=0;f<b;f++)c=x[f](c);return c}function g(a,e,f,g,h){var i=b(a),j=i.autoCallback;i.url.split(".").pop().split("?").shift(),i.bypass||(e&&(e=d(e)?e:e[a]||e[g]||e[a.split("/").pop().split("?")[0]]),i.instead?i.instead(a,e,f,g,h):(y[i.url]?i.noexec=!0:y[i.url]=1,f.load(i.url,i.forceCSS||!i.forceJS&&"css"==i.url.split(".").pop().split("?").shift()?"c":c,i.noexec,i.attrs,i.timeout),(d(e)||d(j))&&f.load(function(){k(),e&&e(i.origUrl,h,g),j&&j(i.origUrl,h,g),y[i.url]=2})))}function h(a,b){function c(a,c){if(a){if(e(a))c||(j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}),g(a,j,b,0,h);else if(Object(a)===a)for(n in m=function(){var b=0,c;for(c in a)a.hasOwnProperty(c)&&b++;return b}(),a)a.hasOwnProperty(n)&&(!c&&!--m&&(d(j)?j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}:j[n]=function(a){return function(){var b=[].slice.call(arguments);a&&a.apply(this,b),l()}}(k[n])),g(a[n],j,b,n,h))}else!c&&l()}var h=!!a.test,i=a.load||a.both,j=a.callback||f,k=j,l=a.complete||f,m,n;c(h?a.yep:a.nope,!!i),i&&c(i)}var i,j,l=this.yepnope.loader;if(e(a))g(a,0,l,0);else if(w(a))for(i=0;i<a.length;i++)j=a[i],e(j)?g(j,0,l,0):w(j)?B(j):Object(j)===j&&h(j,l);else Object(a)===a&&h(a,l)},B.addPrefix=function(a,b){z[a]=b},B.addFilter=function(a){x.push(a)},B.errorTimeout=1e4,null==b.readyState&&b.addEventListener&&(b.readyState="loading",b.addEventListener("DOMContentLoaded",A=function(){b.removeEventListener("DOMContentLoaded",A,0),b.readyState="complete"},0)),a.yepnope=k(),a.yepnope.executeStack=h,a.yepnope.injectJs=function(a,c,d,e,i,j){var k=b.createElement("script"),l,o,e=e||B.errorTimeout;k.src=a;for(o in d)k.setAttribute(o,d[o]);c=j?h:c||f,k.onreadystatechange=k.onload=function(){!l&&g(k.readyState)&&(l=1,c(),k.onload=k.onreadystatechange=null)},m(function(){l||(l=1,c(1))},e),i?k.onload():n.parentNode.insertBefore(k,n)},a.yepnope.injectCss=function(a,c,d,e,g,i){var e=b.createElement("link"),j,c=i?h:c||f;e.href=a,e.rel="stylesheet",e.type="text/css";for(j in d)e.setAttribute(j,d[j]);g||(n.parentNode.insertBefore(e,n),m(c,0))}})(this,document);

js/main.js

@@ -1,5 +1,11 @@
 "use strict";
 
+yepnope({
+  test: window.mobile,
+  yep : 'js/mobile-events.js',
+  nope: 'js/events.js'
+})
+
 $(document).ready(function() {
   window.c = $('canvas')[0].getContext('2d');
   window.o = $('canvas')[1].getContext('2d');
@@ -10,8 +16,7 @@ $(document).ready(function() {
     type: 'sketch',
     lineCap: 'round',
     lineJoin: 'round',
-    ribbonEnd: 50,
+    furLength: 5
-    ribbonTurn : 0
   };
   window.points = [];
   window.$c = $('canvas');
@@ -20,31 +25,4 @@ $(document).ready(function() {
   sizeAndPos();
   $(window).resize(sizeAndPos);
 
-  $c.last().bind('mousedown touchstart', function(e) {
-    e.preventDefault();
-    if( e.changedTouches ) e = e.changedTouches[0];
-    var xy = relative(e.pageX, e.pageY);
-    startPoint(xy.x, xy.y);
-    window.active = true;
-  }).bind('mousemove touchmove', function(e) {
-    e.preventDefault();
-    if (!window.active || settings.type == 'line') return;
-    if( e.changedTouches ) e = e.changedTouches[0];
-    var xy = relative(e.pageX, e.pageY);
-    drawPoint(xy.x, xy.y);
-  }).bind('mouseup touchend', function(e) {
-    e.preventDefault();
-    window.active = false;
-
-    if(window.points.history.last < window.points.history.length-1) {
-      window.points.history.splice(window.points.history.last+1);
-    }
-
-    window.points.history.push({
-      data: c.getImageData(0, 0, $c.width(), $c.height()),
-      points: window.points.slice(0)
-    })
-    window.points.history.last = window.points.history.length-1;
-  })
-  
 })

js/mobile-events.js

@@ -0,0 +1,89 @@
+  $('.menu').bind('touchend', function() {
+    $('#menu').toggleClass('pulled');
+  })
+  $('.save').bind('touchend', function() {
+    var data = $c[0].toDataURL();
+    var img = $('<img src="' + data + '" width="' + $c.width() + '" height="' + $c.height() + '" class="overlay"/>');
+    $('body').append(img);
+    var share = new MozActivity({
+      name: 'share',
+      data: {
+        type: 'image/*'
+      }
+    })
+  })
+  $c.last().bind('touchstart', function(e) {
+    e.preventDefault();
+    var xy = relative(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
+    startPoint(xy.x, xy.y);
+    window.active = true;
+  }).bind('touchmove', function(e) {
+    e.preventDefault();
+    if (!window.active || settings.type == 'line') return;
+    var xy = relative(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
+    drawPoint(xy.x, xy.y);
+  }).bind('touchend', function(e) {
+    e.preventDefault();
+    window.active = false;
+
+    if(window.points.history.last < window.points.history.length-1) {
+      window.points.history.splice(window.points.history.last+1);
+    }
+
+    window.points.history.push({
+      data: c.getImageData(0, 0, $c.width(), $c.height()),
+      points: window.points.slice(0)
+    })
+    window.points.history.last = window.points.history.length-1;
+  })
+  
+  // Value Selector
+  
+  var $selector = $('form[data-type="value-selector"]');
+
+  $selector.find('li').on('touchend', function(e) {
+    $(this).parent().find('li').removeAttr('aria-selected');
+    $(this).attr('aria-selected', 'true');
+    var prop = $(this).parents('form').attr('id'),
+        key  = $(this).find('label span').html().toLowerCase();
+    window.settings[prop] = key;
+
+    $('button[id="set' + prop + '"] span').html(key[0].toUpperCase() + key.substr(1));
+
+    $(this).parents('form').addClass('hidden');
+  })
+
+  $selector.submit(function(e) {
+    e.preventDefault();
+    $(this).addClass('hidden');
+  })
+
+  // Value Selector Callers
+  
+  var $btn = $('button[id^="set"]');
+  $btn.each(function() {
+    var target = /set(.*)/.exec($(this).attr('id'))[1];
+    $(this).on('touchend', function(e) {
+      e.preventDefault();
+      $('form[id="' + target + '"]').removeClass('hidden');
+    })
+  })
+
+  // Seekbar
+
+  var sliderLeft = $('div[role="slider"] button').offset().left;
+  $('div[role="slider"] button').on('touchstart', function() {
+    $(this).attr('data-moving','true');
+  }).on('touchmove', function(e) {
+    if( $(this).attr('data-moving') ) {
+      var x = e.changedTouches[0].pageX - sliderLeft - 15;
+      if( x <= 100 && x > 0 ) {
+        $(this).css('left', x+'%');
+        $(this).parent().find('progress').attr('value', x);
+        settings.lineWidth = x / 10;
+        $('#lineWidth span').html(x);
+      }
+    }
+  }).on('touchend', function() {
+    $(this).removeAttr('data-moving');
+  })

manifest.webapp

@@ -4,14 +4,14 @@
   "version": 1,
   "launch_path": "/index.html",
   "icons": {
-    "16": "/images/logo16.png",
+    "16": "/img/icons/icon16.png",
-    "32": "/images/logo32.png",
+    "32": "/img/icons/icon32.png",
-    "48": "/images/logo48.png",
+    "48": "/img/icons/icon48.png",
-    "60": "/images/logo60.png",
+    "60": "/img/icons/icon60.png",
-    "64": "/images/logo64.png",
+    "64": "/img/icons/icon64.png",
-    "90": "/images/logo90.png",
+    "90": "/img/icons/icon90.png",
-    "120": "/images/logo120.png",
+    "120": "/img/icons/icon120.png",
-    "128": "/images/logo128.png"
+    "128": "/img/icons/icon128.png"
   },
   "developer": {
     "name": "Mahdi Dibaiee",