function placeLayerOverLayer(layer1,layer2,offsetX,offsetY) {

  baseX = Number(document.getElementById(layer2).style.left.replace(/px/,""));
  posLeft = baseX + offsetX;
  document.getElementById(layer1).style.left   = posLeft + 'px';

  baseY = Number(document.getElementById(layer2).style.top.replace(/px/,""));
  posTop = baseY + offsetY;
  document.getElementById(layer1).style.top   = posTop + 'px';

  document.getElementById(layer1).style.zIndex      = '10';
  document.getElementById(layer1).style.visibility  = 'visible';
}


function centerHorizontal(objID) {
  // if image in layer exists, take size of image:  
  var imgID = objID.replace(/layer/,"image");
  try       { var layerWidth = document.getElementById(imgID).offsetWidth; }
  catch (e) { var layerWidth = document.getElementById(objID).offsetWidth; }

  var baseLeft = document.getElementById('layerIndex').offsetWidth;
  var areaWidth = screen.width - baseLeft;

  var leftCorner = Math.max(baseLeft,baseLeft + (areaWidth - layerWidth)/2);  
  document.getElementById(objID).style.left       = leftCorner;
}

function centerVertical(objID) {
  var layerHeight = document.getElementById(objID).offsetHeight;

  var baseTop = 20;
  var areaHeight = (0.9 * screen.height) - baseTop;
  var topCorner = Math.max(baseTop,baseTop + (areaHeight - layerHeight)/2);
 
  document.getElementById(objID).style.top = topCorner;
}

function placeMainTitle() {

  try { 
       objectWidths = document.getElementById('layerIndex').offsetWidth + 
                      document.getElementById('imageTitle').offsetWidth;
       if (screen.width < objectWidths)
         placeTitle(screen.width/(1.2*objectWidths));
       else
         placeTitle(1);
      }
  catch(e) {placeTitle(1);}

}

function placeUsageTitle() {

  try { 
       objectHeights = 600 + document.getElementById('imageTitle').offsetHeight;

       //alert('objectHeight: ' +objectHeights);
       //alert('screenHeight: ' +screen.height);

       if ((screen.height) < objectHeights)
         placeTitle(0.4);
       else
         placeTitle(0.6);
      }
  catch(e) {placeTitle(0.6);}
}

function placeTitle(resizePercent) {
  width  = document.getElementById('imageTitle').offsetWidth  * resizePercent;
  height = document.getElementById('imageTitle').offsetHeight * resizePercent;
  
  document.getElementById('imageTitle').setAttribute("width",width,0);
  document.getElementById('imageTitle').setAttribute("height",height,0);
  
  centerHorizontal('layerTitle');

  var baseTop = screen.height * 0.01;
  document.getElementById('layerTitle').style.top        = baseTop;
  document.getElementById('layerTitle').style.visibility = 'visible';
}

function placePanel() {
  centerVertical('layerIndex');
  document.getElementById('layerIndex').style.left       = 20;
  document.getElementById('layerIndex').style.visibility = 'visible';
}

function placeCounter() {

  baseY = Number(document.getElementById('layerIndex').style.top.replace(/px/,""));
  height = document.getElementById('layerIndex').offsetHeight;
  posTop = baseY + height + 20;
  document.getElementById('layerCounter').style.top   = posTop + 'px';
  document.getElementById('layerCounter').style.left  = document.getElementById('layerIndex').style.left;
  document.getElementById('layerCounter').style.visibility = 'visible';

}

function swapImage(idxID) {
  var objID = idxID.replace(/index/,"img");
  var src = document.getElementById(objID).getAttribute("src");
  
  if ( src.search(/_out_/) != -1)
  { src = src.replace(/_out_/, "_in_"); document.getElementById(objID).removeAttribute("width", 0);document.getElementById(objID).removeAttribute("height", 0);}
  else
  { src = src.replace(/_in_/, "_out_"); document.getElementById(objID).setAttribute("width","36",0);document.getElementById(objID).setAttribute("height","27",0);}
  
  document.getElementById(objID).setAttribute("src",src,0);
}

function setVisible(objID) {
  document.getElementById(objID).style.visibility = 'visible';
}

function setInvisible(objID) {
  document.getElementById(objID).style.visibility = 'hidden';
}

function setBackgroundImage(URL) {
  var width  = Number(screen.width);
  var height = Number(screen.height);
  var dir    = String(URL);

  if ( width <= 1024 && height <= 768 )
     backgroundImage = 'backgroundheart_1024x768.jpg';
  else if (width <= 1152 && height <= 864)
     backgroundImage = 'backgroundheart_1152x864.jpg';
  else if (width <= 1280 && height <= 1024)
     backgroundImage = 'backgroundheart_1280x1024.jpg';
  else if (width <= 1600 && height <= 1200)
     backgroundImage = 'backgroundheart_1600x1200.jpg';
  else 
     backgroundImage = 'backgroundheart_1792x1344.jpg';
  //alert('width: '+width+' height: '+height);
  //alert('image: '+backgroundImage);
  if (dir == 'undefined')
     dir = './pics/';
  document.getElementsByTagName("body")[0].style.backgroundImage = "url('" +dir+ backgroundImage + "')" ;
}

function setClass(objID,className) {
  obj = document.getElementById(objID);
  
  // stupid IE needs a loop to change class:  
  for (var i = 0; i < obj.attributes.length; i++) {
    var attrName = obj.attributes[i].name.toUpperCase();
    if (attrName == 'CLASS') { obj.attributes[i].value = className; }
   }

}

function adjustTransparentBackground(layerID)
{

  baseX = Number(document.getElementById(layerID).style.left.replace(/px/,""));
  posLeft = baseX - 5;
  document.getElementById("layerTransparentBackground").style.left   = posLeft + 'px';

  baseY = Number(document.getElementById(layerID).style.top.replace(/px/,""));
  posTop = baseY - 5;
  document.getElementById("layerTransparentBackground").style.top   = posTop + 'px';

  document.getElementById("layerTransparentBackground").style.zIndex = 0;

  layerWidth  = document.getElementById(layerID).offsetWidth + 10;
  layerHeight = document.getElementById(layerID).offsetHeight + 10;

  //alert('width: ' + document.getElementById(layerID).offsetWidth);
  //alert('height: ' + layerHeight);

  document.getElementById("tableTransparentBackground").width    = layerWidth;
  document.getElementById("tdTransparentBackground").height      = layerHeight;
  setVisible("layerTransparentBackground");
}

function linkHover(objID,type)
{
   if (type == 'in') {document.getElementById(objID).style.textDecoration = 'underline'; }
   else {document.getElementById(objID).style.textDecoration = 'none';}
}

function placeMainLayer(layerID) {

  centerHorizontal(layerID);
  centerVertical(layerID);
  posTop = document.getElementById('layerTitle').offsetHeight;
  posTop += 30;

  if (posTop > Number(document.getElementById(layerID).style.top.replace(/px/,"")) )
  { document.getElementById(layerID).style.top         = posTop; }

  document.getElementById(layerID).style.zIndex        = 1;
  document.getElementById(layerID).style.visibility    = 'visible';
}

function placeInCenter(layerID) {
  centerHorizontal(layerID);
  centerVertical(layerID);
  setVisible(layerID);
}


/* for tooltip or similar:
var mouseX = 0;
var mouseY = 0;

function getMousePosition(e)
{
   if (!e) e = window.event;  // get event for IE
   mouseX = e.clientX;
   mouseY = e.clientY;
}

document.onmouseover = getMousePosition;
*/