function getSelectionInfoById(centerContentId) {
  var centerContent = document.getElementById(centerContentId);
  if (!centerContent) {
    alert("getSelectionInfo() not found:"+centerContentId);
  }
  return getSelectionInfo(centerContent,centerContent.selectedIndex);
}

function getSelectionInfo(centerContent,index) {
  var selectionInfo = centerContent.getSelectionInfo(index);
  selectionInfo.index = index;
  if (centerContent.itemsByIndex) {
    selectionInfo.itemsThisRow = centerContent.itemsByIndex[index];
  }
  return selectionInfo;
}

function installListItem(centerContentId, rowIds, linkIds, index, fieldId, fieldValue) {
  var centerContent = document.getElementById(centerContentId);
  if (!centerContent) {
    alert("installListItem: no centerContent for centerContentId:"+centerContentId);
  }
  var func = function() {
    //alert("select:"+linkId+" index:"+index+" fieldValue:"+fieldValue);
    clickListRow(centerContent, fieldId, index, fieldValue);
    // NOTE WorkAround : MSIE scrolls to focused link, saving pos for restore,
    // see restoreScrollX()
    centerContent.savedScrollLeft = centerContent.scrollLeft;
    if (centerContent.onselectionchange) {
      centerContent.onselectionchange();
    }
  };
  if (!centerContent.itemsByIndex) {
    centerContent.itemsByIndex = new Array();
    centerContent.rowsByIndex = new Array();
  }
  var itemsThisRow = centerContent.itemsByIndex[index];
  var rowsThisRow = centerContent.rowsByIndex[index];
  if (!itemsThisRow) {
    itemsThisRow = centerContent.itemsByIndex[index] = new Array();
    rowsThisRow = centerContent.rowsByIndex[index] = new Array();
  }
  var linkRowData = new Object();
  linkRowData.itemsThisRow = itemsThisRow;
  linkRowData.index = index;
  for (var linkInd in linkIds) {
    var link = document.getElementById(linkIds[linkInd]);
    if (!link) {
      alert("installListItem: no component for link id:"+linkIds[linkInd]);
    }

    link.select = func;
    link.linkRowData = linkRowData;
    link.horizontalIndex = linkInd;
    itemsThisRow.push(link);
  }
  var rowData = new Object();
  rowData.rowsThisRow = rowsThisRow;
  rowData.index = index;
  for (var rowInd in rowIds) {
    var row = document.getElementById(rowIds[rowInd]);
    if (!row) {
      alert("installListItem: no component for row id:"+rowIds[rowInd]);
    }

    row.horizontalIndex = rowInd;
    row.rowData = rowData;
    rowsThisRow.push(row);
  }
}

function clickRowHtml(centerContentId,mainColumnIndex,rowIndex) {
  var c = document.getElementById(centerContentId).itemsByIndex[rowIndex][mainColumnIndex];
  c.select();
  c.focus();
  restoreScrollX(centerContentId);
}

function clickListRow(centerContent, dataFieldId, index, value) {
  var itemsThisRow = centerContent.itemsByIndex[index];
  var rowsThisRow = centerContent.rowsByIndex[index];

  var itemsOldRow;
  var rowsOldRow;
  if (centerContent.selectionUp) {
    itemsOldRow = centerContent.itemsByIndex[centerContent.selectedIndex];
    rowsOldRow = centerContent.rowsByIndex[centerContent.selectedIndex];
  }

  if (centerContent.selectionUp && centerContent.selectedIndex != index) {
    var oldSelectionInfo = getSelectionInfo(centerContent, centerContent.selectedIndex);
    var argLink = itemsOldRow[oldSelectionInfo.mainLinkInd];
    for (var i in itemsOldRow) {
      var oldLink = itemsOldRow[i];
      oldLink.style.color = oldSelectionInfo.nonSelectedFg;
    }
    for (var i in rowsOldRow) {
      var oldRow = rowsOldRow[i];
      oldRow.bgColor = oldSelectionInfo.nonSelectedBg;
    }
  }

  var dataField = document.getElementById(dataFieldId);
  var selectionInfo = getSelectionInfo(centerContent, index);
  for (var i in itemsThisRow) {
    var link = itemsThisRow[i];
    link.style.color = selectionInfo.selectedFg;
  }
  for (var i in rowsThisRow) {
    var row = rowsThisRow[i];
    row.bgColor = selectionInfo.selectedBg;
  }

  centerContent.selectedIndex = index;
  centerContent.selectionUp = true;
  dataField.value = value;
}

