window.addEvent("domready", load);

var IMG = 'img';
var CAPTION = 'cap';

var slider;

function load() {
  for (var id = 1; id <= 2; id++) {
    var cap = $('cap' + id);
    cap.setStyle('display', 'block');
    cap.setStyle('margin-top', - cap.offsetHeight + 'px');
  }

  var drawer = $('stats_drawer');
  drawer.setStyle('display', 'block');
  drawer.setStyle('margin-top', - drawer.offsetHeight + 'px');

  var image = $('img2');
  image.addEvent('mouseenter', function() { toggleCaption(2, 'in'); });
  image.addEvent('mouseout', function() { toggleCaption(2, 'out'); });
  image = $('img1');
  image.addEvent('mouseenter', function() { toggleCaption(1, 'in'); });
  image.addEvent('mouseout', function() { toggleCaption(1, 'out'); });

  slider = new Slider(
      $('slider'),
      $('knob'),
      {snap: true, steps: 4, range: [1, 4]});
  slider.set(2);
}

function toggleStats() {
  var stats = $('stats_drawer');
  stats.set('tween', {duration: 500});
  if (stats.style.marginTop == '0px') {
    stats.tween('margin-top', - stats.offsetHeight + 'px');
  } else { 
    stats.tween('margin-top', '0px');
  }
}

function toggleCaption(id, how) {
  var cap = $('cap' + id);
  cap.set('tween', {duration: 200});
  if (how == 'in') {
    cap.tween('margin-top', '10px');
  } else {
    cap.tween('margin-top', - cap.offsetHeight + 'px');
  }
}

function toggleHighlight(checkbox) {
  var value = checkbox.value;
  var citations = document.getElementsByTagName('cite');
  var checked = checkbox.checked;
  for (var i = 0, citation; citation = citations[i++];) {
    if (checked && citation.className == value) {
      citation.className = citation.className + " highlight";
    } else if (citation.className == value + " highlight") {
      citation.className = value;
    }
  }
}