!!!
%html
  %head
    %title Anime Weekend Atlanta 2009
    %link{:href=>'stylesheets/screen.css', :media=>'screen, projection', :rel=>'stylesheet', :type=>'text/css'}
    <!--[if lt IE 8]>
    %link{:href=>'stylesheets/ie.css', :media=>'screen, projection', :rel=>'stylesheet', :type=>'text/css'}
    <![endif]-->
    %script{:src=>'javascripts/jquery.js', :type=>'text/javascript'}
  %body.photo
    .section
      %h1 September 17, 2009
      .photo.full
        %img.offset60-0{:src=>'images/photos/_MG_9860.jpg'}
        Arrival at Hartsfield-Jackson International Airport

    .section
      %h2 Hotel
      .photo.three-row
        %img.offset0-20{:src=>'images/photos/_MG_9886.jpg'}
        %img.offset20-40{:src=>'images/photos/_MG_9890.jpg'}
        %img.offset0-50{:src=>'images/photos/_MG_0081.jpg'}
        Chris' Yotsuba badassedness; Todd doing his bed thing; no step 3

    .section
      %h1 September 18, 2009
      .photo.two-one
        %img.offset50-60{:src=>'images/photos/_MG_0037.jpg'}
        %img.offset60-40{:src=>'images/photos/_MG_9910.jpg'}
        %img.offset0-20{:src=>'images/photos/_MG_9911.jpg'}
        Some amusing signs in the dealers' room and the Galleria

    .section
      .photo.full
        %img.offset20-20{:src=>'images/photos/_MG_9926.jpg'}
        Ashley and Darryl in the Artist's Alley

    .section
      .photo.three-col
        %img.offset50-50{:src=>'images/photos/_MG_9927.jpg'}
        %img.offset50-20{:src=>'images/photos/_MG_9973.jpg'}
        %img.offset60-30{:src=>'images/photos/_MG_9945.jpg'}
        Yarrr!

    .section
      %h2 Panels and Gameshows
      .photo.two-row
        %img.offset10-40{:src=>'images/photos/_MG_9932.jpg'}
        %img.offset10-50{:src=>'images/photos/_MG_9933.jpg'}
        Kareef, Frederik, Kevin at the AuN Studios panel; Kevin and his bear

    .section
      .photo.one-two
        %img.offset30-80{:src=>'images/photos/_MG_9969.jpg'}
        %img.offset30-50{:src=>'images/photos/_MG_9971.jpg'}
        %img.offset10-40{:src=>'images/photos/_MG_9972.jpg'}
        The editors' panel at the AMV Gameshow, and what it degraded into

    .section
      .photo.two-col
        %img.offset30-20{:src=>'images/photos/_MG_9975.jpg'}
        %img.offset60-20{:src=>'images/photos/_MG_9976.jpg'}
        Ellen meeting up with Kinsey

    .section
      %h1 September 19, 2009
      .photo.two-row
        %img.offset20-40{:src=>'images/photos/_MG_0030.jpg'}
        %img.offset0-40{:src=>'images/photos/_MG_0032.jpg'}
        Ileia and Adam's <q>Against the Grain</q> panel

    .section
      .photo.full
        %img.offset20-20{:src=>'images/photos/_MG_0007.jpg'}
        Meet and greet
    
    .section
      %h2 Cosplay Selections
      .photo.two-row
        %img.offset20-20{:src=>'images/photos/_MG_0050.jpg'}
        %img.offset40-30{:src=>'images/photos/_MG_0045.jpg'}
        A couple of cosplay shots, one from a large <dfn>Gurren Lagann</dfn> group
    
    .section
      .photo.two-col
        %img.offset10-30{:src=>'images/photos/_MG_0067.jpg'}
        %img.offset10-10{:src=>'images/photos/_MG_0068.jpg'}
        Best Lelouch cosplayer I saw

    .section
      %h2 Drunken Revelry
      .photo.two-col
        %img.offset60-90{:src=>'images/photos/_MG_0080.jpg'}
        %img.offset60-10{:src=>'images/photos/_MG_0082.jpg'}
        Todd demonstrates how you should be doing it; players in Circle of Death

    .section
      .photo.three-col
        %img.offset50-30{:src=>'images/photos/_MG_0086.jpg'}
        %img.offset30-60{:src=>'images/photos/_MG_0095.jpg'}
        %img.offset40-30{:src=>'images/photos/_MG_0088.jpg'}
        Everybody goes for Kit...even himself

    :javascript
      $(function () {
        var container = $('<table />'),
            headerRow = $('<tr />'),
            contentRow = $('<tr />'),
            body = $('body');

        $('.section > .photo:first-child').each(function () {
          $(this).parent().append('<h1 />');
        });

        $('.section h1, .section h2').wrap($('<td />').addClass('headerWrapper'));
        $('.section .photo').wrap($('<td />').addClass('photoWrapper'));

        $('.photo img').each(function () {
          var photo = $(this),
              holder = $('<div />').addClass('photo'),
              photoClasses = photo.attr('class').split(' ');

          holder.css({ 'background-image': 'url(' + photo.attr('src') + ')' });
          holder.append($('<a />').attr({ href: photo.attr('src') }));

          $.each(photoClasses, function () {
            holder.addClass(this);
          });

          photo.wrap(holder);
          photo.remove();
        });

        headerRow.append($('.headerWrapper'));
        contentRow.append($('.photoWrapper'));

        $('.section').remove();

        container.append(headerRow);
        container.append(contentRow);
        body.append(container);
      });