// Funktion zum Erfassen aller Elemente, die eine eigene Scrollbar bekommen sollen
Event.observe (window, 'load', function () {
  $A(document.getElementsByClassName ('scroll')).each ( function (frame) {
    new scrollFrame (frame, {  } );
    } );
  $A(document.getElementsByClassName ('scroll_horizontal')).each ( function (frame) {
    new scrollFrame (frame, { axisHori : true, posTop : true } );
    } );
  } );

// scrollFrame Klasse
var scrollFrame = Class.create({
	
  initialize: function(elem, opts) {

    var t = this;
    this.vert = opts['axisVert'] ? true : false;
    this.hori = opts['axisHori'] ? true : false;
    if (!this.vert && !this.hori) this.vert = true;

    this.frame = elem;

// check ob scrollbalken nštig
    if (this.frame.scrollHeight <= this.frame.offsetHeight) return true;

// Scrollbalken vom Browser entfernen
    this.frame.style.overflow = 'hidden';

// alle Elemente in einen Extra-Container
    this.con = document.createElement('div');
    this.con.className="scrollHelper";
    $A(this.frame.childNodes).each ( function (child) {
      t.con.appendChild (child);
      } );
    this.con.style.overflow = 'hidden';
    

// Scrollbalken erstellen lassen
    if (this.vert) {
      var vertBar = this.create ('vert');
      var temp = opts['posLeft'] ? 'left' : 'right';
      vertBar.style.cssFloat = temp;
      vertBar.style.styleFloat = temp;
      }
    if (this.hori) var horiBar = this.create ('hori');

// Container und Scrollbalken einfŸgen
    if (horiBar && opts['posTop']) this.frame.appendChild (horiBar);
    if (vertBar) this.frame.appendChild (vertBar);
    this.frame.appendChild (this.con);
    if (horiBar && opts['posBottom']) this.frame.appendChild (horiBar);

    },

  create : function (axis) {
    var t = this;

    var bar = document.createElement('div');

    var arrow1 = document.createElement('img');
    arrow1.style.cursor = 'pointer';
    arrow1.style.height = '13px';
    arrow1.style.width = '11px';
    arrow1.style.border = '0px solid black';
    arrow1.style.margin = '0px auto';
    arrow1.style.padding = '0px';
    arrow1.setAttribute('border', '0');
    bar.appendChild (arrow1);

    var innerBar = document.createElement ('div');

    var track = document.createElement ('img');
    track.style.margin = '0px auto';
    innerBar.appendChild (track);
    bar.appendChild (innerBar);

    var arrow2 = arrow1.cloneNode(true);
    bar.appendChild (arrow2);

    if (axis == 'hori') {
    this.con.style.width = this.frame.offsetWidth + 'px';
// style fŸr Scrollbar
      bar.style.height = '11px';
      bar.style.width = this.frame.offsetWidth + 'px';
// style fŸr linken Pfeil
      arrow1.setAttribute ('src', "/images/arrowLeft.gif");
      arrow1.style.cssFloat = 'left';
      arrow1.style.styleFloat = 'left';
// style fŸr Bahn
      innerBar.style.cssFloat = 'left';
      innerBar.style.styleFloat = 'left';
      innerBar.style.height = '11px';
      innerBar.style.width = (this.frame.offsetWidth - 26) + 'px';
      innerBar.style.backgroundImage = 'url(pix/barHorizontal.gif)';
      innerBar.style.backgroundRepeat = 'repeat-x';
      innerBar.style.backgroundPosition = 'center';
// style fŸr track
      track.style.marginTop = '3px';
      track.style.width = '43px';
// style fŸr rechten Pfeil
      arrow2.setAttribute ('src', 'pix/arrowRight.gif');
      arrow2.style.cssFloat = 'left';
      arrow2.style.styleFloat = 'left';

// Slider definieren
      this.horiSlider = new Control.Slider(track, innerBar, {
        axis : 'horizontal',
        onSlide: function(v) { t.con.scrollLeft = (v*(t.con.scrollWidth - t.con.offsetWidth)); },
        onChange: function(v) { t.con.scrollLeft = (v*(t.con.scrollWidth - t.con.offsetWidth)); }
        } );
// Events fŸr Mausrad und Click auf Pfeile
      if (!this.vert) {
        Event.observe (this.frame, 'DOMMouseScroll', this.wheel.bindAsEventListener(this));
        this.frame.onmousewheel = this.wheel.bindAsEventListener(this);
        }
      Event.observe (arrow1, 'click', function () { t.changeHori(1); } );
      Event.observe (arrow2, 'click', function () { t.changeHori(-1); } );
      }

    if (axis == 'vert') {
    this.con.style.height = this.frame.offsetHeight + 'px';
// style fŸr Scrollbar
      bar.style.height = '100%';
      bar.style.width = '11px';
//      bar.style.marginRight = '5px';
      bar.style.marginLeft = '5px';
// style fŸr linken Pfeil
      arrow1.setAttribute ('src', "/images/blind.gif");
      arrow1.style.backgroundImage = "url(/images/arrowTop.gif)";
      arrow1.style.backgroundRepeat = 'no-repeat';
      arrow1.style.backgroundPosition = 'center';
      arrow1.style.cursor = 'pointer';
// style fŸr Bahn
      innerBar.style.height = (this.frame.offsetHeight - 28) + 'px';
      innerBar.style.width = '11px';
      innerBar.style.textAlign = 'center';
      innerBar.style.backgroundImage = "url(/images/pfeil_bg.gif)";
      innerBar.style.backgroundRepeat = 'repeat-y';
      innerBar.style.backgroundPosition = 'center';
// style fŸr track
		//track.style.borderTop = "2px solid #ffffff";
		//track.style.borderBottom = "2px solid #ffffff";
      track.setAttribute ('src', "/images/blind.gif");
      track.style.backgroundImage = "url(/images/trackVertical.gif)";
      track.style.backgroundRepeat = 'repeat-y';
      track.style.backgroundPosition = 'center';
      track.style.cursor = 'pointer';
      track.style.height = '47px';
      track.style.width = "9px";
// style fŸr rechten Pfeil
      arrow2.setAttribute ('src', "/images/blind.gif");
      arrow2.style.backgroundImage = "url(/images/arrowBottom.gif)";
      arrow2.style.backgroundRepeat = 'no-repeat';
      arrow2.style.backgroundPosition = 'center';
      arrow2.style.cursor = 'pointer';

// Slider definieren
      this.vertSlider = new Control.Slider(track, innerBar, {
        axis : 'vertical',
        onSlide: function(v) { t.con.scrollTop = (v*(t.con.scrollHeight - t.con.offsetHeight)); },
        onChange: function(v) { t.con.scrollTop = (v*(t.con.scrollHeight - t.con.offsetHeight)); }
        } );
// Events fŸr Mausrad und Click auf Pfeile 
      Event.observe (this.frame, 'DOMMouseScroll', this.wheel.bindAsEventListener(this));
      this.frame.onmousewheel = this.wheel.bindAsEventListener(this);
      Event.observe (arrow1, 'click', function () { t.changeVert(1); } );
      Event.observe (arrow2, 'click', function () { t.changeVert(-1); } );
      }
    return bar;
    },

  wheel: function (event) {
    var delta = 0;
    if (!event) event = window.event;
    if (event.wheelDelta) {
      delta = event.wheelDelta/120;
      } else if (event.detail) { delta = -event.detail / 3; }
    if (this.vert) this.changeVert (delta);
      else if (this.hori) this.changeHori (delta);
    },

  changeVert: function (delta) {
    var factor = /Konqueror|Safari|KHTML/.test(navigator.userAgent) ? 0.03 : 0.07;
    this.vertSlider.setValueBy(delta > 0 ? -factor : factor);
    },

  changeHori: function (delta) {
    var factor = /Konqueror|Safari|KHTML/.test(navigator.userAgent) ? 0.03 : 0.07;
    this.horiSlider.setValueBy(delta > 0 ? -factor : factor);
    }

  } );