$(window).load(function() {
      
	// to maintain positions for elements joined to the center image, 
	// we must watch for changes to the center element. Obviously, this
	// only applies to pages using centerImage; all others will be ignored.
	try{
		$('#centerImage').load(function(){
				/*
				* This is here in case I ever need to use it. But for now whenever
				* a dependent of the centerImage needs to perform a function (like
				* realigning), the local javascript of the page the dependent belongs
				* to will handle the call. The only requirement is that system-wide
				* variables must be available.
				*
				* -------------------------------------------------------------------------------
				* List of current system-wide variables used by centerImage dependents:
				* -------------------------------------------------------------------------------
				*
				* arr_ToCenterRightSidedElements
				*
				* -------------------------------------------------------------------------------
				* List of current system-wide functions for use by centerImage dependent hosts:
				* -------------------------------------------------------------------------------
				*
				* realignRightElementsToCenterImage()
				* realignLeftElementsToCenterImage()
				*
				*/
		});
	}catch(e){}
	
});
									
$(document).ready(function()  
{ 
	// auto-run
	$(".tablit").tablize();	
	$(".setDimensionsByChildren").setRealDimensionsByNumOfChildren();	
	$(".columnize").convertToColumns();
	$(".cellularize").divTocell();	
	$(".quantizeit").quantisize();
	$(".constrainit").constrainProportions();
	$(".hcenterit").horizontalImageCentering();
	$(".vcenterit").verticalImageCentering();
	$(".lowerNavBullet").appendBullet();
	
	//$('img.imgHcenter').live('ready', function(e){
		//$.horizontallyCenterImage(this);
	//});
	
});

//var jq = function(){
	
	var arr_ToCenterLeftSidedElements = Array();
	var arr_ToCenterRightSidedElements = Array();
//};
//var jq = new jq(); 


/*
* Tablize plugin
*/

$(function() {
		

		/*
		* Horizontally centers the image provided. This is useful when using image transitions. The
		* script for transitions zeros out the coordinates.
		*/
		$.horizontallyCenterImage = function (e) { 
	
				// e is our DOM reference
				
				// get the parent of the element (our element is an image)
				var parentElement = $(e).parent();
				
				// get parent dimensions
				var parentWidth = ( parentElement.width() )?parentElement.width() :parentElement.offsetWidth;
				// account for padding
				var thisPadLeft = ( parentElement.css('padding-left') )?parentElement.css('padding-left').replace('px','') :0;
				// get half of total width
				var halfOfParent = (parseFloat(parentWidth)+parseFloat(thisPadLeft)) /2;
				
				// remove padding
				parentElement.css('padding-left',0);
				
				// get element dimensions
				var widthOf = ( $(e).width() )?$(e).width() :$(e).offsetWidth;	
				// get half of element
				var halfOf = parseFloat( parseFloat(widthOf) / 2 );
	
				// get value
				var leftOf = (parseFloat(halfOfParent)-parseFloat(halfOf));
				
				// we have all our information, but if we are using floats, we can't apply directly to our existing elements. This
				// is because floats will coun ter our adjustment
				if( parentElement.css('float') && (parentElement.css('float')=='left' || parentElement.css('float')=='right') )
				{
					// we must wrap our element with another div, apply our adjustments to it and then replace our original element
					var divElement = $('<div>').css('padding-left', leftOf+'px');
					var thisClone = $(e).clone();
					divElement.append(thisClone);
					
					$(e).replaceWith(divElement);
				
				} else {
							
					// apply this value to the left of our image
					$(e).css('left',leftOf+'px');
					
				}				  
		};
		/*
		* Verically centers the image provided.
		*/
		$.verticallyCenterImage = function (e) { 
	
				// e is our DOM reference
				
				// get the parent of the element (our element is an image)
				var parentElement = $(e).parent();
				
				// get parent dimensions
				var parentHeight = ( parentElement.height() )?parentElement.height() :parentElement.offsetHeight;
				// account for padding
				var thisPadTop = ( parentElement.css('padding-top') )?parentElement.css('padding-top').replace('px','') :0;
				// get half of total width
				var halfOfParent = (parseFloat(parentHeight)+parseFloat(thisPadTop)) /2;
				
				// remove padding
				parentElement.css('padding-top',0);
				
				// get element dimensions
				var heightOf = ( $(e).height() )?$(e).height() :$(e).offsetHeight;	
				// get half of element
				var halfOf = parseFloat( parseFloat(heightOf) / 2 );
	
				// get value
				var topOf = (parseFloat(halfOfParent)-parseFloat(halfOf));
				
				
				// we have all our information, but if we are using floats, we can't apply directly to our existing elements. This
				// is because floats will counter our adjustment
				if( parentElement.css('float') && (parentElement.css('float')=='left' || parentElement.css('float')=='right') )
				{
					// we must wrap our element with another div, apply our adjustments to it and then replace our original element
					var divElement = $('<div>').css('padding-top', topOf+'px');
					var thisClone = $(e).clone();
					divElement.append(thisClone);
					
					$(e).replaceWith(divElement);
				
				} else {
							
					// apply this value to the left of our image
					$(e).css('top',topOf+'px');
					
				}				  
		};
		
});

