package com.containers {
   
    import flash.events.*;
   
    import mx.containers.Panel;
    import mx.core.ScrollPolicy;
    import mx.effects.AnimateProperty;
    import mx.events.*;
   
   
    /**
    * The icon designating a "closed" state
    */
    [Style(name="closedIcon", property="closedIcon", type="Object")]
   
    /**
    * The icon designating an "open" state
    */
    [Style(name="openIcon", property="openIcon", type="Object")]
   
    /**
    * This is a Panel that can be collapsed and expanded by clicking on the header.
    *
    * @author Ali Rantakari
    */
    public class CollapsiblePanel extends Panel {
       
        private var _creationComplete:Boolean = false;
        private var _open:Boolean = true;
        private var _openAnim:AnimateProperty;
        //used for resizing
        private var _defaultHeight:int;
        private var _usesPercentHeight:Boolean;
       
        /**
        * Constructor
        *
        */
        public function CollapsiblePanel(aOpen:Boolean = true):void
        {
            super();
            this.open = aOpen;
            this.addEventListener(FlexEvent.CREATION_COMPLETE, creationCompleteHandler);
            this.addEventListener(ResizeEvent.RESIZE, onResizeEvent);
        }
       
       
        // BEGIN: event handlers                ------------------------------------------------------------
       
        private function creationCompleteHandler(event:FlexEvent):void
        {
            this.horizontalScrollPolicy = ScrollPolicy.OFF;
            this.verticalScrollPolicy = ScrollPolicy.OFF;
                       
            _creationComplete = true;
           
            _openAnim = new AnimateProperty(this);
            _openAnim.duration = 300;
           
            titleBar.addEventListener(MouseEvent.CLICK, headerClickHandler);
        }
       
        private function headerClickHandler(event:MouseEvent):void { toggleOpen(); }
       
        private function onResizeEvent(event:ResizeEvent):void
        {
            if (_open && !_usesPercentHeight) this._defaultHeight = this.height;
        }
       
        private function callUpdateOpenOnCreationComplete(event:FlexEvent):void { updateOpen(); }
       
        // --end--: event handlers          - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
       
       
       
        // BEGIN: private methods               ------------------------------------------------------------
       
        // sets the height of the component without animation, based
        // on the _open variable
        private function updateOpen():void
        {
            if (!_open) height = closedHeight;
            //else height = openHeight; - unnecessary, it will automatically be sized
            setTitleIcon();
        }
       
        // the height that the component should be when open
        private function get openHeight():Number {
            //return measuredHeight;
            return _defaultHeight;
        }
       
        // the height that the component should be when closed
        private function get closedHeight():Number {
            var hh:Number = getStyle("headerHeight");
            if (hh <= 0 || isNaN(hh)) hh = titleBar.height;
            return hh;
        }
       
        // sets the correct title icon
        private function setTitleIcon():void
        {
            if (!_open) this.titleIcon = getStyle("closedIcon");
            else this.titleIcon = getStyle("openIcon");
        }
       
        // --end--: private methods         - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
       
       
       
       
       
       
       
       
        // BEGIN: public methods                ------------------------------------------------------------
       
        /**
        * Collapses / expands this block (with animation)
        *   this verison of the method contains a fix for the height not changing effectively
        */
        public function toggleOpen():void
        {
            if (_creationComplete && !_openAnim.isPlaying)
            {
                _openAnim.fromValue = _openAnim.target.height;
                _openAnim.toValue = _open ? _openAnim.target.closedHeight : openHeight;
                if (_usesPercentHeight) _openAnim.property = _open ? "height" : "percentHeight";
                else _openAnim.property = "height";
                _open = !_open;
                _openAnim.addEventListener(EffectEvent.EFFECT_END, function onEffectEnd():void {
                    // Geert (8-Apr-2009)
                    // Only adapt the status & title + send the event when the animation has done playing:
                    setTitleIcon();
                    dispatchEvent(new Event( _open ? Event.OPEN : Event.CLOSE ));
                    _openAnim.removeEventListener(EffectEvent.EFFECT_END, onEffectEnd);
                });
                _openAnim.play();
            }
        }
       
       
        /**
        * Whether the block is in a expanded (open) state or not
        */
        public function get open():Boolean {
            return _open;
        }
        /**
        * @private
        */
        public function set open(aValue:Boolean):void {
            _open = aValue;
            if (_creationComplete) updateOpen();
            else this.addEventListener(FlexEvent.CREATION_COMPLETE, callUpdateOpenOnCreationComplete, false, 0, true);
        }
       
        override public function set percentHeight(value:Number):void
        {
            if (_open)
            {
                super.percentHeight = value;
                if (!isNaN(value))
                {
                    this._defaultHeight = value;
                    this._usesPercentHeight = true;
                }
                else
                    this._usesPercentHeight = false;
            }
        }
       
        // --end--: public methods          - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
       
       
    }
}