<!DOCTYPE html>
<html>
  <head>
    <title>DailyBooth</title>
    <link rel="stylesheet" href="/stylesheets/bootstrap.css">
    <link rel="stylesheet" href="/stylesheets/style.css">
  </head>
  <body>
    <div id="header">
      <div class="container">
        <div class="row-fluid">
          <h1><a href="/">DailyBooth</a></h1>
        </div>
      </div>
    </div>
    <div id="content">
      <div class="container">
        <div class="row-fluid">
          <div class="span4">
            <h3>DailyBooth Login</h3>
            <form method="post" action="/login" class="form">
              <div class="control-group">
                <div class="controls">
                  <input type="text" id="username" name="username" placeholder="Username or Email">
                </div>
              </div>
              <div class="control-group">
                <div class="controls">
                  <input type="password" id="password" name="password" placeholder="Password">
                </div>
              </div>
              <div class="control-group">
                <div class="controls">
                  <button class="btn submit">Log In</button>
                </div>
              </div>
            </form>
          </div>
          <div class="span8">
            <h3>DailyBooth is Shutting Down</h3>
            <p>A picture a day, every day. DailyBooth was launched based on that simple idea. We never could have imagined what it would become more than three years later. </p>
            <p>The community each one of you helped create is truly one of a kind. There have been many unforgettable memories created amongst us and none of this would have been possible without you. For that, we're truly grateful for what you've helped DailyBooth become. </p>
            <p>Unfortunately, DailyBooth is shutting down. Keeping the website running is no longer feasible. </p>
            <p>You'll be able to download your photos until December 31st, 2012.  After this date all content will be permanently deleted. </p>
            <p>We can't thank you enough for everything.	 </p>
            <p>Sincerely, </p>
            <p>The DailyBooth Team</p>
          </div>
        </div>
      </div>
    </div>
    <script type="text/javascript" src="/socket.io/socket.io.js"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="/javascript/bootstrap-alert.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        var id = $('#progress').data('id');
        if(id) {
          var socket = io.connect();
          socket.on('connect', function() {
            socket.emit('subscribe', id);
            console.log('id', id);
          });
          socket.on('message', function(data) {
            console.log('message', data);
          });
          socket.on('progress', function(data) {
            console.log('progress', data);
            var percent = (data.count == 0) ? 100 :  parseFloat((1 - data.count / data.total) * 100, 2).toPrecision(4);
            $('#progress').find('.progress .bar').width(percent + '%');
            console.log(percent, data);
          });
          socket.on('complete', function(data) {
            console.log('complete', data);
            $('#progress').find('.progress .bar').width('100%');
            $('#progress').hide();
            $('#download a').attr('href', data.url);
            $('#download').show();
            console.log(data);
          });
        }
      });
    </script>
  </body>
</html>