function showTimelineItem (element){
  var item = $(element).parent();
  if (item.hasClass('visited') || item.hasClass('sticky')){
    // If visited: only need to change the visibility of the images (the title and photos div are already visible).
    item.not('.sticky').find('.title span').clearQueue().css('visibility', 'visible');
    item.find('.photos img').clearQueue().fadeIn('fast');
  }else{
    item.find('.title').clearQueue().fadeIn('fast');
    item.find('.photos').clearQueue().fadeIn('fast');
  }
  item.css('z-index', 10); // To make sure that the images are shown in front of the lines of the other timeline items.
}

function hideTimelineItem (element){
  var item = $(element).parent();
  if (item.hasClass('visited') || item.hasClass('sticky')){
    // If visited: only need to change the visibility of the images (the title and photos div should stay visible).
    item.not('.sticky').find('.title span').delay('fast').css('visibility', 'hidden');
    item.find('.photos img').delay('fast').fadeOut('fast');
  }else{
    item.find('.title').delay('fast').fadeOut('fast');
    item.find('.photos').delay('fast').fadeOut('fast');
  }
  item.css('z-index', 0); // Put the item back in the line.
}

function onEmailClick (){
  document.location.href = 'mailto:' + 'info' + '@' + 'evaklee' + '.' + 'nl';
}

function buildHistoryLines (){
  // 1. Build the line objects from the visited elements.
  // 2. Create the line images.

  // 1. Build the line objects from the visited elements.
  var h = jQuery('.visited');
  var lines = [];
  for (var i=0; true; i++){
    // Get hold of the items at i and i+1.
    // Note: Some items may have been visited more than once. They will contain 
    // multiple .history-N classnames, but will appear only once in the h array,
    // so we can't use the h.length property to determine how many items there are.
    // That's why we have to explicitly find i and i+i.
    var item = h.filter('.history-' + i);
    var nextItem = h.filter('.history-' + (i+1));

    // Create a new line definition (unless we're at the end of the history).
    if (nextItem.length != 0){
      lines[i] = {
        item1:  item,
        item2:  null,
        start:  {top: null, left: null},
        end:    {top: null, left: null},
        width:  null,
        height: null,
        image:  null
      };
    }

    // Set the end parameters of the previous line definition.
    if (i > 0){
      lines[i-1].item2  = item;
    }

    // Quit if there are no more other items.
    if (nextItem.length == 0){
      break;
    }
  }
  
  // 2. Create the line images.
  for (var i=0, line; (line=lines[i]); i++){
    // Calculate start and end positions.
    line.start  = line.item1.find('a.title').offset();
    line.end    = line.item2.find('a.title').offset();
    line.width  = Math.max(1, Math.abs(line.start.left - line.end.left));
    line.height = Math.max(1, Math.abs(line.start.top - line.end.top));
    // Create the image element
    // Determine the url.
    // Position it in the page.
    line.image  = jQuery('<img class="diagonal" />').appendTo('body');
    var position = {top: null, left: null};
    var urlBase = settings['basepath.website'] + '/media/diagonal.php?width=' + line.width + '&height=' + line.height + '&start=';
    if (line.start.left < line.end.left){
      position.left = line.start.left;
      if (line.start.top < line.end.top){
        position.top = line.start.top;
        line.image.attr('src', urlBase + 'lefttop');
      }else{
        position.top = line.end.top;
        line.image.attr('src', urlBase + 'leftbottom');
      }
    }else{
      position.left = line.end.left;
      if (line.start.top < line.end.top){
        position.top = line.start.top;
        line.image.attr('src', urlBase + 'leftbottom');
      }else{
        position.top = line.end.top;
        line.image.attr('src', urlBase + 'lefttop');
      }
    }
    position.top = position.top + line.item1.find('a.title').innerHeight();
    line.image.attr('width', line.width);
    line.image.attr('height', line.height);
    line.image.offset(position);
  }
}

function positionButtons (){
  // IE 8 and lower have the correct scrollWidth on the html tag instead of the 
  // body. Don't know why. Maybe it's an effect of our CSS, maybe not.
  var body = (jQuery.browser.msie) ? jQuery('html') : jQuery('body');
  if (body[0].scrollWidth > body.innerWidth()){
    jQuery('.more-button').fadeIn('slow');
  }else{
    jQuery('.more-button').fadeOut('slow');
  }
}

function initContentPage (){
  jQuery(window).load(positionButtons);
  jQuery(document).click(onBodyClick);
}

function onBodyClick (event){
  // Go (back) to the site's default page if we click outside the content region 
  // (and if we're not clicking on a link).
  if (jQuery(event.target).parents('#content-chain').length == 0 && !jQuery(event.target).parents().andSelf().is('a')){
    document.location.href = settings['website.defaultpage'];
  }
}