var dfltLeft = '2em';

function dbgMsg(msg) {
    //alert(msg);
}

function pageRight() {
  return ('number' == typeof(window.pageXOffset) 
		  ? window.pageXOffset 
		  : document.body.scrollLeft)
	+(document.body.scrollWidth);
  //parseInt(window.getComputedStyle(document.body, null).width);
}

function nodeLeft(node) {
  var oleft = node.offsetLeft;
  while (node.offsetParent) {
	node = node.offsetParent;
	oleft += node.offsetLeft;
  }
  return oleft;
}

function viewReport() {
  alert('pageRight: '+pageRight()
		+'\npageXOffset: '+window.pageXOffset
        +'\nscrollLeft: ' + document.body.scrollLeft
		+';  scrollWidth: ' + document.body.scrollWidth
		+'\n');
}

function centerOn(expl, img) {
  var left, wid=expl.offsetWidth, maxRight=pageRight()-16;
  /* scaffolding */
  //var rpt='', center, li=upTo(img, 'LI');
  /* /scaffolding */
  
  /* calc center */
  left = nodeLeft(img) + (img.offsetWidth>>1) - (wid>>1);
  //center = nodeLeft(img) + (img.offsetWidth>>1);
  /* left = center	- (wid >> 1);*/
  //rpt = 'left: '+left+';\n';
  rpt = 'img.parent.offsetLeft: '+img.parentNode.offsetLeft+';\n';
  if (left > 0) {
	left = Math.max(0, Math.min(maxRight-wid, left)) + 'px';
  } else {
	left = dfltLeft;
  }
  /* scaffolding */
  /*
  rpt+= 'img: |'+img.offsetLeft + ', '+ (img.offsetWidth>>1)+'|;\n';
  rpt+='max: ('+(maxRight-wid)+', ' + maxRight+')\n';
  rpt+='left: ' +left+';  '+li.id+';  \n'+expl.id+'.width: '+wid+';  halfwid: '+(wid>>1);
  alert(rpt);
  /* /scaffolding */
  return left;
}

var explain = (function (expl) {
  return function(photo) {
    
    var img, left=dfltLeft;
    if ('string' == typeof(photo)) {
	  img = document.getElementById(photo);
      photo = document.getElementById('Explain_'+photo);
    } else if ('A' == photo.nodeName) {
	  for (var i=0; i<photo.childNodes.length; ++i) {
		if ('IMG' == photo.childNodes[i].nodeName) {
		  img = photo.childNodes[i];
		}
	  }
      for (photo = photo.nextSibling; photo.nextSibling && !photo.tagName; photo = photo.nextSibling) {}
    } else if ('IMG' == photo.nodeName) {
	  img = photo;
	  photo = photo.parentNode;
      for (photo = photo.nextSibling; photo.nextSibling && !photo.tagName; photo = photo.nextSibling) {}
	}
    if (img) {
	  left = centerOn(photo, img);
	}
    if (photo)
      return expl(photo, left);
  }
})(oneOnscreen());

function upTo(node, nodeName) {
  //for (node=node.parentNode; 'DIV' != node.nodeName; node=node.parentNode) {}
  node=node.parentNode; 
  if (nodeName != node.nodeName)
    node=node.parentNode
  return node;
}

function upToDiv(node) {
  //for (node=node.parentNode; 'DIV' != node.nodeName; node=node.parentNode) {}
  return upTo(node, 'DIV');
}

function repositionExplanations() {
  var photos = document.getElementsByName('photobarImg'),
	expls = document.getElementsByName('explanationImg'),
	styl, left, wid, expl;
  /* scaffolding */
  var rpt='', li;
  /* /scaffolding */

  

  for (var i=0; i<expls.length; ++i) {
    left = photos[i].offsetLeft+(photos[i].width)>>1;
	expl = upToDiv(expls[i]);

    left = centerOn(expl, photos[i]);

    styl = window.getComputedStyle(expl, null);
	wid = parseInt(styl.width);
	/* scaffolding */
    li = upTo(photos[i], 'LI');
    rpt += li.id+'.middle: '+left+';  '+expl.id+'.halfwidth: '+(wid>>1)+';  ';
	/* /scaffolding */
    if (left) {
	  left -= wid >> 1;
	  if (expl.className.indexOf('right') > -1) {
		expl.style.left = Math.min(maxRight-wid, left) + 'px';
		/* scaffolding */
		rpt += expl.id+'.left='+expl.style.left+'\n';
		/* /scaffolding */
	  } else {
		expl.style.left = Math.max(0, left) + 'px';
		/* scaffolding */
		rpt += expl.id+'.left='+expl.style.left+'\n';
		/* /scaffolding */
	  }
	}
  }
  //dbgMsg(rpt);
}