├── README.md
├── SwitchBeat.png
├── SwitchBeat1.png
├── css
    ├── bootstrap-responsive.css
    ├── bootstrap.css
    ├── custom.css
    ├── font-awesome.css
    └── font-mfizz.css
├── fonts
    ├── FontAwesome.otf
    ├── font-mfizz.eot
    ├── font-mfizz.svg
    ├── font-mfizz.ttf
    ├── font-mfizz.woff
    ├── fontawesome-webfont.eot
    ├── fontawesome-webfont.svg
    ├── fontawesome-webfont.ttf
    ├── fontawesome-webfont.woff
    └── icons.json
├── images
    ├── EchoNest.png
    ├── github.png
    └── jekyll.png
├── javascript
    ├── Chart.js
    ├── bootstrap.min.js
    ├── jquery.min.js
    ├── raphael-min.js
    └── remix.js
└── switchbeat.html


/README.md:
--------------------------------------------------------------------------------
 1 | # SwitchBeat
 2 | <img src="SwitchBeat1.png" alt="SwitchBeatWebsite">
 3 | <img src="SwitchBeat.png" alt="SwitchBeatMashup">
 4 | 
 5 | ## Check it out
 6 | <a href="http://kumarcode.com/switchbeat.html" alt="kumarcode.com/switchbeat">kumarcode.com/switchbeat.html</a>
 7 | ## Examples
 8 | <a href="http://kumarcode.com/switchbeatexamples.html" alt="kumarcode.com/switchbeatexamples">kumarcode.com/switchbeatexamples.html</a>
 9 | ## Uses
10 | <ul>
11 | <li> Raphaël.js </li>
12 | <li> Chart.js </li>
13 | </ul>
14 | 
15 | ## Description
16 | Takes any two songs that you supply and creates a mashup between them. 
17 | ### How it works
18 | The program was inspired by the infinite jukebox. Music Analysis is done on
19 | the Echonest servers. SwitchBeat uses this analysis to compare the beats of
20 | both songs. Using this analysis it creates a normally distributed beat distance
21 | dataset. Then using the parameters you specify it generates connections
22 | between both songs.
23 | ### How to use it
24 | #### 1. Select the parameters 
25 | `%` for <b>music connections</b>: Increasing this will increase the number of
26 | connections created. I have set the default to `5%`.<br>
27 | `%` for <b>connection jump</b>: Increasing this will increase the chance that
28 | SwitchBeat will jump on this connection. I have set the default to `30%`.<br>
29 | `#` for <b>maximum connections per beat</b>: Increasing this will increase max
30 | number of connections a beat can have. I have set the default to `4`.<br>
31 | `on/off` for <b> Infinite Mode</b>: If it is on, when the program reaches the end
32 | of one song it will jump to the start of another. I have set the default to
33 | `on`.<br>
34 | #### 2. Upload songs
35 | You will be asked to upload your songs one by one. 
36 | <ul>
37 | <li> Please upload a .mp3, .flacs, .m4a, or .opus will not be
38 | accepted</li>
39 | <li> Try to upload in good quality 320 kbps or V0 is fine</li>
40 | </ul>
41 | 
42 | #### 3. Wait for the analysis to finish
43 | 
44 | #### 4. Play the Mashup!
45 | 
46 | 
47 | 
48 | 
49 | 
50 | 


--------------------------------------------------------------------------------
/SwitchBeat.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikhil/SwitchBeat/208933030832ec852c7d588bc52cae27f443f03c/SwitchBeat.png


--------------------------------------------------------------------------------
/SwitchBeat1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikhil/SwitchBeat/208933030832ec852c7d588bc52cae27f443f03c/SwitchBeat1.png


--------------------------------------------------------------------------------
/css/bootstrap-responsive.css:
--------------------------------------------------------------------------------
   1 | /*!
   2 |  * Bootstrap Responsive v2.1.0
   3 |  *
   4 |  * Copyright 2012 Twitter, Inc
   5 |  * Licensed under the Apache License v2.0
   6 |  * http://www.apache.org/licenses/LICENSE-2.0
   7 |  *
   8 |  * Designed and built with all the love in the world @twitter by @mdo and @fat.
   9 |  */
  10 | 
  11 | .clearfix {
  12 |   *zoom: 1;
  13 | }
  14 | 
  15 | .clearfix:before,
  16 | .clearfix:after {
  17 |   display: table;
  18 |   line-height: 0;
  19 |   content: "";
  20 | }
  21 | 
  22 | .clearfix:after {
  23 |   clear: both;
  24 | }
  25 | 
  26 | .hide-text {
  27 |   font: 0/0 a;
  28 |   color: transparent;
  29 |   text-shadow: none;
  30 |   background-color: transparent;
  31 |   border: 0;
  32 | }
  33 | 
  34 | .input-block-level {
  35 |   display: block;
  36 |   width: 100%;
  37 |   min-height: 30px;
  38 |   -webkit-box-sizing: border-box;
  39 |      -moz-box-sizing: border-box;
  40 |           box-sizing: border-box;
  41 | }
  42 | 
  43 | .hidden {
  44 |   display: none;
  45 |   visibility: hidden;
  46 | }
  47 | 
  48 | .visible-phone {
  49 |   display: none !important;
  50 | }
  51 | 
  52 | .visible-tablet {
  53 |   display: none !important;
  54 | }
  55 | 
  56 | .hidden-desktop {
  57 |   display: none !important;
  58 | }
  59 | 
  60 | .visible-desktop {
  61 |   display: inherit !important;
  62 | }
  63 | 
  64 | @media (min-width: 768px) and (max-width: 979px) {
  65 |   .hidden-desktop {
  66 |     display: inherit !important;
  67 |   }
  68 |   .visible-desktop {
  69 |     display: none !important ;
  70 |   }
  71 |   .visible-tablet {
  72 |     display: inherit !important;
  73 |   }
  74 |   .hidden-tablet {
  75 |     display: none !important;
  76 |   }
  77 | }
  78 | 
  79 | @media (max-width: 767px) {
  80 |   .hidden-desktop {
  81 |     display: inherit !important;
  82 |   }
  83 |   .visible-desktop {
  84 |     display: none !important;
  85 |   }
  86 |   .visible-phone {
  87 |     display: inherit !important;
  88 |   }
  89 |   .hidden-phone {
  90 |     display: none !important;
  91 |   }
  92 | }
  93 | 
  94 | @media (min-width: 1200px) {
  95 |   .row {
  96 |     margin-left: -30px;
  97 |     *zoom: 1;
  98 |   }
  99 |   .row:before,
 100 |   .row:after {
 101 |     display: table;
 102 |     line-height: 0;
 103 |     content: "";
 104 |   }
 105 |   .row:after {
 106 |     clear: both;
 107 |   }
 108 |   [class*="span"] {
 109 |     float: left;
 110 |     margin-left: 30px;
 111 |   }
 112 |   .container,
 113 |   .navbar-static-top .container,
 114 |   .navbar-fixed-top .container,
 115 |   .navbar-fixed-bottom .container {
 116 |     width: 1170px;
 117 |   }
 118 |   .span12 {
 119 |     width: 1170px;
 120 |   }
 121 |   .span11 {
 122 |     width: 1070px;
 123 |   }
 124 |   .span10 {
 125 |     width: 970px;
 126 |   }
 127 |   .span9 {
 128 |     width: 870px;
 129 |   }
 130 |   .span8 {
 131 |     width: 770px;
 132 |   }
 133 |   .span7 {
 134 |     width: 670px;
 135 |   }
 136 |   .span6 {
 137 |     width: 570px;
 138 |   }
 139 |   .span5 {
 140 |     width: 470px;
 141 |   }
 142 |   .span4 {
 143 |     width: 370px;
 144 |   }
 145 |   .span3 {
 146 |     width: 270px;
 147 |   }
 148 |   .span2 {
 149 |     width: 170px;
 150 |   }
 151 |   .span1 {
 152 |     width: 70px;
 153 |   }
 154 |   .offset12 {
 155 |     margin-left: 1230px;
 156 |   }
 157 |   .offset11 {
 158 |     margin-left: 1130px;
 159 |   }
 160 |   .offset10 {
 161 |     margin-left: 1030px;
 162 |   }
 163 |   .offset9 {
 164 |     margin-left: 930px;
 165 |   }
 166 |   .offset8 {
 167 |     margin-left: 830px;
 168 |   }
 169 |   .offset7 {
 170 |     margin-left: 730px;
 171 |   }
 172 |   .offset6 {
 173 |     margin-left: 630px;
 174 |   }
 175 |   .offset5 {
 176 |     margin-left: 530px;
 177 |   }
 178 |   .offset4 {
 179 |     margin-left: 430px;
 180 |   }
 181 |   .offset3 {
 182 |     margin-left: 330px;
 183 |   }
 184 |   .offset2 {
 185 |     margin-left: 230px;
 186 |   }
 187 |   .offset1 {
 188 |     margin-left: 130px;
 189 |   }
 190 |   .row-fluid {
 191 |     width: 100%;
 192 |     *zoom: 1;
 193 |   }
 194 |   .row-fluid:before,
 195 |   .row-fluid:after {
 196 |     display: table;
 197 |     line-height: 0;
 198 |     content: "";
 199 |   }
 200 |   .row-fluid:after {
 201 |     clear: both;
 202 |   }
 203 |   .row-fluid [class*="span"] {
 204 |     display: block;
 205 |     float: left;
 206 |     width: 100%;
 207 |     min-height: 30px;
 208 |     margin-left: 2.564102564102564%;
 209 |     *margin-left: 2.5109110747408616%;
 210 |     -webkit-box-sizing: border-box;
 211 |        -moz-box-sizing: border-box;
 212 |             box-sizing: border-box;
 213 |   }
 214 |   .row-fluid [class*="span"]:first-child {
 215 |     margin-left: 0;
 216 |   }
 217 |   .row-fluid .span12 {
 218 |     width: 100%;
 219 |     *width: 99.94680851063829%;
 220 |   }
 221 |   .row-fluid .span11 {
 222 |     width: 91.45299145299145%;
 223 |     *width: 91.39979996362975%;
 224 |   }
 225 |   .row-fluid .span10 {
 226 |     width: 82.90598290598291%;
 227 |     *width: 82.8527914166212%;
 228 |   }
 229 |   .row-fluid .span9 {
 230 |     width: 74.35897435897436%;
 231 |     *width: 74.30578286961266%;
 232 |   }
 233 |   .row-fluid .span8 {
 234 |     width: 65.81196581196582%;
 235 |     *width: 65.75877432260411%;
 236 |   }
 237 |   .row-fluid .span7 {
 238 |     width: 57.26495726495726%;
 239 |     *width: 57.21176577559556%;
 240 |   }
 241 |   .row-fluid .span6 {
 242 |     width: 48.717948717948715%;
 243 |     *width: 48.664757228587014%;
 244 |   }
 245 |   .row-fluid .span5 {
 246 |     width: 40.17094017094017%;
 247 |     *width: 40.11774868157847%;
 248 |   }
 249 |   .row-fluid .span4 {
 250 |     width: 31.623931623931625%;
 251 |     *width: 31.570740134569924%;
 252 |   }
 253 |   .row-fluid .span3 {
 254 |     width: 23.076923076923077%;
 255 |     *width: 23.023731587561375%;
 256 |   }
 257 |   .row-fluid .span2 {
 258 |     width: 14.52991452991453%;
 259 |     *width: 14.476723040552828%;
 260 |   }
 261 |   .row-fluid .span1 {
 262 |     width: 5.982905982905983%;
 263 |     *width: 5.929714493544281%;
 264 |   }
 265 |   .row-fluid .offset12 {
 266 |     margin-left: 105.12820512820512%;
 267 |     *margin-left: 105.02182214948171%;
 268 |   }
 269 |   .row-fluid .offset12:first-child {
 270 |     margin-left: 102.56410256410257%;
 271 |     *margin-left: 102.45771958537915%;
 272 |   }
 273 |   .row-fluid .offset11 {
 274 |     margin-left: 96.58119658119658%;
 275 |     *margin-left: 96.47481360247316%;
 276 |   }
 277 |   .row-fluid .offset11:first-child {
 278 |     margin-left: 94.01709401709402%;
 279 |     *margin-left: 93.91071103837061%;
 280 |   }
 281 |   .row-fluid .offset10 {
 282 |     margin-left: 88.03418803418803%;
 283 |     *margin-left: 87.92780505546462%;
 284 |   }
 285 |   .row-fluid .offset10:first-child {
 286 |     margin-left: 85.47008547008548%;
 287 |     *margin-left: 85.36370249136206%;
 288 |   }
 289 |   .row-fluid .offset9 {
 290 |     margin-left: 79.48717948717949%;
 291 |     *margin-left: 79.38079650845607%;
 292 |   }
 293 |   .row-fluid .offset9:first-child {
 294 |     margin-left: 76.92307692307693%;
 295 |     *margin-left: 76.81669394435352%;
 296 |   }
 297 |   .row-fluid .offset8 {
 298 |     margin-left: 70.94017094017094%;
 299 |     *margin-left: 70.83378796144753%;
 300 |   }
 301 |   .row-fluid .offset8:first-child {
 302 |     margin-left: 68.37606837606839%;
 303 |     *margin-left: 68.26968539734497%;
 304 |   }
 305 |   .row-fluid .offset7 {
 306 |     margin-left: 62.393162393162385%;
 307 |     *margin-left: 62.28677941443899%;
 308 |   }
 309 |   .row-fluid .offset7:first-child {
 310 |     margin-left: 59.82905982905982%;
 311 |     *margin-left: 59.72267685033642%;
 312 |   }
 313 |   .row-fluid .offset6 {
 314 |     margin-left: 53.84615384615384%;
 315 |     *margin-left: 53.739770867430444%;
 316 |   }
 317 |   .row-fluid .offset6:first-child {
 318 |     margin-left: 51.28205128205128%;
 319 |     *margin-left: 51.175668303327875%;
 320 |   }
 321 |   .row-fluid .offset5 {
 322 |     margin-left: 45.299145299145295%;
 323 |     *margin-left: 45.1927623204219%;
 324 |   }
 325 |   .row-fluid .offset5:first-child {
 326 |     margin-left: 42.73504273504273%;
 327 |     *margin-left: 42.62865975631933%;
 328 |   }
 329 |   .row-fluid .offset4 {
 330 |     margin-left: 36.75213675213675%;
 331 |     *margin-left: 36.645753773413354%;
 332 |   }
 333 |   .row-fluid .offset4:first-child {
 334 |     margin-left: 34.18803418803419%;
 335 |     *margin-left: 34.081651209310785%;
 336 |   }
 337 |   .row-fluid .offset3 {
 338 |     margin-left: 28.205128205128204%;
 339 |     *margin-left: 28.0987452264048%;
 340 |   }
 341 |   .row-fluid .offset3:first-child {
 342 |     margin-left: 25.641025641025642%;
 343 |     *margin-left: 25.53464266230224%;
 344 |   }
 345 |   .row-fluid .offset2 {
 346 |     margin-left: 19.65811965811966%;
 347 |     *margin-left: 19.551736679396257%;
 348 |   }
 349 |   .row-fluid .offset2:first-child {
 350 |     margin-left: 17.094017094017094%;
 351 |     *margin-left: 16.98763411529369%;
 352 |   }
 353 |   .row-fluid .offset1 {
 354 |     margin-left: 11.11111111111111%;
 355 |     *margin-left: 11.004728132387708%;
 356 |   }
 357 |   .row-fluid .offset1:first-child {
 358 |     margin-left: 8.547008547008547%;
 359 |     *margin-left: 8.440625568285142%;
 360 |   }
 361 |   input,
 362 |   textarea,
 363 |   .uneditable-input {
 364 |     margin-left: 0;
 365 |   }
 366 |   .controls-row [class*="span"] + [class*="span"] {
 367 |     margin-left: 30px;
 368 |   }
 369 |   input.span12,
 370 |   textarea.span12,
 371 |   .uneditable-input.span12 {
 372 |     width: 1156px;
 373 |   }
 374 |   input.span11,
 375 |   textarea.span11,
 376 |   .uneditable-input.span11 {
 377 |     width: 1056px;
 378 |   }
 379 |   input.span10,
 380 |   textarea.span10,
 381 |   .uneditable-input.span10 {
 382 |     width: 956px;
 383 |   }
 384 |   input.span9,
 385 |   textarea.span9,
 386 |   .uneditable-input.span9 {
 387 |     width: 856px;
 388 |   }
 389 |   input.span8,
 390 |   textarea.span8,
 391 |   .uneditable-input.span8 {
 392 |     width: 756px;
 393 |   }
 394 |   input.span7,
 395 |   textarea.span7,
 396 |   .uneditable-input.span7 {
 397 |     width: 656px;
 398 |   }
 399 |   input.span6,
 400 |   textarea.span6,
 401 |   .uneditable-input.span6 {
 402 |     width: 556px;
 403 |   }
 404 |   input.span5,
 405 |   textarea.span5,
 406 |   .uneditable-input.span5 {
 407 |     width: 456px;
 408 |   }
 409 |   input.span4,
 410 |   textarea.span4,
 411 |   .uneditable-input.span4 {
 412 |     width: 356px;
 413 |   }
 414 |   input.span3,
 415 |   textarea.span3,
 416 |   .uneditable-input.span3 {
 417 |     width: 256px;
 418 |   }
 419 |   input.span2,
 420 |   textarea.span2,
 421 |   .uneditable-input.span2 {
 422 |     width: 156px;
 423 |   }
 424 |   input.span1,
 425 |   textarea.span1,
 426 |   .uneditable-input.span1 {
 427 |     width: 56px;
 428 |   }
 429 |   .thumbnails {
 430 |     margin-left: -30px;
 431 |   }
 432 |   .thumbnails > li {
 433 |     margin-left: 30px;
 434 |   }
 435 |   .row-fluid .thumbnails {
 436 |     margin-left: 0;
 437 |   }
 438 | }
 439 | 
 440 | @media (min-width: 768px) and (max-width: 979px) {
 441 |   .row {
 442 |     margin-left: -20px;
 443 |     *zoom: 1;
 444 |   }
 445 |   .row:before,
 446 |   .row:after {
 447 |     display: table;
 448 |     line-height: 0;
 449 |     content: "";
 450 |   }
 451 |   .row:after {
 452 |     clear: both;
 453 |   }
 454 |   [class*="span"] {
 455 |     float: left;
 456 |     margin-left: 20px;
 457 |   }
 458 |   .container,
 459 |   .navbar-static-top .container,
 460 |   .navbar-fixed-top .container,
 461 |   .navbar-fixed-bottom .container {
 462 |     width: 724px;
 463 |   }
 464 |   .span12 {
 465 |     width: 724px;
 466 |   }
 467 |   .span11 {
 468 |     width: 662px;
 469 |   }
 470 |   .span10 {
 471 |     width: 600px;
 472 |   }
 473 |   .span9 {
 474 |     width: 538px;
 475 |   }
 476 |   .span8 {
 477 |     width: 476px;
 478 |   }
 479 |   .span7 {
 480 |     width: 414px;
 481 |   }
 482 |   .span6 {
 483 |     width: 352px;
 484 |   }
 485 |   .span5 {
 486 |     width: 290px;
 487 |   }
 488 |   .span4 {
 489 |     width: 228px;
 490 |   }
 491 |   .span3 {
 492 |     width: 166px;
 493 |   }
 494 |   .span2 {
 495 |     width: 104px;
 496 |   }
 497 |   .span1 {
 498 |     width: 42px;
 499 |   }
 500 |   .offset12 {
 501 |     margin-left: 764px;
 502 |   }
 503 |   .offset11 {
 504 |     margin-left: 702px;
 505 |   }
 506 |   .offset10 {
 507 |     margin-left: 640px;
 508 |   }
 509 |   .offset9 {
 510 |     margin-left: 578px;
 511 |   }
 512 |   .offset8 {
 513 |     margin-left: 516px;
 514 |   }
 515 |   .offset7 {
 516 |     margin-left: 454px;
 517 |   }
 518 |   .offset6 {
 519 |     margin-left: 392px;
 520 |   }
 521 |   .offset5 {
 522 |     margin-left: 330px;
 523 |   }
 524 |   .offset4 {
 525 |     margin-left: 268px;
 526 |   }
 527 |   .offset3 {
 528 |     margin-left: 206px;
 529 |   }
 530 |   .offset2 {
 531 |     margin-left: 144px;
 532 |   }
 533 |   .offset1 {
 534 |     margin-left: 82px;
 535 |   }
 536 |   .row-fluid {
 537 |     width: 100%;
 538 |     *zoom: 1;
 539 |   }
 540 |   .row-fluid:before,
 541 |   .row-fluid:after {
 542 |     display: table;
 543 |     line-height: 0;
 544 |     content: "";
 545 |   }
 546 |   .row-fluid:after {
 547 |     clear: both;
 548 |   }
 549 |   .row-fluid [class*="span"] {
 550 |     display: block;
 551 |     float: left;
 552 |     width: 100%;
 553 |     min-height: 30px;
 554 |     margin-left: 2.7624309392265194%;
 555 |     *margin-left: 2.709239449864817%;
 556 |     -webkit-box-sizing: border-box;
 557 |        -moz-box-sizing: border-box;
 558 |             box-sizing: border-box;
 559 |   }
 560 |   .row-fluid [class*="span"]:first-child {
 561 |     margin-left: 0;
 562 |   }
 563 |   .row-fluid .span12 {
 564 |     width: 100%;
 565 |     *width: 99.94680851063829%;
 566 |   }
 567 |   .row-fluid .span11 {
 568 |     width: 91.43646408839778%;
 569 |     *width: 91.38327259903608%;
 570 |   }
 571 |   .row-fluid .span10 {
 572 |     width: 82.87292817679558%;
 573 |     *width: 82.81973668743387%;
 574 |   }
 575 |   .row-fluid .span9 {
 576 |     width: 74.30939226519337%;
 577 |     *width: 74.25620077583166%;
 578 |   }
 579 |   .row-fluid .span8 {
 580 |     width: 65.74585635359117%;
 581 |     *width: 65.69266486422946%;
 582 |   }
 583 |   .row-fluid .span7 {
 584 |     width: 57.18232044198895%;
 585 |     *width: 57.12912895262725%;
 586 |   }
 587 |   .row-fluid .span6 {
 588 |     width: 48.61878453038674%;
 589 |     *width: 48.56559304102504%;
 590 |   }
 591 |   .row-fluid .span5 {
 592 |     width: 40.05524861878453%;
 593 |     *width: 40.00205712942283%;
 594 |   }
 595 |   .row-fluid .span4 {
 596 |     width: 31.491712707182323%;
 597 |     *width: 31.43852121782062%;
 598 |   }
 599 |   .row-fluid .span3 {
 600 |     width: 22.92817679558011%;
 601 |     *width: 22.87498530621841%;
 602 |   }
 603 |   .row-fluid .span2 {
 604 |     width: 14.3646408839779%;
 605 |     *width: 14.311449394616199%;
 606 |   }
 607 |   .row-fluid .span1 {
 608 |     width: 5.801104972375691%;
 609 |     *width: 5.747913483013988%;
 610 |   }
 611 |   .row-fluid .offset12 {
 612 |     margin-left: 105.52486187845304%;
 613 |     *margin-left: 105.41847889972962%;
 614 |   }
 615 |   .row-fluid .offset12:first-child {
 616 |     margin-left: 102.76243093922652%;
 617 |     *margin-left: 102.6560479605031%;
 618 |   }
 619 |   .row-fluid .offset11 {
 620 |     margin-left: 96.96132596685082%;
 621 |     *margin-left: 96.8549429881274%;
 622 |   }
 623 |   .row-fluid .offset11:first-child {
 624 |     margin-left: 94.1988950276243%;
 625 |     *margin-left: 94.09251204890089%;
 626 |   }
 627 |   .row-fluid .offset10 {
 628 |     margin-left: 88.39779005524862%;
 629 |     *margin-left: 88.2914070765252%;
 630 |   }
 631 |   .row-fluid .offset10:first-child {
 632 |     margin-left: 85.6353591160221%;
 633 |     *margin-left: 85.52897613729868%;
 634 |   }
 635 |   .row-fluid .offset9 {
 636 |     margin-left: 79.8342541436464%;
 637 |     *margin-left: 79.72787116492299%;
 638 |   }
 639 |   .row-fluid .offset9:first-child {
 640 |     margin-left: 77.07182320441989%;
 641 |     *margin-left: 76.96544022569647%;
 642 |   }
 643 |   .row-fluid .offset8 {
 644 |     margin-left: 71.2707182320442%;
 645 |     *margin-left: 71.16433525332079%;
 646 |   }
 647 |   .row-fluid .offset8:first-child {
 648 |     margin-left: 68.50828729281768%;
 649 |     *margin-left: 68.40190431409427%;
 650 |   }
 651 |   .row-fluid .offset7 {
 652 |     margin-left: 62.70718232044199%;
 653 |     *margin-left: 62.600799341718584%;
 654 |   }
 655 |   .row-fluid .offset7:first-child {
 656 |     margin-left: 59.94475138121547%;
 657 |     *margin-left: 59.838368402492065%;
 658 |   }
 659 |   .row-fluid .offset6 {
 660 |     margin-left: 54.14364640883978%;
 661 |     *margin-left: 54.037263430116376%;
 662 |   }
 663 |   .row-fluid .offset6:first-child {
 664 |     margin-left: 51.38121546961326%;
 665 |     *margin-left: 51.27483249088986%;
 666 |   }
 667 |   .row-fluid .offset5 {
 668 |     margin-left: 45.58011049723757%;
 669 |     *margin-left: 45.47372751851417%;
 670 |   }
 671 |   .row-fluid .offset5:first-child {
 672 |     margin-left: 42.81767955801105%;
 673 |     *margin-left: 42.71129657928765%;
 674 |   }
 675 |   .row-fluid .offset4 {
 676 |     margin-left: 37.01657458563536%;
 677 |     *margin-left: 36.91019160691196%;
 678 |   }
 679 |   .row-fluid .offset4:first-child {
 680 |     margin-left: 34.25414364640884%;
 681 |     *margin-left: 34.14776066768544%;
 682 |   }
 683 |   .row-fluid .offset3 {
 684 |     margin-left: 28.45303867403315%;
 685 |     *margin-left: 28.346655695309746%;
 686 |   }
 687 |   .row-fluid .offset3:first-child {
 688 |     margin-left: 25.69060773480663%;
 689 |     *margin-left: 25.584224756083227%;
 690 |   }
 691 |   .row-fluid .offset2 {
 692 |     margin-left: 19.88950276243094%;
 693 |     *margin-left: 19.783119783707537%;
 694 |   }
 695 |   .row-fluid .offset2:first-child {
 696 |     margin-left: 17.12707182320442%;
 697 |     *margin-left: 17.02068884448102%;
 698 |   }
 699 |   .row-fluid .offset1 {
 700 |     margin-left: 11.32596685082873%;
 701 |     *margin-left: 11.219583872105325%;
 702 |   }
 703 |   .row-fluid .offset1:first-child {
 704 |     margin-left: 8.56353591160221%;
 705 |     *margin-left: 8.457152932878806%;
 706 |   }
 707 |   input,
 708 |   textarea,
 709 |   .uneditable-input {
 710 |     margin-left: 0;
 711 |   }
 712 |   .controls-row [class*="span"] + [class*="span"] {
 713 |     margin-left: 20px;
 714 |   }
 715 |   input.span12,
 716 |   textarea.span12,
 717 |   .uneditable-input.span12 {
 718 |     width: 710px;
 719 |   }
 720 |   input.span11,
 721 |   textarea.span11,
 722 |   .uneditable-input.span11 {
 723 |     width: 648px;
 724 |   }
 725 |   input.span10,
 726 |   textarea.span10,
 727 |   .uneditable-input.span10 {
 728 |     width: 586px;
 729 |   }
 730 |   input.span9,
 731 |   textarea.span9,
 732 |   .uneditable-input.span9 {
 733 |     width: 524px;
 734 |   }
 735 |   input.span8,
 736 |   textarea.span8,
 737 |   .uneditable-input.span8 {
 738 |     width: 462px;
 739 |   }
 740 |   input.span7,
 741 |   textarea.span7,
 742 |   .uneditable-input.span7 {
 743 |     width: 400px;
 744 |   }
 745 |   input.span6,
 746 |   textarea.span6,
 747 |   .uneditable-input.span6 {
 748 |     width: 338px;
 749 |   }
 750 |   input.span5,
 751 |   textarea.span5,
 752 |   .uneditable-input.span5 {
 753 |     width: 276px;
 754 |   }
 755 |   input.span4,
 756 |   textarea.span4,
 757 |   .uneditable-input.span4 {
 758 |     width: 214px;
 759 |   }
 760 |   input.span3,
 761 |   textarea.span3,
 762 |   .uneditable-input.span3 {
 763 |     width: 152px;
 764 |   }
 765 |   input.span2,
 766 |   textarea.span2,
 767 |   .uneditable-input.span2 {
 768 |     width: 90px;
 769 |   }
 770 |   input.span1,
 771 |   textarea.span1,
 772 |   .uneditable-input.span1 {
 773 |     width: 28px;
 774 |   }
 775 | }
 776 | 
 777 | @media (max-width: 767px) {
 778 |   body {
 779 |     padding-right: 20px;
 780 |     padding-left: 20px;
 781 |   }
 782 |   .navbar-fixed-top,
 783 |   .navbar-fixed-bottom {
 784 |     margin-right: -20px;
 785 |     margin-left: -20px;
 786 |   }
 787 |   .container-fluid {
 788 |     padding: 0;
 789 |   }
 790 |   .dl-horizontal dt {
 791 |     float: none;
 792 |     width: auto;
 793 |     clear: none;
 794 |     text-align: left;
 795 |   }
 796 |   .dl-horizontal dd {
 797 |     margin-left: 0;
 798 |   }
 799 |   .container {
 800 |     width: auto;
 801 |   }
 802 |   .row-fluid {
 803 |     width: 100%;
 804 |   }
 805 |   .row,
 806 |   .thumbnails {
 807 |     margin-left: 0;
 808 |   }
 809 |   .thumbnails > li {
 810 |     float: none;
 811 |     margin-left: 0;
 812 |   }
 813 |   [class*="span"],
 814 |   .row-fluid [class*="span"] {
 815 |     display: block;
 816 |     float: none;
 817 |     width: auto;
 818 |     margin-left: 0;
 819 |   }
 820 |   .span12,
 821 |   .row-fluid .span12 {
 822 |     width: 100%;
 823 |     -webkit-box-sizing: border-box;
 824 |        -moz-box-sizing: border-box;
 825 |             box-sizing: border-box;
 826 |   }
 827 |   .input-large,
 828 |   .input-xlarge,
 829 |   .input-xxlarge,
 830 |   input[class*="span"],
 831 |   select[class*="span"],
 832 |   textarea[class*="span"],
 833 |   .uneditable-input {
 834 |     display: block;
 835 |     width: 100%;
 836 |     min-height: 30px;
 837 |     -webkit-box-sizing: border-box;
 838 |        -moz-box-sizing: border-box;
 839 |             box-sizing: border-box;
 840 |   }
 841 |   .input-prepend input,
 842 |   .input-append input,
 843 |   .input-prepend input[class*="span"],
 844 |   .input-append input[class*="span"] {
 845 |     display: inline-block;
 846 |     width: auto;
 847 |   }
 848 |   .modal {
 849 |     position: fixed;
 850 |     top: 20px;
 851 |     right: 20px;
 852 |     left: 20px;
 853 |     width: auto;
 854 |     margin: 0;
 855 |   }
 856 |   .modal.fade.in {
 857 |     top: auto;
 858 |   }
 859 | }
 860 | 
 861 | @media (max-width: 480px) {
 862 |   .nav-collapse {
 863 |     -webkit-transform: translate3d(0, 0, 0);
 864 |   }
 865 |   .page-header h1 small {
 866 |     display: block;
 867 |     line-height: 20px;
 868 |   }
 869 |   input[type="checkbox"],
 870 |   input[type="radio"] {
 871 |     border: 1px solid #ccc;
 872 |   }
 873 |   .form-horizontal .control-group > label {
 874 |     float: none;
 875 |     width: auto;
 876 |     padding-top: 0;
 877 |     text-align: left;
 878 |   }
 879 |   .form-horizontal .controls {
 880 |     margin-left: 0;
 881 |   }
 882 |   .form-horizontal .control-list {
 883 |     padding-top: 0;
 884 |   }
 885 |   .form-horizontal .form-actions {
 886 |     padding-right: 10px;
 887 |     padding-left: 10px;
 888 |   }
 889 |   .modal {
 890 |     top: 10px;
 891 |     right: 10px;
 892 |     left: 10px;
 893 |   }
 894 |   .modal-header .close {
 895 |     padding: 10px;
 896 |     margin: -10px;
 897 |   }
 898 |   .carousel-caption {
 899 |     position: static;
 900 |   }
 901 | }
 902 | 
 903 | @media (max-width: 979px) {
 904 |   body {
 905 |     padding-top: 0;
 906 |   }
 907 |   .navbar-fixed-top,
 908 |   .navbar-fixed-bottom {
 909 |     position: static;
 910 |   }
 911 |   .navbar-fixed-top {
 912 |     margin-bottom: 20px;
 913 |   }
 914 |   .navbar-fixed-bottom {
 915 |     margin-top: 20px;
 916 |   }
 917 |   .navbar-fixed-top .navbar-inner,
 918 |   .navbar-fixed-bottom .navbar-inner {
 919 |     padding: 5px;
 920 |   }
 921 |   .navbar .container {
 922 |     width: auto;
 923 |     padding: 0;
 924 |   }
 925 |   .navbar .brand {
 926 |     padding-right: 10px;
 927 |     padding-left: 10px;
 928 |     margin: 0 0 0 -5px;
 929 |   }
 930 |   .nav-collapse {
 931 |     clear: both;
 932 |   }
 933 |   .nav-collapse .nav {
 934 |     float: none;
 935 |     margin: 0 0 10px;
 936 |   }
 937 |   .nav-collapse .nav > li {
 938 |     float: none;
 939 |   }
 940 |   .nav-collapse .nav > li > a {
 941 |     margin-bottom: 2px;
 942 |   }
 943 |   .nav-collapse .nav > .divider-vertical {
 944 |     display: none;
 945 |   }
 946 |   .nav-collapse .nav .nav-header {
 947 |     color: #555555;
 948 |     text-shadow: none;
 949 |   }
 950 |   .nav-collapse .nav > li > a,
 951 |   .nav-collapse .dropdown-menu a {
 952 |     padding: 9px 15px;
 953 |     font-weight: bold;
 954 |     color: #555555;
 955 |     -webkit-border-radius: 3px;
 956 |        -moz-border-radius: 3px;
 957 |             border-radius: 3px;
 958 |   }
 959 |   .nav-collapse .btn {
 960 |     padding: 4px 10px 4px;
 961 |     font-weight: normal;
 962 |     -webkit-border-radius: 4px;
 963 |        -moz-border-radius: 4px;
 964 |             border-radius: 4px;
 965 |   }
 966 |   .nav-collapse .dropdown-menu li + li a {
 967 |     margin-bottom: 2px;
 968 |   }
 969 |   .nav-collapse .nav > li > a:hover,
 970 |   .nav-collapse .dropdown-menu a:hover {
 971 |     background-color: #f2f2f2;
 972 |   }
 973 |   .navbar-inverse .nav-collapse .nav > li > a:hover,
 974 |   .navbar-inverse .nav-collapse .dropdown-menu a:hover {
 975 |     background-color: #111111;
 976 |   }
 977 |   .nav-collapse.in .btn-group {
 978 |     padding: 0;
 979 |     margin-top: 5px;
 980 |   }
 981 |   .nav-collapse .dropdown-menu {
 982 |     position: static;
 983 |     top: auto;
 984 |     left: auto;
 985 |     display: block;
 986 |     float: none;
 987 |     max-width: none;
 988 |     padding: 0;
 989 |     margin: 0 15px;
 990 |     background-color: transparent;
 991 |     border: none;
 992 |     -webkit-border-radius: 0;
 993 |        -moz-border-radius: 0;
 994 |             border-radius: 0;
 995 |     -webkit-box-shadow: none;
 996 |        -moz-box-shadow: none;
 997 |             box-shadow: none;
 998 |   }
 999 |   .nav-collapse .dropdown-menu:before,
1000 |   .nav-collapse .dropdown-menu:after {
1001 |     display: none;
1002 |   }
1003 |   .nav-collapse .dropdown-menu .divider {
1004 |     display: none;
1005 |   }
1006 |   .nav-collapse .navbar-form,
1007 |   .nav-collapse .navbar-search {
1008 |     float: none;
1009 |     padding: 10px 15px;
1010 |     margin: 10px 0;
1011 |     border-top: 1px solid #f2f2f2;
1012 |     border-bottom: 1px solid #f2f2f2;
1013 |     -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
1014 |        -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
1015 |             box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
1016 |   }
1017 |   .navbar .nav-collapse .nav.pull-right {
1018 |     float: none;
1019 |     margin-left: 0;
1020 |   }
1021 |   .nav-collapse,
1022 |   .nav-collapse.collapse {
1023 |     height: 0;
1024 |     overflow: hidden;
1025 |   }
1026 |   .navbar .btn-navbar {
1027 |     display: block;
1028 |   }
1029 |   .navbar-static .navbar-inner {
1030 |     padding-right: 10px;
1031 |     padding-left: 10px;
1032 |   }
1033 | }
1034 | 
1035 | @media (min-width: 980px) {
1036 |   .nav-collapse.collapse {
1037 |     height: auto !important;
1038 |     overflow: visible !important;
1039 |   }
1040 | }
1041 | 


