<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:album3d="de.marcusschiesser.album3d.*" backgroundColor="black" width="710" height="500" viewSourceURL="srcview/index.html">
<mx:Script>
    <![CDATA[
        import com.adobe.utils.DictionaryUtil;
        import mx.rpc.events.FaultEvent;
        import com.adobe.serialization.json.JSON;
        import mx.utils.StringUtil;
        import de.marcusschiesser.album3d.PictureLoader;
        import mx.rpc.AsyncToken;
        import mx.collections.ArrayCollection;
        import mx.rpc.events.ResultEvent;
        import mx.controls.Alert;
        import mx.core.IFlexDisplayObject;
        import mx.managers.PopUpManager;
        
        private function createDataSource(photos:ArrayCollection, pictureField:String = 'picture', labelField:String = 'label'):Array {
            var result:Array = new Array();
            for each(var photo:Object in photos) {
                var mappedPhoto:Object = new Object();
                mappedPhoto[pictureField] = 'http://farm' + photo.farm + '.static.flickr.com/' + photo.server + '/' + photo.id + '_' + photo.secret + '_m.jpg';
                mappedPhoto[labelField] = photo.title;
                result.push(mappedPhoto);
            }
            return result;
        }
        
        private function onResult(e:ResultEvent):void {
            var photos:ArrayCollection = service.lastResult.rsp.photos.photo as ArrayCollection;
            if(photos==null || photos.length==0) {
                changeStatus("No search results. Try again.");
            } else {
                var images:Array = createDataSource(photos, pictureFieldInput.text, labelFieldInput.text);
                album.dataProvider = images;
                output.text = JSON.encode(images);
                changeStatus(images.length + " images found. Take a look at the result");
            }
        }
        
        private function search(text:String, count:int):void {
            changeStatus("Retrieving data from flickr...");
            service.send({text: text, per_page: count});
        }
        
        private function changeStatus(str:String):void {
            statusLabel.text = str;
        }

    ]]>
</mx:Script>
    <mx:HTTPService id="service" url="http://api.flickr.com/services/rest/?method=flickr.photos.search&amp;api_key=2af404f2dfb7e80143a503dc72ee4367"
        result="onResult(event)" resultFormat="object" fault="Alert.show(event.fault.faultString, 'Error')"/>
    <mx:TabNavigator width="100%" height="100%" creationPolicy="all">
        <mx:Form label="Parameters" width="100%">
            <mx:FormItem label="Searchtext:" width="100%" >
                <mx:TextInput id="searchInput" width="100%" enter="search(searchInput.text, int(countInput.text))"/>
            </mx:FormItem>
            <mx:FormItem label="Number of pictures:" width="100%" >
                <mx:TextInput id="countInput" text="30" width="100%" enter="search(searchInput.text, int(countInput.text))" restrict="0-9"/>
            </mx:FormItem>
            <mx:FormItem label="Name of picture field:" width="100%" >
                <mx:TextInput id="pictureFieldInput" text="picture" width="100%"/>
            </mx:FormItem>
            <mx:FormItem label="Name of label field:" width="100%" >
                <mx:TextInput id="labelFieldInput" text="label" width="100%"/>
            </mx:FormItem>
            <mx:FormItem>
                <mx:Button label="Submit" click="search(searchInput.text, int(countInput.text))"/>
            </mx:FormItem>
            <mx:Label id="statusLabel" width="100%"/>
        </mx:Form>
        <mx:Panel label="JSON" width="100%" height="100%" headerHeight="6">
            <mx:TextArea verticalScrollPolicy="on" id="output" width="100%" height="100%"/>
        </mx:Panel>
        <mx:Panel label="Preview" width="100%" height="100%" headerHeight="6" backgroundColor="black">
            <album3d:Album3D id="album" width="100%" height="100%" 
                tileWidth="240" tileHeight="180" padding="20" zoomViewZ="-300" fullViewZ="1500" startPosX="-480"/>
        </mx:Panel>
    </mx:TabNavigator>
</mx:Application>