var currScroll;

var BrowserDetect = {
  init: function () {
    this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
    this.version = this.searchVersion(navigator.userAgent)
      || this.searchVersion(navigator.appVersion)
      || "an unknown version";
    this.OS = this.searchString(this.dataOS) || "an unknown OS";
  },
  searchString: function (data) {
    for (var i=0;i<data.length;i++) {
      var dataString = data[i].string;
      var dataProp = data[i].prop;
      this.versionSearchString = data[i].versionSearch || data[i].identity;
      if (dataString) {
        if (dataString.indexOf(data[i].subString) != -1)
          return data[i].identity;
      }
      else if (dataProp)
        return data[i].identity;
    }
    return "";
  },
  searchVersion: function (dataString) {
    var index = dataString.indexOf(this.versionSearchString);
    if (index == -1) return 0;
    return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
  },
  dataBrowser: [
    {   string: navigator.userAgent,
      subString: "OmniWeb",
      versionSearch: "OmniWeb/",
      identity: "OmniWeb"
    },
    {
      string: navigator.vendor,
      subString: "Apple",
      identity: "Safari"
    },
    {
      prop: window.opera,
      identity: "Opera"
    },
    {
      string: navigator.vendor,
      subString: "iCab",
      identity: "iCab"
    },
    {
      string: navigator.vendor,
      subString: "KDE",
      identity: "Konqueror"
    },
    {
      string: navigator.userAgent,
      subString: "Firefox",
      identity: "Firefox"
    },
    {
      string: navigator.vendor,
      subString: "Camino",
      identity: "Camino"
    },
    {   // for newer Netscapes (6+)
      string: navigator.userAgent,
      subString: "Netscape",
      identity: "Netscape"
    },
    {
      string: navigator.userAgent,
      subString: "MSIE",
      identity: "Explorer",
      versionSearch: "MSIE"
    },
    {
      string: navigator.userAgent,
      subString: "Gecko",
      identity: "Mozilla",
      versionSearch: "rv"
    },
    {     // for older Netscapes (4-)
      string: navigator.userAgent,
      subString: "Mozilla",
      identity: "Netscape",
      versionSearch: "Mozilla"
    }
  ],
  dataOS : [
    {
      string: navigator.platform,
      subString: "Win",
      identity: "Windows"
    },
    {
      string: navigator.platform,
      subString: "Mac",
      identity: "Mac"
    },
    {
      string: navigator.platform,
      subString: "Linux",
      identity: "Linux"
    }
  ]

};
BrowserDetect.init();


function dragGo(event) {

  var mousePos = currScroll.getEventPos(event);
  currScroll.thumbObj.pos = currScroll.thumbObj.elStart + mousePos - currScroll.thumbObj.cursorStart;

  if (currScroll.thumbObj.pos < 0) currScroll.thumbObj.pos = 0;
  if (currScroll.thumbObj.pos > currScroll.thumbObj.scrollMax) currScroll.thumbObj.pos = currScroll.thumbObj.scrollMax;

  currScroll.scrollInfo.pos = currScroll.scrollPosFromThumbPos(currScroll.thumbObj.pos);
  currScroll.scrollTo();

  if (BrowserDetect.browser == "Explorer") {
    window.event.cancelBubble = true;
    window.event.returnValue = false;
  }
  else if (BrowserDetect.browser == "Firefox") {
    event.preventDefault();
  }
  else {
    event.preventDefault();
  }
}

function dragStop(event) {
  if (BrowserDetect.browser == "Explorer") {
    document.detachEvent('onmousemove', dragGo);
    document.detachEvent('onmouseup',   dragStop);
  }
  else if (BrowserDetect.browser == "Firefox") {
    document.removeEventListener('mousemove', dragGo,   true);
    document.removeEventListener('mouseup',   dragStop, true);
  }
  else {
    document.removeEventListener('mousemove', dragGo,   true);
    document.removeEventListener('mouseup',   dragStop, true);
  }
}

function getValue(val) {
  if (val.indexOf("px") > 0)
    val = val.substring(0, val.length-2);
  return val;
}

