Why does the content spill over and how do I position this under the menu and title?

I was following this tutorial on how to add a scrolling image gallery to a Flash website.
(http://www.republicofcode.com/tutorials/flash/xmlimagegallery/index.php)

From what I understand from this tutorial, it is just a matter of copying the Actionscript code and pasting it onto the timelines then making modifications on the XML.
(kindly see a screenshot of timeline layers I made and as to where I put the Actionscript code:
http://i429.photobucket.com/albums/qq19/tsujzpie/imagegalleryproblem_01.jpg )

I pasted the code onto the blank keyframe labeled “Gallery”…

But all I get is this weird effect when I click on the button for the gallery…
(kindly see a screenshot of it here: http://i429.photobucket.com/albums/qq19/tsujzpie/imagegalleryproblem_02.jpg )

When you put a blank keyframe on a timeline, any content put in there is supposed to only be contained in that very frame, right? How come then that - whenever the gallery button is clicked on - the content from that section spills out onto the other sections even when I click on other button for the other areas?

I just really couldn’t think why this is happening - any reason why this is so?
And how do I position the gallery right under the section header and menu bar?

Here is its AS2 code, by the way:

	import mx.transitions.Tween;
	import mx.transitions.easing.*;
	
	var myGalleryXML = new XML();
	myGalleryXML.ignoreWhite = true;
	myGalleryXML.load("gallery.xml");
	
	myGalleryXML.onLoad = function() {
		_root.gallery_x = myGalleryXML.firstChild.attributes.gallery_x;
		_root.gallery_y = myGalleryXML.firstChild.attributes.gallery_y;
		_root.gallery_width = myGalleryXML.firstChild.attributes.gallery_width;
		_root.gallery_height = myGalleryXML.firstChild.attributes.gallery_height;
	
		_root.myImages = myGalleryXML.firstChild.childNodes;
		_root.myImagesTotal = myImages.length;
	
		_root.thumb_height = myGalleryXML.firstChild.attributes.thumb_height;
		_root.thumb_width = myGalleryXML.firstChild.attributes.thumb_width;
	
		_root.full_x = myGalleryXML.firstChild.attributes.full_x;
		_root.full_y = myGalleryXML.firstChild.attributes.full_y;
	
		callThumbs();
		createMask();
		scrolling();
	
	};
	
	function callThumbs() {
		_root.createEmptyMovieClip("container_mc",_root.getNextHighestDepth());
		container_mc._x = _root.gallery_x;
		container_mc._y = _root.gallery_y;
	
		var clipLoader = new MovieClipLoader();
		var preloader = new Object();
		clipLoader.addListener(preloader);
	
		for (i=0; i<myImagesTotal; i++) {
			thumbURL = myImages[i].attributes.thumb_url;
			myThumb_mc = container_mc.createEmptyMovieClip(i, 	container_mc.getNextHighestDepth());
			myThumb_mc._y = _root.thumb_height*i;
			clipLoader.loadClip("thumbs/"+thumbURL,myThumb_mc);
	
			preloader.onLoadStart = function(target) {
				target.createTextField("my_txt",target.getNextHighestDepth	(),0,0,100,20);
				target.my_txt.selectable = false;
			};
	
	
			preloader.onLoadProgress = function(target, loadedBytes, totalBytes) {
				target.my_txt.text = Math.floor((loadedBytes/totalBytes)*100);
			};
	
			preloader.onLoadComplete = function(target) {
				new Tween(target, "_alpha", Strong.easeOut, 0, 100, .5, true);
				target.my_txt.removeTextField();
				target.onRelease = function() {
					callFullImage(this._name);
				};
	
				target.onRollOver = function() {
					this._alpha = 50;
				};
	
				target.onRollOut = function() {
					this._alpha = 100;
				};
			};
		}
	}
	
	function callFullImage(myNumber) {

		myURL = myImages[myNumber].attributes.full_url;
		myTitle = myImages[myNumber].attributes.title;
		_root.createEmptyMovieClip("fullImage_mc",_root.getNextHighestDepth());
		fullImage_mc._x = _root.full_x;
		fullImage_mc._y = _root.full_y;
	
		var fullClipLoader = new MovieClipLoader();
		var fullPreloader = new Object();
		fullClipLoader.addListener(fullPreloader);
	
		fullPreloader.onLoadStart = function(target) {
			target.createTextField("my_txt",fullImage_mc.getNextHighestDepth	(),0,0,200,20);
			target.my_txt.selectable = false;
		};
	
		fullPreloader.onLoadProgress = function(target, loadedBytes, totalBytes) {
			target.my_txt.text = Math.floor((loadedBytes/totalBytes)*100);
		};
	
		fullPreloader.onLoadComplete = function(target) {
			new Tween(target, "_alpha", Strong.easeOut, 0, 100, .5, true);
			target.my_txt.text = myTitle;
		};
	
		fullClipLoader.loadClip("full_images/"+myURL,fullImage_mc);
	}
	
	function createMask() {
	
		_root.createEmptyMovieClip("mask_mc",_root.getNextHighestDepth());
	
		mask_mc._x = _root.gallery_x;
		mask_mc._y = _root.gallery_y;
	
		mask_mc.beginFill(0x000000,100);
		mask_mc.lineTo(_root.gallery_width,0);
		mask_mc.lineTo(_root.gallery_width,_root.gallery_height);
		mask_mc.lineTo(0,_root.gallery_height);
		mask_mc.lineTo(0,0);
	
		container_mc.setMask(mask_mc);
	
	}
	
	function scrolling() {
		_root.onEnterFrame = function() {
	
			container_mc._y += Math.cos(((mask_mc._ymouse)/mask_mc._height)	*Math.PI)*15;
	
			if (container_mc._y>mask_mc._y) {
				container_mc._y = mask_mc._y;
			}
	
			if (container_mc._y<(mask_mc._y-(container_mc._height-mask_mc.	_height))) {
				container_mc._y = mask_mc._y-(container_mc._height-	mask_mc._height);
			}
	
		};
	}

The code dynamically creates movieclips independent of the timeline frame, so these still exist out with that frame. Either create a routine to clean up and remove the gallery clips, that is called whenever you navigate away from that ‘page’, or instead of creating dynamically created movieclips, create and place these manually on the necessary frame so they only exist on that frame.