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

<!--

ADOBE SYSTEMS INCORPORATED
Copyright 2010 Adobe Systems Incorporated
All Rights Reserved.

NOTICE: Adobe permits you to use, modify, and distribute this file
in accordance with the terms of the license agreement accompanying it.

-->

<!--- The default skin class for a Spark ViewMenu in a mobile application.  

@see spark.components.ViewMenu

@langversion 3.0
@playerversion Flash 10
@playerversion AIR 1.5
@productversion Flex 4
-->
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
             xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled="0.5">
    
    <fx:Metadata>
        <![CDATA[ 
        /** 
        * @copy spark.skins.spark.ApplicationSkin#hostComponent
        */
        [HostComponent("spark.components.ViewMenu")]
        ]]>
    </fx:Metadata> 
    
    <fx:Script fb:purpose="styling">
        <![CDATA[
            import mx.core.DPIClassification;
            import mx.core.FlexGlobals;
            import mx.core.IVisualElement;
            import mx.core.UIComponent;
            import mx.events.FlexEvent;
            
            import spark.components.supportClasses.GroupBase;
            import spark.effects.easing.Power;
            

            /**
             * @private
             */
            override protected function initializationComplete():void
            {
                useChromeColor = false;
                super.initializationComplete();
            }
                
            /**
             *  @copy spark.skins.mobile.supportClasses.MobileSkin#applicationDPI
             */
            public function get applicationDPI():int
            {
                return FlexGlobals.topLevelApplication.applicationDPI;
            }
            
            /**
             *  @private
             */
            override protected function measure():void
            {
                super.measure();
                
                // not actually used in normal situations, but 
                // is here to prevent bug 28950 if ViewMenu is misused
                measuredHeight = 200;
            }
            
            /**
             *  @private
             */
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
            {
                super.updateDisplayList(unscaledWidth, unscaledHeight);
                
                var strokeWeight:Number = (applicationDPI == DPIClassification.DPI_320) ? 2 : 1;
                var separatorWeight:Number = 1;
                
                if (applicationDPI == DPIClassification.DPI_320)
                    separatorWeight = 4;
                else if (applicationDPI == DPIClassification.DPI_240)
                    separatorWeight = 2;          
                
                dividerStroke.weight = strokeWeight;
                background.top = strokeWeight;
                contentGroup.top = strokeWeight + separatorWeight;
                contentGroup.bottom = separatorWeight;
                contentGroupLayout.horizontalGap = separatorWeight;
                contentGroupLayout.verticalGap = separatorWeight;
            }

        ]]>
    </fx:Script>
    
    <s:states>
        <s:State name="normal"                          stateGroups="openedGroup"/>
        <s:State name="closed"                          stateGroups="closedGroup"/>
        <s:State name="disabled"                        stateGroups="openedGroup"/>
        <s:State name="normalAndLandscape"              stateGroups="openedGroup, landscapeGroup"/>
        <s:State name="closedAndLandscape"              stateGroups="closedGroup, landscapeGroup"/>
        <s:State name="disabledAndLandscape"            stateGroups="openedGroup, landscapeGroup" />
    </s:states>
    
    <s:transitions>
        <s:Transition fromState="closed" toState="normal" autoReverse="true">
            <s:Parallel>
                <s:Fade target="{chromeGroup}" duration="150" easer="{new Power(0.5, 3)}" /> 
                <s:Move target="{chromeGroup}" duration="150" disableLayout="true"  easer="{new Power(0, 5)}"/>
            </s:Parallel>
        </s:Transition>
        
        <s:Transition fromState="closedAndLandscape" toState="normalAndLandscape" autoReverse="true">
            <s:Parallel>
                <s:Fade target="{chromeGroup}" duration="150" easer="{new Power(0.5, 3)}" /> 
                <s:Move target="{chromeGroup}" duration="150" disableLayout="true"  easer="{new Power(0, 5)}"/>
            </s:Parallel>
        </s:Transition>

        <s:Transition fromState="normal" toState="closed" autoReverse="true">
            <s:Parallel>
                <s:Fade target="{chromeGroup}" duration="100"/> 
                <s:Move target="{chromeGroup}" duration="100" disableLayout="true"/>
            </s:Parallel>
        </s:Transition>

        <s:Transition fromState="normalAndLandscape" toState="closedAndLandscape" autoReverse="true">
            <s:Parallel>
                <s:Fade target="{chromeGroup}" duration="100"/> 
                <s:Move target="{chromeGroup}" duration="100" disableLayout="true"/>
            </s:Parallel>
        </s:Transition>
    </s:transitions>

    <!-- The ViewMenu and its skin are sized to the application.
         The menu chrome is a separate group that is anchored to the bottom of the skin. -->

    <s:Group id="chromeGroup"
             left="0"
             right="0"
             top.closedGroup="{hostComponent.height - chromeGroup.height / 2}"
             bottom.openedGroup="0" 
             visible.closedGroup="false">
        
        <!-- Divider line -->
        <s:Rect left="0" right="0" top="0" height="0">
            <s:stroke>
                <s:SolidColorStroke id="dividerStroke" weight="1" color="#000000" alpha=".9"/>   
            </s:stroke>
        </s:Rect> 
        
        <!-- Background -->
        <s:Rect left="0" right="0" top="1" bottom="0" id="background">
            <s:fill> 
                <s:SolidColor color="#000000" alpha=".5"/>
            </s:fill>
        </s:Rect>
        
        <!--
        Note: setting the minimum size to 0 here so that changes to the host component's
        size will not be thwarted by this skin part's minimum size.   This is a compromise,
        more about it here: http://bugs.adobe.com/jira/browse/SDK-21143
        -->
        <!--- @copy spark.components.SkinnableContainer#contentGroup -->
        <s:Group id="contentGroup" left="0" right="0" top="3" bottom="2" minWidth="0" minHeight="0">
            <s:layout>
                <s:ViewMenuLayout horizontalGap="2" verticalGap="2" id="contentGroupLayout"
                                  requestedMaxColumnCount="3" requestedMaxColumnCount.landscapeGroup="6"/>
            </s:layout>
        </s:Group>    
    </s:Group>
</s:SparkSkin>
