Hey everyone,

So I'm in the process of building a full flash website for a client and everything was going fine so far. But now I need some help. Basically I'm building an images gallery that loads all thumbs and images dynamically from an XML file. On the left side of the gallery, there will be a medium sized thumb of every shoe (they do not fit all together so I'll worry about some paging mechanism later). When that thumb is clicked, on the right side, an image of the shoe is displayed with 3 small thumbs below it (pictures of the shoe from different perspectives). And then whenever one of the small thumbs is clicked, its corresponding image should be displayed.

The main problem started with holding references among functions. So I thought I'd create a MediumItem class which holds a reference to its corresponding thumbs and images inside an XMLList variable that is passed to the constructor. Now, when the medium thumb is clicked, I want the small thumbs to be added to the stage, and for that I need to listen to some custom event dispatched by the MediumItem class. I tried, but did not get so lucky :/

Here's my code:

MediumItem

package 
{
	import flash.display.Loader;
	import flash.display.MovieClip;
	import flash.errors.IOError;
	import flash.events.Event;
	import flash.events.IOErrorEvent;
	import flash.events.MouseEvent;
	import flash.net.URLRequest;
	import flash.events.EventDispatcher;
	
	public class MediumItem extends MovieClip
	{
		private var _mediumImage:String;
		private var _images:XMLList;
		private var _medImage:MovieClip;
		private var _smallThumbsContainer:MovieClip;
		private var _thumbCounter:uint = 1;
		
		public function MediumItem(med:String, list:XMLList):void {
			_mediumImage = med;
			_images = list;
			_medImage = new MovieClip();
			_smallThumbsContainer = new MovieClip();
		}
		
		public function loadMedium() {
			var ldr:Loader = new Loader();
			ldr.contentLoaderInfo.addEventListener(Event.COMPLETE, mediumLoaded);
			ldr.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, onIOError);
			ldr.load(new URLRequest(_mediumImage));
		}
		
		private function onIOError(e:IOError):void {
			dispatchEvent(new Event(IOErrorEvent.IO_ERROR));
		}
		
		private function mediumLoaded(e:Event):void {
			_medImage.addChild(e.target.loader);
			_medImage.addEventListener(MouseEvent.CLICK, loadSmallThumbs);
			dispatchEvent(new Event(Event.COMPLETE));
		}
		
		public function loadSmallThumbs(e:MouseEvent):void {
			for (var i = 0; i < _images.length(); i++) {
				var ldr:Loader = new Loader();
				ldr.x = (52 + 10) * i;
				ldr.contentLoaderInfo.addEventListener(Event.COMPLETE, smallLoaded);
				ldr.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, onIOError);
				ldr.load(new URLRequest(_images[i].@small));
			}
		}
		
		private function smallLoaded(e:Event):void {
			_smallThumbsContainer.addChild(e.target.loader);
			_thumbCounter++;
			if (_thumbCounter == _images.length()) {
				dispatchEvent(new Event("ThumbsAreReady"));
			}
		}
		
		public function get thumbsContainer():MovieClip {
			return _smallThumbsContainer;
		}
		
		public function get mediumImage():String {
			return _mediumImage;
		}
		
		public function get medium():MovieClip {
			return _medImage;
		}
		
		public function get images():XMLList {
			return _images;
		}
		
		public function set mediumImage(value:String):void {
			_mediumImage = value;
		}
		
		public function set images(list:XMLList):void {
			_images = list;
		}
	}
	
}

Code from the document class"

private function displayItems(items:XMLList):void {
			for (var i = 0; i < items.length(); i++) {
				var med:MediumItem = new MediumItem(items[i].@medium, items[i].image);
				med.medium.x = (70 + 12) * i;
				med.medium.y = 5;
				med.addEventListener(Event.COMPLETE, mediumReady);
				med.addEventListener(IOErrorEvent.IO_ERROR, onIOError);
				med.addEventListener("ThumbsAreReady", addThumbsContainer);
				med.medium.buttonMode = true;
				med.loadMedium();
			}
		}
		
		private function addThumbsContainer(e:Event):void {
                        //TODO: Remove current thumbs and replace them with the new ones
			var mc:MovieClip = e.target.thumbsContainer as MovieClip;
			mc.x = 635;
			mc.y = 275;
			stage.addChild(mc);
		}

XML File:

<?xml version="1.0" encoding="utf-8" ?>
<data>
	<category name="heels">
		<item medium="gallery/Heels/medium/1.jpg">
			<image big="gallery/Heels/big/1/1.jpg" small="gallery/Heels/small/1/1.jpg" />
			<image big="gallery/Heels/big/1/2.jpg" small="gallery/Heels/small/1/2.jpg" />
			<image big="gallery/Heels/big/1/3.jpg" small="gallery/Heels/small/1/3.jpg" />
		</item>
		<item medium="gallery/Heels/medium/2.jpg">
			<image big="gallery/Heels/big/2/1.jpg" small="gallery/Heels/small/2/1.jpg" />
			<image big="gallery/Heels/big/2/2.jpg" small="gallery/Heels/small/2/2.jpg" />
			<image big="gallery/Heels/big/2/3.jpg" small="gallery/Heels/small/2/3.jpg" />
		</item>
		<item medium="gallery/Heels/medium/3.jpg">
			<image big="gallery/Heels/big/3/1.jpg" small="gallery/Heels/small/3/1.jpg" />
			<image big="gallery/Heels/big/3/2.jpg" small="gallery/Heels/small/3/2.jpg" />
			<image big="gallery/Heels/big/3/3.jpg" small="gallery/Heels/small/3/3.jpg" />
		</item>
		<item medium="gallery/Heels/medium/4.jpg">
			<image big="gallery/Heels/big/4/1.jpg" small="gallery/Heels/small/4/1.jpg" />
			<image big="gallery/Heels/big/4/2.jpg" small="gallery/Heels/small/4/2.jpg" />
			<image big="gallery/Heels/big/4/3.jpg" small="gallery/Heels/small/4/3.jpg" />
		</item>
		<item medium="gallery/Heels/medium/5.jpg">
			<image big="gallery/Heels/big/5/1.jpg" small="gallery/Heels/small/5/1.jpg" />
			<image big="gallery/Heels/big/5/2.jpg" small="gallery/Heels/small/5/2.jpg" />
			<image big="gallery/Heels/big/5/3.jpg" small="gallery/Heels/small/5/3.jpg" />
		</item>
	</category>
</data>

Any suggestions and/or comments on my code are welcome. Thanks in advance.

EDIT: I got it sorted out and I've updated the code above. Comments and suggestions on how I should go about loading the shoe's main(big) image once the small thumb is clicked are still welcome. Thanks again!