<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
	color="#000000">
	
	<mx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			
			[Bindable]
			public var purchasedPhotos:ArrayCollection;
		]]>
	</mx:Script>
		
	<mx:states>
		<mx:State name="expandedCart">
			<mx:SetProperty 
				target="{cart}" 
				name="height" 
				value="472" />
			<mx:AddChild 
				relativeTo="{cart}" 
				position="lastChild">
				<mx:DataGrid 
					x="10" y="60"
					height="340"
					dataProvider="{purchasedPhotos}" width="200">
					<mx:columns>
						<mx:DataGridColumn 
							headerText="Picture" 
							width="60"
							dataField="filename"/>
						<mx:DataGridColumn 
							headerText="Information" 
							width="100">
							<mx:itemRenderer>
								<mx:Component>
									<mx:VBox>
										<mx:Label text="{data.photographer}"/>
										<mx:Label text="{data.category}"/>
									</mx:VBox>
								</mx:Component>
							</mx:itemRenderer>
						</mx:DataGridColumn>
					</mx:columns>
				</mx:DataGrid>
			</mx:AddChild>
			<mx:AddChild 
				relativeTo="{cart}" 
				position="lastChild">
				<mx:Button 
					label="delete" 
					id="button3" 
					x="10" y="410" />
			</mx:AddChild>
			<mx:AddChild 
				relativeTo="{cart}" 
				position="lastChild">
				<mx:Button id="button2"
					label="check out" 
					x="131" y="408" />
			</mx:AddChild>

			<mx:SetProperty 
				target="{button1}" 
				name="label" 
				value="collapse details" />
			<mx:SetEventHandler 
				target="{button1}" 
				name="mouseUp" 
				handler="currentState=''" />
		</mx:State>
	</mx:states>

	<mx:transitions>
		<mx:Transition id="expandingCart"
			fromState="" toState="expandedCart">
			<mx:Resize target="{cart}" />
		</mx:Transition>
		<mx:Transition id="collapsingCart"
			fromState="expandedCart" toState="">
			<mx:Resize target="{cart}"
				duration="1000" />
		</mx:Transition>
	</mx:transitions>

	<mx:Image id="woman"
		y="100"
		source="assets/fstop/woman.jpg" />
	
	<mx:Panel id="cart"
		layout="absolute"
		width="225" height="90"
		title="Shopping Cart"
		borderAlpha="1"
		headerColors="[#63769E, #B5D2FA]"
		borderThicknessBottom="0"
		borderThicknessLeft="0"
		borderThicknessRight="0"
		paddingBottom="10">
		<mx:Label 
			x="10" y="8" 
			text="You have {purchasedPhotos.length} item(s) in your cart." />
		<mx:Button id="button1"
			x="10" y="30" 
			label="expand details"  
			mouseUp="currentState='expandedCart'" />
	</mx:Panel>

</mx:Canvas>
