<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"
	xmlns:v="views.*">
	
	<mx:Metadata>
		[Event(name="photoSelected",type="events.PhotoEvent")]
	</mx:Metadata>
	
	<mx:Script>
		<![CDATA[
			import events.PhotoEvent;
			import valueObjects.Photo;
			import mx.collections.ArrayCollection;
			
			[Bindable]
			public var photoData:ArrayCollection;
			[Bindable]
			private var selectedPhoto:Photo;
			
			private function displayDetails(selectedPhoto:Photo):void
			{
			    currentState='details';
			    this.selectedPhoto=selectedPhoto;
			    photoInState.load('assets/gallery/'+selectedPhoto.filename + ".jpg");
			    photographerText.text=selectedPhoto.photographer;
			    descText.text=selectedPhoto.desc;
			}

			private function purchasePhoto():void
			{
				var eventObj:PhotoEvent = new PhotoEvent(selectedPhoto,"photoSelected");
				dispatchEvent(eventObj);
			}
		]]>
	</mx:Script>
	
	<mx:states>
		<mx:State name="details">
			<mx:RemoveChild 
				target="{thumbnails}" />
			<mx:AddChild 
				relativeTo="{photoViewer}" 
				position="lastChild">
				<mx:Canvas>
					<mx:Image id="photoInState" 
						x="55" y="15"
						width="400"/>
					<mx:Text id="photographerText" 
						x="65" y="330" 
						width="367" height="18"
						fontWeight="bold"
						color="#F8E5BB" />
					<mx:Text id="descText"
						x="65" y="350"
						width="367" height="36"
						color="#F8E5BB" />
					<mx:Button
						x="65" y="400"
						fillAlphas="[1,.8]"
						fillColors="[#F8E5BB, #F8E5BB]"
						label="return to gallery" click="currentState=''" />
					<mx:Button
						x="200" y="400"
						fillAlphas="[1,.8]"
						fillColors="[#F8E5BB, #F8E5BB]"
						label="purchase photo" 
						click="purchasePhoto()" />
				</mx:Canvas>
			</mx:AddChild>
		</mx:State>
	</mx:states>
	
	<mx:VBox id="photoViewer"
		verticalGap="8"
		width="515">
		<mx:HBox 
			backgroundColor="#F8E5BB"
			width="100%"
			paddingBottom="3"
			paddingLeft="5"
			paddingRight="5"
			paddingTop="8"
			verticalAlign="middle"
			fontSize="11">
			<mx:Label 
				text="You are viewing:" />
			<mx:CheckBox 
				label="All Photos" 
				selected="true"/>
			<mx:Label 
				text="The Category" />
			<mx:ComboBox>
				<mx:dataProvider>
					<mx:ArrayCollection>
						<mx:String>Abstract</mx:String>
						<mx:String>Animals</mx:String>
						<mx:String>City</mx:String>
						<mx:String>Miscellaneous</mx:String>
						<mx:String>Nature</mx:String>
						<mx:String>People</mx:String>
					</mx:ArrayCollection>
				</mx:dataProvider>	
			</mx:ComboBox>
		</mx:HBox>
		<mx:TileList id="thumbnails"
			backgroundColor="#000000"
			backgroundAlpha="0"
			columnWidth="120"
			rowHeight="110"
			width="515"
			height="430"
			dataProvider="{photoData}"
			itemRenderer="views.DisplayImage"
			change="displayDetails(event.target.selectedItem as Photo)"
			rollOverColor="#63769E"
			borderThickness="0"/>
	</mx:VBox>
	
</mx:HBox>
