//Creates a carousel object at the given ul element node that displays
//each list item in turn. In browsers that support opacity the items
//are faded in and out.
function Carousel(element)
{

  //There is no way to make the script work if style attributes are not available
  if(!element.style)
  {
    throw("Style not supported");
  }
	
  //Hide the carousel
  this.hide = function()
  {
    this.element.style.display = "none";
  }
    
  //Show the carousel
  this.show = function()
  {
    this.element.style.display = "block";
  }
  
  //Set an image to the given opacity
  this.setOpacity = function(imageNum, opacity)
  {
  	var imageItem = this.imageList[imageNum];
  	imageItem.opacity = opacity;
  	
  	//CSS3 compatible browsers
  	if(imageItem.style.opacity != null)
  	{
      imageItem.style.opacity = opacity;
  	}
  	
  	//Old mozilla browsers
  	else if(imageItem.style.MozOpacity != null)
  	{
  	  imageItem.style.MozOpacity = opacity;
  	}
  	
  	//KHTML Browsers
  	else if(imageItem.style.KhtmlOpacity != null)
  	{
  	  imageItem.style.KhtmlOpacity = opacity;
  	}
  	
  	//Internet explorer
  	else if(imageItem.style.filter != null)
  	{
  	  imageItem.style.filter = "alpha(opacity=" + opacity + ")";
  	}
  }
  
  //Update the fade on the current image
  this.fade = function(imageNum, targetOpacity, step)
  {	 	
    var currentOpacity = this.imageList[imageNum].opacity;
    
    //Make step size positive
    step = step > 0 ? step : -step;

    if(targetOpacity > currentOpacity)
    {
      var newOpacity = targetOpacity > (currentOpacity + step) ? currentOpacity + step : targetOpacity;
    }
    
    else
    {
      var newOpacity = targetOpacity < (currentOpacity - step) ? currentOpacity - step : targetOpacity;
    }
    
    this.setOpacity(imageNum, newOpacity);

    //If not at the target opacity use a closure to call the function again
    if(targetOpacity != currentOpacity) {
      obj = this;
    
      var nextCall = function()
      {
        obj.fade(imageNum, targetOpacity, step)
      }
    
      window.setTimeout(nextCall, 100);    
    }
  }
  
  //Change the visible image
  this.setImage = function(imageNum)
  {
  	//Hide old previous image
  	if(this.previousImage >= 0) {
      this.setOpacity(this.previousImage, 0);
  	}
  	
  	//Move last image back to its normal position
  	if(this.currentImage >= 0) {
      this.imageList[this.currentImage].style.zIndex = 0;
      this.previousImage = this.currentImage;
  	}    
        
    //Put new image on top of last one and fade it in
    this.imageList[imageNum].style.zIndex = 50;
    this.fade(imageNum, 1, 0.1)
    this.currentImage = imageNum;
  }
  
  //Change the current image for the next one in the list
  this.nextImage = function()
  {
  	//Get next image number looping back to zero at the end of the array
    var imageNum = (this.currentImage + 1) < this.imageList.length ? (this.currentImage + 1) : 0;
    this.setImage(imageNum);
  }
  
  this.start = function()
  {
  	if(!this.timer)
  	{
  	  //Use a closure to call nextImage
  	  obj = this;

  	  var closure = function() {
  	  	obj.nextImage()
  	  }
  	  
      this.timer = window.setInterval(closure, 10000);
  	}
  }
  
  this.stop = function()
  {
  	window.clearInterval(this.timer);
    this.timer = null;
  }
  
  //Set the element where the carousel will appear
  this.element = element;
  element.style.position = "relative";
  
  //Create an array to contain the image nodes
  this.imageList = new Array();
  
  //Add all child elements and set their styles
  var node = element.firstChild;
  
  while (node)
  {
    if (node.nodeType == 1 && node.style)
    {
      node.style.position = "absolute";
      node.style.top = 0;
      node.style.zIndex = 0;
      node.style.width = "100%";
      node.style.height = "auto";
      node.style.clear = "both";
      
	  this.imageList.push(node);
    }
    node = node.nextSibling;
  }
  
  for(var i = 0; i < this.imageList.length; i++)
  {
    this.setOpacity(i, 0);
  }
  
  this.previousImage = -1;
  this.currentImage = 0;
  this.imageList[0].style.zIndex = 50;
  
  //Set the first image to be relative to make page content appear below the banner but allow the page to be resized
  this.imageList[0].style.position = "relative";
  this.setOpacity(0, 1);

  this.show();
  this.start();
}



var carousel;

function start()
{
  try
  {
    //Create a new carousel object at the correct place in the document and display it
    carousel = new Carousel(document.getElementById("carousel"));
  }
  
  //Catch errors from unsupported browsers
  catch(error)
  {
  }
}


//Set scripts to run on page load
if (window.addEventListener)
{
   window.addEventListener("load", start, false);
}
else
{
  window.attachEvent("onload", start);
}