function opacity(id, opac_start, opac_end, millisec)
{
   // speed for each frame
   var speed = Math.round(millisec / 100);
   var timer = 0;

   // determine the direction for the blending, if start and end are the same nothing happens
   if(opac_start > opac_end)
   {
	 for(i = opac_start; i >= opac_end; i--)
	 {
	   setTimeout("changeOpac(" + i + ",'" + id + "')", (timer * speed));
	   timer++;
	 }
   }
   else if (opac_start < opac_end)
   {
	  for(i = opac_start; i <= opac_end; i++)
	  {
		setTimeout("changeOpac(" + i + ",'" + id + "')", (timer * speed));
		timer++;
	  }
   }
}

function changeOpac(opacity, id)
{
  var object = document.getElementById(id).style;
  object.opacity = (opacity / 100);
  object.MozOpacity = (opacity / 100);
  object.KhtmlOpacity = (opacity / 100);
  object.filter = "alpha(opacity=" + opacity + ")";
}

function blendimage(divid, imageid, imagefile, millisec, callback, callback_millisec)
{
	var speed = Math.round(millisec / 100);
	var timer = 0;

	// set the current image as background
	document.getElementById(divid).style.backgroundImage = "url(" + document.getElementById(imageid).src + ")";

	// make image transparent
	changeOpac(0, imageid);	
	
	document.getElementById(imageid).style.visibility = "visible";

	
	// make new image
	document.getElementById(imageid).src = imagefile;

	// fade in image
	for (i = 0; i <= 100; i++)
	{
	  setTimeout("changeOpac(" + i + ",'" + imageid + "')", (timer * speed));
	  timer++;
	}
	
	 setTimeout(callback, callback_millisec);
}

function IsImageOk(img) 
{
	// During the onload event, IE correctly identifies any images that
	// weren’t downloaded as not complete. Others should too. Gecko-based
	// browsers act like NS4 in that they report this incorrectly.
	if (!img.complete) 
	{
		return false;
	}

	// However, they do have two very useful properties: naturalWidth and
	// naturalHeight. These give the true size of the image. If it failed
	// to load, either of these should be zero.
	if (typeof img.naturalWidth != "undefined" && img.naturalWidth == 0) 
	{
		return false;
	}

	// No other way of checking: assume it’s ok.
	return true;
}

function change_background()
{
        // preload images
	img1 = new Image();
	img2 = new Image();
	img3 = new Image();
	img4 = new Image();
	img1.src = "images/background1.jpg";
	img2.src = "images/background2.jpg";
	img3.src = "images/background3.jpg";
	img4.src = "images/background4.jpg";

	
	check_images(img1, img2, img3, img4);
			
}

function check_images(img1, img2, img3, img4)
{
	
	if(!(IsImageOk(img1) && IsImageOk(img2) && IsImageOk(img3) && IsImageOk(img4)))
	{
	  //window.alert("images not loaded yet");
	  setTimeout("check_images(img1, img2, img3, img4)", 1000);
	}
	else
	{
	   //window.alert("images loaded!");
	   // start blending background images
	  blendimage('background_div_1','background_img_1', 'images/background1.jpg', 3000, change_background_2, 8000);
	}
	
			
}


function change_background_1()
{
   blendimage('background_div_1','background_img_1', 'images/background1.jpg', 3000, change_background_2, 8000);
}

function change_background_2()
{
   blendimage('background_div_1','background_img_1', 'images/background2.jpg', 3000, change_background_3, 8000);
}

function change_background_3()
{
   blendimage('background_div_1','background_img_1', 'images/background3.jpg', 3000, change_background_4, 8000);
}

function change_background_4()
{
   blendimage('background_div_1','background_img_1', 'images/background4.jpg', 3000, change_background_1, 8000);
}