<?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:mx="library://ns.adobe.com/flex/mx"
          xmlns:containers="containers.*"
          xmlns:data="containers.data.*"
          xmlns:separators="ardisia.components.separators.*"
          xmlns:colorPicker="ardisia.components.colorPicker.*" 
          xmlns:sliderField="ardisia.components.sliderField.*" 
          xmlns:pane="ardisia.components.pane.*"
          frameRate="60"
          width="100%" height="100%"
          removedFromStage="removedFromStageHandler(event)">
    
    <!-- scripts -->
    <fx:Script>
        <![CDATA[
            import mx.core.BitmapAsset;
            import mx.core.FlexGlobals;
            
            import spark.events.IndexChangeEvent;
            
            import ardisia.bitmapAdjustments.BitmapAdjustments;
            import ardisia.bitmapAdjustments.PixelateTypes;
            import ardisia.bitmapAdjustments.dataTypes.ThresholdData;
            import ardisia.components.pane.Pane;
            
            //--------------------------------------
            //  variables
            //--------------------------------------
            
            protected var adaBmd:BitmapData;
            
            protected var sunBmd:BitmapData;
            
            protected var laikaToyAutoLevelledBitmap:BitmapData
            
            protected var laikaToyBitmap:BitmapData
            
            // enough time for pane animations to run
            protected var timer:Timer = new Timer(300, 1);
            
            //--------------------------------------
            //  methods
            //--------------------------------------
            
            public function creationComplete():void
            {
                // get bitmap data created
                adaBmd = BitmapAsset(new adaLovelaceBitmapAsset.bmd()).bitmapData;
                sunBmd = BitmapAsset(new sunBitmapAsset.bmd()).bitmapData;
                laikaToyAutoLevelledBitmap = BitmapAsset(new laikaToyAutoLevelledBitmapAsset.bmd()).bitmapData;
                laikaToyBitmap = BitmapAsset(new laikaToyBitmapAsset.bmd()).bitmapData;
                
                demoAppWrapper.viewstack.addEventListener(IndexChangeEvent.CHANGE, viewstackHandler);
                viewstackHandler();
            }
            
            public function updateAdjustment():void
            {
                
                switch (demoAppWrapper.tabBar.selectedItem.label)
                {
                    
                    case "Color Thresholds":
                        
                        switch (colorThesholdsSelect.selectedIndex)
                        {
                            
                            // none
                            case 0:
                                img.source = adaBmd.clone();
                                
                                break;
                            
                            // hope
                            case 1:
                                img.source = BitmapAdjustments.thresholds(adaBmd.clone(), Vector.<ThresholdData>([
                                    new ThresholdData(0x00324D, 0.26), 
                                    new ThresholdData(0xD61A21, 0.52),
                                    new ThresholdData(0x70959E, 0.68), 
                                    new ThresholdData(0xFBE3A7, 1)
                                ]), false);
                                
                                break;
                            
                            // hope (gradient)
                            case 2:
                                img.source = BitmapAdjustments.thresholds(adaBmd.clone(), Vector.<ThresholdData>([
                                    new ThresholdData(0x00324D, 0), 
                                    new ThresholdData(0xD61A21, 0.52),
                                    new ThresholdData(0x70959E, 0.68), 
                                    new ThresholdData(0xFBE3A7, 1)
                                ]), true);
                                
                                break;
                            
                            // heatmap
                            case 3:
                                img.source = BitmapAdjustments.thresholds(adaBmd.clone(), Vector.<ThresholdData>([
                                    new ThresholdData(0x0005FF, 0.0), 
                                    new ThresholdData(0x00F8FF, 0.4), 
                                    new ThresholdData(0x00FF0B, 0.6), 
                                    new ThresholdData(0xFFF800, 0.8), 
                                    new ThresholdData(0xFF0600, 1)
                                ]), true);
                                
                                break;
                            
                            // brush pen    
                            case 4:
                                img.source = BitmapAdjustments.thresholds(adaBmd.clone(), Vector.<ThresholdData>([
                                    new ThresholdData(0x000000, 0.5), 
                                    new ThresholdData(0xFFFFFF, 1)
                                ]), false);
                                
                                break;
                            
                            // predator
                            case 5:
                                img.source = BitmapAdjustments.thresholds(adaBmd.clone(), Vector.<ThresholdData>([
                                    new ThresholdData(0x0A00B2, 0.0), 
                                    new ThresholdData(0xFF0000, 0.5), 
                                    new ThresholdData(0xFFFC00, 1)
                                ]), true);
                                
                                break;
                            
                            // custom
                            case 6:
                                img.source = BitmapAdjustments.thresholds(adaBmd.clone(), Vector.<ThresholdData>([
                                    new ThresholdData(hope1B.selectedColor, useGradientsSelect.selected ? 0 : hope1A.value), 
                                    new ThresholdData(hope2B.selectedColor, hope2A.value),
                                    new ThresholdData(hope3B.selectedColor, hope3A.value), 
                                    new ThresholdData(hope4B.selectedColor, 1)
                                ]), useGradientsSelect.selected);
                                
                                break;
                            
                        }
                        
                        break;
                    
                    case "Pixelation":
                        
                        switch (pixelateSelect.selectedIndex)
                        {
                            
                            // none
                            case 0:
                                img2.source = sunBmd.clone();
                                
                                break;
                            
                            // pixelate
                            case 1:
                                img2.source = BitmapAdjustments.pixelate(sunBmd.clone(), 0, -1, PixelateTypes.RECTANGLE, 10, 0, 0, 0);
                                
                                break;
                            
                            // dither
                            case 2:
                                loadingPane.floatPane(DisplayObject(FlexGlobals.topLevelApplication), true, true, true, null, moduleFactory);
                                timer.addEventListener(TimerEvent.TIMER_COMPLETE, timerHandler);        
                                timer.start();
                                
                                break;
                            
                            // grid (rect)
                            case 3:
                                img2.source = BitmapAdjustments.pixelate(sunBmd.clone(), 0, -1, PixelateTypes.RECTANGLE, 5, 1, 0, 0);
                                
                                break;
                                
                            // blocky (circle)
                            case 4:
                                var source:BitmapData = sunBmd.clone();
                                var bmd:BitmapData =  BitmapAdjustments.pixelate(sunBmd.clone(), 0, -1, PixelateTypes.RECTANGLE, 15, -7, 0.5, NaN);
                                source.copyPixels(bmd, new Rectangle(0, 0, bmd.width, bmd.height), new Point(0, 0)); 
                                img2.source = source;
                                
                                break;
                                
                            // strokes
                            case 5:
                                loadingPane.floatPane(DisplayObject(FlexGlobals.topLevelApplication), true, true, true, null, moduleFactory);
                                timer.addEventListener(TimerEvent.TIMER_COMPLETE, timerHandler);        
                                timer.start();
                                
                                break;
                            
                            // artsy
                            case 6:
                                img2.source = BitmapAdjustments.pixelate(sunBmd.clone(), 0, -1, PixelateTypes.CIRCLE, 15, -8, 1, NaN);
                                
                                break;
                                
                            // custom
                            case 7:
                                loadingPane.floatPane(DisplayObject(FlexGlobals.topLevelApplication), true, true, true, null, moduleFactory);
                                timer.addEventListener(TimerEvent.TIMER_COMPLETE, timerHandler);        
                                timer.start();
                                
                                break;
                            
                        }
                        
                        break;
                    
                    case "Oil Painting":
                        if (!applyOilSelect.selected)
                        {
                            img3.source = laikaToyAutoLevelledBitmap.clone();
                        }
                        else
                        {
                            loadingPane.floatPane(DisplayObject(FlexGlobals.topLevelApplication), true, true, true, null, moduleFactory);
                            timer.addEventListener(TimerEvent.TIMER_COMPLETE, timerHandler);        
                            timer.start();
                        }
                        
                        
                        break;
                    
                    case "Kuwahara":
                        if (!applyKuwaharaSelect.selected)
                        {
                            img4.source = adaBmd.clone();
                        }
                        else
                        {
                            loadingPane.floatPane(DisplayObject(FlexGlobals.topLevelApplication), true, true, true, null, moduleFactory);
                            timer.addEventListener(TimerEvent.TIMER_COMPLETE, timerHandler);        
                            timer.start();
                        }
                        
                        break;
                    
                    case "Vignette":
                        img5.source = BitmapAdjustments.vignette(sunBmd.clone(), vignetteSizeSelect.value);
                        
                        break;
                    
                    case "Posterize":
                        img6.source = BitmapAdjustments.posterize(sunBmd.clone(), posterizeSelect.value);
                        
                        break;
                    
                    case "Solarize":
                        img7.source = solarizeSelect.selected ? BitmapAdjustments.solarize(sunBmd.clone()) : sunBmd.clone();
                        
                        break;
                    
                    case "Auto Levels":
                        img8.source = autoLevelsSelect.selected ? BitmapAdjustments.autoLevels(laikaToyBitmap.clone()) : laikaToyBitmap.clone();
                        
                        break;
                    
                }
            }
            
            //--------------------------------------
            //  event handlers
            //--------------------------------------
            
            protected function removedFromStageHandler(event:Event):void
            {
                if (img && img.bitmapData)
                    img.bitmapData.dispose();
                if (img2 && img2.bitmapData)
                    img2.bitmapData.dispose();
                if (img3 && img3.bitmapData)
                    img3.bitmapData.dispose();
                if (img4 && img4.bitmapData)
                    img4.bitmapData.dispose();
                if (img5 && img5.bitmapData)
                    img5.bitmapData.dispose();
                if (img6 && img6.bitmapData)
                    img6.bitmapData.dispose();
                if (img7 && img7.bitmapData)
                    img7.bitmapData.dispose();
                if (img8 && img8.bitmapData)
                    img8.bitmapData.dispose();
            }
            
            protected function viewstackHandler(event:IndexChangeEvent = null):void
            {
                colorThesholdsSelect.selectedIndex = pixelateSelect.selectedIndex = 0;
                applyOilSelect.selected = applyKuwaharaSelect.selected = false;
                updateAdjustment();
            }
            
            protected function timerHandler(event:TimerEvent):void
            {
                timer.removeEventListener(TimerEvent.TIMER_COMPLETE, timerHandler);
                
                switch (demoAppWrapper.tabBar.selectedItem.label)
                {
                    
                    case "Pixelation":
                        
                        switch (pixelateSelect.selectedIndex)
                        {
                            
                            case 2:
                                var source:BitmapData = sunBmd.clone();
                                var bmd:BitmapData =  BitmapAdjustments.pixelate(source, 0, -1, PixelateTypes.CIRCLE, 5, -3, 0.5, NaN);
                                source.copyPixels(bmd, new Rectangle(0, 0, bmd.width, bmd.height), new Point(0, 0)); 
                                
                                img2.source = source;
                                
                                break;
                            
                            case 5:
                                img2.source = BitmapAdjustments.pixelate(sunBmd.clone(), 0, -1, PixelateTypes.RECTANGLE, 10, -9, 1, NaN);
                                
                                break;
                            
                            case 7:
                                spacingPixelateSelect.value = Math.max(-sizePixelateSelect.value + 1, spacingPixelateSelect.value);
                                
                                if (!useBackgroundSelect.selected)
                                {
                                    source = sunBmd.clone();
                                    bmd = BitmapAdjustments.pixelate(sunBmd.clone(), 0, -1,
                                        pixelateTypeSelect.selectedItem, 
                                        sizePixelateSelect.value, 
                                        spacingPixelateSelect.value,
                                        noisePixelateSelect.value);
                                    source.copyPixels(bmd, new Rectangle(0, 0, bmd.width, bmd.height), new Point(0, 0)); 
                                }
                                else
                                {
                                    source = BitmapAdjustments.pixelate(sunBmd.clone(), 0, -1,
                                        pixelateTypeSelect.selectedItem, 
                                        sizePixelateSelect.value, 
                                        spacingPixelateSelect.value,
                                        noisePixelateSelect.value, 
                                        pixelateColorSelect.selectedColor);
                                }
                                img2.source = source;
                                
                                break;
                            
                        }
                        
                        break;
                    
                    case "Oil Painting":
                        img3.source = BitmapAdjustments.oilPainting(laikaToyAutoLevelledBitmap.clone(), oilLevelsSelect.value, oilSizeSelect.value);
                        
                        break;
                    
                    case "Kuwahara":
                        img4.source = BitmapAdjustments.kuwahara(adaBmd.clone(), kuwaharaSizeSelect.value);
                        
                        break;
                
                }
                
                loadingPane.closeFloatedPane();
            }
                
            
        ]]>
    </fx:Script>
    
    <!-- declarations -->
    <fx:Declarations>
        
        <!-- bitmap data -->
        <fx:Object id="adaLovelaceBitmapAsset" bmd="@Embed(source='images/ada-lovelace.jpg')" />
        <fx:Object id="sunBitmapAsset" bmd="@Embed(source='images/sun.jpg')" />
        <fx:Object id="laikaToyAutoLevelledBitmapAsset" bmd="@Embed(source='images/laika-puppy-toy-auto-levelled.jpg')" />
        <fx:Object id="laikaToyBitmapAsset" bmd="@Embed(source='images/laika-puppy-toy.jpg')" />
        
        <!-- panes -->
        <pane:Pane id="loadingPane" 
                   width="300" height="120"
                   title="Bitmap Adjustment">
            <s:Label text="Thinking..."
                     horizontalCenter="0" verticalCenter="0"/>
        </pane:Pane>
        
    </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="Bitmap Adjustments Description"
                                       description="Useful functions to alter bitmap data.&#13;&#13;Unlike filters that are applied via a DisplayObject's 'filters' property, these functions do not dynamically alter bitmap data.  Instead developers must use these functions to manually change bitmap data.&#13;&#13;See the separate filters demo to see the custom dynamic filters included with the Ardisia Component Library."
                                       currentState.stockholm="stockholm" currentState.london="london" currentState.spark="spark">
        
        <containers:centerContent>
            
            <!--- example #1 -->
            <data:PrimaryContentData>
                <data:tabLabel>Color Thresholds</data:tabLabel>
                <data:exampleDescription>Change the colors of bitmap data along color intensity thresholds. Developers can add any number of color thresholds and colors can be transformed by solid color or a calculated gradient color.&#13;&#13;Image is of Ada Lovelace, the first computer programmer in history.</data:exampleDescription>
                <data:toolbarContent>
                    <s:HGroup>
                        <s:DropDownList id="colorThesholdsSelect"
                                        width="130"
                                        requireSelection="true"
                                        selectedIndex="0"
                                        change="updateAdjustment()">
                            <s:ArrayCollection>
                                <fx:String>No Adjustment</fx:String>
                                <fx:String>Hope</fx:String>
                                <fx:String>Hope (Gradient)</fx:String>
                                <fx:String>Heat</fx:String>
                                <fx:String>Brush Pen</fx:String>
                                <fx:String>Predator</fx:String>
                                <fx:String>Custom</fx:String>
                            </s:ArrayCollection>
                        </s:DropDownList>
                        <separators:VSeparator height="100%"/>
                        <s:Form includeInLayout="{colorThesholdsSelect.selectedIndex==6}" visible="{colorThesholdsSelect.selectedIndex==6}">
                            <s:FormItem label="Color #1:">
                                <s:HGroup gap="2">
                                    <s:HSlider id="hope1A"
                                               enabled="{!useGradientsSelect.selected}"
                                               snapInterval="0"
                                               minimum="0" maximum="{hope2A.value}" value="0.26"
                                               change="updateAdjustment()"/>
                                    <colorPicker:ColorPicker id="hope1B"
                                                             selectedColor="#00324D"
                                                             change="updateAdjustment()"/>
                                </s:HGroup>
                            </s:FormItem>
                            <s:FormItem label="Color #2:">
                                <s:HGroup gap="2">
                                    <s:HSlider id="hope2A"
                                               snapInterval="0"
                                               minimum="{hope1A.value}" maximum="{hope3A.value}" value="0.52"
                                               change="updateAdjustment()"/>
                                    <colorPicker:ColorPicker id="hope2B"
                                                             selectedColor="#D61A21"
                                                             change="updateAdjustment()"/>
                                </s:HGroup>
                            </s:FormItem>
                            <s:FormItem label="Color #3:">
                                <s:HGroup gap="2">
                                    <s:HSlider id="hope3A"
                                               snapInterval="0"
                                               minimum="{hope2A.value}" maximum="1" value="0.68"
                                               change="updateAdjustment()"/>
                                    <colorPicker:ColorPicker id="hope3B"
                                                             selectedColor="#70959E"
                                                             change="updateAdjustment()"/>
                                </s:HGroup>
                            </s:FormItem>
                            <s:FormItem label="Color #4:">
                                <colorPicker:ColorPicker id="hope4B"
                                                         selectedColor="#FBE3A7"
                                                         change="updateAdjustment()"/>
                            </s:FormItem>
                            <s:FormItem label="Use Gradients:">
                                <s:CheckBox id="useGradientsSelect"
                                            selected="false"
                                            change="updateAdjustment()"/>
                            </s:FormItem>
                        </s:Form>
                    </s:HGroup>
                </data:toolbarContent>
                <data:primaryContent>
                    <s:Image id="img" 
                             horizontalCenter="0" verticalCenter="0"/>
                </data:primaryContent>
            </data:PrimaryContentData>
            
            <!--- example #2 -->
            <data:PrimaryContentData>
                <data:tabLabel>Pixelation</data:tabLabel>
                <data:exampleDescription>Pixelize or pointillize bitmap data. See the custom option below for the possible configurations.&#13;&#13;Image is of sunflowers.</data:exampleDescription>
                <data:toolbarContent>
                    <s:HGroup>
                        <s:DropDownList id="pixelateSelect"
                                        width="130"
                                        requireSelection="true"
                                        selectedIndex="0"
                                        change="updateAdjustment()">
                            <s:ArrayCollection>
                                <fx:String>No Adjustment</fx:String>
                                <fx:String>Pixelate</fx:String>
                                <fx:String>Dither</fx:String>
                                <fx:String>Grid</fx:String>
                                <fx:String>Blocky</fx:String>
                                <fx:String>Strokes</fx:String>
                                <fx:String>Artsy</fx:String>
                                <fx:String>Custom</fx:String>
                            </s:ArrayCollection>
                        </s:DropDownList>
                        <separators:VSeparator height="100%"/>
                        <s:Form includeInLayout="{pixelateSelect.selectedIndex==7}" visible="{pixelateSelect.selectedIndex==7}">
                            <s:FormItem label="Type">
                                <s:DropDownList id="pixelateTypeSelect"
                                                width="100"
                                                requireSelection="true"
                                                change="updateAdjustment()">
                                    <s:ArrayCollection>
                                        <fx:String>rectangle</fx:String>
                                        <fx:String>circle</fx:String>
                                    </s:ArrayCollection>
                                </s:DropDownList>
                            </s:FormItem>
                            <s:FormItem label="Size:">
                                <sliderField:SliderField id="sizePixelateSelect"
                                                         minimum="2" maximum="50" value="15"
                                                         change="updateAdjustment()"/>
                            </s:FormItem>
                            <s:FormItem label="Spacing:">
                                <sliderField:SliderField id="spacingPixelateSelect"
                                                         minimum="-10" maximum="10" value="5"
                                                         change="updateAdjustment()"/>
                            </s:FormItem>
                            <s:FormItem label="Noise:">
                                <sliderField:SliderField id="noisePixelateSelect"
                                                         minimum="0" maximum="1" value="0.5" snapInterval="0"
                                                         change="updateAdjustment()"/>
                            </s:FormItem>
                            <s:FormItem label="Use Background:">
                                <s:HGroup verticalAlign="middle"
                                          gap="2">
                                    <s:CheckBox id="useBackgroundSelect"
                                                selected="true"
                                                change="updateAdjustment()"/>
                                    <colorPicker:ColorPicker id="pixelateColorSelect"
                                                             enabled="{useBackgroundSelect.selected}"
                                                             selectedColor="#FFFFFF"
                                                             change="updateAdjustment()"/>
                                </s:HGroup>
                            </s:FormItem>
                        </s:Form>
                    </s:HGroup>
                </data:toolbarContent>
                <data:primaryContent>
                    <s:Image id="img2" 
                             horizontalCenter="0" verticalCenter="0"/>
                </data:primaryContent>
            </data:PrimaryContentData>
            
            <!--- example #3 -->
            <data:PrimaryContentData>
                <data:tabLabel>Oil Painting</data:tabLabel>
                <data:exampleDescription>Oil painting effect.</data:exampleDescription>
                <data:toolbarContent>
                    <s:Form>
                        <s:FormItem label="Apply Oil Painting:">
                            <s:CheckBox id="applyOilSelect"
                                        selected="false"
                                        change="updateAdjustment()"/>
                        </s:FormItem> 
                        <s:FormItem label="Levels:"
                                    enabled="{applyOilSelect.selected}">
                            <sliderField:SliderField id="oilLevelsSelect"
                                                     snapInterval="1"
                                                     minimum="2" maximum="30" value="24"
                                                     change="updateAdjustment()"/>
                        </s:FormItem>
                        <s:FormItem label="Size:"
                                    enabled="{applyOilSelect.selected}">
                            <sliderField:SliderField id="oilSizeSelect"
                                                     snapInterval="1"
                                                     minimum="2" maximum="9" value="7"
                                                     change="updateAdjustment()"/>
                        </s:FormItem>
                    </s:Form>
                </data:toolbarContent>
                <data:primaryContent>
                    <s:Image id="img3" 
                             horizontalCenter="0" verticalCenter="0"
                             source="@Embed(source='images/ada-lovelace.jpg')"/>
                </data:primaryContent>
            </data:PrimaryContentData>
            
            <!--- example #4 -->
            <data:PrimaryContentData>
                <data:tabLabel>Kuwahara</data:tabLabel>
                <data:exampleDescription>Kuwahara filter effect. See http://en.wikipedia.org/wiki/Kuwahara_filter for more information.</data:exampleDescription>
                <data:toolbarContent>
                    <s:Form>
                        <s:FormItem label="Apply Kuwahara:">
                            <s:CheckBox id="applyKuwaharaSelect"
                                        selected="false"
                                        change="updateAdjustment()"/>
                        </s:FormItem>
                        <s:FormItem label="Size:"
                                    enabled="{applyKuwaharaSelect.selected}">
                            <sliderField:SliderField id="kuwaharaSizeSelect"
                                                     snapInterval="1"
                                                     minimum="2" maximum="8" value="4"
                                                     change="updateAdjustment()"/>
                        </s:FormItem>
                    </s:Form>
                </data:toolbarContent>
                <data:primaryContent>
                    <s:Image id="img4"
                             horizontalCenter="0" verticalCenter="0"/>
                </data:primaryContent>
            </data:PrimaryContentData>
            
            <!--- example #5 -->
            <data:PrimaryContentData>
                <data:tabLabel>Vignette</data:tabLabel>
                <data:exampleDescription>Creates a vignette effect.</data:exampleDescription>
                <data:toolbarContent>
                    <s:Form>
                        <s:FormItem label="Size:">
                            <s:HSlider id="vignetteSizeSelect"
                                       snapInterval="0"
                                       minimum="0" maximum="1" value="0.8"
                                       change="updateAdjustment()"/>
                        </s:FormItem>
                    </s:Form>
                </data:toolbarContent>
                <data:primaryContent>
                    <s:Image id="img5" 
                             horizontalCenter="0" verticalCenter="0"/>
                </data:primaryContent>
            </data:PrimaryContentData>
            
            <!--- example #6 -->
            <data:PrimaryContentData>
                <data:tabLabel>Posterize</data:tabLabel>
                <data:exampleDescription>Posterize effect. See http://en.wikipedia.org/wiki/Posterization.</data:exampleDescription>
                <data:toolbarContent>
                    <s:Form>
                        <s:FormItem label="Levels:">
                            <s:HSlider id="posterizeSelect"
                                       snapInterval="1"
                                       minimum="2" maximum="20" value="3"
                                       change="updateAdjustment()"/>
                        </s:FormItem>
                    </s:Form>
                </data:toolbarContent>
                <data:primaryContent>
                    <s:Image id="img6" 
                             horizontalCenter="0" verticalCenter="0"/>
                </data:primaryContent>
            </data:PrimaryContentData>
            
            <!--- example #7 -->
            <data:PrimaryContentData>
                <data:tabLabel>Solarize</data:tabLabel>
                <data:exampleDescription>Solarize effect. See http://en.wikipedia.org/wiki/Solarisation.</data:exampleDescription>
                <data:toolbarContent>
                    <s:Form>
                        <s:FormItem label="Apply Solarization:">
                            <s:CheckBox id="solarizeSelect"
                                        selected="false"
                                        change="updateAdjustment()"/>
                        </s:FormItem>
                    </s:Form>
                </data:toolbarContent>
                <data:primaryContent>
                    <s:Image id="img7" 
                             horizontalCenter="0" verticalCenter="0"/>
                </data:primaryContent>
            </data:PrimaryContentData>
            
            <!--- example #8 -->
            <data:PrimaryContentData>
                <data:tabLabel>Auto Levels</data:tabLabel>
                <data:exampleDescription>Auto Levels. Stretch the range of the colors in the bitmap data to add color.</data:exampleDescription>
                <data:toolbarContent>
                    <s:Form>
                        <s:FormItem label="Apply Auto Levels Effect:">
                            <s:CheckBox id="autoLevelsSelect"
                                        selected="false"
                                        change="updateAdjustment()"/>
                        </s:FormItem>
                    </s:Form>
                </data:toolbarContent>
                <data:primaryContent>
                    <s:Image id="img8"
                             horizontalCenter="0" verticalCenter="0"/>
                </data:primaryContent>
            </data:PrimaryContentData>
            
        </containers:centerContent>
        
    </containers:DemoApplicationWrapper>
    
</s:Module>