<%! from django.utils.translation import ugettext as _ %>
<%! from microsite_configuration import page_title_breadcrumbs %>
<%inherit file="/main.html" />
<%namespace name='static' file='/static_content.html'/>
<%def name="course_name()">
 <% return _("{course_number} Courseware").format(course_number=course.display_number_with_default) %>
</%def>

<%block name="bodyclass">courseware ${course.css_class or ''}</%block>
<%block name="title"><title>
    % if section_title: 
${page_title_breadcrumbs(section_title, course_name())}
    % else:
${page_title_breadcrumbs(course_name())}
    %endif 
</title></%block>

<%block name="headextra">
<%static:css group='style-course-vendor'/>
<%static:css group='style-course'/>

<%block name="nav_skip">#course-content</%block>

<%include file="../discussion/_js_head_dependencies.html" />

  % if show_chat:
    <link rel="stylesheet" href="${static.url('css/vendor/ui-lightness/jquery-ui-1.8.22.custom.css')}" />
    ## It'd be better to have this in a place like lms/css/vendor/candy,
    ## but the candy_res/ folder contains images and other junk, and it
    ## all needs to stay together for the Candy.js plugin to work.
    <link rel="stylesheet" href="${static.url('candy_res/candy_full.css')}" />
  % endif
  ${fragment.head_html()}
</%block>

<%block name="js_extra">
  <script type="text/javascript" src="${static.url('js/vendor/jquery.scrollTo-1.4.2-min.js')}"></script>
  <script type="text/javascript" src="${static.url('js/vendor/flot/jquery.flot.js')}"></script>

  ## codemirror
  <script type="text/javascript" src="${static.url('js/vendor/codemirror-compressed.js')}"></script>

  ## alternate codemirror
  ##  <script type="text/javascript" src="${static.url('js/vendor/CodeMirror-2.25/lib/codemirror.js')}"></script>
  ##  <script type="text/javascript" src="${static.url('js/vendor/CodeMirror-2.25/mode/xml/xml.js')}"></script>
  ##  <script type="text/javascript" src="${static.url('js/vendor/CodeMirror-2.25/mode/python/python.js')}"></script>


  <%static:js group='courseware'/>
  <%static:js group='discussion'/>

  <%include file="../discussion/_js_body_dependencies.html" />
  % if staff_access:
  	<%include file="xqa_interface.html"/>
  % endif

  <!-- TODO: http://docs.jquery.com/Plugins/Validation -->
  <script type="text/javascript">
    document.write('\x3Cscript type="text/javascript" src="' +
        document.location.protocol + '//www.youtube.com/iframe_api">\x3C/script>');
  </script>

  <script type="text/javascript">
    var $$course_id = "${course.id}";

    $(function(){
        $(".ui-accordion-header a, .ui-accordion-content .subtitle").each(function() {
          var elemText = $(this).text().replace(/^\s+|\s+$/g,''); // Strip leading and trailing whitespace
          var wordArray = elemText.split(" ");
          var finalTitle = "";
          if (wordArray.length > 0) {
            for (i=0;i<=wordArray.length-1;i++) {
              finalTitle += wordArray[i];
              if (i == (wordArray.length-2)) {
                finalTitle += "&nbsp;";
              } else if (i == (wordArray.length-1)) {
                // Do nothing
              } else {
                finalTitle += " ";
              }
            }
          }
          $(this).html(finalTitle);
        });
      });
  </script>

% if timer_expiration_duration:
  <script type="text/javascript">
    var timer = {
      timer_inst : null,
      end_time : null,
      get_remaining_secs : function(endTime) {
        var currentTime = new Date();
        var remaining_secs = Math.floor((endTime - currentTime)/1000);
        return remaining_secs;
      },
      get_time_string : function() {
        function pretty_time_string(num) {
          return ( num < 10 ? "0" : "" ) + num;
        }
        // count down in terms of hours, minutes, and seconds:
        var hours = pretty_time_string(Math.floor(remaining_secs / 3600));
        remaining_secs = remaining_secs % 3600;
        var minutes = pretty_time_string(Math.floor(remaining_secs / 60));
        remaining_secs = remaining_secs % 60;
        var seconds = pretty_time_string(Math.floor(remaining_secs));

        var remainingTimeString = hours + ":" + minutes + ":" + seconds;
        return remainingTimeString;
      },
      update_time : function(self) {
        remaining_secs = self.get_remaining_secs(self.end_time);
        if (remaining_secs <= 0) {
          self.end(self);
        }
        $('#exam_timer').text(self.get_time_string(remaining_secs));
      },
      start : function() { var that = this;
        // set the end time when the template is rendered.
        // This value should be UTC time as number of milliseconds since epoch.
        this.end_time = new Date((new Date()).getTime() + ${timer_expiration_duration});
        this.timer_inst = setInterval(function(){ that.update_time(that); }, 1000);
      },
      end : function(self) {
        clearInterval(self.timer_inst);
        // redirect to specified URL:
        window.location = "${time_expired_redirect_url}";
      }
    }
    // start timer right away:
    timer.start();
  </script>