function restoreScrollX(centerContentId) {
  var centerContent = document.getElementById(centerContentId);
  centerContent.scrollLeft = centerContent.savedScrollLeft;
}


function installListScrollBar(scrollbarAreaDivId, scrollbarAreaImgId, 
    scrollbarButtonDivId, scrollbarButtonDivImgId, scrollbarExtDivId,
    horizontal, extFrom, extTo, 
    centerContentId, contentHeaderId, contentFooterId) {

  var scrollbarAreaDiv = document.getElementById(scrollbarAreaDivId);
  var scrollbarAreaImg = document.getElementById(scrollbarAreaImgId);
  var scrollbarButtonDiv = document.getElementById(scrollbarButtonDivId);
  var scrollbarButtonDivImg = document.getElementById(scrollbarButtonDivImgId);
  var scrollbarExtDiv = document.getElementById(scrollbarExtDivId);
  var centerContent = document.getElementById(centerContentId);
  var contentHeader = document.getElementById(contentHeaderId);
  var contentFooter = document.getElementById(contentFooterId);

//  if (!scrollbarAreaDiv)
//    alert("scrollbarAreaDiv:"+scrollbarAreaDivId);
//  if (!scrollbarAreaImg)
//    alert("scrollbarAreaImg:"+scrollbarAreaImgId);
//  if (!scrollbarButtonDiv)
//    alert("scrollbarButtonDiv:"+scrollbarButtonDivId);
//  if (!scrollbarButtonDivImg)
//    alert("scrollbarButtonDivImg:"+scrollbarButtonDivImgId);
//  if (!scrollbarExtDiv)
//    alert("scrollbarExtDiv:"+scrollbarExtDivId);
//  if (!centerContent)
//    alert("centerContent:"+centerContentId);
//  if (!horizontal && !contentHeader)
//    alert("contentHeader:"+contentHeaderId);
//  if (!horizontal && !contentFooter)
//    alert("contentFooter:"+contentFooterId);

  var size = getScreenSize(centerContent, horizontal);
  var scrollSize = getScrollSize(centerContent, horizontal);
  if (size < scrollSize) {
    var ratio = size / scrollSize;
    var extSize = extFrom + (extTo - extFrom) * ratio;
    setSize(scrollbarExtDiv, extSize, horizontal);
    setSize(scrollbarButtonDivImg, getScreenSize(scrollbarButtonDiv, horizontal), horizontal);

    var doDrag = function(evt) {
      moveScrollBar( evt,
          scrollbarAreaDiv,
          scrollbarAreaImg,
          scrollbarButtonDiv,
          scrollbarButtonDivImg,
          scrollbarExtDiv,
          centerContent,
          contentHeader,
          contentFooter,
          horizontal, extFrom, extTo);
    };

    scrollbarButtonDivImg.onmousedown = function(evt) {
      // window.status =
      // "scrollbarButtonDivImg.onmousedown:"+scrollbarButtonDivId;
      scrollbarButtonDiv.dragStartPos=null;
      doDrag(evt, true);
      if (evt) {
        cancelSystemEvent(evt);
      } else {
        cancelSystemEvent(event);
      }
    }

    var onMouseUp = new Object();
    onMouseUp.run = function(evt) {
      // 1
      tmpScrollTooWideBack(centerContentId);

      // 2
      scrollbarAreaDiv.mousePagingDestination = "stop";

      // 3
      if (scrollbarButtonDiv.dragStartPos) {
        doDrag(evt, false);
        scrollbarButtonDiv.dragStartPos=null;
        // window.status = "document.onmouseup:"+scrollbarButtonDivId;
        if (evt) {
          cancelSystemEvent(evt);
        } else {
          cancelSystemEvent(event);
        }
      }
    };
    addMouseUpHandler(onMouseUp,scrollbarAreaDivId);

    scrollbarButtonDivImg.ondragstart = function(evt) {
      if (evt) {
        cancelSystemEvent(evt);
      } else {
        cancelSystemEvent(event);
      }
    }
    scrollbarButtonDivImg.ondrag = function(evt) {
      if (evt) {
        cancelSystemEvent(evt);
      } else {
        cancelSystemEvent(event);
      }
    }
    scrollbarButtonDivImg.ondragend = function(evt) {
      if (evt) {
        cancelSystemEvent(evt);
      } else {
        cancelSystemEvent(event);
      }
    }

    var onMouseMove = new Object();
    onMouseMove.run = function(evt) {
      if (scrollbarButtonDiv.dragStartPos) {
        // window.status = "document.onmousemove:"+scrollbarButtonDivId;
        doDrag(evt, true);
      }
    };
    addMouseMoveHandler(onMouseMove,scrollbarAreaDivId);

    scrollbarAreaImg.onmousedown = function(evt) {
      scrollbarAreaDiv.mousePagingDestination = "start";
      doClickScrollbar(evt,undefined,scrollbarAreaDiv,
          scrollbarButtonDiv,
          horizontal,
          centerContent,contentHeader,contentFooter);
      var winEvt;
      if (!evt) {
        winEvt = new Object();
        winEvt.x = event.x;
        winEvt.y = event.y;
      }
      doHoldScrollbarForPaging(
          evt, winEvt,
          scrollbarAreaDiv, scrollbarButtonDiv,
          horizontal,
          centerContent,contentHeader,contentFooter,0);
    };
    
    wheelCallbackFunction = function(delta) {
      handleWheelEventImpl(
          scrollbarAreaDiv,scrollbarButtonDiv,
          centerContent,contentHeader,contentFooter,
          horizontal,delta);
    };
    var selectionInfo = getSelectionInfo(centerContent, 0);
    var whScr = selectionInfo.delta * 2;

    addWheelEventHandler(scrollbarAreaDiv, whScr, wheelCallbackFunction);
    if (!horizontal && centerContent) {
      addWheelEventHandler(centerContent, whScr, wheelCallbackFunction);
    }
    if (!horizontal && contentHeader) {
      addWheelEventHandler(contentHeader, whScr, wheelCallbackFunction);
    }
    if (!horizontal && contentFooter) {
      addWheelEventHandler(contentFooter, whScr, wheelCallbackFunction);
    }

  } else {
    scrollbarAreaDiv.style.visibility="hidden";
  }


  if (!centerContent.onkeydowns) {
    centerContent.onkeydowns = new Array();
    centerContent.onkeydown = function(event) {
      for (var i in centerContent.onkeydowns) {
        var func = centerContent.onkeydowns[i];
        func(event);
      }
    };
  }
  if (contentHeader && !contentHeader.onkeydown) {
    contentHeader.onkeydown = centerContent.onkeydown;
  }
  if (contentFooter && !contentFooter.onkeydown) {
    contentFooter.onkeydown = centerContent.onkeydown;
  }

  if (!horizontal) {
    centerContent.onselectionchange=function() {
      scrollToSelected(scrollbarAreaDiv, scrollbarButtonDiv,
          centerContent, contentHeader, contentFooter);
    };
  }

  centerContent.onkeydowns.push(function(event) {
    var selectionInfo = getSelectionInfoById(centerContentId);
    if (!event) {
      event = window.event;
    }
    var dir = 1;
    switch (event.keyCode) {
    case 33:// PG_UP
      dir = -1;
    case 34:// PG_DOWN
      //window.status=(dir==-1)?"PG_UP":"PG_DOWN";
      if (!horizontal) {
        var selectionInfo = getSelectionInfo(centerContent,centerContent.selectedIndex);
        if  (centerContent.selectionUp) {
          stepList(centerContent, dir*selectionInfo.pageLength);
        } else if (size < scrollSize){
          pageUpOrDown(scrollbarAreaDiv,
              scrollbarButtonDiv,  horizontal, dir,
              centerContent,contentHeader,contentFooter);
        }
      }
      cancelSystemEvent(event);
      break;
    case 37:// LEFT
      dir = -1;
    case 39:// RIGHT
      //window.status=(dir==-1)?"LEFT":"RIGHT";
      if (horizontal && size < scrollSize) {
        var selectionInfo = getSelectionInfo(centerContent,centerContent.selectedIndex);
        scrollWith(scrollbarAreaDiv,
            scrollbarButtonDiv,  horizontal, dir*selectionInfo.delta,
            centerContent,contentHeader,contentFooter);
        cancelSystemEvent(event);
      }
      break;
    case 38:// UP
      dir = -1;
    case 40:// DOWN
      //window.status=(dir==-1)?"UP":"DOWN";
      if (!horizontal) {
        stepList(centerContent, dir);
        cancelSystemEvent(event);
      }
      break;
    }
  });
}

