//THIS IS IN THE FLA.

import PhotoGallery; //import the new PhotoGallery class.

var gal:PhotoGallery = new PhotoGallery("pics.xml");
gal.x = gal.y = 1; // set it's position on the stage
addChild(gal); // add to the stage

stop(); // stop main Timeline


//PhotoGallery.as

package {
	import fl.containers.UILoader;
	import caurina.transitions.*;
	import flash.events.*;
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.net.URLLoader;
	import flash.net.URLRequest;

	public class PhotoGallery extends MovieClip {

		//---------loading the external xml file-------
		var urlRequest:URLRequest;
		var urlLoader:URLLoader;
		var myXML:XML;
		var xmlList:XMLList;
		//--------holds the thumbnail objects-------
		var thmbArray:Array;
		//--------represents the number of rows-------
		var nrRows:uint;
		//-------represents the container of our gallery
		var sprite:Sprite;
		var thumb:Thumbnail;
		//-------- the thumbnails container-------
		var thumbsHolder:Sprite;
		//-------- the photoLoader container-------
		var loaderHolder:Sprite;
		//-------- loads the big photo-------
		var photoLoader:UILoader;
		//-------loads the caption------
		private var cap:Caption;

		public function init():void {
			//---------loading the external xml file-------
			urlRequest=new URLRequest("pics.xml");
			urlLoader = new URLLoader();
			myXML = new XML();
			myXML.ignoreWhitespace=true;
			myXML.prettyPrinting=false;
			urlLoader.addEventListener(Event.COMPLETE,fileLoaded);
			urlLoader.load(urlRequest);
			//--------holds the thumbnail objects-------
			thmbArray = new Array();
			//--------represents the number of rows-------
			nrRows=1;
			//-------represents the container of our gallery
			sprite = new MovieClip();
			sprite.x=sprite.y-0;
			addChild(sprite);

			//-------- the thumbnails container-------
			thumbsHolder = new Sprite();
			sprite.addChild(thumbsHolder);
			//-------- the photoLoader container-------
			loaderHolder = new Sprite();
			loaderHolder.graphics.beginFill(0xffffff,1);
			loaderHolder.graphics.drawRect(0,0,680,385);
			loaderHolder.graphics.endFill();
			loaderHolder.x=20;//position off to the right
			loaderHolder.y=-1000;
			sprite.addChild(loaderHolder);
			//-------- loads the big photo-------
			photoLoader = new UILoader();
			photoLoader.width=500;
			photoLoader.height=365;
			photoLoader.y=10;
			photoLoader.x=10;
			photoLoader.buttonMode=true;
			photoLoader.addEventListener(MouseEvent.CLICK,onClickBack);
			loaderHolder.addChild(photoLoader);
			var prev:PrevNextButton = new PrevNextButton();
            var next:PrevNextButton = new PrevNextButton();

            prev.addEventListener(MouseEvent.CLICK, function() { moveIt(-1); });
            prev.buttonMode = true;
            prev.x = 100;
            prev.y = 250;
            prev.scaleX = prev.scaleY = 3;
            addChild(prev);

            next.addEventListener(MouseEvent.CLICK, function() { moveIt(1); });
            next.buttonMode = true;
            next.x = 500;
            next.y = 250;
            next.scaleX = next.scaleY = 3;
            addChild(next);
			photoLoader.addEventListener(MouseEvent.CLICK, onClickBack);
		}

		/* we loop through the xml file
		populate the arrayURL, arrayName and position the thumbnalis*/
		function fileLoaded(event:Event):void {
			myXML=XML(event.target.data);
			xmlList=myXML.children();
			var th:Thumbnail;
			for (var i:int=0; i<xmlList.length(); i++) {
				var picURL:String=xmlList[i].url;
				var picName:String=xmlList[i].big_url;

				th=new Thumbnail(picURL,i,picName);
				th.addEventListener(MouseEvent.CLICK, onClick);
				th.name=picName;
				th.buttonMode=true;
				if (i<nrRows) {
					th.y=i*125+225;
					th.x=75;
				} else {
					th.y=thmbArray[i-nrRows].y;
					th.x=thmbArray[i-nrRows].x+125;
				}
			}
		}
		//----handles the Click event added to the thumbnails--
		function onClick(event:MouseEvent):void {
			photoLoader.source=event.currentTarget.name;
			Tweener.addTween(thumbsHolder, {x:-650, time:1, transition:"easeInExpo"});
			Tweener.addTween(loaderHolder, {y:20, time:1, transition:"easeInOutCubic"});
			Tweener.addTween(thumbsHolder, {alpha:0, time:1, transition:"linear"});
			Tweener.addTween(loaderHolder, {alpha:1, time:1, transition:"linear"});
		}
		//----handles the Click event added to the photoLoader----
		function onClickBack(event:MouseEvent):void {
			Tweener.addTween(thumbsHolder, {x:0, time:1, transition:"easeInExpo"});
			Tweener.addTween(loaderHolder, {y:-1000, time:1, transition:"easeInOutCubic"});
			Tweener.addTween(thumbsHolder, {alpha:1, time:2, transition:"linear"});
			Tweener.addTween(loaderHolder, {alpha:0, time:2, transition:"linear"});
		}

		        // The class contructor. Get's called everytime the
		        // class is created.

		public function PhotoGallery(src:String):void {
			init();
		}

		    function moveIt(dir:int) {
            var offsetX:Number = thumbsHolder.x + (dir * (3 * 110));
            Tweener.addTween(thumbsHolder, {x:offsetX, time:1, transition:"easeOut"});
        }

	}
}