var timeField;

function getAbsolutePos(el) {
   var SL = 0, ST = 0;
   var is_div = /^div$/i.test(el.tagName);
   if (is_div && el.scrollLeft)
      SL = el.scrollLeft;
   if (is_div && el.scrollTop)
      ST = el.scrollTop;
   var r = { x: el.offsetLeft - SL, y: el.offsetTop - ST };
   if (el.offsetParent) {
      var tmp = this.getAbsolutePos(el.offsetParent);
      r.x += tmp.x;
      r.y += tmp.y;
   }
   return r;
}

function showTimepicker(theField, event) {
  timeField = theField
  obj=document.getElementById('timepicker');

  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement &&
      ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }

  divHeight = document.getElementById('timepicker').height || document.getElementById('timepicker').offsetHeight || document.getElementById('timepicker').style.height;
  divWidth = document.getElementById('timepicker').width || document.getElementById('timepicker').offsetWidth || document.getElementById('timepicker').style.width;
  
  if ((event.clientY + divHeight) > myHeight)
     obj.style.top = myHeight - divHeight - 4;
  else
     obj.style.top = event.clientY;
  if (parseInt(obj.style.top) < 0)
     obj.style.top = 4;

  if ((event.clientX + divWidth) > myWidth)
     obj.style.left = myWidth - divWidth - 4;
  else
     obj.style.left = event.clientX;
  if (parseInt(obj.style.left) < 0)
     obj.style.left = 4;
  
  showHideSelects('timepicker', 'hidden');

  obj.style.display = 'block';
  obj.style.visibility = 'visible';
}

function chooseTime(theTime) {
  obj=document.getElementById(timeField);
  obj.value = theTime;
  obj=document.getElementById('timepicker');
  obj.style.visibility = 'hidden';
  showHideSelects('timepicker', 'visible');
}

function cancelTime() {
  obj=document.getElementById('timepicker');
  obj.style.visibility = 'hidden';
  showHideSelects('timepicker', 'visible');
}

function showHideSelects(theDiv, vis) {
  var p = { x: 1, y: 1};
  var el = document.getElementById(theDiv)
  p = getAbsolutePos(el);

  var EX1 = p.x;
  var EX2 = el.offsetWidth + EX1;
  var EY1 = p.y;
  var EY2 = el.offsetHeight + EY1;

  var ar = document.getElementsByTagName('select');
  var cc = null;

  for (var i = ar.length; i > 0;) {
      cc = ar[--i];

      p = Calendar.getAbsolutePos(cc);
      var CX1 = p.x;
      var CX2 = cc.offsetWidth + CX1;
      var CY1 = p.y;
      var CY2 = cc.offsetHeight + CY1;

      if ((CX1 > EX2) || (CX2 < EX1) || (CY1 > EY2) || (CY2 < EY1))
         cc.style.visibility = 'visible'
      else
         cc.style.visibility = vis;
  }
}