// create a custom JavaScript object on the fly to handle the  banner rotation 
 
 pic1= new Image(332,395); 
 pic1.src="http://www.centice.com/dress/pass-rx-glam.jpg"; 
 pic2= new Image(332,395); 
 pic2.src="http://www.centice.com/dress/scan.jpg"; 
 pic3= new Image(332,395); 
 pic3.src="http://www.centice.com/dress/press.jpg"; 
 pic4= new Image(332,395); 
 pic4.src="http://www.centice.com/dress/result.jpg"; 
 
  header_image_object = 
  { 
    // index tracks the current image that is being displayed,  
    // starts at 1 because image 0 is the default image (array index's start from 0) 
    index : 1, 
     
    // an array of images for the header 
    header_images : ["pass-rx-glam.jpg", "scan.jpg", "press.jpg", "result.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.header_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() { 
      // first fade the image out 
      $("#rotate_image").fadeOut(1000, function() { 
         
        // change the image 
        $("#rotate_image").attr("src", "http://www.centice.com/dress/" +  
          header_image_object.header_images[header_image_object.index]); 
         
        // fade the image back in 
        $("#rotate_image").fadeIn(1000); 
         
       // increase the index 
       header_image_object.inc_index(); 
      }); 
    } 
  }; 
 
  // swap the image ever 10 seconds 
  setInterval(header_image_object.swap, 5000);