need to make a reusable custom component from the existing code here. So that I can use this code to make this effect(view stack) to work in any direction. In the code it has user specified height and works from downside.

I need to make this component customizable, something like user is able do it in any direction.I need it urgently. I appreciate your help.

1)main Application:

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
 xmlns:sh="windowShade.*">
 <sh:Shade id="i1" height="15" headerHeight="14" 
        thisHeight="215"
        alwaysOnTop="false"  
        y="{this.height - 14}"/>
</mx:WindowedApplication>

2)Custom Comp: Shade.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" 
   width="100%" 
   height="300"
   creationComplete="init()"
   verticalScrollPolicy="off"
   verticalGap="0"
   >

 <mx:Script>
  <![CDATA[
   import mx.core.Container;
   import mx.core.Application;
   import mx.controls.Alert;
   import mx.effects.easing.*;
   import mx.binding.utils.BindingUtils;

   /**
    * Need host to adjust this object to Top
    */
   public var alwaysOnTop:Boolean = false;

   /**
    * User can custom the height of this component
    */
   public var thisHeight:int = 0;

   /**
    * User can custom the header height of this component
    */
   [Bindable] public var headerHeight:int = 14;

   /**
    * The bindable value of this height
    */
   [Bindable] public var tHeight:int = 0;

   /**
    * The bindable value of parent height
    */
   [Bindable] public var pHeight:int = 0;

   /**
    * Initialize method
    */
   private function init():void
   {

    if (this.thisHeight > 0 ) this.height = this.thisHeight;
    BindingUtils.bindProperty(this, "tHeight",this,"height" );
    BindingUtils.bindProperty(this, "pHeight",this.parent,"height" );

   }

   /**
    * Toggle button
    */
   private function toggleBtn(e:MouseEvent):void
   {

    if (this.alwaysOnTop)
    {
     var container:Container = Application.application as Container;
     container.setChildIndex(this.parent, container.numChildren - 1 ); 
    } 


    if ( vs.selectedIndex == 0 )
     panelOut.play();
    else
     panelIn.play();

   }

  ]]>
 </mx:Script>

 <mx:Move
    id="panelOut"
    target="{this}"
    yTo="{ pHeight - this.tHeight }"
    effectEnd="vs.selectedIndex = 1"
    duration="600"
    easingFunction="Back.easeOut"/>

 <mx:Move
    id="panelIn"
    target="{this}"
    yTo="{ this.pHeight - headerHeight }"
    effectEnd="vs.selectedIndex = 0"
    duration="600"
    easingFunction="Back.easeIn"/>

 <mx:VBox horizontalAlign="center" width="100%">
  <mx:ViewStack id="vs" width="100%">
   <mx:VBox horizontalAlign="center" >
    <mx:Label text="VBox 1"/>
    <mx:Image source="@Embed('/windowShade/add.png')" click="toggleBtn(event)"/>
   </mx:VBox>
   <mx:VBox horizontalAlign="center">
    <mx:Label text="2nd VBox"/>
    <mx:Image source="@Embed('/windowShade/back.png')" click="toggleBtn(event)"/>
   </mx:VBox>
  </mx:ViewStack>
 </mx:VBox>
 <mx:VBox id="drawer" height="100%" width="100%" backgroundColor="#000000">

 </mx:VBox>

</mx:VBox>