<!DOCTYPE html>
<html>
<head>
    <title>Mxit Emulator</title>
    <meta charset="UTF-8" />

    <%= stylesheet_link_tag "mxit_rails/emulator" %>
    <%= javascript_include_tag "mxit_rails/emulator" %>

    <link rel="icon" type="image/x-icon" href="<%= image_path("mxit_rails/favicon.ico");  %>" />

    <script type="text/javascript">
      MXIT_ROOT = '<%= Rails.application.config.mxit_root %>';
    </script>

    <!-- The asset image-path helper isn't working in scss files, so moving those to here. sigh. -->
    <style type="text/css">
      #phone { background: url(<%= image_path("mxit_rails/nokia-5310-frame.png") %>) no-repeat; }
      .go > .icon .image  { background-image: url(<%= image_path("mxit_rails/go.png");  %>) }
      .in > .icon .image  { background-image: url(<%= image_path("mxit_rails/in.png");  %>) }
      .out > .icon .image { background-image: url(<%= image_path("mxit_rails/out.png"); %>) }
    </style>
</head>
<body>

  <div id="controls">
    <div id="default">
      <span id="not-registered">No credentials</span>
      <span id="registered">Mxit ID: <span id="mxit-id"></span></span>

      <a id="unlink" class="go link" onclick="Emulator.clearCredentials()">Clear Credentials <span class="icon"><span class="image"></span></span></a>
      <a id="link" class="go link" onclick="Emulator.enterCredentials()">Set Credentials <span class="icon"><span class="image"></span></span></a>
    </div>

    <div id="inputs">
      <input type="text" placeholder="Mxit ID" id="mxit-id-input" />
      <input type="text" placeholder="MSISDN" id="msisdn-input" />

      <a id="link" class="go link" onclick="Emulator.saveCredentials()">Save <span class="icon"><span class="image"></span></span></a>
    </div>
  </div>

  <div id="phone">
    <a id="expand" class="out link" onclick="Emulator.expand()"><span class="icon"><span class="image"></span></span></a>
    <a id="collapse" class="in link" onclick="Emulator.collapse()"><span class="icon"><span class="image"></span></span></a>
    <div id="screen">
      <iframe id="center" class="content" onLoad="Emulator.updateIframe(this)"></iframe>
    </div>
  </div>

  <div id="fadeout"></div>

</body>
</html>