function hideElementById(idToHide) 
{
	var item = document.getElementById(idToHide);
	if(null!=item)
	{                    
		item.style.display = "none";
	}                
  return false;
}


function showElementById(idToShow, displayStyle) 
{
	var item = document.getElementById(idToShow);
	if(null==displayStyle)
	{
		displayStyle = 'block';
	}
	if(null!=item)
	{                     
		item.style.display = displayStyle;     
	}            
  return false;
}


function hideElementsByClass(classToHide) 
{
		var list = getElementsByClass(classToHide, null, null);
		if(null!=list)
		{
			for (i = 0; i < list.length; i++)
			{                      
				list[i].style.display = "none";
			} 
		} 
  	return false;
}



function showElementsByClass(classToShow, displayStyle) 
{
	var list = getElementsByClass(classToShow, null, null);
	if(null==displayStyle)
	{
		displayStyle = 'block';
	}
	if(null!=list)
	{
		for (i = 0; i < list.length; i++)
		{                      
			list[i].style.display = displayStyle;
		}      
	}            
  return false;
}



function showContentSection(sectionId, sectionLabel)
{
    hideElementsByClass('content-section');
    showElementById(sectionId, 'block');
    
    // set the menu label
    var item = document.getElementById('active-section');
           
    if(null != item)
    {
        item.innerHTML = sectionLabel;
    }
    
    /*
     * call resizeWindow() to make up for any height deltas
     * the rendered <div>
     */
    resizeWindow();
}



/**
   Searches for elements of a specified Class.  The search
   can be narrowed by specifying a node to search under
   and a tag type to search across.  Inputs node and tag
   can be null.
   
   Returns an Array of Elements 
*/
function getElementsByClass(searchClass, node, tag) 
{
	var classElements = new Array();
	if (node == null)
		node = document;
	if (tag == null)
		tag = '*';
		
	var els = node.getElementsByTagName(tag);
	var elsLen = els.length;
	var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
	
	for (i = 0, j = 0; i < elsLen; i++) 
	{
		if (pattern.test(els[i].className) ) 
		{
			classElements[j] = els[i];
			j++;
		}
	}
	return classElements;
}


/**
 * Function: resizeVertical()
 * 
 * Resizes a window in the vertical direction by stretching components
 * that are classified as "v-stretch" to fit contents.  EveryTime pages are designed in the 
 * site publisher at their minimum heights and widths.  At run time, content
 * will stretch components down (typically only the center content comonent).  This
 * function is intended to make the components in a given row across the page
 * stretch to the same size as the content component that was automatically stretched
 * with content.
 */
function resizeVertical()
{
		/*
		 * Components need to be classified from the component editor's appearance
		 * settings to have the class of "v-stretch" if the component is intended
		 * to fill the page vertically to match the height of other components in the same row
		 */
    var cList = $('div.v-stretch');
    var myPos = -1;
    var delta = 0;
    var maxDelta = 0;
    var oHeight = 0;

    for(myI = 0; myI < cList.length; myI++)
    {
    		/*
    		 * The original (intended) component height can be calculated 
    		 * by looking at the first ancestor <table> containing this component. 
    		 * This is set by the Page Layout Template. 
    		 */
    		var pTable = $(cList[myI]).parents('table').eq(0);
				oHeight = $(pTable).css('height').replace(/px/,''); 
    	  oHeight = parseInt(oHeight);
    	  
    	  
    		/*
    		 * Based on the intended component height, calculate the component's
    		 * delta by looking at the current height of the component (client height).
    		 * Keep track of the largest delta found from the set of v-stretch components
    		 * being analyzed.
    		 */
        if(oHeight > 0)
        {
        		/* 
        		 *First, re-set the parent <td> height back to the original
        		 *original height established by the Page Layout Template
        		 */
        		var component = $(cList[myI]);
            $($(component).parent('td')).height(oHeight);
            var cHeight = parseInt($(component).height());
            
            /*
             * Second, determine what the delta by comparing the actual height
             * of the current component <div> to the original height of the containing
             * <table>
             */
             delta = cHeight - oHeight;
            
						/*
						 * Keep track of the largest delta, but ignore the left nav component
						 * because it may be opened at which point the delta will push the footer
						 * down.  The current intention is for the left nav to over lap the footer
						 * in situations where it is taller then the content.
						 */
            if(delta > maxDelta && ! $(component).is('.left-navigation-component'))
            {           	
              	maxDelta = delta;
              	myPos = myI;
            }
           //alert("original: " + oHeight + "\ncurrent:" + cHeight + "\nDelta: " + delta + "\nMax Delta: " + maxDelta);           
         }
     }


		if(maxDelta > 0)
		{		
			/*
			 * Loop back through the set of v-stretch Component <div>'s
			 * and add the necessary delta to the <div>'s CSS height.  Note that
			 * this does not over write the the parent <table> height and width
			 * attributes set by the Page Layout handler.
			 */
	    for(myJ = 0; myJ < cList.length; myJ++)
	    {        
	    	  var pTable = $(cList[myJ]).parents('table').eq(0);
					oHeight = $(pTable).css('height').replace(/px/,''); 
    	  	oHeight = parseInt(oHeight);
    	  	
  		    if(myJ != myPos && oHeight > 0)
  		    {
            $($(cList[myJ]).parent('td')).css('height', oHeight + maxDelta);
  		    }
	        
	     } 
		} 
}


