$(document).ready (function () {
  var slide_out = function () {
    $(this).stop (false, true).css ({position: 'absolute'}).
            animate ({left: '-10px', opacity: 'hide'}, {complete: function () {
                                                          $(this).css ({position: 'relative', left: '-10px'})
                                                        }})
  }

  var slide_in = function () {
    $(this).stop (false, true).css ({left: '10px', position: 'absolute'}).
            animate ({left: '0px', opacity: 'show'}, {complete: function () {
                                                        $(this).css ({position: 'relative', left: '0px'})
                                                      }})
  }

  var fade_out = function () {$(this).fadeOut ()}
  var fade_in  = function () {$(this).fadeIn  ()}

  var show = function () {$(this).show ().css ({position: 'relative'})}
  var hide = function () {$(this).hide ().css ({position: 'relative'})}

  $('.projects-link').replaceWith ("<p><a class='strong' href='#section=projects'>&lt;&lt;&nbsp;All Projects</a></p>")

  $('#sidebar > div').
    hover (function () {$(this).addClass ('hover')},
           function () {$(this).removeClass ('hover')}).
    setupTableOfContents ({
      contentActivator:           slide_in,
      contentDeactivator:         slide_out,
      firstRunContentActivator:   show,
      firstRunContentDeactivator: hide
    })

  var setup_section = function (section_name) {
    $('#' + section_name + '-navigation > div').
      hover (function () {$(this).addClass ('hover')},
             function () {$(this).removeClass ('hover')}).
      setupTableOfContents ({
        pathToContent:  '#' + section_name + '-content > div',
        pathToTitle:    'h2',
        variant:        'page',
        defaultOptions: {section: section_name},

        contentActivator:           slide_in,
        contentDeactivator:         slide_out,
        firstRunContentActivator:   show,
        firstRunContentDeactivator: hide
      })
  }

  setup_section ('cheloniidae')
  setup_section ('universal-translator')
  setup_section ('jquery-plugins')
  setup_section ('self-modifying-perl')

  // Blog loading
  var blog_index     = null
  var blog_posts     = []
  var blocks_to_load = 0

  $('#blog-navigation').hide ()
  $.getJSON ('blog-data/index', function (data) {
    blog_index = data
    load_individual_entries ()
  })

  var load_individual_entries = function () {
    $.each (blog_index.blocks, function () {
      ++blocks_to_load
      $('#blog-loading-indicator').prepend ('<span id="blog-loading-progress-' + blocks_to_load + '" class="inactive">.</span>')
      $.getJSON ('blog-data/' + this, function (block_data) {
        blog_posts = blog_posts.concat (block_data)
        $('#blog-loading-progress-' + blocks_to_load).removeClass ('inactive').addClass ('active')
        --blocks_to_load || window.setTimeout (setup_blog_menu, 100)
      })
    })
  }

  var post_link = function (post_data) {
    return $('<div>' + post_data['real-title'] + '</div>')
  }

  var post_content = function (post_data, last_post) {
    var header      = '<h1>' + post_data['real-title'] + '</h1>';
    var pre_content = '<div><a class="strong" href="#section=blog&post=blog">All Posts</a> ' +
                        (last_post ? ' | <a href="#section=blog&post=' + last_post.title + '">' + last_post['real-title'] + ' &gt;&gt;</a>' : '') +
                        '</div>';
    return $('<div>' + header + pre_content + post_data['compiled-content'] + '</div>').hide ()
  }

  var setup_blog_menu = function () {
    // First, sort blog posts by date.
    blog_posts = blog_posts.sort (function (p1, p2) {return p1.date < p2.date ? -1 : 1})

    var last_post = null
    var post_nodes = []
    var post_links = []
    $.each (blog_posts, function () {
      post_links.push (post_link    (this))
      post_nodes.push (post_content (this, last_post))
      last_post = this
    })

    $('#blog-loading-indicator').remove ()

    $.each (post_links.reverse (), function () {this.appendTo ('#blog-navigation')})
    $.each (post_nodes.reverse (), function () {this.appendTo ('#blog-entries')})

    $('#blog-navigation > div').
      hover (function () {$(this).addClass ('hover')},
             function () {$(this).removeClass ('hover')}).
      setupTableOfContents ({
        pathToContent:   '#blog-entries > div',
        pathToTitle:     'h1',
        variant:         'post',
        defaultOptions:  {section: 'blog'},
        defaultItemPath: '#content-section-blog-post-' + blog_posts[blog_posts.length - 1].title,

        contentActivator:           slide_in,
        contentDeactivator:         slide_out,
        firstRunContentActivator:   fade_in,
        firstRunContentDeactivator: hide
      })

    // Now enqueue images to start loading.
    $('.delayed-image > span').each (function () {
      var image_source   = $(this).attr ('image-src')
      var alternate_text = $(this).attr ('alt')
      var class_name     = $(this).attr ('class')
      $(this).replaceWith ('<img src="' + image_source + '" alt="' + alternate_text + '" class="' + class_name + '"></img>')
    })
  }
})