--------------------------------------------------------------------------------
/css/custom.css:
--------------------------------------------------------------------------------
  1 | 
  2 | #bottomTitle
  3 | {
  4 | 
  5 | 	color:#2aa198;
  6 | 
  7 | }
  8 | 
  9 | #name
 10 | {
 11 | 
 12 | 	color:#6c71c4;
 13 | 
 14 | 
 15 | }	
 16 | 
 17 | 
 18 | 
 19 | .container{
 20 | 
 21 | 	padding-top: 50px;
 22 | 
 23 | 
 24 | }	
 25 | 
 26 | footer{
 27 | 
 28 | 	position:absolute;
 29 | 
 30 | }	
 31 | body{
 32 | padding-top: 0px;
 33 | background-color:#eee8d5;
 34 | color: #114141;
 35 | 
 36 | 
 37 | }	
 38 | .MusicStatus{
 39 | background-color: #fdf6e3;
 40 | 
 41 | 
 42 | height: 75px;
 43 | width: 400px;
 44 | -webkit-box-shadow: -3px -3px 10px 0px rgba(50, 50, 50, 0.79);
 45 | -moz-box-shadow: -3px -3px 10px 0px rgba(50, 50, 50, 0.79);
 46 | box-shadow: -3px -3px 10px 0px rgba(50, 50, 50, 0.79);
 47 | border-radius: 3px;
 48 | padding-top: 5px;
 49 | 
 50 | }
 51 | 
 52 | #rangeInput
 53 | {
 54 | 
 55 | 
 56 | 	width: 85%;
 57 | 
 58 | 
 59 | 
 60 | }
 61 | #rangeInputJump
 62 | {
 63 | 
 64 | 
 65 | 	width: 85%;
 66 | 
 67 | 
 68 | 
 69 | }
 70 | #rangeInputConnection
 71 | {
 72 | 
 73 | 
 74 | 	width: 85%;
 75 | 
 76 | 
 77 | 
 78 | }
 79 | 
 80 | #musicTilesStatus
 81 | {
 82 | 
 83 | padding-left: 15px;
 84 | padding-top: 10px;
 85 | 
 86 | 
 87 | 
 88 | }	
 89 | #programTitle
 90 | {
 91 | 
 92 | font-family: 'Great Vibes', cursive;
 93 | font-size: 50px;
 94 | position:relative;
 95 | top: -25px;
 96 | color:#004C4C;
 97 | }
 98 | .musicAndCode
 99 | {
100 | 
101 | color:#b37400;
102 | 
103 | }
104 | #programTitle i .musicAndCode
105 | {
106 | 
107 | color:#004C4C;
108 | }
109 | 
110 | #programDescrip
111 | {
112 | 
113 | font-family:'Lato';
114 | position: relative;
115 | top: -25px;
116 | color:#004C4C;
117 | 
118 | 
119 | 
120 | }
121 | 
122 | #inputParem {
123 | width: 60%;
124 | background-color: #fdf6e3;
125 | padding-left: 40px;
126 | padding-right: 40px;
127 | padding-top: 25px;
128 | padding-bottom: 25px;
129 | -webkit-box-shadow: -3px -3px 10px 0px rgba(50, 50, 50, 0.79);
130 | -moz-box-shadow: -3px -3px 10px 0px rgba(50, 50, 50, 0.79);
131 | box-shadow: -3px -3px 10px 0px rgba(50, 50, 50, 0.79);
132 | }
133 | 
134 | #uploadParem {
135 | width: 60%;
136 | background-color: #fdf6e3;
137 | padding-left: 40px;
138 | padding-right: 40px;
139 | padding-top: 25px;
140 | padding-bottom: 25px;
141 | -webkit-box-shadow: -3px -3px 10px 0px rgba(50, 50, 50, 0.79);
142 | -moz-box-shadow: -3px -3px 10px 0px rgba(50, 50, 50, 0.79);
143 | box-shadow: -3px -3px 10px 0px rgba(50, 50, 50, 0.79);
144 | }
145 | 
146 | 
147 | 
148 | .onoffswitch {
149 |     position: relative; width: 70px;
150 |     -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
151 | }
152 | .onoffswitch-checkbox {
153 |     display: none;
154 | }
155 | .onoffswitch-label {
156 |     display: block; overflow: hidden; cursor: pointer;
157 |     border: 2px solid #999999; border-radius: 18px;
158 | }
159 | .onoffswitch-inner {
160 |     display: block; width: 200%; margin-left: -100%;
161 |     -moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s;
162 |     -o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s;
163 | }
164 | .onoffswitch-inner:before, .onoffswitch-inner:after {
165 |     display: block; float: left; width: 50%; height: 18px; padding: 0; line-height: 18px;
166 |     font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
167 |     -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
168 | }
169 | .onoffswitch-inner:before {
170 |     content: "ON";
171 |     padding-left: 10px;
172 |     background-color: #34A7C1; color: #FFFFFF;
173 | }
174 | .onoffswitch-inner:after {
175 |     content: "OFF";
176 |     padding-right: 10px;
177 |     background-color: #EEEEEE; color: #999999;
178 |     text-align: right;
179 | }
180 | .onoffswitch-switch {
181 |     display: block; width: 25px; margin: -3.5px;
182 |     background: #FFFFFF;
183 |     border: 2px solid #999999; border-radius: 18px;
184 |     position: absolute; top: 0; bottom: 0; right: 48px;
185 |     -moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s;
186 |     -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s; 
187 | }
188 | .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
189 |     margin-left: 0;
190 | }
191 | .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
192 |     right: 0px; 
193 | }
194 | 
195 | 


--------------------------------------------------------------------------------
/css/font-awesome.css:
--------------------------------------------------------------------------------
   1 | /*!
   2 |  *  Font Awesome 4.2.0 by @davegandy - http://fontawesome.io - @fontawesome
   3 |  *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
   4 |  */
   5 | /* FONT PATH
   6 |  * -------------------------- */
   7 | @font-face {
   8 |   font-family: 'FontAwesome';
   9 |   src: url('../fonts/fontawesome-webfont.eot?v=4.2.0');
  10 |   src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
  11 |   font-weight: normal;
  12 |   font-style: normal;
  13 | }
  14 | .fa {
  15 |   display: inline-block;
  16 |   font: normal normal normal 14px/1 FontAwesome;
  17 |   font-size: inherit;
  18 |   text-rendering: auto;
  19 |   -webkit-font-smoothing: antialiased;
  20 |   -moz-osx-font-smoothing: grayscale;
  21 | }
  22 | /* makes the font 33% larger relative to the icon container */
  23 | .fa-lg {
  24 |   font-size: 1.33333333em;
  25 |   line-height: 0.75em;
  26 |   vertical-align: -15%;
  27 | }
  28 | .fa-2x {
  29 |   font-size: 2em;
  30 | }
  31 | .fa-3x {
  32 |   font-size: 3em;
  33 | }
  34 | .fa-4x {
  35 |   font-size: 4em;
  36 | }
  37 | .fa-5x {
  38 |   font-size: 5em;
  39 | }
  40 | .fa-fw {
  41 |   width: 1.28571429em;
  42 |   text-align: center;
  43 | }
  44 | .fa-ul {
  45 |   padding-left: 0;
  46 |   margin-left: 2.14285714em;
  47 |   list-style-type: none;
  48 | }
  49 | .fa-ul > li {
  50 |   position: relative;
  51 | }
  52 | .fa-li {
  53 |   position: absolute;
  54 |   left: -2.14285714em;
  55 |   width: 2.14285714em;
  56 |   top: 0.14285714em;
  57 |   text-align: center;
  58 | }
  59 | .fa-li.fa-lg {
  60 |   left: -1.85714286em;
  61 | }
  62 | .fa-border {
  63 |   padding: .2em .25em .15em;
  64 |   border: solid 0.08em #eeeeee;
  65 |   border-radius: .1em;
  66 | }
  67 | .pull-right {
  68 |   float: right;
  69 | }
  70 | .pull-left {
  71 |   float: left;
  72 | }
  73 | .fa.pull-left {
  74 |   margin-right: .3em;
  75 | }
  76 | .fa.pull-right {
  77 |   margin-left: .3em;
  78 | }
  79 | .fa-spin {
  80 |   -webkit-animation: fa-spin 2s infinite linear;
  81 |   animation: fa-spin 2s infinite linear;
  82 | }
  83 | @-webkit-keyframes fa-spin {
  84 |   0% {
  85 |     -webkit-transform: rotate(0deg);
  86 |     transform: rotate(0deg);
  87 |   }
  88 |   100% {
  89 |     -webkit-transform: rotate(359deg);
  90 |     transform: rotate(359deg);
  91 |   }
  92 | }
  93 | @keyframes fa-spin {
  94 |   0% {
  95 |     -webkit-transform: rotate(0deg);
  96 |     transform: rotate(0deg);
  97 |   }
  98 |   100% {
  99 |     -webkit-transform: rotate(359deg);
 100 |     transform: rotate(359deg);
 101 |   }
 102 | }
 103 | .fa-rotate-90 {
 104 |   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
 105 |   -webkit-transform: rotate(90deg);
 106 |   -ms-transform: rotate(90deg);
 107 |   transform: rotate(90deg);
 108 | }
 109 | .fa-rotate-180 {
 110 |   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
 111 |   -webkit-transform: rotate(180deg);
 112 |   -ms-transform: rotate(180deg);
 113 |   transform: rotate(180deg);
 114 | }
 115 | .fa-rotate-270 {
 116 |   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
 117 |   -webkit-transform: rotate(270deg);
 118 |   -ms-transform: rotate(270deg);
 119 |   transform: rotate(270deg);
 120 | }
 121 | .fa-flip-horizontal {
 122 |   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);
 123 |   -webkit-transform: scale(-1, 1);
 124 |   -ms-transform: scale(-1, 1);
 125 |   transform: scale(-1, 1);
 126 | }
 127 | .fa-flip-vertical {
 128 |   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);
 129 |   -webkit-transform: scale(1, -1);
 130 |   -ms-transform: scale(1, -1);
 131 |   transform: scale(1, -1);
 132 | }
 133 | :root .fa-rotate-90,
 134 | :root .fa-rotate-180,
 135 | :root .fa-rotate-270,
 136 | :root .fa-flip-horizontal,
 137 | :root .fa-flip-vertical {
 138 |   filter: none;
 139 | }
 140 | .fa-stack {
 141 |   position: relative;
 142 |   display: inline-block;
 143 |   width: 2em;
 144 |   height: 2em;
 145 |   line-height: 2em;
 146 |   vertical-align: middle;
 147 | }
 148 | .fa-stack-1x,
 149 | .fa-stack-2x {
 150 |   position: absolute;
 151 |   left: 0;
 152 |   width: 100%;
 153 |   text-align: center;
 154 | }
 155 | .fa-stack-1x {
 156 |   line-height: inherit;
 157 | }
 158 | .fa-stack-2x {
 159 |   font-size: 2em;
 160 | }
 161 | .fa-inverse {
 162 |   color: #ffffff;
 163 | }
 164 | /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
 165 |    readers do not read off random characters that represent icons */
 166 | .fa-glass:before {
 167 |   content: "\f000";
 168 | }
 169 | .fa-music:before {
 170 |   content: "\f001";
 171 | }
 172 | .fa-search:before {
 173 |   content: "\f002";
 174 | }
 175 | .fa-envelope-o:before {
 176 |   content: "\f003";
 177 | }
 178 | .fa-heart:before {
 179 |   content: "\f004";
 180 | }
 181 | .fa-star:before {
 182 |   content: "\f005";
 183 | }
 184 | .fa-star-o:before {
 185 |   content: "\f006";
 186 | }
 187 | .fa-user:before {
 188 |   content: "\f007";
 189 | }
 190 | .fa-film:before {
 191 |   content: "\f008";
 192 | }
 193 | .fa-th-large:before {
 194 |   content: "\f009";
 195 | }
 196 | .fa-th:before {
 197 |   content: "\f00a";
 198 | }
 199 | .fa-th-list:before {
 200 |   content: "\f00b";
 201 | }
 202 | .fa-check:before {
 203 |   content: "\f00c";
 204 | }
 205 | .fa-remove:before,
 206 | .fa-close:before,
 207 | .fa-times:before {
 208 |   content: "\f00d";
 209 | }
 210 | .fa-search-plus:before {
 211 |   content: "\f00e";
 212 | }
 213 | .fa-search-minus:before {
 214 |   content: "\f010";
 215 | }
 216 | .fa-power-off:before {
 217 |   content: "\f011";
 218 | }
 219 | .fa-signal:before {
 220 |   content: "\f012";
 221 | }
 222 | .fa-gear:before,
 223 | .fa-cog:before {
 224 |   content: "\f013";
 225 | }
 226 | .fa-trash-o:before {
 227 |   content: "\f014";
 228 | }
 229 | .fa-home:before {
 230 |   content: "\f015";
 231 | }
 232 | .fa-file-o:before {
 233 |   content: "\f016";
 234 | }
 235 | .fa-clock-o:before {
 236 |   content: "\f017";
 237 | }
 238 | .fa-road:before {
 239 |   content: "\f018";
 240 | }
 241 | .fa-download:before {
 242 |   content: "\f019";
 243 | }
 244 | .fa-arrow-circle-o-down:before {
 245 |   content: "\f01a";
 246 | }
 247 | .fa-arrow-circle-o-up:before {
 248 |   content: "\f01b";
 249 | }
 250 | .fa-inbox:before {
 251 |   content: "\f01c";
 252 | }
 253 | .fa-play-circle-o:before {
 254 |   content: "\f01d";
 255 | }
 256 | .fa-rotate-right:before,
 257 | .fa-repeat:before {
 258 |   content: "\f01e";
 259 | }
 260 | .fa-refresh:before {
 261 |   content: "\f021";
 262 | }
 263 | .fa-list-alt:before {
 264 |   content: "\f022";
 265 | }
 266 | .fa-lock:before {
 267 |   content: "\f023";
 268 | }
 269 | .fa-flag:before {
 270 |   content: "\f024";
 271 | }
 272 | .fa-headphones:before {
 273 |   content: "\f025";
 274 | }
 275 | .fa-volume-off:before {
 276 |   content: "\f026";
 277 | }
 278 | .fa-volume-down:before {
 279 |   content: "\f027";
 280 | }
 281 | .fa-volume-up:before {
 282 |   content: "\f028";
 283 | }
 284 | .fa-qrcode:before {
 285 |   content: "\f029";
 286 | }
 287 | .fa-barcode:before {
 288 |   content: "\f02a";
 289 | }
 290 | .fa-tag:before {
 291 |   content: "\f02b";
 292 | }
 293 | .fa-tags:before {
 294 |   content: "\f02c";
 295 | }
 296 | .fa-book:before {
 297 |   content: "\f02d";
 298 | }
 299 | .fa-bookmark:before {
 300 |   content: "\f02e";
 301 | }
 302 | .fa-print:before {
 303 |   content: "\f02f";
 304 | }
 305 | .fa-camera:before {
 306 |   content: "\f030";
 307 | }
 308 | .fa-font:before {
 309 |   content: "\f031";
 310 | }
 311 | .fa-bold:before {
 312 |   content: "\f032";
 313 | }
 314 | .fa-italic:before {
 315 |   content: "\f033";
 316 | }
 317 | .fa-text-height:before {
 318 |   content: "\f034";
 319 | }
 320 | .fa-text-width:before {
 321 |   content: "\f035";
 322 | }
 323 | .fa-align-left:before {
 324 |   content: "\f036";
 325 | }
 326 | .fa-align-center:before {
 327 |   content: "\f037";
 328 | }
 329 | .fa-align-right:before {
 330 |   content: "\f038";
 331 | }
 332 | .fa-align-justify:before {
 333 |   content: "\f039";
 334 | }
 335 | .fa-list:before {
 336 |   content: "\f03a";
 337 | }
 338 | .fa-dedent:before,
 339 | .fa-outdent:before {
 340 |   content: "\f03b";
 341 | }
 342 | .fa-indent:before {
 343 |   content: "\f03c";
 344 | }
 345 | .fa-video-camera:before {
 346 |   content: "\f03d";
 347 | }
 348 | .fa-photo:before,
 349 | .fa-image:before,
 350 | .fa-picture-o:before {
 351 |   content: "\f03e";
 352 | }
 353 | .fa-pencil:before {
 354 |   content: "\f040";
 355 | }
 356 | .fa-map-marker:before {
 357 |   content: "\f041";
 358 | }
 359 | .fa-adjust:before {
 360 |   content: "\f042";
 361 | }
 362 | .fa-tint:before {
 363 |   content: "\f043";
 364 | }
 365 | .fa-edit:before,
 366 | .fa-pencil-square-o:before {
 367 |   content: "\f044";
 368 | }
 369 | .fa-share-square-o:before {
 370 |   content: "\f045";
 371 | }
 372 | .fa-check-square-o:before {
 373 |   content: "\f046";
 374 | }
 375 | .fa-arrows:before {
 376 |   content: "\f047";
 377 | }
 378 | .fa-step-backward:before {
 379 |   content: "\f048";
 380 | }
 381 | .fa-fast-backward:before {
 382 |   content: "\f049";
 383 | }
 384 | .fa-backward:before {
 385 |   content: "\f04a";
 386 | }
 387 | .fa-play:before {
 388 |   content: "\f04b";
 389 | }
 390 | .fa-pause:before {
 391 |   content: "\f04c";
 392 | }
 393 | .fa-stop:before {
 394 |   content: "\f04d";
 395 | }
 396 | .fa-forward:before {
 397 |   content: "\f04e";
 398 | }
 399 | .fa-fast-forward:before {
 400 |   content: "\f050";
 401 | }
 402 | .fa-step-forward:before {
 403 |   content: "\f051";
 404 | }
 405 | .fa-eject:before {
 406 |   content: "\f052";
 407 | }
 408 | .fa-chevron-left:before {
 409 |   content: "\f053";
 410 | }
 411 | .fa-chevron-right:before {
 412 |   content: "\f054";
 413 | }
 414 | .fa-plus-circle:before {
 415 |   content: "\f055";
 416 | }
 417 | .fa-minus-circle:before {
 418 |   content: "\f056";
 419 | }
 420 | .fa-times-circle:before {
 421 |   content: "\f057";
 422 | }
 423 | .fa-check-circle:before {
 424 |   content: "\f058";
 425 | }
 426 | .fa-question-circle:before {
 427 |   content: "\f059";
 428 | }
 429 | .fa-info-circle:before {
 430 |   content: "\f05a";
 431 | }
 432 | .fa-crosshairs:before {
 433 |   content: "\f05b";
 434 | }
 435 | .fa-times-circle-o:before {
 436 |   content: "\f05c";
 437 | }
 438 | .fa-check-circle-o:before {
 439 |   content: "\f05d";
 440 | }
 441 | .fa-ban:before {
 442 |   content: "\f05e";
 443 | }
 444 | .fa-arrow-left:before {
 445 |   content: "\f060";
 446 | }
 447 | .fa-arrow-right:before {
 448 |   content: "\f061";
 449 | }
 450 | .fa-arrow-up:before {
 451 |   content: "\f062";
 452 | }
 453 | .fa-arrow-down:before {
 454 |   content: "\f063";
 455 | }
 456 | .fa-mail-forward:before,
 457 | .fa-share:before {
 458 |   content: "\f064";
 459 | }
 460 | .fa-expand:before {
 461 |   content: "\f065";
 462 | }
 463 | .fa-compress:before {
 464 |   content: "\f066";
 465 | }
 466 | .fa-plus:before {
 467 |   content: "\f067";
 468 | }
 469 | .fa-minus:before {
 470 |   content: "\f068";
 471 | }
 472 | .fa-asterisk:before {
 473 |   content: "\f069";
 474 | }
 475 | .fa-exclamation-circle:before {
 476 |   content: "\f06a";
 477 | }
 478 | .fa-gift:before {
 479 |   content: "\f06b";
 480 | }
 481 | .fa-leaf:before {
 482 |   content: "\f06c";
 483 | }
 484 | .fa-fire:before {
 485 |   content: "\f06d";
 486 | }
 487 | .fa-eye:before {
 488 |   content: "\f06e";
 489 | }
 490 | .fa-eye-slash:before {
 491 |   content: "\f070";
 492 | }
 493 | .fa-warning:before,
 494 | .fa-exclamation-triangle:before {
 495 |   content: "\f071";
 496 | }
 497 | .fa-plane:before {
 498 |   content: "\f072";
 499 | }
 500 | .fa-calendar:before {
 501 |   content: "\f073";
 502 | }
 503 | .fa-random:before {
 504 |   content: "\f074";
 505 | }
 506 | .fa-comment:before {
 507 |   content: "\f075";
 508 | }
 509 | .fa-magnet:before {
 510 |   content: "\f076";
 511 | }
 512 | .fa-chevron-up:before {
 513 |   content: "\f077";
 514 | }
 515 | .fa-chevron-down:before {
 516 |   content: "\f078";
 517 | }
 518 | .fa-retweet:before {
 519 |   content: "\f079";
 520 | }
 521 | .fa-shopping-cart:before {
 522 |   content: "\f07a";
 523 | }
 524 | .fa-folder:before {
 525 |   content: "\f07b";
 526 | }
 527 | .fa-folder-open:before {
 528 |   content: "\f07c";
 529 | }
 530 | .fa-arrows-v:before {
 531 |   content: "\f07d";
 532 | }
 533 | .fa-arrows-h:before {
 534 |   content: "\f07e";
 535 | }
 536 | .fa-bar-chart-o:before,
 537 | .fa-bar-chart:before {
 538 |   content: "\f080";
 539 | }
 540 | .fa-twitter-square:before {
 541 |   content: "\f081";
 542 | }
 543 | .fa-facebook-square:before {
 544 |   content: "\f082";
 545 | }
 546 | .fa-camera-retro:before {
 547 |   content: "\f083";
 548 | }
 549 | .fa-key:before {
 550 |   content: "\f084";
 551 | }
 552 | .fa-gears:before,
 553 | .fa-cogs:before {
 554 |   content: "\f085";
 555 | }
 556 | .fa-comments:before {
 557 |   content: "\f086";
 558 | }
 559 | .fa-thumbs-o-up:before {
 560 |   content: "\f087";
 561 | }
 562 | .fa-thumbs-o-down:before {
 563 |   content: "\f088";
 564 | }
 565 | .fa-star-half:before {
 566 |   content: "\f089";
 567 | }
 568 | .fa-heart-o:before {
 569 |   content: "\f08a";
 570 | }
 571 | .fa-sign-out:before {
 572 |   content: "\f08b";
 573 | }
 574 | .fa-linkedin-square:before {
 575 |   content: "\f08c";
 576 | }
 577 | .fa-thumb-tack:before {
 578 |   content: "\f08d";
 579 | }
 580 | .fa-external-link:before {
 581 |   content: "\f08e";
 582 | }
 583 | .fa-sign-in:before {
 584 |   content: "\f090";
 585 | }
 586 | .fa-trophy:before {
 587 |   content: "\f091";
 588 | }
 589 | .fa-github-square:before {
 590 |   content: "\f092";
 591 | }
 592 | .fa-upload:before {
 593 |   content: "\f093";
 594 | }
 595 | .fa-lemon-o:before {
 596 |   content: "\f094";
 597 | }
 598 | .fa-phone:before {
 599 |   content: "\f095";
 600 | }
 601 | .fa-square-o:before {
 602 |   content: "\f096";
 603 | }
 604 | .fa-bookmark-o:before {
 605 |   content: "\f097";
 606 | }
 607 | .fa-phone-square:before {
 608 |   content: "\f098";
 609 | }
 610 | .fa-twitter:before {
 611 |   content: "\f099";
 612 | }
 613 | .fa-facebook:before {
 614 |   content: "\f09a";
 615 | }
 616 | .fa-github:before {
 617 |   content: "\f09b";
 618 | }
 619 | .fa-unlock:before {
 620 |   content: "\f09c";
 621 | }
 622 | .fa-credit-card:before {
 623 |   content: "\f09d";
 624 | }
 625 | .fa-rss:before {
 626 |   content: "\f09e";
 627 | }
 628 | .fa-hdd-o:before {
 629 |   content: "\f0a0";
 630 | }
 631 | .fa-bullhorn:before {
 632 |   content: "\f0a1";
 633 | }
 634 | .fa-bell:before {
 635 |   content: "\f0f3";
 636 | }
 637 | .fa-certificate:before {
 638 |   content: "\f0a3";
 639 | }
 640 | .fa-hand-o-right:before {
 641 |   content: "\f0a4";
 642 | }
 643 | .fa-hand-o-left:before {
 644 |   content: "\f0a5";
 645 | }
 646 | .fa-hand-o-up:before {
 647 |   content: "\f0a6";
 648 | }
 649 | .fa-hand-o-down:before {
 650 |   content: "\f0a7";
 651 | }
 652 | .fa-arrow-circle-left:before {
 653 |   content: "\f0a8";
 654 | }
 655 | .fa-arrow-circle-right:before {
 656 |   content: "\f0a9";
 657 | }
 658 | .fa-arrow-circle-up:before {
 659 |   content: "\f0aa";
 660 | }
 661 | .fa-arrow-circle-down:before {
 662 |   content: "\f0ab";
 663 | }
 664 | .fa-globe:before {
 665 |   content: "\f0ac";
 666 | }
 667 | .fa-wrench:before {
 668 |   content: "\f0ad";
 669 | }
 670 | .fa-tasks:before {
 671 |   content: "\f0ae";
 672 | }
 673 | .fa-filter:before {
 674 |   content: "\f0b0";
 675 | }
 676 | .fa-briefcase:before {
 677 |   content: "\f0b1";
 678 | }
 679 | .fa-arrows-alt:before {
 680 |   content: "\f0b2";
 681 | }
 682 | .fa-group:before,
 683 | .fa-users:before {
 684 |   content: "\f0c0";
 685 | }
 686 | .fa-chain:before,
 687 | .fa-link:before {
 688 |   content: "\f0c1";
 689 | }
 690 | .fa-cloud:before {
 691 |   content: "\f0c2";
 692 | }
 693 | .fa-flask:before {
 694 |   content: "\f0c3";
 695 | }
 696 | .fa-cut:before,
 697 | .fa-scissors:before {
 698 |   content: "\f0c4";
 699 | }
 700 | .fa-copy:before,
 701 | .fa-files-o:before {
 702 |   content: "\f0c5";
 703 | }
 704 | .fa-paperclip:before {
 705 |   content: "\f0c6";
 706 | }
 707 | .fa-save:before,
 708 | .fa-floppy-o:before {
 709 |   content: "\f0c7";
 710 | }
 711 | .fa-square:before {
 712 |   content: "\f0c8";
 713 | }
 714 | .fa-navicon:before,
 715 | .fa-reorder:before,
 716 | .fa-bars:before {
 717 |   content: "\f0c9";
 718 | }
 719 | .fa-list-ul:before {
 720 |   content: "\f0ca";
 721 | }
 722 | .fa-list-ol:before {
 723 |   content: "\f0cb";
 724 | }
 725 | .fa-strikethrough:before {
 726 |   content: "\f0cc";
 727 | }
 728 | .fa-underline:before {
 729 |   content: "\f0cd";
 730 | }
 731 | .fa-table:before {
 732 |   content: "\f0ce";
 733 | }
 734 | .fa-magic:before {
 735 |   content: "\f0d0";
 736 | }
 737 | .fa-truck:before {
 738 |   content: "\f0d1";
 739 | }
 740 | .fa-pinterest:before {
 741 |   content: "\f0d2";
 742 | }
 743 | .fa-pinterest-square:before {
 744 |   content: "\f0d3";
 745 | }
 746 | .fa-google-plus-square:before {
 747 |   content: "\f0d4";
 748 | }
 749 | .fa-google-plus:before {
 750 |   content: "\f0d5";
 751 | }
 752 | .fa-money:before {
 753 |   content: "\f0d6";
 754 | }
 755 | .fa-caret-down:before {
 756 |   content: "\f0d7";
 757 | }
 758 | .fa-caret-up:before {
 759 |   content: "\f0d8";
 760 | }
 761 | .fa-caret-left:before {
 762 |   content: "\f0d9";
 763 | }
 764 | .fa-caret-right:before {
 765 |   content: "\f0da";
 766 | }
 767 | .fa-columns:before {
 768 |   content: "\f0db";
 769 | }
 770 | .fa-unsorted:before,
 771 | .fa-sort:before {
 772 |   content: "\f0dc";
 773 | }
 774 | .fa-sort-down:before,
 775 | .fa-sort-desc:before {
 776 |   content: "\f0dd";
 777 | }
 778 | .fa-sort-up:before,
 779 | .fa-sort-asc:before {
 780 |   content: "\f0de";
 781 | }
 782 | .fa-envelope:before {
 783 |   content: "\f0e0";
 784 | }
 785 | .fa-linkedin:before {
 786 |   content: "\f0e1";
 787 | }
 788 | .fa-rotate-left:before,
 789 | .fa-undo:before {
 790 |   content: "\f0e2";
 791 | }
 792 | .fa-legal:before,
 793 | .fa-gavel:before {
 794 |   content: "\f0e3";
 795 | }
 796 | .fa-dashboard:before,
 797 | .fa-tachometer:before {
 798 |   content: "\f0e4";
 799 | }
 800 | .fa-comment-o:before {
 801 |   content: "\f0e5";
 802 | }
 803 | .fa-comments-o:before {
 804 |   content: "\f0e6";
 805 | }
 806 | .fa-flash:before,
 807 | .fa-bolt:before {
 808 |   content: "\f0e7";
 809 | }
 810 | .fa-sitemap:before {
 811 |   content: "\f0e8";
 812 | }
 813 | .fa-umbrella:before {
 814 |   content: "\f0e9";
 815 | }
 816 | .fa-paste:before,
 817 | .fa-clipboard:before {
 818 |   content: "\f0ea";
 819 | }
 820 | .fa-lightbulb-o:before {
 821 |   content: "\f0eb";
 822 | }
 823 | .fa-exchange:before {
 824 |   content: "\f0ec";
 825 | }
 826 | .fa-cloud-download:before {
 827 |   content: "\f0ed";
 828 | }
 829 | .fa-cloud-upload:before {
 830 |   content: "\f0ee";
 831 | }
 832 | .fa-user-md:before {
 833 |   content: "\f0f0";
 834 | }
 835 | .fa-stethoscope:before {
 836 |   content: "\f0f1";
 837 | }
 838 | .fa-suitcase:before {
 839 |   content: "\f0f2";
 840 | }
 841 | .fa-bell-o:before {
 842 |   content: "\f0a2";
 843 | }
 844 | .fa-coffee:before {
 845 |   content: "\f0f4";
 846 | }
 847 | .fa-cutlery:before {
 848 |   content: "\f0f5";
 849 | }
 850 | .fa-file-text-o:before {
 851 |   content: "\f0f6";
 852 | }
 853 | .fa-building-o:before {
 854 |   content: "\f0f7";
 855 | }
 856 | .fa-hospital-o:before {
 857 |   content: "\f0f8";
 858 | }
 859 | .fa-ambulance:before {
 860 |   content: "\f0f9";
 861 | }
 862 | .fa-medkit:before {
 863 |   content: "\f0fa";
 864 | }
 865 | .fa-fighter-jet:before {
 866 |   content: "\f0fb";
 867 | }
 868 | .fa-beer:before {
 869 |   content: "\f0fc";
 870 | }
 871 | .fa-h-square:before {
 872 |   content: "\f0fd";
 873 | }
 874 | .fa-plus-square:before {
 875 |   content: "\f0fe";
 876 | }
 877 | .fa-angle-double-left:before {
 878 |   content: "\f100";
 879 | }
 880 | .fa-angle-double-right:before {
 881 |   content: "\f101";
 882 | }
 883 | .fa-angle-double-up:before {
 884 |   content: "\f102";
 885 | }
 886 | .fa-angle-double-down:before {
 887 |   content: "\f103";
 888 | }
 889 | .fa-angle-left:before {
 890 |   content: "\f104";
 891 | }
 892 | .fa-angle-right:before {
 893 |   content: "\f105";
 894 | }
 895 | .fa-angle-up:before {
 896 |   content: "\f106";
 897 | }
 898 | .fa-angle-down:before {
 899 |   content: "\f107";
 900 | }
 901 | .fa-desktop:before {
 902 |   content: "\f108";
 903 | }
 904 | .fa-laptop:before {
 905 |   content: "\f109";
 906 | }
 907 | .fa-tablet:before {
 908 |   content: "\f10a";
 909 | }
 910 | .fa-mobile-phone:before,
 911 | .fa-mobile:before {
 912 |   content: "\f10b";
 913 | }
 914 | .fa-circle-o:before {
 915 |   content: "\f10c";
 916 | }
 917 | .fa-quote-left:before {
 918 |   content: "\f10d";
 919 | }
 920 | .fa-quote-right:before {
 921 |   content: "\f10e";
 922 | }
 923 | .fa-spinner:before {
 924 |   content: "\f110";
 925 | }
 926 | .fa-circle:before {
 927 |   content: "\f111";
 928 | }
 929 | .fa-mail-reply:before,
 930 | .fa-reply:before {
 931 |   content: "\f112";
 932 | }
 933 | .fa-github-alt:before {
 934 |   content: "\f113";
 935 | }
 936 | .fa-folder-o:before {
 937 |   content: "\f114";
 938 | }
 939 | .fa-folder-open-o:before {
 940 |   content: "\f115";
 941 | }
 942 | .fa-smile-o:before {
 943 |   content: "\f118";
 944 | }
 945 | .fa-frown-o:before {
 946 |   content: "\f119";
 947 | }
 948 | .fa-meh-o:before {
 949 |   content: "\f11a";
 950 | }
 951 | .fa-gamepad:before {
 952 |   content: "\f11b";
 953 | }
 954 | .fa-keyboard-o:before {
 955 |   content: "\f11c";
 956 | }
 957 | .fa-flag-o:before {
 958 |   content: "\f11d";
 959 | }
 960 | .fa-flag-checkered:before {
 961 |   content: "\f11e";
 962 | }
 963 | .fa-terminal:before {
 964 |   content: "\f120";
 965 | }
 966 | .fa-code:before {
 967 |   content: "\f121";
 968 | }
 969 | .fa-mail-reply-all:before,
 970 | .fa-reply-all:before {
 971 |   content: "\f122";
 972 | }
 973 | .fa-star-half-empty:before,
 974 | .fa-star-half-full:before,
 975 | .fa-star-half-o:before {
 976 |   content: "\f123";
 977 | }
 978 | .fa-location-arrow:before {
 979 |   content: "\f124";
 980 | }
 981 | .fa-crop:before {
 982 |   content: "\f125";
 983 | }
 984 | .fa-code-fork:before {
 985 |   content: "\f126";
 986 | }
 987 | .fa-unlink:before,
 988 | .fa-chain-broken:before {
 989 |   content: "\f127";
 990 | }
 991 | .fa-question:before {
 992 |   content: "\f128";
 993 | }
 994 | .fa-info:before {
 995 |   content: "\f129";
 996 | }
 997 | .fa-exclamation:before {
 998 |   content: "\f12a";
 999 | }
