<?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;
            [Bindable]
            public var categoryData:ArrayCollection;
            
            public function displayDetails(selectedPhoto:Photo):void
            {
                currentState='details';
                this.selectedPhoto=selectedPhoto;
                photoInState.load('assets/gallery/'+selectedPhoto.filename);
                photographerText.text=selectedPhoto.photographer;
                descText.text=selectedPhoto.desc;
            }
            private function purchasePhoto():void
            {
                var eventObj:PhotoEvent = new PhotoEvent(selectedPhoto,"photoSelected");
                dispatchEvent(eventObj);
            }
            private function filterByCat(item:Object):Boolean
            {
                return categories.selectedItem.categoryId == item.categoryId;
            }
            private function filterPhotos():void
            {
                if (allPhotos.selected) 
                {
                    photoData.filterFunction = null;
                }
                else 
                {
                    photoData.filterFunction = filterByCat;    
                }
                photoData.refresh();
            }
        ]]>
    </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 id="allPhotos"
                label="All Photos" 
                selected="true"
                click="filterPhotos()"/>
            <mx:Label 
                text="The Category" />
            <mx:ComboBox id="categories"
                change="filterPhotos()"
                dataProvider="{categoryData}"
                labelField="category"/>
        </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>