<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes" />
  <script type="text/javascript" src="/js/jquery/jquery-1.7.1.min.js"></script>
  <link rel="stylesheet" href="/css/simplified.css" media="screen" rel="stylesheet" type="text/css" />
  {literal}
  <script>
    $(document).ready(function() {
      function start() {
        //Fade in the Popup
        $('#login').fadeIn(1000);

        //Set the center alignment padding + border see css style
        var popMargTop = ($('#login').height() + 24) / 2;
        var popMargLeft = ($('#login').width() + 24) / 2;

        if (!jQuery.browser.msie) {
          $('#login').css({
            'margin-top' : -popMargTop,
            'margin-left' : -popMargLeft
          });

          // Add the mask to body
          $('body').append('<div id="mask"></div>');
          $('#mask').fadeIn(0);
        }
        else {
          $('#login').css({
            'margin-top' : (($(window).height()/2) - 140)
          });
        }
        return false;
      }

      start();
      //$('#login').fadeIn(1000);
    });

    function resize()
    {
      var h = $(document.body).height() - 52;
      var w = $(document.body).width();
      if (w > 400) w = 400;

      $('#login').width(w-50);

      var popMargTop = ($('#login').height() + 24) / 2;
      var popMargLeft = ($('#login').width() + 5) / 2;

      $('#login').css({
          'margin-top' : -popMargTop,
          'margin-left' : -popMargLeft
      });
    }

    function getBrowserTimeZoneOffset()
    {
        return -1 * ((new Date()).getTimezoneOffset() * 60);
    }

    function stringReplace(strSearch, strReplace, str)
    {
        var expression = eval("/" + strSearch + "/g");

        return str.replace(expression, strReplace);
    }

    function onLoad()
    {
        document.getElementById("form[BROWSER_TIME_ZONE_OFFSET]").value = getBrowserTimeZoneOffset();

        if (document.getElementById("timeZoneFailed").value == "1") {
            var strHtml = document.getElementById("details").innerHTML;
            strHtml = stringReplace("\\{0\\}", document.getElementById("form[USR_TIME_ZONE]").value, strHtml);
            strHtml = stringReplace("\\{1\\}", document.getElementById("form[BROWSER_TIME_ZONE]").value, strHtml);

            document.getElementById("details").innerHTML = strHtml;
        }
    }
  </script>
  {/literal}
</head>

<body onload="resize(); onLoad();" onresize="resize();">
<center>
  <form method="POST" action="../login/authentication">
    <input type="hidden" id="form[BROWSER_TIME_ZONE_OFFSET]" name="form[BROWSER_TIME_ZONE_OFFSET]" />
    <input type="hidden" id="timeZoneFailed" name="timeZoneFailed" value="{$timeZoneFailed}" />

    <div id="login" class="login_form">
      {if (!$timeZoneFailed) }
          <h1>{translate label="ID_SIGN_IN"}</h1>

          <div class="login_message">{$msg}</div>

          <table border=0 width="100%" cellspacing="0" cellpadding="0" class="formbody">
             <tr>
                 <td><label for="login_field">{translate label="ID_USERNAME"}</label></td>
             </tr>
             <tr>
                 <td><input id="login_field" class="text" style="width: 100%;" type="text" value="{$usr}" tabindex="1"  name="form[USR_USERNAME]" autocapitalize="off" /></td>
             </tr>
             <tr>
                 <td><label for="password">{translate label="ID_PASSWORD"}</label></td>
             </tr>
             <tr>
                 <td><input id="password" class="text" style="width: 100%;" type="password" value="{$pwd}" tabindex="2"  name="form[USR_PASSWORD]" autocomplete="disabled" /></td>
             </tr>
             <tr>
                 <td align="center"><label class="submit_btn"><input type="submit" value="{translate label="ID_LOGIN"}" tabindex="3" name="commit" /></label></td>
             </tr>
          </table>
      {else}
          <input type="hidden" id="form[USR_USERNAME]" name="form[USR_USERNAME]" value="{$usr}" />
          <input type="hidden" id="form[USR_PASSWORD]" name="form[USR_PASSWORD]" value="{$pwd}" />

          <input type="hidden" id="form[USR_TIME_ZONE]" name="form[USR_TIME_ZONE]" value="{$userTimeZone}" />
          <input type="hidden" id="form[BROWSER_TIME_ZONE]" name="form[BROWSER_TIME_ZONE]" value="{$browserTimeZone}" />

          <h1>{translate label="ID_TIME_ZONE_LOGIN_TITLE"}</h1>

          <table border=0 width="100%" cellspacing="0" cellpadding="0" class="formbody">
             <tr>
                 <td>
                    {translate label="ID_TIME_ZONE_LOGIN_DESCRIPTION1"}
                    {translate label="ID_TIME_ZONE_LOGIN_DESCRIPTION2"}
                    {translate label="ID_TIME_ZONE_LOGIN_DESCRIPTION3"}
                    <br />
                    <br />
                    <span id="details">{translate label="ID_TIME_ZONE_LOGIN_DESCRIPTION_DETAILS"}</span>
                    <br />
                    <br />
                 </td>
             </tr>
             <tr>
                 <td align="center"><label class="submit_btn"><input type="submit" value="{translate label="ID_OK"}" tabindex="1" name="commit" /></label></td>
             </tr>
          </table>
      {/if}
    </div>
  </form>
</center>
</body>

</html>

