$("document").ready(function(){

var pics= new Array()


//create image array for table background (main image)    
pics=preload(pics)  
var timeoutID
var pauseTimer
startTimer();  

function preload(pics)
{
    
    var max=$("#max").val() 
    var number


    
      preload_image_object = new Image();
      
      // set image url                                                           
      image_url = new Array();
      
      for(var i=0; i<max; i++)
      {
          
          number=i+1
          pics[i] = new Image();
          
          //images stored in hidden fields in html
  pics[i].src = "/userfiles/gallery/"+$("#"+number+"image").val();
        
        
      }   
      
      
        return pics;

}



    
function startTimer()
{
    timeoutID = window.setTimeout(changeImage, 5000);

}


function startPauseTimer()
{
     pauseTimer=window.setTimeout(restart, 10000);
}


function changeImage()
{
  var current=$("#active").val()
  
  var max=$("#max").val()
  
  $("#"+current+"number").attr("src","blocks/blkRotateImage/images/"+current+"unlit.png")
   
  if(max!=current||max<current)
  {
    current++   
  }
  else
  {
      current="1"
  }
  
  index=current-1;
  $("#"+current+"number").attr("src","blocks/blkRotateImage/images/"+current+"lit.png") 
  
  $("#main").css("background-image", "url("+pics[index].src+")") 
  $("#textDiv").html($('#'+current+'text').val());
  $("#active").val(current);
   startTimer()
}

$(".listnumbers").click(function(){
   
    $("#pause").attr("src","blocks/blkRotateImage/images/pause_unlit.png")
    
    // on number click, pause rotation of images
    clearTimeout(pauseTimer) //if another number is selected before pause time is over.
    clearTimeout(timeoutID)
    startPauseTimer()
      var id=$(this).attr("id") 
   var idNumber=id.substring(0,1)
   var index=idNumber-1
    
    
    var current=$("#active").val() 
    
    
    
    $("#"+current+"number").attr("src","blocks/blkRotateImage/images/"+current+"unlit.png") 
    
   var id=$(this).attr("id") 
   var idNumber=id.substring(0,1)
   var index=idNumber-1
   
   $("#"+idNumber+"number").attr("src","blocks/blkRotateImage/images/"+idNumber+"lit.png")
   $("#main").css("background-image", "url("+pics[index].src+")") 
   $("#textDiv").html($("#"+idNumber+"text").val());
   $("#active").val(idNumber); 
    
})



function restart()
{
    //restart rotation of images after set time  
    clearTimeout(pauseTimer)       
    startTimer()
    
}

$("#pause").click(function(){
    
    if($("#pause").attr("src")=="blocks/blkRotateImage/images/pause_lit.png")
    {
         $("#pause").attr("src","blocks/blkRotateImage/images/pause_unlit.png")
          startTimer() 
    }
    else
    {
        $("#pause").attr("src","blocks/blkRotateImage/images/pause_lit.png") 
        clearTimeout(timeoutID) 
        clearTimeout(pauseTimer)
    }
    
})

})