Trouble with preloader and getNextHighestDepth

I have a problem with a preloader on a slideshow. The preloader works perfectly the first time the slideshow is loaded but if you move to another frame and then return the loader bar loads in the top left hand corner of the stage and does not function, it just duplicates every time you navigate back to the page.

I’m using:

 
on (press) {gotoAndStop(10);
unloadMovie("container1_mc")
unloadMovie("container2_mc")
unloadMovie("loader_mc")
}

On each button to remove the slideshow when another frame is loaded (I have also tried removeMovieClip) and the 2 containers are removed without a problem, the attatched loader however may not be being removed correctly, I have a feeling it could be due to an issue with the getNextHighestDepth:

 
import mx.transitions.Tween;
import mx.transitions.easing.Strong;
 
this.createEmptyMovieClip("container2_mc",this.getNextHighestDepth());
this.createEmptyMovieClip("container1_mc",this.getNextHighestDepth());
this.attachMovie("loader","loader_mc",this.getNextHighestDepth());
 
loader_mc._x = 385;
loader_mc._y = 200;
container2_mc._x = 195;
container2_mc._y = 26;
container1_mc._x = 195;
container1_mc._y = 26;
 
var myMCL:MovieClipLoader = new MovieClipLoader();
var myListener:Object = new Object();
myMCL.addListener(myListener);
myListener.onLoadProgress = function(target,bytesLoaded,bytesTotal) {
 loader_mc._alpha = 100;
 var pct = Math.round(bytesLoaded/bytesTotal*100);
 loader_mc.bar_mc._xscale = pct;
}
myListener.onLoadComplete = function(target) {
 loader_mc._alpha = 0;
 fadeIn();
}
var numPics:Number = 13;
var picArray:Array = new Array();
var currentElement:Number = 0;
var currentContainer:MovieClip = container1_mc;
 
for (i=0;i < numPics;i++) {
 var location:String = "portfolio/" + (i+1) + ".jpg";
 picArray.push(location);
}
myMCL.loadClip(picArray[currentElement],container1_mc);
next_mc.onRelease = function() {
 if (currentContainer == container1_mc) {
  currentContainer = container2_mc;
 }
 else
 {
  currentContainer = container1_mc;
 }
 currentContainer._alpha = 0;
 container1_mc.swapDepths(container2_mc);
 if (currentElement < picArray.length-1) {
 currentElement++;
 }
 else
 {
  currentElement = 0;
 }
 myMCL.loadClip(picArray[currentElement],currentContainer);
}
prev_mc.onRelease = function() {
 if (currentContainer == container1_mc) {
  currentContainer = container2_mc;
 }
 else
 {
  currentContainer = container1_mc;
 }
 currentContainer._alpha = 0;
 
 container1_mc.swapDepths(container2_mc);
 if (currentElement > 0) {
 currentElement--;
 }
 else
 {
  currentElement = picArray.length-1;
 }
 myMCL.loadClip(picArray[currentElement],currentContainer);
}
function fadeIn() {
 new Tween(currentContainer,"_alpha",Strong.easeOut,0,100,30,false);
}

This setup works perfectly on another site I have made but not on this one (which features scrolling boxes, possible cause of the issue?)

Any help much appreciated, this is driving me nuts!