var textf_t = 100; // oberer Abstand des Textfeldes im Fenster
var textf_l =100; //linke obere Ecke des Textfeldes im Fenster
var textf_b = 600; // Breite des Textfeldes
var textf_h = 500; // Höhe des Textfeldes (abhängig von der Menge des Textes; sollte zuerst immer mit sehr großen Werten getestet werden, da ansonsten der Text nicht bis zum Ende gelesen werden kann
var textr_h = 260; // Höhe des Textrahmens, der bestimmt wieviel Text sichtbar ist
var farbe = "0062ff"; // RGB-Farbe der Schrift und der Ränder


var scf_min = 8; // Mindesthöhe des Scrollbalkens
var scf_b = 16; // Breite des Scrollers
var tf_sc = 10; // Abstand des Scrollers vom Textfeld
var scf_l = (textf_l+textf_b+tf_sc); // Linke obere Ecke des Scrollers

var pfeil_h = 16; // Höhe des Scroll-Pfeils
var pfeil_b = scf_b; // Breite des Scroll-Pfeils

var max_up,max_down,make_scroll,texttext,scroll_balk,sc_h,scf_h,hoch,text_oben,stop=hold_m=xxx=tf_oben=0,pi=1;

var inhalt = '<table  border="0" cellspacing="0" cellpadding="0">\t<tr>\t<td colspan="6" style="height:35px; padding-left:15px; padding-top:5px" valign="top" class="us">Ein Feld mit eigenem Scroll-Balken</td>\t</tr>\t<tr>\t<td colspan="6" style="height:200px;padding-left:15px; padding-right:10px" valign="top" align="center" class="plain"><p>Falls du ein kleines Fenster brauchst, wie dieses hier, das einen selbst gestalteten Scroll-Balken haben soll, ist dieses Skript möglicherweise genau das Richtige.</p><p><h4>Funktioniert in allen modernen Browsern</h4><p>Manchmal möchte man ein Feld einsetzen, in dem der Text gescrollt werden kann. Dazu bietet sich einmal das iframe-tag in HTML an oder die Stylesheet-Angabe "overflow:auto" f&uuml;r einen div-Bereich. In beiden F&auml;llen erh&auml;lt man ein Fenster, in dem Text und Grafiken angezeigt werden k&ouml;nnen. Wenn der Inhalt den vorgegebenen Rahmen &uuml;berschreitet, erh&auml;lt das Feld automatisch Scrollbalken. Diese k&ouml;nnen jedoch nur im Internet-Exlorer durch Style-Angaben farbig gestaltet werden.<br>Um jedoch einen derartigen Effekt in allen moderneren Browsern zu gew&auml;hrleisten, habe ich das Scrollen in Javascript programmiert.</p><p><h4>Die Funktion hier direkt testen</h4>Man kann das Feld in jeder beliebigen H&ouml;he, Breite, Position und Farbe erstellen. Gib dazu unten gewünschte Maße und eine Farbe ein. Dann lass dir das Ergebnis mit "Testen" anzeigen.<br><br></td>\t</tr>\t<tr>\t<td style="background-color:#'+farbe+'; width:18%; height:50px; padding-left:20px" class="starkw" align="center"><input name="hoch" id="hoch" type="text" size="5" maxlength="5"></input>&nbsp;px<br>H&ouml;he</td>\t<td style="background-color:#'+farbe+'; width:18%; height:50px; padding-left:20px" class="starkw" align="center" valign="middle"><input name="breit" id="breit" type="text" size="5" maxlength="5"></input>&nbsp;px<br>Breite</td>\t<td style="background-color:#'+farbe+'; width:18%; height:50px; padding-left:20px" class="starkw" align="center" valign="middle"><input name="links" id="links" type="text" size="5" maxlength="5"></input>&nbsp;px<br>Linke Ecke</td>\t<td style="background-color:#'+farbe+'; width:18%; height:50px; padding-left:20px" class="starkw" align="center" valign="middle"><input name="oben" id="oben" type="text" size="5" maxlength="5">&nbsp;px<br>Oberer Rand</input></td>\t<td style="background-color:#'+farbe+'; width:18%; height:50px; padding-left:20px" class="starkw" align="center" valign="middle">#<input name="farbe" id="farbe" type="text" size="6" maxlength="6"></input><br>Farbe</td>\t<td style="background-color:#'+farbe+'; width:10%; height:50px" class="starkw" align="center"><input type="submit" value="Testen"></input><br><br></td>\t</tr>\t<tr>\t<td colspan="6" style="height:70px; padding-left:15px; padding-right:10px; padding-top:5px" valign="top" class="plain">Falls du dich nicht auskennst mit den RGB-Farbwerten, gib einfach eine Mischung aus den Ziffern 0 bis 9 sowie den Buchstaben A bis F ein und schau, welche Farbe du zauberst.';

