/* * * * * * * * * * * * * * * * * * * * * * * * * 
 Copyright 2009 TelSim Software
 - - - - - - - - - - - - - - - - - - - - - - - - - -
 Use:
 <span class="__xc">Header 1</span><br>
 <span class="__xd">
     Insert content here.
 </span>
 <span class="__xc">Header 2</span><br>
 <span class="__xd">
     More content here in a separate container.
 </span>
 
__xc element must precede the __xd element to be applied
 * * * * * * * * * * * * * * * * * * * * * * * * */

if ( !__EXPAND_COLLAPSE_JS__ ) 
{
    //Global variable to determine whether or not this file has already been included
    var __EXPAND_COLLAPSE_JS__ = 0;

    //Incremental integer for counting the amount of Expand/Collapse elements
    var totalXC = 1;

    //Flags for setting the icon [- or +]
    var ICON_EXPAND   = 1;
    var ICON_COLLAPSE = 2;
    var ICON_NONE     = 3;

    //Determine whether or not to close other opened modules whenever a module is opened
    var CLOSE_OTHERS  = true;
}
else
{
  alert("ExpandCollapse.js is already included");
}


//BEGIN Methods for Expand/Collapse modules. Invokes specific procedures and is object-dependent
    function ApplyMouseMethod(element, mouseClass)
    {
      switch (mouseClass)
      {
        //When the user rolls over the header
        case "mouseover": element.onmouseover = function() { this.className = "xcOver"; }; break;
        
        //When the user rolls off of the header
        case "mouseout": element.onmouseout = function() { this.className = "xcOut"; };break;
        
        //When the user clicks on the header
        case "click": 
          element.onclick = function()
          {      
            //Obtain the unique integer at the end of this element's id
            var idInt = this.id.substring(this.id.length-1,this.id.length);
            
            //Temporary xc and xd
            var t_xc, t_xd;
            
            t_xc = element;
            t_xd = GetElement("__xd" + idInt);
            
            //If in expanded mode, collapse it
            if ( GetIconState(t_xc) == ICON_EXPAND )
            {
              SetIcon(t_xc, ICON_COLLAPSE);
              t_xd.style.display = "block";

              //BEGIN CLOSE_OTHERS - If the flag to close others is specified, do so
              if ( CLOSE_OTHERS )
              {
                //Scan for all occurrences of the expand/collapse modules
                for ( var i = 0; i <= totalXC; i++ )
                {
                  //Exclude the current module
                  if ( i != idInt )
                  {
                    t_xc = GetElement("__xc" + i);
                    t_xd = GetElement("__xd" + i);

                    //Only if it is in expanded mode (the collapse icon is showing)
                    if ( GetIconState(t_xc) == ICON_COLLAPSE )
                    {
                      //Collapse the data
                      SetIcon(t_xc, ICON_EXPAND);
                      t_xd.style.display = "none";
                    }
                  }
                }
              }
              //End CLOSE_OTHERS
              
            }
            //If in collapsed mode, expand it
            else if ( GetIconState(t_xc) == ICON_COLLAPSE )
            {
              SetIcon(t_xc, ICON_EXPAND);
              t_xd.style.display = "none";

            
            }
            //If neither, blank it
            else
            {
              SetIcon(element, ICON_NONE);
            }
          }
        break;
      }
    }
  
    function SetIcon(element,iconFlag)
    {
      //'element' is the header object
      //'iconFlag' is the flag that will be applied to the header object

      //Obtain the HTML data from the element
      var s = element.innerHTML; 

      //ID for the icon's HTML element tag
      var iconID = "fmtIcon";
      
      //Need to apply a fixed-width font to the icon
      var formatString = "<img id='"+iconID+"' src='images/xc-icon-" + ( iconFlag == ICON_COLLAPSE ? "c" : (iconFlag == ICON_EXPAND ? "e" : "n") ) + ".gif'> "; 

      //Deliminator used for separating the icon from the content
      var iconDelim = 'gif">'; 
      
      //Holds the HTML content of the 'element'
      var content = "";
      
      //Check to see if an icon has already been added to the header
      if ( s.indexOf(iconID) != -1 ) 
      {
        //If an icon is found, find the length of the icon by adding up the length of the strings that form it
        iconLength = Number(s.indexOf(iconDelim)) + iconDelim.length;
        
        //alert("Content: "+ s + " [" + iconLength + ", " + s.length + "]");
        
        //Then omit the icon from the content
        content = s.substring(iconLength, s.length);
      }
      //Else, just return the content as-is
      else content = s;

      //Create a new icon, depending on the 'iconFlag'
      var newIcon = formatString;

      //Finally, concatenate the new icon and content
      element.innerHTML = newIcon + content;
    }

    function GetIconState(element)
    {
      //Obtain the HTML data from the element
      var s = element.innerHTML; 

      //Check to see there is an icon attached to this element header
      
      //Return expanded state
      if ( s.indexOf("xc-icon-e") != -1 ) 
        return ICON_EXPAND;
        
      //Return collapsed state
      else if ( s.indexOf("xc-icon-c") != -1 ) 
        return ICON_COLLAPSE;
      
      //If neither, return none
      return ICON_NONE;
    }
//END Methods

//BEGIN getElementsByClassName - Retrieves all elements who use the same class name
    function getElementsByClassName(className, tag, elm)
    {
      var testClass = new RegExp("(^|\\s)" + className + "(\\s|$)");
      var tag = tag || "*";
      var elm = elm || document;
      var elements = (tag == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag);
      var returnElements = [];
      var current;
      var length = elements.length;
      for(var i=0; i<length; i++)
      {
        current = elements[i];
        if(testClass.test(current.className))
        {
          returnElements.push(current);
        }
      }
      return returnElements;
    }
//END getElementsByClassName

//BEGIN initiation of expand/collapse system
    function InitExpandCollapse()
    {
    //alert("ECJS:"+__EXPAND_COLLAPSE_JS__);
        //Exit the init function if this file has already been included
        if ( __EXPAND_COLLAPSE_JS__ ) 
        {
          //If it is already included, exit the function
          return 0;
        }
        
        //Flag this file as included
        __EXPAND_COLLAPSE_JS__ = 1;

        var xc, xd;
        var allxc = getElementsByClassName("__xc");
        var allxd = getElementsByClassName("__xd");

        //Collect all of the expand/collapse elements
        for ( var i = 0; i < allxc.length; i++ )
        {
          //Short handle to the element
          xc = allxc[i];
          xd = allxd[i];
          
          //New variable set
          xc.id = "__xc"+i;
          xd.id = "__xd"+i;
          
          //Set the icon to expand
          SetIcon(xc, ICON_EXPAND);
          
          //Apply the methods
          ApplyMouseMethod(xc, "mouseover");
          ApplyMouseMethod(xc, "mouseout");
          ApplyMouseMethod(xc, "click");

          //Hide the extra information for this module
          xd.style.display = "none";
          
          //Update the count of expand/collapse elements
          totalXC = i;
        }
        
        return 1;
    }
//END Init