document.write('<span id="image_show_hide_area" style="visibility:hidden;">Image Area</span>');

function imgShow(image) {

	// alert ("image.width = " + image.width + ", image.height = " + image.height + ", image.src = " + image.src);


  // get calling element's absolute left/top coordinates within page
  var image_show_left = 0;
  var image_show_top  = 0;	

  element = image;	
  while (element) {
    image_show_left  += element.offsetLeft;
    image_show_top   += element.offsetTop;
    element   = element.offsetParent;
  }
  // alert ('image_show_left = ' + image_show_left + ', image_show_top = ' + image_show_top);


	// create url of image to be shown 
	image_show_src = image.src.replace(/_thumb./, ".");


	// get image to be shown
	document.getElementById("image_show_hide_area").innerHTML =
	  '<img src="' +
      image_show_src + 
		  '" ' +
			'style="visibility:hidden;position:absolute;left:' + image_show_left + ';top:' + image_show_top + ';" ' + 
			'id="image_show" ' +	
			'onLoad="imgLoaded(this)"' +					
    '>';
}
		

function imgLoaded(image) {
		
  // get calling element's absolute left/top coordinates within page
  var image_show_left = 0;
  var image_show_top  = 0;	

  element = image;	
  while (element) {
    image_show_left  += element.offsetLeft;
    image_show_top   += element.offsetTop;
    element   = element.offsetParent;
  }
  // alert ('image_show_left = ' + image_show_left + ', image_show_top = ' + image_show_top);


	// get width and height of visible page area in browser
  visible_page_area_width  = document.body.clientWidth;
  visible_page_area_height = document.body.clientHeight;
  // alert ('visible_page_area_width = ' + visible_page_area_width + ', visible_page_area_height = ' + visible_page_area_height);	


  // get width and height of image to be shown
  image_show_width  = document.getElementById("image_show").width;
  image_show_height = document.getElementById("image_show").height;
  // alert ("image_show_width = " + image_show_width + ", image_show_height = " + image_show_height);
	
	

  // check wheter width of image to be shown fits into visible page area in browser
	var too_wide_factor = 100;	
	if (visible_page_area_width < (image_show_width + 40)) {
	  // image to be shown is wider than visible page area in browser
	  too_wide_factor = visible_page_area_width / (image_show_width + 40);
		// alert ("too_wide_factor = " + too_wide_factor);
	}
	else {
	  // its ok
	}	
	
	
  // check wheter height of image to be shown fits into visible page area in browser
	var too_high_factor = 100;	
	if (visible_page_area_height < (image_show_height + 80)) {
	  // image to be shown is higher than visible page area in browser
	  too_high_factor = visible_page_area_height / (image_show_height + 80);
		// alert ("too_high_factor = " + too_high_factor);
	}
	else {
	  // its ok
	}
	
	
  // check wheter image width or height is too large to be shown and must be resized
  if (too_wide_factor < too_high_factor) {
	  // alert ('img width resize done: too_wide_factor = ' + too_wide_factor + ', image_show_width = ' + image_show_width + ', image_show_height = ' + image_show_height);
    image_show_width  = image_show_width  * too_wide_factor; 
    image_show_height = image_show_height * too_wide_factor;
	  // alert ('img width resize done: too_wide_factor = ' + too_wide_factor + ', image_show_width = ' + image_show_width + ', image_show_height = ' + image_show_height);			
	}
  if (too_high_factor < too_wide_factor) {
	  // alert ('img height resize done: too_high_factor = ' + too_high_factor + ', image_show_width = ' + image_show_width + ', image_show_height = ' + image_show_height);
    image_show_width  = image_show_width  * too_high_factor; 
    image_show_height = image_show_height * too_high_factor;
	  // alert ('img height resize done: too_high_factor = ' + too_high_factor + ', image_show_width = ' + image_show_width + ', image_show_height = ' + image_show_height);			
	}
	

  // get left/top coordinates of visible page area in browser
	visible_page_area_left = document.body.scrollLeft;
	visible_page_area_top  = document.body.scrollTop;	 
  // alert ('visible_page_area_left = ' + visible_page_area_left + ', visible_page_area_top = ' + visible_page_area_top);
	

  // compute rightmost boundary of image to be shown
	image_show_right = image_show_left + image_show_width + 15;
  // alert ("image_show_right = " + image_show_right);


  // check wheter image can be shown without horizontal scrolling	
	if ((visible_page_area_left + visible_page_area_width) < image_show_right) {
	  // shift image to the left
		image_show_left = visible_page_area_width - (image_show_width + 15);
    // alert ("image_show_left = " + image_show_left);
	}
	else {
    // alert ("image width is o.k.");	
	}


  // compute bottom boundary of image to be shown
	image_show_bottom = image_show_top + image_show_height + 15;
  // alert ("image_show_bottom = " + image_show_bottom);


  // check wheter image can be shown without horizontal scrolling	
	if ((visible_page_area_top + visible_page_area_height) < image_show_bottom) {
	  // shift image upwards
		image_show_top = visible_page_area_height + visible_page_area_top - (image_show_height + 15);
    // alert ("NEW image_show_top = " + image_show_top);
	}
	else {
    // alert ("image height is o.k.");	
	}


  // check wheter leftmost border of image to be shown lies within visible page area in browser
	if (image_show_left < document.body.scrollLeft) {
	  // it's outside, so we shift it to the right
	  image_show_left = document.body.scrollLeft + 10;
	}
	else {
	  // it's o.k.
	}		


  // check wheter topmost border of image to be shown lies within vsisble page area in browser
	if (image_show_top < document.body.scrollTop) {
	  // it's outside, so we shift it to the bottom
	  image_show_top = document.body.scrollTop + 10;
	}	
	else {
	  // it's o.k.
	}		
	 

	// show image
	var border_style = "solid";	
	var border_width = "3";
	var border_color = "silver";
		
  document.getElementById("image_show_hide_area").innerHTML =
    '<img src="' +
    image_show_src + 
    '" ' +
	  'style="position:absolute;'           +
	  'left:'          + image_show_left    + ';' +
	  'top:'           + image_show_top     + ';' +
	  'border-style:'  + border_style       + ';' + 
	  'border-width:'  + border_width       + ';' +
	  'border-color:'  + border_color       + ';' +
	  'visibility:visible;" '               +
	  'width="'        + image_show_width   +	'" ' +
	  'height="'       + image_show_height  +	'" ' +			
	  'id="image_show" '                    +
	  'onClick="imgHide(this)"'             +			
    '>';


}


function imgHide(image) {
	document.getElementById("image_show").style.visibility =	"hidden";
}