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

////////////////////////////////////////////////////////////////////////////////
//
//    Copyright 2014 Ardisia Labs LLC. All Rights Reserved.
//
//    This file is licensed under the Apache License, Version 2.0 (the "License");
//    you may not use this file except in compliance with the License.
//    You may obtain a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//
//    Unless required by applicable law or agreed to in writing, software
//    distributed under the License is distributed on an "AS IS" BASIS,
//    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
//    See the License for the specific language governing permissions and
//    limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////

-->
<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009" 
          xmlns:s="library://ns.adobe.com/flex/spark" 
          xmlns:containers="containers.*"
          xmlns:data="containers.data.*"
          xmlns:separators="ardisia.components.separators.*"
          xmlns:colorPicker="ardisia.components.colorPicker.*" 
          xmlns:htmlFrame="ardisia.components.htmlFrame.*" 
          xmlns:pane="ardisia.components.pane.*"
          frameRate="60"
          width="100%" height="100%"
          removedFromStage="removedFromStageHandler(event)"
          preinitialize="application1_preinitializeHandler(event)">
    
    <!-- scripts -->
    <fx:Script>
        <![CDATA[
            import mx.core.FlexGlobals;
            import mx.events.FlexEvent;
            
            import spark.events.IndexChangeEvent;
            
            import ardisia.components.htmlFrame.HtmlFrame;
            
            //--------------------------------------
            //  methods
            //--------------------------------------
            
            public function creationComplete():void
            { 
                demoAppWrapper.topLevelCompassContainer.westResizeLocked = false;
                demoAppWrapper.topLevelCompassContainer.westCanBeMinimized = false;
                demoAppWrapper.topLevelCompassContainer.minWestWidth = 10;
                demoAppWrapper.viewstack.addEventListener(IndexChangeEvent.CHANGE, viewstackChangeHandler);
            }
            
            public function animatedIn():void
            {
                htmlFrameA.visible = true;
            }
            
            //--------------------------------------
            //  event handlers
            //--------------------------------------
            
            protected function viewstackChangeHandler(event:Event):void
            {
                if (!htmlFrameA || !htmlFrameB || !htmlFrameC || !htmlFrameD || !htmlFrameE) 
                    return;
                
                var selectedLabel:String = demoAppWrapper.tabBar.selectedItem.label;
                if (selectedLabel == "Single HtmlFrame") 
                {
                    borderVisibleSelect.selected = true;
                    htmlFrameB.visible = htmlFrameC.visible = htmlFrameD.visible = popup.visible = htmlFrameE.visible = false;
                    htmlFrameA.visible = true;
                }
                if (selectedLabel == "Multiple HtmlFrames")
                {
                    borderVisibleSelect.selected = true;
                    htmlFrameA.visible = htmlFrameD.visible = htmlFrameE.visible = popup.visible = false;
                    htmlFrameB.visible = htmlFrameC.visible = true;
                    htmlFrameB.setFrameSourceURL('http://ardisialabs.com/external-test.php'); 
                    htmlFrameC.setFrameSourceURL('http://ardisialabs.com/js/ckeditor/index.html');
                }
                if (selectedLabel == "Draggable HtmlFrame")
                {
                    borderVisibleSelect.selected = false;
                    htmlFrameA.visible = htmlFrameB.visible = htmlFrameC.visible = htmlFrameE.visible = false;
                    htmlFrameD.visible=popup.visible = true;
                    htmlFrameD.setFrameSourceURL('http://ardisialabs.com/js/ckeditor/index.html');
                }
                if (selectedLabel == "Raw HTML")
                {
                    borderVisibleSelect.selected = true;
                    htmlFrameA.visible = htmlFrameB.visible = htmlFrameC.visible = htmlFrameD.visible = popup.visible = false;
                    htmlFrameE.visible = true;
                }
            }
            
            protected function application1_preinitializeHandler(event:FlexEvent):void
            {
                Security.allowDomain("*");
            }
            
            protected function removedFromStageHandler(event:Event):void
            {
                if (popup)
                    popup.closeFloatedPane(true);
                
                // dispose of the frames so the iframe is removed from the DOM
                htmlFrameA.dispose();
                htmlFrameB.dispose();
                htmlFrameC.dispose();
                htmlFrameD.dispose();
                htmlFrameE.dispose();
            }
            
        ]]>
    </fx:Script>
    
    <!-- declarations -->
    <fx:Declarations>
        
        <s:NumberFormatter id="numFormatter" 
                           fractionalDigits="4"/>
        
    </fx:Declarations>
    
    <!-- states -->
    <s:states>
        <s:State name="stockholm" />
        <s:State name="london" />
        <s:State name="spark" />
    </s:states>
    
    <!-- application -->
    <containers:DemoApplicationWrapper id="demoAppWrapper" 
                                       width="100%" height="100%"
                                       westRegionTitle="HtmlFrame Description"
                                       description="The HtmlFrame component displays HTML content inside a Flex component.&#13;&#13;Users can load a URL (webpage, PDF, image, etc.) into the component (remote or local content) or set raw HTML markup. The HtmlFrame's position is managed like any other Flex based visual element.&#13;&#13;The HtmlFrame works without changing any settings (including wmode) in the application or the HTML wrapper, unlike other Flex based HTML viewport components.&#13;&#13;No changes to the HTML wrapper or Flash Player settings are necessary to use this component."
                                       currentState.stockholm="stockholm" currentState.london="london" currentState.spark="spark">
        
        <containers:expandingContainerContent>
            
            <!--- expanding container #1 -->
            <data:ExpandingContainerData>
                <data:label>Styling</data:label>
                <data:content>
                    <s:FormItem label="Padding Top:">
                        <s:HSlider id="framePaddingTopSelect"
                                   width="100"
                                   minimum="0" maximum="50" value="0"/>
                    </s:FormItem>
                    <s:FormItem label="Padding Right:">
                        <s:HSlider id="framePaddingRightSelect"
                                   width="100"
                                   minimum="0" maximum="50" value="0"/>
                    </s:FormItem>
                    <s:FormItem label="Padding Bottom:">
                        <s:HSlider id="framePaddingBottomSelect"
                                   width="100"
                                   minimum="0" maximum="50" value="0"/>
                    </s:FormItem>
                    <s:FormItem label="Padding Left:">
                        <s:HSlider id="framePaddingLeftSelect"
                                   width="100"
                                   minimum="0" maximum="50" value="0"/>
                    </s:FormItem>
                    <!--
                    <s:FormItem enabled="{demoAppWrapper.viewstack.selectedIndex!=2}" 
                                label="Background Color:">
                        <colorPicker:ColorPicker id="backgroundColorSelect"
                                                 selectedColor="#FFFFFF"
                                                 open="backgroundColorSelect.popupPart.move(5, backgroundColorSelect.popupPart.y);"/>
                    </s:FormItem>
                    -->
                    <s:FormItem label="Border Visible:"
                                enabled="{demoAppWrapper.viewstack.selectedIndex!=2}">
                        <s:CheckBox id="borderVisibleSelect"
                                    selected="true"/>
                    </s:FormItem>
                    <s:FormItem enabled="{borderVisibleSelect.selected}" 
                                label="Border Color:">
                        <colorPicker:ColorPicker id="borderColorSelect"
                                                 selectedColor="{getStyle('borderColor')}"
                                                 open="borderColorSelect.popupPart.move(5, borderColorSelect.popupPart.y);"/>
                    </s:FormItem>
                    <s:FormItem enabled="{borderVisibleSelect.selected}" 
                                label="Border Thickness:">
                        <s:HSlider id="borderThicknessSelect"
                                   minimum="0" maximum="20" value="1"/>
                    </s:FormItem>
                </data:content>
            </data:ExpandingContainerData>
            
        </containers:expandingContainerContent>
        
        <containers:centerContent>
            
            <!--- example #1 -->
            <data:PrimaryContentData>
                <data:tabLabel>Single HtmlFrame</data:tabLabel>
                <data:exampleDescription>A single HtmlFrame. Use the buttons below to load the desired content.</data:exampleDescription>
                <data:toolbarContent>
                    <s:HGroup>
                        <s:Button label="Load CKEditor" 
                                  click="htmlFrameA.setFrameSourceURL('http://ardisialabs.com/js/ckeditor/index.html')"/>
                        <s:Button label="Load External URL" 
                                  click="htmlFrameA.setFrameSourceURL('http://ardisialabs.com/external-test.php/')"/>
                    </s:HGroup>
                </data:toolbarContent>
                <data:primaryContent>
                    <htmlFrame:HtmlFrame id="htmlFrameA"
                                         visible="false"
                                         top="20" right="20" bottom="20" left="20"
                                         borderColor="{borderColorSelect.selectedColor}"
                                         borderThickness="{borderThicknessSelect.value}"
                                         framePaddingTop="{framePaddingTopSelect.value}"
                                         framePaddingRight="{framePaddingRightSelect.value}"
                                         framePaddingBottom="{framePaddingBottomSelect.value}"
                                         framePaddingLeft="{framePaddingLeftSelect.value}"
                                         borderVisible="{borderVisibleSelect.selected}"/>
                </data:primaryContent>
            </data:PrimaryContentData>
            
            <!--- example #2 -->
            <data:PrimaryContentData>
                <data:tabLabel>Multiple HtmlFrames</data:tabLabel>
                <data:exampleDescription>Support for multiple instances at once, each completely independent of the others.</data:exampleDescription>
                <data:toolbarContent>
                    <s:HGroup>
                        <s:VGroup verticalAlign="middle">
                            <s:Label text="Frame #1 Content"
                                     fontWeight="bold"/>
                            <s:HGroup>
                                <s:Button label="Load External URL" click="htmlFrameB.setFrameSourceURL('http://ardisialabs.com/external-test.php/')"/>
                                <s:Button label="Load CKEditor" click="htmlFrameB.setFrameSourceURL('http://ardisialabs.com/js/ckeditor/index.html')"/>
                            </s:HGroup>
                        </s:VGroup>
                        <separators:VSeparator height="100%"/>
                        <s:VGroup verticalAlign="middle">
                            <s:Label text="Frame #2 Content"
                                     fontWeight="bold"/>
                            <s:HGroup>
                                <s:Button label="Load External URL" click="htmlFrameC.setFrameSourceURL('http://ardisialabs.com/external-test.php/')"/>
                                <s:Button label="Load CKEditor" click="htmlFrameC.setFrameSourceURL('http://ardisialabs.com/js/ckeditor/index.html')"/>
                            </s:HGroup>
                        </s:VGroup>
                    </s:HGroup>
                </data:toolbarContent>
                <data:primaryContent>
                    <s:HGroup top="20" right="20" bottom="20" left="20"
                              verticalAlign="justify"
                              gap="20">
                        <htmlFrame:HtmlFrame id="htmlFrameB"
                                             width="100%" height="100%"
                                             visible="false"
                                             borderColor="{borderColorSelect.selectedColor}"
                                             borderThickness="{borderThicknessSelect.value}"
                                             framePaddingTop="{framePaddingTopSelect.value}"
                                             framePaddingRight="{framePaddingRightSelect.value}"
                                             framePaddingBottom="{framePaddingBottomSelect.value}"
                                             framePaddingLeft="{framePaddingLeftSelect.value}"
                                             borderVisible="{borderVisibleSelect.selected}"/>
                        <htmlFrame:HtmlFrame id="htmlFrameC"
                                             visible="false"
                                             width="100%" height="100%"
                                             borderColor="{borderColorSelect.selectedColor}"
                                             borderThickness="{borderThicknessSelect.value}"
                                             framePaddingTop="{framePaddingTopSelect.value}"
                                             framePaddingRight="{framePaddingRightSelect.value}"
                                             framePaddingBottom="{framePaddingBottomSelect.value}"
                                             framePaddingLeft="{framePaddingLeftSelect.value}"
                                             borderVisible="{borderVisibleSelect.selected}"/>
                    </s:HGroup>
                </data:primaryContent>
            </data:PrimaryContentData>
            
            <!--- example #3 -->
            <data:PrimaryContentData>
                <data:tabLabel>Draggable HtmlFrame</data:tabLabel>
                <data:exampleDescription>HtmlFrame added to a floated Pane as child content. The frame can be moved around via dragging without any additional programming.</data:exampleDescription>
                <data:primaryContent>
                    <pane:Pane id="popup"
                               width="700" height="500"
                               minWidth="400" minHeight="400"
                               boundingMode="boundEntirePane"
                               displayCloseButton="false" displayMinimizedButton="false" displayMaximizedButton="false"
                               title="Draggable HTML Frame"
                               creationComplete="popup.floatPane(DisplayObject(FlexGlobals.topLevelApplication), false, false, false, null, moduleFactory);popup.visible = htmlFrameD.visible = false; popup.move(400, 200);"
                               backgroundColor="#E9E9E9"
                               skinClass.stockholm="components.htmlFrame.stockholm.skins.PaneSkin" 
                               skinClass.london="components.htmlFrame.london.skins.PaneSkin"
                               skinClass.spark="components.htmlFrame.spark.skins.PaneSkin">
                        <s:VGroup width="100%" height="100%" 
                                  horizontalAlign="justify" 
                                  gap="0">
                            <s:HGroup paddingBottom="10" paddingTop="10" paddingLeft="20"
                                      verticalAlign="middle">
                                <s:Button label="Load CKEditor" click="htmlFrameD.setFrameSourceURL('http://ardisialabs.com/js/ckeditor/index.html')"/>
                                <s:Button label="Load External URL" click="htmlFrameD.setFrameSourceURL('http://ardisialabs.com/external-test.php/')"/>
                            </s:HGroup>
                            <s:Line width="100%">
                                <s:stroke>
                                    <s:SolidColorStroke color="#9B9B9B"
                                                        weight="1"
                                                        caps="square"
                                                        pixelHinting="true"/>
                                </s:stroke>
                            </s:Line>
                            <htmlFrame:HtmlFrame id="htmlFrameD"
                                                 visible="false"
                                                 width="100%" height="100%"
                                                 borderVisible="false"
                                                 framePaddingTop="{framePaddingTopSelect.value}"
                                                 framePaddingRight="{framePaddingRightSelect.value}"
                                                 framePaddingBottom="{framePaddingBottomSelect.value}"
                                                 framePaddingLeft="{framePaddingLeftSelect.value}"/>
                        </s:VGroup>
                    </pane:Pane>
                </data:primaryContent>
            </data:PrimaryContentData>
            
            <!--- example #4 -->
            <data:PrimaryContentData>
                <data:tabLabel>Raw HTML</data:tabLabel>
                <data:exampleDescription>Raw HTML can be inserted into the HtmlFrame component, and updated at any time.</data:exampleDescription>
                <data:toolbarContent>
                    <s:VGroup>
                        <s:TextArea id="rawHtml" 
                                    width="400"
                                    text="&lt;p&gt;&lt;span style='color:red;'&gt;Hello&lt;/span&gt;&lt;h1&gt;World&lt;/h1&gt;&lt;/p&gt;"/>
                        <s:Button label="Set Raw HTML"
                                  click="htmlFrameE.setFrameRawHTML(rawHtml.text);"/>
                    </s:VGroup>
                </data:toolbarContent>
                <data:primaryContent>
                    <htmlFrame:HtmlFrame id="htmlFrameE"
                                         top="20" right="20" bottom="20" left="20"
                                         visible="false"
                                         borderColor="{borderColorSelect.selectedColor}"
                                         borderThickness="{borderThicknessSelect.value}"
                                         framePaddingTop="{framePaddingTopSelect.value}"
                                         framePaddingRight="{framePaddingRightSelect.value}"
                                         framePaddingBottom="{framePaddingBottomSelect.value}"
                                         framePaddingLeft="{framePaddingLeftSelect.value}"
                                         creationComplete="htmlFrameE.setFrameRawHTML(rawHtml.text);"
                                         borderVisible="{borderVisibleSelect.selected}"/>
                </data:primaryContent>
            </data:PrimaryContentData>
            
        </containers:centerContent>
        
    </containers:DemoApplicationWrapper>
    
</s:Module>