var timeoutCollection = {
    cr0:null,
    cr0Settings:null,
    cr0Data:null,
    allowMouseOut: true,
    navStopped: false,
    fadeInSpeed:700,
    fadeOutSpeed:700,
    transitionSpeed:20000
  }

  
  function createRotator (imageList, colNumber){
    var id = "cr" + colNumber;
    timeoutCollection[id+"Data"] = imageList;


    var rotatorItem = "<div class='colWrapper col' id='colWrapper" + colNumber + "'><ul id='" + id + "' class='col'></ul></div>";
    jQuery('#img-rotator').append(rotatorItem);
    
    var mouseControl = '<img class="controlRotator" onclick="navigateRotator(\'' + id + '\')" onmouseover="stopRotator(\'' + id + '\')" onmouseout="startRotator(\'' + id + '\')" src="/images/homepage/blank.gif" />';
    jQuery('#colWrapper' + colNumber).prepend(mouseControl);
    
    var controls = '<div class="rotatorControls" id="rotatorControls"></div>';//<div class="rotator-item back" onclick="forwardBack(\'cr0\',\'back\')">&lt;</div>
    jQuery('#img-rotator').prepend(controls);
    
    //[image ref, href, title, a number, category] 
    for (var i=0; i<imageList.length; i++){
      var rotatorContents = "";
      var overlayId = "overlay" + colNumber + "_" + i;
      rotatorContents += '<li class="rotator-item">';
      //rotatorContents += '<h2>';
      //rotatorContents += imageList[i][2];
      //rotatorContents += '<h2>';
      rotatorContents += '</h2>';
      rotatorContents += '<div class="overlay">';
      rotatorContents += '<h3>';
      rotatorContents += '<a href="' + imageList[i][1] + '" rel="bookmark" title="' + imageList[i][2] + '"><img src="' + imageList[i][5] + '" alt="' + imageList[i][4] + '"/></a>';
      rotatorContents += '</h3>';
      //rotatorContents += '<p>';
      rotatorContents += imageList[i][3];
      //rotatorContents += '</p>';
      rotatorContents += '<p class="more"><a href="' + imageList[i][1] + '" rel="bookmark" title="' + imageList[i][2] + '"><img src="/images/homepage/findOutMore.jpg" alt="Find out more" /></a></p></div>';
      rotatorContents += '<div class="image"><img src="' + imageList[i][0] + '" alt="' + imageList[i][2] + '" /></div>';
      rotatorContents += '</li>';
      timeoutCollection[id+"Data"][i].push(overlayId);
      jQuery("#"+id).append(rotatorContents);
      
      controls = '<div id="item' + i + '" class="rotator-item rotatorControlItem" onclick="gotoRotator(\'cr0\',\'' + i + '\')">';
      //controls += i+1;
      controls += '<p>' + imageList[i][2] + '</p>';
      controls += '</div>';
      jQuery('#rotatorControls').append(controls);
    }
    //jQuery('#rotatorControls').append('<div class="forward rotator-item" onclick="forwardBack(\'cr0\', \'forward\')">&gt;</div>');
    
    setupFader(id, (colNumber+1)*1000);

  }
  
  function setBgs(id){
    
    jQuery(".rotatorControlItem").each(function(){
      jQuery(this).removeClass("rotatorSelected");
    });
    
    jQuery(id).addClass("rotatorSelected");
  }
  
  function stopRotator(rotatorId){
    clearTimeout(timeoutCollection[rotatorId]);
    var currentRotator = timeoutCollection[rotatorId + "Settings"];
    var theOverlay = timeoutCollection[rotatorId + "Data"][currentRotator[2]][4];
    jQuery("#"+theOverlay).toggle();
  }
  
  function startRotator (rotatorId){
    var currentRotator = timeoutCollection[rotatorId + "Settings"];
    if(timeoutCollection.navStopped == false){
      next(currentRotator[0], currentRotator[1], currentRotator[2], currentRotator[3]);
      var theOverlay = timeoutCollection[rotatorId + "Data"][currentRotator[2]][4];
      jQuery("#"+theOverlay).toggle();
    }
  }
  
  function forwardBack (rotatorId, direction){
      var elements = jQuery("#cr0").children();
      var currentRotator = timeoutCollection[rotatorId + "Settings"];
      var current = currentRotator[1];
      var last = currentRotator[2];
      
      var item = 0;
      if (direction ==  "forward"){
        if((current + 1) < elements.length){
          last = current 
          item = current + 1;   
        } 
          else
        {
          last = current;
          item = 0;
          
        }
      } else {
        if((current) > 0){
          last = current; 
          item = current - 1;
        } 
          else
        {
          last = current;
          item = elements.length-1;
          
        }
      } 
      
      currentRotator[1] = item;
      currentRotator[2] = last;
      setBgs("#item"+item);
      gotoRotator (rotatorId, item);
  }
  
  
  
  function gotoRotator (rotatorId, item){
    // get the animated items
    var elements = jQuery("#cr0").children();
    
    // prevent the mouseout event happening
    timeoutCollection.navStopped = true;
    
    // clear the timer controlling the animation
    clearTimeout(timeoutCollection[rotatorId]);
    
    // create a reference to the settings for this rotator
    var currentRotator = timeoutCollection[rotatorId + "Settings"];

    
    // stop and hide all of images in the gallery
    for(var i = 0; i < timeoutCollection.cr0Data.length; i++){
      jQuery(elements[i]).stop(); 
      jQuery(elements[i]).hide();
    } 
    
    currentRotator[2] = item;
    currentRotator[1] = item;
    
    setBgs("#item"+item);  
    jQuery(elements[item]).fadeTo(timeoutCollection.fadeInSpeed, 1);
    
    //next(currentRotator[0], item, currentRotator[2], currentRotator[3]);
  }
  
  function navigateRotator (rotatorId){
    var currentRotator = timeoutCollection[rotatorId + "Settings"];
    
    // get the href from the array of data representing the gallery items
    var theHref = timeoutCollection[rotatorId + "Data"][currentRotator[2]][1];
    window.location = theHref;
  }
  
  function setupRotator (idFragment){
      createRotator(fadeimages,idFragment); 
  }
  

 
 function setupFader(itemId, delay){
    var elements = jQuery("#" + itemId).children();
    for (var i = 0; i < elements.length; i++)
    {
      jQuery(elements[i]).css('z-index', String(elements.length-i)).css('position', 'absolute');
      jQuery(elements[i]).hide();
    }
    timeoutCollection[itemId+"Settings"] = [elements, 0, 1, itemId];
    timeoutCollection[itemId] = setTimeout(function(){next(elements, 0, 1, itemId)}, delay);
    jQuery(elements[0]).show();
 }
 
 function next(elements, current, last, itemId)
    {
      jQuery(elements[last]).fadeOut(timeoutCollection.fadeOutSpeed); 
      jQuery(elements[current]).fadeTo(timeoutCollection.fadeInSpeed,1);
      setBgs("#item"+current); 
        if((current + 1) < elements.length){ 
          current = current + 1;
          last = current - 1;   
        } 
          else
        {
          current = 0;
          last = elements.length - 1;
        }
      
      timeoutCollection[itemId+"Settings"] = [elements, current, last, itemId]; 
         
      timeoutCollection[itemId] = setTimeout(function(){next(elements, current, last, itemId)}, timeoutCollection.transitionSpeed);
    }