<?xml version="1.0" encoding="utf-8"?>
<mx:Application  backgroundColor="#FFFFFF" layout="absolute"
    xmlns:mccune="com.dougmccune.containers.*"
    xmlns:mccuneControls="com.dougmccune.controls.*"
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    defaultButton="{addButton}" 
    creationComplete="initTabs()" 
    viewSourceURL="srcview/index.html">
    
    <mx:Style source="css/SomeStyles.css" />
    
    <mx:Style source="css/SuperTabStyles.css" />
    
    <mx:Script>
        <![CDATA[
            import mx.controls.Label;
            import mx.containers.VBox;
            import mx.containers.Canvas;
            import com.dougmccune.containers.tabBarClasses.SuperTab;
            
            [Embed(source="/assets/document.png")]
            private var document_icon:Class;
        
            
            private function initTabs():void {
                for(var i:int=0; i<3; i++) {
                    addTab("Tab " + (i + 1), nav);
                }
                
                for(i=3; i<6; i++) {
                    addTab("Tab " + (i + 1), nav2);
                }
            }
            
            private function addTab(lbl:String, navigator:SuperTabNavigator):void {
                if(lbl=="") lbl = "(Untitled)";
                
                var curNum:Number = nav.numChildren + 1;
                
                var child:VBox = new VBox();
                
                child.setStyle("closable", true);
                
                child.label = lbl;
                child.icon = document_icon;
                
                var label:Label = new Label();
                label.text = "Content for: " + lbl;
                
                child.addChild(label);
                
                navigator.addChild(child);
            }
            
            /* The following two functions are a bit of a hack to try to get the
             * tab navigator to refresh the display and resize all the tabs. When
             * you change stuff like tabWidth (which is a style) then the tab
             * navigator has a hard time re-laying out the tabs. Adding and
             * removing a child can sometimes trigger it to re-layout the tabs.
             * I don't know, but just don't change tabWdith or horizontalGap or whatever
             * else at runtime, OK? Pick some values and stick with them.
             */
            private function invalidateLater():void {
                var child:Canvas = new Canvas();
                nav.addChild(child);
                nav.removeChild(child);
                callLater(invalidateNav);
                
                nav2.addChild(child);
                nav2.removeChild(child);
                callLater(invalidateNav);
            }
            
            private function invalidateNav():void {
                nav.invalidateDisplayList();
                nav2.invalidateDisplayList();
            }
        ]]>
    </mx:Script>
    <mx:VBox width="100%" height="100%" horizontalAlign="center">
        
        <mx:HBox>
            
            <mx:Panel title="Tab Control">
                <mx:HBox>
                    <mx:TextInput width="100" id="tabLabel" />
                    <mx:Button id="addButton"
                        label="Add Tab" 
                        click="addTab(tabLabel.text, nav); nav.selectedIndex = nav.numChildren - 1"  />
                </mx:HBox>
            
                <mx:Button label="Remove All" click="nav.removeAllChildren()" />
            </mx:Panel>
            
            <mx:Panel title="Options">
                <mx:HBox>
                    <mx:CheckBox id="tabWidthCheck" 
                        label="Speciy tabWidth:" 
                        change="if(tabWidthCheck.selected) { nav.setStyle('tabWidth', tabWidthInput.value); nav2.setStyle('tabWidth', tabWidthInput.value) } else { nav.setStyle('tabWidth', undefined); nav2.setStyle('tabWidth', undefined); } invalidateLater();" />
                    <mx:NumericStepper id="tabWidthInput" 
                        enabled="{tabWidthCheck.selected}" 
                        value="80" minimum="30" maximum="400" stepSize="10" 
                        change="nav.setStyle('tabWidth', tabWidthInput.value); nav2.setStyle('tabWidth', tabWidthInput.value); invalidateLater();" />
                </mx:HBox>
                <mx:HBox>
                    <mx:Label text="Horizontal Gap:" />
                    <mx:NumericStepper id="hGap"
                        value="0" minimum="0" maximum="30" stepSize="1"  
                        change="nav.setStyle('horizontalGap', hGap.value); nav2.setStyle('horizontalGap', hGap.value); invalidateLater(); " />
                </mx:HBox>
                <mx:HBox>
                    <mx:Label text="Minimum tab width:" />
                    <mx:NumericStepper id="minTab"
                        value="60" minimum="0" maximum="400" stepSize="10"  
                        change="nav.minTabWidth = minTab.value; " />
                </mx:HBox>
            </mx:Panel>
        </mx:HBox>
        
        <mx:Spacer height="20" />

        <!-- These guys are SO super -->
        <mccune:SuperTabNavigator id="nav" scrollSpeed="25" dropShadowEnabled="true"
            stopScrollingEvent="{MouseEvent.MOUSE_UP}" startScrollingEvent="{MouseEvent.MOUSE_DOWN}"
            width="90%" height="90%" horizontalGap="0"
            closePolicy="{SuperTab.CLOSE_SELECTED}"
            />
            
        <!-- I was going to call it SuperDuperTabNavigator, but I thought
             that might be just a tad too much -->
        <mccune:SuperTabNavigator id="nav2" scrollSpeed="25" dropShadowEnabled="true"
            stopScrollingEvent="{MouseEvent.MOUSE_OUT}" startScrollingEvent="{MouseEvent.MOUSE_OVER}"
            width="90%" height="90%" horizontalGap="0"
            closePolicy="{SuperTab.CLOSE_ROLLOVER}"
            />
            
        <mx:Spacer height="20" />
        
        
    </mx:VBox>
    
</mx:Application>