<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:rs="com.rubenswieringa.*" 
    backgroundColor="#333333" 
    viewSourceURL="source/index.html"
    themeColor="haloSilver" 
    creationComplete="onCreationComplete()">
    
    <mx:Script>
        <![CDATA[
            
            private function onCreationComplete ():void {
                internalStyleEditor.text = myInternalStyle.content;
            }
            
            private function applyInternalStyle ():void {
                myInternalStyle.content = internalStyleEditor.text;
                refreshText();
            }
            
            private function applyExternalStyle ():void {
                myExternalStyle.source = externalStylePicker.selectedItem.data;
                refreshText();
            }
            
            private function refreshText ():void {
                // trick the TextArea class into thinking we're actually changing the text 
                // so that it will update it's appearance:
                dummyText.text = " " + dummyText.text;
                dummyText.text = dummyText.text.slice(1);
            }
            
        ]]>
    </mx:Script>
    
    
    <mx:Style>
        .textEditor {
             fontFamily: '_typewriter'; fontSize: 11; color: #666666;
            }
        .exampleTitle {
            fontSize: 24;
            fontFamily: Times new roman;
            fontStyle: italic;
            }
    </mx:Style>
    
    
    <rs:HTMLStyle id="myExternalStyle" source="" />
    <rs:HTMLStyle id="myInternalStyle">
        <![CDATA[
/* 
go ahead and edit the css in this textfield 
don't forget to hit the apply-button afterwards
*/

p {  }
a { color: blue; textDecoration: underline; }
a:hover { color: blue; }
strong { fontWeight: bold; display: inline; }

.lazy,
.quick,
.brown,
.jumps { fontStyle: italic; }
        ]]>
    </rs:HTMLStyle>
    
    
    <mx:Panel 
        id="panel" title="HTMLStyle demo" width="700"
        paddingTop="25" paddingRight="20" paddingBottom="25" paddingLeft="20">
        <mx:TextArea id="dummyText" styleName="textEditor" width="100%" height="66">
            <mx:text><![CDATA[<p>The <span class="quick">quick</span> <span class="brown">brown</span> <a href="http://www.firefox.com">fox</a> <span class="jumps">jumps</span> over the <span class="lazy">lazy</span> <strong>dog</strong>.</p>]]></mx:text>
        </mx:TextArea>
        <mx:HBox width="100%" horizontalGap="18" paddingTop="15">
            <mx:VBox width="100%">
                <mx:Label text="With internal stylesheet:" styleName="exampleTitle" />
                <mx:TextArea width="100%" height="100" id="internalStyleExample" styleSheet="{myInternalStyle.styleSheet}" htmlText="{dummyText.text}" />
                 <mx:TextArea width="100%" height="150" id="internalStyleEditor" />
                <mx:Button label="Apply style" click="applyInternalStyle()" />
            </mx:VBox>
            <mx:VBox width="100%">
                <mx:Label text="With external stylesheet:" styleName="exampleTitle" />
                <mx:TextArea width="100%" height="100" id="externalStyleExample" styleSheet="{myExternalStyle.styleSheet}" htmlText="{dummyText.text}" />
                <mx:Spacer width="100%" height="150" />
                <mx:ComboBox id="externalStylePicker" change="applyExternalStyle()">
                    <mx:ArrayCollection>
                        <mx:Object label="none" data="" />
                        <mx:Object label="dark.css" data="assets/css/dark.css" />
                        <mx:Object label="light.css" data="assets/css/light.css" />
                    </mx:ArrayCollection>
                </mx:ComboBox>
            </mx:VBox>
        </mx:HBox>
    </mx:Panel>
    
    
</mx:Application>