1000 | .fa-superscript:before {
1001 |   content: "\f12b";
1002 | }
1003 | .fa-subscript:before {
1004 |   content: "\f12c";
1005 | }
1006 | .fa-eraser:before {
1007 |   content: "\f12d";
1008 | }
1009 | .fa-puzzle-piece:before {
1010 |   content: "\f12e";
1011 | }
1012 | .fa-microphone:before {
1013 |   content: "\f130";
1014 | }
1015 | .fa-microphone-slash:before {
1016 |   content: "\f131";
1017 | }
1018 | .fa-shield:before {
1019 |   content: "\f132";
1020 | }
1021 | .fa-calendar-o:before {
1022 |   content: "\f133";
1023 | }
1024 | .fa-fire-extinguisher:before {
1025 |   content: "\f134";
1026 | }
1027 | .fa-rocket:before {
1028 |   content: "\f135";
1029 | }
1030 | .fa-maxcdn:before {
1031 |   content: "\f136";
1032 | }
1033 | .fa-chevron-circle-left:before {
1034 |   content: "\f137";
1035 | }
1036 | .fa-chevron-circle-right:before {
1037 |   content: "\f138";
1038 | }
1039 | .fa-chevron-circle-up:before {
1040 |   content: "\f139";
1041 | }
1042 | .fa-chevron-circle-down:before {
1043 |   content: "\f13a";
1044 | }
1045 | .fa-html5:before {
1046 |   content: "\f13b";
1047 | }
1048 | .fa-css3:before {
1049 |   content: "\f13c";
1050 | }
1051 | .fa-anchor:before {
1052 |   content: "\f13d";
1053 | }
1054 | .fa-unlock-alt:before {
1055 |   content: "\f13e";
1056 | }
1057 | .fa-bullseye:before {
1058 |   content: "\f140";
1059 | }
1060 | .fa-ellipsis-h:before {
1061 |   content: "\f141";
1062 | }
1063 | .fa-ellipsis-v:before {
1064 |   content: "\f142";
1065 | }
1066 | .fa-rss-square:before {
1067 |   content: "\f143";
1068 | }
1069 | .fa-play-circle:before {
1070 |   content: "\f144";
1071 | }
1072 | .fa-ticket:before {
1073 |   content: "\f145";
1074 | }
1075 | .fa-minus-square:before {
1076 |   content: "\f146";
1077 | }
1078 | .fa-minus-square-o:before {
1079 |   content: "\f147";
1080 | }
1081 | .fa-level-up:before {
1082 |   content: "\f148";
1083 | }
1084 | .fa-level-down:before {
1085 |   content: "\f149";
1086 | }
1087 | .fa-check-square:before {
1088 |   content: "\f14a";
1089 | }
1090 | .fa-pencil-square:before {
1091 |   content: "\f14b";
1092 | }
1093 | .fa-external-link-square:before {
1094 |   content: "\f14c";
1095 | }
1096 | .fa-share-square:before {
1097 |   content: "\f14d";
1098 | }
1099 | .fa-compass:before {
1100 |   content: "\f14e";
1101 | }
1102 | .fa-toggle-down:before,
1103 | .fa-caret-square-o-down:before {
1104 |   content: "\f150";
1105 | }
1106 | .fa-toggle-up:before,
1107 | .fa-caret-square-o-up:before {
1108 |   content: "\f151";
1109 | }
1110 | .fa-toggle-right:before,
1111 | .fa-caret-square-o-right:before {
1112 |   content: "\f152";
1113 | }
1114 | .fa-euro:before,
1115 | .fa-eur:before {
1116 |   content: "\f153";
1117 | }
1118 | .fa-gbp:before {
1119 |   content: "\f154";
1120 | }
1121 | .fa-dollar:before,
1122 | .fa-usd:before {
1123 |   content: "\f155";
1124 | }
1125 | .fa-rupee:before,
1126 | .fa-inr:before {
1127 |   content: "\f156";
1128 | }
1129 | .fa-cny:before,
1130 | .fa-rmb:before,
1131 | .fa-yen:before,
1132 | .fa-jpy:before {
1133 |   content: "\f157";
1134 | }
1135 | .fa-ruble:before,
1136 | .fa-rouble:before,
1137 | .fa-rub:before {
1138 |   content: "\f158";
1139 | }
1140 | .fa-won:before,
1141 | .fa-krw:before {
1142 |   content: "\f159";
1143 | }
1144 | .fa-bitcoin:before,
1145 | .fa-btc:before {
1146 |   content: "\f15a";
1147 | }
1148 | .fa-file:before {
1149 |   content: "\f15b";
1150 | }
1151 | .fa-file-text:before {
1152 |   content: "\f15c";
1153 | }
1154 | .fa-sort-alpha-asc:before {
1155 |   content: "\f15d";
1156 | }
1157 | .fa-sort-alpha-desc:before {
1158 |   content: "\f15e";
1159 | }
1160 | .fa-sort-amount-asc:before {
1161 |   content: "\f160";
1162 | }
1163 | .fa-sort-amount-desc:before {
1164 |   content: "\f161";
1165 | }
1166 | .fa-sort-numeric-asc:before {
1167 |   content: "\f162";
1168 | }
1169 | .fa-sort-numeric-desc:before {
1170 |   content: "\f163";
1171 | }
1172 | .fa-thumbs-up:before {
1173 |   content: "\f164";
1174 | }
1175 | .fa-thumbs-down:before {
1176 |   content: "\f165";
1177 | }
1178 | .fa-youtube-square:before {
1179 |   content: "\f166";
1180 | }
1181 | .fa-youtube:before {
1182 |   content: "\f167";
1183 | }
1184 | .fa-xing:before {
1185 |   content: "\f168";
1186 | }
1187 | .fa-xing-square:before {
1188 |   content: "\f169";
1189 | }
1190 | .fa-youtube-play:before {
1191 |   content: "\f16a";
1192 | }
1193 | .fa-dropbox:before {
1194 |   content: "\f16b";
1195 | }
1196 | .fa-stack-overflow:before {
1197 |   content: "\f16c";
1198 | }
1199 | .fa-instagram:before {
1200 |   content: "\f16d";
1201 | }
1202 | .fa-flickr:before {
1203 |   content: "\f16e";
1204 | }
1205 | .fa-adn:before {
1206 |   content: "\f170";
1207 | }
1208 | .fa-bitbucket:before {
1209 |   content: "\f171";
1210 | }
1211 | .fa-bitbucket-square:before {
1212 |   content: "\f172";
1213 | }
1214 | .fa-tumblr:before {
1215 |   content: "\f173";
1216 | }
1217 | .fa-tumblr-square:before {
1218 |   content: "\f174";
1219 | }
1220 | .fa-long-arrow-down:before {
1221 |   content: "\f175";
1222 | }
1223 | .fa-long-arrow-up:before {
1224 |   content: "\f176";
1225 | }
1226 | .fa-long-arrow-left:before {
1227 |   content: "\f177";
1228 | }
1229 | .fa-long-arrow-right:before {
1230 |   content: "\f178";
1231 | }
1232 | .fa-apple:before {
1233 |   content: "\f179";
1234 | }
1235 | .fa-windows:before {
1236 |   content: "\f17a";
1237 | }
1238 | .fa-android:before {
1239 |   content: "\f17b";
1240 | }
1241 | .fa-linux:before {
1242 |   content: "\f17c";
1243 | }
1244 | .fa-dribbble:before {
1245 |   content: "\f17d";
1246 | }
1247 | .fa-skype:before {
1248 |   content: "\f17e";
1249 | }
1250 | .fa-foursquare:before {
1251 |   content: "\f180";
1252 | }
1253 | .fa-trello:before {
1254 |   content: "\f181";
1255 | }
1256 | .fa-female:before {
1257 |   content: "\f182";
1258 | }
1259 | .fa-male:before {
1260 |   content: "\f183";
1261 | }
1262 | .fa-gittip:before {
1263 |   content: "\f184";
1264 | }
1265 | .fa-sun-o:before {
1266 |   content: "\f185";
1267 | }
1268 | .fa-moon-o:before {
1269 |   content: "\f186";
1270 | }
1271 | .fa-archive:before {
1272 |   content: "\f187";
1273 | }
1274 | .fa-bug:before {
1275 |   content: "\f188";
1276 | }
1277 | .fa-vk:before {
1278 |   content: "\f189";
1279 | }
1280 | .fa-weibo:before {
1281 |   content: "\f18a";
1282 | }
1283 | .fa-renren:before {
1284 |   content: "\f18b";
1285 | }
1286 | .fa-pagelines:before {
1287 |   content: "\f18c";
1288 | }
1289 | .fa-stack-exchange:before {
1290 |   content: "\f18d";
1291 | }
1292 | .fa-arrow-circle-o-right:before {
1293 |   content: "\f18e";
1294 | }
1295 | .fa-arrow-circle-o-left:before {
1296 |   content: "\f190";
1297 | }
1298 | .fa-toggle-left:before,
1299 | .fa-caret-square-o-left:before {
1300 |   content: "\f191";
1301 | }
1302 | .fa-dot-circle-o:before {
1303 |   content: "\f192";
1304 | }
1305 | .fa-wheelchair:before {
1306 |   content: "\f193";
1307 | }
1308 | .fa-vimeo-square:before {
1309 |   content: "\f194";
1310 | }
1311 | .fa-turkish-lira:before,
1312 | .fa-try:before {
1313 |   content: "\f195";
1314 | }
1315 | .fa-plus-square-o:before {
1316 |   content: "\f196";
1317 | }
1318 | .fa-space-shuttle:before {
1319 |   content: "\f197";
1320 | }
1321 | .fa-slack:before {
1322 |   content: "\f198";
1323 | }
1324 | .fa-envelope-square:before {
1325 |   content: "\f199";
1326 | }
1327 | .fa-wordpress:before {
1328 |   content: "\f19a";
1329 | }
1330 | .fa-openid:before {
1331 |   content: "\f19b";
1332 | }
1333 | .fa-institution:before,
1334 | .fa-bank:before,
1335 | .fa-university:before {
1336 |   content: "\f19c";
1337 | }
1338 | .fa-mortar-board:before,
1339 | .fa-graduation-cap:before {
1340 |   content: "\f19d";
1341 | }
1342 | .fa-yahoo:before {
1343 |   content: "\f19e";
1344 | }
1345 | .fa-google:before {
1346 |   content: "\f1a0";
1347 | }
1348 | .fa-reddit:before {
1349 |   content: "\f1a1";
1350 | }
1351 | .fa-reddit-square:before {
1352 |   content: "\f1a2";
1353 | }
1354 | .fa-stumbleupon-circle:before {
1355 |   content: "\f1a3";
1356 | }
1357 | .fa-stumbleupon:before {
1358 |   content: "\f1a4";
1359 | }
1360 | .fa-delicious:before {
1361 |   content: "\f1a5";
1362 | }
1363 | .fa-digg:before {
1364 |   content: "\f1a6";
1365 | }
1366 | .fa-pied-piper:before {
1367 |   content: "\f1a7";
1368 | }
1369 | .fa-pied-piper-alt:before {
1370 |   content: "\f1a8";
1371 | }
1372 | .fa-drupal:before {
1373 |   content: "\f1a9";
1374 | }
1375 | .fa-joomla:before {
1376 |   content: "\f1aa";
1377 | }
1378 | .fa-language:before {
1379 |   content: "\f1ab";
1380 | }
1381 | .fa-fax:before {
1382 |   content: "\f1ac";
1383 | }
1384 | .fa-building:before {
1385 |   content: "\f1ad";
1386 | }
1387 | .fa-child:before {
1388 |   content: "\f1ae";
1389 | }
1390 | .fa-paw:before {
1391 |   content: "\f1b0";
1392 | }
1393 | .fa-spoon:before {
1394 |   content: "\f1b1";
1395 | }
1396 | .fa-cube:before {
1397 |   content: "\f1b2";
1398 | }
1399 | .fa-cubes:before {
1400 |   content: "\f1b3";
1401 | }
1402 | .fa-behance:before {
1403 |   content: "\f1b4";
1404 | }
1405 | .fa-behance-square:before {
1406 |   content: "\f1b5";
1407 | }
1408 | .fa-steam:before {
1409 |   content: "\f1b6";
1410 | }
1411 | .fa-steam-square:before {
1412 |   content: "\f1b7";
1413 | }
1414 | .fa-recycle:before {
1415 |   content: "\f1b8";
1416 | }
1417 | .fa-automobile:before,
1418 | .fa-car:before {
1419 |   content: "\f1b9";
1420 | }
1421 | .fa-cab:before,
1422 | .fa-taxi:before {
1423 |   content: "\f1ba";
1424 | }
1425 | .fa-tree:before {
1426 |   content: "\f1bb";
1427 | }
1428 | .fa-spotify:before {
1429 |   content: "\f1bc";
1430 | }
1431 | .fa-deviantart:before {
1432 |   content: "\f1bd";
1433 | }
1434 | .fa-soundcloud:before {
1435 |   content: "\f1be";
1436 | }
1437 | .fa-database:before {
1438 |   content: "\f1c0";
1439 | }
1440 | .fa-file-pdf-o:before {
1441 |   content: "\f1c1";
1442 | }
1443 | .fa-file-word-o:before {
1444 |   content: "\f1c2";
1445 | }
1446 | .fa-file-excel-o:before {
1447 |   content: "\f1c3";
1448 | }
1449 | .fa-file-powerpoint-o:before {
1450 |   content: "\f1c4";
1451 | }
1452 | .fa-file-photo-o:before,
1453 | .fa-file-picture-o:before,
1454 | .fa-file-image-o:before {
1455 |   content: "\f1c5";
1456 | }
1457 | .fa-file-zip-o:before,
1458 | .fa-file-archive-o:before {
1459 |   content: "\f1c6";
1460 | }
1461 | .fa-file-sound-o:before,
1462 | .fa-file-audio-o:before {
1463 |   content: "\f1c7";
1464 | }
1465 | .fa-file-movie-o:before,
1466 | .fa-file-video-o:before {
1467 |   content: "\f1c8";
1468 | }
1469 | .fa-file-code-o:before {
1470 |   content: "\f1c9";
1471 | }
1472 | .fa-vine:before {
1473 |   content: "\f1ca";
1474 | }
1475 | .fa-codepen:before {
1476 |   content: "\f1cb";
1477 | }
1478 | .fa-jsfiddle:before {
1479 |   content: "\f1cc";
1480 | }
1481 | .fa-life-bouy:before,
1482 | .fa-life-buoy:before,
1483 | .fa-life-saver:before,
1484 | .fa-support:before,
1485 | .fa-life-ring:before {
1486 |   content: "\f1cd";
1487 | }
1488 | .fa-circle-o-notch:before {
1489 |   content: "\f1ce";
1490 | }
1491 | .fa-ra:before,
1492 | .fa-rebel:before {
1493 |   content: "\f1d0";
1494 | }
1495 | .fa-ge:before,
1496 | .fa-empire:before {
1497 |   content: "\f1d1";
1498 | }
1499 | .fa-git-square:before {
1500 |   content: "\f1d2";
1501 | }
1502 | .fa-git:before {
1503 |   content: "\f1d3";
1504 | }
1505 | .fa-hacker-news:before {
1506 |   content: "\f1d4";
1507 | }
1508 | .fa-tencent-weibo:before {
1509 |   content: "\f1d5";
1510 | }
1511 | .fa-qq:before {
1512 |   content: "\f1d6";
1513 | }
1514 | .fa-wechat:before,
1515 | .fa-weixin:before {
1516 |   content: "\f1d7";
1517 | }
1518 | .fa-send:before,
1519 | .fa-paper-plane:before {
1520 |   content: "\f1d8";
1521 | }
1522 | .fa-send-o:before,
1523 | .fa-paper-plane-o:before {
1524 |   content: "\f1d9";
1525 | }
1526 | .fa-history:before {
1527 |   content: "\f1da";
1528 | }
1529 | .fa-circle-thin:before {
1530 |   content: "\f1db";
1531 | }
1532 | .fa-header:before {
1533 |   content: "\f1dc";
1534 | }
1535 | .fa-paragraph:before {
1536 |   content: "\f1dd";
1537 | }
1538 | .fa-sliders:before {
1539 |   content: "\f1de";
1540 | }
1541 | .fa-share-alt:before {
1542 |   content: "\f1e0";
1543 | }
1544 | .fa-share-alt-square:before {
1545 |   content: "\f1e1";
1546 | }
1547 | .fa-bomb:before {
1548 |   content: "\f1e2";
1549 | }
1550 | .fa-soccer-ball-o:before,
1551 | .fa-futbol-o:before {
1552 |   content: "\f1e3";
1553 | }
1554 | .fa-tty:before {
1555 |   content: "\f1e4";
1556 | }
1557 | .fa-binoculars:before {
1558 |   content: "\f1e5";
1559 | }
1560 | .fa-plug:before {
1561 |   content: "\f1e6";
1562 | }
1563 | .fa-slideshare:before {
1564 |   content: "\f1e7";
1565 | }
1566 | .fa-twitch:before {
1567 |   content: "\f1e8";
1568 | }
1569 | .fa-yelp:before {
1570 |   content: "\f1e9";
1571 | }
1572 | .fa-newspaper-o:before {
1573 |   content: "\f1ea";
1574 | }
1575 | .fa-wifi:before {
1576 |   content: "\f1eb";
1577 | }
1578 | .fa-calculator:before {
1579 |   content: "\f1ec";
1580 | }
1581 | .fa-paypal:before {
1582 |   content: "\f1ed";
1583 | }
1584 | .fa-google-wallet:before {
1585 |   content: "\f1ee";
1586 | }
1587 | .fa-cc-visa:before {
1588 |   content: "\f1f0";
1589 | }
1590 | .fa-cc-mastercard:before {
1591 |   content: "\f1f1";
1592 | }
1593 | .fa-cc-discover:before {
1594 |   content: "\f1f2";
1595 | }
1596 | .fa-cc-amex:before {
1597 |   content: "\f1f3";
1598 | }
1599 | .fa-cc-paypal:before {
1600 |   content: "\f1f4";
1601 | }
1602 | .fa-cc-stripe:before {
1603 |   content: "\f1f5";
1604 | }
1605 | .fa-bell-slash:before {
1606 |   content: "\f1f6";
1607 | }
1608 | .fa-bell-slash-o:before {
1609 |   content: "\f1f7";
1610 | }
1611 | .fa-trash:before {
1612 |   content: "\f1f8";
1613 | }
1614 | .fa-copyright:before {
1615 |   content: "\f1f9";
1616 | }
1617 | .fa-at:before {
1618 |   content: "\f1fa";
1619 | }
1620 | .fa-eyedropper:before {
1621 |   content: "\f1fb";
1622 | }
1623 | .fa-paint-brush:before {
1624 |   content: "\f1fc";
1625 | }
1626 | .fa-birthday-cake:before {
1627 |   content: "\f1fd";
1628 | }
1629 | .fa-area-chart:before {
1630 |   content: "\f1fe";
1631 | }
1632 | .fa-pie-chart:before {
1633 |   content: "\f200";
1634 | }
1635 | .fa-line-chart:before {
1636 |   content: "\f201";
1637 | }
1638 | .fa-lastfm:before {
1639 |   content: "\f202";
1640 | }
1641 | .fa-lastfm-square:before {
1642 |   content: "\f203";
1643 | }
1644 | .fa-toggle-off:before {
1645 |   content: "\f204";
1646 | }
1647 | .fa-toggle-on:before {
1648 |   content: "\f205";
1649 | }
1650 | .fa-bicycle:before {
1651 |   content: "\f206";
1652 | }
1653 | .fa-bus:before {
1654 |   content: "\f207";
1655 | }
1656 | .fa-ioxhost:before {
1657 |   content: "\f208";
1658 | }
1659 | .fa-angellist:before {
1660 |   content: "\f209";
1661 | }
1662 | .fa-cc:before {
1663 |   content: "\f20a";
1664 | }
1665 | .fa-shekel:before,
1666 | .fa-sheqel:before,
1667 | .fa-ils:before {
1668 |   content: "\f20b";
1669 | }
1670 | .fa-meanpath:before {
1671 |   content: "\f20c";
1672 | }
1673 | 


