package comps {
    import mx.containers.Accordion;
    import mx.containers.ApplicationControlBar;
    import mx.containers.Form;
    import mx.containers.FormItem;
    import mx.containers.FormItemDirection;
    import mx.containers.VBox;
    import mx.controls.HSlider;
    import mx.controls.Label;
    import mx.core.Application;
    import mx.core.ContainerCreationPolicy;
    import mx.events.SliderEvent;

    public class MyBox extends VBox {
        public var appControlBar:ApplicationControlBar;
        public var slider:HSlider;
        public var lbl:Label;
        public var accordion:Accordion;
        public var vBox1:VBox;
        public var vBox2:VBox;
        public var vBox3:VBox;
        public var vBox4:VBox;
        public var vBox5:VBox;

        public function MyBox() {
            super();
            init();
        }

        private function init():void {
            vBox1 = new VBox();
            vBox1.label = "Red";
            vBox1.setStyle("backgroundColor", "red");
            vBox1.percentWidth = 100;
            vBox1.percentHeight = 100;
            
            vBox2 = new VBox();
            vBox2.label = "Orange";
            vBox2.setStyle("backgroundColor", "haloOrange");
            vBox2.percentWidth = 100;
            vBox2.percentHeight = 100;

            vBox3 = new VBox();
            vBox3.label = "Yellow";
            vBox3.setStyle("backgroundColor", "yellow");
            vBox3.percentWidth = 100;
            vBox3.percentHeight = 100;

            vBox4 = new VBox();
            vBox4.label = "Green";
            vBox4.setStyle("backgroundColor", "haloGreen");
            vBox4.percentWidth = 100;
            vBox4.percentHeight = 100;

            vBox5 = new VBox();
            vBox5.label = "Blue";
            vBox5.setStyle("backgroundColor", "haloBlue");
            vBox5.percentWidth = 100;
            vBox5.percentHeight = 100;

            accordion = new Accordion();
            accordion.creationPolicy = ContainerCreationPolicy.ALL;
            accordion.percentWidth = 100;
            accordion.percentHeight = 100;
            accordion.addChild(vBox1);
            accordion.addChild(vBox2);
            accordion.addChild(vBox3);
            accordion.addChild(vBox4);
            accordion.addChild(vBox5);
            addChild(accordion);

            slider = new HSlider();
            slider.minimum = 0;
            slider.maximum = 3000; // 3 seconds
            slider.value = accordion.getStyle("openDuration");
            slider.liveDragging = true;
            slider.snapInterval = 100;
            slider.tickInterval = 500;
            slider.setStyle("dataTipPrecision", 0);
            slider.addEventListener(SliderEvent.CHANGE, slider_change);

            lbl = new Label();

            var formItem:FormItem = new FormItem();
            formItem.label = "openDuration:";
            formItem.direction = FormItemDirection.HORIZONTAL;
            formItem.addChild(slider);
            formItem.addChild(lbl);

            var form:Form = new Form();
            form.styleName = "plain";
            form.addChild(formItem);

            appControlBar = new ApplicationControlBar();
            appControlBar.dock = true;
            appControlBar.addChild(form);

            /* Add docked ApplicationControlBar container to main application container. */ 
            Application.application.addChildAt(appControlBar, 0);
        }

        private function slider_change(evt:SliderEvent):void {
            accordion.setStyle("openDuration", evt.value);
            lbl.text = evt.value.toString();
        }
    }
}