% endif

% if show_chat:
  <script type="text/javascript" src="${static.url('js/vendor/candy_libs/libs.min.js')}"></script>
  <script type="text/javascript" src="${static.url('js/vendor/candy.min.js')}"></script>

  <script type="text/javascript">
    // initialize the Candy.js plugin
    $(document).ready(function() {
      Candy.init("http://${chat['domain']}:5280/http-bind/", {
        core: { debug: true, autojoin: ["${chat['room']}@conference.${chat['domain']}"] },
        view: { resources: "${static.url('candy_res/')}"}
      });
      Candy.Core.connect("${chat['username']}", "${chat['password']}");

      // show/hide the chat widget
      $('#chat-toggle').click(function() {
        var toggle = $(this);
        if (toggle.hasClass('closed')) {
          $('#chat-block').show().animate({height: '400px'}, 'slow', function() {
            $('#chat-open').hide();
            $('#chat-close').show();
          });
        } else {
          $('#chat-block').animate({height: '0px'}, 'slow', function() {
            $('#chat-open').show();
            $('#chat-close').hide();
            $(this).hide(); // do this at the very end
          });
        }
        toggle.toggleClass('closed');
      });
    });
  </script>
% endif

<script type="text/template" id="image-modal-tpl">
  <%static:include path="js/imageModal.underscore" />
</script>

${fragment.foot_html()}

</%block>

% if timer_expiration_duration:
<div class="timer-main">
  <div id="timer_wrapper">
    % if timer_navigation_return_url:
    <a href="${timer_navigation_return_url}" class="timer_return_url">${_("Return to Exam")}</a>
    % endif
    <div class="timer_label">Time Remaining:</div> <div id="exam_timer" class="timer_value">&nbsp;</div>
  </div>
</div>
% endif

% if accordion:
  <%include file="/dashboard/_dashboard_prompt_midcourse_reverify.html" />
 <%include file="/courseware/course_navigation.html" args="active_page='courseware'" />
% endif

<div class="container">
  <div class="course-wrapper">

% if accordion:
    <div class="course-index">
      <header id="open_close_accordion">
        <a href="#">${_("close")}</a>
      </header>

      <div id="accordion" style="display: none">
        <nav aria-label="${_('Course Navigation')}">
          ${accordion}
        </nav>
      </div>
    </div>
% endif

    <section class="course-content" id="course-content">
      ${fragment.body_html()}
    </section>
  </div>
</div>

% if show_chat:
  <div id="chat-wrapper">
    <div id="chat-toggle" class="closed">
      <span id="chat-open">Open Chat <em class="icon-chevron-up"></em></span>
      <span id="chat-close">Close Chat <em class="icon-chevron-down"></em></span>
    </div>
    <div id="chat-block">
      ## The Candy.js plugin wants to render in an element with #candy
      <div id="candy"></div>
    </div>
  </div>
% endif

