<?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:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               xmlns:viewStack="ardisia.components.viewStack.*"
               xmlns:scroller="ardisia.components.scroller.*"
               xmlns:pane="ardisia.components.pane.*"
               xmlns:supportClasses="ardisia.supportClasses.*"
               xmlns:textInput="ardisia.components.textInput.*"
               xmlns:progressDisplay="ardisia.components.progressDisplay.*"
               xmlns:browser="ardisia.browser.*"
               applicationComplete="applicationCompleteHandler(event);" currentState="stockholm"
               frameRate="60" pageTitle="Ardisia Labs Component Library Demo"
               preloader="preloaders.BarPreloaderDemo" viewSourceURL="srcview/index.html"
               backgroundColor.london="#878988"
               backgroundColor.spark="#ABABAB"
               backgroundColor.stockholm="#3F9AD8">
    
    <!-- styles -->
    <fx:Style source="css/defaults.css" />
    
    <!-- scripts -->
    <fx:Script>
        <![CDATA[
            import mx.controls.DateField;
            import mx.core.FlexGlobals;
            import mx.core.UIComponent;
            import mx.events.EffectEvent;
            import mx.events.FlexEvent;
            import mx.events.ModuleEvent;
            import mx.events.StyleEvent;
            import mx.graphics.ImageSnapshot;
            import mx.managers.LayoutManager;
            import mx.managers.PopUpManager;
            import mx.managers.ToolTipManager;
            
            import spark.collections.Sort;
            import spark.collections.SortField;
            import spark.components.DataGrid;
            import spark.effects.Move;
            import spark.events.IndexChangeEvent;
            import spark.events.TextOperationEvent;
            import spark.utils.DataItem;
            
            import ardisia.components.progressDisplay.ProgressDisplayIndeterminate;
            import ardisia.managers.cursorManager.CursorManager;
            import ardisia.themes.london.itemRenderers.DefaultGridItemRendererSpark;
            
            import panes.AboutPane;
            
            import skins.WhiteButtonSkin;
            
            //--------------------------------------
            //  setup main application ownership of the following classes
            //--------------------------------------
            
            protected var popup:PopUpManager;
            
            protected var df:DateField;
            
            protected var gridIR:ardisia.themes.london.itemRenderers.DefaultGridItemRendererSpark;
            
            protected var grid:DataGrid;
            
            protected var di:DataItem;
            
            protected var imageSnapshot:ImageSnapshot;
            
            //--------------------------------------
            //  variables
            //--------------------------------------
            
            protected var styleLoader:IEventDispatcher;
            
            protected var la:String;
            
            protected var animateDirection:String;
            
            protected var selectedIndex:int = -1;
            
            //--------------------------------------
            //  methods
            //--------------------------------------
            
            /**
             *     Called by the containers. Is called when the module is actually
             *     ready for display. Is more accurate than listening for the
             *     module's CREATION_COMPLETE event.
             */
            public function creationComplete():void
            {
                // delay to help the loading pane center
                callLater(callCC);
            }
            
            /**
             *     Load a new module.
             */
            public function changeModule(moduleName:String, 
                                         displayLoadingPane:Boolean = true):void
            {
                // display a loading pane; progressDisplay is choppy
                if (displayLoadingPane)
                    loadingPane.floatPane(DisplayObject(FlexGlobals.topLevelApplication), true, true, false, null, moduleFactory);
                
                // set the selectedIndex
                var len:int = componentsCollection.length;
                for (var i:int = 0; i < len; i++)
                {
                    var item:Object = componentsCollection[i];
                    if (item.label == moduleName)
                    {
                        selectedIndex = i;
                        
                        break;
                    }
                }    
                
                // enable back/forward buttons as applicable
                viewDemosSelect.enabled = reloadButton.enabled = true;
                backCmpSelectButton.enabled = selectedIndex > 0;
                forwardCmpSelectButton.enabled = selectedIndex < componentsCollection.length - 1;
                
                // strip any custom cursors
                CursorManager.removeAllCursors();
                
                // update the open selection label
                viewDemosSelect.label = moduleName;
                
                // reenable display of the about pane trigger
                aboutSelect.visible = aboutSelect.includeInLayout = true;
                
                switch (moduleName)
                {
                    
                    case "Accordion":
                        moduleLoader.url = "modules/AccordionModule.swf";
                        
                        break;
                    
                    case "Animated Image":
                        moduleLoader.url = "modules/AnimatedImageModule.swf";
                        
                        break;
                    
                    case "Auto Complete ComboBox":
                        moduleLoader.url = "modules/AutoCompleteModule.swf";
                        
                        break;
                    
                    case "Auto Fitting Text":
                        moduleLoader.url = "modules/AutoFitTextModule.swf";
                        
                        break;
                    
                    case "Bar Code":
                        moduleLoader.url = "modules/BarCodeModule.swf";
                        
                        break;
                    
                    case "Bitmap Adjustments":
                        moduleLoader.url = "modules/BitmapAdjustmentsModule.swf";
                        
                        break;
                    
                    case "Button Bar":
                        moduleLoader.url = "modules/ButtonBarModule.swf";
                        
                        break;
                    
                    case "Calculator":
                        moduleLoader.url = "modules/CalculatorModule.swf";
                        
                        break;
                    
                    case "Calendar":
                        moduleLoader.url = "modules/CalendarModule.swf";
                        
                        break;
                    
                    case "CAPTCHA":
                        moduleLoader.url = "modules/CaptchaModule.swf";
                        
                        break;
                    
                    case "Carousel Layout":
                        moduleLoader.url = "modules/CarouselLayoutModule.swf";
                        
                        break;
                    
                    case "Carousel List":
                        moduleLoader.url = "modules/CarouselListModule.swf";
                        
                        break;    
                    
                    case "Clocks":
                        moduleLoader.url = "modules/ClocksModule.swf";
                        
                        break;
                    
                    case "Colorizer":
                        moduleLoader.url = "modules/ColorizerModule.swf";
                        
                        break;    
                    
                    case "ColorPicker":
                        moduleLoader.url = "modules/ColorPickerModule.swf";
                        
                        break;    
                    
                    case "ColorSpace Picker":
                        moduleLoader.url = "modules/ColorSpacePickerModule.swf";
                        
                        break;
                    
                    case "Compass Container":
                        moduleLoader.url = "modules/CompassContainerModule.swf";
                        
                        break;
                    
                    case "Container Combination":
                        moduleLoader.url = "modules/ContainerCombination.swf";
                        
                        break;
                    
                    case "Coverflow Layout":
                        moduleLoader.url = "modules/CoverflowLayoutModule.swf";
                        
                        break;    
                    
                    case "Coverflow List":
                        moduleLoader.url = "modules/CoverflowListModule.swf";
                        
                        break;    
                    
                    case "Cursor Manager":
                        moduleLoader.url = "modules/CursorManagerModule.swf";
                        
                        break;
                    
                    case "DatePicker":
                        moduleLoader.url = "modules/DatePickerModule.swf";
                        
                        break;    
                    
                    case "Docking Compass Container":
                        moduleLoader.url = "modules/DockingCompassContainerModule.swf";
                        
                        break;
                    
                    case "Donut Chart":
                        moduleLoader.url = "modules/DonutModule.swf";
                        
                        break;
                    
                    case "Expanding Container":
                        moduleLoader.url = "modules/ExpandingContainerModule.swf";
                        
                        break;    
                    
                    case "FieldSet":
                        moduleLoader.url = "modules/FieldSetModule.swf";
                        
                        break;    
                    
                    case "Filters":
                        moduleLoader.url = "modules/FiltersModule.swf";
                        
                        break;    
                    
                    case "Flex ContextMenu":
                        moduleLoader.url = "modules/FlexContextMenuModule.swf";
                        
                        break;    
                    
                    case "FloatPane ControlBar":
                        moduleLoader.url = "modules/FloatPaneControlBarModule.swf";
                        
                        break;    
                    
                    case "Funnel Chart":
                        moduleLoader.url = "modules/FunnelModule.swf";
                        
                        break;    
                    
                    case "Graphics Editor":
                        moduleLoader.url = "modules/GraphicsEditorModule.swf";
                        
                        break;    
                    
                    case "Heatmap Chart":
                        moduleLoader.url = "modules/HeatmapModule.swf";
                        
                        break;    
                    
                    case "HTML DragDrop":
                        // hide the about pane trigger since it will be invisible over the iframes
                        aboutSelect.visible = aboutSelect.includeInLayout = false;
                        moduleLoader.url = "modules/HtmlDragDropModule.swf";
                        
                        break;    
                    
                    case "HTML Frame":
                        // hide the about pane trigger since it will be invisible over the iframes
                        aboutSelect.visible = aboutSelect.includeInLayout = false;
                        moduleLoader.url = "modules/HtmlFrameModule.swf";
                        
                        break;    
                    
                    case "HTML Geolocation":
                        moduleLoader.url = "modules/HtmlGeolocationModule.swf";
                        
                        break;    
                    
                    case "iCalendar Parser":
                        moduleLoader.url = "modules/iCalendarParserModule.swf";
                        
                        break;    
                    
                    case "iCalendar Recurrence":
                        moduleLoader.url = "modules/iCalendarRecurrenceModule.swf";
                        
                        break;    
                    
                    case "Icon Button":
                        moduleLoader.url = "modules/IconButtonModule.swf";
                        
                        break;    
                    
                    case "Linear Gauges":
                        moduleLoader.url = "modules/LinearGaugesModule.swf";
                        
                        break;    
                    
                    case "Magnifier":
                        moduleLoader.url = "modules/MagnifierModule.swf";
                        
                        break;    
                    
                    case "Menu And MenuBar":
                        moduleLoader.url = "modules/MenuAndMenuBarModule.swf";
                        
                        break;    
                    
                    case "Mini Viewport":
                        moduleLoader.url = "modules/MiniViewportModule.swf";
                        
                        break;    
                    
                    case "Packed Layout":
                        moduleLoader.url = "modules/PackedLayoutModule.swf";
                        
                        break;    
                    
                    case "Packed List":
                        moduleLoader.url = "modules/PackedListModule.swf";
                        
                        break;    
                    
                    case "Pane":
                        moduleLoader.url = "modules/PaneModule.swf";
                        
                        break;    
                    
                    case "Pane Navigators":
                        moduleLoader.url = "modules/PaneNavigatorsModule.swf";
                        
                        break;    
                    
                    case "PopUp Button":
                        moduleLoader.url = "modules/PopUpButtonModule.swf";
                        
                        break;
                    
                    case "Progress Display":
                        moduleLoader.url = "modules/ProgressDisplayModule.swf";
                        
                        break;        
                    
                    case "Radar Chart":
                        moduleLoader.url = "modules/RadarModule.swf";
                        
                        break;        
                    
                    case "Radial Gauges":
                        moduleLoader.url = "modules/RadialGaugesModule.swf";
                        
                        break;        
                    
                    case "Rating":
                        moduleLoader.url = "modules/RatingModule.swf";
                        
                        break;        
                    
                    case "ReflectionContainer":
                        moduleLoader.url = "modules/ReflectionContainerModule.swf";
                        
                        break;
                    
                    case "RichText Editor":
                        moduleLoader.url = "modules/RichTextEditorModule.swf";
                        
                        break;        
                    
                    case "Rotary Field":
                        moduleLoader.url = "modules/RotaryFieldModule.swf";
                        
                        break;        
                    
                    case "Safari Mouse Wheel Fix":
                        moduleLoader.url = "modules/SafariMouseWheelFixModule.swf";
                        
                        break;
                    
                    case "Scroller":
                        moduleLoader.url = "modules/ScrollerModule.swf";
                        
                        break;
                    
                    case "Separators":
                        moduleLoader.url = "modules/SeparatorsModule.swf";
                        
                        break;        
                    
                    case "Slider Field":
                        moduleLoader.url = "modules/SliderFieldModule.swf";
                        
                        break;        
                    
                    case "Sparklines":
                        moduleLoader.url = "modules/SparklinesModule.swf";
                        
                        break;        
                    
                    case "TextInput":
                        moduleLoader.url = "modules/TextInputModule.swf";
                        
                        break;
                    
                    case "Themes":
                        moduleLoader.url = "modules/ThemesModule.swf";
                        
                        break;        
                    
                    case "Timebar Container":
                        moduleLoader.url = "modules/TimebarContainerModule.swf";
                        
                        break;        
                    
                    case "Timeline":
                        moduleLoader.url = "modules/TimelineModule.swf";
                        
                        break;        
                    
                    case "TimeMachine Layout":
                        moduleLoader.url = "modules/TimeMachineLayoutModule.swf";
                        
                        break;        
                    
                    case "TimeMachine List":
                        moduleLoader.url = "modules/TimeMachineListModule.swf";
                        
                        break;
                    
                    case "TimePicker":
                        moduleLoader.url = "modules/TimePickerModule.swf";
                        
                        break;
                    
                    case "ToggleSwitch Desktop":
                        moduleLoader.url = "modules/ToggleSwitchDesktopModule.swf";
                        
                        break;
                    
                    case "Toolbar":
                        moduleLoader.url = "modules/ToolbarModule.swf";
                        
                        break;
                    
                    case "Transform Container":
                        moduleLoader.url = "modules/TransformContainerModule.swf";
                        
                        break;
                    
                    case "TreeMap Chart":
                        moduleLoader.url = "modules/TreeMapModule.swf";
                        
                        break;
                    
                    case "ViewStack":
                        moduleLoader.url = "modules/ViewStackModule.swf";
                        
                        break;
                    
                    case "WheelList":
                        moduleLoader.url = "modules/WheelListModule.swf";
                        
                        break;
                    
                    case "Timeline":
                        moduleLoader.url = "modules/TimelineModule.swf";
                        
                        break;
                    
                }
                
                // change viewstack to the ModuleLoader
                viewstack.selectedIndex = 0;
            }
            
            /**
             *     Setup the animation.
             */
            public function setupAnimation(direction:String):void
            {
                animateDirection = direction;
                
                // display bitmap of current view
                var bmd:BitmapData = new BitmapData(viewstack.width, viewstack.height, true, 0);
                bmd.drawWithQuality(viewstack, null, null, null, null, false, StageQuality.BEST);
                
                oldImage.visible = true;
                oldImage.bitmapData = bmd;
                oldImage.width = viewstack.width; 
                oldImage.height = viewstack.height;
                oldImage.x = 0; oldImage.y = 40;
                oldImage.validateNow();
                
                viewstack.visible = false;
            }
            
            /**
             *     Called when a module should change.
             */
            protected function callCC():void
            {
                loadingPane.closeFloatedPane();
                
                // not all modules have the creationComplete method
                if (moduleLoader && moduleLoader.child && UIComponent(moduleLoader.child).hasOwnProperty("creationComplete"))
                    Object(moduleLoader.child).creationComplete();
                
                // sync layout
                LayoutManager.getInstance().validateNow();
                
                // delay in case some text is being updated in the next frame
                callLater(startAnimation);
            }
            
            /**
             *     Open the selection screen.
             */
            protected function openSelectionScreen(skipAnimation:Boolean = false):void
            {
                // abort if animating
                if (moveEffect.isPlaying || parallelEffectA.isPlaying)
                    return;
                
                viewDemosSelect.enabled = reloadButton.enabled = backCmpSelectButton.enabled = forwardCmpSelectButton.enabled = false;
                
                if (!skipAnimation)
                    setupAnimation("zoom");
                
                viewDemosSelect.label = 'Component Demos';
                
                // move focus before unload to help prevent memory leaking
                filterInput.setFocus();
                moduleLoader.url = null;
                
                // reset selection on all the lists
                viewstack.selectedIndex = 1;
                selectedIndex = allCmpList.selectedIndex = featuredCmpSelect.selectedIndex = newCmpSelect.selectedIndex = -1;
                
                viewstack.validateNow();
                
                CursorManager.removeAllCursors();
                
                // display about pane trigger
                aboutSelect.visible = aboutSelect.includeInLayout = true;
                
                if (!skipAnimation)
                    callLater(startAnimation);
                
                if (skipAnimation)
                    viewstack.visible = true;
            }
            
            /**
             *     Play the transition animation.
             */
            protected function startAnimation():void
            {
                switch (animateDirection)
                {
                    
                    case "left":
                    case "right":
                        // tack on the new view to the image and then animate it; oldImage was already created
                        var bmd:BitmapData = new BitmapData(viewstack.width * 2, viewstack.height, true, 0);
                        bmd.copyPixels(oldImage.bitmapData, oldImage.bitmapData.rect, animateDirection == "right" ? new Point(0, 0) : new Point(viewstack.width, 0));
                        var newBmd:BitmapData = new BitmapData(viewstack.width, viewstack.height, true, 0);
                        newBmd.drawWithQuality(viewstack, null, null, null, null, false, StageQuality.BEST);
                        bmd.copyPixels(newBmd, newBmd.rect, animateDirection == "right" ? new Point(viewstack.width, 0) : new Point(0, 0));
                        
                        oldImage.bitmapData = bmd;
                        oldImage.width = viewstack.width * 2;
                        oldImage.height = viewstack.height;
                        oldImage.x = animateDirection == "right" ? 0 : -viewstack.width;
                        oldImage.y = 40;
                        oldImage.validateNow();
                        
                        moveEffect.xFrom = animateDirection == "right" ? 0 : -viewstack.width; 
                        moveEffect.xTo = animateDirection == "right" ? -viewstack.width : 0;
                        
                        moveEffect.play();
                        
                        break;
                    
                    case "zoom":
                        bmd = new BitmapData(viewstack.width, viewstack.height, true, 0);
                        bmd.drawWithQuality(viewstack, null, null, null, null, false, StageQuality.BEST);
                        
                        newImage.visible = false;
                        newImage.bitmapData = bmd;
                        newImage.width = viewstack.width; 
                        newImage.height = viewstack.height;
                        newImage.validateNow();
                        newImage.x = 0; newImage.y = 40;
                        
                        parallelEffectA.play();
                        parallelEffectB.play();
                        
                        break;
                    
                }
            }
            
            //--------------------------------------
            //  event handlers
            //--------------------------------------
            
            protected function applicationCompleteHandler(event:Event):void
            {
                // recent version of chrome has a bug where the mouse wheel
                // doesn't work until the app is reloaded or the window is
                // resized; this hack fixes the problem by adding an empty
                // javascript wheel handler
                
                // UPDATE : appears to be fixed; retain code in case it comes
                // back
                /*
                if (ExternalInterface.available)
                {
                    var GET_USER_AGENT:String = "function() { " +
                        "var userAgent = window.navigator.userAgent.toLowerCase(); " +
                        "return userAgent; " +
                        "} ";
                    var userAgent:String = ExternalInterface.call(GET_USER_AGENT);
                    if (userAgent.toLowerCase().indexOf("chrome") > -1)
                    {
                        var CHROME_MOUSE_WHEEL_FIX_JS:String = "function() { " +
                            "window.onmousewheel = function(e) {} " +  
                            "} ";
                        ExternalInterface.call(CHROME_MOUSE_WHEEL_FIX_JS);
                    }
                }
                */
                
                ToolTipManager.showDelay = 0;
                ToolTipManager.hideDelay = Number.POSITIVE_INFINITY;
                
                // default to the stockholm theme
                styleLoader = styleManager.loadStyleDeclarations("themes/stockholm.swf", true, false, ApplicationDomain.currentDomain);
                styleLoader.addEventListener(StyleEvent.COMPLETE, initialStyleLoadHandler);
                styleLoader.addEventListener(StyleEvent.ERROR, initialStyleLoadHandler);
                
                // only display the display if the loading process takes longer than 400 milliseconds
                progressDisplay.label = "Loading Theme...";
                progressDisplay.delayBeforeFloat = 400;
                progressDisplay.show(this, true, moduleFactory);
                
                // test european locale
                // setStyle("locale", "de-DE");
                
                // float the animation images
                PopUpManager.addPopUp(oldImage, this);
                PopUpManager.addPopUp(newImage, this);
                
                // assemble the data for the lists
                var len:int = componentsCollection.length;
                
                // new
                var dp:ArrayCollection = new ArrayCollection();
                for (var i:int = 0; i < len; i++)
                {
                    if (componentsCollection[i].newCmp)
                        dp.addItem(componentsCollection[i])
                }
                // sort
                var sort:Sort = new Sort();
                sort.fields = [new SortField("newOrder", false)];
                dp.sort = sort;
                dp.refresh();
                newCmpSelect.dataProvider = dp;
                
                // featured
                dp = new ArrayCollection();
                for (i = 0; i < len; i++)
                {
                    if (componentsCollection[i].featured)
                        dp.addItem(componentsCollection[i])
                }
                sort = new Sort();
                sort.fields = [new SortField("featuredOrder", false)];
                dp.sort = sort;
                dp.refresh();
                featuredCmpSelect.dataProvider = dp;
                
                // all components
                dp = new ArrayCollection();
                for each (var cat:Object in categories)
                {
                    dp.addItem(cat)
                    for (i = 0; i < len; i++)
                    {
                        if (componentsCollection[i].category == cat.category)
                            dp.addItem(componentsCollection[i]);
                    }
                }
                allCmpList.dataProvider = dp;
            }
            
            /**
             *     Handles loading new themes.
             */
            protected function themeSelectHandler(event:IndexChangeEvent):void
            {
                var oldIndex:int = event.oldIndex;
                var newIndex:int = event.newIndex;
                
                viewstack.visible = false;
                
                // unload theme; unload styles AFTER unloading the module for
                // proper operation
                moduleLoader.url = null;
                
                if (oldIndex == 0)
                    styleManager.unloadStyleDeclarations("themes/stockholm.swf", true);
                if (oldIndex == 1)
                    styleManager.unloadStyleDeclarations("themes/london.swf", true);
                
                switch (themeSelect.selectedIndex)
                {
                    
                    // stockholm
                    case 0:
                        styleLoader = styleManager.loadStyleDeclarations("themes/stockholm.swf", true, false, ApplicationDomain.currentDomain);
                        styleLoader.addEventListener(StyleEvent.COMPLETE, styleLoaderHandler);
                        styleLoader.addEventListener(StyleEvent.ERROR, styleLoaderHandler);
                        
                        break;
                    
                    // london
                    case 1:
                        styleLoader = styleManager.loadStyleDeclarations("themes/london.swf", true, false, ApplicationDomain.currentDomain);
                        styleLoader.addEventListener(StyleEvent.COMPLETE, styleLoaderHandler);
                        styleLoader.addEventListener(StyleEvent.ERROR, styleLoaderHandler);
                        
                        break;
                    
                    // spark
                    case 2:
                        setCurrentState("spark");
                        
                        // reload
                        if (selectedIndex > -1)
                        {
                            setupAnimation('zoom');
                            changeModule(componentsCollection[selectedIndex].label, false);
                        }
                        else
                        {
                            openSelectionScreen(true);
                        }
                        
                        // skip loader
                        return;
                        
                        break;
                    
                }
                
                progressDisplay.label = "Loading Theme...";
                progressDisplay.delayBeforeFloat = 400;
                progressDisplay.show(this, true, moduleFactory);
            }
            
            /**
             *     Handles the initial theme load event.
             */
            protected function initialStyleLoadHandler(event:StyleEvent):void
            {
                styleLoader.removeEventListener(StyleEvent.COMPLETE, initialStyleLoadHandler);
                styleLoader.removeEventListener(StyleEvent.ERROR, initialStyleLoadHandler);
                
                progressDisplay.close();
                viewstack.visible = true;
            }
            
            /**
             *     Handles events for loading new themes.
             */
            protected function styleLoaderHandler(event:StyleEvent):void
            {
                switch (event.type)
                {
                    
                    case StyleEvent.COMPLETE:
                    case StyleEvent.ERROR:
                        styleLoader.removeEventListener(StyleEvent.COMPLETE, styleLoaderHandler);
                        styleLoader.removeEventListener(StyleEvent.ERROR, styleLoaderHandler);
                        
                        // close progress display
                        callLater(progressDisplay.close);
                        
                        // update the state
                        setCurrentState(themeSelect.selectedIndex == 0 ? "stockholm" : "london");
                        
                        // reload
                        if (selectedIndex > -1)
                        {
                            setupAnimation('zoom');
                            changeModule(componentsCollection[selectedIndex].label, false);
                        }
                        else
                        {
                            openSelectionScreen(true);
                        }
                        
                        break;
                    
                }
                
            }
            
            /**
             *     Handles events for newly loaded modules.
             */
            protected function moduleHandler(event:Event):void
            {
                
                switch (event.type)
                {
                    
                    case ModuleEvent.READY:
                        CursorManager.removeAllCursors();
                        
                        if (moduleLoader && moduleLoader.child)
                            UIComponent(moduleLoader.child).setCurrentState(currentState);
                        
                        break;
                    
                }
            }
            
            /**
             *     Handles events the changing components buttons.
             */
            protected function changeComponentHandler(event:Event):void
            {
                // abort if animating
                if (moveEffect.isPlaying || parallelEffectA.isPlaying)
                    return;
                
                switch (event.currentTarget)
                {
                    
                    case backCmpSelectButton:
                        if (selectedIndex < 1)
                            return;
                        
                        selectedIndex--;
                        setupAnimation("left");
                        
                        break;
                    
                    case forwardCmpSelectButton:
                        if (selectedIndex > componentsCollection.length - 1)
                            return;
                        
                        selectedIndex++;
                        setupAnimation("right");
                        
                        break;
                    
                }
                
                changeModule(componentsCollection[selectedIndex].label);
            }
            
            /**
             *     Handles events for effects.
             */
            protected function effectHandler(event:EffectEvent):void
            {
                oldImage.postLayoutTransformOffsets = newImage.postLayoutTransformOffsets = null;
                oldImage.alpha = newImage.alpha = 1;
                
                oldImage.visible = newImage.visible = false;
                if (oldImage.bitmapData)
                    oldImage.bitmapData.dispose();
                if (newImage.bitmapData)
                    newImage.bitmapData.dispose();
                
                viewstack.visible = true;
                
                animateDirection = "";
                
                // call animatedIn on the module if the method exists
                if (Object(moduleLoader.child).hasOwnProperty("animatedIn"))
                    Object(moduleLoader.child).animatedIn();
                
            }
            
            //----------------------------------
            //  filter events
            //----------------------------------
            
            /**
             *     Handles filter events.
             */
            protected function filterCmps(event:TextOperationEvent):void
            {
                function filterFn(item:Object):Boolean
                {
                    if (item.label && String(item.label).toLowerCase().indexOf(needle.toLowerCase()) > -1)
                        return true;
                    
                    return false;
                }
                
                var dp:ArrayCollection = allCmpList.dataProvider as ArrayCollection;
                var needle:String = filterInput.text;
                
                if (!needle || needle.length < 1)
                {
                    dp.filterFunction = null;
                }
                else
                {
                    dp.filterFunction = filterFn;
                }
                
                dp.refresh();
            }
            
            /**
             *     Handles keys for filtering.
             */
            protected function filterInput_keyDownHandler(event:KeyboardEvent):void
            {
                // load the first filtered module on the ENTER key
                if (event.keyCode == Keyboard.ENTER && 
                    allCmpList.dataProvider.length > 0 && 
                    !allCmpList.dataProvider[0].header)
                {
                    setupAnimation('zoom');
                    changeModule(allCmpList.dataProvider[0].label);
                }
            }
            
        ]]>
    </fx:Script>
    
    <!-- declarations -->
    <fx:Declarations>
        
        <!-- fix Safari mouse wheel issue -->
        <browser:SafariMouseWheelFix />
        
        <fx:Array id="categories">
            <fx:Object header="true" category="Charts" icon="@Embed(source='icons/open-iconic-master/graph-2x.png')" />
            <fx:Object header="true" category="Containers" icon="@Embed(source='icons/open-iconic-master/vertical-align-center-2x.png')" />
            <fx:Object header="true" category="Scheduling" icon="@Embed(source='icons/open-iconic-master/calendar-2x.png')" />
            <fx:Object header="true" category="Chronology Visualization" icon="@Embed(source='icons/open-iconic-master/project-2x.png')" />
            <fx:Object header="true" category="Graphics" icon="@Embed(source='icons/open-iconic-master/brush-2x.png')" />
            <fx:Object header="true" category="HTML" icon="@Embed(source='icons/open-iconic-master/globe-2x.png')" />
            <fx:Object header="true" category="Indicators" icon="@Embed(source='icons/open-iconic-master/dashboard-2x.png')" />
            <fx:Object header="true" category="Buttons" icon="@Embed(source='icons/open-iconic-master/play-circle-2x.png')" />
            <fx:Object header="true" category="Text" icon="@Embed(source='icons/open-iconic-master/copywriting-2x.png')" />
            <fx:Object header="true" category="Layouts, Lists" icon="@Embed(source='icons/open-iconic-master/list-2x.png')" />
            <fx:Object header="true" category="Managers, Miscellaneous" icon="@Embed(source='icons/open-iconic-master/puzzle-piece-2x.png')" />
            <fx:Object header="true" category="UI Controls" icon="@Embed(source='icons/open-iconic-master/check-2x.png')" />
        </fx:Array>
        
        <s:ArrayCollection id="componentsCollection">
            
            <fx:Object label="Donut Chart" category="Charts" newCmp="true" newOrder="2" description="Displays data series in rings. Includes support for multiple rings." icon="@Embed(source='icons/open-iconic-master/pie-chart-4x.png')" />
            <fx:Object label="Radar Chart" featured="true" featuredOrder="2" category="Charts" description="Also known as a polar, spider, or kiviat chart." icon="@Embed(source='icons/open-iconic-master/bar-chart-4x.png')"/>
            <fx:Object label="TreeMap Chart" featured="true" featuredOrder="12" category="Charts" description="Displays hierarchical data." icon="@Embed(source='icons/open-iconic-master/fork-4x.png')" />
            <fx:Object label="Funnel Chart" category="Charts" />
            <fx:Object label="Sparklines" category="Charts"/>
            <fx:Object label="Heatmap Chart" category="Charts"/>
            
            <fx:Object label="Compass Container" category="Containers" featured="true" featuredOrder="8" description="Creates a container with North, South, East, West, and center regions." icon="@Embed(source='icons/open-iconic-master/vertical-align-center-4x.png')"/>
            <fx:Object label="Docking Compass Container" category="Containers"/>
            <fx:Object label="Pane" category="Containers"/>
            <fx:Object label="Pane Navigators" category="Containers"/>
            <fx:Object label="FloatPane ControlBar" category="Containers"/>
            <fx:Object label="Container Combination" featured="true" featuredOrder="6" category="Containers" description="Rollup example of several Ardisia container components." icon="@Embed(source='icons/open-iconic-master/vertical-align-bottom-4x.png')"/>
            <fx:Object label="Expanding Container" category="Containers"/>
            <fx:Object label="ViewStack" category="Containers"/>
            <fx:Object label="Accordion" category="Containers"/>
            <fx:Object label="FieldSet" category="Containers"/>
            <fx:Object label="Toolbar" category="Containers"/>
            <fx:Object label="Transform Container" featured="true" featuredOrder="4" category="Containers" description="Enables dragging and transformations of child content." icon="@Embed(source='icons/open-iconic-master/layers-4x.png')"/>
            
            <fx:Object label="Calendar" featured="true" featuredOrder="1" category="Scheduling" description="Full featured Calendar. Supports repeating events." icon="@Embed(source='icons/open-iconic-master/calendar-4x.png')"/>
            <fx:Object label="DatePicker" category="Scheduling"/>
            <fx:Object label="iCalendar Parser" category="Scheduling"/>
            <fx:Object label="iCalendar Recurrence" category="Scheduling"/>
            
            <fx:Object label="Timebar Container" category="Chronology Visualization"/>
            <fx:Object label="Timeline" category="Chronology Visualization" featured="true" featuredOrder="11" description="Display events along a timebar." icon="@Embed(source='icons/open-iconic-master/project-4x.png')"/>
            
            <fx:Object label="Graphics Editor" newCmp="true" newOrder="1" category="Graphics" description="Manipulate bitmap, vector, and text. Code is in an alpha state." icon="@Embed(source='icons/open-iconic-master/image-4x.png')"/>
            <fx:Object label="Bitmap Adjustments" category="Graphics"/>
            <fx:Object label="Filters" category="Graphics"/>
            <fx:Object label="Animated Image" category="Graphics"/>
            <fx:Object label="ReflectionContainer" category="Graphics"/>
            <fx:Object label="Magnifier" category="Graphics"/>
            <fx:Object label="Colorizer" category="Graphics"/>
            
            <fx:Object label="HTML DragDrop" category="HTML"/>
            <fx:Object label="HTML Frame" featured="true" featuredOrder="3" category="HTML" description="Display html content inside a Flex application." icon="@Embed(source='icons/open-iconic-master/browser-4x.png')"/>
            <fx:Object label="HTML Geolocation" category="HTML"/>
            <fx:Object label="Safari Mouse Wheel Fix" category="HTML" newCmp="true" newOrder="3" description="Adds mouse wheel support to applications running within the Safari Web Browser." icon="@Embed(source='icons/open-iconic-master/bug-4x.png')"/>
            
            <fx:Object label="Progress Display" category="Indicators"/>
            <fx:Object label="Clocks" category="Indicators"/>
            
            <fx:Object label="Button Bar" category="Buttons"/>
            <fx:Object label="Icon Button" category="Buttons"/>
            <fx:Object label="PopUp Button" category="Buttons"/>
            <fx:Object label="ToggleSwitch Desktop" category="Buttons"/>
            
            <fx:Object label="RichText Editor" featured="true" featuredOrder="7" category="Text" description="Toolbar that manages Text Layout Framework based controls." icon="@Embed(source='icons/open-iconic-master/pencil-4x.png')"/>
            <fx:Object label="Auto Fitting Text" category="Text"/>
            
            <fx:Object label="Carousel Layout" category="Layouts, Lists"/>
            <fx:Object label="Carousel List" category="Layouts, Lists" />
            <fx:Object label="Coverflow Layout" category="Layouts, Lists"/>
            <fx:Object label="Coverflow List" category="Layouts, Lists" featured="true" featuredOrder="10" description="List optimized for use with the CoverflowLayout class." icon="@Embed(source='icons/open-iconic-master/random-4x.png')"/>
            <fx:Object label="TimeMachine Layout" category="Layouts, Lists"/>
            <fx:Object label="TimeMachine List" category="Layouts, Lists"/>
            <fx:Object label="Packed Layout" category="Layouts, Lists"/>
            <fx:Object label="Packed List" category="Layouts, Lists"/>
            <fx:Object label="WheelList" category="Layouts, Lists"/>
            
            <fx:Object label="Cursor Manager" category="Managers, Miscellaneous" featured="true" featuredOrder="9" description="Empowers developers to add, remove, and manage mouse cursors." icon="@Embed(source='icons/open-iconic-master/location-4x.png')"/>
            <fx:Object label="Scroller" category="Managers, Miscellaneous"/>
            <fx:Object label="Bar Code" category="Managers, Miscellaneous"/>
            <fx:Object label="Mini Viewport" category="Managers, Miscellaneous"/>
            <fx:Object label="Separators" category="Managers, Miscellaneous"/>
            <fx:Object label="Themes" category="Managers, Miscellaneous" featured="true" featuredOrder="5" description="Sample the included themes." icon="@Embed(source='icons/open-iconic-master/monitor-4x.png')"/>
            
            <fx:Object label="ColorPicker" category="UI Controls"/>
            <fx:Object label="ColorSpace Picker" category="UI Controls"/>
            <fx:Object label="Auto Complete ComboBox" category="UI Controls"/>
            <fx:Object label="Calculator" category="UI Controls"/>
            <fx:Object label="Rating" category="UI Controls"/>
            <fx:Object label="Flex ContextMenu" category="UI Controls"/>
            <fx:Object label="Linear Gauges" category="UI Controls"/>
            <fx:Object label="Radial Gauges" category="UI Controls"/>
            <fx:Object label="Rotary Field" category="UI Controls"/>
            <fx:Object label="Slider Field" category="UI Controls"/>
            <fx:Object label="TimePicker" category="UI Controls"/>
            <fx:Object label="Menu And MenuBar" category="UI Controls"/>
            <fx:Object label="CAPTCHA" category="UI Controls"/>
            <fx:Object label="TextInput" category="UI Controls"/>
            
        </s:ArrayCollection>
        
        <!--- progress indicator -->
        <progressDisplay:ProgressDisplayIndeterminate id="progressDisplay" />
        
        <!--- loading pane -->
        <!--- progress display is choppy -->
        <pane:Pane id="loadingPane" 
                   width="300" height="120"
                   displayCloseButton="false"
                   title="Wait">
            
            <s:Label text="Loading..."
                     horizontalCenter="0" verticalCenter="0"
                     fontWeight="bold"/>
        </pane:Pane>
        
        <!--- images used for slide animations -->
        <supportClasses:BitmapImageLite id="oldImage"
                                        visible="false"/>
        
        <supportClasses:BitmapImageLite id="newImage"
                                        visible="false"/>
        
        <s:Move id="moveEffect"
                applyChangesPostLayout="true"
                duration="600"
                easer="{moveEaser}"
                target="{oldImage}"
                effectEnd="effectHandler(event)"/>
        
        <s:Power id="moveEaser"
                 easeInFraction="0.5"
                 exponent="5"/>
        
        <s:Parallel id="parallelEffectA"
                    target="{oldImage}"
                    duration="600">
            <s:Move3D id="scaleEffectA"
                      applyChangesPostLayout="true"
                      easer="{scaleEaser}"
                      zFrom="1" zTo="5000"/>
            <s:Fade id="fadeEffectA" 
                    easer="{scaleEaser}"
                    alphaFrom="1" alphaTo="0"/>
        </s:Parallel>
        
        <s:Parallel id="parallelEffectB"
                    target="{newImage}"
                    duration="600"
                    effectEnd="effectHandler(event);">
            <s:Move3D id="scaleEffectB"
                      applyChangesPostLayout="true"
                      zFrom="-5000" zTo="1"
                      easer="{scaleEaser}"/>
            <s:Fade id="fadeEffectB" 
                    easer="{scaleEaser}"
                    alphaFrom="0" alphaTo="1"/>
        </s:Parallel>
        
        <s:Power id="scaleEaser"
                 easeInFraction="0.1"
                 exponent="4"/>
        
    </fx:Declarations>
    
    <!-- states -->
    <s:states>
        <s:State name="stockholm" />
        <s:State name="london" />
        <s:State name="spark" />
    </s:states>
    
    <!--- logo -->
    <s:HGroup top="8" left="10"
              width="119" height="25"
              baselineShift="-1"
              gap="0"
              buttonMode="true"
              verticalAlign="justify"
              click="openSelectionScreen();">
        <s:Group>
            <s:Rect top="0" right="0" bottom="0" left="0">
                <s:fill>
                    <s:SolidColor color="#3F9AD8" />
                </s:fill>
            </s:Rect>
            <s:Label text="ARDISIA"
                     fontSize="21"
                     color="#FFFFFF"
                     paddingTop="3" paddingLeft="4" paddingRight="3"
                     trackingLeft="0" trackingRight="0" />
        </s:Group>
        <s:Group>
            <s:Rect top="0" right="0" bottom="0" left="0">
                <s:fill>
                    <s:SolidColor color="#000000" />
                </s:fill>
            </s:Rect>
            <s:Label text="LABS"
                     fontSize="21"
                     color="#FFFFFF"
                     paddingTop="3" paddingLeft="3" paddingRight="3" 
                     trackingLeft="0" trackingRight="0" />
        </s:Group>
    </s:HGroup>
    
    <!--- component selection buttons -->
    <s:HGroup top="8" left="170"
              verticalAlign="middle"
              gap="6">
        
        <s:Button id="backCmpSelectButton"
                  enabled="false"
                  toolTip="Previous"
                  skinClass="skins.LeftWhiteArrow"
                  click="changeComponentHandler(event);" />
        
        <s:Button id="viewDemosSelect" 
                  enabled="false"
                  width="200"
                  baselineShift="-1"
                  styleName="toolbarButton" 
                  label="Component Demos"
                  icon="@Embed(source='icons/open-iconic-master/grid-four-up-2x.png')"
                  skinClass="skins.BlackButtonSkin"
                  click="openSelectionScreen();" />
        
        <s:Button id="forwardCmpSelectButton"
                  enabled="false"
                  toolTip="Next"
                  skinClass="skins.RightWhiteArrow" 
                  click="changeComponentHandler(event);" />
        
    </s:HGroup>
    
    <!--- top buttons -->
    <s:HGroup id="headerButtonWrapper" 
              top="8" right="5"
              verticalAlign="middle"
              gap="10">
        
        <s:Button id="reloadButton"
                  enabled="false"
                  toolTip="Reload Demo"
                  skinClass="skins.ReloadButtonSkin" 
                  click="moduleLoader.url=null;setupAnimation('zoom');changeModule(componentsCollection[selectedIndex].label, false);" />
        
        <s:Button id="viewSource" 
                  label="View Source"
                  toolTip="View Source"
                  skinClass="skins.WhiteButtonSkin"
                  click="navigateToURL(new URLRequest('srcview/index.html'), '_blank');"/>
        
        <s:Button id="aboutSelect" 
                  label="About"
                  baselineShift="-1"
                  click="new AboutPane().floatPane(DisplayObject(FlexGlobals.topLevelApplication), true, true, true, null, moduleFactory);"
                  skinClass="skins.WhiteButtonSkin"/>
        
        <s:DropDownList id="themeSelect"
                        width="150"
                        baselineShift="-1"
                        requireSelection="true"
                        selectedIndex="0"
                        labelField="label"
                        change="themeSelectHandler(event);"
                        skinClass="skins.WhiteDropDownListSkin">
            <s:ArrayCollection>
                <fx:Object label="Stockholm Theme" />
                <fx:Object label="London Theme" />
                <fx:Object label="Spark Theme" />
            </s:ArrayCollection>
        </s:DropDownList>
        
    </s:HGroup>
    
    <viewStack:ViewStack id="viewstack"
                         visible="false"
                         top="40" right="0" bottom="0" left="0"
                         creationPolicy="all"
                         backgroundAlpha="0"
                         selectedIndex="1">
        
        <!--- modules -->
        <s:ModuleLoader id="moduleLoader" 
                        top="0" right="0" bottom="0" left="0"
                        ready="moduleHandler(event)"/>
        
        <!--- selection screen -->
        <s:SkinnableContainer>
            
            <s:HGroup top="40" right="40" bottom="40" left="40"
                      verticalAlign="justify"
                      gap="0">
                
                <!--- new components -->
                <s:Group width="320" height="100%">
                    
                    <s:Rect top="0" right="0" bottom="0" left="0">
                        <s:fill>
                            <s:SolidColor color="#F2F2F2"/>
                        </s:fill>
                    </s:Rect>
                    
                    <s:VGroup top="35" right="0" bottom="0" left="0"
                              horizontalAlign="justify"
                              gap="20">
                        
                        <s:Label text="New"
                                 fontSize="26"
                                 paddingLeft="33"/>
                        
                        <s:List id="newCmpSelect"
                                height="100%"
                                focusEnabled="false"
                                borderVisible="false"
                                contentBackgroundAlpha="0"
                                change="setupAnimation('zoom');changeModule(newCmpSelect.selectedItem.label);">
                            
                            <s:layout>
                                <s:VerticalLayout horizontalAlign="justify" 
                                                  gap="6"
                                                  paddingLeft="20" paddingBottom="45" paddingRight="20"/>
                            </s:layout>
                            
                            <s:itemRenderer>
                                <fx:Component>
                                    <s:ItemRenderer autoDrawBackground="false"
                                                    height="95">
                                        
                                        <s:states>
                                            <s:State name="normal" />
                                            <s:State name="hovered" stateGroups="hoveredGroup"/>
                                            <s:State name="selectedAndHovered" stateGroups="selectedGroup, hoveredGroup"/>
                                            <s:State name="selected" stateGroups="selectedGroup"/>
                                        </s:states>
                                        
                                        <s:Rect top="0" right="0" bottom="0" left="0">
                                            <s:fill>
                                                <s:SolidColor alpha="0" alpha.hoveredGroup="1" 
                                                              color="{outerDocument.getStyle('rollOverColor')}"/>
                                            </s:fill>
                                        </s:Rect>
                                        
                                        <s:BitmapImage top="15" left="20"
                                                       source="{data.icon}" />
                                        
                                        <s:VGroup top="15" left="65" right="10" bottom="10"
                                                  horizontalAlign="justify">
                                            <s:Label id="labelDisplay"
                                                     width="100%"
                                                     color="#000000"
                                                     maxDisplayedLines="1"
                                                     fontSize="18"
                                                     text="{data.label}"/>
                                            <s:Label id="description"
                                                     width="100%"
                                                     lineHeight="140%"
                                                     lineBreak="toFit"
                                                     color="#000000"
                                                     fontSize="12"
                                                     text="{data.description}"/>
                                        </s:VGroup>
                                        
                                    </s:ItemRenderer>
                                </fx:Component>
                            </s:itemRenderer>
                        </s:List>
                        
                    </s:VGroup>
                    
                </s:Group>
                
                <!--- all components -->
                <s:Group width="320" height="100%">
                    
                    <s:Rect top="0" right="0" bottom="0" left="0">
                        <s:fill>
                            <s:SolidColor color="#FFFFFF"/>
                        </s:fill>
                    </s:Rect>
                    
                    <s:VGroup top="35" right="0" bottom="0" left="0"
                              horizontalAlign="justify"
                              gap="15">
                        
                        <s:Label text="All Components"
                                 fontSize="26"
                                 paddingLeft="28"/>
                        
                        <s:Group>
                            <textInput:TextInput id="filterInput" 
                                                 left="28" right="20"
                                                 prompt="Filter..."
                                                 change="filterCmps(event)"
                                                 keyDown="filterInput_keyDownHandler(event)"/>
                        </s:Group>
                        
                        <s:List id="allCmpList"
                                focusEnabled="false"
                                height="100%"
                                borderVisible="false"
                                changing="if(allCmpList.dataProvider[event.newIndex].header){event.preventDefault();}"
                                change="FlexGlobals.topLevelApplication.setupAnimation('zoom');FlexGlobals.topLevelApplication.changeModule(allCmpList.selectedItem.label);">
                            
                            <s:layout>
                                <s:VerticalLayout gap="0" 
                                                  horizontalAlign="justify"
                                                  paddingBottom="45"/>
                            </s:layout>
                            
                            <s:itemRenderer>
                                <fx:Component>
                                    <s:ItemRenderer autoDrawBackground="false">
                                        
                                        <fx:Script>
                                            <![CDATA[
                                                
                                                override public function set data(value:Object):void
                                                {
                                                    super.data = value;
                                                    
                                                    img.source = value.header && value.icon ? value.icon : null;
                                                    labelDisplay.text = value.label ? String(value.label) : String(value.category);
                                                    
                                                    labelDisplay.setStyle("fontWeight", value.header ? "bold" : "normal");
                                                    wrapper.left = value.header ? 13 : 29;
                                                    
                                                    background.visible = !value.header;
                                                }
                                                
                                            ]]>
                                        </fx:Script>
                                        
                                        <s:states>
                                            <s:State name="normal" />
                                            <s:State name="hovered" stateGroups="hoveredGroup"/>
                                            <s:State name="selectedAndHovered" stateGroups="selectedGroup, hoveredGroup"/>
                                            <s:State name="selected" stateGroups="selectedGroup"/>
                                        </s:states>
                                        
                                        <s:Rect id="background" 
                                                top="0" right="0" bottom="0" left="0">
                                            <s:fill>
                                                <s:SolidColor alpha="0" alpha.hoveredGroup="1"
                                                              color.hovered="{outerDocument.getStyle('rollOverColor')}"/>
                                            </s:fill>
                                        </s:Rect>
                                        
                                        <s:HGroup id="wrapper" 
                                                  top="7" right="10" bottom="5"
                                                  verticalAlign="middle"
                                                  gap="8"
                                                  paddingLeft="20">
                                            <s:BitmapImage id="img"/>
                                            <s:Label id="labelDisplay"
                                                     maxDisplayedLines="1"
                                                     color="#000000"
                                                     fontSize="13"/>
                                        </s:HGroup>
                                        
                                    </s:ItemRenderer>
                                </fx:Component>
                            </s:itemRenderer>
                            
                        </s:List>
                        
                    </s:VGroup>
                </s:Group>
                
                <!--- featured components -->
                <s:Group width="100%" height="100%"
                         minWidth="320">
                    
                    <s:Rect top="0" right="0" bottom="0" left="0">
                        <s:fill>
                            <s:SolidColor color="#F2F2F2"/>
                        </s:fill>
                    </s:Rect>
                    
                    <s:VGroup top="35" right="0" bottom="0" left="0"
                              horizontalAlign="justify"
                              gap="20">
                        
                        <s:Label text="Featured"
                                 fontSize="26"
                                 paddingLeft="33" />
                        
                        <s:List id="featuredCmpSelect"
                                width="100%" height="100%"
                                focusEnabled="false"
                                borderVisible="false"
                                contentBackgroundAlpha="0"
                                change="setupAnimation('zoom');changeModule(featuredCmpSelect.selectedItem.label);">
                            
                            <s:layout>
                                <s:TileLayout requestedColumnCount="2" 
                                              horizontalAlign="justify"
                                              horizontalGap="0" verticalGap="6"
                                              columnAlign="justifyUsingWidth"
                                              orientation="columns" 
                                              paddingRight="20" paddingLeft="20" paddingBottom="45"/>
                            </s:layout>
                            
                            <s:itemRenderer>
                                <fx:Component>
                                    <s:ItemRenderer width="100" height="95"
                                                    clipAndEnableScrolling="false">
                                        
                                        <s:states>
                                            <s:State name="normal" />
                                            <s:State name="hovered" stateGroups="hoveredGroup"/>
                                            <s:State name="selectedAndHovered" stateGroups="selectedGroup, hoveredGroup"/>
                                            <s:State name="selected" stateGroups="selectedGroup"/>
                                        </s:states>
                                        
                                        <s:Rect top="0" right="0" bottom="0" left="0">
                                            <s:fill>
                                                <s:SolidColor alpha="0" alpha.hoveredGroup="1" 
                                                              color="{outerDocument.getStyle('rollOverColor')}"/>
                                            </s:fill>
                                        </s:Rect>
                                        
                                        <s:BitmapImage top="15" left="20"
                                                       source="{data.icon}"/>
                                        
                                        <s:VGroup top="15" left="65" right="10" bottom="10"
                                                  horizontalAlign="justify">
                                            
                                            <s:Label id="labelDisplay"
                                                     color="#000000"
                                                     maxDisplayedLines="1"
                                                     fontSize="18"
                                                     text="{data.label}"/>
                                            
                                            <s:Label id="description"
                                                     lineHeight="140%"
                                                     lineBreak="toFit"
                                                     color="#000000"
                                                     maxDisplayedLines="3"
                                                     fontSize="12"
                                                     text="{data.description}"/>
                                            
                                        </s:VGroup>
                                        
                                    </s:ItemRenderer>
                                </fx:Component>
                            </s:itemRenderer>
                            
                        </s:List>
                        
                    </s:VGroup>
                    
                </s:Group>
                
            </s:HGroup>
            
        </s:SkinnableContainer>
        
    </viewStack:ViewStack>
    
</s:Application>