function getOffset(elem) {
    if (elem.getBoundingClientRect) {
        // "??????????" ???????
        return getOffsetRect(elem);
    } else {
        // ????? ???????? ???? ???-??
        return getOffsetSum(elem);
    }
}

function getOffsetSum(elem) {
    var top=0, left=0;
    while(elem) {
        top = top + parseInt(elem.offsetTop);
        left = left + parseInt(elem.offsetLeft);
        elem = elem.offsetParent;
    }

    return {top: top, left: left};
}

function getOffsetRect(elem) {
    // (1)
    var box = elem.getBoundingClientRect();

    // (2)
    var body = document.body;
    var docElem = document.documentElement;

    // (3)
    var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
    var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;

    // (4)
    var clientTop = docElem.clientTop || body.clientTop || 0;
    var clientLeft = docElem.clientLeft || body.clientLeft || 0;

    // (5)
    var top  = box.top +  scrollTop - clientTop;
    var left = box.left + scrollLeft - clientLeft;

    return { top: Math.round(top), left: Math.round(left) };
}

function setWidth(el, w) {
  el.style.width = w + 'px';
  var d = el.clientWidth - w;
  if(d > 0) {
    el.style.width = (parseInt(el.style.width) - d) + 'px';
  }
}

function setHeight(el, h) {
  el.style.height = h + 'px';
  var d = el.clientHeight - h;
  if(d > 0) {
    el.style.height = (parseInt(el.style.height) - d) + 'px';
  }
}

function updateHeader(headerElems, origElems) {

  var scroll = document.documentElement.scrollLeft + document.body.scrollLeft;
  
  for (var i=0; i<origElems.length; ++i) {
    var elem = origElems[i];
	var p = getOffset(elem);
	var cc = headerElems[i].style;
	cc.left = p.left - scroll + 'px';
	cc.top = 0;
    setWidth(headerElems[i], elem.clientWidth);
	setHeight(headerElems[i], elem.clientHeight);
  }
}

window.onload = function() {
  var main = document.getElementById('comparatable');
  var temp = document.getElementById('temp');
  var thead = main.getElementsByTagName('thead').item(0);
  var cells = main.getElementsByTagName('tr').item(0).getElementsByTagName('th');
  
  var agt = navigator.userAgent.toLowerCase();
  if(agt.indexOf("msie") != -1){
    if (agt.substr(agt.indexOf("msie")+5,1)*1 <= 6){
		temp.style.display = 'none';
		return;
	}
  }
  
  main.getElementsByTagName('tfoot').item(0).style.display = 'none';
  
  var scrolling = false;

  updateHeader(temp.getElementsByTagName('div'), cells);

  this.onscroll = function() {
    if(!scrolling) {
      if(document.documentElement.scrollTop + document.body.scrollTop >= getOffset(main).top) {
		scrolling = true;
        thead.style.visibility = 'hidden';
        temp.style.visibility = 'visible';
      }
    }
    else {
      if(document.documentElement.scrollTop + document.body.scrollTop <= getOffset(main).top) {
        scrolling = false;
        temp.style.visibility = 'hidden';
        thead.style.visibility = 'visible';
      }
    }
	updateHeader(temp.getElementsByTagName('div'), cells);
  }

  this.onresize = function() {
    if(temp.clientWidth < main.clientWidth) {
      temp.style.width = main.clientWidth + 'px';
    }
	updateHeader(temp.getElementsByTagName('div'), cells);
  }
  window.onscroll();
}