//
// JavaScript Code to resize pictures based on the size of the browser
//
// (C) Andy Spiegl, Radio Marañón, Jaén, Perú, November 2001
//

// the following is VERY browser dependent
function resizePic(img_url,img_alt) {
  if (document.getElementById) {  // DOM3 = IE5, NN6
    resizePicDOM();
  } else { if (document.layers) { // NN4
    resizePicNN4(img_url,img_alt);
  } else {        // IE4
    resizePicIE4();
} } }

function resizePicDOM() {
  var browser_width, browser_height;
  var navbutton_width, navbutton_height;
//  var img_width, img_height;
  var dest_width, dest_height;
  var proportion;

  // available inner dimensions of window
  if (navigator.userAgent.indexOf("Opera") >= 0) 
  {
    browser_width = window.innerWidth;
    browser_height = window.innerHeight;
    navbutton_width = document.getElementById('CloseButton').width;
    navbutton_height = document.getElementById('CloseButton').height;
  }
  else
  if ((navigator.userAgent.indexOf("Mozilla") >= 0) && 
      (navigator.userAgent.indexOf("MSIE") < 0))
  {
    browser_width = window.innerWidth;
    browser_height = window.innerHeight;
    navbutton_width = document.images["CloseButton"].width;
    navbutton_height = document.images["CloseButton"].height;
  } else {
    browser_width = document.all.MyTable.offsetWidth;
    browser_height = document.all.MyBody.offsetHeight;
    navbutton_width = document.getElementById('CloseButton').width;
    navbutton_height = document.getElementById('CloseButton').height;
  }

  browser_height -= navbutton_height;
  browser_height -= 15;  // extra distances
  browser_height -= 18;  // picture subtitle
  browser_width -= 15;   // extra distances

  // this leads to strange and thus unusable values
//  img_width = document.getElementById('MyImage').width;
//  img_height = document.getElementById('MyImage').height;

  if ((real_img_width/browser_width) > (real_img_height/browser_height)){
    proportion = real_img_width/browser_width;
  } else {
    proportion = real_img_height/browser_height;
  }

  // do not zoom to more than 100%
  if (proportion < 1.0 ){
    proportion = 1;
  }

  dest_width = real_img_width / proportion;
  dest_height = real_img_height / proportion;

  document.getElementById('MyImage').width = dest_width;
  document.getElementById('MyImage').height = dest_height;

  // shows proportion percentage
  if (proportion != 1.0 ){
    document.getElementById('proportiontext').firstChild.data = Math.round(100 * dest_width / real_img_width) + '%';
//    document.all.proportiontext.innerText = Math.round(100 * dest_width / real_img_width) + '%';
//    document.getElementById('proportiontext').outerHTML = '<font id="proportiontext" color="yellow">' + Math.round(100 * dest_width / real_img_width) + '%</font>';
  }
  else{
    document.getElementById('proportiontext').firstChild.data = '';
  }
}

function resizePicNN4(img_url,img_alt) {
  var browser_width, browser_height;
  var navbutton_width, navbutton_height;
  var img_width, img_height;
  var dest_width, dest_height;
  var proportion;
  var navbutton_distance = 5;

  navbutton_width = document.CloseButton.width;
  navbutton_height = document.CloseButton.height;

  // minimal distance
  navbutton_height = Math.max(20,navbutton_height);

  browser_width = window.innerWidth;
  browser_height = window.innerHeight;

  if (window.scrollbars.visible == true)
  {
    browser_width -= 15;
    browser_height -= 15;
  }

  browser_height -= navbutton_height;
  browser_height -= navbutton_distance;
  browser_height -= 16;  // picture subtitle

  img_width = real_img_width;
  img_height = real_img_height;

  if ((img_width/browser_width) > (img_height/browser_height)) {
      proportion = img_width/browser_width;
  } else {
      proportion = img_height/browser_height;
  }

  dest_width = img_width / proportion;
  dest_height = img_height / proportion;

  // to delete unscaled picture
  var l1 = new Layer(dest_width);
  l1.resizeTo(real_img_width + 200,real_img_height + 200);
  l1.bgColor = document.bgColor;
  l1.left = 0;
  l1.top = navbutton_height + navbutton_distance;  // keep the buttons at the top
  l1.visibility = 'show';

  // contains scaled picture
  var l2 = new Layer(browser_width);
  l2.bgColor = document.bgColor;
  l2.left = 0;
  l2.top = navbutton_height + navbutton_distance;

  var html = '';
  html += '<center>';
  html += '<img src="'+ img_url +'"';
  html += ' width="' + dest_width + '" height="' + dest_height;
  html += ' alt="' + img_alt + '">';
  html += '</center>';
  html += '<center>'+ img_alt +'</center>';
  l2.document.open();
  l2.document.write(html);
  l2.document.close();
  l2.visibility = 'show';

  // shows proportion percentage
  var l3 = new Layer(40);
  l3.resizeTo(40,20);
  l3.bgColor = document.bgColor;
  l3.left = 5;
  l3.top = 5;

  var html2 = '';
  html2 += '<font color="yellow">';
  html2 += Math.round(100/proportion) + '%';
  html2 += '</font>';

  l3.document.open();
  l3.document.write(html2);
  l3.document.close();
  l3.visibility = 'show';

  window.scrollTo(0,0);
}

function resizePicIE4() {
  var browser_width, browser_height;
  var navbutton_width, navbutton_height;
  var img_width, img_height;
  var dest_width, dest_height;
  var proportion;

  // available inner dimensions of window
  browser_width = document.all.MyTable.offsetWidth;
  browser_height = document.all.MyBody.offsetHeight;

  img_width = document.all.MyImage.width;
  img_height = document.all.MyImage.height;

  navbutton_width = document.all.CloseButton.width;
  navbutton_height = document.all.CloseButton.height;

  browser_height -= navbutton_height;
  browser_height -= 15;  // extra distances
  browser_height -= 23;  // picture subtitle

  img_width = document.all.MyImage.width;
  img_height = document.all.MyImage.height;

  if ((img_width/browser_width) > (img_height/browser_height)) {
    proportion = img_width/browser_width;
    } else {
    proportion = img_height/browser_height;
  }

  dest_width = img_width / proportion;
  dest_height = img_height / proportion;

  document.all.MyImage.width = dest_width;
  document.all.MyImage.height = dest_height;
  // shows proportion percentage
  document.all.proportiontext.innerText = Math.round(100 * dest_width / real_img_width) + '%';
//  document.getElementById('proportiontext').outerHTML = '<p id=proportiontext><font color="yellow">' + Math.round(100 * dest_width / real_img_width) + '%</font></p>';
}