<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="vertical"
    backgroundColor="#000000"
    backgroundGradientColors="[#000000, #572A03]" 
    initialize="init()" 
    backgroundGradientAlphas="[1.0, 1.0]" 
    width="100%" height="100%"
    horizontalScrollPolicy="off"
    viewSourceURL="srcview/index.html" >
    
    <mx:Style>
        Button {
           cornerRadius: 0;
           highlightAlphas: 0.6, 0.14;
           fillAlphas: 0.45, 1, 1, 1;
           fillColors: #ec9c01, #ec9c01, #ec9c01, #fcc21d;
           color: #ffffff;
           textRollOverColor: #ffffff;
           textSelectedColor: #ffffff;
           borderColor: #999999;
           themeColor: #0000ff;
           fontFamily: Arial;
           fontSize: 12;
           fontWeight: bold;
        }
        
        Panel {
           borderStyle: solid;
           borderAlpha: 1;
           roundedBottomCorners: true;
           backgroundAlpha: 0.54;
           highlightAlphas: 0.46, 0.28;
           headerColors: #f7c25c, #ec9c01;
           backgroundColor: #000000;
           titleStyleName: "mypanelTitle";
        }
        
        .mypanelTitle {
           color: #ffffff;
           fontFamily: Arial;
           fontSize: 12;
           fontWeight: bold;
        }
        
        TitleWindow {
           borderStyle: solid;
           borderAlpha: 1;
           roundedBottomCorners: true;
           backgroundAlpha: 0.54;
           highlightAlphas: 0.46, 0.28;
           headerColors: #f7c25c, #ec9c01;
           backgroundColor: #000000;
           titleStyleName: "mypanelTitle";
        }
        
        
    </mx:Style>
    <mx:Script>
        <![CDATA[
            import view.MyWindow;
            import mx.managers.PopUpManager;
            import mx.effects.DefaultTileListEffect;
            import vo.ThumbnailVO;
            import mx.rpc.events.ResultEvent;
            import mx.controls.Alert;
            import mx.collections.ArrayCollection;
            import mx.effects.easing.Elastic;
        
            [Bindable]
            public var ac:ArrayCollection = new ArrayCollection();
            
            [Bindable]
            public var filterText:String = '';
            
            
            private function init():void
            {
                xmlService.send();
                
                //IN ORDER TO FILTER DATA, YOU HAVE TO SET AN ARRAYCOLLECTION
                //TO HAVE A filterFunction, AND WHEN REFRESH IS CALLED ON THE 
                //ARRAYCOLLECTION IT EXECUTES THE FUNCTION FOR EVERY OBJECT WITHIN IT
                ac.filterFunction = processFilter; 
            }
            
            private function xmlResult(event:ResultEvent):void
            {
                //PULL THE XML OUT OF THE RESULT EVENT THAT WE ARE GOING TO LOOP THROUGH
                var picsXML:XML = event.result.data[0] as XML;
                
                //this loops through all of the <img> tags in the xml 
                for each( var p:XML in picsXML.img )
                {
                    var label:String = p.@label;
                    var path:String = p.@path;
                    
                    var thumbnailVO:ThumbnailVO = new ThumbnailVO(label,path);
                    
                    //here we add the thumbnail to the public array collection
                    //by doing so the tileList that is bounded to this will be updated 
                    //automatically. you bind the tilelist by setting it's dataProvider with 
                    //mxml like this <mx:TileList dataProvider="{ac}"/> the curly {} brackets indicate
                    //mxml's compiler to write binding for your, and it will automatically
                    //detect changes to the arrayCollection.
                    ac.addItem(thumbnailVO);
                }
            }
            
            /**
             * the filter function is called for every item
             * in the arraycollection and returns a true or false
             * as to whether it matches certain criteria and should
             * be included
             **/
            private function processFilter(item:Object):Boolean
            {
                //now, to keep things generic you want to go with 
                //an object most of the time, but to show you how you 
                //would get code hints off of this, i'm going to specify 
                //that object to be a thumbnailVO so we get code hinting 
                //off of it.
                
                var thumbnailVO:ThumbnailVO;
                if(item is ThumbnailVO)
                    thumbnailVO = item as ThumbnailVO;
                else
                {
                    thumbnailVO = new ThumbnailVO(item.label,item.path);
                } 
                
                var result:Boolean = false;
                
                if (!thumbnailVO.label.length
                     || thumbnailVO.label.toUpperCase().indexOf(this.filterText.toUpperCase()) >= 0)
                     result=true;
                
                return result;
            }
            
            /*****
             * doChange is called from the text fields change event
             * and will be responsible for setting the public var filterText 
             * equal to whatever is in the text box.
             * 
             * it will also be responsible for calling the filterFunction on the array
             * aka, the arrayCollection's refresh function.
             **/
            private function doChange():void
            {
                this.filterText = txtSearch.text;
                this.ac.refresh();

            }

            public function createPopup():void
            {
                if(myPicsTileList.selectedItem == null)
                    return;
                    
                var di:MyWindow = new MyWindow();
                
                if(myPicsTileList.selectedItem != null)
                    di.thumbnailVO = myPicsTileList.selectedItem as ThumbnailVO;
                else
                    return; 

                PopUpManager.addPopUp(di,this);
                
                di.percentHeight = 80;
                di.percentWidth = 80;
                
                di.x = this.width / 2 - di.width;
                di.y = 0;                
                
            }
        ]]>
    </mx:Script>
    <mx:DefaultTileListEffect id="myTileListEffect"/>
    
    <mx:HTTPService id="xmlService" url="assets/data/data.xml" resultFormat="e4x" result="xmlResult(event)" fault="Alert.show(event.fault.faultString)"/>
    
    <mx:Panel width="100%" height="100%" layout="vertical" title="Axelscript Images">
        <mx:HBox width="50%" height="100%" minHeight="60" backgroundColor="#000000">
            <mx:VBox height="100%" width="50%" verticalAlign="middle" paddingLeft="10" paddingRight="10">
                <mx:Label text="Axelology" color="#ffffff" fontFamily="Arial" fontSize="14" fontWeight="bold"/>
                <mx:Label text="Axel Jensen on Flex, Coldfusion and... other stuff" color="#ffffff" fontFamily="Arial" fontSize="14" fontWeight="bold"/>
            </mx:VBox>
            <mx:HBox height="100%" width="50%" horizontalAlign="center" verticalAlign="middle">
                <mx:TextInput id="txtSearch" change="doChange()" />
                <mx:Button id="btnSearch" label="Filter" />
            </mx:HBox>
        </mx:HBox>
        <mx:HBox height="85%" width="100%">
            <mx:TileList 
                backgroundColor="#000000"
                rollOverColor="#EC9C01"
                selectionColor="#FCC21D"
                backgroundAlpha="5"
                id="myPicsTileList"
                dataProvider="{ac}"
                width="100%"
                height="85%"
                itemRenderer="view.Thumbnail"
                dragMoveEnabled="true"
                dragEnabled="true"
                dropEnabled="true"
                itemsChangeEffect="{myTileListEffect}"
                itemClick="createPopup()"
                >
            </mx:TileList>
        </mx:HBox>
    </mx:Panel>
</mx:Application>