(function($){ 
		
	// add global vars to the object so each function can reference
	$.fn.caste = "empty";

	/*
	* Wraps the element's children in a table that can be properly aligned.
	*
	* The main purpose of this function is to ensure an element maintains a width equal to
	* the size of its content while allowing the child elements to utilize a repeatable 
	* background that must not extend beyond the size of the content. It is precisely
	* due to the background that this function is necessary; though we can center a div
	* element with the DIV align property and relative positioning, we cannot requlate
	* the dimensions of the background in exact relation to the div element without
	* this function.
	*/
	$.fn.tablize = function () { 

		this.each(function(index) {	// "this" is our local selection
		
			// "$(this)" is our DOM reference
			
			// get known classes to determine how to position the content
			var alignment = 'center';			
			if( $(this).hasClass('ToCenter') )alignment = 'center';	
			
			// ensure host has the correct positioning
			$(this).css('position','relative');
			
			// get contents of host
			var contents = $(this).html();
			
			// remove all data from host
			$(this).empty();
			
			// create a table element
			var tableElement = $('<table>').attr('id', 'tablize'+index)
										   .attr('border', '0')
										   .attr('align', alignment)
										   .attr('cellpadding', '0')
										   .attr('cellspacing', '0');
			
			// place our extracted contents into the first (and only) row of the table
			$(tableElement).append('<tr><td>'+contents+'</td></tr>');	
				
			// add the table (with its child) to the host
			$(this).append(tableElement);
			
		});			  
	}
	/*
	* Determines the real width and height of an element according to its children and applies it to its CSS
	*/ 
	$.fn.setRealDimensionsByNumOfChildren = function () { 

		// enumerate parent
		this.each(function(index) {	
		
			var styleHeight = 0;
			var styleWidth = 0;
			
			// calcuate child divs
			$(this).children("div").each(function(index) {

				// get the height
				var childHeight = ( $(this).height() )?$(this).height():0;				
				// get the width
				var childWidth = ( $(this).width() )?$(this).width():0;
			
				// determine height by tallest child
				if(childHeight>styleHeight)styleHeight=parseFloat(childHeight);
				
				
				// account for padding
				var thisPadLeft = ( $(this).css('padding-left') )?$(this).css('padding-left').replace('px','') :0;
				var thisPadRight = ( $(this).css('padding-right') )?$(this).css('padding-right').replace('px','') :0;
				
				// compile widths
				styleWidth += parseFloat(childWidth) + parseFloat(thisPadLeft) + parseFloat(thisPadRight);
				
			})
			styleWidth += 10; // to be sure of the size, add 10 pixels for possible inaccurancies.

			// set parent width and height
			$(this).css({'width':styleWidth+'px','height':styleHeight+'px'});
//alert(styleWidth + ' : ' + styleHeight + ' : ' + $(this).attr('id'))
		});			  
	} 
	/*
	* Determines the real width and height of an element according to its children and applies it to its parent.
	* This is useful when child elements are using floats and the parent can't determine its own child's dimensions.
	*/ 
	$.fn.setRealParentDimensionsByNumOfChildren = function () { 

		// enumerate parent
		this.each(function(index) {	
		
			var thisParent = $(this).parent();
			
			var styleHeight = 0;
			var styleWidth = 0;
			
			var numOfChildren = 0
			
			// calcuate child divs
			$(this).children("div").each(function(index) {
				
				numOfChildren++;
				
				// get the height
				var childHeight = ( $(this).height() )?$(this).height():0;				
				// get the width
				var childWidth = ( $(this).width() )?$(this).width():0;
			
				// determine height by tallest child
				if(childHeight>styleHeight)styleHeight=parseFloat(childHeight);
				
				
				// account for padding
				var thisPadLeft = ( $(this).css('padding-left') )?$(this).css('padding-left').replace('px','') :0;
				var thisPadRight = ( $(this).css('padding-right') )?$(this).css('padding-right').replace('px','') :0;
				
				// compile widths
				styleWidth += parseFloat(childWidth) + parseFloat(thisPadLeft) + parseFloat(thisPadRight);
				
			})
			styleWidth += 10; // to be sure of the size, add 10 pixels for possible inaccurancies.

			// 1099 we are hard-coding a condition for the image display; this needs to 
			// be revisited
			if( $(this).attr('id')=='news' )
			{
				// 6 is the spacer amount; 1099 - must dynamcially account for this
				styleWidth -= ( (numOfChildren-1)*6); // 156
			}
			
			// set parent width and height
			$(thisParent).css({'width':styleWidth+'px','height':styleHeight+'px'});

		});			  
	} 
	/*
	* converts div to columns and distributes children evenly
	*/
	$.fn.convertToColumns = function () {
		
		// defaults
		var numOfItems = 0;
		
		// how many columns
		var numOfColumns = ( $(this).hasClass('by2') )?2 :2;
		// what type of children
		var itemType = ( $(this).hasClass('forHREF') )?"a" :"div";
		
		// when we are done, do we need to do anything else?
		//var isCellularize = ( $(this).hasClass('ToCell') )?1 :0;
		
		// begin conversion
		this.each(function(index) {	// "this" is our local selection
		
			// "$(this)" is our DOM reference
			
			// how many items do we have?			
			$(this).children(itemType).each(function() {numOfItems++;})			
			
			// how many items per column?
			var numOfItemPerColumn = (numOfItems)? numOfItems / numOfColumns :0;
			
			// enumerate items
			$(this).children(itemType).each(function(index) {

			})
			
		});
		
	};
	
	/*
	* Converts div to table with cells
	*/
	$.fn.divTocell = function () { 

		this.each(function(index) {	// "this" is our local selection
		
			// "$(this)" is our DOM reference
			
				
			// get known classes to determine how to position the content
			var alignment = 'left';			
			if( $(this).hasClass('ToCenter') )alignment = 'center';	
			

			// create a table element  
			var tableElement = $('<table>').attr('id', 'divTocell'+index)
										   .attr('border', '0')
										   .attr('width', '100%')
										   .attr('height', '100%')
										   .attr('align', alignment)
										   .attr('cellpadding', '0')
										   .attr('cellspacing', '2');
			
			// create the row and append to table
			tableElement.append('<tr align="left" valign="top"></tr>');
						
			// enumerate
			$(this).children("div").each(function(index) {

				// get the height
				var styleHeight = ( $(this).height() )?$(this).height():'';				
				// if a child has a width, use it in the td
				var styleWidth = ( $(this).width() )?$(this).width():'';
				
				// prepare number for property inclusion
				styleWidth = (styleWidth==0)?'' :' width="'+styleWidth+'"';
				styleHeight = (styleHeight==0)?'' :' height="'+styleHeight+'"';
				
				// finally, if the style is empty, remove the width from the child (or it will override our methods);
				// actually, we can't easily remove the width, so just set it to 100% as originally intended
				if(styleWidth=='')$(this).css('width','100%');
				if(styleHeight=='')$(this).css('height','100%');


				// add the columns as we enumerate. We could clone() and html() but
				// that does not retain THIS div; it will just apply the contents.
				// We also can't perform the entire step with one append because the
				// clone function creates an object that does not join to the stringed
				// td elements; we append in 2 steps
				$(tableElement).find("tr").eq(0).append('<td '+styleHeight+' '+styleWidth+'></td>');
				//$(tableElement).find("tr").eq(0).append('<td height="100%"'+styleWidth+'></td>');
				
				// append THIS to our new table cell
				$(tableElement).find("td:last").append($(this).clone());
	
			})
			
			// remove all data from host
			$(this).empty();
			
			// replace old host content with new table data
			$(this).append(tableElement);
			
			// get the real table height
			var tableHeight = $(tableElement).height();
			
			// we also must give an explicity height to the host; we do this
			// because our table will be ignored by any DIV that immediately
			// follows the table but was not included in this routine. Our
			// other divs need to be able to calculate spaceing from a real width
			$(this).css('height',parseFloat(tableHeight)+'px');
			
			
		});			  
	} 
	
	/*
	* Vertically centers all images of a certain class.
	* UPDATE: this centers any element, not just images.
	*/
	$.fn.verticalImageCentering = function () { 

		this.each(function(index) {	// "this" is our local selection
		
			// "$(this)" is our DOM reference
			
			var isExit=0;
			
			// get the parent of the element (our element is an image)
			var parentElement = $(this).parent();
			
			// are we already within a duplicate div? (this means we've already centered this
			// element by evaluating a float object and inserting another DIV to apply our
			// adjustments to
			if( $(parentElement).attr('id') == 'divElementVerticalCenter')
			{
				// This is a custom name applied by this function; 
				// we have already centered this element.
				isExit = 1;	
			}
			
			// finally, only make the adjustment if the element is not already centered				
			if(!isExit)
			{
				// account for parent padding
				var parentPadTop = ( parentElement.css('padding-top') )?parentElement.css('padding-top').replace('px','') :0;
				// get parent dimensions
				var parentHeight = ( parentElement.height() )?parentElement.height() :parentElement.offsetHeight;			
				// get half of total width
				var halfOfParent = (parseFloat(parentHeight)+parseFloat(parentPadTop)) /2;
				
				
				// get element dimensions
				var heightOf = ( $(this).height() )?$(this).height() :$(this).offsetHeight;	
				// get half of element
				var halfOf = parseFloat( parseFloat(heightOf) / 2 );
				
				// get value
				var topOf = (parseFloat(halfOfParent)-parseFloat(halfOf));
				
				
				/*
				var thisTop = $(this).position().top;
				try{
					$(this).attr('innerHTML',thisTop + ' : ' + halfOfParent);
				} catch(e){}
				*/
				
				
				// remove padding
				parentElement.css('padding-top',0);
				
				//alert($(this).html() + ' : ' + topOf)
				
				// we have all our information, but if we are using floats, we can't apply directly to our existing elements. This
				// is because floats will counter our adjustment
				if( parentElement.css('float') && (parentElement.css('float')=='left' || parentElement.css('float')=='right') )
				{
		
					// we must wrap our element with another div, apply our adjustments to it and then replace our original element
					
					// the position type can vary; typically, we use relative types, but there are times when absolute needs to be used.
					// To make the determination on whether to use relative or absolute, we simply adopt the style of the current element.
					// This means it is also important to set the position on elements that require absolute settings to work properly.
					// Relative is the default and will work in most designs.
					var divPosition = ( $(this).css('position')!='undefined' )?$(this).css('position') :'relative';
					
					var divElement = $('<div id="divElementVerticalCenter" style="position:'+divPosition+'">').css('padding-top', topOf+'px');
					var thisClone = $(this).clone();
					// remove the vertical centering class
					thisClone.removeClass('vcenterit');
					// add the element to our new container
					divElement.append(thisClone);
					
					$(this).replaceWith(divElement);
					
				} else {
							
					// apply this value to the left of our image
					$(this).css({'padding-top':topOf+'px'});
					
				}	
			}
		});
			  
	}
	/*
	* Horizontally centers all images of a certain class. This is useful when using floats since floating
	* elements cancel out coordinate adjustments.
	*/
	$.fn.horizontalImageCentering = function () { 

		this.each(function(index) {	// "this" is our local selection
		
			var isExit=0;
			
			// get the parent of the element (our element is an image)
			var parentElement = $(this).parent();
			
			// are we already within a duplicate div? (this means we've possibly already centered 
			// this element by evaluating a float object and inserting another DIV to apply our
			// adjustments to
			if( $(parentElement).attr('id') == 'divElementHorizontalCenter')
			{
				// This is a custom name applied by this function; 
				// we have already centered this element.
				isExit = 1;	
			}
			
			// finally, only make the adjustment if the element is not already centered				
			if(!isExit)
			{
				// get parent dimensions
				var parentWidth = ( parentElement.width() )?parentElement.width() :parentElement.offsetWidth;
				// account for padding
				var thisPadLeft = ( parentElement.css('padding-left') )?parentElement.css('padding-left').replace('px','') :0;
				// get half of total width
				var halfOfParent = (parseFloat(parentWidth)+parseFloat(thisPadLeft)) /2;
				
				// remove padding
				parentElement.css('padding-left',0);
				
				// get element dimensions
				var widthOf = ( $(this).width() )?$(this).width() :$(this).offsetWidth;	
				// get half of element
				var halfOf = parseFloat( parseFloat(widthOf) / 2 );
	
				// get value
				var leftOf = (parseFloat(halfOfParent)-parseFloat(halfOf));
				
				// we have all our information, but if we are using floats, we can't apply directly to our existing elements. This
				// is because floats will coun ter our adjustment
				if( parentElement.css('float') && (parentElement.css('float')=='left' || parentElement.css('float')=='right') )
				{
					// we must wrap our element with another div, apply our adjustments to it and then replace our original element
					var divElement = $('<div id="divElementHorizontalCenter">').css('padding-left', leftOf+'px');
					var thisClone = $(this).clone();
					divElement.append(thisClone);
					
					$(this).replaceWith(divElement);
				
				} else {
					
					// I've commmented out the statements only because I haven't tested them. But
					// the logic needs to be in place
							
					// if this element contains a float, use padding
					//if( $(this).css('float') && $(this).css('float')=='left' )
					//{
					//	$(this).css('padding-left',leftOf+'px');
					//} else {
					
						// apply this value to the left of our image
						$(this).css('left',leftOf+'px');
					//}
					
				}
			}
			
		});
			  
	}
	
	/*
	*
	*/
	$.fn.constrainProportions = function () { 

		this.each(function(index) {	// "this" is our local selection
		
			// "$(this)" is our DOM reference
			
			// declare vars
			var pixelPad;
			var thisPadRight;
			var thisPadLeft;
			
			// apply the parent to something we can easily reference
			var parentElement = this;
			
			// evaluate
			if( $(this).hasClass('PixelPadding') )pixelPad = 1;	
			
			// configure
			
			// do we need to account for spacing?
			if(pixelPad)
			{
				// which pads do we have?	
				thisPadRight = ( $(this).css('padding-right') )?$(this).css('padding-right').replace('px','') :0;
				thisPadLeft = ( $(this).css('padding-left') )?$(this).css('padding-left').replace('px','') :0;
				
				// clear pads (even if originally nonexistent)
				$(this).css('padding-right',0);
				$(this).css('padding-left',0);
			}
			
			// enumerate the level 1 divs
			var addToIndex = 0;
			$(this).children("div").each(function(index) {
				
				// do we need an beginning spacer?
				if( Number(thisPadLeft) )
				{
					$(parentElement).children("div").eq(index+addToIndex).before('<div style="float:left;position:relative;width:'+parseFloat(thisPadLeft)+'px">&nbsp;</div>');
					// we've complicated our index; add 1
					addToIndex++
				}
				
				// ensure the divs have the correct positioning
				$(this).css('position','relative');
				
				//apply left float to each parent div
				$(this).css('float','left');
				
				// do we need an end spacer?
				if( Number(thisPadRight) )
				{
					$(parentElement).children("div").eq(index+addToIndex).after('<div style="float:left;position:relative;width:'+parseFloat(thisPadRight)+'px">&nbsp;</div>');
					// we've complicated our index; add 1
					addToIndex++
				}
			})
			
			// append an END FLOAT
			$(this).append('<div style="float:none;clear:both">&nbsp;</div>');
			
		});
			  
	} 
	/*
	* Aligns Divs into columns without using float
	*/
	$.fn.quantisize = function () { 

		
		this.each(function(elementIndex) {	// "this" is our local selection
		
			// "$(this)" is our DOM reference
			
			//$(this).find('*').unbind();
			
			// declare vars
			var arr_child_widths = Array();
			var alignment = 'center';
			var RightColumnsAlignToCenterImageBase = 0;
			var centerImageHeight;
			var numOf = 0;
			var widthOf = 0;
			var halfOfWidth = 0;
			var centerIndex = 0;
			
			// get the parent of the element
			var hostElement = $(this);
			var parentElement = $(this).parent();
			
			// get known classes to determine how to position the content						
			if( $(this).hasClass('ToCenter') )alignment = 'center';	
			if( $(this).hasClass('RightColumnsAlignToCenterImageBase') )RightColumnsAlignToCenterImageBase = 1;	
			
			// check for known elements
			try{
				if( $("#centerImage").height() )centerImageHeight = $("#centerImage").height();
			}catch(e){}
			
			// we will rebuild our host
			/*
			* The host tells us what data we will be using and provides the current configuration.
			* It is now obsolete.
			*/
			// copy an empty host shell (but do not empty the host (we still need to enumerate))
			var shellOfHost = $(this).clone().empty();
			
			// ensure the new host has the correct positioning
			shellOfHost.css('position','relative');
			// remove the quanta class
			shellOfHost.removeClass('quantizeit');

			
			// what width are we working with? (use this as the MAX dimension of our children)
			// remember, use the original element to get the width; our shell is empty so it does us no good
			widthOf = ( $(this).width() )?$(this).width() :$(this).offsetWidth;		
			// we might also get other property values
			
			// calculate the center of our shell
			halfOfWidth = widthOf / 2;
			
			
			// create our div element, which will be used as a wrapper for each child
			var divElement = $('<div>').attr('id', 'quant'+elementIndex)
										   .css('position', 'relative')
										   .attr('align', alignment)
										   .css('margin', '0')
										   .css('padding', '0')
										   .css('width', '100%');
			
			// count how many level 1 divs we will be working with and note their widths
			////$(this).children("div || li").each(function(index) {numOf++;arr_child_widths[index]=( $(this).width() )?$(this).width() :$(this).offsetWidth;})
			$(this).children("div, li").each(function(index) {
				// in order to properly calculate sizes (in case dimensions are not set), we set each child's position to absolute
				$(this).css('position','absolute');
				
				numOf++;
				arr_child_widths[index] = Array();				
				arr_child_widths[index].width =( $(this).width() )?$(this).width() :$(this).offsetWidth;
				arr_child_widths[index].padLeft =( $(this).css('padding-left') )?$(this).css('padding-left').replace('px','') :0;
				arr_child_widths[index].padRight =( $(this).css('padding-right') )?$(this).css('padding-right').replace('px','') :0;
			
			})
			
			
			// if we are centering a div and overflowing all others, then we need to know which div we are dealing with;
			//
			// we subtract 1 to make the number comply with 0 indexes; however, we do not subtract from the
			// second condition so that we use the index precisly at the split location;
			//
			// we set this up even if we don't use it
			centerIndex = ( numOf % 2==0 )?(numOf / 2) 
										  :Math.floor(numOf / 2);
					
			
			// again, even if we do not use the center index, we need to know its half-width
			////var centerElement = $(this).children("div").eq(centerIndex);
			var centerElement = $(this).children("div, li").eq(centerIndex);
			var centerWidthOf = ( centerElement.width() )?centerElement.width() :centerElement.offsetWidth;
			var centerHalfOfWidth = centerWidthOf / 2;
			// extra properties we need to account for
			var centerPadLeft =( centerElement.css('padding-left') )?centerElement.css('padding-left').replace('px','') :0;
			var centerPadRight =( centerElement.css('padding-right') )?centerElement.css('padding-right').replace('px','') :0;

			
			// enumerate the level 1 elements of the host
			$(this).children("div, li").each(function(index) {
				
				var leftOf = 0;
				var topOf = 0;
				
				// if we have a LI, convert it to a DIV
				var doConvertToDiv = ($(this).get(0).tagName=="LI")?1 :0;
				
				// make sure the element has the correct positioning
				$(this).css('position','absolute'); // this was set previously when we evaluated the widths, but does not hurt being here.

				// get dimensions of element
				var thisWidth = ( $(this).width() )?$(this).width() :$(this).offsetWidth;
				var thisHeight = ( $(this).height() )?$(this).height() :$(this).offsetHeight;
				// we look at user adjustments, not actual window placement (use position instead of offset)
				////var thisTop = ( $(this).position().top )?$(this).position().top :0; // this is not always correct
				// get any padding			
				var thisLeft =( $(this).css('left') && $(this).css('left')!=='auto' )?$(this).css('left').replace('px','') :0;
				var thisPadTop = ( $(this).css('padding-top') )?$(this).css('padding-top').replace('px','') :0;
				var thisPadRight = ( $(this).css('padding-right') )?$(this).css('padding-right').replace('px','') :0;
				var thisPadLeft = ( $(this).css('padding-left') )?$(this).css('padding-left').replace('px','') :0;
				var thisPadBottom = ( $(this).css('padding-bottom') )?$(this).css('padding-bottom').replace('px','') :0;
				
				// now remove any padding
				$(this).css('padding-top',0);
				$(this).css('padding-right',0);
				$(this).css('padding-left',0);
				$(this).css('padding-bottom',0);
				
				// remove X coordinates
				$(this).css('left',0);
				
				// from this point on we use a clone in case we need to convert the element
				//var thisClone = $(this).clone();
				
				// do we need to convert this element to a div?
				/*if(doConvertToDiv==1)
				{
					//function makeNewElementFromElement( tag, elem ) { 
 
						var newElem = document.createElement('DIV'), 
							i, prop, 
							attr = $(this).attributes, 
							attrLen = attr.length; 
					 
						// Copy children  
						$(this) = $(this).cloneNode(true); 
						while ($(this).firstChild) { 
							newElem.appendChild($(this).firstChild); 
						} 
					 
						// Copy DOM properties 
						for (i in $(this)) { 
							try { 
								prop = $(this)[i]; 
								if (prop && i !== 'outerHTML' && (typeof prop === 'string' || typeof prop === 'number')) { 
									newElem[i] = $(this)[i]; 
								} 
							} catch(e) { // some props throw getter errors  } 
						} 
					 
						// Copy attributes 
						for (i = 0; i < attrLen; i++) { 
							newElem.setAttribute(attr[i].nodeName, attr[i].nodeValue); 
						} 
					 
						// Copy inline CSS 
						newElem.style.cssText = $(this).style.cssText; 
					 
						//return newElem; 
					//} 
	
					
					$(this).replaceWith(newElem);
				}*/
				
				// we want all elements to begin at the top, but we need to account for existing value;
				// let other conditions adjust or override later, but this is the default if nothing else happens
				var topTotal = 0 + parseFloat(thisPadTop); // parseFloat(thisTop) + 
				$(this).css('top',topTotal+'px');	
				
				
				// if we are centering a div and overflowing all others, then we need
				// to know when we have found the center div				
				if(alignment=='center')
				{
					if(index==centerIndex)
					{
						// this must have a relative position or the next section of divs will not see it
						$(this).css('position','relative');
						
						if(thisLeft)
						{
							leftOf = Number(thisLeft); // always add so the adjustment is based on user settings
							// new position
							$(this).css('left',leftOf+'px');
						}
						
					} else {
						
						// if this element is to the left of our center div, then subtract width
						if(index < Math.floor(centerIndex))
						{
							
							// find our left value
							// centerPadLeft accounts for the center element's property
							leftOf = halfOfWidth - centerHalfOfWidth - thisWidth - parseFloat(thisPadRight) - parseFloat(centerPadLeft); 
							// account for user offsets
							if(thisLeft)leftOf += Number(thisLeft); // always add so the adjustment is based on user settings
							
							// we must also account for any elements between this one and the center item
							for(indexes in arr_child_widths)
							{							
								if(indexes>index && indexes<centerIndex)
								{
									leftOf -= ( parseFloat(arr_child_widths[indexes].width) + parseFloat(arr_child_widths[indexes].padRight) + parseFloat(arr_child_widths[indexes].padLeft) );	
								}
							}
							
							/*
							* The left div that needs to align with the image must have its width readjusted. This is
							* because we have removed its padding so that nothing is in the way of our positioning; however,
							* without the pad, the realignment function that seeks to maintain dynamic positioning will always
							* miscalculate. To compensate, we add any padding to the actual element so that its width is
							* exactly what we expect if we retained the padding.
							*/
							//var thisWidthOf = thisWidth + parseFloat(thisPadRight) + parseFloat(thisPadLeft);
							//$(this).width(thisWidthOf);
									
							// remember our elements so they can be recalled outside of these routines
							// calculate actual distance from center div (referenced by other routines)
							var actualRightDistance = parseFloat((halfOfWidth - centerHalfOfWidth)) - parseFloat(leftOf + thisWidth); 
							
							// remember all our left-sided elements and their original positions in case we need to reposition (due to dynamics);
							// also, keep in mind that this is only for left-sided elements that need to monitor the centerImage. Do not
							// retain references for any other item for this array				
							arr_ToCenterLeftSidedElements.push({element:$(this),Xdistance:actualRightDistance,parent:hostElement});
							
	
						// if this element is to the right of our center div, then add width
						} else {
						
							// calculate LEFT first in case we need to retain a reference
							/*
							* The right image that needs to align with the image left side must have its width readjusted. This is
							* because we have removed its padding so that nothing is in the way of our positioning; however,
							* without the pad, the realignment function that seeks to maintain dynamic positioning will always
							* miscalculate. To compensate, we add any padding to the actual element so that its width is
							* exactly what we expect if we retained the padding (remember, just add padding, nothing else.
							*/
							////var thisWidthOf = thisWidth + parseFloat(thisPadLeft) + parseFloat(thisPadRight);
							////$(this).width(thisWidthOf);
									
									
							// find our left value
							// remember, we don't recalculate even though we added the pad back to the element in the
							// last step. That has no affect on this initial LEFT coordinate.
							// centerPadRight accounts for the center element's property
							leftOf = halfOfWidth + centerHalfOfWidth + parseFloat(thisPadLeft) + parseFloat(centerPadRight); 
							// account for user offsets
							if(thisLeft)leftOf += Number(thisLeft); // always add so the adjustment is based on user settings
							
							// we must also account for any elements between this one and the center item
							for(indexes in arr_child_widths)
							{
								if(indexes<index && indexes>centerIndex)
								{
									leftOf += ( parseFloat(arr_child_widths[indexes].width) + parseFloat(arr_child_widths[indexes].padRight) + parseFloat(arr_child_widths[indexes].padLeft) );	
								}
							}
						
							// we are dealing with right columns; check specific properties
							if(RightColumnsAlignToCenterImageBase)
							{
								// we want to make our right columns align with the base of the center image (if it exists)
								if( centerImageHeight )
								{
									/*
									* The right image that needs to align with the image base must have its height readjusted. This is
									* because we have removed its padding so that nothing is in the way of our positioning; however,
									* without the pad, the realignment function that seeks to maintain dynamic positioning will always
									* miscalculate. To compensate, we add any padding to the actual element so that its height is
									* exactly what we expect if we retained the padding.
									*/
									var thisHeightOf = thisHeight + parseFloat(thisPadBottom)
									$(this).height(thisHeightOf)
									
									// adjust the top of the current div to match the image height minus its own height;
									// remember, we don't recalculate even though we added the pad back to the element in the
									// last step. That has no affect on this initial TOP coordinate.
									topOf = centerImageHeight - thisHeightOf - parseFloat(thisPadBottom);									
									$(this).css('top',topOf+'px');
									
									// remember our elements so they can be recalled outside of these routines
									// calculate actual distance from center div (referenced by other routines)
									var actualLeftDistance = leftOf - parseFloat((halfOfWidth + centerHalfOfWidth)); //(halfOfWidth + centerHalfOfWidth); 
									
									// remember all our right-sided elements and their original positions in case we need to reposition (due to dynamics);
									// also, keep in mind that this is only for right-sided elements that need to monitor the centerImage. Do not
									// retain references for any other item for this array				
									arr_ToCenterRightSidedElements.push({element:$(this),Xdistance:actualLeftDistance,parent:hostElement});
									
								}
							}
							
						}			
						// new position
						$(this).css('left',leftOf+'px');	
						
					}
					
				}
				
				// remove all existing events for the element;
				// when it is appended, the LIVE events will reinitialize;
				// if we leave the current events, they will be doubled.
				////$(this).unbind();
				
				// wrap the element and its contents in our div
				$(divElement).append(this);	
			
			
			});
			// append our div element to the new host
			$(shellOfHost).append(divElement);
			
			// remove all events - might just use *
			////$(shellOfHost).find('div, img').unbind();
			
			// insert our new host beneath the old host 
			$(parentElement).children("div, li").eq(elementIndex).after(shellOfHost);
			
			// remove the old host so that only our new host appears in the code
			$(this).remove();
	
			
		});
			  
	}
	$.fn.appendBullet = function() {
	
		/*
		* We need to create a package that is compiled and then added to the page
		* after the loop completes. This is to account for any accidental spacing
		* between the elements.
		*/
		var arr_elements = Array();
		var currentParent;
		
		// create reusable div
		var divElement = $('<div>').css('position', 'relative');

		$('.lowerNavBullet').each(function(index) {
			
			var equalDistance;
			
			/*// we need an exact copy
			var thisClone = $(this).clone();
			
			// get the parent
			var parentElement = $(this).parent();			
			// store unique | this is not an efficient way to do this since it relies on an existing ID
			if(parentElement.attr('id')!=currentParent)
			{
				currentParent = parentElement.attr('id');
				arr_elements[currentParent] = Array();
				arr_elements[currentParent].parent = parentElement;
				arr_elements[currentParent].div = divElement;	
			}*/
			
			// we only account for right-padding because we are appending an image
			////var thisPadRight = ( thisClone.css('padding-right') )?thisClone.css('padding-right').replace('px','') :0;
			var thisPadRight = ( $(this).css('padding-right') )?$(this).css('padding-right').replace('px','') :0;
			
			// remove padding
			////thisClone.css('padding-right',0);
			$(this).css('padding-right',0);
			
			/*
			* We must account for padding
			*/
			// if the pad is not set, then add 2 pixels for separation
			if(!Number(thisPadRight))
			{
				equalDistance = 2;	

			} else {
				
				// we have the right pad
				equalDistance = parseFloat( Number(thisPadRight) / 2 );
				
			}

			// create our image
			var imgElement = $('<img>').attr('src', 'graphics/lowerNavBullet.gif')
									   .css('position', 'relative')
									   .css('top', '-3px')
									   .css('padding-left', equalDistance+'px')
									   .css('padding-right', equalDistance+'px')
									   .attr('width', '2')
									   .attr('height', '2');
			
			// add the bullet
			////thisClone.append(imgElement);
			$(this).append(imgElement);
			
			// add to the package
			////arr_elements[currentParent].div.append(thisClone);
							
			/*$(this).append('<img src="graphics/lowerNavBullet.gif" width="2" height="2" style="position:relative;top:-3px;padding-left:'+equalDistance+'px;padding-right:'+equalDistance+'px" />');*/
			/**/
		  });
		  
		  // recreate elements
		  /*for(var parent in arr_elements) 
		  { 
		
			  // empty the original parent
			  arr_elements[parent].parent.empty();
	
			  // append to the empty div
			  arr_elements[parent].parent.append(arr_elements[parent].div);
		  }*/
		  
		
		return false;
	}
	
})(jQuery);