function init()
{
 texttext = document.getElementById("textfeld");
 sc_h = scf_min;
 scf_h = textr_h-(2*pfeil_h);
 texttext.style.clip = "rect(0px,"+textf_b+"px,"+textr_h+"px, 0px)";
 if(textf_h > textr_h)
 {
  if((textf_h-textr_h) > (scf_h - sc_h))
   pi = Math.floor((textf_h-textr_h)/(scf_h - sc_h));
  else
   sc_h = scf_h-(textf_h - textr_h);
  write_scroller();
  scroll_balk = document.getElementById("scroller");
  max_up = textf_t+pfeil_h;
  hoch = (sc_h + (2*pfeil_h));
  max_down = (max_up+(textr_h-hoch));
 }
 else
  write_noscroll();
}

function write_scroller()
{
 document.write('<div id="scroller" style="position:absolute; visibility:visible; z-Index:5; width:'+scf_b+'px; height:'+sc_h+'px; top:'+(textf_t+pfeil_h)+'px; left:'+scf_l+'px; border:solid 1px #'+farbe+'"><table style="width:'+scf_b+'px; height:'+sc_h+'px; background-color:#'+farbe+'"  border="0" cellspacing="0" cellpadding="0"><tr><td style="width:'+scf_b+'px; height:'+sc_h+'px;" align="center" valign="middle" class="imgcell"><a onmousedown="beginDrag('+"'scroller'"+',event);return false" href="#"><img border="0" width="'+scf_b+'" height="'+sc_h+'" src="but/pix0.gif"></a></td></tr></table></div>');
 document.write('<div style="position:absolute; visibility:visible; z-Index:3; width:'+scf_b+'px; height:'+textr_h+'px; top:'+textf_t+'px; left:'+scf_l+'px; border:solid 1px #'+farbe+'"><table style="width:'+scf_b+'px; height:'+textr_h+'px;" border="0" cellspacing="0" cellpadding="0"><tr><td style="width:'+scf_b+'px; height:'+pfeil_h+'px; border-bottom:solid 1px #'+farbe+'; background-color:#'+farbe+'" align="center" valign="center" class="imgcell"><a onmousedown="pf_scroll(4);return false" onmouseout="stop_scrolling()" onmouseup="stop_scrolling()" href="#"><img src="but/pfeilwd.gif" border="0" alt="Pfeil nach unten"></a></td></tr><tr><td style="width:'+scf_b+'px; height:'+(textr_h-(2*pfeil_h)-2)+'px;" align="center" valign="center" class="imgcell"><img src="but/pix0.gif" width="'+scf_b+'" height="'+(textr_h-(2*pfeil_h)-2)+'" border="0" alt="Scrollfläche"></td></tr><tr><td style="width:'+(textr_h-(2*pfeil_h)-2)+'px; height:'+pfeil_h+'px; border-top:solid 1px #'+farbe+'; background-color:#'+farbe+'" align="center" valign="center" class="imgcell"><a onmousedown="pf_scroll(-4);return false" onmouseout="stop_scrolling()" onmouseup="stop_scrolling()" href="#"><img src="but/pfeilwu.gif" border="0" alt="Pfeil nach oben"></a></td></tr></table></div>');
}

function write_noscroll()
{
 document.write('<div style="position:absolute; visibility:visible; z-Index:3; width:'+scf_b+'px; height:'+textf_h+'px; top:'+textf_t+'px; left:'+scf_l+'px; border:solid 1px #'+farbe+'"><table style="width:'+scf_b+'px; height:'+textf_h+'px;" border="0" cellspacing="0" cellpadding="0"><tr><td style="width:'+pfeil_h+'px; height:'+pfeil_h+'px; border-bottom:solid 1px #'+farbe+'" align="center" valign="center" class="imgcell"><img src="but/pix0.gif" border="0" alt="Leerbild statt Pfeil nach unten"></td></tr><tr><td style="width:'+scf_b+'px; height:'+(textf_h-(2*pfeil_h)-2)+'px;" align="center" valign="center" class="imgcell"><img src="but/pix0.gif" width="16" height="'+(textf_h-(2*pfeil_h)-2)+'" border="0" alt="Leerbild statt Scrollfläche"></td></tr><tr><td style="width:'+pfeil_b+'px; height:'*pfeil_h+'px; border-top:solid 1px #'+farbe+'" align="center" valign="center" class="imgcell"><img src="but/pix0.gif" border="0" alt="Leerbild statt Pfeil nach oben"></td></tr></table></div>');
}

