<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    backgroundColor="#FFFFFF"
    backgroundAlpha="0"
    horizontalAlign="left"
    verticalGap="15"
    horizontalGap="15">

    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.rpc.events.ResultEvent;
            import mx.rpc.events.FaultEvent;
            import mx.controls.Alert;

            [Bindable]
            private var photoFeed:ArrayCollection;

            private function requestPhotos():void {
                var params:Object = new Object();
                params.format = 'rss_200_enc';
                params.tags = searchTerms.text;
                photoService.send(params);
            }

            private function photoHandler(event:ResultEvent):void {
                photoFeed= event.result.rss.channel.item as ArrayCollection;
                datagrid_id.dataProvider = photoFeed;
                datagrid_id.visible = true;
            }

            private function faultHandler(event:FaultEvent):void{
                Alert.show(event.fault.faultCode + " , " + event.fault.faultString);
            }

            private function showPopup(event:Event):void{
                theImage.source = photoFeed.getItemAt(event.currentTarget.selectedIndex).content.url
                desc.text = photoFeed.getItemAt(event.currentTarget.selectedIndex).title.getItemAt(0)
                popup.visible = true;
            }

            private function hidePopup():void{
                popup.visible = false;
                popup.includeInLayout = false;
            }
        ]]>
    </mx:Script>


    <mx:HTTPService id="photoService"
        url="http://api.flickr.com/services/feeds/photos_public.gne"
        result="photoHandler(event)"
        fault="faultHandler(event)" />

    <mx:HBox>
        <mx:Label text="Enter Search Terms"/>
        <mx:TextInput id="searchTerms" enter="requestPhotos()" />
        <mx:Button label="Search"
            click="requestPhotos()" />
    </mx:HBox>

    <mx:HBox>
        <mx:DataGrid id="datagrid_id"
            visible="false"
            itemClick="showPopup(event)">
            <mx:columns>
                <mx:DataGridColumn  dataField="title" headerText="Title" width="100" >
                <mx:itemRenderer>
                    <mx:Component>
                        <mx:Label text="{data.title.getItemAt(0)}" textAlign="center"/>
                        </mx:Component>
                    </mx:itemRenderer>
                </mx:DataGridColumn>
                <mx:DataGridColumn dataField="credit" headerText="Author" width="100" />
                <mx:DataGridColumn dataField="thumbnail" headerText="Photo" width="100">
                    <mx:itemRenderer>
                        <mx:Component>
                            <mx:Image height="75"
                                horizontalAlign="center"
                                source="{data.thumbnail.url}"/>
                        </mx:Component>
                    </mx:itemRenderer>
                </mx:DataGridColumn>
            </mx:columns>
        </mx:DataGrid>

        <mx:Panel id="popup"
            visible="false"
            click="hidePopup()"
            paddingLeft="10" paddingTop="10" paddingRight="10"
            layout="horizontal">
            <mx:VBox width="325" height="400">
                <mx:Label id="desc"/>
                <mx:Image id="theImage"/>
            </mx:VBox>
        </mx:Panel>
    </mx:HBox>
</mx:Application>