﻿////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// JScript File encapsulates the functionality for Collapsible Lists
// It uses the functionality in jQuery library to expand/collapse a list of items that are in a set of div elements
// NOTE: the div elements need to be build based on a set of rules (see documentation for details)
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
$(document).ready(function()
{	
	// Process first the multiple web parts scenario
	BuildListFromMultipleParts();
	
	///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
	// Name        : BuildListFromMultipleParts
	// Description : Builds the collapsible list from a set of hidden input field values in the parent table container	
	///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
	function BuildListFromMultipleParts()
	{		
		var aContent = [];		// Array storing the hidden input elements inside container
		var content = null;		// Stores the div content element (unique to the current container element)
		var temp = "";			// Temp var for processing - stores the values in each hidden input element
				
		aContent = $(document).find("div .hidden");
		
		// Find "div" tag with class "content" - for multiple parts scenario we should have only one "div" content tag in current container
		content = $(document).find("div .content").get(0);
				
		// Write the values to this div tag
		if (content != null)
		{
			if (aContent.length > 0)
			{
				for (var i=0; i<aContent.length; i++)
				{
					temp += aContent[i].innerHTML + "<br />";
				}
				
				content.innerHTML = temp;
			}
		}		
	}
	
	// Make all subheaders clickable
	$("div.subheader")
	.click(function(event)
	{
	    $(this).parents("div.header").click();
	});
		
	// Select all "header" items that have "content" children
	$("div.header:has(div.content)")
    .click(function(event) /* Apply to matching elements an onclick event handler */
    {
        if (this == event.target)
        {			
            // If children are hidden we show them, otherwise we hide them and we change the parent item style to show
            if ($(this).children().is(":hidden"))
            {				
				// Implement "accordion" behavior where is required
				if ($(this).parents("table").attr("accordion") == "true")
				{					
					// Find parent of current "header" item clicked
					var parent = $(this).get(0).parentNode;
					   
					// For all children of the current parent: if child is collapsible item, then collapse
					if (parent.nodeType == 1)
					{
						if (parent.childNodes.length > 0)
						{
							var children = parent.childNodes;
							
							for(var i = 0; i < children.length; i++)
							{
								if ($(children[i]).is(".header"))
								{
									//$(children[i]).css("background-image", "url(/_layouts/images/plus.gif)").children().hide("slow");
									
									$(children[i]).css("background-image", "url(/_layouts/images/plus.gif)");
									
									SetHeaderChildren($(children[i]).children());
								}
							}
						}				
					}		
				}		
				
                $(this).css("background-image", "url(/_layouts/images/minus.gif)").children().show();
            }
            else
            {
                //$(this).css("background-image", "url(/_layouts/images/plus.gif)").children().hide("slow");                
                $(this).css("background-image", "url(/_layouts/images/plus.gif)");
                
                SetHeaderChildren($(this).children());
            }
        }
        //return false; // We prevent bubbling of event up the chain
    })
    .css("cursor","pointer") /* Apply mouse cursor shape to the active pointer */
    .click(); /* Invoke Click handler */
    
    /* For the leaf items, set the CSS properties (i.e. no hand cursor and no background image) */
    $("div.header:not(:has(div.content))").css({cursor: "default", "background-image":"none"});
   
    ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
	// Name        : SetHeaderChildren
	// Description : Sets all the children of the Header div tag
	// Parameters  : 
	//				children = the children elements that belong to the current header element
	///////////////////////////////////////////////////////////////////////////////////////////////////////////////////   function SetHeaderChildren(children)
	function SetHeaderChildren(children)
    {
   		if(children == null) { return false;}
   		
		for (var i=0; i<children.length; i++)
		{
			if ($(children[i]).is(".subheader"))
			{
				$(children[i]).show();
			}
			else
			{
				$(children[i]).hide();
			}
		}
   }
   
   /*
   //*******************************************************************************
   //**** Important: functionality below has been moved to "ExpandCollapse.js" *****
   //*******************************************************************************
   // Event handler for "Expand All" span element
   $("div span.toggle-list:first-child").click(function()
   {		
		// If we find the custom attribute "singleexpand"
		if ($(this).parents("table").attr("singleexpand") == "true")
		{			
			// We apply script on table
			$(this).parents("table").find("div.header:has(div.content)").css("background-image", "url(/_layouts/images/minus.gif)").children().show("slow");			
		}
		else
		{
			// We apply script on all page
			$("div.header:has(div.content)").css("background-image", "url(/_layouts/images/minus.gif)").children().show("slow"); 
		}	
   });   
  
   // Event handler for "Collapse All" span element
   $("div span.toggle-list:last-child").click(function()
   {
		// If we find the custom attribute "singleexpand"
		if ($(this).parents("table").attr("singleexpand") == "true")
		{			
			// We apply script on table			
			$(this).parents("table").find("div.header:has(div.content)").css("background-image", "url(/_layouts/images/plus.gif)").children().hide("slow");
		}
		else
		{
			// We apply script on all page
			$("div.header:has(div.content)").css("background-image", "url(/_layouts/images/plus.gif)").children().hide("slow"); 
		}
   });   
   */
   
   
});



