$(document).ready(function()
{
  var contentContainer = $("#oe2_slider .content_slider-body");
  var contentElements = contentContainer.children("div");
  $("#oe2_slider").addClass("content_slider-ready");
  contentElements.siblings(":first-child").addClass("content_slider-current");

  $("#oe2_slider")
     .before('<img id="oe2_slider-up" src="/bilder/ref_up.gif" width="20" height="10" alt="vorherige Referenz">')
     .after('<img id="oe2_slider-down" src="/bilder/ref_down.gif" width="20" height="10" alt="nächste Referenz">');

  $("#oe2_slider-up").click(function ()
  {
    var currentElement = $("#oe2_slider .content_slider-current");
    var prevElement = currentElement.index() - 1;
    if (prevElement < 0)
    {
      prevElement = contentElements.length - 2;
      var elemHeight = $("#oe2_slider .content_slider-current").siblings(":eq(" + prevElement + ")").outerHeight(true) + 1;
      elemHeight = contentContainer.outerHeight(true) - elemHeight + contentElements.length
    }
    else
      var elemHeight = -$("#oe2_slider .content_slider-current").siblings(":eq(" + prevElement + ")").outerHeight(true) - 1;

    $("#oe2_slider .content_slider-body").animate({ top:'-=' + elemHeight })
     .children(".content_slider-current").toggleClass("content_slider-current").siblings(":eq(" + (prevElement) + ")").toggleClass("content_slider-current");
  })

  $("#oe2_slider-down").click(function ()
  {
    var currentElement = $("#oe2_slider .content_slider-current");
    var elemHeight = currentElement.outerHeight(true) + 1;
    var nextElement = currentElement.index();
    if (nextElement == (contentElements.length - 1))
    {
      nextElement = 0;
      elemHeight = -(contentContainer.outerHeight(true) - elemHeight) - contentElements.length; //
    }
    $("#oe2_slider .content_slider-body").animate({ top:'-=' + elemHeight })
     .children(".content_slider-current").toggleClass("content_slider-current").siblings(":eq(" + nextElement + ")").toggleClass("content_slider-current");
  })

});