/**
 * Function: resizeHorizontal()
 * 
 * Iterates through <div> elements classified as "h-stretch" and 
 * calculates the new page width based on the original width of the component
 * and the actual width of the client window.  The original width of the component
 * is based on the fact that the Page Layout handler sets the width attribute of containing 
 * <table> elements.  By having that width defined and static, this function can reset
 * the CSS width of the containing elements to a scaled factor to fill the client window.
 * Because the <table> width attributes are never modified from the original, the overridden
 * CSS height can be compared and reset at will without having to do any book keeping.
 * 
 * This function works in conjunction with the current Page Layout handler in that it relies on
 * the table widths being set based on the component widths defined in Site Publisher.
 * 
 * Component Style Widths are never set to anything below their defined settings in Site Publisher.
 * This function assumes that each row in the final page will only have 1 component classifed
 * as "h-stretch".  If more then one are defined in Site Publisher, this function only bases the
 * stretch calculations off the first one it finds.
 */
function resizeHorizontal()
{
		/* 
		 * Components need to classified from the component editor's appearance
		 * settings to have the class of "h-stretch" if the component is intended
		 * to fill the page sideways
		 */
    var stretchable = $('div.h-stretch');
    var pageWidth = parseInt($(window).width());

		/*
		 * Loop through each Component <div> that has been classified as 
		 * "horizontally" stretchable.  
		 */
    for(myI = 0; myI < stretchable.length; myI++)
    {
    	  /*
    	   * If this stretchable component has any children that
    	   * are also stretchable, ignore it.  This function only
    	   * works for pages that have 1 component per page row intended 
    	   * to fill the page when the client is stretched
    	   */
    	   if($('h-stretch', stretchable[myI]).length == 0)
    	   {
	    		/*
	    		 * All parents of the stretchable component with
	    		 * a width defined
	    		 */
	    		var myParents = $(stretchable[myI]).parents('table[width]');
	    		
	    		/*
	    		 * Defined Width of the furthest ancenstor
	    		 */
	    		var count = $(myParents).length;
	    		var pageOriginal = parseInt($(myParents).eq(count-1).attr("width"));
	    		
					/*
					 * Walk the parents, set the width
					 */
					for(myJ = 0; myJ < myParents.length;myJ++)
	        {        	
						var original = parseInt($(myParents[myJ]).attr("width"));					
						var newWidth = (pageWidth - pageOriginal) + original;
						
						//alert("original width: " + original + "\nnew width:" + newWidth + " (" + pageWidth + " - " + pageOriginal + ")" );
						
						if(newWidth > original)
						{
							$(myParents[myJ]).css("width", newWidth);
						}
						else
						{
							$(myParents[myJ]).css("width", original);
						}
	        }
    	   }
    }
}


/**
 * Function: resizeWindow
 * 
 * Call the horizontal and vertical resize functions.
 * This function is intended to be called from the Onload handler
 * as well as the resize events and Page Content Menu selections
 */
function resizeWindow()
{
	resizeHorizontal();
	resizeVertical();
}


/**
 * Jquery Function: Resize Event
 * Leverage the JQuery Resize event to hook
 * the resizeWindow() function when users stretch
 * their client browswers
 */
$(window).resize(resizeWindow);



// HORIZONTAL TABLE CLASSIFICATIONS FOR TINY MCE CONTENTS: 
// Red Header, Black Sub Header, Gray/White alternating rows
// Tables must not contain images to be considered in this classification scheme
function classifyTinyMceHorizontalTables()
{
	$.each($($('.content-section .tinymce table').not($('.performance table'))), 
		function(myPos, myObj){
			if($('img',myObj).length <= 0)
			{
				$(myObj).addClass('horizontal');
		  	$('tr:odd', myObj).not($('tr:first', myObj)).addClass('odd');
		  	$('tr:even', myObj).not($('tr:first', myObj)).addClass('even');
		  	$('tr:first', myObj).addClass('header1');
		  		
		  	$.each($('tr',myObj),
					function(j,m){
						var c = $('td', m).attr('colspan') > 1;
						if(c.length > 0) {
							$(m).removeClass('header1');
							$(m).removeClass('odd');
							$(m).removeClass('even');
							$(m).addClass('header2');
						}
					}	
				);
			}
			else
			{
				$(myObj).addClass('image-display');
				$.each($('tr',myObj), function(j,m){
					 $('td:first', m).addClass('image');
					 $('td', m).not($('td:first', m)).addClass('caption');
				}	
			);
			}
		}
	);
}



// VERTICAL TABLE CLASSIFICATIONS FOR TINY MCE CONTENTS: 
// No Borders, All White, Bolded First Column
function classifyTinyMceVerticalTables()
{
	$.each($('.performance .tinymce table'), 
		function(i, n){
			$(n).addClass('vertical');
			$.each($('tr',n),
				function(j,m){
					$('td:first', m).addClass('first');
				}	
			);
		}
	);
}



// TINY MCE PARAGRAPH CLASSIFICATION
// Tag the first and last <p> of each tiny mce blob
function classifyTinyMceParagraphs()
{
	$.each(jQuery(".content-section .tinymce"), function(i, n){
		var paras = $(n).children('p');
		if(null != paras[0]) 
		{
			$(paras[0]).addClass('first');
		}
		if(paras.length - 1 >= 0 && null != paras[paras.length - 1])
		{
		  $(paras[paras.length-1]).addClass('last');
		}
		
	}); 
}



function handleLayoutOnload()
{
  classifyTinyMceParagraphs();
  classifyTinyMceVerticalTables();
  classifyTinyMceHorizontalTables();
}