function stepList(centerContent, dir) {

  var selectionInfo = getSelectionInfo(centerContent,centerContent.selectedIndex);
  if (centerContent.selectionUp) {
    var i = selectionInfo.index;
    var j = i+dir;
    if (j < 0) {
      j = 0;
    } else if (j >= centerContent.itemsByIndex.length) {
      j = centerContent.itemsByIndex.length-1;
    }
    if (i==j) {
      return false;
    }
    var nexts = centerContent.itemsByIndex[j];

    if (nexts) {
      var next = nexts[0];
      next.select();

      return true;
    } else {
      //alert("no next:"+centerContent.id+" link:"+link.id+" index:"+i+"->"+(j));
    }
  } else {
    //alert("no selectionInfo:"+centerContent.id);
  }
  return false;
}

function scrollToSelected(scrollbarAreaDiv, scrollbarButtonDiv,
    centerContent, contentHeader, contentFooter) {

  var selectionInfo = getSelectionInfo(centerContent,centerContent.selectedIndex);

  var scrollPage = getScreenSize(centerContent, false);
  var pos0 = getPos(centerContent, false);
  var pos = getPos(selectionInfo.itemsThisRow[selectionInfo.mainLinkInd], false);

  var delta = pos-pos0;
  var ds = delta - centerContent.scrollTop;
  //window.status=("delta:"+delta+" scrollTop:"+centerContent.scrollTop+"  d-s:"+ds);

  if (ds<0 || ds>scrollPage-selectionInfo.delta) {
    var scrollTo;
    if (ds<0) {
      scrollTo = delta;
    } else {
      scrollTo = delta - scrollPage + selectionInfo.delta;
    }

    scrollToByScrollPos(scrollbarAreaDiv, scrollbarButtonDiv, 
        centerContent, contentHeader, contentFooter, 
        false, scrollTo );
  }
}

