$(function() {
  $.ajax({
    url: 'xml/midi.xml',
    dataType: 'html',
    success: function(data) {
      data = $('<div></div>').append(data);
      var page_title = data.find('h1').text();
      var content_title = data.find('h2').text();
      var content_copy = data.find('div').children().clone();
      
      var featured_image = data.find('img').eq(0).clone();
      var featured_image_caption = (featured_image.attr('caption') === 'true') ? '<p class="image-caption">' + featured_image.attr('alt') + '</p>' : '';
      
      var html = $('<div class="content"></div>');
      
      html.append('<h2>' + page_title + '</h2><p id="tablehopper"><a href="http://www.tablehopper.com/">tablehopper</a></p>');
      html.append('<div id="image-featured" class="image">' + featured_image_caption + '</div>');
      html.find('#image-featured').prepend(featured_image);
      html.append('<h3>' + content_title + '</h3>');
      html.append('<div id="content-main"></div>').find('#content-main').append(content_copy);
      html.append('<p id="signup-updates"><a href="mailto:request@concreteworks.com?subject=Request%20to%20Subscribe%20to%20Concreteworks%20Newsletter">Subscribe to the Concreteworks Monthly for news, events, special offers and more!</a></p>');
      
      html.append('<div class="images"></div>');
      data.find('img').not(':first').each(function() {
        var caption = ($(this).attr('caption') === 'true') ? '<p class="image-caption">' + $(this).attr('alt') + '</p>' : '';
        html.find('.images').append('<div class="image">' + caption + '</div>');
        html.find('.image:last').prepend($(this).clone());
      });
      
      $('#loading').hide();
      $('#content').prepend(html.html());
    }
  });
});