$(function() { 
objImage =
  {
	index : 1,
	
    // an array of images
    images : ['banner1.jpg', 'banner4.jpg', 'banner8.jpg', 'banner2.jpg'],
	
    // function to increase the index value, and reset it if we are at the end of the array
    inc_index : function() {
      this.index++; 
      
      if (this.index == this.images.length) {
        this.index = 0;
      }
    },
	
    // getting function to return the current index
    get_index : function() { return this.index; },
	
    // function  to fade out, swap the image, increase the index and fade in the image
    swap : function() {
		//set the background image to the enclosing div
		$("#banner-holder").css("background-image", "url(media/" + 
          objImage.images[objImage.index] + ")");
	  // first fade the image out
	  $("#banner-image").fadeOut(2000, function() {
        
        // change the image
        $("#banner-image").attr("src", "media/" + 
          objImage.images[objImage.index]);
        
        // fade the image back in
        $("#banner-image").fadeIn(2000);
        
       // increase the index
       objImage.inc_index();
      });
    }
  };

  // swap the image every n seconds
  setInterval(objImage.swap, 5000);
  
		   });