<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundGradientColors="[#000000, #444444]" xmlns:reflector="com.rictus.reflector.*"
    verticalScrollPolicy="off" xmlns:local="*" initialize="initApp()">

    <mx:Style source="style.css"/>
    
    <mx:Script>
        <![CDATA[
        
            import mx.events.*;
            import flash.events.*;
            
            private function viewState():void {
                if (viewToggle.selectedIndex==0) {
                    window.height=686;
                    searchResults.visible=true;
                    shelf.visible=false;
                    sel.visible=false;
                }
                if (viewToggle.selectedIndex==1) {
                    window.height=56;
                    searchResults.visible=false;
                    shelf.visible=true;
                    sel.visible=true;
                }
            }
            
            [Bindable]
            [@Embed(source='style/style.swf',symbol='tileIcon')]
            public var tileIcon:String;
            
            [Bindable]
            [@Embed(source='style/style.swf',symbol='shelfIcon')]
            public var shelfIcon:String;
            
            private function initApp():void {
            application.addEventListener(KeyboardEvent.KEY_UP,keyHandler);
        }

        //This function quits the application if the user presses Enter.
        private function keyHandler(event:KeyboardEvent):void {

                var curKeyCode:int = event.keyCode;
                if (curKeyCode == 13) { // 13 is the keycode value for the Enter key
                    // Enter sends service send request.
                    photoService.send();               
                }
            }
                        
        ]]>
    </mx:Script>
    

    <mx:HTTPService id="photoService"
        url="http://api.flickr.com/services/rest/?method=flickr.photos.search&amp;api_key=948c859f4abb26153e5b8ee1cf10dd76&amp;{searchCrit.selectedItem.data}={searchInput.text}&amp;per_page=30"/>
        
    <mx:HTTPService id="peopleService"
        url="http://api.flickr.com/services/rest/?method=flickr.photos.search&amp;api_key=948c859f4abb26153e5b8ee1cf10dd76&amp;{searchCrit.selectedItem.data}={searchInput.text}&amp;per_page=30"/>
    
    <mx:VBox horizontalCenter="0" top="10" resizeEffect="Resize" id="searchWindow" width="630" bottom="60">
    <mx:VBox borderStyle="solid" cornerRadius="10" backgroundColor="#ffffff" backgroundAlpha=".15" borderThickness="0" alpha="1.0" paddingTop="0" paddingBottom="10"
        dropShadowEnabled="true" id="window" width="630" height="686" resizeEffect="Resize" verticalScrollPolicy="off" horizontalScrollPolicy="off">
        <mx:Canvas width="630" height="50" alpha=".5">
        <mx:VBox x="0" y="0" width="100%" height="50%" backgroundSize="100%" backgroundAlpha=".15">
                <mx:backgroundImage>@Embed(source='/style/style.swf', symbol='imageShine')</mx:backgroundImage>
            </mx:VBox>
            <mx:Canvas left="10" y="6">
                <mx:Label text="photo findr" fontFamily="Georgia" fontSize="22" color="#57abc9" x="2"/>
                <mx:Label text="search it. find it. view it." fontFamily="Arial" fontSize="11" color="#ffffff" x="13" y="22"/>
            </mx:Canvas>
            <mx:HBox x="216" y="20" width="400" horizontalAlign="right">
                <mx:ToggleButtonBar id="viewToggle" itemClick="viewState();" width="56" height="21">
                    <mx:Array>
                        <mx:Object icon="{tileIcon}"/>
                        <mx:Object icon="{shelfIcon}"/>
                    </mx:Array>
                </mx:ToggleButtonBar>
                <mx:HBox horizontalGap="0">
                    <mx:ComboBox prompt="" id="searchCrit" styleName="searchDrop" width="26.9" height="21" selectedIndex="0" dropdownWidth="60">
                            <mx:dataProvider>
                                <mx:Array>
                                    <mx:Object id="tags" label="Tags" data="tags"/>
                                    <mx:Object id="userId" label="User Id" data="user_id"/>
                                    <mx:Object id="text" label="Text" data="text"/>
                                </mx:Array>
                            </mx:dataProvider>
                        </mx:ComboBox>
                    <mx:HBox horizontalGap="0" backgroundSize="100%" paddingLeft="4" paddingRight="10" height="21" verticalAlign="middle">
                        <mx:backgroundImage>@Embed(source='style/style.swf',symbol='searchFieldBg')</mx:backgroundImage>
                        <mx:TextInput id="searchInput" width="200" height="18"  color="#999999" borderStyle="none" borderThickness="0" alpha="0" focusThickness="0"/>
                    </mx:HBox>
                </mx:HBox>
            </mx:HBox>
        </mx:Canvas>
        <mx:TileList width="100%" height="620" backgroundAlpha="0" id="searchResults" dataProvider="{photoService.lastResult.rsp.photos.photo}" borderStyle="none" itemRenderer="imageRender" resizeEffect="Resize" rollOverColor="#444444" dragMoveEnabled="true" dragEnabled="true" allowDragSelection="true" allowMultipleSelection="true" showEffect="Fade" creationCompleteEffect="Fade" hideEffect="Fade" removedEffect="Fade"></mx:TileList>
    </mx:VBox>
    
    <reflector:Reflector target="{window}" alpha=".3" falloff=".2" bottom="50" left="50" right="50" height="10" width="100%"/>

    </mx:VBox>    
    
    <mx:Binding source="sel.value" destination="shelf.selectedIndex" />
    <mx:Binding destination="sel.value" source="shelf.selectedIndex" />
    
    <mx:Binding source="angle.value" destination="shelf.angle" />
    <mx:Binding source="pop.value" destination="shelf.popout" />

    <local:DisplayShelf id="shelf"  horizontalCenter="0" verticalCenter="0" visible="false" showEffect="Fade" hideEffect="Fade"
        borderThickness="10" borderColor="#FFFFFF" dataProvider="{photoService.lastResult.rsp.photos.photo}"  enableHistory="false" width="100%" itemRenderer="image" creationCompleteEffect="Fade"/>
        
    <mx:VBox horizontalCenter="0" bottom="10"
        horizontalAlign="center" verticalAlign="middle" visible="false" includeInLayout="false">         

        <mx:HBox>
            <mx:Label text="Angle:" />
            <mx:HSlider liveDragging="true" id="angle" minimum="5" value="35" maximum="90" snapInterval=".1" width="400" />
        </mx:HBox>

        <mx:HBox>
            <mx:Label text="pop:" />
            <mx:HSlider liveDragging="true" id="pop" minimum="0" value=".43" maximum="1" snapInterval=".01" width="400" />
        </mx:HBox>

    </mx:VBox>
    <mx:HSlider liveDragging="true" id="sel" minimum="0" value="0" maximum="{shelf.dataProvider.length}" snapInterval="1" width="400" horizontalCenter="0" showEffect="Fade" hideEffect="Fade" visible="false" bottom="50"/>
    
</mx:Application>