/*
 der Slider soll

1. ermitteln, wie groß die Differenz zwischen den Breiten der Containern
 #outer und #inner ist.
 Max_inner_left = inner.width - outer.widht;

2. ermitteln, wie groß die Differenz zwischen den Breiten des Container
 #slidbg und dem Bild #redball ist.
 Max_slider_left = slider.widht - redball.widht;

3. event handler für resize(html oder body)
  zur neuberechnung von Max_inner_left und Max_slider_left
  und move(#redball)
  zur neuberechnung von currentX, inner.left und redball.left
  registrieren.

4. die event handler setzen die Werte für den linken Abstand für
  inner.left =  Max_inner_left * currentX /  Max_slider_left,
             [0 <= inner.left <=  Max_inner_left]
  redball.left =  currentX
             [0 <= redball.left <=  Max_slider_left]

  die Maus erscheint rechts von #slidbgX0 und links von #slidbgX1,
  die Breite von #redball.width ist dabei nicht relevant.

  mit jedem move wird event-x in den Bereich von #slidbg überführt
  und der Wert currentX neu gesetzt. Hierfür gilt:
      0 <= currentX <=  Max_slider_left

*/

/*
function Slider() {
 
 Max_inner_left = inner.width - outer.widht;
 Max_slider_left = slider.widht - redball.widht;
    var display_left;
    var slider_left;
}
*/

function myload(f) {
  if (typeof window.onload != 'function') {
    window.onload = f;
  } else {
    var old = window.onload;
    window.onload = function() { old(); f(); };
  };
}

var slide = false;
function handle_mouse_event(e) {
  var target;
  if (!e) e = window.event;

/*
  document.getElementById("debug1").value = document.getElementById("debug0").value;
  document.getElementById("debug0").value = e.type;
  document.getElementById("debug2").value = e.button + ' - ' + e.clientX + ' x ' + e.clientY;

*/
  if (e.type == 'mousedown') {
    slide = true;
    return true; }
  if (e.type == 'mousemove' && slide) {
    return true; }

  slide = false;
  return false;
}

function init_slider() {
  document.getElementById("outer").style.overflow="hidden";
  document.getElementById("sliderbg").style.display="block"; 
  var redball = document.getElementById("redball");
  redball.innerHTML = '<img src="' + redball.getAttribute("source") + '" />';
}

function init() {

//  init_slider();

  document.getElementById("redball").onclick = handle_mouse_event;

  document.getElementById("redball").onmousedown = handle_mouse_event;
  document.getElementById("redball").onmouseup = handle_mouse_event;

  document.getElementById("redball").onmouseover = handle_mouse_event;
  document.getElementById("redball").onmousemove = handle_mouse_event;
  document.getElementById("redball").onmouseout = handle_mouse_event;

  document.getElementById("redball").ondblclick = handle_mouse_event;
}

myload(init);