// Hello anyone reading this. 

// Creates and populates an array with all the huehorse colors. 
// Note to self: Order needs worked on, especially the last two. Adding in the color names as a second dimension would be ideal.
  var colorList = [
                    "rgb(255,255,255)",
                    "rgb(155,155,155)",
                    "rgb(50,50,50)",
                    "rgb(50,50,155)",
                    "rgb(50,50,255)",
                    "rgb(50,155,255)",
                    "rgb(155,155,255)",
                    "rgb(155,50,255)",
                    "rgb(155,50,155)",
                    "rgb(255,50,255)",
                    "rgb(255,50,155)",
                    "rgb(255,50,50)",
                    "rgb(255,155,255)",  
                    "rgb(255,155,155)",
                    "rgb(255,155,50)",
                    "rgb(155,50,50)",
                    "rgb(155,155,50)",
                    "rgb(50,155,50)",
                    "rgb(50,255,50)",
                    "rgb(50,255,255)",
                    "rgb(155,255,255)",
                    "rgb(50,155,155)",
                    "rgb(50,255,155)",
                    "rgb(155,255,155)",
                    "rgb(155,255,50)",
                    "rgb(255,255,50)",
                    "rgb(255,255,155)"
		  ];

 // Storage object for the point where cLoop should start/restart. Starts with a random value.
  var restart = new Object(); 
  restart.index = Math.floor(Math.random()*27);
  
  
 // Defines cLoop and starts the animation upon pageready. NTS: Clean up the references in this. Also: does more stuff now
  $(document).ready(function(){
    //Changes the background color of #block to the random color after the focal image has loaded
     $("#focal > img").load(function(){
       $("#block").css("background-color", colorList[restart.index]);
     });
  });
  
 // Defines and runs cloop once the entire page has loaded from tip to tail
  $(window).load(function(){
    //Cashes a reference to the #block element
     $block = $("#block");
    // Adds a click function that starts or stops cLoop when #tog is clicked
     $("#tog").click(function () {
        var n = $block.queue("fx");
        var clength = colorList.length;
        if ( n.length == 0 || n.length == null) {
          cLoop();
        }
        else {
          if (n.length == 1) {
            restart.index = 0;
          } else {
            restart.index = (clength - n.length + 1);
          }
          $block.queue("fx", []);
          $block.stop();
        }
      });


   // Runs the background behind the huehorse through a rainbow animation. Not sure that the array "q" is strictly necessary.
   // Note to self: look into ways for recursive functions to pass information to themselves. Reduce DOM manipulation
    function cLoop() {
      var clength = colorList.length;
      var x = restart.index
     // Lets me start the loop at a specified point (x) in colorList
      if (typeof x == 'number' && isFinite(x) && x != 0 && x <= clength -1) {
        var i = x;
      } else {var i = 0;}
     // Queues up the animations starting from x or zero, calling cLoop again as a callback after the last animation
      for (i ; i <= clength -1; i++) {
        if (i == clength -1) {       // Does the final animation, starts the loop over, sets restart.index to zero
          restart.index = 0;
          $block.animate({ backgroundColor: colorList[i]}, 4500, "linear", cLoop);
        } else { // Does most of the animation
         $block.animate({ backgroundColor: colorList[i]}, 1500, "linear");
        }
      }
    }
    // Starts the animation on pageload
    cLoop();
  });

 // Shifts #block's background to a desired color. Called by an onClick. I would eventually like to get rid of the onclick
  function colormate(i){
   // Kills any animation running on #block 
    $("#block").queue("fx", []);  
    $("#block").stop();
   // Animates #block's BG color to whatever colorList[i] happens to be and saves the background color to the restart object
    var hue = colorList[i];
    $("#block").animate( { backgroundColor: hue }, 500, "linear");
    if (i == colorList.length) {
      restart.index = 0;
    } else {
      restart.index = ++i;
    }  
  }