http://www.flash14.com/index.asp?f=flash_htm_2013128174325
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>This Shell by the Gamits</title>
<link rel="stylesheet" src='/function/js_function/texiao/shipinpintu/screen.css'/>
<script src='/function/js_function/texiao/shipinpintu/modernizr-1.7.min.js'></script>
</head>
<body>
<video width="600" height="300" autobuffer preload="auto" id="screen">
<source src="http://d81op24cwzgeb.cloudfront.net/gamits.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>
<section id="loading">
<h1>THIS SHELL</h1>
<div id="instructions">
<h2>HOW TO PLAY</h2>
<ol id="steps">
<li><p>Drag and drop the pieces of the video to their correct location before time runs out.</p></li>
<li><p>When the correct piece is in the correct cell it will lock into place.</p></li>
<li><p>If you can complete the puzzle in time you will be rewarded with a free download of the song.</p></li>
</ol>
</div>
<div id="loader">
<ul id="status">
<li>DATA RECEIVED</li>
<li>VIDEO READY TO PLAY</li>
<li>CLICK TO START</li>
</ul>
<img id="indicator" src="http://www.thisshell.com/data/images/indicator.gif" width="50" height="50" alt="" />
</div>
</section>
<section id="main">
<header>
<img src="http://www.thisshell.com/data/images/logo.gif" width="114" height="28" alt="The Gamits" />
</header>
<div id="puzzle">
</div>
<div id="about">
<time id="countdown">00:00</time>
<h2>ABOUT THIS PROJECT</h2>
<p>The Gamits are a 3-piece punk rock band from Denver, CO.<br /><a href="http://thegamits.bandcamp.com/album/parts" target="_blank">Listen To More →</a></p>
<p>This puzzle is an HTML5 experiment created by Legwork.<br /><a href="http://www.legworkstudio.com" target="_blank">Learn More →</a></p>
<img id="countdown-fg" src="http://www.thisshell.com/data/images/countdown-fg.png" width="200" height="100" alt="" />
</div>
<button id="mute-btn"></button>
<button id="replay-btn">REPLAY THE COMPLETED VIDEO?</button>
<footer>
<p>Inspired by our friend, <a href="http://www.craftymind.com/" target="_blank">Sean Christmann</a>.<br/>COPYRIGHT © 2011 LEGWORK STUDIO. ALL RIGHTS RESERVED.</p>
<section id="tweet"><a href="http://twitter.com/share" class="twitter-share-button" data-text="Check out this HTML5 video puzzle for the Gamits song, This Shell:" data-count="none" data-via="thegamits">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></section>
<section id="like"><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script><fb:like href="http://thisshell.com" layout="button_count" show_faces="false" width="100"></fb:like></section>
</footer>
</section>
<aside id="win">
<h2>SWEET JOB, DUDE!</h2>
<p>Against all odds, you've managed to solve the puzzle. The reward? This rad song:</p>
<p><a href="javascript:void(0);" id="download">Download (3.6MB MP3) ↓</a></p>
</aside>
<aside id="fail">
<h2>YOU TOTALLY BLEW IT!</h2>
<p>If this was a test, you would've got an F+. Your retribution? Another try:</p>
<p><a href="javascript:window.location.href = window.location.href;">Try Again ↩</a></p>
</aside>
<div id="fwa">
<a href="http://www.thefwa.com/site/this-shell" target="_blank"><img src="http://www.thisshell.com/data/images/DayTopRight.png" alt="FWA Site of the Day"></a>
</div>
<script src='/function/js_function/jquery/jquery.min.js'></script>
<script src='/function/js_function/jquery/jquery-ui.min.js'></script>
<script src='/function/js_function/jquery/jquery.easing.1.3.js'></script>
<script src='/function/js_function/texiao/shipinpintu/gamits.parts.js'></script>
</body>
</html>
