var active = '0';
$(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 fade_old = $('div#image' + active);
    var caption = $('> .caption', fade);
    var caption_old = $('> .caption', fade_old);
    var fotograf = $('> .fotograf', fade);
    var fotograf_old = $('> .fotograf', fade_old);
    var scale = $(this);

    fade.stop().fadeTo(1000, 1);
    caption.stop().show();
    fotograf.stop().show();
    if (number == 'm') {
      $('#map').show();
      map.checkResize();
      map.setCenter(new GLatLng(zeBreitengrad,zeLaengengrad), 14);
    }
    else if (number == 'p') {
      $('.scrollingHotSpotLeft').show();
      $('.scrollingHotSpotRight').show();
    }
    if (number != 'p') {
      $('.scrollingHotSpotLeft').hide();
      $('.scrollingHotSpotRight').hide();
    }
    if (active != number) {
      fade_old.stop().fadeTo(1000, 0);
      caption_old.stop().hide();
      fotograf_old.stop().hide();
      if (number != 'm') {
        $('#map').hide()
      }
      active = number;
    }
  });
  
  $("#imagebrowser").easySlider({
    controlsFade: true,
		nextId: "imagebrowsernext",
		prevId: "imagebrowserprev"
	});
	
});