var scheduleQueueTooWide = new Array();

function isTooWideScheduleAlive() {
  for (var contentId in scheduleQueueTooWide) {
    if (scheduleQueueTooWide[contentId]) {
       return true;
    }
  }
  return false;
}

function addScheduleCheckAllTooWide(contentPanelId) {
  var wasAlive = isTooWideScheduleAlive();
  scheduleQueueTooWide[contentPanelId]=true;
  if (!wasAlive) {
    setTimeout("checkAllTooWideImmediately()", 500);
  }
}

function checkAllTooWideImmediately() {
  for (var centerContentId in scheduleQueueTooWide) {
    var selectionInfo = getSelectionInfoById(centerContentId);
    scheduleQueueTooWide[centerContentId]=false;
    //alert("centerContentId:"+centerContentId+" posXToIterateList:"+selectionInfo.posXToIterateList+" deltaYToIterateList:"+selectionInfo.deltaYToIterateList);
    checkAllTooWide(centerContentId, 
                    selectionInfo.posXToIterateList, 
                    selectionInfo.deltaYToIterateList);
  }
}

function checkAllTooWide(centerContentId, deltax, stepy) {
  var centerContent = document.getElementById(centerContentId);
  var p = findPos(centerContent);
  var x = p[0] + deltax;
  var y_min = p[1];

  var visibleLinkDatas = new Array();
  for (var y = y_min, y_max = y_min+centerContent.offsetHeight; y <= y_max; y+=stepy) {
    var element = document.elementFromPoint(x, y);
    if (element && element.select && element.linkRowData) {
      visibleLinkDatas[element.linkRowData.index] = element.linkRowData;
    }
  }
  // window.status="checkAllTooWide("+centerContentId+"):"+idRoots;
  for (var i in visibleLinkDatas) {
    var linkRowData = visibleLinkDatas[i];
    checkTooWide(centerContent, linkRowData);
  }
  return false;
};

