function getClientWidth() {
  return document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientWidth:document.body.clientWidth;
}

function getClientHeight() {
  return document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientHeight:document.body.clientHeight;
}



function sizepage() {

	// remove wait icon if applicable
    if (!(document.getElementById('wait') == undefined)) {
	  document.getElementById('wait').style.top = -4000;
    }



	var availwidth = getClientWidth();
	var availheight = getClientHeight();


	// ideally, we want a height of 70% of the client area
	var goodheight = availheight*.7;
	var goodwidth = 326 + (goodheight * 1.5);

	// will this be too wide?  If so, use a smaller height
    if (goodwidth > .9*availwidth) {
		goodheight = (.9*availwidth) / (goodwidth) * goodheight;
		goodwidth = 326 + (goodheight * 1.5);
	}

	// will this be too narrow
	if (goodwidth < 700) {
		goodwidth = 700;
		goodheight = (goodwidth - 326) * .666666666
	}



	goodwidth = Math.floor(goodwidth);
	goodheight = Math.floor(goodheight);
	var rightwidth = goodwidth - 326;

	// ideal font size for links

	if (availheight < rightwidth) {
  	  var fontsize = availheight * .0375; 
    } else {
	  var fontsize = rightwidth * .0375;
    }

	if (fontsize < 14) {
		fontsize = 14;
	}

	if (fontsize > 24) {
		fontsize = 24;
	}

	maintextsize = Math.floor(fontsize * .88);
	if (maintextsize<12) {
		maintextsize = 12;
	}
    smalltextsize = Math.floor(fontsize * .70);
	if (smalltextsize<11) {
		smalltextsize = 11;
	}

	// set size & location of things

	topspot = availheight/2 - goodheight/2 - (fontsize*1.35)/2;
	leftspot = availwidth/2 - goodwidth/2;
	if (topspot < 0) {
		topspot=0;
	}
	if (leftspot <0) {
		leftspot=0;
	}
	topspot = Math.floor(topspot);
	leftspot = Math.floor(leftspot);

	document.getElementById('wholething').style.top = topspot;
	document.getElementById('wholething').style.left = leftspot;

	document.getElementById('mainleft').width = 310;
	document.getElementById('mainleft').minWidth = 310;
	document.getElementById('mainleft').height = goodheight;

	document.getElementById('mainlinks').width = goodwidth - 326;
	document.getElementById('mainlinks').height = fontsize * 1.35;

	document.getElementById('mainright').width = goodwidth - 326;
	document.getElementById('mainright').height = goodheight;
	document.getElementById('mainimg').width = goodwidth - 326;
	document.getElementById('mainimg').height = goodheight;


	// fonts and stuffs

    document.getElementById('mainlinks').style.fontSize = fontsize;
    // set vertical position for main links area relative to font size
    document.getElementById('mainlinks').style.top = topspot - (fontsize*1.35);
    document.getElementById('mainlinks').style.left = leftspot + 326;


	// locate the overlaytext


    // make overlay text's font 88% as big as the top links, also adjust it's sizing to not exceed size of 'rightside'
    if (!(document.getElementById('overlaytext') == undefined)) {
	  document.getElementById('overlaytext').style.top =  getXYpos(document.getElementById('mainright'))['y'] + 15;
  	  document.getElementById('overlaytext').style.left = getXYpos(document.getElementById('mainright'))['x'] + 15;
      document.getElementById('overlaytext').style.fontSize = maintextsize;
      document.getElementById('overlaytext').style.width = document.getElementById('mainright').offsetWidth -30;
      document.getElementById('overlaytext').style.height = document.getElementById('mainright').offsetHeight -30;
    }
    if (!(document.getElementById('overlaytext2') == undefined)) {
      document.getElementById('overlaytext2').style.fontSize = maintextsize;
    }
    if (!(document.getElementById('overlaytext3') == undefined)) {
      document.getElementById('overlaytext3').style.fontSize = maintextsize;
    }
    if (!(document.getElementById('overlaytext4') == undefined)) {
      document.getElementById('overlaytext4').style.fontSize = maintextsize;
    }
    if (!(document.getElementById('overlaytext5') == undefined)) {
      document.getElementById('overlaytext5').style.fontSize = maintextsize;
    }
	changecss('.textclass','fontSize', maintextsize*.75);
}

function changecss(myclass,element,value) {
	var CSSRules
	if (document.all) {
		CSSRules = 'rules'
	}
	else if (document.getElementById) {
		CSSRules = 'cssRules'
	}
	for (var i = 0; i < document.styleSheets[0][CSSRules].length; i++) {
		if (document.styleSheets[0][CSSRules][i].selectorText == myclass) {
			document.styleSheets[0][CSSRules][i].style[element] = value
		}
	}	
}
function getXYpos(elem) {
   if (!elem) {
      return {"x":0,"y":0};
   }
   var xy={"x":elem.offsetLeft,"y":elem.offsetTop}
   var par=getXYpos(elem.offsetParent);
   for (var key in par) {
      xy[key]+=par[key];
   }
   return xy;
}
function checkImgSize() {
  var ch = getClientHeight();
  var cw = getClientWidth();
  var dw = .7 * cw - 326;
  var dh = .7 * ch;
  var iw = dw;
  var ih = dh;
  // set size of main image
  document.getElementById('mainimg').height = ih;
  document.getElementById('rightside').height = ih;
  document.getElementById('leftside').height = ih;
  var actualiw = ih * 1.5;
  // set font size for main links
  var fontsize = (dh * .05);
  if (fontsize < 12) {
    fontsize = 12;
  }
  document.getElementById('mainlinks').style.fontSize = fontsize;
  // set vertical position for main links area relative to font size
  document.getElementById('rightsidetop').style.top = 0 - (fontsize*1.35);

  // make overlay text 75% as big as the top links, also adjust it's sizing to not exceed size of 'rightside'
  if (!(document.getElementById('overlaytext') == undefined)) {
    document.getElementById('overlaytext').style.fontSize = fontsize * .88;
    document.getElementById('overlaytext').style.width = actualiw - 30;
  }
}

function bestheight() {
  // adjust images to match screen.height
  var plentyh = .7 * screen.height
  var besth = 300;
  if (plentyh > 30) {
    besth = ((Math.floor((plentyh-1)/100)) + 1) * 100;
	if (besth > 1200) {
      besth = 1200;
	}
    if (besth < 200) {
      besth = 200;
    }
  }
  return besth;
}

function setmainimg(fl) {
  document.getElementById('mainimg').src='scaled_images/200/' + fl; 
  document.getElementById('mainimg').src='scaled_images/' + bestheight() + '/' + fl; 
}