<style type="text/css">
#djDebugSubdomainPanel form,
#djDebugSubdomainPanel #clear_subdomain
{
  margin-top: 2em;
}
#djDebugSubdomainPanel label
{
  display: block;
}
#djDebugSubdomainPanel input,
#djDebugSubdomainPanel form button
{
  font-size: 150%;
  margin-top: 10px;
}
</style>

<script language="javascript">
(function(window, document, version, callback) {
   var j, d;
   var loaded = false;
   if (!(j = window.jQuery) || version > j.fn.jquery || callback(j)) {
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.src = DEBUG_TOOLBAR_MEDIA_URL + "js/jquery.js";
      script.onload = script.onreadystatechange = function() {
         if (!loaded && (!(d = this.readyState) || d == "loaded" || d == "complete")) {
            callback((j = window.jQuery).noConflict(1));
            j(script).remove();
         }
      };
      document.documentElement.childNodes[0].appendChild(script)
   }
})(window, document, "1.3", function($) {
  var navigate_to_subdomain = function(domain) {
    var exdate = new Date();
    exdate.setDate(exdate.getDate() + 365);

    document.cookie = "_domain=" + escape(domain) + "; expires=" + exdate.toUTCString() + "; path=/";

    window.location.reload();
  };

  $('#djDebugSubdomainPanel #clear_subdomain').live('click', function () {
    navigate_to_subdomain('');
    return false;
  });

  $('form[name=navigate_to_domain]').live('submit', function () {
    navigate_to_subdomain($('#domain_enter').val());
    return false;
  });
});
</script>

<form name="navigate_to_domain">
  <label for="domain_enter">Subdomain to navigate to (eg. <em>api.example.com</em>):</label>
  <input id="domain_enter" value="{{ domain }}">
  <button type="submit">Navigate</button>
</form>

<button id="clear_subdomain">Clear subdomain</button>
