function scroller(prev) {
  //get the current selected item (with selected class), if none was found, get the first item
  var current_image = $('#gallery li.selected').length ? $('#gallery li.selected') : $('#gallery li:first');
  var current_locator = $('#picnav li.selected').length ? $('#picnav li.selected') : $('#picnav li:first');

  //if prev is set to 1 (previous item)
  if (prev) {
    //get previous sibling
    var next_image = (current_image.prev().length) ? current_image.prev() : $('#gallery li:last');
    var next_locator = (current_locator.prev().length) ? current_locator.prev() : $('#picnav li:last');
    //if prev is set to 0 (next item)
  } else {
    //get next sibling
    var next_image = (current_image.next().length) ? current_image.next() : $('#gallery li:first');
    var next_locator = (current_locator.next().length) ? current_locator.next() : $('#picnav li:first');
  }

  //clear the selected class
  $('#gallery li, #picnav li').removeClass('selected');

  //reassign the selected class to current items
  next_image.addClass('selected');
  next_locator.addClass('selected');

  //scroll the items
  $('#mask-gallery').scrollTo(next_image, 800, {easing:'easeOutCirc'});
}

function slider() {
	// code vor project-page

    // calculation of containers
    $('#mask-gallery, #gallery li').width($('#slider').width());	
    $('#gallery').width($('#slider').width() * $('#gallery li').length);
    $('#mask-gallery, #gallery li').height($('#slider').height());
    
    // set the first container to be active
    $('#gallery li:first, #picnav li:first').addClass('selected');
    
    // settings for scroller
    var speed = 3500;
    var run = setInterval('scroller(0)', speed);
    var slideshowstate = 0;
    
    // pause it on default
    clearInterval(run);
    
    // start/stop slideshow
    $('a.slideshow').click(function () {
      // if slideshow is not running, start it
      if (slideshowstate == 0) {
        run = setInterval('scroller(0)', speed);
        slideshowstate = 1;
        // add selected class
        $(this).addClass("slideshows");
      } else { // if slideshow is running, stop it
        clearInterval(run);
        slideshowstate = 0;
        // remove selected class
        $(this).removeClass("slideshows");
      }
      return false;
    });
    
    // get the list of navelements in an array
    var navelements = $('#picnav li');
    // loop through the navelements
    $.each(navelements,function(index, item) {
      $(item).click(function(){
        // only animate if image/box is not the active one
        if (!$('#mask-gallery li:eq('+index+')').hasClass("selected")) {
          // get the correct index of the corresponding image/box
          var image = $('#mask-gallery li:eq('+index+')');
          
          //remove all selected classes
          $('#mask-gallery li,  #picnav li').removeClass("selected");
          // set the selected class to the current image/excerpt/nav
          $('#mask-gallery li:eq('+index+')').addClass("selected");
          $(item).addClass("selected");
          // scroll image/excerpt
          $('#mask-gallery').scrollTo(image, 800, {easing:'easeOutCirc'});
        };
        return false;
      });

    });
	 $("ul#picnav").show('fast');

};