function checkTooWide(centerContent,linkRowData) {
  var selectionInfo = getSelectionInfo(centerContent,centerContent.selectedIndex);
  var rowLink = linkRowData.itemsThisRow[selectionInfo.mainLinkInd];
  //var tooWideImg = linkRowData.itemsThisRow[selectionInfo.tooWideInd];
  // if (!rowLink) {
  // alert("!rowLink : "+idRoot);
  // }
  if ((rowLink.offsetWidth - centerContent.scrollLeft) > centerContent.offsetWidth) {
 //   tooWideImg.style.visibility='visible';
  } else {
  //  tooWideImg.style.visibility='hidden';
  }
}

var tmpScrollTooWide = new Array();

function tmpScrollTooWideRight(centerContentId,index) {
  var centerContent = document.getElementById(centerContentId);
  if (!centerContent) {
    alert("tmpScrollTooWideRight: centerContent not found of id '"+centerContentId+"'");
  }

  var itemsThisRow = centerContent.itemsByIndex[index];
  if (!itemsThisRow) {
    alert("tmpScrollTooWideRight: centerContent.itemsThisRow not found of cp1='"+centerContentId+"' index="+index);
  }

  var selectionInfo = getSelectionInfo(centerContent,centerContent.selectedIndex);

  var rowLink = itemsThisRow[selectionInfo.mainLinkInd];
  var tooWideImg = itemsThisRow[selectionInfo.tooWideInd];

  if ((rowLink.offsetWidth - centerContent.scrollLeft) > centerContent.offsetWidth) {
    tmpScrollTooWide[centerContentId] = [centerContent.scrollLeft,tooWideImg];
    centerContent.scrollLeft = rowLink.offsetWidth - centerContent.offsetWidth;
    scheduleQueueTooWide[centerContentId]=true;
    checkAllTooWideImmediately();
  }
}

function tmpScrollTooWideBack(centerContentId) {
  var centerContent = document.getElementById(centerContentId);
  if (tmpScrollTooWide[centerContentId]) {
    var tmp = tmpScrollTooWide[centerContentId];
    var tooWideImg = tmp[1];
    centerContent.scrollLeft = tmp[0];
    tooWideImg.style.visibility='visible';
    tmpScrollTooWide[centerContentId] = undefined;
    scheduleQueueTooWide[centerContentId]=true;
    checkAllTooWideImmediately();
  }
}