--------------------------------------------------------------------------------
/css/font-mfizz.css:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * Font Mfizz v1.2
  3 |  * Copyright 2013 Mfizz Inc, Joe Lauer
  4 |  * MIT License
  5 |  *
  6 |  * Project: http://mfizz.com/oss/font-mfizz
  7 |  *
  8 |  * The font designed for technology and software geeks representing programming
  9 |  * languages, operating systems, software engineering, and technology. 
 10 |  *
 11 |  * Mfizz Inc
 12 |  * Web: http://mfizz.com/
 13 |  * Twitter: http://twitter.com/mfizz_inc
 14 |  * 
 15 |  * Joe Lauer
 16 |  * Web: http://lauer.bz/
 17 |  * Twitter: http://twitter.com/jjlauer
 18 |  */
 19 | 
 20 | @font-face {
 21 |   font-family: "FontMfizz";
 22 |   src: url("../fonts/font-mfizz.eot");
 23 |   src: url("../fonts/font-mfizz.eot?#iefix") format("embedded-opentype"),
 24 |        url("../fonts/font-mfizz.woff") format("woff"),
 25 |        url("../fonts/font-mfizz.ttf") format("truetype"),
 26 |        url("../fonts/font-mfizz.svg#font-mfizz") format("svg");
 27 |   font-weight: normal;
 28 |   font-style: normal;
 29 | }
 30 | 
 31 | .icon-microscope:before,
 32 | .icon-cplusplus:before,
 33 | .icon-wireless:before,
 34 | .icon-fire-alt:before,
 35 | .icon-mobile-device:before,
 36 | .icon-objc:before,
 37 | .icon-redhat:before,
 38 | .icon-freebsd:before,
 39 | .icon-heroku:before,
 40 | .icon-python:before,
 41 | .icon-java:before,
 42 | .icon-satellite:before,
 43 | .icon-debian:before,
 44 | .icon-grails:before,
 45 | .icon-c:before,
 46 | .icon-postgres:before,
 47 | .icon-database-alt2:before,
 48 | .icon-raspberrypi:before,
 49 | .icon-nginx:before,
 50 | .icon-ruby-on-rails:before,
 51 | .icon-redis:before,
 52 | .icon-scala:before,
 53 | .icon-gnome:before,
 54 | .icon-perl:before,
 55 | .icon-mysql:before,
 56 | .icon-fedora:before,
 57 | .icon-ghost:before,
 58 | .icon-google:before,
 59 | .icon-netbsd:before,
 60 | .icon-aws:before,
 61 | .icon-bomb:before,
 62 | .icon-looking:before,
 63 | .icon-ruby:before,
 64 | .icon-mysql-alt:before,
 65 | .icon-playframework-alt:before,
 66 | .icon-osx:before,
 67 | .icon-database:before,
 68 | .icon-database-alt:before,
 69 | .icon-shell:before,
 70 | .icon-script:before,
 71 | .icon-antenna:before,
 72 | .icon-coffee-bean:before,
 73 | .icon-scala-alt:before,
 74 | .icon-platter:before,
 75 | .icon-java-duke:before,
 76 | .icon-iphone:before,
 77 | .icon-script-alt:before,
 78 | .icon-google-alt:before,
 79 | .icon-haskell:before,
 80 | .icon-mariadb:before,
 81 | .icon-phone-retro:before,
 82 | .icon-phone-alt:before,
 83 | .icon-csharp:before,
 84 | .icon-php:before,
 85 | .icon-postgres-alt:before,
 86 | .icon-html:before,
 87 | .icon-mfizz:before,
 88 | .icon-apache:before,
 89 | .icon-hadoop:before,
 90 | .icon-ruby-on-rails-alt:before,
 91 | .icon-mobile-phone-broadcast:before,
 92 | .icon-css:before,
 93 | .icon-playframework:before,
 94 | .icon-clojure:before,
 95 | .icon-mobile-phone-alt:before,
 96 | .icon-suse:before,
 97 | .icon-java-bold:before,
 98 | .icon-nginx-alt:before,
 99 | .icon-nginx-alt2:before,
100 | .icon-linux-mint:before,
101 | .icon-dreamhost:before,
102 | .icon-blackberry:before,
103 | .icon-javascript:before,
104 | .icon-ubuntu:before,
105 | .icon-php-alt:before,
106 | .icon-centos:before,
107 | .icon-nodejs:before,
108 | .icon-splatter:before,
109 | .icon-3dprint:before,
110 | .icon-line-graph:before,
111 | .icon-cassandra:before,
112 | .icon-solaris:before,
113 | .icon-jetty:before,
114 | .icon-tomcat:before,
115 | .icon-oracle:before,
116 | .icon-oracle-alt:before,
117 | .icon-mssql:before,
118 | .icon-google-developers:before,
119 | .icon-google-code:before,
120 | .icon-kde:before,
121 | .icon-grails-alt:before {
122 |   font-family: "FontMfizz";
123 |   font-style: normal;
124 |   font-weight: normal;
125 |   font-variant: normal;
126 |   text-transform: none;
127 |   line-height: 1;
128 |   -webkit-font-smoothing: antialiased;
129 |   display: inline-block;
130 |   text-decoration: inherit;
131 | }
132 | 
133 | .icon-microscope:before { content: "\f100"; }
134 | .icon-cplusplus:before { content: "\f101"; }
135 | .icon-wireless:before { content: "\f102"; }
136 | .icon-fire-alt:before { content: "\f103"; }
137 | .icon-mobile-device:before { content: "\f104"; }
138 | .icon-objc:before { content: "\f105"; }
139 | .icon-redhat:before { content: "\f106"; }
140 | .icon-freebsd:before { content: "\f107"; }
141 | .icon-heroku:before { content: "\f108"; }
142 | .icon-python:before { content: "\f109"; }
143 | .icon-java:before { content: "\f10a"; }
144 | .icon-satellite:before { content: "\f10b"; }
145 | .icon-debian:before { content: "\f10c"; }
146 | .icon-grails:before { content: "\f10d"; }
147 | .icon-c:before { content: "\f10e"; }
148 | .icon-postgres:before { content: "\f10f"; }
149 | .icon-database-alt2:before { content: "\f110"; }
150 | .icon-raspberrypi:before { content: "\f111"; }
151 | .icon-nginx:before { content: "\f112"; }
152 | .icon-ruby-on-rails:before { content: "\f113"; }
153 | .icon-redis:before { content: "\f114"; }
154 | .icon-scala:before { content: "\f115"; }
155 | .icon-gnome:before { content: "\f116"; }
156 | .icon-perl:before { content: "\f117"; }
157 | .icon-mysql:before { content: "\f118"; }
158 | .icon-fedora:before { content: "\f119"; }
159 | .icon-ghost:before { content: "\f11a"; }
160 | .icon-google:before { content: "\f11b"; }
161 | .icon-netbsd:before { content: "\f11c"; }
162 | .icon-aws:before { content: "\f11d"; }
163 | .icon-bomb:before { content: "\f11e"; }
164 | .icon-looking:before { content: "\f11f"; }
165 | .icon-ruby:before { content: "\f120"; }
166 | .icon-mysql-alt:before { content: "\f121"; }
167 | .icon-playframework-alt:before { content: "\f122"; }
168 | .icon-osx:before { content: "\f123"; }
169 | .icon-database:before { content: "\f124"; }
170 | .icon-database-alt:before { content: "\f125"; }
171 | .icon-shell:before { content: "\f126"; }
172 | .icon-script:before { content: "\f127"; }
173 | .icon-antenna:before { content: "\f128"; }
174 | .icon-coffee-bean:before { content: "\f129"; }
175 | .icon-scala-alt:before { content: "\f12a"; }
176 | .icon-platter:before { content: "\f12b"; }
177 | .icon-java-duke:before { content: "\f12c"; }
178 | .icon-iphone:before { content: "\f12d"; }
179 | .icon-script-alt:before { content: "\f12e"; }
180 | .icon-google-alt:before { content: "\f12f"; }
181 | .icon-haskell:before { content: "\f130"; }
182 | .icon-mariadb:before { content: "\f131"; }
183 | .icon-phone-retro:before { content: "\f132"; }
184 | .icon-phone-alt:before { content: "\f133"; }
185 | .icon-csharp:before { content: "\f134"; }
186 | .icon-php:before { content: "\f135"; }
187 | .icon-postgres-alt:before { content: "\f136"; }
188 | .icon-html:before { content: "\f137"; }
189 | .icon-mfizz:before { content: "\f138"; }
190 | .icon-apache:before { content: "\f139"; }
191 | .icon-hadoop:before { content: "\f13a"; }
192 | .icon-ruby-on-rails-alt:before { content: "\f13b"; }
193 | .icon-mobile-phone-broadcast:before { content: "\f13c"; }
194 | .icon-css:before { content: "\f13d"; }
195 | .icon-playframework:before { content: "\f13e"; }
196 | .icon-clojure:before { content: "\f13f"; }
197 | .icon-mobile-phone-alt:before { content: "\f140"; }
198 | .icon-suse:before { content: "\f141"; }
199 | .icon-java-bold:before { content: "\f142"; }
200 | .icon-nginx-alt:before { content: "\f143"; }
201 | .icon-nginx-alt2:before { content: "\f144"; }
202 | .icon-linux-mint:before { content: "\f145"; }
203 | .icon-dreamhost:before { content: "\f146"; }
204 | .icon-blackberry:before { content: "\f147"; }
205 | .icon-javascript:before { content: "\f148"; }
206 | .icon-ubuntu:before { content: "\f149"; }
207 | .icon-php-alt:before { content: "\f14a"; }
208 | .icon-centos:before { content: "\f14b"; }
209 | .icon-nodejs:before { content: "\f14c"; }
210 | .icon-splatter:before { content: "\f14d"; }
211 | .icon-3dprint:before { content: "\f14e"; }
212 | .icon-line-graph:before { content: "\f14f"; }
213 | .icon-cassandra:before { content: "\f150"; }
214 | .icon-solaris:before { content: "\f151"; }
215 | .icon-jetty:before { content: "\f152"; }
216 | .icon-tomcat:before { content: "\f153"; }
217 | .icon-oracle:before { content: "\f154"; }
218 | .icon-oracle-alt:before { content: "\f155"; }
219 | .icon-mssql:before { content: "\f156"; }
220 | .icon-google-developers:before { content: "\f157"; }
221 | .icon-google-code:before { content: "\f158"; }
222 | .icon-kde:before { content: "\f159"; }
223 | .icon-grails-alt:before { content: "\f15a"; }
224 | 
225 | /* These classes only added to fix FontFamily to display FontMfizz during debug/inspection */
226 | .icon-osx,
227 | .icon-bomb,
228 | .icon-mobile-phone-broadcast,
229 | .icon-objc,
230 | .icon-nginx-alt2,
231 | .icon-mysql,
232 | .icon-phone-retro,
233 | .icon-netbsd,
234 | .icon-mobile-device,
235 | .icon-ruby-on-rails,
236 | .icon-phone-alt,
237 | .icon-line-graph,
238 | .icon-postgres,
239 | .icon-playframework,
240 | .icon-python,
241 | .icon-ruby-on-rails-alt,
242 | .icon-nginx,
243 | .icon-database-alt2,
244 | .icon-google-alt,
245 | .icon-microscope,
246 | .icon-blackberry,
247 | .icon-dreamhost,
248 | .icon-google,
249 | .icon-centos,
250 | .icon-kde,
251 | .icon-csharp,
252 | .icon-scala,
253 | .icon-redis,
254 | .icon-looking,
255 | .icon-database-alt,
256 | .icon-javascript,
257 | .icon-postgres-alt,
258 | .icon-linux-mint,
259 | .icon-ubuntu,
260 | .icon-apache,
261 | .icon-script-alt,
262 | .icon-mssql,
263 | .icon-c,
264 | .icon-gnome,
265 | .icon-java-duke,
266 | .icon-scala-alt,
267 | .icon-clojure,
268 | .icon-oracle-alt,
269 | .icon-redhat,
270 | .icon-haskell,
271 | .icon-3dprint,
272 | .icon-mariadb,
273 | .icon-java,
274 | .icon-script,
275 | .icon-cplusplus,
276 | .icon-jetty,
277 | .icon-perl,
278 | .icon-heroku,
279 | .icon-nginx-alt,
280 | .icon-iphone,
281 | .icon-splatter,
282 | .icon-shell,
283 | .icon-mysql-alt,
284 | .icon-wireless,
285 | .icon-ruby,
286 | .icon-playframework-alt,
287 | .icon-raspberrypi,
288 | .icon-suse,
289 | .icon-nodejs,
290 | .icon-java-bold,
291 | .icon-google-developers,
292 | .icon-mobile-phone-alt,
293 | .icon-grails-alt,
294 | .icon-coffee-bean,
295 | .icon-cassandra,
296 | .icon-google-code,
297 | .icon-fedora,
298 | .icon-antenna,
299 | .icon-hadoop,
300 | .icon-solaris,
301 | .icon-html,
302 | .icon-css,
303 | .icon-satellite,
304 | .icon-aws,
305 | .icon-mfizz,
306 | .icon-php,
307 | .icon-debian,
308 | .icon-ghost,
309 | .icon-php-alt,
310 | .icon-tomcat,
311 | .icon-database,
312 | .icon-grails,
313 | .icon-freebsd,
314 | .icon-oracle,
315 | .icon-fire-alt,
316 | .icon-platter{
317 |   font-family: "FontMfizz";
318 | }
319 | 


--------------------------------------------------------------------------------
/fonts/FontAwesome.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikhil/SwitchBeat/208933030832ec852c7d588bc52cae27f443f03c/fonts/FontAwesome.otf


--------------------------------------------------------------------------------
/fonts/font-mfizz.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikhil/SwitchBeat/208933030832ec852c7d588bc52cae27f443f03c/fonts/font-mfizz.eot


--------------------------------------------------------------------------------
/fonts/font-mfizz.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikhil/SwitchBeat/208933030832ec852c7d588bc52cae27f443f03c/fonts/font-mfizz.ttf


--------------------------------------------------------------------------------
/fonts/font-mfizz.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikhil/SwitchBeat/208933030832ec852c7d588bc52cae27f443f03c/fonts/font-mfizz.woff


--------------------------------------------------------------------------------
/fonts/fontawesome-webfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikhil/SwitchBeat/208933030832ec852c7d588bc52cae27f443f03c/fonts/fontawesome-webfont.eot


--------------------------------------------------------------------------------
/fonts/fontawesome-webfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikhil/SwitchBeat/208933030832ec852c7d588bc52cae27f443f03c/fonts/fontawesome-webfont.ttf


--------------------------------------------------------------------------------
/fonts/fontawesome-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikhil/SwitchBeat/208933030832ec852c7d588bc52cae27f443f03c/fonts/fontawesome-webfont.woff


--------------------------------------------------------------------------------
/fonts/icons.json:
--------------------------------------------------------------------------------
1 | ["3dprint","antenna","apache","aws","blackberry","bomb","c","cassandra","centos","clojure","coffee-bean","cplusplus","csharp","css","database","database-alt","database-alt2","debian","dreamhost","fedora","fire-alt","freebsd","ghost","gnome","google","google-alt","google-code","google-developers","grails","grails-alt","hadoop","haskell","heroku","html","iphone","java","java-bold","java-duke","javascript","jetty","kde","line-graph","linux-mint","looking","mariadb","mfizz","microscope","mobile-device","mobile-phone-alt","mobile-phone-broadcast","mssql","mysql","mysql-alt","netbsd","nginx","nginx-alt","nginx-alt2","nodejs","objc","oracle","oracle-alt","osx","perl","phone-alt","phone-retro","php","php-alt","platter","playframework","playframework-alt","postgres","postgres-alt","python","raspberrypi","redhat","redis","ruby","ruby-on-rails","ruby-on-rails-alt","satellite","scala","scala-alt","script","script-alt","shell","solaris","splatter","suse","tomcat","ubuntu","wireless"]
2 | 


--------------------------------------------------------------------------------
/images/EchoNest.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikhil/SwitchBeat/208933030832ec852c7d588bc52cae27f443f03c/images/EchoNest.png


--------------------------------------------------------------------------------
/images/github.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikhil/SwitchBeat/208933030832ec852c7d588bc52cae27f443f03c/images/github.png


--------------------------------------------------------------------------------
/images/jekyll.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikhil/SwitchBeat/208933030832ec852c7d588bc52cae27f443f03c/images/jekyll.png