function write_textfeld()
{
 if(screen.width <= 800)
 document.write('<div id="textfeld800" style="position:absolute; visibility:visible; z-Index:3; width:'+textf_b+'px; height:'+textf_h+'px; top:'+textf_t+'px; left:'+textf_l+'px;"><table style="width:'+textf_b+'px; height:'+textf_h+'px; border:solid 1px #'+farbe+'" border="0" cellspacing="0" cellpadding="0">');
else
{
 document.write('<div id="textrahmen" style="position:absolute; visibility:visible; z-Index:3; width:'+textf_b+'px; height:'+textr_h+'px; top:'+textf_t+'px; left:'+textf_l+'px; border:solid 1px #'+farbe+'"><table style="width:'+textf_b+'px; height:'+textr_h+'px;"  border="0" cellspacing="0" cellpadding="0"><tr><td style="width:'+textf_b+'px; height:'+textr_h+'px;">&nbsp;</td></tr></table></div>');
 document.write('<form action="ergebnis.html" name="test" id="test">\t<div id="textfeld" style="position:absolute; visibility:visible; z-Index:3; width:'+textf_b+'px; height:'+textf_h+'px; top:'+textf_t+'px; left:'+textf_l+'px;">\t'+inhalt+'</td>\t</tr>\t</table>\t</div>\t</form>');

 }
}

function zeige_ergebnis()
{
 location.href = "ergebnis.html";
}


function scrollen(x)
{
 x = x*(-1);
 xxx += (x*pi);
 var on = "rect("+(tf_oben+xxx)+"px," +textf_b+"px, "+(textr_h+xxx)+"px, 0px)";
 texttext.style.clip = on;
 texttext.style.top = (textf_t-xxx)+"px";
}

function pf_scroll(x)
{
 var sb = parseInt(scroll_balk.style.top)
 var sbb = (sb-x);
 if((sbb >= max_up) &&  (sbb <= max_down))
 {
  scroll_balk.style.top = sb-x+"px";
  scrollen(x);
  stop = 0;
  make_scroll = setTimeout("pf_scroll("+x+")",100);
 }
}

function stop_scrolling()
{
 if(stop == 0)
 {
 stop = 1;
 if(make_scroll)
  clearTimeout(make_scroll);
 var sb = parseInt(scroll_balk.style.top);
 hold_m = sb;
 }
}

function beginDrag(etd,event)
{
  if (!etd) etd = this;
  if (!event) event = window.event;
  etd = document.getElementById(etd);
  etd.style.zIndex = 5;
  var y = parseInt(etd.style.top);
  var dy = event.clientY - y;
  if (document.addEventListener)
  {
    document.addEventListener("mousemove",moveHandler, true);
    document.addEventListener("mouseup",upHandler, true);
  }
  else if (document.attachEvent)
  {
    document.attachEvent("onmousemove", moveHandler);
    document.attachEvent("onmouseup", upHandler);
  }
  if (event.stopPropagation)
   event.stopPropagation();
  else event.cancelBubble = true;
  if (event.preventDefault)
   event.preventDefault();
  else
   event.returnValue = false;

  function moveHandler(event)
  {
    if (!event) event=window.event;
    var m = (event.clientY - dy);
    if(!hold_m)
     hold_m = m;
    if((m >= max_up) && (m < max_down))
    {
     etd.style.top = m + "px";
     var st = hold_m - m;
     if(st != 0)
      scrollen(st);
     hold_m = m;
    }
    if (event.preventDefault) event.preventDefault();
    else event.returnValue = false;
  }
  function upHandler(event)
  {
    if (!event) event=window.event;
    if (document.removeEventListener)
    {
     document.removeEventListener("mouseup", upHandler, true);
     document.removeEventListener("mousemove", moveHandler, true);
    }
    else
    {
     document.detachEvent("onmouseup", upHandler);
     document.detachEvent("onmousemove", moveHandler);
    }
    if (event.stopPropagation) event.stopPropagation();
    else event.cancelBubble = true;
  }
}

function anzeigen()
{
 document.test.hoch.value = textr_h;
 document.test.breit.value = textf_b;
 document.test.links.value = textf_l;
 document.test.oben.value = textf_t;
 document.test.farbe.value = farbe;
}