function doHoldScrollbarForPaging(evt,winEvt,scrollbarAreaDiv,
    scrollbarButtonDiv,  horizontal,
    centerContent,contentHeader,contentFooter,counter) {

  // window.status = "doHoldScrollbarForPaging:"+counter;

  var timeout;
  if (scrollbarAreaDiv.mousePagingDestination == "start") {
    var mousePos = getMousePos(evt, horizontal, winEvt);
    scrollbarAreaDiv.mousePagingDestination = mousePos;
    timeout = 500;
  } else if (scrollbarAreaDiv.mousePagingDestination == "stop") {
    return;
  } else {
    var mousePos = getMousePos(evt, horizontal, winEvt);
    var scrBtnPos = getPos(scrollbarButtonDiv, horizontal);
    var scrBtnSize = getScreenSize(scrollbarButtonDiv, horizontal);
    var dir = scrollbarAreaDiv.lastMousePagingDir;

    if (mousePos <= (scrBtnPos + scrBtnSize/2)) {
      if (dir != -1) {
        return;
      }
    } else {
      if (dir != 1) {
        return;
      }
    }

    doClickScrollbar(evt,winEvt,scrollbarAreaDiv,
        scrollbarButtonDiv,
        horizontal,
        centerContent,contentHeader,contentFooter);
    timeout = 100;
  }
  setTimeout(function() {
    doHoldScrollbarForPaging(evt,winEvt,scrollbarAreaDiv,
        scrollbarButtonDiv,  horizontal,
        centerContent,contentHeader,contentFooter,counter+1);
  }, timeout);
}

function moveScrollBar(evt,
    scrollbarAreaDiv,
    scrollbarAreaImg,
    scrollbarButtonDiv,
    scrollbarButtonDivImg,
    scrollbarExtDiv,
    centerContent,
    contentHeader,
    contentFooter,
    horizontal, extFrom, extTo) {
  var pos = findPos(scrollbarAreaDiv);
  var posDiv = findPos(scrollbarButtonDiv);
  var mouseP;
  if (evt)
    mouseP = [evt.clientX,evt.clientY];
  else
    mouseP = [event.x,event.y];

  var scrollbarBtnPos;

  if (horizontal) {
    dragStartPos = scrollbarButtonDiv.dragStartPos;
    if (!dragStartPos) {
      dragStartPos = scrollbarButtonDiv.dragStartPos = mouseP[0] - posDiv[0];
    }
    scrollbarBtnPos = mouseP[0] - pos[0] - dragStartPos;
  } else {
    dragStartPos = scrollbarButtonDiv.dragStartPos;
    if (!dragStartPos) {
      dragStartPos = scrollbarButtonDiv.dragStartPos = mouseP[1] - posDiv[1];
    }
    scrollbarBtnPos = mouseP[1] - pos[1] - dragStartPos;
  }

  scrollTo(
      scrollbarAreaDiv,
      scrollbarButtonDiv,
      centerContent,
      contentHeader,
      contentFooter,
      horizontal,
      scrollbarBtnPos);
}

function doClickScrollbar(evt,winEvt,scrollbarAreaDiv,
    scrollbarButtonDiv,  horizontal,
    centerContent,contentHeader,contentFooter) {

  var mousePos = getMousePos(evt, horizontal, winEvt);
  var scrBtnPos = getPos(scrollbarButtonDiv, horizontal);
  var scrBtnSize = getScreenSize(scrollbarButtonDiv, horizontal);

  var dir;
  if (mousePos <= (scrBtnPos + scrBtnSize/2)) {
    dir = -1;
  } else {
    dir = 1;
  }
  scrollbarAreaDiv.lastMousePagingDir = dir;

  pageUpOrDown(scrollbarAreaDiv,
      scrollbarButtonDiv,  horizontal, dir,
      centerContent,contentHeader,contentFooter);
}