--------------------------------------------------------------------------------
/javascript/bootstrap.min.js:
--------------------------------------------------------------------------------
1 | /*!
2 | * Bootstrap.js by @fat & @mdo
3 | * Copyright 2012 Twitter, Inc.
4 | * http://www.apache.org/licenses/LICENSE-2.0.txt
5 | */
6 | !function(e){e(function(){"use strict";e.support.transition=function(){var e=function(){var e=document.createElement("bootstrap"),t={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",transition:"transitionend"},n;for(n in t)if(e.style[n]!==undefined)return t[n]}();return e&&{end:e}}()})}(window.jQuery),!function(e){"use strict";var t='[data-dismiss="alert"]',n=function(n){e(n).on("click",t,this.close)};n.prototype.close=function(t){function s(){i.trigger("closed").remove()}var n=e(this),r=n.attr("data-target"),i;r||(r=n.attr("href"),r=r&&r.replace(/.*(?=#[^\s]*$)/,"")),i=e(r),t&&t.preventDefault(),i.length||(i=n.hasClass("alert")?n:n.parent()),i.trigger(t=e.Event("close"));if(t.isDefaultPrevented())return;i.removeClass("in"),e.support.transition&&i.hasClass("fade")?i.on(e.support.transition.end,s):s()},e.fn.alert=function(t){return this.each(function(){var r=e(this),i=r.data("alert");i||r.data("alert",i=new n(this)),typeof t=="string"&&i[t].call(r)})},e.fn.alert.Constructor=n,e(function(){e("body").on("click.alert.data-api",t,n.prototype.close)})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.$element=e(t),this.options=e.extend({},e.fn.button.defaults,n)};t.prototype.setState=function(e){var t="disabled",n=this.$element,r=n.data(),i=n.is("input")?"val":"html";e+="Text",r.resetText||n.data("resetText",n[i]()),n[i](r[e]||this.options[e]),setTimeout(function(){e=="loadingText"?n.addClass(t).attr(t,t):n.removeClass(t).removeAttr(t)},0)},t.prototype.toggle=function(){var e=this.$element.parent('[data-toggle="buttons-radio"]');e&&e.find(".active").removeClass("active"),this.$element.toggleClass("active")},e.fn.button=function(n){return this.each(function(){var r=e(this),i=r.data("button"),s=typeof n=="object"&&n;i||r.data("button",i=new t(this,s)),n=="toggle"?i.toggle():n&&i.setState(n)})},e.fn.button.defaults={loadingText:"loading..."},e.fn.button.Constructor=t,e(function(){e("body").on("click.button.data-api","[data-toggle^=button]",function(t){var n=e(t.target);n.hasClass("btn")||(n=n.closest(".btn")),n.button("toggle")})})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.$element=e(t),this.options=n,this.options.slide&&this.slide(this.options.slide),this.options.pause=="hover"&&this.$element.on("mouseenter",e.proxy(this.pause,this)).on("mouseleave",e.proxy(this.cycle,this))};t.prototype={cycle:function(t){return t||(this.paused=!1),this.options.interval&&!this.paused&&(this.interval=setInterval(e.proxy(this.next,this),this.options.interval)),this},to:function(t){var n=this.$element.find(".item.active"),r=n.parent().children(),i=r.index(n),s=this;if(t>r.length-1||t<0)return;return this.sliding?this.$element.one("slid",function(){s.to(t)}):i==t?this.pause().cycle():this.slide(t>i?"next":"prev",e(r[t]))},pause:function(t){return t||(this.paused=!0),this.$element.find(".next, .prev").length&&e.support.transition.end&&(this.$element.trigger(e.support.transition.end),this.cycle()),clearInterval(this.interval),this.interval=null,this},next:function(){if(this.sliding)return;return this.slide("next")},prev:function(){if(this.sliding)return;return this.slide("prev")},slide:function(t,n){var r=this.$element.find(".item.active"),i=n||r[t](),s=this.interval,o=t=="next"?"left":"right",u=t=="next"?"first":"last",a=this,f=e.Event("slide",{relatedTarget:i[0]});this.sliding=!0,s&&this.pause(),i=i.length?i:this.$element.find(".item")[u]();if(i.hasClass("active"))return;if(e.support.transition&&this.$element.hasClass("slide")){this.$element.trigger(f);if(f.isDefaultPrevented())return;i.addClass(t),i[0].offsetWidth,r.addClass(o),i.addClass(o),this.$element.one(e.support.transition.end,function(){i.removeClass([t,o].join(" ")).addClass("active"),r.removeClass(["active",o].join(" ")),a.sliding=!1,setTimeout(function(){a.$element.trigger("slid")},0)})}else{this.$element.trigger(f);if(f.isDefaultPrevented())return;r.removeClass("active"),i.addClass("active"),this.sliding=!1,this.$element.trigger("slid")}return s&&this.cycle(),this}},e.fn.carousel=function(n){return this.each(function(){var r=e(this),i=r.data("carousel"),s=e.extend({},e.fn.carousel.defaults,typeof n=="object"&&n),o=typeof n=="string"?n:s.slide;i||r.data("carousel",i=new t(this,s)),typeof n=="number"?i.to(n):o?i[o]():s.interval&&i.cycle()})},e.fn.carousel.defaults={interval:5e3,pause:"hover"},e.fn.carousel.Constructor=t,e(function(){e("body").on("click.carousel.data-api","[data-slide]",function(t){var n=e(this),r,i=e(n.attr("data-target")||(r=n.attr("href"))&&r.replace(/.*(?=#[^\s]+$)/,"")),s=!i.data("modal")&&e.extend({},i.data(),n.data());i.carousel(s),t.preventDefault()})})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.$element=e(t),this.options=e.extend({},e.fn.collapse.defaults,n),this.options.parent&&(this.$parent=e(this.options.parent)),this.options.toggle&&this.toggle()};t.prototype={constructor:t,dimension:function(){var e=this.$element.hasClass("width");return e?"width":"height"},show:function(){var t,n,r,i;if(this.transitioning)return;t=this.dimension(),n=e.camelCase(["scroll",t].join("-")),r=this.$parent&&this.$parent.find("> .accordion-group > .in");if(r&&r.length){i=r.data("collapse");if(i&&i.transitioning)return;r.collapse("hide"),i||r.data("collapse",null)}this.$element[t](0),this.transition("addClass",e.Event("show"),"shown"),e.support.transition&&this.$element[t](this.$element[0][n])},hide:function(){var t;if(this.transitioning)return;t=this.dimension(),this.reset(this.$element[t]()),this.transition("removeClass",e.Event("hide"),"hidden"),this.$element[t](0)},reset:function(e){var t=this.dimension();return this.$element.removeClass("collapse")[t](e||"auto")[0].offsetWidth,this.$element[e!==null?"addClass":"removeClass"]("collapse"),this},transition:function(t,n,r){var i=this,s=function(){n.type=="show"&&i.reset(),i.transitioning=0,i.$element.trigger(r)};this.$element.trigger(n);if(n.isDefaultPrevented())return;this.transitioning=1,this.$element[t]("in"),e.support.transition&&this.$element.hasClass("collapse")?this.$element.one(e.support.transition.end,s):s()},toggle:function(){this[this.$element.hasClass("in")?"hide":"show"]()}},e.fn.collapse=function(n){return this.each(function(){var r=e(this),i=r.data("collapse"),s=typeof n=="object"&&n;i||r.data("collapse",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.collapse.defaults={toggle:!0},e.fn.collapse.Constructor=t,e(function(){e("body").on("click.collapse.data-api","[data-toggle=collapse]",function(t){var n=e(this),r,i=n.attr("data-target")||t.preventDefault()||(r=n.attr("href"))&&r.replace(/.*(?=#[^\s]+$)/,""),s=e(i).data("collapse")?"toggle":n.data();n[e(i).hasClass("in")?"addClass":"removeClass"]("collapsed"),e(i).collapse(s)})})}(window.jQuery),!function(e){"use strict";function r(){i(e(t)).removeClass("open")}function i(t){var n=t.attr("data-target"),r;return n||(n=t.attr("href"),n=n&&n.replace(/.*(?=#[^\s]*$)/,"")),r=e(n),r.length||(r=t.parent()),r}var t="[data-toggle=dropdown]",n=function(t){var n=e(t).on("click.dropdown.data-api",this.toggle);e("html").on("click.dropdown.data-api",function(){n.parent().removeClass("open")})};n.prototype={constructor:n,toggle:function(t){var n=e(this),s,o;if(n.is(".disabled, :disabled"))return;return s=i(n),o=s.hasClass("open"),r(),o||(s.toggleClass("open"),n.focus()),!1},keydown:function(t){var n,r,s,o,u,a;if(!/(38|40|27)/.test(t.keyCode))return;n=e(this),t.preventDefault(),t.stopPropagation();if(n.is(".disabled, :disabled"))return;o=i(n),u=o.hasClass("open");if(!u||u&&t.keyCode==27)return n.click();r=e("[role=menu] li:not(.divider) a",o);if(!r.length)return;a=r.index(r.filter(":focus")),t.keyCode==38&&a>0&&a--,t.keyCode==40&&a<r.length-1&&a++,~a||(a=0),r.eq(a).focus()}},e.fn.dropdown=function(t){return this.each(function(){var r=e(this),i=r.data("dropdown");i||r.data("dropdown",i=new n(this)),typeof t=="string"&&i[t].call(r)})},e.fn.dropdown.Constructor=n,e(function(){e("html").on("click.dropdown.data-api touchstart.dropdown.data-api",r),e("body").on("click.dropdown touchstart.dropdown.data-api",".dropdown",function(e){e.stopPropagation()}).on("click.dropdown.data-api touchstart.dropdown.data-api",t,n.prototype.toggle).on("keydown.dropdown.data-api touchstart.dropdown.data-api",t+", [role=menu]",n.prototype.keydown)})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.options=n,this.$element=e(t).delegate('[data-dismiss="modal"]',"click.dismiss.modal",e.proxy(this.hide,this)),this.options.remote&&this.$element.find(".modal-body").load(this.options.remote)};t.prototype={constructor:t,toggle:function(){return this[this.isShown?"hide":"show"]()},show:function(){var t=this,n=e.Event("show");this.$element.trigger(n);if(this.isShown||n.isDefaultPrevented())return;e("body").addClass("modal-open"),this.isShown=!0,this.escape(),this.backdrop(function(){var n=e.support.transition&&t.$element.hasClass("fade");t.$element.parent().length||t.$element.appendTo(document.body),t.$element.show(),n&&t.$element[0].offsetWidth,t.$element.addClass("in").attr("aria-hidden",!1).focus(),t.enforceFocus(),n?t.$element.one(e.support.transition.end,function(){t.$element.trigger("shown")}):t.$element.trigger("shown")})},hide:function(t){t&&t.preventDefault();var n=this;t=e.Event("hide"),this.$element.trigger(t);if(!this.isShown||t.isDefaultPrevented())return;this.isShown=!1,e("body").removeClass("modal-open"),this.escape(),e(document).off("focusin.modal"),this.$element.removeClass("in").attr("aria-hidden",!0),e.support.transition&&this.$element.hasClass("fade")?this.hideWithTransition():this.hideModal()},enforceFocus:function(){var t=this;e(document).on("focusin.modal",function(e){t.$element[0]!==e.target&&!t.$element.has(e.target).length&&t.$element.focus()})},escape:function(){var e=this;this.isShown&&this.options.keyboard?this.$element.on("keyup.dismiss.modal",function(t){t.which==27&&e.hide()}):this.isShown||this.$element.off("keyup.dismiss.modal")},hideWithTransition:function(){var t=this,n=setTimeout(function(){t.$element.off(e.support.transition.end),t.hideModal()},500);this.$element.one(e.support.transition.end,function(){clearTimeout(n),t.hideModal()})},hideModal:function(e){this.$element.hide().trigger("hidden"),this.backdrop()},removeBackdrop:function(){this.$backdrop.remove(),this.$backdrop=null},backdrop:function(t){var n=this,r=this.$element.hasClass("fade")?"fade":"";if(this.isShown&&this.options.backdrop){var i=e.support.transition&&r;this.$backdrop=e('<div class="modal-backdrop '+r+'" />').appendTo(document.body),this.options.backdrop!="static"&&this.$backdrop.click(e.proxy(this.hide,this)),i&&this.$backdrop[0].offsetWidth,this.$backdrop.addClass("in"),i?this.$backdrop.one(e.support.transition.end,t):t()}else!this.isShown&&this.$backdrop?(this.$backdrop.removeClass("in"),e.support.transition&&this.$element.hasClass("fade")?this.$backdrop.one(e.support.transition.end,e.proxy(this.removeBackdrop,this)):this.removeBackdrop()):t&&t()}},e.fn.modal=function(n){return this.each(function(){var r=e(this),i=r.data("modal"),s=e.extend({},e.fn.modal.defaults,r.data(),typeof n=="object"&&n);i||r.data("modal",i=new t(this,s)),typeof n=="string"?i[n]():s.show&&i.show()})},e.fn.modal.defaults={backdrop:!0,keyboard:!0,show:!0},e.fn.modal.Constructor=t,e(function(){e("body").on("click.modal.data-api",'[data-toggle="modal"]',function(t){var n=e(this),r=n.attr("href"),i=e(n.attr("data-target")||r&&r.replace(/.*(?=#[^\s]+$)/,"")),s=i.data("modal")?"toggle":e.extend({remote:!/#/.test(r)&&r},i.data(),n.data());t.preventDefault(),i.modal(s).one("hide",function(){n.focus()})})})}(window.jQuery),!function(e){"use strict";var t=function(e,t){this.init("tooltip",e,t)};t.prototype={constructor:t,init:function(t,n,r){var i,s;this.type=t,this.$element=e(n),this.options=this.getOptions(r),this.enabled=!0,this.options.trigger=="click"?this.$element.on("click."+this.type,this.options.selector,e.proxy(this.toggle,this)):this.options.trigger!="manual"&&(i=this.options.trigger=="hover"?"mouseenter":"focus",s=this.options.trigger=="hover"?"mouseleave":"blur",this.$element.on(i+"."+this.type,this.options.selector,e.proxy(this.enter,this)),this.$element.on(s+"."+this.type,this.options.selector,e.proxy(this.leave,this))),this.options.selector?this._options=e.extend({},this.options,{trigger:"manual",selector:""}):this.fixTitle()},getOptions:function(t){return t=e.extend({},e.fn[this.type].defaults,t,this.$element.data()),t.delay&&typeof t.delay=="number"&&(t.delay={show:t.delay,hide:t.delay}),t},enter:function(t){var n=e(t.currentTarget)[this.type](this._options).data(this.type);if(!n.options.delay||!n.options.delay.show)return n.show();clearTimeout(this.timeout),n.hoverState="in",this.timeout=setTimeout(function(){n.hoverState=="in"&&n.show()},n.options.delay.show)},leave:function(t){var n=e(t.currentTarget)[this.type](this._options).data(this.type);this.timeout&&clearTimeout(this.timeout);if(!n.options.delay||!n.options.delay.hide)return n.hide();n.hoverState="out",this.timeout=setTimeout(function(){n.hoverState=="out"&&n.hide()},n.options.delay.hide)},show:function(){var e,t,n,r,i,s,o;if(this.hasContent()&&this.enabled){e=this.tip(),this.setContent(),this.options.animation&&e.addClass("fade"),s=typeof this.options.placement=="function"?this.options.placement.call(this,e[0],this.$element[0]):this.options.placement,t=/in/.test(s),e.remove().css({top:0,left:0,display:"block"}).appendTo(t?this.$element:document.body),n=this.getPosition(t),r=e[0].offsetWidth,i=e[0].offsetHeight;switch(t?s.split(" ")[1]:s){case"bottom":o={top:n.top+n.height,left:n.left+n.width/2-r/2};break;case"top":o={top:n.top-i,left:n.left+n.width/2-r/2};break;case"left":o={top:n.top+n.height/2-i/2,left:n.left-r};break;case"right":o={top:n.top+n.height/2-i/2,left:n.left+n.width}}e.css(o).addClass(s).addClass("in")}},setContent:function(){var e=this.tip(),t=this.getTitle();e.find(".tooltip-inner")[this.options.html?"html":"text"](t),e.removeClass("fade in top bottom left right")},hide:function(){function r(){var t=setTimeout(function(){n.off(e.support.transition.end).remove()},500);n.one(e.support.transition.end,function(){clearTimeout(t),n.remove()})}var t=this,n=this.tip();return n.removeClass("in"),e.support.transition&&this.$tip.hasClass("fade")?r():n.remove(),this},fixTitle:function(){var e=this.$element;(e.attr("title")||typeof e.attr("data-original-title")!="string")&&e.attr("data-original-title",e.attr("title")||"").removeAttr("title")},hasContent:function(){return this.getTitle()},getPosition:function(t){return e.extend({},t?{top:0,left:0}:this.$element.offset(),{width:this.$element[0].offsetWidth,height:this.$element[0].offsetHeight})},getTitle:function(){var e,t=this.$element,n=this.options;return e=t.attr("data-original-title")||(typeof n.title=="function"?n.title.call(t[0]):n.title),e},tip:function(){return this.$tip=this.$tip||e(this.options.template)},validate:function(){this.$element[0].parentNode||(this.hide(),this.$element=null,this.options=null)},enable:function(){this.enabled=!0},disable:function(){this.enabled=!1},toggleEnabled:function(){this.enabled=!this.enabled},toggle:function(){this[this.tip().hasClass("in")?"hide":"show"]()},destroy:function(){this.hide().$element.off("."+this.type).removeData(this.type)}},e.fn.tooltip=function(n){return this.each(function(){var r=e(this),i=r.data("tooltip"),s=typeof n=="object"&&n;i||r.data("tooltip",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.tooltip.Constructor=t,e.fn.tooltip.defaults={animation:!0,placement:"top",selector:!1,template:'<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',trigger:"hover",title:"",delay:0,html:!0}}(window.jQuery),!function(e){"use strict";var t=function(e,t){this.init("popover",e,t)};t.prototype=e.extend({},e.fn.tooltip.Constructor.prototype,{constructor:t,setContent:function(){var e=this.tip(),t=this.getTitle(),n=this.getContent();e.find(".popover-title")[this.options.html?"html":"text"](t),e.find(".popover-content > *")[this.options.html?"html":"text"](n),e.removeClass("fade top bottom left right in")},hasContent:function(){return this.getTitle()||this.getContent()},getContent:function(){var e,t=this.$element,n=this.options;return e=t.attr("data-content")||(typeof n.content=="function"?n.content.call(t[0]):n.content),e},tip:function(){return this.$tip||(this.$tip=e(this.options.template)),this.$tip},destroy:function(){this.hide().$element.off("."+this.type).removeData(this.type)}}),e.fn.popover=function(n){return this.each(function(){var r=e(this),i=r.data("popover"),s=typeof n=="object"&&n;i||r.data("popover",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.popover.Constructor=t,e.fn.popover.defaults=e.extend({},e.fn.tooltip.defaults,{placement:"right",trigger:"click",content:"",template:'<div class="popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'})}(window.jQuery),!function(e){"use strict";function t(t,n){var r=e.proxy(this.process,this),i=e(t).is("body")?e(window):e(t),s;this.options=e.extend({},e.fn.scrollspy.defaults,n),this.$scrollElement=i.on("scroll.scroll-spy.data-api",r),this.selector=(this.options.target||(s=e(t).attr("href"))&&s.replace(/.*(?=#[^\s]+$)/,"")||"")+" .nav li > a",this.$body=e("body"),this.refresh(),this.process()}t.prototype={constructor:t,refresh:function(){var t=this,n;this.offsets=e([]),this.targets=e([]),n=this.$body.find(this.selector).map(function(){var t=e(this),n=t.data("target")||t.attr("href"),r=/^#\w/.test(n)&&e(n);return r&&r.length&&[[r.position().top,n]]||null}).sort(function(e,t){return e[0]-t[0]}).each(function(){t.offsets.push(this[0]),t.targets.push(this[1])})},process:function(){var e=this.$scrollElement.scrollTop()+this.options.offset,t=this.$scrollElement[0].scrollHeight||this.$body[0].scrollHeight,n=t-this.$scrollElement.height(),r=this.offsets,i=this.targets,s=this.activeTarget,o;if(e>=n)return s!=(o=i.last()[0])&&this.activate(o);for(o=r.length;o--;)s!=i[o]&&e>=r[o]&&(!r[o+1]||e<=r[o+1])&&this.activate(i[o])},activate:function(t){var n,r;this.activeTarget=t,e(this.selector).parent(".active").removeClass("active"),r=this.selector+'[data-target="'+t+'"],'+this.selector+'[href="'+t+'"]',n=e(r).parent("li").addClass("active"),n.parent(".dropdown-menu").length&&(n=n.closest("li.dropdown").addClass("active")),n.trigger("activate")}},e.fn.scrollspy=function(n){return this.each(function(){var r=e(this),i=r.data("scrollspy"),s=typeof n=="object"&&n;i||r.data("scrollspy",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.scrollspy.Constructor=t,e.fn.scrollspy.defaults={offset:10},e(window).on("load",function(){e('[data-spy="scroll"]').each(function(){var t=e(this);t.scrollspy(t.data())})})}(window.jQuery),!function(e){"use strict";var t=function(t){this.element=e(t)};t.prototype={constructor:t,show:function(){var t=this.element,n=t.closest("ul:not(.dropdown-menu)"),r=t.attr("data-target"),i,s,o;r||(r=t.attr("href"),r=r&&r.replace(/.*(?=#[^\s]*$)/,""));if(t.parent("li").hasClass("active"))return;i=n.find(".active a").last()[0],o=e.Event("show",{relatedTarget:i}),t.trigger(o);if(o.isDefaultPrevented())return;s=e(r),this.activate(t.parent("li"),n),this.activate(s,s.parent(),function(){t.trigger({type:"shown",relatedTarget:i})})},activate:function(t,n,r){function o(){i.removeClass("active").find("> .dropdown-menu > .active").removeClass("active"),t.addClass("active"),s?(t[0].offsetWidth,t.addClass("in")):t.removeClass("fade"),t.parent(".dropdown-menu")&&t.closest("li.dropdown").addClass("active"),r&&r()}var i=n.find("> .active"),s=r&&e.support.transition&&i.hasClass("fade");s?i.one(e.support.transition.end,o):o(),i.removeClass("in")}},e.fn.tab=function(n){return this.each(function(){var r=e(this),i=r.data("tab");i||r.data("tab",i=new t(this)),typeof n=="string"&&i[n]()})},e.fn.tab.Constructor=t,e(function(){e("body").on("click.tab.data-api",'[data-toggle="tab"], [data-toggle="pill"]',function(t){t.preventDefault(),e(this).tab("show")})})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.$element=e(t),this.options=e.extend({},e.fn.typeahead.defaults,n),this.matcher=this.options.matcher||this.matcher,this.sorter=this.options.sorter||this.sorter,this.highlighter=this.options.highlighter||this.highlighter,this.updater=this.options.updater||this.updater,this.$menu=e(this.options.menu).appendTo("body"),this.source=this.options.source,this.shown=!1,this.listen()};t.prototype={constructor:t,select:function(){var e=this.$menu.find(".active").attr("data-value");return this.$element.val(this.updater(e)).change(),this.hide()},updater:function(e){return e},show:function(){var t=e.extend({},this.$element.offset(),{height:this.$element[0].offsetHeight});return this.$menu.css({top:t.top+t.height,left:t.left}),this.$menu.show(),this.shown=!0,this},hide:function(){return this.$menu.hide(),this.shown=!1,this},lookup:function(t){var n;return this.query=this.$element.val(),!this.query||this.query.length<this.options.minLength?this.shown?this.hide():this:(n=e.isFunction(this.source)?this.source(this.query,e.proxy(this.process,this)):this.source,n?this.process(n):this)},process:function(t){var n=this;return t=e.grep(t,function(e){return n.matcher(e)}),t=this.sorter(t),t.length?this.render(t.slice(0,this.options.items)).show():this.shown?this.hide():this},matcher:function(e){return~e.toLowerCase().indexOf(this.query.toLowerCase())},sorter:function(e){var t=[],n=[],r=[],i;while(i=e.shift())i.toLowerCase().indexOf(this.query.toLowerCase())?~i.indexOf(this.query)?n.push(i):r.push(i):t.push(i);return t.concat(n,r)},highlighter:function(e){var t=this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g,"\\$&");return e.replace(new RegExp("("+t+")","ig"),function(e,t){return"<strong>"+t+"</strong>"})},render:function(t){var n=this;return t=e(t).map(function(t,r){return t=e(n.options.item).attr("data-value",r),t.find("a").html(n.highlighter(r)),t[0]}),t.first().addClass("active"),this.$menu.html(t),this},next:function(t){var n=this.$menu.find(".active").removeClass("active"),r=n.next();r.length||(r=e(this.$menu.find("li")[0])),r.addClass("active")},prev:function(e){var t=this.$menu.find(".active").removeClass("active"),n=t.prev();n.length||(n=this.$menu.find("li").last()),n.addClass("active")},listen:function(){this.$element.on("blur",e.proxy(this.blur,this)).on("keypress",e.proxy(this.keypress,this)).on("keyup",e.proxy(this.keyup,this)),(e.browser.webkit||e.browser.msie)&&this.$element.on("keydown",e.proxy(this.keydown,this)),this.$menu.on("click",e.proxy(this.click,this)).on("mouseenter","li",e.proxy(this.mouseenter,this))},move:function(e){if(!this.shown)return;switch(e.keyCode){case 9:case 13:case 27:e.preventDefault();break;case 38:e.preventDefault(),this.prev();break;case 40:e.preventDefault(),this.next()}e.stopPropagation()},keydown:function(t){this.suppressKeyPressRepeat=!~e.inArray(t.keyCode,[40,38,9,13,27]),this.move(t)},keypress:function(e){if(this.suppressKeyPressRepeat)return;this.move(e)},keyup:function(e){switch(e.keyCode){case 40:case 38:break;case 9:case 13:if(!this.shown)return;this.select();break;case 27:if(!this.shown)return;this.hide();break;default:this.lookup()}e.stopPropagation(),e.preventDefault()},blur:function(e){var t=this;setTimeout(function(){t.hide()},150)},click:function(e){e.stopPropagation(),e.preventDefault(),this.select()},mouseenter:function(t){this.$menu.find(".active").removeClass("active"),e(t.currentTarget).addClass("active")}},e.fn.typeahead=function(n){return this.each(function(){var r=e(this),i=r.data("typeahead"),s=typeof n=="object"&&n;i||r.data("typeahead",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.typeahead.defaults={source:[],items:8,menu:'<ul class="typeahead dropdown-menu"></ul>',item:'<li><a href="#"></a></li>',minLength:1},e.fn.typeahead.Constructor=t,e(function(){e("body").on("focus.typeahead.data-api",'[data-provide="typeahead"]',function(t){var n=e(this);if(n.data("typeahead"))return;t.preventDefault(),n.typeahead(n.data())})})}(window.jQuery),!function(e){"use strict";var t=function(t,n){this.options=e.extend({},e.fn.affix.defaults,n),this.$window=e(window).on("scroll.affix.data-api",e.proxy(this.checkPosition,this)),this.$element=e(t),this.checkPosition()};t.prototype.checkPosition=function(){if(!this.$element.is(":visible"))return;var t=e(document).height(),n=this.$window.scrollTop(),r=this.$element.offset(),i=this.options.offset,s=i.bottom,o=i.top,u="affix affix-top affix-bottom",a;typeof i!="object"&&(s=o=i),typeof o=="function"&&(o=i.top()),typeof s=="function"&&(s=i.bottom()),a=this.unpin!=null&&n+this.unpin<=r.top?!1:s!=null&&r.top+this.$element.height()>=t-s?"bottom":o!=null&&n<=o?"top":!1;if(this.affixed===a)return;this.affixed=a,this.unpin=a=="bottom"?r.top-n:null,this.$element.removeClass(u).addClass("affix"+(a?"-"+a:""))},e.fn.affix=function(n){return this.each(function(){var r=e(this),i=r.data("affix"),s=typeof n=="object"&&n;i||r.data("affix",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.affix.Constructor=t,e.fn.affix.defaults={offset:0},e(window).on("load",function(){e('[data-spy="affix"]').each(function(){var t=e(this),n=t.data();n.offset=n.offset||{},n.offsetBottom&&(n.offset.bottom=n.offsetBottom),n.offsetTop&&(n.offset.top=n.offsetTop),t.affix(n)})})}(window.jQuery);
7 | 


--------------------------------------------------------------------------------
/javascript/remix.js:
--------------------------------------------------------------------------------
  1 | // Remix.js
  2 | // Thor Kell & Paul Lamere, 12/2012
  3 | // Based on Paul Lamere's Infinite Jukebox and assorted other javascript projects
  4 | var jsonRetryCount = 9;
  5 | var jsonRetryInterval = 3000;
  6 | 
  7 | function createJRemixer(context, jquery, apiKey) {
  8 |     var $ = jquery;
  9 |     $.ajaxSetup({ cache: false });
 10 | 
 11 |     var remixer = {
 12 |         // If you have an EN TRack ID and the location of the audio.
 13 |         remixTrackById: function(trackID, trackURL, callback) {
 14 |             var track;
 15 |             var url = 'http://developer.echonest.com/api/v4/track/profile?format=json&bucket=audio_summary'
 16 | 
 17 |            var retryCount = 3;
 18 |            var retryInterval = 3000;
 19 | 
 20 |             function lookForAnalysis(trackID, trackURL, callback) {
 21 |                 $.getJSON(url, {id:trackID, api_key:apiKey}, function(data) {
 22 |                     var analysisURL = data.response.track.audio_summary.analysis_url;
 23 |                     track = data.response.track;
 24 |                     
 25 |                     // This call is proxied through the yahoo query engine.  
 26 |                     // This is temporary, but works.
 27 |                     $.getJSON("http://query.yahooapis.com/v1/public/yql", 
 28 |                         { q: "select * from json where url=\"" + analysisURL + "\"", format: "json"}, 
 29 |                         function(data) {
 30 | 							console.log(data);
 31 |                             if (data.query.results != null) {
 32 |                                 track.analysis = data.query.results.json;
 33 |                                 console.log("Analysis obtained...");
 34 |                                 remixer.remixTrack(track, trackURL, callback);   
 35 |                             }
 36 |                             else {
 37 |                                 retryCount = retryCount - 1;
 38 |                                 retryInterval = retryInterval + retryInterval;
 39 |                                 if (retryCount > 0) {
 40 |                                     console.log('Analysis pending, trying again')
 41 |                                     callback(track, "Analysis pending, retrying - 0");  
 42 |                                     setTimeout(function () {
 43 |                                         lookForAnalysis(trackID, trackURL, callback);
 44 |                                     }, retryInterval);
 45 |                                 } else {
 46 |                                     callback(track, "Error:  no analysis data returned for that track - 0");  
 47 |                                     console.log('error', 'No analysis data returned:  try again, or try another trackID');   
 48 |                                 }
 49 |                             }
 50 |                     }) // end yahoo proxy getJson
 51 | 					.fail(function()
 52 | 						{
 53 | 							console.log("retrying json request");
 54 | 							jsonRetryCount = jsonRetryCount -1;
 55 | 							if(jsonRetryCount >0)
 56 | 							{	
 57 | 							  setTimeout(function () {
 58 |                                         lookForAnalysis(trackID, trackURL, callback);
 59 |                                     }, jsonRetryInterval);
 60 | 
 61 | 
 62 | 
 63 | 							}
 64 | 
 65 | 						});	
 66 | 
 67 |                 });
 68 | 									
 69 | 						
 70 | 				
 71 |             } // end lookForAnalysis
 72 |             lookForAnalysis(trackID, trackURL, callback);
 73 |         },
 74 | 
 75 |         // If you have a SoundCloud URL.
 76 |         remixTrackBySoundCloudURL: function(soundCloudURL, soundClouddClientID, callback) {
 77 |            var bridgeURL = "http://labs.echonest.com/SCAnalyzer/analyze?id=" + soundCloudURL;
 78 |            var retryCount = 3;
 79 |            var retryInterval = 2000;
 80 | 
 81 |            function lookForTrackID(bridgeURL, soundClouddClientID, callback) {
 82 |                 $.getJSON(bridgeURL, function(data) {
 83 |                     if (data.status == "OK") {
 84 |                         var trackID = data.trid;
 85 |                         var scResolveURL = 'http://api.soundcloud.com/resolve.json'
 86 |                         $.getJSON(scResolveURL, {client_id:soundClouddClientID, url:soundCloudURL}, function(data) {
 87 |                             var downloadURL = data.stream_url + '?client_id=' + soundClouddClientID;
 88 |                             console.log('got all data from SoundCloud, about to start remix');  
 89 |                             remixer.remixTrackById(trackID, downloadURL, callback);
 90 |                         });
 91 |                     } else {
 92 |                         retryCount = retryCount - 1;
 93 |                         retryInterval = retryInterval + retryInterval;
 94 |                         if (retryCount > 0) {
 95 |                             setTimeout(function () {
 96 |                                 lookForTrackID(bridgeURL, soundClouddClientID, callback);
 97 |                             }, retryInterval);
 98 |                         } else {
 99 |                             callback(track, "Error:  no trackID returned.");  
100 |                             console.log('error', 'no trackID returned.');       
101 |                         }
102 |                      } // end else
103 |                 });
104 |             }
105 |             lookForTrackID(bridgeURL, soundClouddClientID, callback);
106 |         },
107 | 
108 |         // If you have the analysis URL already, or if you've cached it in your app.
109 |         // Be *very* careful when searching for analysis URL by song:  it may not match the track being used.  
110 |         remixTrackByURL: function(analysisURL, trackURL, callback) {
111 |             var track = new Object();
112 |             $.getJSON(analysisURL, function(data) {
113 |                 track.analysis = data;
114 |                 track.status = "complete";
115 |                 remixer.remixTrack(track, trackURL, callback);
116 | 
117 |             });
118 |         },
119 | 
120 |         remixTrack : function(track, trackURL, callback) {
121 |             function fetchAudio(url) {
122 |                 var request = new XMLHttpRequest();
123 |                 trace("fetchAudio " + url);
124 |                 track.buffer = null;
125 |                 request.open("GET", url, true);
126 |                 request.responseType = "arraybuffer";
127 |                 this.request = request;
128 | 
129 |                 request.onload = function() {
130 | 
131 |                     trace('audio loaded');
132 |                      if (false) {
133 |                         track.buffer = context.createBuffer(request.response, false);
134 |                         track.status = 'ok'
135 |                     } else {
136 |                         context.decodeAudioData(request.response, 
137 |                             function(buffer) {      // completed function
138 |                                 track.buffer = buffer;
139 |                                 track.status = 'ok';
140 |                                 callback(track, 100);   
141 |                             }, 
142 |                             function(e) { // error function
143 |                                 track.status = 'error: loading audio'
144 |                                 console.log('audio error', e);
145 |                             }
146 |                         );
147 |                     }
148 |                 }
149 |                 request.onerror = function(e) {
150 |                     trace('error loading loaded');
151 |                     track.status = 'error: loading audio'
152 |                 }
153 |                 request.onprogress = function(e) {
154 |                     var percent = Math.round(e.loaded * 100 / e.total);
155 |                     callback(track, percent);   
156 |                 }
157 |                 request.send();
158 |             }
159 | 
160 |             function preprocessTrack(track) {
161 |                 trace('preprocessTrack');
162 |                 var types = ['sections', 'bars', 'beats', 'tatums', 'segments'];
163 | 
164 |                 for (var i in types) {
165 |                     var type = types[i];
166 |                     trace('preprocessTrack ' + type);
167 |                     for (var j in track.analysis[type]) {
168 |                         var qlist = track.analysis[type]
169 |                         j = parseInt(j)
170 |                         var q = qlist[j]
171 | 
172 |                         q.start = parseFloat(q.start);
173 |                         q.duration = parseFloat(q.duration);
174 |                         q.confidence = parseFloat(q.confidence);
175 |                         if (type == 'segments') {
176 |                             q.loudness_max = parseFloat(q.loudness_max);
177 |                             q.loudness_max_time = parseFloat(q.loudness_max_time);
178 |                             q.loudness_start = parseFloat(q.loudness_start);
179 | 
180 |                             for (var k = 0; k < q.pitches.length; k++) {
181 |                                 q.pitches[k] = parseFloat(q.pitches[k]);
182 |                             }
183 |                             for (var k = 0; k < q.timbre.length; k++) {
184 |                                 q.timbre[k] = parseFloat(q.timbre[k]);
185 |                             }
186 |                         }
187 |                         q.track = track;
188 |                         q.which = j;
189 |                         if (j > 0) {
190 |                             q.prev = qlist[j-1];
191 |                         } else {
192 |                             q.prev = null
193 |                         }
194 |                         
195 |                         if (j < qlist.length - 1) {
196 |                             q.next = qlist[j+1];
197 |                         } else {
198 |                             q.next = null
199 |                         }
200 |                     }
201 |                 }
202 | 
203 |                 connectQuanta(track, 'sections', 'bars');
204 |                 connectQuanta(track, 'bars', 'beats');
205 |                 connectQuanta(track, 'beats', 'tatums');
206 |                 connectQuanta(track, 'tatums', 'segments');
207 | 
208 |                 connectFirstOverlappingSegment(track, 'bars');
209 |                 connectFirstOverlappingSegment(track, 'beats');
210 |                 connectFirstOverlappingSegment(track, 'tatums');
211 | 
212 |                 connectAllOverlappingSegments(track, 'bars');
213 |                 connectAllOverlappingSegments(track, 'beats');
214 |                 connectAllOverlappingSegments(track, 'tatums');
215 | 
216 |                 filterSegments(track);
217 |             }
218 | 
219 |             function filterSegments(track) {
220 |                 var threshold = .3;
221 |                 var fsegs = [];
222 |                 fsegs.push(track.analysis.segments[0]);
223 |                 for (var i = 1; i < track.analysis.segments.length; i++) {
224 |                     var seg = track.analysis.segments[i];
225 |                     var last = fsegs[fsegs.length - 1];
226 |                     if (isSimilar(seg, last) && seg.confidence < threshold) {
227 |                         fsegs[fsegs.length -1].duration += seg.duration;
228 |                     } else {
229 |                         fsegs.push(seg);
230 |                     }
231 |                 }
232 |                 track.analysis.fsegments = fsegs;
233 |             }
234 | 
235 |             function isSimilar(seg1, seg2) {
236 |                 var threshold = 1;
237 |                 var distance = timbral_distance(seg1, seg2);
238 |                 return (distance < threshold);
239 |             }
240 | 
241 |             function connectQuanta(track, parent, child) {
242 |                 var last = 0;
243 |                 var qparents = track.analysis[parent];
244 |                 var qchildren = track.analysis[child];
245 | 
246 |                 for (var i in qparents) {
247 |                     var qparent = qparents[i]
248 |                     qparent.children = [];
249 | 
250 |                     for (var j = last; j < qchildren.length; j++) {
251 |                         var qchild = qchildren[j];
252 |                         if (qchild.start >= qparent.start 
253 |                                     && qchild.start < qparent.start + qparent.duration) {
254 |                             qchild.parent = qparent;
255 |                             qchild.indexInParent = qparent.children.length;
256 |                             qparent.children.push(qchild);
257 |                             last = j;
258 |                         } else if (qchild.start > qparent.start) {
259 |                             break;
260 |                         }
261 |                     }
262 |                 }
263 |             }
264 | 
265 |             // connects a quanta with the first overlapping segment
266 |             function connectFirstOverlappingSegment(track, quanta_name) {
267 |                 var last = 0;
268 |                 var quanta = track.analysis[quanta_name];
269 |                 var segs = track.analysis.segments;
270 | 
271 |                 for (var i = 0; i < quanta.length; i++) {
272 |                     var q = quanta[i]
273 | 
274 |                     for (var j = last; j < segs.length; j++) {
275 |                         var qseg = segs[j];
276 |                         if (qseg.start >= q.start) {
277 |                             q.oseg = qseg;
278 |                             last = j;
279 |                             break
280 |                         } 
281 |                     }
282 |                 }
283 |             }
284 | 
285 |             function connectAllOverlappingSegments(track, quanta_name) {
286 |                 var last = 0;
287 |                 var quanta = track.analysis[quanta_name];
288 |                 var segs = track.analysis.segments;
289 | 
290 |                 for (var i = 0; i < quanta.length; i++) {
291 |                     var q = quanta[i]
292 |                     q.overlappingSegments = [];
293 | 
294 |                     for (var j = last; j < segs.length; j++) {
295 |                         var qseg = segs[j];
296 |                         // seg starts before quantum so no
297 |                         if (parseFloat(qseg.start) + parseFloat(qseg.duration) < parseFloat(q.start)) {
298 |                             continue;
299 |                         }
300 |                         // seg starts after quantum so no
301 |                         if (parseFloat(qseg.start) > parseFloat(q.start) + parseFloat(q.duration)) {
302 |                             break;
303 |                         }
304 |                         last = j;
305 |                         q.overlappingSegments.push(qseg);
306 |                     }
307 |                 }
308 |             }
309 | 
310 | 
311 |             if (track.status == 'complete') {
312 |                 preprocessTrack(track);
313 |                 fetchAudio(trackURL);
314 |             } else {
315 |                 track.status = 'error: incomplete analysis';
316 |             }
317 |         },
318 | 
319 |         getPlayer : function(effects) {
320 |             var queueTime = 0;
321 |             var audioGain = context.createGain();
322 |             var curAudioSource = null;
323 |             var currentlyQueued = new Array();
324 |             var curQ = null;
325 |             var onPlayCallback = null;
326 |             var afterPlayCallback = null;
327 |             var currentTriggers = new Array();
328 |             audioGain.gain.value = 1;
329 | 
330 |             // Connect effects
331 |             effects = effects || [];
332 |             effects.unshift(audioGain);
333 |             for (var i = 0; i < effects.length -1; i++) {
334 |                 effects[i].connect(effects[i + 1]);
335 |             }
336 |             effects[i].connect(context.destination);
337 | 
338 |             function queuePlay(when, q) {
339 |                 audioGain.gain.value = 1;
340 |                 if (isAudioBuffer(q)) {
341 |                     var audioSource = context.createBufferSource();
342 |                     audioSource.buffer = q;
343 |                     audioSource.connect(audioGain);
344 |                     currentlyQueued.push(audioSource);
345 |                     audioSource.start(when);
346 |                     if (onPlayCallback != null) {
347 |                         theTime = (when - context.currentTime) *  1000;
348 |                         currentTriggers.push(setTimeout(onPlayCallback, theTime));
349 |                     }
350 |                     if (afterPlayCallback != null) {
351 |                         theTime = (when - context.currentTime + parseFloat(q.duration)) *  1000;
352 |                         currentTriggers.push(setTimeout(afterPlayCallback, theTime));
353 |                     }
354 |                     return when + parseFloat(q.duration);
355 |                 } else if ($.isArray(q)) {
356 |                     // Correct for load times
357 |                     if (when == 0) {
358 |                         when = context.currentTime;
359 |                     }
360 |                     for (var i = 0; i < q.length; i++) {
361 |                         when = queuePlay(when, q[i]);
362 |                     }
363 |                     return when;
364 |                 } else if (isQuantum(q)) {
365 |                     var audioSource = context.createBufferSource();
366 |                     audioSource.buffer = q.track.buffer;
367 |                     audioSource.connect(audioGain);
368 |                     q.audioSource = audioSource;
369 |                     currentlyQueued.push(audioSource);
370 |                     audioSource.start(when, q.start, q.duration);
371 | 
372 |                     // I need to clean up all these ifs
373 |                     if ("syncBuffer" in q) {
374 |                         var audioSource = context.createBufferSource();
375 |                         audioSource.buffer = q.syncBuffer;
376 |                         audioSource.connect(audioGain);
377 |                         currentlyQueued.push(audioSource);
378 |                         audioSource.start(when);
379 |                     }
380 | 
381 |                     if (onPlayCallback != null) {
382 |                         theTime = (when - context.currentTime) *  1000;
383 |                         currentTriggers.push(setTimeout(onPlayCallback, theTime));
384 |                     }
385 |                     if (afterPlayCallback != null) {
386 |                         theTime = (when - context.currentTime + parseFloat(q.duration)) *  1000;
387 |                         currentTriggers.push(setTimeout(afterPlayCallback, theTime));
388 |                     }
389 |                     return (when + parseFloat(q.duration));
390 |                 } 
391 |                 else if (isSilence(q)) {
392 |                     return (when + parseFloat(q.duration));
393 |                 }
394 |                 else {
395 |                     error("can't play " + q);
396 |                     return when;
397 |                 }
398 |             }
399 | 
400 |             function error(s) {
401 |                 console.log(s);
402 |             }
403 | 
404 |             var player = {
405 |                 play: function(when, q) {
406 |                     return queuePlay(0, q);
407 |                 },
408 | 
409 |                 addOnPlayCallback: function(callback) {
410 |                     onPlayCallback = callback;
411 |                 },
412 |         
413 |                 addAfterPlayCallback: function(callback) {
414 |                     afterPlayCallback = callback;
415 |                 },
416 | 
417 |                 queue: function(q) {
418 |                     var now = context.currentTime;
419 |                     if (now > queueTime) {
420 |                         queueTime = now;
421 |                     }
422 |                     queueTime = queuePlay(queueTime, q);
423 |                 },
424 | 
425 |                 queueRest: function(duration) {
426 |                     queueTime += duration;
427 |                 },
428 | 
429 |                 stop: function() {
430 |                     for (var i = 0; i < currentlyQueued.length; i++) {
431 |                         if (currentlyQueued[i] != null) {
432 |                             currentlyQueued[i].stop();
433 |                         }
434 |                     }
435 |                     currentlyQueued = new Array();
436 | 
437 |                     if (currentTriggers.length > 0) {
438 |                         for (var i = 0; i < currentTriggers.length; i++) {
439 |                             clearTimeout(currentTriggers[i])
440 |                         }
441 |                         currentTriggers = new Array();
442 |                     }
443 |                 },
444 | 
445 |                 curTime: function() {
446 |                     return context.currentTime;
447 |                 },
448 |             }
449 |             return player;
450 |         },
451 | 
452 |         fetchSound : function(audioURL, callback) {
453 |             var request = new XMLHttpRequest();
454 | 
455 |             trace("fetchSound " + audioURL);
456 |             request.open("GET", audioURL, true);
457 |             request.responseType = "arraybuffer";
458 |             this.request = request;
459 | 
460 |             request.onload = function() {
461 |                 var buffer = context.createBuffer(request.response, false);
462 |                 callback(true, buffer);
463 |             }
464 | 
465 |             request.onerror = function(e) {
466 |                 callback(false, null);
467 |             }
468 |             request.send();
469 |         },
470 | 
471 |         // Saves the remixed audio using the HTML 5 temporary filesystem
472 |         saveRemixLocally : function(fs, remixed, callback) {
473 |             fs.root.getFile('my-remix.wav', {create: true}, function(fileEntry) {
474 |                 fileEntry.createWriter(function(fileWriter) {
475 |                     fileWriter.onwriteend = function(e) {
476 |                     console.log('Write completed.');
477 |                     callback(fileEntry.toURL());
478 |                     };
479 |                     fileWriter.onerror = function(e) {
480 |                     console.log('Write failed: ' + e.toString());
481 |                     };
482 | 
483 |                     var blob = new Blob([Wav.createWaveFileData(remixed)], {type: 'binary'});
484 | 
485 |                     fileWriter.write(blob);
486 |                 }, fileErrorHandler);
487 |             }, fileErrorHandler);
488 |         },
489 |  
490 |     };
491 | 
492 |     function isQuantum(a) {
493 |         return 'start' in a && 'duration' in a;
494 |     }
495 | 
496 |     function isAudioBuffer(a) {
497 |         return 'getChannelData' in a;
498 |     }
499 | 
500 |     function isSilence(a) {
501 |         return 'isSilence' in a;
502 |     }
503 | 
504 |     function trace(text) {
505 |         if (false) {
506 |             console.log(text);
507 |         }
508 |     }
509 | 
510 |     return remixer;
511 | }
512 | 
513 | 
514 | function euclidean_distance(v1, v2) {
515 |     var sum = 0;
516 |     for (var i = 0; i < 3; i++) {
517 |         var delta = v2[i] - v1[i];
518 |         sum += delta * delta;
519 |     }
520 |     return Math.sqrt(sum);
521 | }
522 | 
523 | function timbral_distance(s1, s2) {
524 |     return euclidean_distance(s1.timbre, s2.timbre);
525 | }
526 | 
527 | function clusterSegments(track, numClusters, fieldName, vecName) {
528 |     var vname = vecName || 'timbre';
529 |     var fname = fieldName || 'cluster';
530 |     var maxLoops = 1000;
531 | 
532 |     function zeroArray(size) {
533 |         var arry = [];
534 |         for (var i = 0; i < size; i++) {
535 |             arry.push(0);
536 |         }
537 |         return arry;
538 |     }
539 | 
540 |     function reportClusteringStats() {
541 |         var counts = zeroArray(numClusters);
542 |         for (var i = 0; i < track.analysis.segments.length; i++) {
543 |             var cluster = track.analysis.segments[i][fname];
544 |             counts[cluster]++;
545 |         }
546 |         //console.log('clustering stats');
547 |         for (var i = 0; i < counts.length; i++) {
548 |             //console.log('clus', i, counts[i]);
549 |         }
550 |     }
551 | 
552 |     function sumArray(v1, v2) {
553 |         for (var i = 0; i < v1.length; i++) {
554 |             v1[i] += v2[i];
555 |         }
556 |         return v1;
557 |     }
558 | 
559 |     function divArray(v1, scalar) {
560 |         for (var i = 0; i < v1.length; i++) {
561 |             v1[i] /= scalar
562 |         }
563 |         return v1;
564 |     }
565 |     function getCentroid(cluster) {
566 |         var count = 0;
567 |         var segs = track.analysis.segments;
568 |         var vsum = zeroArray(segs[0][vname].length);
569 | 
570 |         for (var i = 0; i < segs.length; i++) {
571 |             if (segs[i][fname] === cluster) {
572 |                 count++;
573 |                 vsum = sumArray(vsum, segs[i][vname]);
574 |             }
575 |         }
576 | 
577 |         vsum = divArray(vsum, count);
578 |         return vsum;
579 |     }
580 | 
581 |     function findNearestCluster(clusters, seg) {
582 |         var shortestDistance = Number.MAX_VALUE;
583 |         var bestCluster = -1;
584 | 
585 |         for (var i = 0; i < clusters.length; i++) {
586 |             var distance = euclidean_distance(clusters[i], seg[vname]);
587 |             if (distance < shortestDistance) {
588 |                 shortestDistance = distance;
589 |                 bestCluster = i;
590 |             }
591 |         }
592 |         return bestCluster;
593 |     }
594 | 
595 |     // kmeans clusterer
596 |     // use random initial assignments
597 |     for (var i = 0; i < track.analysis.segments.length; i++) {
598 |         track.analysis.segments[i][fname] = Math.floor(Math.random() * numClusters);
599 |     }
600 | 
601 |     reportClusteringStats();
602 | 
603 |     while (maxLoops-- > 0) {
604 |         // calculate cluster centroids
605 |         var centroids = [];
606 |         for (var i = 0; i < numClusters; i++) {
607 |             centroids[i] = getCentroid(i);
608 |         }
609 |         // reassign segs to clusters
610 |         var switches = 0;
611 |         for (var i = 0; i < track.analysis.segments.length; i++) {
612 |             var seg = track.analysis.segments[i];
613 |             var oldCluster = seg[fname];
614 |             var newCluster = findNearestCluster(centroids, seg);
615 |             if (oldCluster !== newCluster) {
616 |                 switches++;
617 |                 seg[fname] = newCluster;
618 |             }
619 |         }
620 |         //console.log("loopleft", maxLoops, 'switches', switches);
621 |         if (switches == 0) {
622 |             break;
623 |         }
624 |     }
625 |     reportClusteringStats();
626 | }
627 | 
628 | // Helper functions for handling uploads with Echo Nest support
629 | function endsWith(str, suffix) {
630 |     return str.indexOf(suffix, str.length - suffix.length) !== -1;
631 | }
632 | 
633 | function fixFileName(name) {
634 |     name = name.replace(/c:\\fakepath\\/i, '');
635 |     name = name.replace(/[^A-Z0-9.\-]+/gi, ' ');
636 |     name = Math.floor(Math.random(10000) * 10000) + ".mp3";
637 |     return 'remix_audio/' + apiKey + '/' + new Date().getTime() + '/' + name;
638 | }
639 | 
640 | function fetchSignature() {
641 |     var url = 'http://remix.echonest.com/Uploader/verify?callback=?&v=audio';
642 |     $.getJSON(url, {}, function(data) {
643 |         policy = data.policy;
644 |         signature = data.signature;
645 |         $('#f-policy').val(data.policy);
646 |         $('#f-signature').val(data.signature);
647 |         $('#f-key').val(data.key);
648 |     });
649 | }
650 | 
651 | function getProfile(trackID, callback) {
652 |     var url = 'http://remix.echonest.com/Uploader/profile?callback=?';
653 | 	console.log(url+'trid='+trackID);
654 |     return $.getJSON(url, {trid: trackID}, callback); 
655 | }
656 | 
657 | function urldecode(str) {
658 |    return decodeURIComponent((str+'').replace(/\+/g, '%20'));
659 | }
660 | 
661 | 
662 | // Error handler for writing remixes to wav files
663 | function fileErrorHandler(e) {
664 |   var msg = '';
665 | 
666 |   switch (e.code) {
667 |     case FileError.QUOTA_EXCEEDED_ERR:
668 |       msg = 'QUOTA_EXCEEDED_ERR';
669 |       break;
670 |     case FileError.NOT_FOUND_ERR:
671 |       msg = 'NOT_FOUND_ERR';
672 |       break;
673 |     case FileError.SECURITY_ERR:
674 |       msg = 'SECURITY_ERR';
675 |       break;
676 |     case FileError.INVALID_MODIFICATION_ERR:
677 |       msg = 'INVALID_MODIFICATION_ERR';
678 |       break;
679 |     case FileError.INVALID_STATE_ERR:
680 |       msg = 'INVALID_STATE_ERR';
681 |       break;
682 |     default:
683 |       msg = 'Unknown Error';
684 |       break;
685 |   };
686 | 
687 |   console.log('Error: ' + msg);
688 | }
689 | 
690 | // Wav code based on Tomás Senart's AudioJEdit - https://github.com/tsenart/audiojedit
691 | var Wav = {};
692 | Wav.createWaveFileData = (function() {
693 |   var writeString = function(s, a, offset) {
694 |     for (var i = 0; i < s.length; ++i) {
695 |       a[offset + i] = s.charCodeAt(i);
696 |     }
697 |   };
698 | 
699 |   var writeInt16 = function(n, a, offset) {
700 |     n = n | 0;
701 |     a[offset + 0] = n & 255;
702 |     a[offset + 1] = (n >> 8) & 255;
703 |   };
704 | 
705 |   var writeInt32 = function(n, a, offset) {
706 |     n = n | 0
707 |     a[offset + 0] = n & 255;
708 |     a[offset + 1] = (n >> 8) & 255;
709 |     a[offset + 2] = (n >> 16) & 255;
710 |     a[offset + 3] = (n >> 24) & 255;
711 |   };
712 | 
713 |   var writeAudioBuffer = function(a, offset, quanta) {
714 |     var bufferL, sampleL, bufferR, sampleR;
715 |     var currentBuffer;
716 | 
717 |     for (var q = 0; q < quanta.length; q++) {
718 | 
719 |         currentBuffer = quanta[q].track.buffer;
720 |         bufferL = currentBuffer.getChannelData(0);
721 |         bufferR = currentBuffer.getChannelData(1);
722 | 
723 |         var start = Math.floor(parseFloat(quanta[q].start) * currentBuffer.sampleRate);
724 |         var end = Math.floor((parseFloat(quanta[q].start) + parseFloat(quanta[q].duration)) * currentBuffer.sampleRate);
725 | 
726 |         for (var i = start; i < end; ++i) {
727 |             sampleL = bufferL[i] * 32768.0;
728 |             sampleR = bufferR[i] * 32768.0;
729 | 
730 |             // Clip left and right samples to the limitations of 16-bit.
731 |             // If we don't do this then we'll get nasty wrap-around distortion.
732 |             if (sampleL < -32768) { sampleL = -32768; }
733 |             if (sampleL >  32767) { sampleL =  32767; }
734 |             if (sampleR < -32768) { sampleR = -32768; }
735 |             if (sampleR >  32767) { sampleR =  32767; }
736 | 
737 |             writeInt16(sampleL, a, offset);
738 |             writeInt16(sampleR, a, offset + 2);
739 |             offset += 4; 
740 |         }
741 |     }
742 |   };
743 | 
744 |   return function(quanta) {
745 |     var remixDuration = 0;
746 |     for (var q = 0; q < quanta.length; q++) {
747 |         remixDuration = remixDuration + parseFloat(quanta[q].duration);
748 |     }
749 |     var currentBuffer = quanta[0].track.buffer;
750 |     var frameLength = remixDuration * currentBuffer.sampleRate,
751 |         numberOfChannels = currentBuffer.numberOfChannels,
752 |         sampleRate = currentBuffer.sampleRate,
753 |         bitsPerSample = 16,
754 |         byteRate = sampleRate * numberOfChannels * bitsPerSample / 8,
755 |         blockAlign = numberOfChannels * bitsPerSample / 8,
756 |         wavDataByteLength = frameLength * numberOfChannels * 2, // 16-bit audio
757 |         headerByteLength = 44,
758 |         totalLength = headerByteLength + wavDataByteLength,
759 |         waveFileData = new Uint8Array(totalLength),
760 |         subChunk1Size = 16, // for linear PCM
761 |         subChunk2Size = wavDataByteLength,
762 |         chunkSize = 4 + (8 + subChunk1Size) + (8 + subChunk2Size);
763 | 
764 |     writeString('RIFF', waveFileData, 0);
765 |     writeInt32(chunkSize, waveFileData, 4);
766 |     writeString('WAVE', waveFileData, 8);
767 |     writeString('fmt ', waveFileData, 12);
768 | 
769 |     writeInt32(subChunk1Size, waveFileData, 16);      // SubChunk1Size (4)
770 |     writeInt16(1, waveFileData, 20);                  // AudioFormat (2)
771 |     writeInt16(numberOfChannels, waveFileData, 22);   // NumChannels (2)
772 |     writeInt32(sampleRate, waveFileData, 24);         // SampleRate (4)
773 |     writeInt32(byteRate, waveFileData, 28);           // ByteRate (4)
774 |     writeInt16(blockAlign, waveFileData, 32);         // BlockAlign (2)
775 |     writeInt32(bitsPerSample, waveFileData, 34);      // BitsPerSample (4)
776 | 
777 |     writeString('data', waveFileData, 36);
778 |     writeInt32(subChunk2Size, waveFileData, 40);      // SubChunk2Size (4)
779 | 
780 |     // Write actual audio data starting at offset 44.
781 |     writeAudioBuffer(waveFileData, 44, quanta);
782 | 
783 |     return waveFileData;
784 |   }
785 | }());
786 | 


--------------------------------------------------------------------------------
/switchbeat.html:
--------------------------------------------------------------------------------
   1 | <!DOCTYPE html>
   2 | <html lang="en">
   3 |  <head>
   4 |     <meta charset="utf-8">
   5 | 	<title>SwitchBeat</title>
   6 | 	<link href='http://fonts.googleapis.com/css?family=Lato|Great+Vibes' rel='stylesheet' type='text/css'>
   7 | 	<meta http-equiv="Pragma" content="no-cache">
   8 | 	<meta http-equiv="Expires" content="-1">
   9 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  10 |    
  11 |    <link href="css/bootstrap.css" rel="stylesheet">
  12 |    <link href="css/font-awesome.css" rel="stylesheet">
  13 |    <link href="css/font-mfizz.css" rel="stylesheet">
  14 |     <link href="css/custom.css" rel="stylesheet">
  15 |     <link href="css/bootstrap-responsive.css" rel="stylesheet">
  16 | 	
  17 | 
  18 |     <!--[if lt IE 9]>
  19 |       <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  20 |     <![endif]-->
  21 | </head>
  22 | <body>
  23 | 
  24 | <script src="javascript/jquery.min.js"></script>
  25 | <script type="text/javascript" src='javascript/remix.js'></script>
  26 | <script src="javascript/bootstrap.min.js"></script>
  27 | <script src="javascript/raphael-min.js"></script>
  28 | <script src="javascript/Chart.js"></script>
  29 | 
  30 | <script type="text/javascript">
  31 | 
  32 | // Remix with any track.
  33 | // To build your own back-end, take a look at remix-server:  
  34 | //switchbeat
  35 | var apiKey = 'AGZLSWIPISDC1OMHC';
  36 | var trackID;
  37 | var trackURL;
  38 | var driver;
  39 | var diffrence =0;
  40 | 
  41 | var paper;
  42 | var blocks = [];
  43 | var blocks1 = [];
  44 | var selectedTile;
  45 | 
  46 | var maxTimbre =0;
  47 | var minTimbre =0;
  48 | var maxTimbre1 =0;
  49 | var minTimbre1 =0;
  50 | 
  51 | var remixer;
  52 | var player;
  53 | var track;
  54 | var track1;
  55 | var track2;
  56 | var trid1;
  57 | var trid2;
  58 | var remixed;
  59 | 
  60 | var theCodeMirror;
  61 | var wavesurfer;
  62 | var remixedWaveSurfer;
  63 | var fs;
  64 | var myBarChartL;
  65 | var myBarChartP;
  66 | var myBarChartT;
  67 | var test =0;
  68 | var xhr;
  69 | var ctxProg;
  70 | var ProgChart;
  71 | var ctxProg1;
  72 | var ProgChart1;
  73 | var MashUpStarted =0;
  74 | 
  75 | var firstUpload =0;
  76 | var secondUpload=0;
  77 | var myPieChart;
  78 | 
  79 | var gradCounter = 1;
  80 | 
  81 | var timbreW =30;
  82 | var pitchW =40;
  83 | var loudStartW = 10;
  84 | var loudMaxW =10;
  85 | var durationW =100;
  86 | var confidenceW =10;
  87 | 
  88 | var midh =0;
  89 | 
  90 | var diffMean = 0;
  91 | var diffStd = 0;
  92 | var diffArray = [];
  93 | 
  94 | var firstTrackIndex = [];
  95 | var secondTrackIndex = [];
  96 | var blockDiffList = [[]];
  97 | var jumpedNum =0;
  98 | var isPlaying =0;
  99 | var isStopped = 0;
 100 | 
 101 | function createChart()
 102 | {
 103 | 
 104 | var ctxL = document.getElementById("myChartL").getContext("2d");
 105 | var ctxP = document.getElementById("myChartP").getContext("2d");
 106 | var ctxT = document.getElementById("myChartT").getContext("2d");
 107 | var ctxTrack = document.getElementById("myChartTrack").getContext("2d");
 108 | 
 109 | var dataL = {
 110 |     labels: ["Loudness"],
 111 |     datasets: [
 112 |         {
 113 |             label: "Music dataset",
 114 |             fillColor: "#5e2d79",
 115 |             strokeColor: "#5e2d79",
 116 |             highlightFill: "#8942b1",
 117 |             highlightStroke: "#8942b1",
 118 |             data: [0]
 119 |         }
 120 |         ]
 121 | };
 122 | var dataP = {
 123 |     labels: ["Pitch"],
 124 |     datasets: [
 125 |         {
 126 |             label: "Music dataset",
 127 |             fillColor: "#0080ff",
 128 |             strokeColor: "#0080ff",
 129 |             highlightFill: "#4da6ff",
 130 |             highlightStroke: "#4da6ff",
 131 |             data: [0]
 132 |         }
 133 |         ]
 134 | };
 135 | var dataT = {
 136 |     labels: ["Timbre"],
 137 |     datasets: [
 138 |         {
 139 |             label: "Music dataset",
 140 |             fillColor: "#006868",
 141 |             strokeColor: "#006868",
 142 |             highlightFill: "#009b9b",
 143 |             highlightStroke: "#009b9b",
 144 |             data: [0]
 145 |         }
 146 |         ]
 147 | };
 148 | var dataTrack = [
 149 |     {
 150 |         value: 1,
 151 |         color:"#4fffd3",
 152 |         highlight: "#69ffd9",
 153 |         label: "Track 1"
 154 |     },
 155 |     {
 156 |         value: 0,
 157 |         color: "#7a4eff",
 158 |         highlight: "#8d68ff",
 159 |         label: "Track 2"
 160 |     }
 161 | ];
 162 |    
 163 | 
 164 | 
 165 | myBarChartL = new Chart(ctxL).Bar(dataL, {scaleBeginAtZero : false,  scaleShowGridLines : false,showScale: false, animationSteps: 30, showTooltips: false, animationEasing: "easeOutQuad", barValueSpacing : 0 , segmentStrokeColor : "#fdf6e3"});
 166 | myBarChartP = new Chart(ctxP).Bar(dataP, {scaleBeginAtZero : false,  scaleShowGridLines : false,showScale: false, animationSteps: 30, showTooltips: false,animationEasing: "easeOutQuad", barValueSpacing : 0, segmentStrokeColor : "#fdf6e3"});
 167 | myBarChartT = new Chart(ctxT).Bar(dataT, {scaleBeginAtZero : false,  scaleShowGridLines : false,showScale: false, animationSteps: 30, showTooltips: false,animationEasing: "easeOutQuad",barValueSpacing : 0 , segmentStrokeColor : "#fdf6e3"});
 168 | myPieChart = new Chart(ctxTrack).Pie(dataTrack,{animationEasing: "linear", segmentStrokeColor : "#fdf6e3", animationSteps: 10});
 169 | 	
 170 | }
 171 | function createBlocks(trackNum){
 172 | 
 173 | if(trackNum ==1)
 174 | {	
 175 | 	var cblocks =[];
 176 | 	var beats = track1.analysis.beats;
 177 | 
 178 | 	for(var i =0; i< beats.length; i++)
 179 | 	{
 180 | 		
 181 | 		cblocks.push(createBlock(i,beats[i],1));	
 182 | 
 183 | 	}	
 184 | 
 185 | 	return cblocks;
 186 | }	
 187 | else if(trackNum ==2)
 188 | {	
 189 | 	var cblocks =[];
 190 | 	var beats = track2.analysis.beats;
 191 | 
 192 | 	for(var i =0; i< beats.length; i++)
 193 | 	{
 194 | 		
 195 | 		cblocks.push(createBlock(i,beats[i],2));	
 196 | 
 197 | 	}	
 198 | 
 199 | 	return cblocks;
 200 | }	
 201 | 
 202 | 
 203 | }
 204 | 
 205 | function playClicked(){
 206 | 
 207 | 
 208 | 	start();
 209 | 
 210 | }	
 211 | 
 212 | var blocktype =  {
 213 | 	 normalColor:"#5f9",
 214 | 	 
 215 | 	  move: function(x,y) {
 216 | 	
 217 | 		 this.rect.attr({x:x, y:y});
 218 | 		 this.x =x;
 219 | 		 this.y =y;
 220 | 
 221 | 		 
 222 | 
 223 | 	 },	 
 224 | 	 
 225 | 	 play:function(){
 226 | 		
 227 | 		 player.play(0,this.beat);
 228 | 
 229 | 	 },
 230 | 
 231 | 	  position: function() {
 232 |         return {
 233 |             x: this.x,
 234 |             y: this.y
 235 |         }
 236 |     },
 237 | 
 238 | 	 playStyle: function() {
 239 |         this.rect.attr("fill", "#FF9");
 240 |     },
 241 | 
 242 | 	 normal: function() {
 243 |         this.rect.attr("fill", this.normalColor);
 244 |     },
 245 | 	
 246 | 	 select: function(){
 247 | 		 this.rect.attr("fill", "#114141");
 248 | 		
 249 | 
 250 | 		
 251 | 	 },	 
 252 | 
 253 | 	init:function() {
 254 |         var that = this;
 255 | 	}	
 256 | 
 257 | }
 258 | 
 259 | function setnormvalues(trackNum){
 260 | 
 261 | if(trackNum ==1)
 262 | {	
 263 | 	var segmentlist = track1.analysis.segments;
 264 | 	var timbrelist;
 265 | 	var timbreSum;
 266 | 	var timbreMean;
 267 | 	for(var i =0; i<segmentlist.length; i++)
 268 | 	{	
 269 | 		if(segmentlist[i])
 270 | 		{	
 271 | 		timbrelist = segmentlist[i].timbre;
 272 | 		}
 273 | 			
 274 | 		timbreSum =0;
 275 | 		for(var j=0; j<timbrelist.length; j++)
 276 | 		{
 277 | 			timbreSum = timbreSum +  timbrelist[j];
 278 | 
 279 | 		}
 280 | 		
 281 | 		timbreMean = timbreSum/timbrelist.length;
 282 | 			if(timbreMean<minTimbre)
 283 | 			{
 284 | 				minTimbre = timbreMean;	
 285 | 			}
 286 | 			if(timbreMean>maxTimbre)
 287 | 			{
 288 | 				
 289 | 				maxTimbre = timbreMean;
 290 | 			
 291 | 			}	
 292 | 	
 293 | 
 294 | 
 295 | 
 296 | 
 297 | 	}	
 298 | }
 299 | else if(trackNum ==2)
 300 | {	
 301 | 	var segmentlist = track2.analysis.segments;
 302 | 	var timbrelist;
 303 | 	var timbreSum;
 304 | 	var timbreMean;
 305 | 	for(var i =0; i<segmentlist.length; i++)
 306 | 	{	
 307 | 		if(segmentlist[i])
 308 | 		{	
 309 | 		timbrelist = segmentlist[i].timbre;
 310 | 		}
 311 | 			
 312 | 		timbreSum =0;
 313 | 		for(var j=0; j<timbrelist.length; j++)
 314 | 		{
 315 | 			timbreSum = timbreSum +  timbrelist[j];
 316 | 
 317 | 		}
 318 | 		
 319 | 		timbreMean = timbreSum/timbrelist.length;
 320 | 			if(timbreMean<minTimbre)
 321 | 			{
 322 | 				minTimbre1 = timbreMean;	
 323 | 			}
 324 | 			if(timbreMean>maxTimbre)
 325 | 			{
 326 | 				
 327 | 				maxTimbre1 = timbreMean;
 328 | 			
 329 | 			}	
 330 | 	
 331 | 
 332 | 
 333 | 
 334 | 
 335 | 	}	
 336 | }
 337 | 
 338 | 
 339 | 
 340 | 
 341 | 
 342 | }
 343 | 
 344 | function getNormColor(segment){
 345 | 
 346 | 	var sum = 0;
 347 | 	var timbrelist = segment.timbre;
 348 | 
 349 | 	for(var i =0; i<timbrelist.length;i++)
 350 | 	{
 351 | 		
 352 | 		sum = sum + timbrelist[i];
 353 | 		
 354 | 
 355 | 	}	
 356 | 	
 357 | 	var mean = sum/(timbrelist.length);
 358 | 
 359 | 	var norm = (mean - minTimbre) / (maxTimbre - minTimbre);
 360 | 
 361 | 	norm = norm * 16776960;
 362 | 	return norm;	
 363 | }		
 364 | function convertToHex(norm)
 365 | {	
 366 | 	var normAsInt = Math.round(norm);
 367 | 
 368 | 	var normStr = Number(normAsInt).toString(16);
 369 | 
 370 | 	return "#" + normStr;
 371 | 	
 372 | }	
 373 | function getBlockColor(block,inputedbeat)
 374 | {
 375 | var color =0;
 376 | var meanLoudness =0;
 377 | var meanPitches = 0;
 378 | var segmentPitch;
 379 | var pitchList;
 380 | 	var segmentlist = inputedbeat.overlappingSegments;
 381 | 
 382 | 	for(var i=0; i<segmentlist.length; i++)
 383 | 	{
 384 | 		color = color + getNormColor(segmentlist[i]);
 385 | 		meanLoudness = meanLoudness +segmentlist[i].loudness_max;
 386 | 		
 387 | 		pitchList = segmentlist[i].pitches;
 388 | 		
 389 | 		segmentPitch =0;
 390 | 
 391 | 		for(var a=0; a<pitchList.length; a++)
 392 | 		{
 393 | 		
 394 | 			segmentPitch = segmentPitch + pitchList[a];
 395 | 
 396 | 
 397 | 		}	
 398 | 
 399 | 		meanPitches = meanPitches + (segmentPitch/pitchList.length); 
 400 | 
 401 | 
 402 | 
 403 | 		
 404 | 
 405 | 	}	
 406 | 
 407 | 	color = color/segmentlist.length;
 408 | 	meanLoudness = meanLoudness/segmentlist.length;
 409 | 	meanPitches = meanPitches/segmentlist.length;
 410 | 	
 411 | 	if(block)
 412 | 	{	
 413 | 	block.timbre =color;
 414 | 	block.pitch = meanPitches;
 415 | 	block.loudness = meanLoudness;
 416 | 	}
 417 | 
 418 | 
 419 | 	return convertToHex(color);
 420 | 
 421 | 
 422 | 
 423 | }	
 424 | 
 425 | function drawLine(block1,block2)
 426 | {
 427 | 
 428 | 	
 429 | var block1num = 0;
 430 | var block2num = 0;
 431 | var line;
 432 | 
 433 | while(block1.Line[block1num])
 434 | {
 435 | 
 436 | 	block1num = block1num +1;
 437 | 
 438 | }	
 439 | while(block2.Line[block2num])
 440 | {
 441 | 
 442 | 	block2num = block2num +1;
 443 | 
 444 | }	
 445 | 
 446 | var gradId = "grad"+gradCounter;
 447 | gradCounter = gradCounter +1;
 448 | 
 449 | paper.defineLinearGradient(gradId, [{
 450 |     "id": "s1",
 451 |     "offset": "0",
 452 |     "style": "stop-color:"+block2.normalColor+";stop-opacity:1;"},
 453 | {
 454 |     "id": "s2",
 455 |     "offset": "1",
 456 |     "style": "stop-color:"+block1.normalColor+";stop-opacity:1;"}]);
 457 | 
 458 | 
 459 | var block1x = block1.x +(1/2)*block1.width;
 460 | var block1y = block1.y +(1/2)*block1.height;
 461 | var block2x = block2.x +(1/2)*block2.width;
 462 | var block2y = block2.y + (1/2)*block2.height;
 463 | var referencew = 0;
 464 | var referenceh = 0;
 465 | 	if(block1x<=block2x)
 466 | 	{
 467 | 		referencew = Math.floor(Math.random()*(block2x - block1x)) + block1x;
 468 | 	
 469 | 
 470 | 	}
 471 | 	else
 472 | 	{
 473 | 		referencew = Math.floor(Math.random()*(block1x - block2x)) + block2x;
 474 | 
 475 | 
 476 | 	}
 477 | 	if(block1y<=block2y)
 478 | 	{
 479 | 
 480 | 
 481 | 		referenceh = Math.floor(Math.random()*(block2y - block1y)) + block1y;
 482 | 
 483 | 
 484 | 
 485 | 	}
 486 | 	else
 487 | 	{
 488 | 
 489 | 		referenceh = Math.floor(Math.random()*(block1y - block2y)) + block2y;
 490 | 
 491 | 	}	
 492 | 
 493 | 
 494 | 
 495 | 
 496 | 
 497 | 
 498 | line = paper.path(['M',block1x,block1y, 'Q',referencew ,referenceh, block2x,block2y]);
 499 | 
 500 | line.strokeLinearGradient (gradId, 2);
 501 | 
 502 | block1.Line[block1num] = line;
 503 | block1.otherIndex[block1num] = block2.number;
 504 | block1.otherLineIndex[block1num] = block2num;
 505 | block1.LineDefId [block1num] = gradId;
 506 | 
 507 | block2.Line[block2num] = line;
 508 | block2.otherIndex[block2num] = block1.number;
 509 | block2.otherLineIndex[block2num] = block1num;
 510 | block2.LineDefId[block2num] = gradId;
 511 | 
 512 | 
 513 | 
 514 | 
 515 | 
 516 | }
 517 | function createBlock(number,beat,trackNum)
 518 | {
 519 | 	var labeled = false;
 520 | 	var block = Object.create(blocktype);
 521 | 	block.number = number;
 522 | 	block.trackNum = trackNum;
 523 | 	block.width = 11;
 524 | 	block.height = 11;
 525 | 	block.timbre =0;
 526 | 	block.loudness =0;
 527 | 	block.pitch = 0;
 528 | 	block.Line = [];
 529 | 	block.LineDefId = [];
 530 | 	block.otherIndex = [];
 531 | 	block.otherLineIndex = [];
 532 | 	block.normalColor = getBlockColor(block,beat);
 533 | 
 534 | 	block.rect = paper.rect(0,0,block.width, block.height);
 535 | 	block.rect.attr("stroke", "#349");
 536 | 	block.rect.block = block;
 537 | 	block.normal();
 538 | 	block.beat = beat;
 539 | 	block.init();
 540 | 	return block;
 541 | 	
 542 | 
 543 | 
 544 | 	
 545 | }
 546 | function Mashup(tracknum){
 547 | 
 548 |                    
 549 | 						if(tracknum == 1)
 550 | 						{	
 551 | 					 		waitForTrack2();
 552 | 
 553 | 						}
 554 | 						else if(tracknum == 2)
 555 | 						{
 556 | 							paper = Raphael("tiles",6, 4);
 557 | 							setnormvalues(1);
 558 | 							setnormvalues(2);
 559 | 							createChart();
 560 | 							blocks = createBlocks(1);
 561 | 							blocks1 = createBlocks(2);
 562 | 							Layout();
 563 | 							calculateLinks();
 564 | 							
 565 | 
 566 | 
 567 | 						}	
 568 | 
 569 | 
 570 | 
 571 |                         $('#beginRemix').removeAttr('disabled');
 572 |                       
 573 | 
 574 | 
 575 | 
 576 | 
 577 | 
 578 | 
 579 | 
 580 | }
 581 | 
 582 | 
 583 | function waitForTrack2()
 584 | {
 585 | setTimeout(function () {
 586 | 	if(!track2)
 587 | 	{	
 588 | 	waitForTrack2();
 589 | 
 590 | 	}
 591 | 	else if(track2.status != 'ok')
 592 | 	{	
 593 | 	waitForTrack2();
 594 | 	}
 595 | 	else
 596 | 	{
 597 | 		Mashup(2);
 598 | 		return 0;
 599 | 	}	
 600 | 		}, 100);
 601 | 
 602 | 
 603 | 
 604 | 
 605 | 
 606 | }	
 607 | 
 608 | var margin = 15;
 609 | var top = 100;
 610 | var tilesPerGroup = 4;
 611 | var tspace = 3;
 612 | var tilesPerRow = 0;
 613 | var spaceInbetween = 200;
 614 | 
 615 | function Layout()
 616 | {
 617 | 
 618 | var num = blocks.length;
 619 | var num1 = blocks1.length;
 620 | 
 621 | if(num>0 && num1>0)
 622 | 	{	
 623 | 		var w = $(window).width();
 624 | 		var h = $(window).height()-top;
 625 | 		var rw = w - margin *2;
 626 | 		var rh = h - margin *2;
 627 | 		var tilesPerRow = Math.floor(rw/14);
 628 | 		h = (Math.ceil(num/tilesPerRow) * 16) + 2*tspace + spaceInbetween + (Math.ceil(num1/tilesPerRow) * 16) + 20;
 629 | 		paper.setSize(w,h);
 630 | 
 631 | 
 632 | 		var xstart =0;
 633 | 		var ystart =0;
 634 | 
 635 | 		for(var i=0; i<blocks.length; i++)
 636 | 		{
 637 | 			var block = blocks[i];
 638 | 
 639 | 			if(i % tilesPerRow == 0)
 640 | 			{
 641 | 				xstart = 0;
 642 | 				ystart = ystart + block.height +tspace;
 643 | 
 644 | 
 645 | 			}
 646 | 
 647 | 			block.move(xstart,ystart);
 648 | 
 649 | 			xstart = xstart + block.width + tspace;
 650 | 
 651 | 
 652 | 
 653 | 
 654 | 		}	
 655 | 		$(".MusicStatus").css("position","relative");
 656 | 		var middleHeight = (h-(ystart + block.height + spaceInbetween/2)) * -1;
 657 | 		middleHeight = middleHeight - 37.5;
 658 | 		midH = middleHeight;
 659 | 		middleHeight = middleHeight +"px";
 660 | 		var middleWidth = (-1 * w/2)+200 + "px";
 661 | 		midW = (-1*w/2)+200;
 662 | 		
 663 | 		$(".MusicStatus").css({top: middleHeight, right: middleWidth});
 664 | 
 665 | 		ystart = ystart + block.height + spaceInbetween;
 666 | 		xstart = 0;
 667 | 
 668 | 		for(var i=0; i<blocks1.length; i++)
 669 | 		{
 670 | 			var block = blocks1[i];
 671 | 
 672 | 			if(i % tilesPerRow == 0)
 673 | 			{
 674 | 				xstart = 0;
 675 | 				ystart = ystart + block.height +tspace;
 676 | 
 677 | 
 678 | 			}
 679 | 
 680 | 			block.move(xstart,ystart);
 681 | 
 682 | 			xstart = xstart + block.width + tspace;
 683 | 
 684 | 
 685 | 
 686 | 
 687 | 		}	
 688 | 
 689 | 
 690 | 
 691 | 
 692 | 
 693 | 
 694 | 
 695 | 
 696 | 	}	
 697 | 
 698 | }
 699 | 
 700 | 
 701 | 
 702 | function start()
 703 | {	
 704 | 
 705 | 	if(isPlaying == 0)
 706 | 	{
 707 | 	isPlaying = 1;
 708 | 	isStopped =0;
 709 | 	play(1,-1,0,0);
 710 | 	}
 711 | 
 712 | }
 713 | function play(track,num,pTrack,pNum)
 714 | {
 715 | if(isStopped!=1)
 716 | {	
 717 | if(track == 1 && num>=blocks.length && sessionStorage.isInfinite ==1)
 718 | {
 719 | 	play(2,0,1,blocks.length-1);
 720 | 
 721 | 		
 722 | }
 723 | else if(track ==2 && num>=blocks1.length && sessionStorage.isInfinite ==1)
 724 | {
 725 | 	play(1,0,2,blocks1.length-1);
 726 | 
 727 | 
 728 | 
 729 | }
 730 | else
 731 | {	
 732 | if(track == 1)
 733 | {
 734 | 
 735 | 	if(num != -1)
 736 | 	{	
 737 | 		var delay = blocks[num].beat.duration;
 738 | 		player.queue(blocks[num].beat);
 739 | 	}
 740 | 	else
 741 | 	{
 742 | 		var delay = blocks[0].beat.duration;
 743 | 		player.queue(blocks[0].beat);
 744 | 	}	
 745 | 
 746 | 
 747 | 		
 748 | 		setTimeout(function () {
 749 | 		if( num !=-1)
 750 | 		{
 751 | 			if(pTrack == 1)
 752 | 			{	
 753 | 			blocks[pNum].normal();	
 754 | 			var pdefIdList = blocks[pNum].LineDefId;
 755 | 			var plineList = blocks[pNum].Line;
 756 | 			}
 757 | 			else 
 758 | 			{
 759 | 			blocks1[pNum].normal();	
 760 | 			var pdefIdList = blocks1[pNum].LineDefId;
 761 | 			var plineList = blocks1[pNum].Line;
 762 | 
 763 | 			
 764 | 
 765 | 
 766 | 			}	
 767 | 			var str;
 768 | 
 769 | 
 770 | 			for(var i=0; i< plineList.length;i++)
 771 | 			{
 772 | 				
 773 | 				plineList[i].strokeLinearGradient (pdefIdList[i], 2);
 774 | 
 775 | 
 776 | 
 777 | 			}	
 778 | 
 779 | 				
 780 | 		}
 781 | 		else
 782 | 		{
 783 | 
 784 | 			num = 0;
 785 | 
 786 | 		}	
 787 | 		
 788 | 		blocks[num].select();
 789 | 
 790 | 		var lineList = blocks[num].Line;
 791 | 		var nextTrack = -1;
 792 | 		var nextNum = -1;
 793 | 		var randomNum =0;
 794 | 
 795 | 		for(var i =0; i < lineList.length; i++)
 796 | 		{
 797 | 
 798 | 			lineList[i].attr({stroke:"#114141"});
 799 | 			randomNum = Math.random();
 800 | 			if(randomNum < (sessionStorage.pJump/100))
 801 | 			{
 802 | 				if(blocks[num].otherLineIndex[i] != pNum && jumpedNum != 1)
 803 | 				{	
 804 | 				nextTrack = 2;
 805 | 				nextNum = blocks[num].otherIndex[i];
 806 | 				}
 807 | 			}	
 808 | 
 809 | 		}
 810 | 		myBarChartL.datasets[0].bars[0].value = 100 + blocks[num].loudness;
 811 | 		myBarChartP.datasets[0].bars[0].value = blocks[num].pitch;
 812 | 		myBarChartT.datasets[0].bars[0].value = blocks[num].timbre;
 813 | 		myPieChart.segments[0].value = myPieChart.segments[0].value +1;
 814 | 		myPieChart.update();
 815 | 		myBarChartL.update();
 816 | 		myBarChartP.update();
 817 | 		myBarChartT.update();
 818 | 		document.getElementById("BlockNum").textContent = blocks[num].number;
 819 | 		document.getElementById("TrackNum").textContent = 1;
 820 | 
 821 | 		if(nextTrack == -1 && nextNum == -1)
 822 | 		{
 823 | 			jumpedNum = 0;
 824 | 			play(track,num+1,track,num);
 825 | 
 826 | 		}
 827 | 		else
 828 | 		{
 829 | 			jumpedNum = 1;
 830 | 			play(nextTrack,nextNum,track,num);
 831 | 
 832 | 
 833 | 		}	
 834 | 		
 835 | 		}, 1000*delay);
 836 | 	
 837 | 	
 838 | }
 839 | 
 840 | else if(track == 2)
 841 | {
 842 | 
 843 | 	if(num != -1)
 844 | 	{	
 845 | 		var delay = blocks1[num].beat.duration;
 846 | 		player.queue(blocks1[num].beat);
 847 | 	}
 848 | 	else
 849 | 	{
 850 | 		var delay = blocks1[0].beat.duration;
 851 | 		player.queue(blocks1[0].beat);
 852 | 
 853 | 	}
 854 | 		
 855 | 		setTimeout(function () {
 856 | 	
 857 | 		if( num !=-1)
 858 | 		{
 859 | 			if(pTrack == 1)
 860 | 			{	
 861 | 			blocks[pNum].normal();	
 862 | 			var pdefIdList = blocks[pNum].LineDefId;
 863 | 			var plineList = blocks[pNum].Line;
 864 | 			}
 865 | 			else 
 866 | 			{
 867 | 			blocks1[pNum].normal();	
 868 | 			var pdefIdList = blocks1[pNum].LineDefId;
 869 | 			var plineList = blocks1[pNum].Line;
 870 | 
 871 | 			
 872 | 
 873 | 
 874 | 			}	
 875 | 			var str;
 876 | 
 877 | 			
 878 | 			for(var i=0; i< plineList.length;i++)
 879 | 			{
 880 | 				
 881 | 				plineList[i].strokeLinearGradient (pdefIdList[i], 2);
 882 | 
 883 | 			
 884 | 			}	
 885 | 			
 886 | 				
 887 | 		}
 888 |     	else
 889 | 		{
 890 | 
 891 | 			num = 0;
 892 | 
 893 | 		}	
 894 | 		
 895 | 		blocks1[num].select();
 896 | 
 897 | 		var lineList = blocks1[num].Line;
 898 | 		var nextTrack = -1;
 899 | 		var nextNum = -1;
 900 | 		var randomNum =0;
 901 | 
 902 | 		for(var i =0; i < lineList.length; i++)
 903 | 		{
 904 | 
 905 | 			lineList[i].attr("stroke", "#114141");
 906 | 			randomNum = Math.random();
 907 | 			if(randomNum < (sessionStorage.pJump/100))
 908 | 			{
 909 | 				if(blocks1[num].otherIndex[i] != pNum && jumpedNum != 1)
 910 | 				{
 911 | 				nextTrack = 1;
 912 | 				nextNum = blocks1[num].otherIndex[i];
 913 | 				
 914 | 				}
 915 | 			}	
 916 | 
 917 | 		}
 918 | 		myBarChartL.datasets[0].bars[0].value = 100 + blocks1[num].loudness;
 919 | 		myBarChartP.datasets[0].bars[0].value = blocks1[num].pitch;
 920 | 		myBarChartT.datasets[0].bars[0].value = blocks1[num].timbre;
 921 | 		myPieChart.segments[1].value = myPieChart.segments[1].value +1;
 922 | 		myPieChart.update();
 923 | 		myBarChartL.update();
 924 | 		myBarChartP.update();
 925 | 		myBarChartT.update();
 926 | 		document.getElementById("BlockNum").textContent = blocks1[num].number;
 927 | 		document.getElementById("TrackNum").textContent = 2;
 928 | 
 929 | 		if(nextTrack == -1 && nextNum == -1)
 930 | 		{
 931 | 			jumpedNum = 0;	
 932 | 			play(track,num+1,track,num);
 933 | 
 934 | 		}
 935 | 		else
 936 | 		{	jumpedNum =1;
 937 | 			play(nextTrack,nextNum,track,num);
 938 | 
 939 | 
 940 | 		}	
 941 | 		
 942 | 		}, 1000*delay);
 943 | 	
 944 | 	
 945 | 	}
 946 | 
 947 | }
 948 | 
 949 | }
 950 | else
 951 | {
 952 | 	if(pTrack == 1)
 953 | 	{	
 954 | 	blocks[pNum].normal();	
 955 | 	var pdefIdList = blocks[pNum].LineDefId;
 956 | 	var plineList = blocks[pNum].Line;
 957 | 	for(var i=0; i< plineList.length;i++)
 958 | 			{
 959 | 				
 960 | 				plineList[i].strokeLinearGradient (pdefIdList[i], 2);
 961 | 
 962 | 			
 963 | 			}	
 964 | 	}
 965 | 	else
 966 | 	{
 967 | 		blocks1[pNum].normal();	
 968 | 		var pdefIdList = blocks1[pNum].LineDefId;
 969 | 		var plineList = blocks1[pNum].Line;
 970 | 		for(var i=0; i< plineList.length;i++)
 971 | 				{
 972 | 				
 973 | 				plineList[i].strokeLinearGradient (pdefIdList[i], 2);
 974 | 
 975 | 			
 976 | 				}		
 977 | 
 978 | 		
 979 | 
 980 | 
 981 | 	}	
 982 | 
 983 | }	
 984 | }
 985 | 
 986 | function stop()
 987 | {
 988 | 	isStopped =1;
 989 | 	isPlaying =0;	
 990 | 	player.stop();
 991 | 
 992 | }	
 993 | 
 994 | 
 995 | // Get an estimation of analysis time
 996 | function fetchQinfo() {
 997 |     var url = 'http://remix.echonest.com/Uploader/qinfo?callback=?'
 998 |     $.getJSON(url, {}, function(data) {
 999 |         $("#info").text("Estimated analysis time: " + Math.floor(data.estimated_wait * 1.2) + " seconds.");
1000 | 		if(Math.floor(data.estimated_wait * 1.2)>20)
1001 | 		{
1002 | 			$("#info").text("Estimated analysis time: " + Math.floor(data.estimated_wait * 1.2) + " seconds. It seems that the servers are a bit slow today. The analysis might not work");
1003 | 
1004 | 
1005 | 		}	
1006 |         $("#info1").text("Track 1 loaded successfully!  Estimated analysis time: " + Math.floor(data.estimated_wait * 1.2) + " seconds.");
1007 | 
1008 |     });
1009 | }
1010 | 
1011 | // Get the analysis, if it is ready
1012 | function analyzeAudio(audio, tag, callback) {
1013 |     var url = 'http://remix.echonest.com/Uploader/qanalyze?callback=?'
1014 |     $.getJSON(url, { url:audio, api_key:apiKey, tag:tag}, function(data) {
1015 | 		if (data.status === 'done' || data.status === 'error') {
1016 |             callback(data);
1017 |         } else {
1018 |             $("#info").text(data.status + ' - ready in about ' + data.estimated_wait + ' secs. ');
1019 | 			$("#info1").text(data.status + ' - ready in about ' + data.estimated_wait + ' secs. ');
1020 |             setTimeout(function() { analyzeAudio(audio, tag, callback); }, 8000);
1021 |         } 
1022 |     });
1023 | }
1024 | 
1025 | 				  
1026 | 
1027 | 
1028 | //program starts here
1029 | function init() {
1030 | 
1031 | 	 var contextFunction = window.webkitAudioContext || window.AudioContext;
1032 |     if (contextFunction === undefined) {
1033 |         $("#info").text("Sorry, this app needs advanced web audio. Your browser doesn't"
1034 |             + " support it. Try the latest version of Chrome?");
1035 |     }
1036 |     // Read the URL query string to decide what to do
1037 |     var params = {};
1038 |     var q = document.URL.split('?')[1];
1039 |     if(q != undefined){
1040 |         q = q.split('&');
1041 |         for(var i = 0; i < q.length; i++){
1042 |             var pv = q[i].split('=');
1043 |             var p = pv[0];
1044 |             var v = pv[1];
1045 |             params[p] = v;
1046 |         }
1047 |     }
1048 | 	if('trid1' in params)
1049 | 	{
1050 | 
1051 | 		trid1 = params['trid1'];
1052 | 
1053 | 
1054 | 	}
1055 | 	if('trid2' in params)
1056 | 	{
1057 | 
1058 | 		trid2 = params['trid2'];
1059 | 
1060 | 	}
1061 | 	
1062 | 	if(trid1) 
1063 | 	{	
1064 | 
1065 | 		if(!trid2)
1066 | 		{	
1067 | 		$("#select-track").remove();
1068 | 		$("#select-track1").removeClass("hidden");
1069 | 		$("#infoO").hide();
1070 | 		fetchSignature();
1071 | 		//fetchQinfo();	
1072 | 		}
1073 | 	}	
1074 | 	else
1075 | 	{	
1076 | 
1077 | 		if(!trid2 && !('key' in params))
1078 | 		{	
1079 | 		$("#inputParem").removeClass("hidden");
1080 | 		//$(".MusicStatus").hide();
1081 | 		 $("#play-remix").hide();
1082 | 
1083 | 		
1084 | 		}
1085 | 
1086 | 
1087 | 		$("#infoO1").hide();
1088 | 
1089 | 
1090 | 	}	
1091 | 
1092 | 
1093 |     if ('key' in params) {
1094 |         // We just uploaded a track.
1095 |         // We need to log the trackID and the URL, and then redirect.
1096 |         $("#select-track").hide();
1097 | 		$("#select-track1").hide();
1098 |         $("#play-remix").hide();
1099 |         $("#info").text("Analyzing track 1 audio...");
1100 | 	    $("#info1").text("Analyzing track 2 audio...");
1101 |         trackURL = 'http://' + params['bucket'] + '/' + urldecode(params['key']);
1102 | 
1103 |         analyzeAudio(trackURL, 'tag', function(data) {
1104 |             if (data.status === 'done') {
1105 | 				 var newUrl = location.protocol + "//" +  location.host + location.pathname;
1106 | 				 if(trid1)
1107 | 				 {
1108 | 
1109 | 					newUrl = newUrl + "?trid1="+trid1 + "&trid2="+data.trid;
1110 | 
1111 | 				 }
1112 | 				 else
1113 | 				 {
1114 | 
1115 | 					newUrl = newUrl + "?trid1="+data.trid;
1116 | 
1117 | 				 }
1118 | 				 location.href = newUrl;
1119 | 			
1120 | 
1121 |             }
1122 |         });
1123 |     } 
1124 | 
1125 |    else  if (trid1 && trid2) 
1126 |    {   
1127 | 	   // We were passed a trackID directly in the url
1128 |         // We can remix the track we get back!
1129 |         //trackID = params['trid'];
1130 | 	   	$("#select-track").hide();
1131 | 		$("#select-track1").hide();
1132 | 		$("#infoO").show();
1133 | 		$("#infoO1").show();
1134 | 
1135 | 
1136 | 
1137 | 		
1138 |         var urlXHR = getProfile(trid1, function(data) {
1139 | 			
1140 |             trackURL = data.url;
1141 | 		    if (data.status == true) {
1142 |                 console.log("Track 1 ready to remix");
1143 |                                 
1144 |                 // Only use the filesystem if we have access to it.
1145 |                 //if (window.File && window.FileReader && window.FileList && window.Blob && window.webkitRequestFileSystem) {
1146 |                 //    window.requestFileSystem  = window.requestFileSystem || window.webkitRequestFileSystem;
1147 |                 //    window.requestFileSystem(window.TEMPORARY, 1024*1024, function(filesystem) {
1148 |                //         fs = filesystem;
1149 |                //     }, fileErrorHandler);
1150 |                // }
1151 | 
1152 |              if(!remixer) 
1153 | 			 {	var context = new contextFunction();
1154 |                 remixer = createJRemixer(context, $, apiKey);
1155 |                 player = remixer.getPlayer();
1156 | 
1157 | 			 }                     
1158 |              
1159 |                 $("#info").text("Loading track 1 analysis data...");
1160 | 
1161 | 				
1162 | 				ctxProg = document.getElementById("myChartProg").getContext("2d");
1163 | 				var Progdata = [
1164 |     			{
1165 |         			value: 0,
1166 |         			color:"#4fffd3",
1167 |         			highlight:"#69ffd9",
1168 |         			label: "loaded"
1169 |     			},
1170 |     			{
1171 |         			value: 100,
1172 |         			color:"#cdfff3",
1173 |         			highlight:"#e7fff9",
1174 |         			label: "Not loaded"
1175 |     			}
1176 |     			]
1177 |  ProgChart = new Chart(ctxProg).Doughnut(Progdata,{ animation: false, animationEasing: "linear",showTooltips: false, segmentStrokeColor:"#fdf6e3"});
1178 | 
1179 | 
1180 | 
1181 | 				
1182 | 				remixer.remixTrackById(trid1, trackURL, function(t, percent) {
1183 |                     track1 = t;
1184 | 									
1185 | 					ProgChart.options.animation = true;
1186 | 					ProgChart.options.animationSteps = 30;
1187 | 					ProgChart.segments[1].value = 100 - percent;
1188 | 					ProgChart.segments[0].value = percent;
1189 | 					ProgChart.update();
1190 | 
1191 |                     $("#info").text(percent + "% of the track 1 loaded...");
1192 |                     if (percent == 100) {
1193 |                         $("#info").text(percent + "% of the track 1 loaded, preparing...");
1194 |                     }
1195 | 
1196 |                     if (track1.status == 'ok') {
1197 |                         $("#info").text("Track 1 ready to remix!");
1198 | 						
1199 | 					
1200 | 						Mashup(1);
1201 | 
1202 |                         $('.btn-original').removeAttr('disabled');
1203 |                     }
1204 |                     else if (track1.status == 'error' ) {
1205 |                        // $("#info").text("Error getting the track URL - please try again, or re-upload the file.");
1206 | 					 }
1207 | 
1208 |                 });
1209 |             }
1210 |             else {
1211 |                 console.log("Track id error.");
1212 |                 $("#play-remix").hide();
1213 |                 $("#select-track").show();
1214 |                 $("#info").text("Error getting the track URL - please try again, or re-upload the file.");
1215 |                 $("#redirect-url").attr('value', document.URL);
1216 | 
1217 |                 $("#file").change( 
1218 |                     function() {
1219 |                         //fetchQinfo();
1220 |                         var filename = $("#file").val();
1221 |                         if (endsWith(filename.toLowerCase(), ".mp3")) {
1222 |                             $("#f-filename").attr('value', fixFileName(filename));
1223 |                             $("#upload").removeAttr('disabled');
1224 |                         } else {
1225 |                             alert('Sorry, this app only supports MP3s');
1226 |                             $("#upload").attr('disabled', 'disabled');
1227 |                         }
1228 |                     }
1229 |                 );
1230 |                 fetchSignature();
1231 |             }
1232 | 				
1233 | 				
1234 | 		});
1235 | 
1236 | 		
1237 | 		//##########################end of first file upload#####################
1238 | 	
1239 | 		  var urlXHR1 = getProfile(trid2, function(data) {
1240 |             trackURL = data.url;
1241 | 		  if (data.status == true) {
1242 |                 console.log("Track 2 ready to remix");
1243 |              
1244 |              if(!remixer) 
1245 | 		     {	var context = new contextFunction();
1246 |                 remixer = createJRemixer(context, $, apiKey);
1247 |                 player = remixer.getPlayer();
1248 | 
1249 | 			 }                     
1250 | 
1251 |                                   
1252 |              
1253 |                 $("#info1").text("Loading track 2 analysis data...");
1254 | 
1255 | 				ctxProg1 = document.getElementById("myChartProg1").getContext("2d");
1256 | 				var Progdata1 = [
1257 |     			{
1258 |         			value: 0,
1259 |         			color:"#7a4eff",
1260 |         			highlight:"#8d68ff",
1261 |         			label: "loaded"
1262 |     			},
1263 |     			{
1264 |         			value: 100,
1265 |         			color:"#c6b6ff",
1266 |         			highlight:"#dad0ff",
1267 |         			label: "Not loaded"
1268 |     			}
1269 |     			]
1270 |  ProgChart1 = new Chart(ctxProg1).Doughnut(Progdata1,{ animation: false, animationEasing: "linear",showTooltips: false,segmentStrokeColor : "#fdf6e3"});
1271 | 
1272 | 
1273 | 
1274 | 			
1275 |                 remixer.remixTrackById(trid2, trackURL, function(t, percent) {
1276 | 
1277 | 					track2 = t;
1278 | 					
1279 | 					ProgChart1.options.animation = true;
1280 | 					ProgChart1.options.animationSteps = 30;
1281 | 					ProgChart1.segments[1].value = 100 - percent;
1282 | 					ProgChart1.segments[0].value = percent;
1283 | 					ProgChart1.update();
1284 | 
1285 | 
1286 |                     
1287 | 					$("#info1").text(percent + "% of the track 2 loaded...");
1288 |                     if (percent == 100) {
1289 |                         $("#info1").text(percent + "% of the track 2 loaded, preparing...");
1290 |                     }
1291 | 
1292 |                     if (track2.status == 'ok') {
1293 |                         $("#info1").text("Track 2 ready to remix!");
1294 | 						
1295 | 						//Mashup(2);
1296 | 
1297 |                         //$('.btn-original').removeAttr('disabled');
1298 |                     }
1299 |                     else if (track2.status == 'error' ) {
1300 |                         $("#info1").text("Error getting the track URL - please try again, or re-upload the file.");
1301 | 					}
1302 | 
1303 |                 });
1304 |             }
1305 |             else {
1306 |                 console.log("Track id error.");
1307 |                 $("#play-remix").hide();
1308 |                 $("#select-track").show();
1309 |                 $("#info").text("Error getting the track URL - please try again, or re-upload the file.");
1310 |                 $("#redirect-url").attr('value', document.URL);
1311 | 
1312 |                 $("#file").change( 
1313 |                     function() {
1314 |                         //fetchQinfo();
1315 |                         var filename = $("#file").val();
1316 |                         if (endsWith(filename.toLowerCase(), ".mp3")) {
1317 |                             $("#f-filename").attr('value', fixFileName(filename));
1318 |                             $("#upload").removeAttr('disabled');
1319 |                         } else {
1320 |                             alert('Sorry, this app only supports MP3s');
1321 |                             $("#upload").attr('disabled', 'disabled');
1322 |                         }
1323 |                     }
1324 |                 );
1325 |                 fetchSignature();
1326 |             }
1327 |         });
1328 | 
1329 | 
1330 | 
1331 | 
1332 | 
1333 |     } else {
1334 |         // We're waiting for the user to pick a track and upload it
1335 | 	    $("#play-remix").hide();
1336 |         $("#redirect-url").attr('value', document.URL);
1337 | 
1338 |         $("#file").change( 
1339 |             function() {
1340 | 				var filename = $("#file").val();
1341 |                 if (endsWith(filename.toLowerCase(), ".mp3")) {
1342 |                     $("#f-filename").attr('value', fixFileName(filename));
1343 |                     $("#upload").removeAttr('disabled');
1344 |                 } else {
1345 |                     alert('Sorry, this app only supports MP3s');
1346 |                     $("#upload").attr('disabled', 'disabled');
1347 |                 }
1348 |             }
1349 |         );
1350 |         fetchSignature();
1351 |         fetchQinfo();
1352 | 		
1353 |     }
1354 | }
1355 | 
1356 | //"use strict";
1357 | function submitForm(oFormElement)
1358 | {
1359 | 
1360 | 	sessionStorage.pConnect = document.getElementById("rangeInput").value;
1361 | 	sessionStorage.pJump = document.getElementById("rangeInputJump").value;
1362 | 	sessionStorage.connectMax = document.getElementById("rangeInputConnection").value;
1363 | 	if($("#myonoffswitch").is(':checked'))
1364 | 	{	sessionStorage.isInfinite = 1;
1365 | 
1366 | 	}	
1367 | 	else
1368 | 	{
1369 | 		sessionStorage.isInfinite =0;
1370 | 		
1371 | 	}	
1372 | 
1373 | 	
1374 | 	
1375 | 
1376 | 	 $("#inputParem").hide();
1377 |   	 $("#select-track").hide();
1378 |  	 	
1379 | 
1380 |     //check whether browser fully supports all File API
1381 |     if (window.File && window.FileReader && window.FileList && window.Blob)
1382 |     {
1383 |         //get the file size and file type from file input field
1384 |         var fsize = $('#file')[0].files[0].size;
1385 | 		fsize = (fsize/1000000).toFixed(2);
1386 | 		$('#info').text("Uploading Track 1 -  "+fsize+" MB");
1387 |         
1388 | 	}
1389 | 
1390 | }
1391 | function submitForm1(oFormElement)
1392 | {
1393 |    $("#select-track1").hide();
1394 | 
1395 | 	 //check whether browser fully supports all File API
1396 |     if (window.File && window.FileReader && window.FileList && window.Blob)
1397 |     {
1398 |         //get the file size and file type from file input field
1399 |         var fsize = $('#file')[0].files[0].size;
1400 | 		fsize = (fsize/1000000).toFixed(2);
1401 | 		$('#info1').text("Uploading Track 2 -  "+fsize+" MB");
1402 |         
1403 | 	}
1404 | 
1405 | }
1406 | function removeExcess(exTrackNumber, exBlockNumber, connectNumList)
1407 | {
1408 | 	var i =0;
1409 | 	var currentMax;
1410 | 	var maxOtherIndex;
1411 | 	var maxThisIndex;
1412 | 	var diffrence = connectNumList.length - sessionStorage.connectMax;
1413 | 	
1414 | 	if(exTrackNumber ==1)
1415 | 	{	
1416 | 
1417 | 		i =0;
1418 | 	while(i<diffrence)
1419 | 	{
1420 | 		
1421 | 		currentMax = blockDiffList[exBlockNumber][connectNumList[i]];
1422 | 		maxOtherIndex = connectNumList[i];
1423 | 		maxThisIndex = i;
1424 | 		for(var j =0; j<connectNumList.length; j++)
1425 | 		{
1426 | 			if(blockDiffList[exBlockNumber][connectNumList[j]]>=currentMax)
1427 | 			{
1428 | 				currentMax = blockDiffList[exBlockNumber][connectNumList[j]];
1429 | 				maxOtherIndex = connectNumList[j];
1430 | 				maxThisIndex = j;
1431 | 				
1432 | 
1433 | 			}	
1434 | 
1435 | 
1436 | 
1437 | 		}
1438 | 		
1439 | 		blockDiffList[exBlockNumber][maxOtherIndex] = -1;
1440 | 		
1441 | 	
1442 | 
1443 | 		i = i+1;
1444 | 
1445 | 
1446 | 	
1447 | 		
1448 | 
1449 | 
1450 | 	}
1451 | 		
1452 | 
1453 | 	}
1454 | 	if(exTrackNumber ==2)
1455 | 	{	
1456 | 
1457 | 	i =0;	
1458 | 	while(i<diffrence)
1459 | 	{	
1460 | 		currentMax = blockDiffList[connectNumList[i]][exBlockNumber];
1461 | 		maxOtherIndex = connectNumList[i];
1462 | 		maxThisIndex = i;
1463 | 		for(var j =0; j<connectNumList.length; j++)
1464 | 		{
1465 | 			if(blockDiffList[connectNumList[j]][exBlockNumber]>=currentMax)
1466 | 			{
1467 | 				currentMax = blockDiffList[connectNumList[j]][exBlockNumber];
1468 | 				maxOtherIndex = connectNumList[j];
1469 | 				maxThisIndex = j;
1470 | 				
1471 | 
1472 | 			}	
1473 | 
1474 | 
1475 | 
1476 | 		}
1477 | 		
1478 | 		blockDiffList[maxOtherIndex][exBlockNumber]= -1;
1479 | 			
1480 | 
1481 | 		i = i+1;
1482 | 
1483 | 
1484 | 	
1485 | 		
1486 | 
1487 | 
1488 | 	}	
1489 | 
1490 | 
1491 | 
1492 | 
1493 | 		
1494 | 
1495 | 	}
1496 | 
1497 | 
1498 | 
1499 | }	
1500 | function filterLinks(block1List, block2List)
1501 | {	
1502 | 
1503 | 	var doneList = [];
1504 | 	var doneListCounter =0;
1505 | 	var currBlock =0;
1506 | 	var connectionToOther = [];
1507 | 	var connectionToOtherCounter =0;
1508 | 	for(var i =0; i<block1List.length; i++)
1509 | 	{
1510 | 		currBlock = block1List[i];
1511 | 		connectionToOtherCounter =0;
1512 |         connectionToOther = [];
1513 | 		if($.inArray(currBlock,doneList) == -1)
1514 | 		{		
1515 | 				
1516 | 	
1517 | 
1518 | 			for(var j =0; j<block1List.length; j++)
1519 | 			{
1520 | 		
1521 | 				if(block1List[j] == currBlock)
1522 | 				{
1523 | 					connectionToOther[connectionToOtherCounter] = block2List[j];
1524 | 					connectionToOtherCounter = connectionToOtherCounter +1;
1525 | 					
1526 | 					
1527 | 			
1528 | 				}	
1529 | 		
1530 | 			}
1531 | 			doneList[doneListCounter] = currBlock;
1532 | 			doneListCounter = doneListCounter+1;
1533 | 			removeExcess(1,currBlock,connectionToOther);
1534 | 		}
1535 | 		
1536 | 	}
1537 | 	doneList = [];
1538 | 	doneListOCunter =0;
1539 | 
1540 | 
1541 | 	for(var i =0; i<block2List.length; i++)
1542 | 	{
1543 | 		currBlock = block2List[i];
1544 | 		connectionToOtherCounter =0;
1545 |         connectionToOther = [];
1546 | 
1547 | 		if($.inArray(currBlock,doneList) == -1)
1548 | 		{		
1549 | 
1550 | 			
1551 | 
1552 | 			for(var j =0; j<block2List.length; j++)
1553 | 			{
1554 | 		
1555 | 				if(block2List[j] == currBlock && blockDiffList[block1List[j]][currBlock] != -1)
1556 | 				{
1557 | 					connectionToOther[connectionToOtherCounter] = block1List[j];
1558 | 					connectionToOtherCounter = connectionToOtherCounter +1;
1559 | 									
1560 | 			
1561 | 				}	
1562 | 		
1563 | 			}
1564 | 			doneList[doneListCounter] = currBlock;
1565 | 			doneListCounter = doneListCounter+1;
1566 | 			removeExcess(2,currBlock,connectionToOther);
1567 | 		}
1568 | 		
1569 | 	}	
1570 | 	
1571 | 
1572 | 
1573 | 
1574 | 
1575 | 
1576 | }	
1577 | function calculateLinks()
1578 | {	
1579 | 
1580 | 
1581 | //var blockDiffList = [[]];
1582 | var blockNormList = [];
1583 | var result;
1584 | var listNum =0;
1585 | 
1586 | 
1587 | 	for(var i =0; i<blocks.length; i++)
1588 | 	{
1589 | 
1590 | 		for(var j = 0; j<blocks1.length; j++)
1591 | 		{
1592 | 			
1593 | 			
1594 | 				
1595 | 			result = beatDistance(track1.analysis.beats[i],track2.analysis.beats[j]);
1596 | 			blockNormList[listNum] = result;
1597 | 			if(!blockDiffList[i])
1598 | 			{
1599 | 				blockDiffList[i] = [];	
1600 | 			}	
1601 | 			blockDiffList[i][j] = result;
1602 | 			listNum = listNum +1;
1603 | 			
1604 | 			
1605 | 
1606 | 		}	
1607 | 		
1608 | 		
1609 | 
1610 | 	}	
1611 | 
1612 | 	diffArray = blockNormList;
1613 | 	calculateMeanAndStd();
1614 | 	var percentage =0;
1615 | 
1616 | 	var TrackIndexNum =0;
1617 | 
1618 | 	var selectBlock1List = [];
1619 | 	var selectBlock2List = [];
1620 | 
1621 | 	for(var i =0; i<blocks.length; i++)
1622 | 	{
1623 | 
1624 | 		for(var j = 0; j<blocks1.length; j++)
1625 | 		{
1626 | 			
1627 | 			percentage = compute(blockDiffList[i][j],diffMean,diffStd);
1628 | 		if(percentage<(sessionStorage.pConnect/100))
1629 | 			{
1630 | 					
1631 | 				//drawLine(blocks[i],blocks1[j]);
1632 | 				firstTrackIndex[TrackIndexNum] = blocks[i];
1633 | 				secondTrackIndex[TrackIndexNum] = blocks1[j];
1634 | 				selectBlock1List[TrackIndexNum] = i;
1635 | 				selectBlock2List[TrackIndexNum] = j;
1636 | 				TrackIndexNum = TrackIndexNum +1;
1637 | 
1638 | 			}	
1639 | 			
1640 | 			
1641 | 
1642 | 		}	
1643 | 
1644 | 
1645 | 	}
1646 | 	
1647 | 
1648 | 	$("#infoO1").hide();
1649 | 	$("#info").text("Creating connections between tracks");
1650 | 	filterLinks(selectBlock1List,selectBlock2List);
1651 | 	
1652 | 	for(var i=0;i<TrackIndexNum;i++)
1653 | 	{
1654 | 		if(blockDiffList[selectBlock1List[i]][selectBlock2List[i]] ==-1)
1655 | 		{   
1656 | 			firstTrackIndex[i] = -1;
1657 | 			secondTrackIndex[i] = -1;
1658 | 
1659 | 			
1660 | 		}
1661 | 	
1662 | 
1663 | 	}	
1664 | 
1665 | 	
1666 | 
1667 | 	var contextConnectionProg = document.getElementById("myChartProg").getContext('2d');
1668 | 	contextConnectionProg.clearRect(0, 0,  document.getElementById("myChartProg").width,  document.getElementById("myChartProg").height);
1669 | 	
1670 | 			var ConnectionData1 = [
1671 |     			{
1672 |         			value: 0,
1673 |         			color:"#e89600",
1674 |         			highlight:"#ffa602",
1675 |         			label: "loaded"
1676 |     			},
1677 |     			{
1678 |         			value: TrackIndexNum,
1679 |         			color:"#ffd381",
1680 |         			highlight:"#ffe5b4",
1681 |         			label: "Not loaded"
1682 |     			}
1683 |     			]
1684 |  
1685 | 	var myConnectionChart = new Chart(contextConnectionProg).Doughnut(ConnectionData1,{ animation: false, animationEasing: "linear",showTooltips: false,segmentStrokeColor : "#fdf6e3"});
1686 | 
1687 | 
1688 | 		for(var i =0; i<TrackIndexNum; i++)
1689 | 		{
1690 | 			
1691 | 					myConnectionChart.options.animation = true;
1692 | 					myConnectionChart.options.animationSteps = 10;
1693 | 					myConnectionChart.segments[1].value = myConnectionChart.segments[1].value -1;
1694 | 					myConnectionChart.segments[0].value = myConnectionChart.segments[0].value +1;
1695 | 					myConnectionChart.update();
1696 | 					if(firstTrackIndex[i] != -1 && secondTrackIndex[i] != -1)
1697 | 					{	
1698 | 					drawLine(firstTrackIndex[i],secondTrackIndex[i]);
1699 | 					}
1700 | 
1701 | 
1702 | 
1703 | 
1704 | 
1705 | 		}	
1706 | 		$("#info").text("Ready to play.");
1707 | 		$("#play-remix").removeClass("hidden");
1708 | 		$("#musicTilesStatus").removeClass("hidden");
1709 | 
1710 | 
1711 | 
1712 | 
1713 | }
1714 | 
1715 | function beatDistance(beat1,beat2)
1716 | {	
1717 | var segmentBeat1 = []; 
1718 | 	segmentBeat1 = beat1.overlappingSegments;
1719 | var segmentBeat2 = [];
1720 | 	segmentBeat2 = beat2.overlappingSegments;
1721 | 
1722 | var beatDiff = 0;
1723 | var segmentNum = 0;
1724 | 
1725 | while( segmentBeat1[segmentNum] && segmentBeat2[segmentNum])
1726 | {
1727 | 
1728 | 	beatDiff = beatDiff + segmentDistance(segmentBeat1[segmentNum],segmentBeat2[segmentNum]);
1729 | 	segmentNum = segmentNum +1;
1730 | 
1731 | 
1732 | }	
1733 | 
1734 | 
1735 | return beatDiff/segmentNum;
1736 | 
1737 | 
1738 | 
1739 | }
1740 | function segmentDistance(segment1,segment2)
1741 | {
1742 | 
1743 | 	var timbreDiff = getDistance(segment1.timbre,segment2.timbre);
1744 | 	var pitchDiff = getDistance(segment1.pitches, segment2.pitches);
1745 | 	var loudStartDiff = Math.abs(segment1.loudness_start - segment2.loudness_start);
1746 | 	var loudMaxDiff = Math.abs(segment1.loudness_max -segment2.loudness_max);
1747 | 	var durationDiff = Math.abs(segment1.duration - segment2.duration);
1748 | 	var confidenceDiff = Math.abs(segment1.confidence - segment2.confidence);
1749 | 	var distance = (timbreDiff * timbreW) + (pitchDiff * pitchW) + (loudStartDiff * loudStartW) + (loudMaxDiff * loudMaxW) + (durationDiff *durationW) + (confidenceDiff * confidenceW);
1750 | 	return distance;
1751 | 
1752 | 
1753 | 
1754 | }
1755 | function getDistance(element1, element2)
1756 | {
1757 | 	var TotalSum =0;
1758 | 	var diff =0;
1759 | 
1760 | 	for(var i =0; i<element1.length; i++)
1761 | 	{
1762 | 
1763 | 		if(element1[i] && element2[i])
1764 | 		{
1765 | 
1766 | 			diff = element1[i] -element2[i];
1767 | 			TotalSum = TotalSum + diff*diff;
1768 | 
1769 | 		}	
1770 | 
1771 | 
1772 | 	}	
1773 | 
1774 | 	return Math.sqrt(TotalSum);
1775 | 
1776 | 
1777 | 
1778 | 
1779 | 
1780 | }	
1781 | 
1782 | 
1783 | 
1784 | 
1785 | 
1786 | //http://www.math.ucla.edu/~tom/distributions/normal.html
1787 | function normalcdf(X){   
1788 | var T=1/(1+.2316419*Math.abs(X));
1789 | var D=.3989423*Math.exp(-X*X/2);
1790 | var Prob=D*T*(.3193815+T*(-.3565638+T*(1.781478+T*(-1.821256+T*1.330274))));
1791 | if (X>0) 
1792 | {	
1793 | 	Prob=1-Prob
1794 | }	
1795 | return Prob
1796 | }
1797 | function compute(num,mean,stdev) {  
1798 | 	Z= num;  
1799 | 	M= mean;  
1800 | 	SD= stdev; 
1801 | 	with (Math) {		
1802 | 		if (SD<0) {	
1803 | 			alert("The standard deviation must be nonnegative.")
1804 | 		} else if (SD==0) {
1805 | 			if (Z<M){
1806 | 				Prob=0	
1807 | 			} else {	
1808 | 				Prob=1
1809 | 			}	
1810 | 		} else {	
1811 | 			Prob=normalcdf((Z-M)/SD);
1812 | 			Prob=round(100000*Prob)/100000;
1813 | 		}	
1814 | 	}   
1815 | 	return Prob;
1816 | }
1817 | 
1818 | function calculateMeanAndStd()
1819 | {
1820 | 
1821 | var mean = 0;
1822 | var std = 0;
1823 | var sum = 0;
1824 | var meanSum =0;
1825 | for(var i =0; i<diffArray.length; i++)
1826 | 	{
1827 | 		sum = sum + diffArray[i];	
1828 | 			
1829 | 
1830 | 
1831 | 	}
1832 | 
1833 |  mean = sum / diffArray.length;
1834 |  diffMean = mean;
1835 | 
1836 | for(var j =0; j<diffArray.length; j++)
1837 | 	{
1838 | 		meanSum = meanSum +  ( mean - diffArray[j])*(mean-diffArray[j]);
1839 | 					
1840 | 
1841 | 
1842 | 	}	
1843 | 
1844 | 	var variance = meanSum/diffArray.length;
1845 | 	std = Math.sqrt(variance);
1846 | 	diffStd = std;
1847 | 
1848 | 
1849 | 
1850 | 
1851 | }	
1852 | 
1853 | /*global Raphael:true*/
1854 | //http://stackoverflow.com/questions/4771517/raphael-js-path-line-with-gradient
1855 | (function() {
1856 |     if (Raphael.vml) {
1857 |         Raphael.el.strokeLinearGradient = function() {
1858 |             // not supporting VML yet
1859 |             return this; // maintain chainability
1860 |         };
1861 |     } else {
1862 |         var setAttr = function(el, attr) {
1863 |             var key;
1864 |             if (attr) {
1865 |                 for (key in attr) {
1866 |                     if (attr.hasOwnProperty(key)) {
1867 |                         el.setAttribute(key, attr[key]);
1868 |                     }
1869 |                 }
1870 |             } else {
1871 |                 return document.createElementNS("http://www.w3.org/2000/svg", el);
1872 |             }
1873 | 
1874 |             return null;
1875 |         };
1876 | 
1877 |         var defLinearGrad = function(defId, stops) {
1878 |             var def = setAttr("linearGradient");
1879 |             var i, l;
1880 |             def.id = defId;
1881 | 
1882 |             for (i = 0, l = stops.length; i < l; i += 1) {
1883 |                 var stopEle = setAttr("stop");
1884 |                 var stop = stops[i];
1885 |                 setAttr(stopEle, stop);
1886 | 
1887 |                 def.appendChild(stopEle);
1888 |             }
1889 | 
1890 |             return def;
1891 |         };
1892 | 
1893 |         Raphael.el.strokeLinearGradient = function(defId, width, stops) {
1894 | 
1895 |             if (stops) {
1896 |                 this.paper.defs.appendChild(defLinearGrad(defId, stops));
1897 |             }
1898 | 
1899 |             setAttr(this.node, {
1900 |                 "stroke": "url(#" + defId + ")",
1901 |                 "stroke-width": width
1902 |             });
1903 | 
1904 |             return this; // maintain chainability
1905 |         };
1906 | 
1907 |         Raphael.st.strokeLinearGradient = function(defId, width, stops) {
1908 |             return this.forEach(function(el) {
1909 |                 el.strokeLinearGradient(defId, width, stops);
1910 |             });
1911 |         };
1912 | 
1913 |         Raphael.fn.defineLinearGradient = function(defId, stops) {
1914 | 			
1915 | 			
1916 | 
1917 |             this.defs.appendChild(defLinearGrad(defId, stops));
1918 |         };
1919 |     }
1920 | }());
1921 | 
1922 | 
1923 | 
1924 | 
1925 | 
1926 | 
1927 | window.onload = init;
1928 | </script>
1929 | 
1930 |        
1931 |     <div class="container">
1932 | 		<span id="programTitle">SwitchBeat&nbsp;&nbsp;<span class="musicAndCode">{</span><i class="fa  fs-fw fa-music"></i><span class="musicAndCode">}</span></span>
1933 | 		<span id="programDescrip">&nbsp;&nbsp;&nbsp;&nbsp;<em>Mashup two of your favorite songs</em></span><br><br>
1934 |        	<div id="inputParem" class="hidden">
1935 | 			<h3><i class="fa fa-toggle-on fa-fw optionicon" style="color:green"></i>&nbsp;&nbsp;Options</h3>
1936 | 			<hr>
1937 | 		<span id="sliderThreshold">Select the percentage cut off for music connections:
1938 | 			<form oninput="amount.value=rangeInput.value">
1939 |     		<input type="range" id="rangeInput" name="rangeInput" min=".01" max="10" value="5" step=".01">                                                       
1940 |         	&nbsp;<output name="amount" for="rangeInput">5</output>%
1941 |         </form>
1942 | 		</span>
1943 | 		<span id="sliderJump">Select the probability for a connection jump:
1944 | 			<form oninput="JumpAmount.value=rangeInputJump.value">
1945 |     		<input type="range" id="rangeInputJump" name="rangeInputJump" min=".1" max="100" value="30" step=".1">                                                       
1946 |         	&nbsp;<output name="JumpAmount" for="rangeInputJump">30</output>%
1947 | 			
1948 | 			</form>
1949 | 		</span>
1950 | 		<span id="sliderConnection">Select the maximum connections per beat:
1951 | 			<form oninput="ConnectionAmount.value=rangeInputConnection.value">
1952 |     		<input type="range" id="rangeInputConnection" name="rangeInputConnection" min="1" max="10" value="4" step="1">                                                       
1953 |         	&nbsp;<output name="ConnectionAmount" for="rangeInputConnection">4</output>
1954 | 			
1955 | 			</form>
1956 | 		</span>
1957 | 			<span id="switchText" style="
1958 |   			  /* height: 20px; */
1959 |    			 line-height: 2;
1960 | 			">Infinite Mode - end of one track will jump to the start of another</span>
1961 | 			&nbsp;<div class="onoffswitch">
1962 | 			<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
1963 |     		<label class="onoffswitch-label" for="myonoffswitch">
1964 |         	<span class="onoffswitch-inner"></span>
1965 |         	<span class="onoffswitch-switch"></span>
1966 |     		</label>
1967 | 			</div>
1968 |         </form>
1969 | 		</span>
1970 | 		</div>
1971 | 
1972 | 		<br>
1973 | 
1974 | 		<div id = "uploadParem">
1975 | 			<h3><i class="fa fa-upload fa-fw" style="color:#683A5E"></i>&nbsp;&nbsp;Upload</h3>
1976 | 			<hr>
1977 | 		<span id="infoO"><span id="info"></span>&nbsp;&nbsp;<canvas id="myChartProg" width="25" height="25"></canvas><br></span>
1978 | 		<span id="infoO1"><span id="info1"></span>&nbsp;&nbsp;<canvas id="myChartProg1" width="25" height="25"></canvas><br></span>
1979 | 		
1980 | 
1981 |         <section>
1982 |         <div id='select-track'>
1983 |             <form action="https://s3.amazonaws.com/static.echonest.com" method="post" enctype="multipart/form-data" onSubmit="submitForm(this);">
1984 |               <input id='f-filename' type="hidden" name="key" value="remix_audio/${filename}">
1985 |               <input id='f-key' type="hidden" name="AWSAccessKeyId" value="YOUR_AWS_ACCESS_KEY"> 
1986 |               <input type="hidden" name="acl" value="public-read"> 
1987 |               <input id='redirect-url' type="hidden" name="success_action_redirect"
1988 |                   value="YOUR_URL">
1989 |               <input id='f-policy' type="hidden" name="policy" value="YOUR_POLICY_DOCUMENT_BASE64_ENCODED">
1990 |               <input id='f-signature' type="hidden" name="signature" value="YOUR_CALCULATED_SIGNATURE">
1991 |               <input type="hidden" name="Content-Type" value="audio/mpeg">
1992 | 			  Select the first <b>mp3</b> to upload : <input  id="file" name="file" type="file"> 
1993 |               <br>
1994 |               <input class="btn btn-primary btn-default" id='upload' type="submit" value="Upload MP3"> 
1995 |             </form> 
1996 |         </div>
1997 | 		<div id='select-track1' class='hidden'>
1998 |             <form action="https://s3.amazonaws.com/static.echonest.com" method="post" enctype="multipart/form-data" onSubmit="submitForm1(this);">
1999 |               <input id='f-filename' type="hidden" name="key" value="remix_audio/${filename}">
2000 |               <input id='f-key' type="hidden" name="AWSAccessKeyId" value="YOUR_AWS_ACCESS_KEY"> 
2001 |               <input type="hidden" name="acl" value="public-read"> 
2002 |               <input id='redirect-url' type="hidden" name="success_action_redirect"
2003 |                   value="YOUR_URL">
2004 |               <input id='f-policy' type="hidden" name="policy" value="YOUR_POLICY_DOCUMENT_BASE64_ENCODED">
2005 |               <input id='f-signature' type="hidden" name="signature" value="YOUR_CALCULATED_SIGNATURE">
2006 |               <input type="hidden" name="Content-Type" value="audio/mpeg">
2007 | 			  Select the second <b>mp3</b> to upload : <input  id="file" name="file" type="file"> 
2008 |               <br>
2009 |               <input class="btn btn-primary btn-default" id='upload' type="submit" value="Upload MP3"> 
2010 |             </form> 
2011 |         </div>
2012 | 		
2013 | 		<div id="status"></div>
2014 | 
2015 |         </section>
2016 | 		</div>	
2017 |         <section id='play-remix' class="hidden">
2018 |             <br />
2019 |             <button class='btn btn-inverse btn-remixed' onClick="playClicked();"><i class="fa  fa-fw fa-play"></i>&nbsp;Play</button>
2020 |             <button class='btn btn-remixed' onClick="stop();"><i class="fa fa-fw fa-stop"></i>&nbsp;Stop</button>
2021 |             <span id='downloadButton'></a>
2022 |             </div>
2023 | 			<div id="musicTilesStatus" class="hidden">
2024 | 			<div id='tiles' ></div>
2025 | 			<div class="MusicStatus">
2026 | 			&nbsp;&nbsp;	
2027 | 			<canvas id="myChartL" width="50" height="50"></canvas>
2028 | 			<canvas id="myChartP" width="50" height="50"></canvas>
2029 | 			<canvas id="myChartT" width="50" height="50"></canvas>
2030 | 			&nbsp;
2031 | 			 Block: <span id='BlockNum'> 1 </span>
2032 | 			&nbsp;
2033 | 			Track: <span id='TrackNum'> 1 </span>
2034 | 			&nbsp;&nbsp;
2035 | 			<canvas id="myChartTrack" width="50" height="50"></canvas>
2036 | 			<br>
2037 | 			<span id="chartLabels" style="
2038 |     font-size: 12px;
2039 | ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Loud&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Pitch&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Timbre&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Track ratio</span>
2040 | 			</div>
2041 | 			</div>
2042 |         </section>
2043 |    
2044 |   </div> <!-- /container -->
2045 | <div class="container">
2046 | 	<br>
2047 | 	<br>
2048 | 	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Brought to you by:<br>
2049 | 	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://the.echonest.com/"> <img src="images/EchoNest.png" alt="EchoNest"></a> 
2050 | 	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://pages.github.com/"><img src="images/github.png" alt="Github Pages" height="29"></a> 	
2051 | 	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://jekyllrb.com/"><img src="images/jekyll.png" alt="Jekyll"></a> 	
2052 | 	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript"><i class="icon-javascript" style="color:#ffbf00; font-size: 72px; position: relative; top: -30px;"></i></a><br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span id="bottomTitle">SwitchBeat</span> is coded by <span id ="name">Nikhil Kumar </span> inspired by <a href="http://labs.echonest.com/Uploader/index.html" style="color:#d33682">The Infinite Jukebox</a>, check out more at <a href="http://kumarcode.com/" style="color:#dc322f">Kumarcode.com</a>
2053 | </div>
2054 | </body>
2055 | 
2056 | <style>#forkongithub a{background:#482841;color:#fff;text-decoration:none;font-family:arial,sans-serif;text-align:center;font-weight:bold;padding:5px 40px;font-size:1rem;line-height:2rem;position:relative;transition:0.5s;}#forkongithub a:hover{background:#c11;color:#fff;}#forkongithub a::before,#forkongithub a::after{content:"";width:100%;display:block;position:absolute;top:1px;left:0;height:1px;background:#fff;}#forkongithub a::after{bottom:1px;top:auto;}@media screen and (min-width:800px){#forkongithub{position:absolute;display:block;top:0;right:0;width:200px;overflow:hidden;height:200px;z-index:9999;}#forkongithub a{width:200px;position:absolute;top:60px;right:-60px;transform:rotate(45deg);-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);box-shadow:4px 4px 10px rgba(0,0,0,0.8);}}</style><span id="forkongithub"><a href="https://github.com/nikhil/SwitchBeat">Fork me on GitHub</a></span>
2057 | </html>
2058 | 


--------------------------------------------------------------------------------