<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns="*" 
    height="600" width="1000" viewSourceURL="srcview/index.html">

    <!-- 
    This is a demonstration of the iframe demo found at http://www.deitte.com/archives/2006/08/finally_updated.htm
    as an AIR application.
    
    What needed to change from the iframe demo:
    - The IFrame component has been removed and is simply replaced with mx:HTML.  The 'source' attribute changed to 'location'.
    - No HTML wrapper file is needed, since this is an AIR application.  But an AIR badge, not included in these source files,
      is used to launch the AIR app from a web page.  You can find the source to the badge that was used here:
      http://labs.adobe.com/wiki/index.php/AIR_Badge
    - Application changed to WindowedApplication, as is needed for all AIR applications.      
    - HTMLDemo-app.xml was added, the AIR configuration file. 
    
    Additional enchancements:      
    - Cleaned up the MXML, moving code into functions.
    - Used the HTML events to show a busy cursor when a page is loading.
    - Added back some sites that didn't work in the Flex version.     
    - Added Wacky HTML mode for the fun of it, to show how easy it is to change the display of HTML in an AIR app.    
    -->
      
    <mx:HBox width="100%" height="100%">
        <mx:Panel title="Tree" width="200" height="100%" roundedBottomCorners="true">
             <mx:Tree id="tree" width="100%" height="100%" dataProvider="{treeData}"
                     labelField="@label" showRoot="false"
                     change="treeChange(event)"  />
        </mx:Panel>
        <mx:Panel width="100%" height="100%" title="Content" paddingTop="1" paddingBottom="1" paddingLeft="1" paddingRight="1" >
            <mx:HTML id="html" location="http://www.adobe.com/devnet/flex/" 
                locationChange="htmlLocationChange()" htmlRender="htmlLocationComplete()" 
                width="100%" height="100%" />
            <mx:ControlBar>
                <mx:CheckBox id="cbVisible" label="HTML Visible" selected="true" click="visibleClick(event)"/>
                <mx:CheckBox id="cbWacky" label="Wacky HTML" selected="false" click="wackyClick(event)"/>
            </mx:ControlBar>
        </mx:Panel>

    </mx:HBox>

    <mx:XMLList id="treeData">
        <node label="Flex Resources">
            <node label="Flex Developer Center" path="http://www.adobe.com/devnet/flex/" />
            <node label="Flex Team Blog" path="http://weblogs.macromedia.com/flexteam/" />
            <node label="Flex Blogs on MXNA" path="http://weblogs.macromedia.com/mxna/FeedList.cfm#Flex" />
            <node label="Deitte.com" path="http://deitte.com" />
            <!-- These sites pop themselves out of a frame, so they weren't included in the original demo.  They work just fine
                 for the AIR app though -->
            <node label="flex.org" path="http://www.flex.org" />
            <node label="Adobe Labs" path="http://labs.adobe.com/wiki/index.php/Main_Page" />
        </node>
        <node label="Search">
            <node label="Google" path="http://www.google.com" />
            <node label="Yahoo" path="http://www.yahoo.com" />
        </node>
    </mx:XMLList>

    <mx:Script>
        <![CDATA[
            import mx.managers.CursorManager;
        
        /**
         * Timer for Wacky HTML 
         */
        private var timer:Timer;        
        
        /**
         * Changes the HTML location when the tree's selection changes
         **/
        public function treeChange(event:Event):void 
        {
            html.location = (Tree(event.target).selectedItem.attribute('path').toString());
        }
        
        /**
         * Sets a busy cursor when a new page is loading
         **/
        public function htmlLocationChange():void
        {
            CursorManager.setBusyCursor();
        }

        /**
         * Removes a busy cursor when a page is done loading
         */
        public function htmlLocationComplete():void
        {
            CursorManager.removeBusyCursor();
        }

        /**
         * Makes HTML visible when there's a click on the visible CheckBox 
         */        
        public function visibleClick(event:MouseEvent):void
        {
            html.visible =  cbVisible.selected;
        }

        /**
         * Creates a timer for wackiness when there's a click on the wacky CheckBox 
         */
        public function wackyClick(event:MouseEvent):void
        {
            if (cbWacky.selected)
            {
                timer = new Timer(250);
                timer.addEventListener(TimerEvent.TIMER, wackyTimer);
                timer.start();
            }
            else 
            {
                timer.stop();
                timer.removeEventListener(TimerEvent.TIMER, wackyTimer);
                html.filters = null;                
            }
        }
        
        /**
         * Called on a Timer for Wacky HTML, setting a random ColorMatrixFilter on HTML
         */
        public function wackyTimer(event:TimerEvent):void 
        {
            // create a matrix for a random color which still allows the page to be seen 
            var matrix:Array = new Array();
            matrix = matrix.concat([Math.random(), 0, 0, 0, 0]);
            matrix = matrix.concat([0, Math.random(), 0, 0, 0]);
            matrix = matrix.concat([0, 0, Math.random(), 0, 0]);
            matrix = matrix.concat([0, 0, 0, Math.max(1, Math.random() + .5), 0]);
            
            var filter:ColorMatrixFilter = new ColorMatrixFilter(matrix);
            html.filters = [filter];
        }
        
        ]]>
    </mx:Script>
    
</mx:WindowedApplication>