function pageUpOrDown(scrollbarAreaDiv,
    scrollbarButtonDiv,  horizontal, dir,
    centerContent,contentHeader,contentFooter) {

  var scrollPage = getScreenSize(centerContent, horizontal);
  var delta = dir*scrollPage
  scrollWith(scrollbarAreaDiv,
      scrollbarButtonDiv,  horizontal, delta,
      centerContent,contentHeader,contentFooter);
}

function scrollWith(scrollbarAreaDiv,
    scrollbarButtonDiv,  horizontal, delta,
    centerContent,contentHeader,contentFooter) {

  //window.status = "scrollWith:"+delta;
  var scrollPos = getScrollPos(centerContent, horizontal);
  var scrollPos0 = scrollPos;

  scrollPos+=delta;

  scrollToByScrollPos(
      scrollbarAreaDiv,
      scrollbarButtonDiv,
      centerContent,
      contentHeader,
      contentFooter,
      horizontal,
      scrollPos);
}

function handleWheelEventImpl(
    scrollbarAreaDiv,scrollbarButtonDiv,
    centerContent,contentHeader,contentFooter,
    horizontal,delta) {

  var scrollPos = getScrollPos(centerContent, horizontal);
  scrollPos += delta;

  scrollToByScrollPos(
      scrollbarAreaDiv,
      scrollbarButtonDiv,
      centerContent,
      contentHeader,
      contentFooter,
      horizontal,
      scrollPos);
}

function scrollTo(
    scrollbarAreaDiv,
    scrollbarButtonDiv,
    centerContent,
    contentHeader,
    contentFooter,
    horizontal,
    scrollbarBtnPos) {

  if (horizontal) {
    scrollbarLength = scrollbarAreaDiv.offsetWidth - scrollbarButtonDiv.offsetWidth;

    scrollbarBtnPos = Math.max(scrollbarBtnPos, 0);
    scrollbarBtnPos = Math.min(scrollbarBtnPos, scrollbarLength);

    scrollLength = centerContent.scrollWidth - centerContent.offsetWidth;

    scrollPos = (scrollLength * scrollbarBtnPos) / scrollbarLength;
    scrollPos = Math.max(scrollPos, 0);
    scrollPos = Math.min(scrollPos, scrollLength);
    centerContent.scrollLeft = scrollPos;
    if (contentHeader) {
      contentHeader.scrollLeft = scrollPos;
    }
    if (contentFooter) {
      contentFooter.scrollLeft = scrollPos;
    }

    scrollbarBtnPos = Math.round(scrollbarBtnPos);
    scrollbarButtonDiv.style.left = scrollbarBtnPos+"px";
  } else {
    scrollbarLength = scrollbarAreaDiv.offsetHeight - scrollbarButtonDiv.offsetHeight;

    scrollbarBtnPos = Math.max(scrollbarBtnPos, 0);
    scrollbarBtnPos = Math.min(scrollbarBtnPos, scrollbarLength);

    scrollLength = centerContent.scrollHeight - centerContent.offsetHeight;

    scrollPos = (scrollLength * scrollbarBtnPos) / scrollbarLength;
    scrollPos = Math.max(scrollPos, 0);
    scrollPos = Math.min(scrollPos, scrollLength);
    centerContent.scrollTop = scrollPos;
    if (contentHeader) {
      contentHeader.scrollTop = scrollPos;
    }
    if (contentFooter) {
      contentFooter.scrollTop = scrollPos;
    }

    scrollbarBtnPos = Math.round(scrollbarBtnPos);
    scrollbarButtonDiv.style.top = scrollbarBtnPos+"px";
  }
  addScheduleCheckAllTooWide(centerContent.id);
}