% if course.show_calculator:
    <div class="calc-main">
        <a title="${_('Open Calculator')}" href="#" role="button" aria-controls="calculator_wrapper" aria-expanded="false" class="calc">${_("Open Calculator")}</a>
        <div id="calculator_wrapper">
            <form id="calculator">
                <div class="input-wrapper">
                    <input type="text" id="calculator_input" title="${_('Calculator Input Field')}" tabindex="-1" />

                    <div class="help-wrapper">
                        <p class="sr" id="hint-instructions">${_('Use the arrow keys to navigate the tips or use the tab key to return to the calculator')}</p>
                        <a id="calculator_hint" href="#" role="button" aria-haspopup="true" tabindex="-1" aria-describedby="hint-instructions">${_("Hints")}</a>
                        <ul id="calculator_input_help" class="help" aria-activedescendant="hint-integers" role="tooltip" aria-hidden="true">
                          <li class="hint-item" id="hint-integers" tabindex="-1"><p><span class="bold">${_("Integers")}:</span> 2520</p></li>
                          <li class="hint-item" id="hint-decimals" tabindex="-1"><p><span class="bold">${_("Decimals")}:</span> 3.14 or .98</p></li>
                          <li class="hint-item" id="hint-scientific-notation" tabindex="-1"><p><span class="bold">${_("Scientific notation")}:</span> 1.2e-2 (=0.012), -4.4e+5 = -4.4e5 (=-440,000)</p></li>
                          <li class="hint-item" id="hint-appending-postfixes" tabindex="-1"><p><span class="bold">${_("Appending SI postfixes")}:</span> 2.25k (=2,250)</p></li>
                          <li class="hint-item" id="hint-supported-postfixes" tabindex="-1"><p><span class="bold">${_("Supported SI postfixes")}:</span></p>
                            <table class="calc-postfixes">
                              <tbody>
                                <tr>
                                  <td>%</td>
                                  <td>percent</td>
                                  <td>0.01 = 1e-2</td>
                                </tr>
                                <tr>
                                  <td>T</td>
                                  <td>tera</td>
                                  <td>1e12</td>
                                </tr>
                                <tr>
                                  <td>G</td>
                                  <td>giga</td>
                                  <td>1e9</td>
                                </tr>
                                <tr>
                                  <td>M</td>
                                  <td>mega</td>
                                  <td>1e6</td>
                                </tr>
                                <tr>
                                  <td>k</td>
                                  <td>kilo</td>
                                  <td>1000 = 1e3</td>
                                </tr>
                                <tr>
                                  <td>c</td>
                                  <td>centi</td>
                                  <td>0.01 = 1e-2</td>
                                </tr>
                                <tr>
                                  <td>m</td>
                                  <td>milli</td>
                                  <td>0.001 = 1e-3</td>
                                </tr>
                                <tr>
                                  <td>u</td>
                                  <td>micro</td>
                                  <td>1e-6</td>
                                </tr>
                                <tr>
                                  <td>n</td>
                                  <td>nano</td>
                                  <td>1e-9</td>
                                </tr>
                                <tr>
                                  <td>p</td>
                                  <td>pico</td>
                                  <td>1e-12</td>
                                </tr>
                              </tbody>
                            </table>
                          </li>
                          <li class="hint-item" id="hint-operators" tabindex="-1"><p><span class="bold">${_("Operators")}:</span> + - * / ^ and || (${_("parallel resistors function")})</p></li>
                          <li class="hint-item" id="hint-functions" tabindex="-1"><p><span class="bold">${_("Functions")}:</span> sin, cos, tan, sqrt, log10, log2, ln, arccos, arcsin, arctan, abs, fact/factorial</p></li>
                          <li class="hint-item" id="hint-constants" tabindex="-1"><p><span class="bold">${_("Constants")}:</span></p>
                            <table>
                              <tbody>
                              <tr>
                                <td>j</td>
                                <td>=</td>
                                <td>sqrt(-1)</td>
                              </tr>
                              <tr>
                                <td>e</td>
                                <td>=</td>
                                <td>${_("Euler's number")}</td>
                              </tr>
                              <tr>
                                <td>pi</td>
                                <td>=</td>
                                <td>${_("ratio of a circle's circumference to it's diameter")}</td>
                              </tr>
                              <tr>
                                <td>k</td>
                                <td>=</td>
                                <td>${_("Boltzmann constant")}</td>
                              </tr>
                              <tr>
                                <td>c</td>
                                <td>=</td>
                                <td>${_("speed of light")}</td>
                              </tr>
                              <tr>
                                <td>T</td>
                                <td>=</td>
                                <td>${_("freezing point of water in degrees Kelvin")}</td>
                              </tr>
                              <tr>
                                <td>q</td>
                                <td>=</td>
                                <td>${_("fundamental charge")}</td>
                              </tr>
                              </tbody>
                            </table>
                          </li>
                        </ul>
                    </div>
                </div>
                <input id="calculator_button" type="submit" title="${_('Calculate')}" value="=" aria-label="${_('Calculate')}" value="=" tabindex="-1" />
                <input type="text" id="calculator_output" title="${_('Calculator Output Field')}" readonly tabindex="-1" />
            </form>

        </div>
    </div>
% endif