$(function()
{

	/*
	* Fades out the right-sided elements. This is often useful as a stand-alone
	* function.
	*/
	$.fadeRightOfCenterElements = function(alpha) {
		
		if(arr_ToCenterRightSidedElements)
		{

			// we need to adjust every element in the chain
			for(var i=0;i<arr_ToCenterRightSidedElements.length;i++)
			{
				// get elements
				var element = arr_ToCenterRightSidedElements[i].element;
	
				// we fade the element slightly to prevent the browser from leaving an artifact trail
				$(element).stop().animate({opacity:alpha},{duration: 250,complete: function(){}})									
			};
		}		
	};
	/*
	* Fades out the left-sided elements. This is often useful as a stand-alone
	* function.
	*/
	$.fadeLeftOfCenterElements = function(alpha) {
		
		if(arr_ToCenterLeftSidedElements)
		{

			// we need to adjust every element in the chain
			for(var i=0;i<arr_ToCenterLeftSidedElements.length;i++)
			{
				// get elements
				var element = arr_ToCenterLeftSidedElements[i].element;
	
				// we fade the element slightly to prevent the browser from leaving an artifact trail
				$(element).stop().animate({opacity:alpha},{complete: function(){}})									
			};
		}		
	};
	
	/*
	* Realigns a centerImage dependent with the centerImage. This is useful for dynamic
	* pages in which the centerImage can change size depending on its current source.
	*
	* This function is available to any host that uses centerImage dependents.
	*/
	$.realignRightElementsToCenterImage = function(height,width,mode,options) {
		
		// let's check our options first if they exist
		if(options)
		{
			var isOpacityDelayed = (options.opacityDelayed)?1 :0;
			var isAnimateOptionOnly = (options.animateOptionOnly)?1 :0;
		}

		var centerImageHeight = height;	
		var centerImageWidth = width;
		// as a precaution, if we aren't provided with a height, make sure we have a center image	
		if(!centerImageHeight && centerImageWidth)
		{
			try{
				if( $("#centerImage").height() )centerImageHeight = $("#centerImage").height();
			}catch(e){}
			try{
				if( $("#centerImage").width() )centerImageWidth = $("#centerImage").width();
			}catch(e){}
		}

		if(centerImageHeight && centerImageWidth && arr_ToCenterRightSidedElements)
		{
			// what is half of our center image width
			var centerHalfOfWidth = centerImageWidth / 2;
			
			// we need to adjust every element in the chain
			for(var i=0;i<arr_ToCenterRightSidedElements.length;i++)
			{
				// get elements
				var element = arr_ToCenterRightSidedElements[i].element;
				var XDistance = arr_ToCenterRightSidedElements[i].Xdistance;
				var parentElement = arr_ToCenterRightSidedElements[i].parent;
				
				
				// calculate height				
				var thisHeight = ( $(element).height() )?$(element).height() :$(element).offsetHeight;
				
				// calculate width
				// we need to recalculate our center position in case the browser was resized
				var parentWidthOf = ( $(parentElement).width() )?$(parentElement).width() :$(parentElement).offsetWidth;		
				var parentHalfOfWidth = parentWidthOf / 2;
				
				
				// get current settings
				var topOfCurrent = $(element).position().top;			
				
				// adjust the top of the current div to match the image height minus its own height
				var topOf = centerImageHeight - thisHeight;	
				// adjust the left of the current div to match its original distance from the center image
				var leftOf = parentHalfOfWidth +  centerHalfOfWidth + XDistance;
				
				// how do we make the change? 
				if(mode=='animate')
				{
	
					// do we only want to animate the opacity?
					if(isAnimateOptionOnly)
					{
						// move the element without animation
						$(element).css({'top':topOf+'px','left':leftOf+'px'});
						// animiate the opacity
						$(element).animate({opacity:'1'},{complete: function() {} });	
						
					} else {
					
						// since we know our item is hidden, if the isOpacityDelayed is set, then just
						// set the opacity to 0 to keep it hidden
						var alpha = (isOpacityDelayed)?0 :.9;
					
						// we fade the element slightly to prevent the browser from leaving an artifact trail
						$(element).stop().animate({opacity:alpha,top:topOf+'px',left:leftOf+'px'},{complete: function(){
							$(this).animate({opacity:'1'},{complete: function() {} });
						}})		
							
					}
					
				} else {	
					$(element).css({'top':topOf+'px','left':leftOf+'px'});						
				}
			};
		}
	};
	$.realignLeftElementsToCenterImage = function(height,width,mode,adjustForHeight) {
		
		var centerImageHeight = height;	
		var centerImageWidth = width;
		// as a precaution, if we aren't provided with a height, make sure we have a center image	
		if(!centerImageHeight && centerImageWidth)
		{
			try{
				if( $("#centerImage").height() )centerImageHeight = $("#centerImage").height();
			}catch(e){}
			try{
				if( $("#centerImage").width() )centerImageWidth = $("#centerImage").width();
			}catch(e){}
		}

		if(centerImageHeight && centerImageWidth && arr_ToCenterLeftSidedElements)
		{
			// what is half of our center image width
			var centerHalfOfWidth = centerImageWidth / 2;
			
			// we need to adjust every element in the chain
			for(var i=0;i<arr_ToCenterLeftSidedElements.length;i++)
			{
				// get elements
				var element = arr_ToCenterLeftSidedElements[i].element;
				var XDistance = arr_ToCenterLeftSidedElements[i].Xdistance;
				var parentElement = arr_ToCenterLeftSidedElements[i].parent;
				
				
				// calculate dimensions
				var thisWidth = ( $(element).width() )?$(element).width() :$(element).offsetWidth;				
				var thisHeight = ( $(element).height() )?$(element).height() :$(element).offsetHeight;
				
				// calculate width
				// we need to recalculate our center position in case the browser was resized
				var parentWidthOf = ( $(parentElement).width() )?$(parentElement).width() :$(parentElement).offsetWidth;		
				var parentHalfOfWidth = parentWidthOf / 2;
				
				
				// get current settings
				var topOfCurrent = $(element).position().top;			
				
				// adjust the top of the current div to match the image height minus its own height
				var topOf = centerImageHeight - thisHeight;	
				// adjust the left of the current div to match its original distance from the center image
				var leftOf = parseFloat((parentHalfOfWidth - centerHalfOfWidth)) - parseFloat(thisWidth + XDistance); 
				
				// how do we make the change? 
				if(mode=='animate')
				{
					// we fade the element slightly to prevent the browser from leaving an artifact trail
					if(adjustForHeight) {
					
						$(element).stop().animate({opacity:'.9',top:topOf+'px',left:leftOf+'px'},{complete: function(){
							$(this).animate({opacity:'1'},{complete: function() {} });
						}})		
					} else {
						$(element).stop().animate({opacity:'.9',left:leftOf+'px'},{complete: function(){
							$(this).animate({opacity:'1'},{complete: function() {} });
						}})		
					}
							
				} else {	
					if(adjustForHeight)
						$(element).css({'top':topOf+'px','left':leftOf+'px'});
					else
						$(element).css({'left':leftOf+'px'});						
				}
			};
		}
	};
	
	
});