$(document).ready(function() {

  var active = $('.mountains dt[_id].act').attr('_id');
  var ship = $('#ship');
  var DURATION = 350;

  getActiveDt = function() {
    return $('.mountains dt[_id=' +  active + ']');
  };

  getActiveX = function() {
    return getActiveDt().position().left;
  };

  ship.css('left', getActiveX() - 11 + 'px');
  ship.css('margin-left', $('.mountains dt[_id].act').css('margin-left'));
  $('.mountains dd').css('left', getActiveX() - 64 + 'px');
  $('.mountains dd[_id=' +  active + ']').css('margin-left', $('.mountains dt[_id].act').css('margin-left'));
  ship.show();
  $('.mountains dd').hide();
  $('.mountains dd[_id=' +  active + ']').show();

  $('.mountains dt[_id] a').click(function () {
    var old_dt = $('.mountains dt[_id=' + active + ']');
    var new_dt = $(this).parent();
    var new_a = $(this);
    var extra_offset = new_a.parent().css('margin-left');
    if (active == new_dt.attr('_id')) return false;
    old_active = active;
    active = new_dt.attr('_id');

    $('.mountains dt[_id] a').addClass('black dotted');
    $('.mountains dt[_id]').removeClass('act');
    $('.mountains dt[_id]').addClass('inact');

    ship.animate({ left: getActiveX() - 11 + 'px', marginLeft: extra_offset }, DURATION, function() {
      new_a.removeClass('black dotted');
      new_dt.addClass('act');
      new_dt.removeClass('inact');
    });

    $('.mountains dd[_id=' + old_active + ']').fadeOut(DURATION / 2, function() {
      $(this).removeClass('act');
      $(this).addClass('inact');
      $('.mountains dd[_id=' + active + ']').removeClass('inact');
      $('.mountains dd[_id=' + active + ']').css('margin-left', extra_offset);
      $('.mountains dd[_id=' + active + ']').addClass('act');
      $('.mountains dd[_id=' + active + ']').fadeIn(DURATION / 2);
    });
    $('.mountains dd').animate({ left: getActiveX() - 64 + 'px' }, DURATION);
    
    return false;
  });

});