info343/inc/calendar.php

<header>
   <h2>Calendar</h2>
   <nav class="week">
      <a class="prev week">&larr;</a>
      <span class="number">Week 3</span>
      <a class="next week">&rarr;</a>
   </nav>
   <script type="text/javascript" charset="utf-8">
      (function() {
         var s = parseInt($(document.body).css('font-size')) / 18;
         
         $('.page.calendar header nav.week a.week').each(function(i, link) {
            var $link = $(link).empty();
            
            $link.hover(
               function(event) {
                  $link.children('canvas.hover').show();
               },
               function(event) {
                  $link.children('canvas.hover').hide();
               }
            );
            
            $.each(['hover', 'active', 'disabled'], function(j, layer) {
               var canvas = document.createElement('canvas');
               canvas.className = layer;
               canvas.width = 51 * s;
               canvas.height = 13 * s;
               // c.lineCap = 'square';
               
               var ctx = canvas.getContext('2d');
               
               switch (layer) {
                  case 'active':
                     ctx.lineWidth = 1 * s;
                     ctx.strokeStyle = '#000000';
                     break;
                  case 'hover':
                     ctx.fillStyle = '#e63710';
                     break;
                  case 'disabled':
                     ctx.lineWidth = 1 * s;
                     ctx.strokeStyle = '#cccccc';
                     ctx.fillStyle = '#ffffff';
                     break;
               }
               
               c.beginPath();
               
               if (i == 0) {
                  ctx.moveTo( 0.5 * s, 12.5 * s);
                  ctx.lineTo(25.5 * s,  0.5 * s);
                  ctx.lineTo(50.5 * s, 12.5 * s);
                  ctx.lineTo( 0.5 * s, 12.5 * s);
               } else {
                  ctx.moveTo( 0.5 * s,  0.5 * s);
                  ctx.lineTo(50.5 * s,  0.5 * s);
                  ctx.lineTo(25.5 * s, 12.5 * s);
                  ctx.lineTo( 0.5 * s,  0.5 * s);
               }
               
               if (layer == 'hover' || layer == 'disabled') {
                  ctx.fill();
               }
               
               if (layer == 'active' || layer == 'disabled') {
                  ctx.stroke();
               }
               
               $link.append(canvas);
            });
         });
      })();
   </script>
   <nav class="show">
      <a class="showall" href="./full/">show entire quarter</a>
   </nav>
</header>
<div class="calendar wrapper"><table class="calendar"></table></div>

<section class="updates">
   <h3>Recent Updates</h3>
   <dl></dl>
</section>