title: Uncaught TypeError: Cannot read property '0' of undefined
body: <p>I've been banging my head against various inanimate objects for a while. I'm using jQuery to create a promotional banner rotation thing. Every 2 seconds (i'll change it to more in the future, just for testing it's short), the image and caption change. </p>
  
  <p>This works fine, it rotates between them and when it gets to the last one, it goes back to the beginning. But when I click on one, and it goes back to the beginning (or I click on the first one explicitly), when it next tried to rotate it throws this:</p>
  
  <pre><code>Uncaught TypeError: Cannot read property '0' of undefined /ftwc/:178
  changeImage
  rotate
  </code></pre>
  
  <p>On my two functions. I can't understand why!</p>
  
  <p>Here is the script:</p>
  
  <pre><code>changeImage = function(num) {        
    $(".currentpromoimage").before('&lt;div class="promoimage newpromoimage" style="background: url(\''+images[num][0]+'\') no-repeat; z-index: 1;"&gt;&lt;div class="caption" style="color: #'+images[num][2]+'"&gt;'+images[num][1]+'&lt;/div&gt;&lt;/div&gt;');
  
    $(".currentpromoimage").fadeOut(700,function(){
        $(".newpromoimage").addClass("currentpromoimage");
        $(".newpromoimage").removeClass("newpromoimage");
        $(this).remove();
    });
  
    $(".newpromoimage").fadeIn(700);
  
    $("#promoselect").children().children().css('background', '#303030');
  
    $("#ps_"+num).css('background', '#000000');
  
    currentImage = num;
  
  };
  
  rotate = function() {
  
      var imageLength = images.length-1;
  
      if (currentImage == imageLength) {
          changeImage("0");
      } else {
          var nextImage = currentImage+1;
          /*alert("nextImage:"+nextImage);*/  
          changeImage(nextImage);
      }
  
  };
  
  var selectors = "";
  
  var preloads = '';
  
  for(var i=0;i&lt;images.length;i++) {
      preloads += '&lt;img src="'+images[i][0]+'" alt="preloaded" class="preload"&gt;';
  
      selectors += "&lt;li id=\"ps_"+i+"\"&gt;&lt;/li&gt;";
   }
  
   $("body").prepend(preloads);
  
   $("#grass").after('&lt;div id="promo"&gt;&lt;div id="promoselect"&gt;&lt;ul&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class="promoimage currentpromoimage" style="background: url(\''+images[0][0]+'\') no-repeat; z-index: 1;"&gt;&lt;div class="caption" style="color: #'+images[0][2]+'"&gt;'+images[0][1]+'&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;');
  
      var currentImage = 0;
  
      $("#promoselect").children().append(selectors);
  
      $("#ps_0").css('background', '#000000');
  
      $("#promoselect")
          .children()
          .children()
          .click(function() {
              var selector = $(this).attr("id").split("_");
  
              clearInterval(autoimage);
  
              changeImage(selector[1]);
  
              autoimage = setInterval(rotate,2000);   
      });
  
      autoimage = setInterval(rotate,2000);
  </code></pre>
  
  <p>This is all called inside the jQuery document ready function, and images is an array encoded from PHP using json_encode. I know it's messy at the moment but I just can't figure out why these functions are appearing undefined..</p>
  
  <p>Thanks!</p>