function PanelManager()
{
  this.AnimationIncrement = 10;
  this.AnimationDelay = 10;

  this.Panel;
  this.PanelHeaderTitle;
  this.Icon;
  this.State = 'EXPANDED'; //[EXPANDED|COLLAPSED]
  this.StateField;
  this.Height = 0;
  this.ExpandedIcon = '';
  this.CollapsedIcon = '';
  this.ClickCallBack = null;
  this.BottomBorderID = null;

  this.Initialize = function(panel, icon, expandedIcon, collapsedIcon)
  {
    this.InitializeWithPostback(panel, icon, null, '', expandedIcon, collapsedIcon);
  }

  this.InitializeWithPostbackAndBottomBorder = function(panel, icon, stateField, state, expandedIcon, collapsedIcon, panelHeaderTitle, bottomBorderID)
  {
    if (document.getElementById(bottomBorderID) == null) { return; }
    this.BottomBorderID = bottomBorderID;
    this.InitializeWithPostback(panel, icon, stateField, state, expandedIcon, collapsedIcon, panelHeaderTitle);
  }

  this.InitializeWithPostback = function(panel, icon, stateField, state, expandedIcon, collapsedIcon, panelHeaderTitle)
  {
    if (document.getElementById(panel) == null) { return; }
    if (document.getElementById(icon) == null) { return; }
    if (document.getElementById(panelHeaderTitle) == null) { return; }    

    this.Panel = panel;
    this.Icon = icon;
    this.ExpandedIcon = expandedIcon;
    this.CollapsedIcon = collapsedIcon;
    this.StateField = stateField;
    this.PanelHeaderTitle = panelHeaderTitle;

    var obj = this;
    this.Height = document.getElementById(this.Panel).offsetHeight;
    document.getElementById(this.Panel).style.overflow = 'hidden';
    if (stateField != null)
    {
      document.getElementById(this.Icon).onclick = function() { obj.TogglePanelWithPostback() };
      document.getElementById(this.PanelHeaderTitle).onclick = function() { obj.TogglePanelWithPostback() };
      document.getElementById(this.PanelHeaderTitle).style.cursor = 'pointer';
      //We set the initial state if this control has not been loaded yet
      if (document.getElementById(this.StateField).value == "")
      {
        //This is the first call
        document.getElementById(this.StateField).value = state;
      }
      else
      {
        //This is the postback and we restore the state to what it initially was
        if (document.getElementById(this.StateField).value == "EXPANDED")
        {
          this.ExpandPanel();
        }
        else if (document.getElementById(this.StateField).value == "COLLAPSED")
        {
          this.CollapsePanel();       
        }
      }
    }
    else
    {
      document.getElementById(this.Icon).onclick = function() { obj.TogglePanel() };
      document.getElementById(this.PanelHeaderTitle).onclick = function() { obj.TogglePanel() };
      document.getElementById(this.PanelHeaderTitle).style.cursor = 'pointer';
    }
  }

  //----------------------------------------------------------------
  this.CollapsePanel = function()
  {
    document.getElementById(this.Icon).src = this.CollapsedIcon;
    document.getElementById(this.Panel).style.display = 'none';
    this.State = 'COLLAPSED';
    if (this.ClickCallBack != null)
    {
        this.ClickCallBack(this.State);
    }
    if (this.BottomBorderID != null)
    {
        document.getElementById(this.BottomBorderID).className = 'roundBorderBottomClosed';
    }
  }

  this.ExpandPanel = function()
  {
    document.getElementById(this.Icon).src = this.ExpandedIcon;
    document.getElementById(this.Panel).style.display = 'block';
    this.State = 'EXPANDED';
    if (this.ClickCallBack != null)
    {
        this.ClickCallBack(this.State);
    }
    if (this.BottomBorderID != null)
    {
        document.getElementById(this.BottomBorderID).className = 'roundBorderBottom';
    }    
  }

  this.TogglePanel = function()
  {
      if (this.State == 'EXPANDED')
      {
          this.CollapsePanel();
      }
      else if (this.State == 'COLLAPSED')
      {
          this.ExpandPanel();
      }
  }
  //----------------------------------------------------------------
  this.CollapsePanelWithPostback = function()
  {
    document.getElementById(this.Icon).src = this.CollapsedIcon;
      //document.getElementById(this.Panel).style.display = 'none';
    document.getElementById(this.StateField).value = 'COLLAPSED';
    this.State = 'COLLAPSED';
      var currentObject = this;
      $(getJQID(this.Panel)).slideUp(1000, function()
    {
          // Animation complete.
          if (currentObject.ClickCallBack != null)
          {
              currentObject.ClickCallBack(document.getElementById(currentObject.StateField).value);
    }
          if (currentObject.BottomBorderID != null)
    {
              document.getElementById(currentObject.BottomBorderID).className = 'roundBorderBottomClosed';
    }
      });
  }

  function getJQID(myid) { 
   return '#' + myid.replace(/(:|\.)/g,'\\$1');
 }
 

  this.ExpandPanelWithPostback = function()
  {
    document.getElementById(this.Icon).src = this.ExpandedIcon;
     //document.getElementById(this.Panel).style.display = 'block';
    document.getElementById(this.StateField).value = 'EXPANDED';
    this.State = 'EXPANDED';
     var currentObject = this;
     if (currentObject.BottomBorderID != null)
    {
         document.getElementById(currentObject.BottomBorderID).className = 'roundBorderBottom';
    }    
     $(getJQID(this.Panel)).slideDown(1000, function()
    {
         // Animation complete.
         if (currentObject.ClickCallBack != null)
         {
             currentObject.ClickCallBack(document.getElementById(currentObject.StateField).value);
    }
     });
  }

  this.TogglePanelWithPostback = function()
  {
      if (document.getElementById(this.StateField).value == 'EXPANDED')
      {
          this.CollapsePanelWithPostback();
      }
      else if (document.getElementById(this.StateField).value == 'COLLAPSED')
      {
          this.ExpandPanelWithPostback();
      }
  }
  //----------------------------------------------------------------  

}