function scrollToByScrollPos(
    scrollbarAreaDiv,
    scrollbarButtonDiv,
    centerContent,
    contentHeader,
    contentFooter,
    horizontal,
    scrollPos) {

  var scrollPos0 = scrollPos;
  if (horizontal) {
    scrollLength = centerContent.scrollWidth - centerContent.offsetWidth;

    scrollPos = Math.max(scrollPos, 0);
    scrollPos = Math.min(scrollPos, scrollLength);

    scrollbarLength = scrollbarAreaDiv.offsetWidth - scrollbarButtonDiv.offsetWidth;

    scrollbarBtnPos0 = scrollbarBtnPos = (scrollbarLength * scrollPos) / scrollLength;
    scrollbarBtnPos = Math.max(scrollbarBtnPos, 0);
    scrollbarBtnPos = Math.min(scrollbarBtnPos, scrollbarLength);
    scrollbarBtnPos = Math.round(scrollbarBtnPos);
    scrollbarButtonDiv.style.left = scrollbarBtnPos+"px";

    centerContent.scrollLeft = scrollPos;
    if (contentHeader) {
      contentHeader.scrollLeft = scrollPos;
    }
    if (contentFooter) {
      contentFooter.scrollLeft = scrollPos;
    }

    // window.status = "cP1.sw:"+centerContent.scrollWidth+ " -
    // cP1.ow:"+centerContent.offsetWidth+ " = scrollLength:"+scrollLength+
    // "scrollPos:"+scrollPos0+"->"+scrollPos+"
    // scrollbarLength:"+scrollbarLength+"
    // scrollbarBtnPos:"+scrollbarBtnPos0+"->"+scrollbarBtnPos;
  } else {
    scrollLength = centerContent.scrollHeight - centerContent.offsetHeight;

    scrollPos = Math.max(scrollPos, 0);
    scrollPos = Math.min(scrollPos, scrollLength);

    scrollbarLength = scrollbarAreaDiv.offsetHeight - scrollbarButtonDiv.offsetHeight;

    scrollbarBtnPos0 = scrollbarBtnPos = (scrollbarLength * scrollPos) / scrollLength;
    scrollbarBtnPos = Math.max(scrollbarBtnPos, 0);
    scrollbarBtnPos = Math.min(scrollbarBtnPos, scrollbarLength);
    scrollbarBtnPos = Math.round(scrollbarBtnPos);
    scrollbarButtonDiv.style.top = scrollbarBtnPos+"px";

    centerContent.scrollTop = scrollPos;
    if (contentHeader) {
      contentHeader.scrollTop = scrollPos;
    }
    if (contentFooter) {
      contentFooter.scrollTop = scrollPos;
    }

    // window.status = "cP1.sh:"+centerContent.scrollHeight+ " -
    // cP1.oh:"+centerContent.offsetHeight+ " = scrollLength:"+scrollLength+
    // "scrollPos:"+scrollPos0+"->"+scrollPos+"
    // scrollbarLength:"+scrollbarLength+"
    // scrollbarBtnPos:"+scrollbarBtnPos0+"->"+scrollbarBtn;
  }
  addScheduleCheckAllTooWide(centerContent.id);
}

function getScreenSize(panel, horizontal) {
  if (horizontal) {
    return panel.offsetWidth;
  } else {
    return panel.offsetHeight;
  }
}

function setSize(panel, size, horizontal) {
  if (horizontal) {
    return panel.style.width = size+"px";
  } else {
    return panel.style.height = size+"px";
  }
}

function getScrollSize(panel, horizontal) {
  if (horizontal) {
    return panel.scrollWidth;
  } else {
    return panel.scrollHeight;
  }
}

function getPos(panel, horizontal) {
  var pos = findPos(panel);
  if (horizontal) {
    return pos[0];
  } else {
    return pos[1];
  }
}

function getOffsetPos(panel, horizontal) {
  if (horizontal) {
    return panel.offsetLeft;
  } else {
    return panel.offsetTop;
  }
}

function getScrollPos(panel, horizontal) {
  if (horizontal) {
    return panel.scrollLeft;
  } else {
    return panel.scrollTop;
  }
}

function getMousePos(evt, horizontal, winEvt) {
  var pos = mousePos(evt, winEvt);
  if (horizontal) {
    return pos[0];
  } else {
    return pos[1];
  }
}