var currentPiece = 0;
var fadeIns = 100;    //specify the number of fadeins which occur during the fadein time (specified by fadeInTime)

function changePiece(changeValue)
{  
   clearInterval(widget_interval);
   
   //Get the next piece to be displayed
   if ((currentPiece + changeValue) > pieces.length - 1)
   {
      nextPiece = 0;
   }
   else if ((currentPiece + changeValue) < 0)
   {
      nextPiece = pieces.length - 1;
   }
   else
   {
      nextPiece = currentPiece + changeValue;
   }
   
   //Make all the divs invisible   
   for (k=0; k < pieces.length; k++)
   {
      document.getElementById(pieces[k]).style.display = "none";
      changeOpacity(pieces[k], 0);
   }
   
   //Make the next div visible
   document.getElementById(pieces[nextPiece]).style.display = "block";   
   fadeIn(pieces[nextPiece]);
   widget_interval = window.setInterval("changePiece(1)", fadeInTime + widget_change_interval);   
   currentPiece = nextPiece;      
}

//Fade in a piece
function fadeIn(piece) {
   var timer = 0;

   for(i = 0; i < fadeIns; i++)
   {
      window.setTimeout("changeOpacity('" + piece + "'," + i + ")", timer * fadeInTime/fadeIns);
      timer++;
   }
} 

//Change the opacity of a piece
function changeOpacity(piece, opacity) {
   /* Use diffent types of CSS styles about opacity to ensure compatibility*/
   var object = document.getElementById(piece).style;
   object.opacity = (opacity / fadeIns);
   object.MozOpacity = (opacity / fadeIns);
   object.KhtmlOpacity = (opacity / fadeIns);
   object.filter = "alpha(opacity=" + 100*opacity/fadeIns + ")";      
}