<%namespace name='static' file='static_content.html'/>
<!DOCTYPE html>
<html>
  <head>
    <title><%block name="title">MITx: MIT's new online learning initiative</%block></title>

    <meta name="description" content="<%block name="description">MITx will offer a portfolio of MIT courses for free to a virtual community of learners around the world</%block>" />

    <meta name="keywords" content="<%block name="keywords">MITx, online learning, MIT, online laboratory, education, learners, undergraduate, certificate</%block>" />

    <!--link rel="stylesheet" href="${ settings.LIB_URL }jquery.treeview.css" type="text/css" media="all" /-->
    <%static:css group='marketing'/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <!--[if lt IE 8]>
    <%static:css group='marketing-ie'/>
    <![endif]-->

    <script type="text/javascript" src="${static.url('js/jquery.min.js')}"></script>
    <script type="text/javascript" src="${static.url('js/jquery-ui.min.js')}"></script>

    <script type="text/javascript" src="${static.url('js/jquery.leanModal.min.js')}"></script>
    <!--script type="text/javascript" src="${static.url('js/swfobject/swfobject.js')}"></script-->
    <!--script type="text/javascript" src="${static.url('js/jquery.treeview.js')}"></script-->
    <!--script type="text/javascript" src="${static.url('js/video_player.js')}"></script-->
    <!-- <script type="text/javascript" src="${static.url('js/schematic.js')}"></script> -->

    <script src="${static.url('js/html5shiv.js')}"></script>

    <%block name="headextra"/>

    <script type="text/javascript">
      function getCookie(name) {
        var cookieValue = null;
        if (document.cookie && document.cookie != '') {
          var cookies = document.cookie.split(';');
          for (var i = 0; i < cookies.length; i++) {
            var cookie = jQuery.trim(cookies[i]);
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) == (name + '=')) {
              cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
              break;
            }
          }
        }
        return cookieValue;
      }

function postJSON(url, data, callback) {
  $.ajax({type:'POST',
      url: url,
      dataType: 'json',
      data: data,
      success: callback,
      headers : {'X-CSRFToken':getCookie('csrftoken')}
      });
}
</script>

</head>

<body>
  <%block name="header">
  <header class="announcement <%block name="header_class"/>">
  <div class="anouncement-wrapper">
    <%block name="header_nav">
    <nav>
    <h1><a href="http://mitx.mit.edu/">MITx</a></h1>
    % if settings.COURSEWARE_ENABLED:
    <%block name="login_area">
    <a rel="leanModal" class="login" href="#login">Log In</a>
    </%block>
    % endif
    </nav>
    </%block>

    <%block name="header_text">
    <section>
    <h1><em>MITx</em></h1>
    <h2>MIT&rsquo;s new online learning initiative</h2>
    </section>
    </%block>
  </div>
  </header>
  </%block>

  ${self.body()}
  <%block name="bodyextra"/>

  <footer>
  <div class="footer-wrapper">
    <p> Copyright &copy; 2012. MIT. <a href="/t/copyright.html">Some rights reserved.</a></p>

    <ul>
      <li><a href="/t/tos.html">Terms of Service</a></li>
      <li><a href="/t/privacy.html">Privacy Policy</a></li>
      <li><a href="/t/honor.html">Honor Code</a></li>
      <li><a href="/t/mitx_help.html">Help</a></li>
    </ul>

    <ul aria-label="Social Links" class="social">
      <li class="linkedin">
        <a href="http://www.linkedin.com/groups/Friends-Alumni-MITx-4316538">Linked In</a>
      </li>
      <li class="twitter">
        <a href="https://twitter.com/#!/MyMITx">Twitter</a>
      </li>
      <li class="facebook">
        <a href="http://www.facebook.com/pages/MITx/378592442151504">Facebook</a>
      </li>
    </ul>
  </div>

  </footer>

  % if settings.COURSEWARE_ENABLED:
  <div id="login" class="leanModal_box"><%include file="login.html" /></div>
  % endif
  <div id="pwd_reset" class="leanModal_box"><%include file="password_reset_form.html" /></div>
  <div id="reset_done" class="leanModal_box"></div>

  <script>
    $(document).ready(function(){
      /* Handles when the user tries to log in. Grabs form data. Does AJAX.
      Either shows error, or redirects. */
      $('form#login_form').submit(function(e) {
        e.preventDefault();
        var submit_data={};
        $.each($("[id^=li_]"), function(index,value){
          submit_data[value.name]=value.value;
        });
        submit_data["remember"] = ($('#remember').attr("checked")? true : false);

        postJSON('/login',
        submit_data,
        function(json) {
          if(json.success) {
            location.href="/info";
            } else if($('#login_error').length == 0) {
            $('#login_form').prepend('<div id="login_error">Email or password is incorrect.</div>');
            } else {
            $('#login_error').stop().css("background-color", "#933").animate({ backgroundColor: "#333"}, 2000);
          }
        }
        );
      });


      $('form#pwd_reset_form').submit(function(e) {
        e.preventDefault();
        var submit_data = {};
        submit_data['email'] = $('#id_email').val();
        postJSON('/password_reset/',
        submit_data,
        function(json){
          if (json.success) {
            $('#pwd_reset').html(json.value);
            } else {
            $('#pwd_error').html(json.error).stop().css("background-color", "#933").animate({ backgroundColor: "#333"}, 2000);
          }
        }
        );
      });

    });

    $(function(){
      $("a[rel*=leanModal]").leanModal();

      $("a.login").click(function(){
        $("#login_form #li_email").focus();
      });

      $("a.enroll").click(function(){
        $("#enroll_form #ca_email").focus();
      });
    });
  </script>

  <%block name="js_extra"/>
</body>
</html>
