Problem with dynamically assigning an event handler

I’m creating a photo gallery script with 3 categories (people, places, and things). The 3 categories all share
the same thumbnail movie clips whose onRelease handlers I want to change depending on which
category is selected.

If you look at the newCat() function at the bottom of the script you’ll see my comments as to what is happening and when.
Apparently the event handlers being assigned to the thumbnails are using the local variable ‘pict’ inside the ‘newCat()’
function which is being overwritten each time the function goes through a loop?

Does anyone know why this is happening or another approach I can take?


//set up picture categories and file names
people = ['mittens.jpg', 'penny.jpg', 'selfportrait.jpg'];
places = ['antslife.jpg', 'cincy.jpg', 'furniture.jpg',  'graffiti.jpg', 'lighthouse.jpg'];
things = ['cattails.jpg', 'coneflowers.jpg', 'cookie.jpg',  'lightbulb.jpg', 'pinkmagnolias.jpg'];

//category button handlers
people_mc.onRelease = function(){
     newCat('people');
}
places_mc.onRelease = function(){
     newCat('places');
}
things_mc.onRelease = function(){
     newCat('things');
}

//new picture function - called by thumbnails
function newPict(p){
     pictHolder_mc.loadMovie('pictures/' + p);
}

//new category function - called by category buttons
function newCat(cat){
     for(i=0; i<  this[cat].length; i++){
          this['thumb' + i].gotoAndStop('on');
          var pict = this[cat]*;
          //trace(pict); //traces each array element successfully
          this['thumb' + i].onRelease = function(){
               newPict(pict); //only passes the last element in the array
          }
     }
}