/* images/viewport1.png */
/* images/viewport2.png */
function setOpacity(obj, opacity) {

   /* be on the safe side */
   if(opacity > 100) 
      opacity = 100;
   if(opacity < 0)
      opacity = 0;

   opacity = (opacity == 100)?99.999:opacity;
  
   // IE/Win
   obj.style.filter = "alpha(opacity:"+opacity+")";
  
   // Safari<1.2, Konqueror
   obj.style.KHTMLOpacity = opacity/100;
  
   // Older Mozilla and Firefox
   obj.style.MozOpacity = opacity/100;
  
   // Safari 1.2, newer Firefox and Mozilla, CSS3
   obj.style.opacity = opacity/100;
}

function fade(objId,opacity,direction,delay) {
   if (document.getElementById) {
      obj = document.getElementById(objId);
      if(direction > 0){
         if (opacity <= 100) {
            /* fadein */
            opacity += direction;
            setOpacity(obj, opacity);
            timeout2 = window.setTimeout("fade('"+objId+"',"+opacity+","+direction+","+delay+")", delay);
         }
      } else {
         if (opacity > 0) {
            /* fadeout */
            opacity += direction;
            setOpacity(obj, opacity);
	    if(opacity < 0)
	       opacity = 0;
            timeout2 = window.setTimeout("fade('"+objId+"',"+opacity+","+direction+","+delay+")", delay);
         }
      }
   }
}

function fadeInItem(index,delay){
   image = document.getElementById(images[index].id);
   fade(images[index].id,0,10,delay);
}

function fadeOutItem(index,delay){
   image = document.getElementById(images[index].id);
   fade(images[index].id,100,-10,delay);
}

function loadImage(id, n){
   if(old == n) return;

   /* cancel any ongoing timeouts */
   window.clearTimeout(timeout1);
   window.clearTimeout(timeout2);

   fadeOutItem(old, 5);
   timeout1 = window.setTimeout("fadeInItem('"+n+"',5)", 125);
   old = n;
}

function setup() {

   image = document.getElementById(images['view1'].id);
   setOpacity(image, 0);
   image.src = images['view1'].src;
   image.style.visibility = 'visible';

   image = document.getElementById(images['view2'].id);
   setOpacity(image, 0);
   image.src = images['view2'].src;
   image.style.visibility = 'visible';

   fadeInItem('view1', 5);
   old = 'view1';
}

/* constructor */
function GInfo(id, file){
   /* only way to cache/preload appears to be to create a new image */
   var img = new Image();
   img.id = id;
   img.src = file;
   this.id = id;
   this.src = file;
}

if(document.images){
   var images = new Array();
   var timeout1, timeout2;

   images['view1'] = new GInfo('img_viewport1', "images/viewport1.png"); 
   images['view2'] = new GInfo('img_viewport2', "images/viewport2.png"); 
   images['urlimage'] = new GInfo('view3', "images/view3button_url.png"); 
   window.onload = function() { setup () }
}