/**
 * @author Chris Li
 * @version 0.1
 * @note used in conjunction with JQuery 1.3.2
 * 
 * Image Rotation Script
 * swaps out banner image with image defined from array
 * 
 * HOW TO SETUP
 * 1.  HTML setup - parent and image requires id, which will be called from function imageRotate()
 *     <div id="home_banner_parent">
         <img src="images/loadingAnimation.gif" style="margin-top:125px;" id="home_banner" />
       </div>
   
 * 2.  Array setup before calling function
 *     img_items = new Array();
       img_items[img_items.length] = new Array('images/banners/banner1.jpg', 'Style vs. Substance.  Whats your game?', 'index.php?module=ProductsApp&nav_id=3');
       img_items[img_items.length] = new Array('images/banners/banner2.jpg', 'This ball is waiting.', 'index.php?module=ProductsApp&nav_id=3'); 
 * 
 * 3.  Call function 
 *     $(function() {
 *       imageRotate('home_banner_parent', 'home_banner', img_items);
 *     });
 *  
 */

//enable trim function for strings
String.prototype.trim = function () {
  return this.replace(/^\s*/, "").replace(/\s*$/, "");
}

function swapImage( container_id, image_id, image_info ) {
  var image_src = image_info[0];
  var image_alt = (image_info[1].trim() == '')?alert('Alt text required.'):image_info[1];
  var image_href = (image_info[2].trim() == '')?false:image_info[2];
  var img_container = $('#'+container_id);      
  
  var _str = '';
  
  //create preloading logic
  var objImagePreloader = new Image();
  objImagePreloader.onload = function() {       
    //fade out
    img_container.animate({
      opacity:0
    }, 500, function() {
      _img = '<img src="' + image_src + '" alt="' + image_alt + '" id="' + image_id + '" />';
    
      //if item contains href, need to attach the a tag
      if ( image_href != false ) { 
        _str = '<a href="' + image_href + '">' + _img + '</a>';
      } else {
        _str = _img;
      }
      
      //load the item into the container obj
      img_container.html(_str);
      
      //fade out
      img_container.animate({
        opacity:1
      }, 1000);            
    });
    //	clear onLoad, IE behaves irratically with animated gifs otherwise                
    objImagePreloader.onload = function(){};
  }
  
  objImagePreloader.src = image_src;
}

/**
 * randomly loads first image, and then rotates the images on timer
 * 
 * @param {Object} container_id - parent object holding the image
 * @param {Object} image_id - the id of the image
 * @param {Object} images_info - array([url for image], [alt text for image], [optional - link for image])
 */
function imageRotate( container_id, image_id, images_info ) {
  var rotateTimerObject = null;
  var rotateDelay = 5000;
  
  $(function() {
    var number_of_items = images_info.length;
    var random_number = Math.floor(Math.random() * number_of_items);
    var next_number = random_number;
    //load first image
    swapImage( container_id, image_id, images_info[next_number] );
    
    rotateTimerObject = setInterval(function() {
      if ( (number_of_items-1) == next_number ) {
        next_number = 0;
      } else {
        next_number++;
      }
      swapImage( container_id, image_id, images_info[next_number] );
    }, rotateDelay);
  });
}