var active = '0';
var interval = setInterval("fadeNextImage()", 3000);
var timeout;
$(document).ready(function () {
  // find the div.fade elements and hook the hover event
  $('li.imagebrowseritem').hover(function() {
    // on hovering over, find the element we want to fade *up*
    var number = $(this).attr('id').match(/imagebrowseritem([0-9mp]+)/)[1];
    var fade = $('div#image' + number);
    var link = $(' > .imagefadelink', fade);
    var fade_old = $('div#image' + active);
    var link_old = $(' > .imagefadelink', fade_old);

    clearInterval(interval);
    clearTimeout(timeout);
    fade.stop().fadeTo(1000, 1);
    link.stop().show();
    if (active != number) {
      fade_old.stop().fadeTo(1000, 0);
      link_old.stop().hide();
      active = number;
    }
    timeout = setTimeout("setFadeInterval()", 10000);
  });
  
  $('div.imagefade').hover(function() {
    clearInterval(interval);
    clearTimeout(timeout);
  }, function() {
    timeout = setTimeout("setFadeInterval()", 10000);
  });
});

function fadeNextImage() {
  var number = (active + 1) % 10;
  var fade = $('div#image' + number);
  var link = $(' > .imagefadelink', fade);
  var fade_old = $('div#image' + active);
  var link_old = $(' > .imagefadelink', fade_old);
  
  fade.stop().fadeTo(1000, 1);
  link.stop().show();
  if (active != number) {
    fade_old.stop().fadeTo(1000, 0);
    link_old.stop().hide();
    active = number;
  }
}

function setFadeInterval() {
  clearInterval(interval);
  interval = setInterval('fadeNextImage()', 3000);
}