//---------------------------------------------------------------------
// homeRotate - /* Enables image rotation functionality on the home page. */
// @param - group - The clippings group name.
// @param - div_id - The div id of the containing div.
//--------------------------------------------------------------------- 
jQuery.homeRotate = function (group,div_id) {

   var accordion = jQuery("#text").accordion({
      fillSpace: false,
      collapsible: false,
      autoHeight: true,
      animated: true,
      navigation: false,
      active: 2
   });

   var cache = [];
   var clippings = '';
   var loaded = 0;
   var num_clippings = 0;
   var tab_id = 3;
   var rotate_time = 6000;
   var scroll_pos = '';
   var timer_on = true;

   // Bound to tab click event
   var changeImage = function() {
      var id_arr = jQuery("#tab-" + tab_id).attr("id").split('-');
      tab_id = parseInt(id_arr[1]);
      id = id_arr[1]-1;
      
      jQuery(div_id).find("img:first-child").fadeOut(150, function () {
         jQuery(this).attr('src', clippings[id]['src']);
         jQuery(this).attr('alt', clippings[id]['alt']);
         jQuery(this).attr('title', clippings[id]['alt']);
      })
      .fadeIn(350, function () {
         jQuery(div_id).css('backgroundImage', 'url('+clippings[id]['src']+')') // Trick for cross-fade. Set last image as background.
      });  
      timer.reset(rotate_time);
   }
   
   // Get the clippings using an ajax call 
   jQuery.getJSON('includes/ajax_clippings.php?', {'clip_group' : group }, function(data) {
      var cacheImage = "";
      clippings = data;
      // Find the currently displayed clipping image and also preload.  Callback is to initialize AFTER images are pre-loaded.
      $.loadImages = function (callback) {
         num_clippings = clippings.length
         for(i = 0; i < num_clippings; i++) {
            // Find the current clipping image and set to the background image for cross fade.
            if (clippings[i]['src'] == jQuery(div_id).find("img:first-child").attr('src')) {
               jQuery(div_id).css('backgroundImage', 'url('+clippings[i]['src']+')') 
            }
            
            // Cache all images for faster loading.            
            cache[i] = new Image();
            cache[i].onload = function() {
               loaded++; // should never hit a race condition due to JS's non-threaded nature
               if (loaded == num_clippings) {
      			   if ($.isFunction(callback)) {
      			      callback();
                  }
               }
            };
            cache[i].src = clippings[i]['src'];  
         }
      };
      
      $.loadImages(function() {
         // Bind click function to each tab
         $(".banner-tab").bind( "click", changeImage);
      });
   });
   
   // Called by the timer. Handles rotation and updates tab_id.
   var timedRotate = function() {
      if (tab_id == 5)
         tab_id = 0;
      tab_id = tab_id + 1;
      changeImage();
      accordion.accordion( "activate" , (tab_id-1));
   };
   
   // Start timer
   var timer = $.timer(rotate_time-1000, function(timer) {
      timedRotate();
   });
   
   // Stop the timer when the user hovers over the banner text area.
   jQuery('#text').mouseover( function () {
      timer.stop();
   });

   // Restart the timer when the user hovers out of the banner text area.
   jQuery('#text').mouseout( function () {
      timer.reset(rotate_time);
   });
   
   // Set the tab id when a banner tab is clicked so the rotation continues at the correct banner.
   $(".banner-tab").click( function () {
      var id_arr = $(this).attr("id").split('-');
      tab_id = parseInt(id_arr[1]);
   });
};

jQuery(document).ready(function()
{   
   jQuery.homeRotate("Home Banners", "#photo");   
});