<?xml version="1.0" encoding="utf-8"?>
<!--

  [Pepe's Samples]

    Author  : Pepe at Flex User Group in Japan (FxUG).
              an architect at LINKcom corporation.
    Blog    : http://Shigeru-Nakagaki.com/
    FxUG    : http://www.fxug.net/

    Instructions
      You can use this sample code in your own responsibility.

-->
<mx:Application layout="horizontal"
         xmlns:mx="http://www.adobe.com/2006/mxml"
         xmlns:fref="org.pepe.samples.FileReference.*"
         paddingBottom="6" paddingLeft="20" paddingRight="20" paddingTop="10"
         horizontalGap="20"
         viewSourceURL="srcview/index.html">

    <mx:creationComplete>
        <![CDATA[
            initApp();
        ]]>
    </mx:creationComplete>

    <mx:Script>
        <![CDATA[
            import flash.events.*;

            import mx.controls.Alert;
            import mx.rpc.events.*;
            import mx.events.*;
            import mx.collections.ArrayCollection;

            private var _req:URLRequest = new URLRequest("upload2.cfm");

            // Initialize Application
            private function initApp():void
            {
                getImageList.addEventListener("result",refreshUploadedImages);
                getImageList.addEventListener("fault",httpFault);
                getImageList.send();
            }
            
            // HttpService fault handler
            private function httpFault(e:FaultEvent):void
            {
                Alert.show(e.fault.message);
            }
            
            // Event when files uploaded
            private function fileUploaded(e:Event):void
            {
                getImageList.clearResult();
                getImageList.send();
            }
            
            // Event when list of uploaded images was got as XML data
            private function refreshUploadedImages(e:ResultEvent):void
            {
                if(e.result.hasOwnProperty("ITEM"))
                {
                    uploadedImages.dataProvider = e.result.ITEM;
                }else{
                    var ac:ArrayCollection = new ArrayCollection();
                    uploadedImages.dataProvider = ac;
                }
            }
            
            // Load selected image
            private function loadImage(selectedItem:Object):void
            {
                if(selectedItem)
                {
                    
                    imgViewer.setImageSrc("./images/"+selectedItem.label,selectedItem.label);
                }
            }
            
            private function sizeSortFunction(obj1:Object, obj2:Object):int
            {
                var ret:int = 0;
                var size1:uint = uint(obj1.size.toString());
                var size2:uint = uint(obj2.size.toString());
                
                if(size1 < size2){
                    ret = -1;
                }else if(size1 > size2){
                    ret = 1;
                }
                
                return ret;
            }
            
        ]]>
    </mx:Script>

    <mx:HTTPService id="getImageList" url="getImageList.cfm"
         resultFormat="e4x" showBusyCursor="true" />
    
    <mx:HDividedBox width="100%" height="100%" liveDragging="true" horizontalGap="20">
        <mx:VBox minWidth="300" height="100%">
        
            <!-- Panel for uploading files -->
            <fref:FileUploader id="fup" title="ImageFile Uploader"
                 width="100%" minHeight="200"
                 complete="getImageList.send()"/>
        
            <!-- Panel for uploaded files list -->
            <mx:Panel title="Uploaded Files List"
                 width="100%" height="100%" minHeight="400" cornerRadius="10">
                <mx:DataGrid width="100%" height="100%" id="uploadedImages"
                     allowMultipleSelection="true"
                     change="loadImage(uploadedImages.selectedItem)">
                     <mx:columns>
                    <mx:DataGridColumn dataField="label" headerText="Name"/>
                    <mx:DataGridColumn dataField="dateLastModified" headerText="Date" width="140" />
                    <mx:DataGridColumn dataField="size" headerText="Size(Kb)" textAlign="right" width="80"
                         sortCompareFunction="sizeSortFunction" />
                     </mx:columns>
                </mx:DataGrid>
            </mx:Panel>
        </mx:VBox>

        <fref:Viewer id="imgViewer" width="100%" height="100%"
             deleteCompleted="getImageList.send()"/>

    </mx:HDividedBox>

</mx:Application>