{% extends "pycon/main.html" %}
{% block main_title %}{{title}}{% endblock %}
{% block main_csslinks %}{% load appmedia %}{% load adminmedia %}
{# <script type="text/javascript"> var djConfig = {isDebug: true } </script> #}
<script type="text/javascript" src="{% app_media_prefix "dojo" %}dojo.js"></script>
<script type="text/javascript" src="{% app_media_prefix "schedule" %}js/timetables.js"></script>
{# <script type="text/javascript" src="{% app_media_prefix "dojo" %}src/io/IframeIO.js"></script> #}

<style type="text/css">
{% spaceless %}{% load propmgr %}
    {% var cempty    = '#CCCCCC' %}
    {% var chilight  = '#3C4B7B' %}
    {% var cbreak    = '#eCFFFF' %}
    {% var cevent30  = '#FFFCC9' %}  {% var sevent30  = '#FFFF66' %}
    {% var cevent45  = '#FFDDAA' %}  {% var sevent45  = '#FF9966' %}
    {% var cplenary  = '#dCdCFF' %}  {% var splenary  = '#993399' %}
    {% var cmeeting  = '#CCFFCC' %}  {% var smeeting  = '#66FF66' %}
    {% var ctutorial = '#BBEEFF' %}  {% var stutorial = '#33FFCC' %}
    {% var csocial   = '#FFDDFF' %}  {% var ssocial   = '#FF99FF' %}
{% endspaceless %}
table.timetable { border-collapse: separate; }
.timetable { margin: 0px 0px 0px 0px; text-align: center; }
.timetable thead {}
.timetable th { border: 2px solid {{cempty}};
                padding-left: 3px;
                padding-right: 3px;
                border-top: 0px;
                border-left: 0px;
                border-bottom: 1px solid {{cempty}}; }
.timetable tr {}
.timetable td { border: 2px solid {{cempty}};
                padding-left: 3px;
                padding-right: 3px;
                vertical-align: top;}

.timetable .time {    
                       font-weight: bold;
                       border-top: 1px solid {{cempty}};
                       border-bottom: 1px solid {{cempty}};
                       border-left: 0px;
                       background-color: #FFFFFF; }
.timetable .time:hover {
                       font-weight: bold;
                       border-top: 1px solid {{cempty}};
                       border-bottom: 1px solid {{cempty}};
                       border-right-color: {{cempty}};
                       border-left: 0px;
                       background-color: #FFFFFF; }
                       
.timetable .legend   { text-align: center; border: 0px; border-top: 1px solid {{cempty}}; background-color: #FFFFFF; padding-top: 4px}
.timetable .empty    { background-color: {{cempty}}; border: 2px solid {{cempty}}; padding: 2px;}
.timetable td.empty:hover  { border: 2px solid {{cempty}}; }

.timetable td.legend:hover { text-align: center; border: 0px; border-top: 1px solid {{cempty}}; background-color: #FFFFFF; }
.timetable .legend span { white-space: nowrap; padding-left: 3px; padding-right: 3px; }

.timetable .eventinfo:hover { color: #000000; text-decoration: underline; /*font-weight: bold;*/ }

.timetable .break       { border-bottom-color: {{cbreak}}; border-left-color: {{cbreak}}; background-color: {{cbreak}}; }
.timetable td.break:hover { border-bottom-color: {{cbreak}}; border-left-color: {{cbreak}};
                       border-top-color: {{cempty}}; border-right-color: {{cempty}}; }


.timetable .event30  { border-bottom-color: {{cevent30}};  border-left-color: {{cevent30}};  background-color: {{cevent30}}; }
.timetable .event45  { border-bottom-color: {{cevent45}};  border-left-color: {{cevent45}};  background-color: {{cevent45}}; }
.timetable .plenary  { border-bottom-color: {{cplenary}};  border-left-color: {{cplenary}};  background-color: {{cplenary}}; }
.timetable .meeting  { border-bottom-color: {{cmeeting}};  border-left-color: {{cmeeting}};  background-color: {{cmeeting}}; }
.timetable .tutorial { border-bottom-color: {{ctutorial}}; border-left-color: {{ctutorial}}; background-color: {{ctutorial}}; }
.timetable .social   { border-bottom-color: {{csocial}};   border-left-color: {{csocial}};   background-color: {{csocial}}; }

.timetable .s_event30  { border-bottom-color: {{sevent30}};  border-left-color: {{sevent30}};  background-color: {{sevent30}}; }
.timetable .s_event45  { border-bottom-color: {{sevent45}};  border-left-color: {{sevent45}};  background-color: {{sevent45}}; }
.timetable .s_plenary  { border-bottom-color: {{splenary}};  border-left-color: {{splenary}};  background-color: {{splenary}}; color: #FFFFFF; }
.timetable .s_meeting  { border-bottom-color: {{smeeting}};  border-left-color: {{smeeting}};  background-color: {{smeeting}}; }
.timetable .s_tutorial { border-bottom-color: {{stutorial}}; border-left-color: {{stutorial}}; background-color: {{stutorial}}; }
.timetable .s_social   { border-bottom-color: {{ssocial}};   border-left-color: {{ssocial}};   background-color: {{ssocial}}; }

.timetable td:hover { border: 2px solid; border-color: {{chilight}}; border-left-color: {{chilight}}; border-bottom-color: {{chilight}};}
.timetable .s_plenary .eventinfo:hover { color: #FFFFFF; text-decoration: underline; /*font-weight: bold;*/ }

body .dojoTooltip a:link    {color: #0000FF; text-decoration: none;}
body .dojoTooltip a:visited {color: #0000FF; text-decoration: none;}
body .dojoTooltip a:hover   {color: #000000; text-decoration: underline;}
body .dojoTooltip a:active  {color: #0000FF; text-decoration: none;}
body .dojoTooltip { color: {{chilight}}; border: solid 2px {{chilight}}; padding: 4px; background-color: {{cevent30}}; }
body .break    {background-color: {{cbreak}};}
body .event45  {background-color: {{cevent45}};}
body .meeting  {background-color: {{cmeeting}};}
body .tutorial {background-color: {{ctutorial}};}
body .social   {background-color: {{csocial}};}
body .plenary  {background-color: {{cplenary}};}

body .tooltip_attach { padding-top: 1px; padding-bottom: 3px; }
body .tooltip_attach:hover {padding-top: 0px; padding-bottom: 2px; border-top: solid 1px {{chilight}}; border-bottom: solid 1px  {{chilight}}; }
body .tooltip_attach .label { font-size: smaller; cursor: pointer; padding-bottom: 1px; }
body .tooltip_attach .label_closed { font-size: smaller; cursor: pointer; padding-bottom: 1px; }
body .tooltip_attach .label_open { font-size: smaller; cursor: pointer; padding-bottom: 0px; border-bottom: dotted 1px {{chilight}};}
body .tooltip_attach .content { padding-bottom 2px; padding-top: 3px; padding-left: 1em; }
.attached_files { font-size: smaller; }
.attached_files caption { font-style: italics; font-size: smaller; border-bottom: dotted 1px {{chilight}};}
.attached_files th { text-align: left; border-bottom: solid 1px  {{chilight}}; }
.attached_files .last td { border-bottom: solid 1px  {{chilight}}; }
div.success {display:block; padding:4px 5px 4px 20px; margin:0 0 3px 0; font-size: smaller;
             background:transparent url({% app_media_prefix 'schedule' %}img/12-em-check.png) 5px .3em no-repeat;}
div.error {display:block; padding:4px 5px 4px 22px; margin:0 0 3px 0; font-size: smaller;
           background:transparent url({% app_media_prefix 'schedule' %}img/16-message-warn.png) 5px .3em no-repeat;}
label.required { width: 5.5em !important; float:left;}
p.help { font-size: smaller; padding-left: 6.7em; width: 27em;}
.errorlist li { display:block; padding:4px 5px 4px 25px;
                margin:0 0 3px 0; border:1px solid red; color:white;
                background:red url({% admin_media_prefix %}img/admin/icon_alert.gif) 5px .3em no-repeat; }

.timetable td.tutorial_h1   { border-color: {{chilight}}; border-bottom-color: {{ctutorial}}; background-color: {{ctutorial}}; }
.timetable td.tutorial_h2   { border-color: {{chilight}}; border-top-color:    {{cempty}};    background-color: {{ctutorial}}; }
.timetable td.s_tutorial_h1 { border-color: {{chilight}}; border-bottom-color: {{stutorial}}; background-color: {{stutorial}}; }
.timetable td.s_tutorial_h2 { border-color: {{chilight}}; border-top-color:    {{cempty}};    background-color: {{stutorial}}; }

.icon_hidden { display: none; }
.icon_author { display: inline; float: right;}
.icon_schair { display: inline; float: right;}
.icon_sync   { display: inline; }
.hidden  { display: none; }

#advert { font-weight: bold; font-size: larger; }
#talklink { font-weight: bold;  }
#print { float: right; }
</style>
{% endblock %}
{% block main_body %}
{% block content %}
<script type="text/javascript">
    <!--
    cookie_data_load( "{{ cookie.name }}", "{{ cookie.path }}", {{ cookie.expire }}, {% if user.is_anonymous %}0{% else %}1{% endif %});
    // -->
</script>
<div id='print'><span style="font-weight: bold; font-size: larger;">NEW! -> </span>
<a id='printlink'><img src="{% app_media_prefix "schedule" %}img/printer.png"/> Print Options</a></div>
<div dojoType="tooltip" connectId="printlink" toggle="explode" class="hidden">
<form action="print/" method="post" id='print_form' target='_blank'>
    <fieldset>
        <legend>Tables</legend>
        {% for table in tables %}
        <input type="checkbox" name="tables" value="{{table.name}}" checked /> {{table.title|escape}}<br/>
        {% endfor %}
    </fieldset>
    <fieldset>
        <legend>Options</legend>
        <input type="checkbox" name="options" value="floorplan" checked /> Floorplan<br/>
        <input type="checkbox" name="options" value="color" checked /> Color<br/>
        <input type="checkbox" name="options" value="selected" checked /> Mark Selected<br/>
        <input type="checkbox" name="options" value="pagebreak" checked /> Smart Page Breaks<br/>
    </fieldset>
    <span style="padding-left: 5em;"><input type="submit" value="Preview & Print"/></span>
</form>
</div>
<div id='feeds'>
Calendar Feed
<sup><a href="help" target="_new" style="text-decoration:none;" name="help" onclick="window.open(this.href, 'Time Table Help', 'height=500,width=400,resizable=yes,scrollbars=yes').focus(); return false;"><img src="{% admin_media_prefix %}img/admin/icon-unknown.gif" alt='help' title='help'/></a></sup>
: All Events (<a href="webcal://{{ request.META.HTTP_HOST}}{{ request.path }}ical/" rel="nofollow">iCal</a> |
  <a href="ical/" rel="nofollow">Google/Outlook</a>) Selected Events (
  <a href="webcal:ical/{{sessionid}}{% if not user.is_anonymous %}g{{user.id}}{% endif %}/" rel="nofollow">iCal</a> |
  <a href="//{{ request.META.HTTP_HOST}}{{ request.path }}ical/{{sessionid}}{% if not user.is_anonymous %}g{{user.id}}{% endif %}/" rel="nofollow">Google/Outlook</a>)
<div/><br/>
{% load features %}
{% if "ViewAcceptedProposals"|feature_is_enabled %}
<div id='talklink'>
    Also see the list of <a href="../talks/">Accepted Talks</a> by category{% if "LinkZopeTalkArchive"|feature_is_enabled %}
    and the <a href='{{settings.ZOPE_ARCHIVE_URL}}'>Talk Recordings</a>{% endif %}.
</div><br/>
{% endif %}
<div id='advert'>
    Click on events to create a personal schedule. Organizers can use this information to help estimate interest in events.<br/>
    Users with PyCon login accounts have extra features. See the
    <a href="help" target="_new" style="text-decoration:none;" name="help" onclick="window.open(this.href, 'Time Table Help', 'height=500,width=400,resizable=yes,scrollbars=yes').focus(); return false;">help<sup><img src="{% admin_media_prefix %}img/admin/icon-unknown.gif" alt='help' title='help'/></sup></a>
    for more information.
</div><span id='message'></span>
<br/>
{% for table in tables %}
<br/>
<table class='timetable' cellspacing='0'>
    <caption><h2>{{ table.title|escape }}<sup><a href="help" target="_new" style="text-decoration:none;" name="help" onclick="window.open(this.href, 'Time Table Help', 'height=500,width=400,resizable=yes,scrollbars=yes').focus(); return false;"><img src="{% admin_media_prefix %}img/admin/icon-unknown.gif" alt='help' title='help'/></a></sup>
</h2></caption>
    <thead><tr><th class='room'><span class='hidden'>.</span>{% if not user.is_anonymous %}
            <a href="javascript:document.location.reload();" class="icon_hidden" name="syncsave"><img src="{% app_media_prefix "schedule" %}img/refresh.gif" id="syncsaveid{{table.id}}" alt='re-sync with server' title='re-sync with server'/></a>
            <a href="javascript:cookie_delete_and_reload();" class="icon_hidden" name="syncundo" onclick="cookie_delete_and_reload();"><img src="{% app_media_prefix "schedule" %}img/undo.gif" id="syncrevertid{{table.id}}" alt='revert changes' title='revert changes'/></a>
            {% endif %}
            </th>
    {% for room in table.header %}<th class='room'>{{ room|escape }}</th>{% endfor %}
    </tr></thead>
    <tbody>
    {% for row in table.cells %}<tr>{% for cell in row %}
        {% spaceless %}<td {{ cell.span }} {{ cell.css_class }} {{ cell.css_id }} {{ cell.css_name }} {{ cell.js_events }}>
        {% if forloop.first and cell.is_time %}{{ cell.time|time:"h:iA"|lower }}{% else %}
        {% if cell.event %}
        <span id='ICOS{{ cell.sched.id }}' name="ICO{{ cell.event.id }}"
            {% if not user.is_anonymous and cell.sched.session_chair.id %}
            class='icon_schair'>
            <sub><img src="{% app_media_prefix "schedule" %}img/16-tag-hot.png" alt="{{cell.sched.session_chair}}" title="{{cell.sched.session_chair}}"/></sub>
            {% else %}class='hidden'>{% endif %}</span>
        <span class="eventinfo" id='TT{{ cell.sched.id }}'>{{ cell.event|escape }}</span>
        {% else %}<span class='hidden'>.</span>
        {% endif %}{% endif %} 
        </td>{% endspaceless %}{% endfor %}
    </tr>{% endfor %}
    </tbody>
    <tfoot><tr><td colspan='{{ table.header|length|add:1 }}' class='legend'>{% spaceless %}
      <span class='event30'>30min talk</span>      {# #<span class='s_event30'>selected</span>  # #}
      <span class='event45'>45min talk</span>      {# #<span class='s_event45'>selected</span>  # #}
      <span class='plenary'>plenary event</span>   {# #<span class='s_plenary'>selected</span>  # #}
      <span class='meeting'>meeting/etc.</span>    {# #<span class='s_meeting'>selected</span>  # #}
      <span class='social'>social event</span>     {# #<span class='s_social'>selected</span>   # #}
      <span class='tutorial'>tutorial</span>       {# #<span class='s_tutorial'>selected</span> # #}
      <span class='break'>break</span>
      <span style="border: 2px solid; border-color: #3C4B7B;">click to (de)select</span>
      <span style="color: #000000; text-decoration: underline; /*font-weight: bold;*/ border: 2px solid; border-color: #3C4B7B;">hover for info</span>
      {% if not user.is_anonymous %}
      <span><img src="{% app_media_prefix "schedule" %}img/16-member.png" alt="presenter" title="presenter"/>presenting</span>
      <span><img src="{% app_media_prefix "schedule" %}img/16-tag-pencil.png" alt="session chair" title="session chair"/>session chair</span>
      <span><img src="{% app_media_prefix "schedule" %}img/refresh.gif" alt='re-sync with server' title='re-sync with server'/> re-sync</span>
      <span><img src="{% app_media_prefix "schedule" %}img/undo.gif" alt='revert changes' title='revert changes'/> revert</span>
      {% endif %}
    </td></tr></tfoot>{% endspaceless %}
</table>

    <span dojoType="tooltip" connectId="syncsaveid{{table.id}}" toggle="fade" class="hidden">
        <h3>Save/Sync with server</h3>
        This is only usefull if using multiple browsers or multiple machines.<br/>
        Re-loading this page will do the same thing.<br/>
        Make sure to sync before logging out.</span>
    <span dojoType="tooltip" connectId="syncrevertid{{table.id}}" toggle="fade" class="hidden">
        <h3>Undo Changes</h3>
        This is only usefull if using multiple browsers or multiple machines.<br/>
        This will delete the local cookie and reload the page.<br/>
        Make sure to sync before logging out.</span>
    {% for row in table.cells %}{% for cell in row %}{% if cell.event %}
    <span dojoType="tooltip" connectId="TT{{ cell.sched.id }}" href="tooltip/{{ cell.event.id }}/" executeScripts="true" toggle="fade" {{ cell.css_class }}></span>{% endif %}{% endfor %}{% endfor %}

{% endfor %}

<script type="text/javascript">
    <!--
    init_selected_from_cookie('{% app_media_prefix "schedule" %}');
    // -->
</script>

{% endblock %}
{% endblock %}