<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/08/creating-a-simple-image-gallery-with-the-flex-tilelist-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
		layout="vertical"
		verticalAlign="middle"
		backgroundColor="white" viewSourceURL="srcview/index.html">

	<mx:Style>
		global {
			modal-transparency: 0.9;
			modal-transparency-color: white;
			modal-transparency-blur: 9;
		}
	</mx:Style>

	<mx:Script>
		<![CDATA[
			import mx.effects.Resize;
			import mx.events.ResizeEvent;
			import mx.events.ListEvent;
			import mx.controls.Image;
			import mx.events.ItemClickEvent;
			import mx.managers.PopUpManager;

			private var img:Image;

			private function tileList_itemClick(evt:ListEvent):void {
				img = new Image();
				// img.width = 300;
				// img.height = 300;
				img.maintainAspectRatio = true;
				img.addEventListener(Event.COMPLETE, image_complete);
				img.addEventListener(ResizeEvent.RESIZE, image_resize);
				img.addEventListener(MouseEvent.CLICK, image_click);
				img.source = evt.itemRenderer.data.@fullImage;
				img.setStyle("addedEffect", image_addedEffect);
				img.setStyle("removedEffect", image_removedEffect);
				PopUpManager.addPopUp(img, this, true);
			}
			
			private function image_click(evt:MouseEvent):void {
				PopUpManager.removePopUp(evt.currentTarget as Image);
			}
			
			private function image_resize(evt:ResizeEvent):void {
				PopUpManager.centerPopUp(evt.currentTarget as Image);
			}
			
			private function image_complete(evt:Event):void {
				PopUpManager.centerPopUp(evt.currentTarget as Image);
			}
		]]>
	</mx:Script>

	<mx:WipeDown id="image_addedEffect" startDelay="100" />

	<mx:Parallel id="image_removedEffect">
		<mx:Zoom />
		<mx:Fade />
	</mx:Parallel>

	<mx:XML id="xml" source="gallery.xml" />
	<mx:XMLListCollection id="xmlListColl" source="{xml.image}" />

	<mx:TileList id="tileList"
			dataProvider="{xmlListColl}"
			itemRenderer="CustomItemRenderer"
			columnCount="4"
			columnWidth="125"
			rowCount="2"
			rowHeight="100"
			themeColor="haloSilver"
			verticalScrollPolicy="on"
			itemClick="tileList_itemClick(event);" />

</mx:Application>