From 6f26b6814603c299c546e182969f490d1b8d1cc6 Mon Sep 17 00:00:00 2001 From: Stephanie Chung Date: Sat, 3 May 2014 01:28:14 -0700 Subject: [PATCH] first commit --- .gitignore | 5 + Makefile | 3 + css/styles.css | 499 +++++++++++++++++++++++++++ data/keyboard.json | 88 +++++ index.html | 66 ++++ js/controllers-src/keysController.js | 14 + js/controllers/keysController.js | 15 + js/libs/backbone-min.js | 2 + js/libs/fiber.min.js | 7 + js/libs/jquery-1.11.1.min.js | 4 + js/libs/require.js | 36 ++ js/libs/underscore-min.js | 6 + js/main.js | 22 ++ 13 files changed, 767 insertions(+) create mode 100644 .gitignore create mode 100644 Makefile create mode 100644 css/styles.css create mode 100644 data/keyboard.json create mode 100644 index.html create mode 100644 js/controllers-src/keysController.js create mode 100644 js/controllers/keysController.js create mode 100644 js/libs/backbone-min.js create mode 100644 js/libs/fiber.min.js create mode 100644 js/libs/jquery-1.11.1.min.js create mode 100644 js/libs/require.js create mode 100644 js/libs/underscore-min.js create mode 100644 js/main.js diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..92287f8 --- /dev/null +++ b/.gitignore @@ -0,0 +1,5 @@ +node_modules/.bin/r.js +node_modules/requirejs/README.md +node_modules/requirejs/bin/r.js +node_modules/requirejs/package.json +node_modules/requirejs/require.js diff --git a/Makefile b/Makefile new file mode 100644 index 0000000..f731909 --- /dev/null +++ b/Makefile @@ -0,0 +1,3 @@ +commonjs: + @node_modules/requirejs/bin/r.js -convert js/controllers-src/ js/controllers/ + @echo "JS Compiled." \ No newline at end of file diff --git a/css/styles.css b/css/styles.css new file mode 100644 index 0000000..88fc5a1 --- /dev/null +++ b/css/styles.css @@ -0,0 +1,499 @@ +* { + margin:0px; + padding:0px; + list-style:none; +} + +:focus { + outline:none !important; +} + +body { + background:#ccc; +} + +a { + color:indigo; + text-decoration:none; +} + +a:hover { + text-decoration:underline; +} + +/* Piano Wrapper */ +#p-wrapper { + background:#000; + background:-webkit-linear-gradient(-60deg,#000,#333,#000,#666,#333 70%); + background:-moz-linear-gradient(-60deg,#000,#333,#000,#666,#333 70%); + background:-ms-linear-gradient(-60deg,#000,#333,#000,#666,#333 70%); + background:-o-linear-gradient(-60deg,#000,#333,#000,#666,#333 70%); + background:linear-gradient(-60deg,#000,#333,#000,#666,#333 70%); + width:100%; + position:relative; + -webkit-box-shadow:0 2px 0px #666,0 3px 0px #555,0 4px 0px #444,0 6px 6px #000,inset 0 -1px 1px rgba(255,255,255,0.5),inset 0 -4px 5px #000; + -moz-box-shadow:0 2px 0px #666,0 3px 0px #555,0 4px 0px #444,0 6px 6px #000,inset 0 -1px 1px rgba(255,255,255,0.5),inset 0 -4px 5px #000; + box-shadow:0 2px 0px #666,0 3px 0px #555,0 4px 0px #444,0 6px 6px #000,inset 0 -1px 1px rgba(255,255,255,0.5),inset 0 -4px 5px #000; + border:2px solid #333; + -webkit-border-radius:0 0 5px 5px; + -moz-border-radius:0 0 5px 5px; + border-radius:0 0 5px 5px; + -webkit-animation:taufik 2s; + -moz-animation:taufik 2s; + animation:taufik 2s; + margin: 0 auto; +} + +/* Tuts */ +ul#piano { + display:block; + width:1560px; + height:240px; + border-top:2px solid #222; + margin: 0 auto; +} + +ul#piano li { + list-style:none; + float:left; + display:inline; + width:30px; + position:relative; + text-align:center; + color:#fff; + font-size:10px; + font-family: arial, sans-serif; + line-height: 17px; +} + +ul#piano li a,ul#piano li div.anchor { + display:block; + height:220px; + background:#fff; + background:-webkit-linear-gradient(-30deg,#f5f5f5,#fff); + background:-moz-linear-gradient(-30deg,#f5f5f5,#fff); + background:-ms-linear-gradient(-30deg,#f5f5f5,#fff); + background:-o-linear-gradient(-30deg,#f5f5f5,#fff); + background:linear-gradient(-30deg,#f5f5f5,#fff); + border:1px solid #ccc; + -webkit-box-shadow:inset 0 1px 0px #fff,inset 0 -1px 0px #fff,inset 1px 0px 0px #fff,inset -1px 0px 0px #fff,0 4px 3px rgba(0,0,0,0.7); + -moz-box-shadow:inset 0 1px 0px #fff,inset 0 -1px 0px #fff,inset 1px 0px 0px #fff,inset -1px 0px 0px #fff,0 4px 3px rgba(0,0,0,0.7); + box-shadow:inset 0 1px 0px #fff,inset 0 -1px 0px #fff,inset 1px 0px 0px #fff,inset -1px 0px 0px #fff,0 4px 3px rgba(0,0,0,0.7); + -webkit-border-radius:0 0 3px 3px; + -moz-border-radius:0 0 3px 3px; + border-radius:0 0 3px 3px; +} + +ul#piano li a:active,ul#piano li div.anchor:active { + -webkit-box-shadow:0 2px 2px rgba(0,0,0,0.4); + -moz-box-shadow:0 2px 2px rgba(0,0,0,0.4); + box-shadow:0 2px 2px rgba(0,0,0,0.4); + position:relative; + top:2px; + height:216px; +} + +ul#piano li a:active:before,ul#piano li div.anchor:active:before { + content:""; + width:0px; + height:0px; + border-width:216px 5px 0px; + border-style:solid; + border-color:transparent transparent transparent rgba(0,0,0,0.1); + position:absolute; + left:0px; + top:0px; +} + +ul#piano li a:active:after,ul#piano li div.anchor:active:after { + content:""; + width:0px; + height:0px; + border-width:216px 5px 0px; + border-style:solid; + border-color:transparent rgba(0,0,0,0.1) transparent transparent; + position:absolute; + right:0px; + top:0px; +} + +/* Black Tuts */ +ul#piano li span { + position:absolute; + top:0px; + left:-12px; + width:20px; + height:120px; + background:#333; + background:-webkit-linear-gradient(-20deg,#333,#000,#333); + background:-moz-linear-gradient(-20deg,#333,#000,#333); + background:-ms-linear-gradient(-20deg,#333,#000,#333); + background:-o-linear-gradient(-20deg,#333,#000,#333); + background:linear-gradient(-20deg,#333,#000,#333); + z-index:10; + border-width:1px 2px 7px; + border-style:solid; + border-color:#666 #222 #111 #555; + -webkit-box-shadow:inset 0px -1px 2px rgba(255,255,255,0.4),0 2px 3px rgba(0,0,0,0.4); + -moz-box-shadow:inset 0px -1px 2px rgba(255,255,255,0.4),0 2px 3px rgba(0,0,0,0.4); + box-shadow:inset 0px -1px 2px rgba(255,255,255,0.4),0 2px 3px rgba(0,0,0,0.4); + -webkit-border-radius:0 0 2px 2px; + -moz-border-radius:0 0 2px 2px; + border-radius:0 0 2px 2px; +} + +ul#piano li span:active { + border-bottom-width:2px; + height:123px; + -webkit-box-shadow:inset 0px -1px 1px rgba(255,255,255,0.4),0 1px 0px rgba(0,0,0,0.8),0 2px 2px rgba(0,0,0,0.4),0 -1px 0px #000; + -moz-box-shadow:inset 0px -1px 1px rgba(255,255,255,0.4),0 1px 0px rgba(0,0,0,0.8),0 2px 2px rgba(0,0,0,0.4),0 -1px 0px #000; + box-shadow:inset 0px -1px 1px rgba(255,255,255,0.4),0 1px 0px rgba(0,0,0,0.8),0 2px 2px rgba(0,0,0,0.4),0 -1px 0px #000; +} + +/* Tooltips */ +ul#piano li b { + position:absolute; + top:0px; + margin-top:-10px; + background:#111; + color:#fff; + font:bold 14px 'Trebuchet MS',Arial,Sans-Serif; + border:2px solid #e6e6e6; + -webkit-border-radius:7px; + -moz-border-radius:7px; + border-radius:7px; + width:100px; + height:30px; + padding:10px; + left:-40px; + z-index:100; + visibility:hidden; + opacity:0; + -webkit-box-shadow:0 2px 10px rgba(0,0,0,0.5); + -moz-box-shadow:0 2px 10px rgba(0,0,0,0.5); + box-shadow:0 2px 10px rgba(0,0,0,0.5); + -webkit-transition:all 0.2s ease-out; + -moz-transition:all 0.2s ease-out; + -ms-transition:all 0.2s ease-out; + -o-transition:all 0.2s ease-out; + -transition:all 0.2s ease-out; +} + +/* Tooltip Arrow */ +ul#piano li b:before { + content:""; + display:block; + position:absolute; + top:100%; + left:50px; + border-width:8px; + border-style:solid; + border-color:#e6e6e6 transparent transparent transparent; +} + +ul#piano li b:after { + content:""; + display:block; + position:absolute; + top:100%; + left:53px; + border-width:5px; + border-style:solid; + border-color:#111 transparent transparent transparent; +} + +ul#piano li:hover b { + visibility:visible; + opacity:1; + margin-top:10px; +} + +/* Drop Down Menus */ +ul#piano li ul,#search,#contact { + position:absolute; + border:2px solid #e6e6e6; + margin-top:-100px; + top:100%; + left:0px; + z-index:1000; + visibility:hidden; + opacity:0; + -webkit-box-shadow:0 2px 7px #000; + -moz-box-shadow:0 2px 7px #000; + box-shadow:0 2px 7px #000; + -webkit-transition:all 0.2s ease-out 0.2s; + -moz-transition:all 0.2s ease-out 0.2s; + -ms-transition:all 0.2s ease-out 0.2s; + -o-transition:all 0.2s ease-out 0.2s; + transition:all 0.2s ease-out 0.2s; +} + +#search,#contact { + background:#333; + padding:40px 10px 8px; + -webkit-border-radius:0 0 18px 0; + -moz-border-radius:0 0 18px 0; + border-radius:0 0 18px 0; +} + +#search input[type="text"],#contact input[type="text"] { + border:1px solid #aaa; + font:normal 12px Cambria,Georgia,Serif; + padding:2px 5px 2px; + width:120px; + margin-bottom:2px; + margin-right:2px; + position:relative; + color:#aaa; + -webkit-box-shadow:inset 0 0 5px #ccc; + -moz-box-shadow:inset 0 0 5px #ccc; + box-shadow:inset 0 0 5px #ccc; + -webkit-border-radius:0 0 10px 0; + -moz-border-radius:0 0 10px 0; + border-radius:0 0 10px 0; +} + +#contact textarea { + border:1px solid #aaa; + font:normal 12px Cambria,Georgia,Serif; + padding:2px 5px; + width:270px; + height:100px; + margin-top:4px; + position:relative; + color:#aaa; + -webkit-box-shadow:inset 0 0 5px #ccc; + -moz-box-shadow:inset 0 0 5px #ccc; + box-shadow:inset 0 0 5px #ccc; + -webkit-border-radius:0 0 10px 0; + -moz-border-radius:0 0 10px 0; + border-radius:0 0 10px 0; +} + +#contact input[type="submit"] { + background:-webkit-linear-gradient(top,#666,#000,#333); + background:-moz-linear-gradient(top,#666,#000,#333); + background:-ms-linear-gradient(top,#666,#000,#333); + background:-o-linear-gradient(top,#666,#000,#333); + background:linear-gradient(top,#666,#000,#333); + border:none; + -webkit-border-radius:3px; + -moz-border-radius:3px; + border-radius:3px; + -webkit-box-shadow:0 1px 1px #000; + -moz-box-shadow:0 1px 1px #000; + box-shadow:0 1px 1px #000; + padding:3px 10px 4px; + margin:4px 2px; + font:normal 10px Verdana,Arial,Sans-Serif; + color:#ccc; + float:right; +} + +#search input:focus,#contct input:focus,#contact textarea:focus { + color:#000; +} + +/* Loupe */ +#search:after { + content:""; + width:5px; + height:5px; + border:1px solid #666; + -webkit-border-radius:10px; + -moz-border-radius:10px; + border-radius:10px; + position:absolute; + left:100%; + margin-left:-25px; + top:46px; + z-index:100; +} + +#search:before { + content:""; + width:2px; + height:0px; + border:1px solid #666; + position:absolute; + z-index:3; + left:100%; + margin-left:-28px; + top:53px; + -webkit-transform:rotate(-42deg); + -moz-transform:rotate(-42deg); + -ms-transform:rotate(-42deg); + -o-transform:rotate(-42deg); + transform:rotate(-42deg); +} + +ul#piano li li { + width:150px; + height:auto; + display:block; + float:none; + background:transparent; +} + +ul#piano li li a,ul#piano li li a:active { + height:auto; + display:block; + padding:10px 15px; + background:#333; + font:normal 12px Arial,Sans-Serif; + color:#fff; + text-decoration:none; + -webkit-box-shadow:none; + -moz-box-shadow:none; + box-shadow:none; + border-radius:0px; + -webkit-border-radius:0px; + -moz-border-radius:0px; + border-width:1px 0; + border-style:solid; + border-color:#444 transparent #222 transparent; + top:0px; + margin-top:0px; +} + +ul#piano li li a:active:before,ul#piano li li a:active:after { + border:none !important; +} + +ul#piano li:hover ul,ul#piano li:hover #search,ul#piano li:hover #contact { + visibility:visible; + opacity:1; + margin-top:15px; +} + +ul#piano li li a:hover { + background:#111; + border-top-color:#222; + border-bottom-color:#000; +} + +/* Paper */ +.credit { + margin:50px; + width:390px; + height:50px; + padding:30px; + position:relative; + background:#fff; + font:italic 1em Cambria,Georgia,Serif; + color:#666; + background:-webkit-gradient(linear,0% 20%,0% 92%,from(#fff),to(#f9f9f9),color-stop(.1,#fff)); + background:-moz-linear-gradient(0 0 270deg,#fff,#fff 10%,#f9f9f9); + background:-ms-linear-gradient(0 0 270deg,#fff,#fff 10%,#f9f9f9); + background:-o-linear-gradient(0 0 270deg,#fff,#fff 10%,#f9f9f9); + background:linear-gradient(0 0 270deg,#fff,#fff 10%,#f9f9f9); + border:1px solid #ccc; + -webkit-box-shadow:1px 1px 4px rgba(0,0,0,0.1); + -moz-box-shadow:1px 1px 4px rgba(0,0,0,0.1); + box-shadow:1px 1px 4px rgba(0,0,0,0.1); + -webkit-border-bottom-right-radius:60px 5px; + -moz-border-radius-bottomright:60px 5px; + + border-bottom-right-radius:60px 5px; + -webkit-animation:taufik 1s; + -moz-animation:taufik 1s; + animation:taufik 1s; +} + +.credit:before { + content:""; + width:98%; + z-index:-1; + height:100%; + padding:0 0 1px 0; + position:absolute; + bottom:0; + right:0; + background:#fff; + background:-webkit-gradient(linear,0% 20%,0% 92%,from(#fff),to(#f9f9f9),color-stop(.1,#fff)); + background:-moz-linear-gradient(0 0 270deg,#fff,#fff 10%,#f9f9f9); + background:-ms-linear-gradient(0 0 270deg,#fff,#fff 10%,#f9f9f9); + background:-o-linear-gradient(0 0 270deg,#fff,#fff 10%,#f9f9f9); + background:linear-gradient(0 0 270deg,#fff,#fff 10%,#f9f9f9); + border:1px solid #ccc; + -webkit-box-shadow:1px 1px 8px rgba(0,0,0,0.1); + -moz-box-shadow:1px 1px 8px rgba(0,0,0,0.1); + box-shadow:1px 1px 8px rgba(0,0,0,0.1); + -webkit-border-bottom-right-radius:60px 5px; + -moz-border-radius-bottomright:60px 5px; + + border-bottom-right-radius:60px 5px; + -webkit-transform:skew(2deg,2deg) translate(-4px,8px); + -moz-transform:skew(2deg,2deg) translate(-4px,8px); + -ms-transform:skew(2deg,2deg) translate(-4px,8px); + -o-transform:skew(2deg,2deg) translate(-4px,8px); + transform:skew(2deg,2deg) translate(-4px,8px); +} + +.credit:after { + content:""; + width:98%; + z-index:-1; + height:98%; + padding:0 0 1px 0; + position:absolute; + bottom:0; + right:0; + background:#f3f3f3; + background:-webkit-gradient(linear,0% 20%,0% 92%,from(#fff),to(#f9f9f9),color-stop(.1,#fff)); + background:-moz-linear-gradient(0 0 270deg,#fff,#fff 10%,#f9f9f9); + background:-ms-linear-gradient(0 0 270deg,#fff,#fff 10%,#f9f9f9); + background:-o-linear-gradient(0 0 270deg,#fff,#fff 10%,#f9f9f9); + background:linear-gradient(0 0 270deg,#fff,#fff 10%,#f9f9f9); + border:1px solid #ccc; + -webkit-box-shadow:0px 0px 8px rgba(0,0,0,0.1); + -moz-box-shadow:0px 0px 8px rgba(0,0,0,0.1); + box-shadow:0px 0px 8px rgba(0,0,0,0.1); + -webkit-transform:rotate(-4deg) translate(-14px,-2px); + -moz-transform:rotate(-4deg) translate(-14px,-2px); + -ms-transform:rotate(-4deg) translate(-14px,-2px); + -o-transform:rotate(-4deg) translate(-14px,-2px); + transform:rotate(-4deg) translate(-14px,-2px); +} + +.credit_ribbon { + position:absolute; + top:0; + left:0; + width:115px; + height:35px; + background:rgba(0,0,0,0.1); + background:-webkit-gradient(linear,555% 20%,0% 92%,from(rgba(0,0,0,0.1)),to(rgba(0,0,0,0.0)),color-stop(.1,rgba(0,0,0,0.2))); + background:-moz-linear-gradient(555% 0 180deg,rgba(0,0,0,0.1),rgba(0,0,0,0.2) 10%,rgba(0,0,0,0.0)); + background:-ms-linear-gradient(555% 0 180deg,rgba(0,0,0,0.1),rgba(0,0,0,0.2) 10%,rgba(0,0,0,0.0)); + background:-o-linear-gradient(555% 0 180deg,rgba(0,0,0,0.1),rgba(0,0,0,0.2) 10%,rgba(0,0,0,0.0)); + background:linear-gradient(555% 0 180deg,rgba(0,0,0,0.1),rgba(0,0,0,0.2) 10%,rgba(0,0,0,0.0)); + border-left:1px dashed rgba(0,0,0,0.1); + border-right:1px dashed rgba(0,0,0,0.1); + -webkit-box-shadow:0px 1px 7px rgba(0,0,0,0.2); + -moz-box-shadow:0px 1px 7px rgba(0,0,0,0.2); + box-shadow:0px 1px 7px rgba(0,0,0,0.2); + -webkit-transform:rotate(-30deg) skew(0,0) translate(-30px,-20px); + -moz-transform:rotate(-30deg) skew(0,0) translate(-30px,-20px); + -o-transform:rotate(-30deg) skew(0,0) translate(-30px,-20px); + transform:rotate(-30deg) skew(0,0) translate(-30px,-20px); +} + +.clear { + clear:both; +} + + +/* Animation */ +@-webkit-keyframes taufik { + from {opacity:0;} + to {opacity:1;} +} +@-moz-keyframes taufik { + from {opacity:0;} + to {opacity:1;} +} +@keyframes taufik { + from {opacity:0;} + to {opacity:1;} +} \ No newline at end of file diff --git a/data/keyboard.json b/data/keyboard.json new file mode 100644 index 0000000..5fdf433 --- /dev/null +++ b/data/keyboard.json @@ -0,0 +1,88 @@ +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • + +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..0a88315 --- /dev/null +++ b/index.html @@ -0,0 +1,66 @@ + + + + + + +
    + +
    + + + + \ No newline at end of file diff --git a/js/controllers-src/keysController.js b/js/controllers-src/keysController.js new file mode 100644 index 0000000..80f341b --- /dev/null +++ b/js/controllers-src/keysController.js @@ -0,0 +1,14 @@ +'use strict'; + +var $ = require('jquery'), + Fiber = require('fiber'); + + +module.exports = Fiber.extend(function (base) { + + return { + init: function (options) { + + }, + }; +}); \ No newline at end of file diff --git a/js/controllers/keysController.js b/js/controllers/keysController.js new file mode 100644 index 0000000..5305677 --- /dev/null +++ b/js/controllers/keysController.js @@ -0,0 +1,15 @@ +define(function (require, exports, module) {'use strict'; + +var $ = require('jquery'), + Fiber = require('fiber'); + + +module.exports = Fiber.extend(function (base) { + + return { + init: function (options) { + + }, + }; +}); +}); diff --git a/js/libs/backbone-min.js b/js/libs/backbone-min.js new file mode 100644 index 0000000..8ea4b13 --- /dev/null +++ b/js/libs/backbone-min.js @@ -0,0 +1,2 @@ +(function(t,e){if(typeof define==="function"&&define.amd){define(["underscore","jquery","exports"],function(i,r,s){t.Backbone=e(t,s,i,r)})}else if(typeof exports!=="undefined"){var i=require("underscore");e(t,exports,i)}else{t.Backbone=e(t,{},t._,t.jQuery||t.Zepto||t.ender||t.$)}})(this,function(t,e,i,r){var s=t.Backbone;var n=[];var a=n.push;var o=n.slice;var h=n.splice;e.VERSION="1.1.2";e.$=r;e.noConflict=function(){t.Backbone=s;return this};e.emulateHTTP=false;e.emulateJSON=false;var u=e.Events={on:function(t,e,i){if(!c(this,"on",t,[e,i])||!e)return this;this._events||(this._events={});var r=this._events[t]||(this._events[t]=[]);r.push({callback:e,context:i,ctx:i||this});return this},once:function(t,e,r){if(!c(this,"once",t,[e,r])||!e)return this;var s=this;var n=i.once(function(){s.off(t,n);e.apply(this,arguments)});n._callback=e;return this.on(t,n,r)},off:function(t,e,r){var s,n,a,o,h,u,l,f;if(!this._events||!c(this,"off",t,[e,r]))return this;if(!t&&!e&&!r){this._events=void 0;return this}o=t?[t]:i.keys(this._events);for(h=0,u=o.length;h").attr(t);this.setElement(r,false)}else{this.setElement(i.result(this,"el"),false)}}});e.sync=function(t,r,s){var n=T[t];i.defaults(s||(s={}),{emulateHTTP:e.emulateHTTP,emulateJSON:e.emulateJSON});var a={type:n,dataType:"json"};if(!s.url){a.url=i.result(r,"url")||M()}if(s.data==null&&r&&(t==="create"||t==="update"||t==="patch")){a.contentType="application/json";a.data=JSON.stringify(s.attrs||r.toJSON(s))}if(s.emulateJSON){a.contentType="application/x-www-form-urlencoded";a.data=a.data?{model:a.data}:{}}if(s.emulateHTTP&&(n==="PUT"||n==="DELETE"||n==="PATCH")){a.type="POST";if(s.emulateJSON)a.data._method=n;var o=s.beforeSend;s.beforeSend=function(t){t.setRequestHeader("X-HTTP-Method-Override",n);if(o)return o.apply(this,arguments)}}if(a.type!=="GET"&&!s.emulateJSON){a.processData=false}if(a.type==="PATCH"&&k){a.xhr=function(){return new ActiveXObject("Microsoft.XMLHTTP")}}var h=s.xhr=e.ajax(i.extend(a,s));r.trigger("request",r,h,s);return h};var k=typeof window!=="undefined"&&!!window.ActiveXObject&&!(window.XMLHttpRequest&&(new XMLHttpRequest).dispatchEvent);var T={create:"POST",update:"PUT",patch:"PATCH","delete":"DELETE",read:"GET"};e.ajax=function(){return e.$.ajax.apply(e.$,arguments)};var $=e.Router=function(t){t||(t={});if(t.routes)this.routes=t.routes;this._bindRoutes();this.initialize.apply(this,arguments)};var S=/\((.*?)\)/g;var H=/(\(\?)?:\w+/g;var A=/\*\w+/g;var I=/[\-{}\[\]+?.,\\\^$|#\s]/g;i.extend($.prototype,u,{initialize:function(){},route:function(t,r,s){if(!i.isRegExp(t))t=this._routeToRegExp(t);if(i.isFunction(r)){s=r;r=""}if(!s)s=this[r];var n=this;e.history.route(t,function(i){var a=n._extractParameters(t,i);n.execute(s,a);n.trigger.apply(n,["route:"+r].concat(a));n.trigger("route",r,a);e.history.trigger("route",n,r,a)});return this},execute:function(t,e){if(t)t.apply(this,e)},navigate:function(t,i){e.history.navigate(t,i);return this},_bindRoutes:function(){if(!this.routes)return;this.routes=i.result(this,"routes");var t,e=i.keys(this.routes);while((t=e.pop())!=null){this.route(t,this.routes[t])}},_routeToRegExp:function(t){t=t.replace(I,"\\$&").replace(S,"(?:$1)?").replace(H,function(t,e){return e?t:"([^/?]+)"}).replace(A,"([^?]*?)");return new RegExp("^"+t+"(?:\\?([\\s\\S]*))?$")},_extractParameters:function(t,e){var r=t.exec(e).slice(1);return i.map(r,function(t,e){if(e===r.length-1)return t||null;return t?decodeURIComponent(t):null})}});var N=e.History=function(){this.handlers=[];i.bindAll(this,"checkUrl");if(typeof window!=="undefined"){this.location=window.location;this.history=window.history}};var R=/^[#\/]|\s+$/g;var O=/^\/+|\/+$/g;var P=/msie [\w.]+/;var C=/\/$/;var j=/#.*$/;N.started=false;i.extend(N.prototype,u,{interval:50,atRoot:function(){return this.location.pathname.replace(/[^\/]$/,"$&/")===this.root},getHash:function(t){var e=(t||this).location.href.match(/#(.*)$/);return e?e[1]:""},getFragment:function(t,e){if(t==null){if(this._hasPushState||!this._wantsHashChange||e){t=decodeURI(this.location.pathname+this.location.search);var i=this.root.replace(C,"");if(!t.indexOf(i))t=t.slice(i.length)}else{t=this.getHash()}}return t.replace(R,"")},start:function(t){if(N.started)throw new Error("Backbone.history has already been started");N.started=true;this.options=i.extend({root:"/"},this.options,t);this.root=this.options.root;this._wantsHashChange=this.options.hashChange!==false;this._wantsPushState=!!this.options.pushState;this._hasPushState=!!(this.options.pushState&&this.history&&this.history.pushState);var r=this.getFragment();var s=document.documentMode;var n=P.exec(navigator.userAgent.toLowerCase())&&(!s||s<=7);this.root=("/"+this.root+"/").replace(O,"/");if(n&&this._wantsHashChange){var a=e.$('