<?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:menu="ardisia.components.menu.*"
          xmlns:containers="containers.*"
          xmlns:data="containers.data.*"
          xmlns:separators="ardisia.components.separators.*"
          xmlns:menuBar="ardisia.components.menuBar.*"
          xmlns:colorPicker="ardisia.components.colorPicker.*"
          frameRate="60"
          width="100%" height="100%"
          removedFromStage="removedFromStageHandler(event)">
    
    <!-- scripts -->
    <fx:Script>
        <![CDATA[
            
            import ardisia.components.menu.Menu;
            
            
            //--------------------------------------
            //  variables
            //--------------------------------------
            
            public var menu:Menu;
            
            public var menu2:Menu;
            
            //--------------------------------------
            //  methods
            //--------------------------------------
            
            public function creationComplete():void
            {
                menu = Menu.createMenu(this, menuNoIcons, true, menuMinWidthSelect.value);
                menu2 = Menu.createMenu(this, menuIcons, true, menuMinWidthSelect.value);
                
                /* swallow right click for this demo */ 
                systemManager.addEventListener(MouseEvent.RIGHT_CLICK, nullHandler);
            }
            
            protected function updateStyles(menu:Menu):void
            {
                menu.minWidth = menuMinWidthSelect.value;
                menu.variableRowHeight = menuVariableRowHeightSelect.selected;
                menu.setStyle("subMenuHorizontalOffset", subMenuHorizontalOffsetSelect.value);
                menu.setStyle("subMenuVerticalOffset", subMenuVerticalOffsetSelect.value);
                menu.setStyle("textIndent", textIndentSelect.value);
                menu.setStyle("rollOverColor", rollOverColor.selectedColor);
                menu.setStyle("selectionColor", selectionColor.selectedColor);
                menu.setStyle("paddingTop", menuPaddingTop.value);
                menu.setStyle("paddingRight", menuPaddingRight.value);
                menu.setStyle("paddingBottom", menuPaddingBottom.value);
                menu.setStyle("paddingLeft", menuPaddingLeft.value);
                menu.setStyle("horizontalGap", hGapSelect.value);
            }
            
            //--------------------------------------
            //  event handlers
            //--------------------------------------
            
            protected function nullHandler(event:Event):void
            {
                
            }
            
            protected function removedFromStageHandler(event:Event):void
            {
                systemManager.removeEventListener(MouseEvent.RIGHT_CLICK, nullHandler);
            }
            
        ]]>
    </fx:Script>
    
    <!-- declarations -->
    <fx:Declarations>
        
        <fx:Object id="copyIcon" icon="@Embed(source='icons/cross-red.png')" />
        <fx:Object id="pasteIcon" icon="@Embed(source='icons/open-iconic-master/home-2x.png')" />
        <fx:Object id="deleteIcon" icon="@Embed(source='icons/open-iconic-master/paperclip-2x.png')" />
        
        <s:ArrayCollection id="menuNoIcons" 
                           source="{[
                           {label: 'Folder'},
                           {label: 'New', children: [
                           {label: 'File', enabled: false},
                           {label: 'Folder', children: [
                               {label: 'Project'},
                               {type: 'separator'},
                               {label: 'Other'}
                           ]},
                           {label: 'Project'},
                           {type: 'separator'},
                           {label: 'Other'}
                           ]},
                           {label: 'Open', children: [
                           {label: 'Samples'},
                           {label: 'Projects'}
                           ]},
                           {label: 'Go Into', enabled: false},
                           {type: 'separator'},
                           {label: 'Nested Menu Top', children: [
                           {label: 'Nested Menu Item A', enabled: false},
                           {label: 'Nested Menu Item B', type: 'check', toggled: true, enabled: false},
                           {label: 'Nested Menu Item C'},
                           {type: 'separator'},
                           {label: 'Nested Menu Item D', type: 'radio', groupName: 'g2', toggled: true, enabled: false},
                           ]},
                           {type: 'separator'},
                           {label: 'Copy'},
                           {label: 'Paste'},
                           {label: 'Delete'},
                           {label: 'Move'},
                           {label: 'Rename'},
                           {type: 'separator'},
                           {label: 'Import', type: 'radio', groupName: 'g1', toggled: true},
                           {label: 'Export', type: 'radio', groupName: 'g1'}, 
                           {type: 'separator'},
                           {label: 'Refresh', type: 'check', toggled: true},
                           {type: 'separator'},
                           {label: 'Properties', enabled: false}
                           ]}"/>
        
        <s:ArrayCollection id="menuIcons" 
                           source="{[
                           {label: 'New', children: [
                           {label: 'File', enabled: false},
                           {label: 'Folder'},
                           {label: 'Project'},
                           {type: 'separator'},
                           {label: 'Other'}
                           ]},
                           {label: 'Go Into', enabled: false},
                           {type: 'separator'},
                           {label: 'Nested Menu Top', children: [
                           {label: 'Nested Menu Item A', enabled: false},
                           {label: 'Nested Menu Item B', type: 'check', toggled: true, enabled: false},
                           {label: 'Nested Menu Item C'},
                           {type: 'separator'},
                           {label: 'Nested Menu Item D', type: 'radio', groupName: 'g2', toggled: true, enabled: false},
                           {type: 'separator'},
                           {label: 'Nested Menu Item D'}
                           ]},
                           {type: 'separator'},
                           {label: 'Copy', icon: copyIcon.icon},
                           {label: 'Paste', icon: pasteIcon.icon},
                           {label: 'Delete', icon: deleteIcon.icon},
                           {label: 'Move'},
                           {label: 'Rename'},
                           {type: 'separator'},
                           {label: 'Import', type: 'radio', groupName: 'g1', toggled: true},
                           {label: 'Export', type: 'radio', groupName: 'g1'}, 
                           {type: 'separator'},
                           {label: 'Refresh', type: 'check', toggled: true},
                           {type: 'separator'},
                           {label: 'Properties', enabled: false}
                           ]}"/>
        
    </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="Menu &amp; MenuBar Description"
                                       description="Extended versions of the Halo Menu and MenuBar that have added visual customization options and fixes for z index, screen bounding, and other various bugs in the default Halo Menu and MenuBar."
                                       currentState.stockholm="stockholm" currentState.london="london" currentState.spark="spark">
        
        <containers:expandingContainerContent>
            
            <!--- expanding container #1 -->
            <data:ExpandingContainerData>
                <data:label>Shared Styling</data:label>
                <data:content>
                    <s:FormItem label="Min Width:">
                        <s:HSlider id="menuMinWidthSelect" 
                                   value="190" minimum="0" maximum="400"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="The min width of the top level drop down menus.&#13;&#13;Does not apply to sub menus."/>
                        </s:helpContent>
                    </s:FormItem>
                    <s:FormItem label="Variable Height:">
                        <s:CheckBox id="menuVariableRowHeightSelect" 
                                    selected="true"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="Set whether menu row height is variable or fixed."/>
                        </s:helpContent>
                    </s:FormItem>
                    
                    <s:FormItem label="Sub V Offset:">
                        <s:HSlider id="subMenuVerticalOffsetSelect" 
                                   value="-5"
                                   minimum="-10" maximum="100"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="Vertical offset to apply to the sub menus' default positions when displayed."/>
                        </s:helpContent>
                    </s:FormItem>
                    
                    <s:FormItem label="Sub H Offset:">
                        <s:HSlider id="subMenuHorizontalOffsetSelect" 
                                   value="2" 
                                   minimum="-10" maximum="100"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="Horizontal offset to apply to the sub menus' default positions when displayed."/>
                        </s:helpContent>
                    </s:FormItem>
                    <s:FormItem label="Text Indent:">
                        <s:HSlider id="textIndentSelect" 
                                   minimum="-10" maximum="20" value="0"/>
                    </s:FormItem>
                    <s:FormItem label="Roll Over Color:">
                        <colorPicker:ColorPicker id="rollOverColor" 
                                                 selectedColor="{getStyle('rollOverColor')}"/>
                    </s:FormItem>
                    <s:FormItem label="Selection Color:">
                        <colorPicker:ColorPicker id="selectionColor" 
                                                 selectedColor="{getStyle('selectionColor')}"/>
                    </s:FormItem>
                    
                    <separators:HSeparator width="100%"
                                           paddingTop="5" paddingBottom="5"/>
                    <s:FormHeading label="Menu Item Padding"/>
                    <s:FormItem label="Top:">
                        <s:HSlider id="menuPaddingTop" 
                                   value="2" minimum="-10" maximum="30"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="Top padding for the drop down menu items."/>
                        </s:helpContent>
                    </s:FormItem>
                    <s:FormItem label="Right:">
                        <s:HSlider id="menuPaddingRight" 
                                   value="5" minimum="-10" maximum="30"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="Right padding for the drop down menu items."/>
                        </s:helpContent>
                    </s:FormItem>
                    <s:FormItem label="Bottom:">
                        <s:HSlider id="menuPaddingBottom" 
                                   value="2" minimum="-10" maximum="30"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="Bottom padding for the drop down menu items."/>
                        </s:helpContent>
                    </s:FormItem>
                    <s:FormItem label="Left:">
                        <s:HSlider id="menuPaddingLeft" 
                                   value="5" minimum="-10" maximum="30"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="Left padding for the drop down menu items."/>
                        </s:helpContent>
                    </s:FormItem>
                    
                    <separators:HSeparator width="100%"
                                           paddingTop="5" paddingBottom="5"/>
                    <s:FormHeading label="Icons"/>
                    <s:FormItem label="Horizontal Gap">
                        <s:HSlider id="hGapSelect"
                                   minimum="0" maximum="20" value="8"/>
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="Gap between icons/UI controls and text."/>
                        </s:helpContent>
                    </s:FormItem>
                </data:content>
            </data:ExpandingContainerData>
            
        </containers:expandingContainerContent>
        
        <containers:centerContent>
            
            <!--- example #1 -->
            <data:PrimaryContentData>
                <data:tabLabel>Menu</data:tabLabel>
                <data:exampleDescription>Click the containers below to display a menu.</data:exampleDescription>
                <data:primaryContent>
                    <s:HGroup top="20" right="20" bottom="20" left="20"
                              verticalAlign="justify"
                              gap="20">
                        <s:BorderContainer width="50%"
                                           click="updateStyles(menu);menu.show(event.stageX, event.stageY);">
                            <s:Label top="20" right="20" left="20" 
                                     text="Click anywhere in this box to open a Menu (no icons)."
                                     fontWeight="bold"/>
                        </s:BorderContainer>
                        <s:BorderContainer width="50%"
                                           click="updateStyles(menu2);menu2.show(event.stageX, event.stageY);">
                            <s:Label top="20" right="20" left="20" 
                                     text="Click anywhere in this box to open a Menu (has icons)."
                                     fontWeight="bold"/>    
                        </s:BorderContainer>
                    </s:HGroup>
                </data:primaryContent>
            </data:PrimaryContentData>
            
            <!--- example #2 -->
            <data:PrimaryContentData>
                <data:tabLabel>MenuBar Example</data:tabLabel>
                <data:exampleDescription>Extended version of the Halo MenuBar that adds some useful visual customization options and fixes for z-index and screen bounding.</data:exampleDescription>
                <data:toolbarContent>
                    <s:Form>
                        <s:FormHeading label="MenuBar Specific API" />
                        <s:FormItem label="MenuBar Gap:">
                            <s:HSlider id="hGap" 
                                       value="0" 
                                       minimum="-10" maximum="30"/>
                            <s:helpContent>
                                <s:Image source="@Embed(source='icons/question.png')"
                                         toolTip="Horizontal gap between the menu bar buttons.&#13;&#13;Does not affect the items in the popup menu."/>
                            </s:helpContent>
                        </s:FormItem>
                        <s:FormItem label="Menu V Offset:">
                            <s:HSlider id="menuVerticalOffsetSelect" 
                                       minimum="-10" maximum="100" 
                                       value.spark="-1" value.stockholm="-1" value.london="0" />
                            <s:helpContent>
                                <s:Image source="@Embed(source='icons/question.png')"
                                         toolTip="Vertical offset to apply to the top level menu when displayed.&#13;&#13;Only applies to the top level menu."/>
                            </s:helpContent>
                        </s:FormItem>
                        
                        <s:FormItem label="Menu H Offset:">
                            <s:HSlider id="menuHorizontalOffset" 
                                       value="0" minimum="-10" maximum="100"/>
                            <s:helpContent>
                                <s:Image source="@Embed(source='icons/question.png')"
                                         toolTip="Horizontal offset to apply to the top level menu when displayed.&#13;&#13;Only applies to the top level menu."/>
                            </s:helpContent>
                        </s:FormItem>
                    </s:Form>
                </data:toolbarContent>
                <data:primaryContent>
                    <s:BorderContainer top="150" 
                                       horizontalCenter="0" 
                                       backgroundColor="#E2E2E2">
                        <menuBar:MenuBar id="myMenuBar"
                                         top="10" left="20" bottom="10" right="20"
                                         menuMinWidth="{menuMinWidthSelect.value}"
                                         menuVariableRowHeight="{menuVariableRowHeightSelect.selected}"
                                         menuVerticalOffset="{menuVerticalOffsetSelect.value}"
                                         menuHorizontalOffset="{menuHorizontalOffset.value}"
                                         subMenuHorizontalOffset="{subMenuHorizontalOffsetSelect.value}"
                                         subMenuVerticalOffset="{subMenuVerticalOffsetSelect.value}"
                                         menuPaddingBottom="{menuPaddingBottom.value}"
                                         menuPaddingLeft="{menuPaddingLeft.value}"
                                         menuPaddingRight="{menuPaddingRight.value}"
                                         menuPaddingTop="{menuPaddingTop.value}"
                                         rollOverColor="{rollOverColor.selectedColor}"
                                         selectionColor="{selectionColor.selectedColor}"
                                         hGap="{hGap.value}"
                                         labelField="@label">
                            <fx:XMLList>
                                <menuitem label="File">
                                    <menuitem label="New"/>
                                    <menuitem type="separator"/>
                                    <menuitem label="Open">
                                        <menuitem label="Samples"/>
                                        <menuitem label="Upload Image">
                                            <menuitem label="Export as PNG"/>
                                            <menuitem label="Export as JPEG"/>
                                            <menuitem type="separator"/>
                                            <menuitem label="Close"/>
                                        </menuitem>
                                    </menuitem>
                                    <menuitem label="Save"/>
                                    <menuitem label="Import">
                                        <menuitem label="Samples"/>
                                        <menuitem label="Upload Image"/>
                                    </menuitem>
                                    <menuitem label="Export as PNG"/>
                                    <menuitem label="Export as JPEG"/>
                                    <menuitem type="separator"/>
                                    <menuitem label="Close"/>
                                </menuitem>
                                <menuitem label="Edit">
                                    <menuitem label="Undo"/>
                                    <menuitem label="Redo"/>
                                    <menuitem type="separator"/>
                                    <menuitem label="Cut"/>
                                    <menuitem label="Copy"/>
                                    <menuitem label="Paste"/>
                                    <menuitem type="separator"/>
                                    <menuitem label="Select">
                                        <menuitem label="All"/>
                                        <menuitem label="None"/>
                                    </menuitem>
                                    <menuitem type="separator"/>
                                    <menuitem label="Clone"/>
                                    <menuitem label="Delete"/>
                                </menuitem>
                                <menuitem label="View">
                                    <menuitem label="Zoom In"/>
                                    <menuitem label="Zoom Out"/>
                                    <menuitem label="Magnification">
                                        <menuitem label="0%"/>
                                        <menuitem label="100%"/>
                                        <menuitem label="200%"/>
                                        <menuitem label="300%"/>
                                    </menuitem>
                                    <menuitem type="separator"/>
                                    <menuitem label="Fit Selection"/>
                                    <menuitem label="Fit All"/>
                                    <menuitem type="separator"/>
                                    <menuitem type="check" label="Show Rulers"/>
                                    <menuitem type="check" label="Show Grid"/>
                                    <menuitem label="Smart Guides">
                                        <menuitem type="check" label="Show Smart Guides"/>
                                        <menuitem type="check" label="Snap To Smart Guides"/>
                                    </menuitem>
                                </menuitem>
                                <menuitem label="Modify">
                                    <menuitem label="Canvas Size"/>
                                    <menuitem label="Canvas Color"/>
                                    <menuitem label="Fit Canvas"/>
                                    <menuitem type="separator"/>
                                    <menuitem label="Group"/>
                                    <menuitem label="Ungroup"/>
                                    <menuitem label="Flatten Selection"/>
                                    <menuitem type="separator"/>
                                    <menuitem label="Rotate 90 CW"/>
                                    <menuitem label="Rotate 90 CCW"/>
                                    <menuitem label="Flip Horizontally"/>
                                    <menuitem label="Flip Vertically"/>
                                </menuitem>
                            </fx:XMLList>
                        </menuBar:MenuBar>
                    </s:BorderContainer>
                </data:primaryContent>
            </data:PrimaryContentData>
            
        </containers:centerContent>
        
    </containers:DemoApplicationWrapper>
    
</s:Module>