function scrollArea(myData) {
  this.myData = myData;
  this.id = myData.targetId;
  this.name = myData.saName;
  this.css = myData.css;
  this.scrollTimer = null;

  this.leftArrowImage = myData.leftArrowImage;
  this.rightArrowImage = myData.rightArrowImage;
  this.upArrowImage = myData.upArrowImage;
  this.downArrowImage = myData.downArrowImage;
  this.horizThumbImage = myData.horizThumbImage;
  this.vertThumbImage = myData.vertThumbImage;
  this.vertTrackStyle = myData.vertTrackStyle;
  this.horizTrackStyle = myData.horizTrackStyle;

  this.horizScrollPosition = (myData.horizScrollPosition != null ? myData.horizScrollPosition : "bottom");
  this.vertScrollPosition = (myData.vertScrollPosition != null ? myData.vertScrollPosition : "right");
  this.horizTrackHeight = (myData.horizTrackHeight != null ? myData.horizTrackHeight : 10);
  this.vertTrackWidth = (myData.vertTrackWidth != null ? myData.vertTrackWidth : 10);
  this.vertScrollSpeed = (myData.vertScrollSpeed != null ? myData.vertScrollSpeed : 10);
  this.horizScrollSpeed = (myData.horizScrollSpeed != null ? myData.horizScrollSpeed : 10);
  this.vertScroller = (myData.useVertScroller != null ? myData.useVertScroller : true);
  this.horizScroller = (myData.useHorizScroller != null ? myData.useHorizScroller : false);
  this.autoHide = (myData.autoHideScrollers != null ? myData.autoHideScrollers : true);

  var target = document.getElementById(this.id);
  this.scroller = new Object();
  this.scroller.left = (myData.left != null ? myData.left : (getValue(target.style.left) != "" ? getValue(target.style.left) : 0));
  this.scroller.top = (myData.top != null ? myData.top : (getValue(target.style.top) != "" ? getValue(target.style.top) : 0));
  this.scroller.width = (myData.width != null ? myData.width : (getValue(target.style.width) != "" ? getValue(target.style.width) : 0));
  this.scroller.height = (myData.height != null ? myData.height : (getValue(target.style.height) != "" ? getValue(target.style.height) : 0));
  this.scroller.arrWidth = (myData.horizArrowWidth != null ? myData.horizArrowWidth : 10);
  this.scroller.arrHeight = (myData.vertArrowHeight != null ? myData.vertArrowHeight : 10);
  this.scroller.trackWidth = this.scroller.width - 2*this.scroller.arrWidth;
  this.scroller.trackHeight = this.scroller.height - 2*this.scroller.arrHeight;
  this.scroller.stepSize = (myData.stepSize != null ? myData.stepSize : 50);
  this.scroller.stepSpeed = (myData.stepSpeed != null ? myData.stepSpeed : 30);

  this.scrollInfo = new Object();
  this.scrollInfo.speed = 1;
  this.scrollInfo.pos = 0;
  this.scrollInfo.vertPos = 0;
  this.scrollInfo.horizPos = 0;

  this.thumbObj = new Object();
  this.thumbObj.zIndex = 0;
  this.thumbObj.pos = 0;
  this.thumbObj.size_vert = (myData.vertThumbLength != null ? myData.vertThumbLength : 10);
  this.thumbObj.size_horiz = (myData.horizThumbLength != null ? myData.horizThumbLength : 10);

  this.isVertScrollVisible = function() {
    var res = false;
    var vt = document.getElementById(this.id + '_verticalTrack');
    if (vt != null) res = (vt.style.display == 'block');
    return res;
  }

  this.isHorizScrollVisible = function() {
    var res = false;
    var ht = document.getElementById(this.id + '_horizontalTrack');
    if (ht != null) res = (ht.style.display == 'block');
    return res;
  }

  this.getEventPos = function(event) {
    if (this.scrollInfo.orientation == null) return 0;
    if (BrowserDetect.browser == "Explorer" || BrowserDetect.browser == "Opera") {
      if (this.scrollInfo.orientation == 'vert')
        return window.event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
      else
        return window.event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
    }
    else if (BrowserDetect.browser == "Firefox") {
      if (this.scrollInfo.orientation == 'vert')
        return event.clientY + window.scrollY;
      else
        return event.clientX + window.scrollX;
    }
    else {
      if (this.scrollInfo.orientation == 'vert')
        return event.clientY + window.scrollY;
      else
        return event.clientX + window.scrollX;
    }
  }

  this.scrollPosFromThumbPos = function(apos) {
    if (this.scrollInfo.orientation == 'vert')
      return parseInt(apos/(this.scroller.trackHeight-this.thumbObj.size_vert)*(this.scroller.height-this.scrollInfo.height));
    else
      return parseInt(apos/(this.scroller.trackWidth-this.thumbObj.size_horiz)*(this.scroller.width-this.scrollInfo.width));
  }

  this.thumbPosFromScrollPos = function(apos) {
    if (this.scrollInfo.orientation == 'vert')
      return parseInt(apos/(this.scroller.height-this.scrollInfo.height)*(this.scroller.trackHeight-this.thumbObj.size_vert));
    else
      return parseInt(apos/(this.scroller.width-this.scrollInfo.width)*(this.scroller.trackWidth-this.thumbObj.size_horiz));
  }

  this.initScrolling = function(mousePos) {
    this.thumbObj.cursorStart = mousePos;
    if (this.scrollInfo.orientation == 'vert') {
      this.thumbObj.elStart = parseInt(this.thumbObj.elNode.style.top, 10);
      this.thumbObj.scrollMax = this.scroller.trackHeight - this.thumbObj.size_vert;
      this.scrollInfo.scrollMax = this.scroller.height - this.scrollInfo.height;
    }
    else {
      this.thumbObj.elStart  = parseInt(this.thumbObj.elNode.style.left, 10);
      this.thumbObj.scrollMax = this.scroller.trackWidth - this.thumbObj.size_horiz;
      this.scrollInfo.scrollMax = this.scroller.width - this.scrollInfo.width;
    }
    if (isNaN(this.thumbObj.elStart)) this.thumbObj.elStart = 0;
  }

  this.dragStart = function(event,thumb) {
    this.thumbObj.elNode = thumb;
    this.scrollInfo.orientation = (thumb.id == this.id + '_verticalThumb' ? 'vert' : 'horiz');

    var mousePos = this.getEventPos(event);
    this.initScrolling(mousePos);

    this.thumbObj.elNode.style.zIndex = ++this.thumbObj.zIndex;
    currScroll = this;
    if (BrowserDetect.browser == "Explorer") {
      document.attachEvent('onmousemove', dragGo);
      document.attachEvent('onmouseup',   dragStop);
      window.event.cancelBubble = true;
      window.event.returnValue = false;
    }
    else if (BrowserDetect.browser == "Firefox") {
      document.addEventListener('mousemove', dragGo,   true);
      document.addEventListener('mouseup',   dragStop, true);
      event.preventDefault();
    }
    else {
      document.addEventListener('mousemove', dragGo,   true);
      document.addEventListener('mouseup',   dragStop, true);
      event.preventDefault();
    }
  }

  this.adjustMousePos = function(apos) {
    if (this.scrollInfo.orientation != null) {
      var extraVert = 0;
      var extraHoriz = 0
      if (this.horizScrollPosition == "top")
        extraVert = this.horizTrackHeight;
      if (this.vertScrollPosition == "left")
        extraHoriz = this.vertTrackWidth;
      if (this.scrollInfo.orientation == 'vert')
        apos -= (this.scroller.top + this.scroller.arrHeight + extraVert);
      else
        apos -= (this.scroller.left + this.scroller.arrWidth + extraHoriz);
    }
    return apos;
  }

  this.scrollStart = function(event,dir) {
    if (this.scrollTimer == null) {
      this.scrollInfo.orientation = dir;
      var thumb = (this.scrollInfo.orientation == 'vert' ? this.vertThumb : this.horizThumb);
      this.thumbObj.elNode = thumb;

      var mousePos = this.adjustMousePos(this.getEventPos(event));
      this.initScrolling(mousePos);
      this.thumbObj.pos = this.thumbObj.elStart;

      var asize = (dir == 'vert' ? this.thumbObj.size_vert : this.thumbObj.size_horiz);
      this.scrollInfo.direction = 'none';

      if (mousePos > this.thumbObj.pos + asize) this.scrollInfo.direction = 'positive';
      else if (mousePos < this.thumbObj.pos) this.scrollInfo.direction = 'negative';

      var endoffset = (this.scrollInfo.orientation == 'vert' ? this.sframe.offsetTop : this.sframe.offsetLeft);

      this.thumbObj.endPos = mousePos - parseInt(asize/2) - endoffset;
      this.scrollInfo.endPos = this.scrollPosFromThumbPos(this.thumbObj.endPos);

      this.doStartScroll();
    }
    else if (this.scrollInfo.orientation == 'vert')
      this.scrollInfo.incVert *= 2;
    else
      this.scrollInfo.incHoriz *= 2;
  }

  this.doStartScroll = function() {
    if (this.scrollInfo.direction != 'none')
      this.scrollTimer = setTimeout(this.name + '.doScroll()', this.scrollInfo.speed);
  }

  this.scrollTo = function() {
    if (this.scrollInfo.orientation == 'vert') {
      this.thumbObj.elNode.style.top = this.thumbObj.pos + 'px';
      this.sdiv.style.top = this.scrollInfo.pos + 'px';
    }
    else {
      this.thumbObj.elNode.style.left = this.thumbObj.pos + 'px';
      this.sdiv.style.left = this.scrollInfo.pos + 'px';
    }
  }

  this.doScroll = function() {
    if (this.scrollInfo.direction == 'negative')
      this.scrollInfo.pos += (this.scrollInfo.orientation == 'vert' ? this.scrollInfo.incVert : this.scrollInfo.incHoriz);
    else
      this.scrollInfo.pos -= (this.scrollInfo.orientation == 'vert' ? this.scrollInfo.incVert : this.scrollInfo.incHoriz);
    this.thumbObj.pos = this.thumbPosFromScrollPos(this.scrollInfo.pos);

    var doStop = false;
    if (this.scrollInfo.pos > 0) {
      this.scrollInfo.pos = 0;
      doStop = true;
    }
    if (this.scrollInfo.pos < this.scrollInfo.scrollMax) {
      this.scrollInfo.pos = this.scrollInfo.scrollMax;
      doStop = true;
    }
    if (this.scrollInfo.direction == 'negative' && this.scrollInfo.pos > this.scrollInfo.endPos) {
      this.thumbObj.pos = this.thumbObj.endPos;
      this.scrollInfo.pos = this.scrollInfo.endPos;
      doStop = true;
    }
    if (this.scrollInfo.direction == 'positive' && this.scrollInfo.pos < this.scrollInfo.endPos) {
      this.thumbObj.pos = this.thumbObj.endPos;
      this.scrollInfo.pos = this.scrollInfo.endPos;
      doStop = true;
    }

    this.thumbObj.pos = this.thumbPosFromScrollPos(this.scrollInfo.pos);
    this.scrollTo();
    if (doStop) this.scrollStop();
    else this.scrollTimer = setTimeout(this.name + '.doScroll()', this.scrollInfo.speed);
  }

  this.changeScrollEnd = function(event) {
    var mousePos = this.adjustMousePos(this.getEventPos(event));

    var endoffset = (this.scrollInfo.orientation == 'vert' ? this.sframe.offsetTop : this.sframe.offsetLeft);

    if (this.scrollInfo.orientation == 'vert')
      this.thumbObj.endPos = mousePos - parseInt(this.thumbObj.size_vert/2) - endoffset;
    else
      this.thumbObj.endPos = mousePos - parseInt(this.thumbObj.size_horiz/2) - endoffset;
    this.scrollInfo.endPos = this.scrollPosFromThumbPos(this.thumbObj.endPos);
  }

  this.stepTo = function(dir,endPos) {
    if (dir == 'up' || dir == 'down') {
      this.scrollInfo.orientation = 'vert';
      this.thumbObj.elNode = this.vertThumb;
    }
    else {
      this.scrollInfo.orientation = 'horiz';
      this.thumbObj.elNode = this.horizThumb;
    }

    this.thumbObj.pos = this.thumbObj.elStart;
    if (dir == 'up' || dir == 'left')
      this.scrollInfo.direction = 'negative';
    else
      this.scrollInfo.direction = 'positive';

    this.initScrolling(0);
    this.thumbObj.endPos = this.thumbPosFromScrollPos(endPos);
    this.scrollInfo.endPos = endPos;


    this.scrollInfo.incVert = this.scroller.stepIncVert;
    this.scrollInfo.incHoriz = this.scroller.stepIncHoriz;
    this.doStartScroll();
  }

  this.getChildNode = function(idx,aNode) {
    var found = -1;
    var count = 0;
    while (found < idx && count < aNode.childNodes.length) {
      if (aNode.childNodes[count].tagName) found++;
      count++;
    }
    return aNode.childNodes[count-1];
  }

  this.doStep = function(dir) {
    var scrollTo = null;
    var childNode = this.sdiv.firstChild;
    if (childNode.tagName == 'TABLE') {
      var stepNodes;
      var tbody = this.getChildNode(0, childNode);
      if (dir == 'left' || dir == 'right') stepNodes = tbody.firstChild.childNodes;
      else stepNodes = tbody.childNodes;
      for (var i=0; i < stepNodes.length; i++) {
        if (stepNodes[i].tagName) {
          var apos;
          if (dir == 'left' || dir == 'right') apos = -stepNodes[i].offsetLeft;
          else apos = -stepNodes[i].offsetTop;
          if ((dir == 'left' || dir == 'up') && apos > this.scrollInfo.pos && (apos < scrollTo || scrollTo == 999))
            scrollTo = apos;
          else if ((dir == 'right' || dir == 'down') && apos < this.scrollInfo.pos && (apos > scrollTo || scrollTo == 999))
            scrollTo = apos;
        }
      }
    }
    else {
      var step = (dir == 'left' || dir == 'right' ? parseInt(this.scroller.width*this.scroller.stepSize/100) : parseInt(this.scroller.height*this.scroller.stepSize/100));
      if (dir == 'left' || dir == 'up') scrollTo = this.scrollInfo.pos + step;
      else scrollTo = this.scrollInfo.pos - step;
    }
    if (scrollTo != null) this.stepTo(dir, scrollTo);
  }

  this.scrollStop = function() {
    clearTimeout(this.scrollTimer);
    this.scrollTimer = null;
    this.resetSpeed();
    if (this.scrollInfo.orientation == 'vert')
      this.scrollInfo.vertPos = this.scrollInfo.pos;
    else
      this.scrollInfo.horizPos = this.scrollInfo.pos;
  }

  this.resetSpeed = function() {
    this.scrollInfo.incVert = this.vertScrollSpeed;
    if (this.scrollInfo.incVert == 0) this.scrollInfo.incVert = 1;
    this.scrollInfo.incHoriz = this.horizScrollSpeed;
    if (this.scrollInfo.incHoriz == 0) this.scrollInfo.incHoriz = 1;
  }

  this.contentChanged = function() {
    this.sframe.style.width = ''
    this.sframe.style.height = ''
    this.sframe.style.overflow='visible';
    this.sframe.style.position='relative';
    this.sdiv.style.position='relative';
    this.initScrollers();
  }


  this.getAbsoluteTop = function(obj) {
    var atop = 0;
    while (obj.offsetParent != null) {
      obj = obj.offsetParent;
      atop += obj.offsetTop;
    }
    return atop;
  }

  this.getAbsoluteLeft = function(obj) {
    var aleft = 0;
    while (obj.offsetParent != null) {
      obj = obj.offsetParent;
      aleft += obj.offsetLeft;
    }
    return aleft;
  }

  this.initScrollers = function() {
    this.sdiv = document.getElementById(this.id + '_ScrollDiv');
    this.sframe = document.getElementById(this.id + '_ScrollFrame');

    this.vertThumb = document.getElementById(this.id + '_verticalThumb');
    this.horizThumb = document.getElementById(this.id + '_horizontalThumb');

    var swidth = this.sdiv.offsetWidth;

    this.scroller.top = this.getAbsoluteTop(this.sframe);

    this.scroller.left = this.getAbsoluteLeft(this.sframe);

    if (BrowserDetect.browser == "Firefox") {
      if (BrowserDetect.OS == "Mac") {
        var scrwidth1 = document.body.scrollWidth;
        this.sframe.style.overflow='hidden';
        var scrwidth2 = document.body.scrollWidth;
        this.sframe.style.overflow='visible';
        if (scrwidth1 > scrwidth2)
          swidth = document.body.scrollWidth-this.scroller.left;
      }
      else {
        if (swidth + this.scroller.left >= window.innerWidth)
          swidth = document.body.scrollWidth-this.scroller.left;
      }
    }
    this.scrollInfo.width = swidth;
    this.sframe.style.overflow='hidden';
//    this.scroller.width = myData.width;
    this.sframe.style.position='absolute';
    this.sdiv.style.position='absolute';
    this.sframe.style.width = this.scroller.width + "px";
    this.sframe.style.height = this.scroller.height + "px";

    this.scrollInfo.height = this.sdiv.offsetHeight;
    this.scroller.stepIncVert = this.scroller.stepSpeed;
    if (this.scroller.stepIncVert == 0)
      this.scroller.stepIncVert = 1;
    this.scroller.stepIncHoriz = this.scroller.stepSpeed;
    if (this.scroller.stepIncHoriz == 0) this.scroller.stepIncHoriz = 1;
    this.resetSpeed();
    if (this.vertScroller) {
      var vt = document.getElementById(this.id + '_verticalTrack');
      if (vt != null) {
        if(this.autoHide)
          vt.style.display = (this.scrollInfo.height <= this.scroller.height ? 'none' : 'block');
        else
          vt.style.display = 'block';
      }
    }
    if (this.horizScroller) {
      var ht = document.getElementById(this.id + '_horizontalTrack');
      if (ht != null) {
        if(this.autoHide)
          ht.style.display = (this.scrollInfo.width <= this.scroller.width ? 'none' : 'block');
        else
          ht.style.display = 'block';
      }
    }
  }


  this.initHtml = function() {
    var targetDiv = document.getElementById(this.id);
    var targetHtml = targetDiv.innerHTML;

    var style = "position:absolute;";
    var left = this.scroller.left + this.vertTrackWidth;
    if (this.vertScrollPosition == "left")
      style += "margin-left:" + left + ";";
    else
      style += "margin-left:" + this.scroller.left + ";";

    var top = this.scroller.top + this.horizTrackHeight;
    if (this.horizScrollPosition == "top")
      style += "margin-top:" + top + ";";
    else
      style += "margin-top:" + this.scroller.top;

    // MainDiv
    var html = "<div style='" + style + "'>";

    // ScrollFrame
    html += "<div id='" + this.id + "_ScrollFrame' style='position:relative' class='" + this.css + "'>";

    //ScrollDiv
    html += "<div id='" + this.id + "_ScrollDiv' style='position:relative;left:0;top:0' onresize='" + this.name + ".initScrollers()'>" + targetHtml + "</div>";

    html += "</div>"; // ScrollFrame

    var hsHtml = "";
    if (this.horizScroller) {
      var top = (this.horizScrollPosition == "top" ? "-" + this.horizTrackHeight : this.scroller.height);
      var style = "position:absolute;left:0;top:" + top + "px;width:" + this.scroller.width + "px;height:" + this.horizTrackHeight + "px;";
      style += this.horizTrackStyle;
      hsHtml = "<div id='" + this.id + "_horizontalTrack' style='" + style + "'>";

      if (this.leftArrowImage.length > 0)
        hsHtml += "<div style='position:absolute;left:0'><a href=javascript:" + this.name + ".doStep('left') onfocus='this.blur()'><img src='" + this.leftArrowImage + "' alt='' style='display:block' border=0 /></a></div>"

      var width = this.scroller.width - 2*this.scroller.arrWidth;
      style = "position:absolute;left:" + this.scroller.arrWidth + "px;width:" + width + "px;height:" + this.horizTrackHeight + "px;";
      // theTrack
      hsHtml += "<div style='" + style + "' onclick='" + this.name + ".scrollStart(event, \"horiz\")' onmousemove='" + this.name + ".changeScrollEnd(event)' onmouseout='" + this.name + ".scrollStop()'>";


      style = "position:absolute;left:0;top:0;";
      // horizThumb
      hsHtml += "<div id='" + this.id + "_horizontalThumb' style='" + style + "' onmousedown='" + this.name + ".dragStart(event,this)' onmouseover='" + this.name + ".scrollStop()'>";

      hsHtml += "<a href='#' onfocus='this.blur()'><img src='" + this.horizThumbImage + "' alt='' style='display:block' border=0 /></a>";
      hsHtml += "</div>"; // horizThumb
      hsHtml += "</div>"; // theTrack

      if (this.rightArrowImage.length > 0) {
        var left = this.scroller.width - this.scroller.arrWidth;
        hsHtml += "<div style='position:absolute;left:" + left + "px'><a href='javascript:" + this.name + ".doStep(\"right\")' onfocus='this.blur()'><img src='" + this.rightArrowImage + "' alt='' style='display:block' border=0 /></a></div>"
      }

      hsHtml += "</div>"; // horizTrack
    }
    html += hsHtml;

    var vsHtml = "";
    if (this.vertScroller) {
      var left = (this.vertScrollPosition == "left" ? "-" + this.vertTrackWidth : this.scroller.width);
      var style = "position:absolute;top:0;left:" + left + "px;width:" + this.vertTrackWidth + "px;height:" + this.scroller.height + "px;";
      style += this.vertTrackStyle;
      vsHtml = "<div id='" + this.id + "_verticalTrack' style='" + style + "'>";

      if (this.upArrowImage.length > 0)
        vsHtml += "<div style='position:absolute;top:0'><a href=javascript:" + this.name + ".doStep('up') onfocus='this.blur()'><img src='" + this.upArrowImage + "' alt='' style='display:block' border=0 /></a></div>"

      var height = this.scroller.height - 2*this.scroller.arrHeight;
      style = "position:absolute;top:" + this.scroller.arrHeight + "px;height:" + height + "px;width:" + this.vertTrackWidth + "px;";
      // theTrack
      vsHtml += "<div style='" + style + "' onclick=" + this.name + ".scrollStart(event,'vert') onmousemove='" + this.name + ".changeScrollEnd(event)' onmouseout='" + this.name + ".scrollStop()'>";


      style = "position:absolute;left:0;top:0;";
      // vertThumb
      vsHtml += "<div id='" + this.id + "_verticalThumb' style='" + style + "' onmousedown='" + this.name + ".dragStart(event,this)' onmouseover='" + this.name + ".scrollStop()'>";

      vsHtml += "<a href='#' onfocus='this.blur()'><img src='" + this.vertThumbImage + "' alt='' style='display:block' border=0 /></a>";
      vsHtml += "</div>"; // vertThumb
      vsHtml += "</div>"; // theTrack

      if (this.downArrowImage.length > 0) {
        var top = this.scroller.height - this.scroller.arrHeight;
        vsHtml += "<div style='position:absolute;top:" + top + "px'><a href=javascript:" + this.name + ".doStep('down') onfocus='this.blur()'><img src='" + this.downArrowImage + "' alt='' style='display:block' border=0 /></a></div>"
      }

      vsHtml += "</div>"; // vertTrack
    }
    html += vsHtml;
    html += "</div>";

    targetDiv.innerHTML = html;
  }


  this.initHtml();

  // Startup
  if (myData.startPosVert != null && myData.startPosVert != 0)
    this.stepTo("down",myData.startPosVert);
  if (myData.startPosHoriz != null && myData.startPosHoriz != 0)
    this.stepTo("horiz",myData.startPosHoriz);

  this.initScrollers();

}