/*constructor -- start going through all images and stack them*/
		function FadingHeader()
		{
		
				
				/*initialize public member methods*/
				this.stopImageRotate = stopImageRotate;
				this.imageRotate = imageRotate;
				this.doImageRotate = doImageRotate;
				
				imageCount = 5;
				this.imageIndex = 1;
				
	
			
				var includePath = "/images/header/";
				
				

			
		}

		
		function hide_id(this_id)
		{
			
			
			obj = document.getElementById(this_id);
			if(obj)
			{
				obj.style.display = "none";
			}
		}
		
		function hide_obj(obj)
		{
			obj.style.display = "none";
		}
		
		function hide_btns()
		{
			nojs_btns = document.getElementsByName("nojs_btn");

			var headerBox = document.getElementById("headerbox");
			for(var x = 0; x <= nojs_btns.length; x++)
			{
		
				headerBox.removeChild(nojs_btns[x]);
			}
			
		}
		

		
		function doImageRotate()
		{
			if(5 != "0")
			{
				/*display the first image*/
				imageRotate();
				
			
				
				/*now, fly in the text panes*/
				fi = new FlyIn("header-logo", "<a href = '/'><img src = '/images/headertitle.gif' border = 0></a>");
				new Effect.SlideDown(fi.domPane.id, {duration:1.0, delay:2.0});
				
	
				fiEmail = new FlyIn("header-caption-bottom", "<a href = '/page/free-quote' alt = 'info at entitycom dot com' border = 0 /><img src = /images/hie.gif /></a>");
				new Effect.Appear(fiEmail.domPane.id, {duration:1.0, delay:5.7, from:0.0, to:0.74});
				
				fiPhone = new FlyIn("header-caption-top", "<img src = '/images/hip.gif' alt = '(866) 456-5800' />");
				new Effect.SlideDown(fiPhone.domPane.id, {duration:1.0, delay:6.4, scaleFrom:0, scaleTo:100.0});
				
				/*in this version, there is a custom welcome text in the header DIV, which will be hidden
				after a few secs to make room for the fading image*/
				new Effect.Fade("headerwelcome", {duration:1.0, delay:3});
				
				btn = new HeaderButton("headerButton", "Home", "/home/", 0);
				btn.loadButton();
				
				btn = new HeaderButton("headerButton", "About", "/page/about/", 1);
				btn.loadButton();
				
				btn = new HeaderButton("headerButton", "Services", "/category/services/", 2);
				btn.loadButton();
				
				/*btn = new HeaderButton("headerButton", "Portfolio", "/category/portfolio/", 3);
				btn.loadButton();*/
				
				btn = new HeaderButton("headerButton", "Contact", "/category/contact/", 4);
				btn.loadButton();
				
				
				/*display the next image in the sequence*/
				this.fadeInterval = setInterval("this.imageRotate()", 10000);
				
			}
		}
		
	
		
		
		/*stops the slideshow from advancing further*/
		function stopImageRotate()
		{
			clearInterval(this.fadeInterval);
		}
		
		function writeDebug(debugString)
		{
			
			/*document.getElementById("debugField").innerHTML = document.getElementById("debugField").innerHTML + "<br><br>" + debugString;*/

		}
		
		
		/*
		 * The imageRotate function does all the work: it fades the current header image to the next image in the sequence by fading out the top image
		 * and immediately fading in the bottom image. It then makes the bottom image the top image and preloads the next image in the sequence as
		 * the new bottom image.
		 * Due to the design of the headerImage object, we don't have to know how many images we have, or what they are called. 
		 * headerImage uses recursion to provide access to the next image in line.
		 */
		function imageRotate()
		{
			
			/*alert(this.previousId);*/
			if((previousTop = document.getElementById(this.previousTopId)) && (previousBottom = document.getElementById(this.previousBottomId)) && (headerBox = document.getElementById("headerbox")))
			{
					writeDebug("removing " + this.previousTopId);
					headerBox.removeChild(previousTop);
					
					writeDebug("removing " + this.previousBottomId);
					headerBox.removeChild(previousBottom);
				
			}
				
				
			
			/*writeDebug("-----------starting imageRotate------------");*/
			/*first, make the image that is currently on top (imageIndex) fade out and
			reveal the image underneath*/
			if(this.topImage) /*only do this if we already have a top image from a previous run*/
			{

				this.topImage.hideImage();
				writeDebug("imageRotate, fading out topImage: " + (this.topImage.domId));
				
				/*immediately after the fade effect starts, show the bottom image underneath the current one*/	
				this.bottomImage.showImage();
				writeDebug("imageRotate, fading in bottomImage: " + (this.bottomImage.domId));
				
				this.previousTopId = this.topImage.domId;
				this.previousBottomId = this.bottomImage.domId;
				
				this.topImage = this.bottomImage;
				writeDebug("imageRotate, reassigning bottomImage to topImage: topImage is now " + this.topImage.domId);
				
				
				this.bottomImage = this.topImage.getNextImage();
				writeDebug("imageRotate, reassigning " + this.bottomImage.domId + " to bottomImage");
				

				
				/*load the two new images*/
				this.bottomImage.loadImage();
				writeDebug("loading bottomImage");
				
				/*set 				zindex for bottomImage
				document.getElementById(this.bottomImage.domId).style.zindex = -10;*/
				writeDebug("set zindex for bottomImage to 0");
				
				this.topImage.loadImage();
				/*writeDebug("loading topImage");
				document.getElementById(this.topImage.domId).style.zindex = -10;*/
				writeDebug("set zindex for topImage to 1");
				
			}
			else /*this means we are just starting*/
			{
				
			
				/*initially, we want to display the first image in the sequence*/		
				this.topImage = new HeaderImage(1); /*load the first image (1)*/
				this.bottomImage = topImage.getNextImage(); /*load the second image*/
				
				/*load the two new images*/
				this.bottomImage.loadImage();
				this.topImage.loadImage();
				Element.hide(this.topImage.domId);
				
				this.topImage.showImage(); /*...and then fade in the top image for the first time*/
				
			}
			

	
		}
		


		
		/*----------------------------------------------------------------------------------*/
		
	
	/*this class handles basic image operations, such as show/hide, load, etc.*/
	function HeaderImage(imageIndex)
	{
		
		/*set the instance variables that define the image's index in the sequence of
		images that are to be shown, and load the image into the document (hidden)*/
		this.imageIndex = imageIndex;
		this.domId = "stackedImage_" + this.imageIndex;

		
		/*define the member methods*/
		this.getNextImage = getNextImage;
		this.showImage = showImage;
		this.hideImage = hideImage;
		this.loadImage = loadImage;
		this.getPreviousImage = getPreviousImage;
		
		/*first, initialize the viewport:*/
		this.headerBox = document.getElementById("headerbox");
		this.headerBox.className = 'viewport';

	}
	

		/*pre-loads this image but keeps it hidden from view*/
		function loadImage()
		{
			/*first, create and automatically preload the image*/
			
			/*writeDebug("imageIndex: " + this.imageIndex);*/
			/*writeDebug("filecount: 5");*/
			thisImage = document.createElement("img");
			thisImage.setAttribute("src", ("/images/header/" + this.imageIndex + ".jpg"));
			thisImage.id = (this.domId);
			thisImage.className = "header-image";
			thisImage.style.width = 780 + "px";
			thisImage.style.height = 200 + "px";
			thisImage.style.opacity = "0";
			thisImage.style.filter = "alpha(opacity=0)";
			thisImage.setAttribute("alt", "Header image for Entity Communications - Web Development | IT Services");
			thisImage.setAttribute("onerror", "this.src='/images/header/1.jpg'");
			/*thisImage.style.zindex = this.imageIndex;*/
			
			
			
			
			/*then, append the image to the viewport box, as defined in the constructor*/
			this.headerBox.appendChild(thisImage);
			
			/*now, grab the handler for the DOM element reference for this image*/
			this.domImage = document.getElementById("stackedImage_" + this.imageIndex);

	
		}
		
		/*shows image with fade effect*/
		function showImage()
		{
			
			new Effect.Appear(this.domId, {duration:3});
				/*writeDebug("showImage, appearing " + this.domId);*/
		}
		
		/*hides image with fade effect*/
		function hideImage()
		{
			new Effect.Fade(this.domId, {duration:3});
				/*writeDebug("hideImage, fading " + this.domId);*/
			var oldImage = document.getElementById(this.domId);
			
		}

		
		/*returns the next HeaderImage in sequence*/
		function getNextImage()
		{
			/*increment index by 1 to get the next image*/
			nextIndex = this.imageIndex + 1;
			/*now, check if we are past the last image, and loop around if that is the case*/
			if(nextIndex > 5)
			{
				nextIndex = 1;
				/*writeDebug("getNextImage: resetting file counter to 1");*/
			}
			
			/*then, instantiate a new instance of the HeaderImage object for the next image
			and return it*/
			rhi = new HeaderImage(nextIndex);
			return rhi;
			
		}
		
		/*returns the previous HeaderImage in sequence*/
		function getPreviousImage()
		{
			/*decrement index by 1 to get the previous image*/
			previousIndex = imageIndex - 1;
			/*check if we are past the first image in the series and loop around if that is the case*/
			if(previousIndex < 1)
			{
				previousIndex = 5;
			}
			
			/*now, instantiate a new instance of the HeaderImage object and return it*/
			objPreviousImage = new HeaderImage(previousIndex);
			return objPreviousImage;
		}
		
		
		
		
/*---------------------------begin fly-in class-------------------------*/


	/*the FlyIn class creates a child object underneath the viewport for the header, which consists of a half-opaque, alpha-blended pane which sits on top of the image.
	 * it is going to 'fly' into view as the rest of the page is loading, and it can contain text or images
	 */
	function FlyIn(divClass, contentHTML)
	{
		this.divClass = divClass;
		this.contentHTML = contentHTML;
		
		/*initialize public member functions for this class*/
		this.loadFlyIn = loadFlyIn;
		this.loadFlyInContent = loadFlyInContent;
	
		
		this.loadFlyIn();
		this.loadFlyInContent(contentHTML);



	}
	

		function loadFlyIn()
		{
		
			/*first, create an object for the viewport div, which is going to be the parent node for the overlay*/
			this.headerBox = document.getElementById("headerbox");
			
			/*now, create a div that contains the see-through pane*/
			this.thisDiv = document.createElement("div");
			this.thisDiv.className = this.divClass + "Pane";
			this.thisDiv.domId = this.divClass + "PaneId";
			this.thisDiv.setAttribute("id", this.thisDiv.domId);
			this.thisDiv.style.opacity = "0.74"; 
			//this.thisDiv.style.right = "0px";
			//this.thisDiv.style.left = "519px";
			//this.thisDiv.style.top= "0px";
			this.thisDiv.style.filter = "alpha(opacity=)";
			/*this.thisDiv.style.filter = "alpha(opacity=74)"; */
			this.thisDiv.style.MozOpacity = "0.74";
			this.thisDiv.style.zIndex = "150";
			this.thisDiv.style.display = "none";
		
			/*render the page by attaching it as a child node to the main header viewport div*/
			this.headerBox.appendChild(this.thisDiv);
			
			this.domPane = document.getElementById(this.thisDiv.domId);
			

	
		}
		
		
		function loadFlyInContent(contentHTML)
		{
			/*create a new node that will be nested within the main divClass object*/
			thisContent = document.createElement("div");
			thisContent.className = this.divClass + "Content";
			thisContent.domId = this.divClass + "ContentId";
			thisContent.setAttribute("id", thisContent.domId);
			thisContent.style.opacity = "1.0";
			thisContent.style.filter = "alpha(opacity=100)";
			thisContent.style.MozOpacity = "1.0";
			/*render the content object as a child object to the content pane*/
			this.domPane.appendChild(thisContent);
			this.domContent = document.getElementById(thisContent.domId);
		
			/*render the specified HTML content to the content pane*/
			this.domContent.innerHTML = contentHTML;

		}
		
		

		
	/*-----------------end FlyIn class---------------------------------*/
		
		
		
		
		
	/*-----------------begin HeaderButton class--------------------*/
	
	function HeaderButton(buttonClass, buttonText, buttonURL, buttonIndex)
	{
		/*first, initialize the member methods for this class*/
		this.loadButtonContainer = loadButtonContainer;
		this.loadButtonImage = loadButtonImage;
		this.loadButtonFilter = loadButtonFilter;
		this.loadButton = loadButton;
		this.loadButtonText = loadButtonText;
		this.loadButtonLink = loadButtonLink;
	
		/*this.buttonOver = buttonOver;
		this.buttonOut = buttonOut;
		this.buttonDown = buttonDown;
		this.buttonOver = buttonOver;*/
		/*this.doButtonOver = doButtonOver;*/
		
		/*initialize the member properties for this class*/
		this.buttonText = buttonText;
		this.buttonClass = buttonClass;
		this.buttonIndex = buttonIndex;
		this.buttonURL = buttonURL;
	
	
		
		/*get a handle for the entire container of the header image*/
		this.headerBox = document.getElementById("headerbox");
		
		
		
	}
		
		/*this function is triggered when the user moves the mouse over a header button;
		 * it sets the color of the overlay and fades it in.
		 */
		function headerButtonOver(buttonId, ev)
		{
			/*writeDebug("headerButtonOver");*/
			
			thisFilter = document.getElementById(buttonId + "Filter");
			/*alert(thisFilter.name);*/
			thisFilter.style.backgroundColor = "red";
			
			if(window.event) // IE check
   				ev = ev.fromElement;
			if(ev && ev.target) // standard-compliant browsers
  				ev = ev.relatedTarget;
  				
			var cm = (ev.className);
			if(thisFilter.name == "outButton" && cm != "buttonClass" && cm != "buttonText")
			{
				new Effect.Appear (thisFilter, { duration: 0.5, from: 0.0, to:0.45});
				thisFilter.name = "overButton";
				
				
			}
		
		
		}
		
		function headerButtonOut(buttonId, ev)
		{
			
			/*writeDebug("headerButtonOut");*/
			thisFilter = document.getElementById(buttonId + "Filter");
			
			if(window.event) // IE check
			{
   				ev = ev.toElement;
			}
			if(ev && ev.target) // standard-compliant browsers
  				ev = ev.relatedTarget;
  				
			var cm = (ev.className);
			if(thisFilter.name == "overButton" && cm != "buttonClass" && cm != "buttonText")
			{
					new Effect.Fade (thisFilter, {duration: 0.5, from:0.45, to:0.0});
					thisFilter.name = "outButton";
			}

		}
	
	
	
	
		function loadButton()
		{
	
			/*initialize everything by creating a new container object for this button*/
			this.loadButtonLink();
				 
			this.loadButtonContainer();
			
			/*then, create an object which will attach itself to this container, which
			 * holds the button's image, which is determined based on the button class, specified in the constructor
			 */
			 
			 this.loadButtonImage();
			 
			 /*load the filter, which will switch between colors, depending on the button state*/
			
			this.loadButtonFilter();
			this.loadButtonText();
			
			/*the delay to start the animation is determined by the order index of the button;
			 * each button will appear after the button before it has started appearing
			 */
		
			var animationDelay = this.buttonIndex*0.40;
			
				animationDelay += 2.5;
	
		new Effect.Appear(this.buttonContainer, {delay: animationDelay, duration:2.0});

			
		
		}


		/*this function wraps an A element around the buttonContainer, so the button can point somewhere when clicked*/
		function loadButtonLink()
		{
			this.buttonLink = document.getElementById(this.buttonText + "Link");
			
			/*--------SET CSS ATTRIBUTES-------*/
			/*this.buttonLink = document.createElement("A");*/
			/*this.buttonLink.href = this.buttonURL;*/
			/*this.buttonLink.className = "buttonText";*/
			/*this.buttonLink.className = "ajax-wp-current-page";*/
			/*this.buttonLink.Id = "buttonTextId";*/
			
			/*----INSERT INTO HEADER---------*/
			/*this.headerBox.appendChild(this.buttonLink);*/
			
		}
		
		function loadButtonText()
		{
			this.buttonTextDiv = document.getElementById(this.buttonText + "Text");
			
			
			/*this.buttonTextDiv = document.createElement("DIV");
			this.buttonTextDiv.className = "buttonText";
			this.buttonContainer.setAttribute("id", this.buttonText + "Text");
			this.buttonTextDiv.innerHTML = this.buttonText;
			this.buttonTextDiv.style.zIndex = 200;*/
			/*this.buttonContainer.appendChild(this.buttonTextDiv);*/
		}

		function loadButtonContainer()
		{
			/*first, set parameters for a new div, which will act as the container for our button.
			 * This div will control the appearance change of the button as a whole, such as fading it in and out
			 */
			/*this.buttonContainer = document.createElement("DIV");*/
			
			this.buttonContainer = document.getElementById(this.buttonText + "Container");
			
			
			/*
			this.buttonContainer.setAttribute("onmouseover", "headerButtonOver('" + this.buttonText + "', event)");
			this.buttonContainer.setAttribute("onmouseout", "headerButtonOut('" + this.buttonText + "', event)");
			*/
		
			
			
			/*------------SET CSS ATTRIBUTES-----------*/
			/*this.buttonContainer.className = this.buttonClass;
			this.buttonContainer.setAttribute("id", this.buttonText + "Container");
			this.buttonContainer.style.left= (this.buttonIndex*88)+10 + "px";
			this.buttonContainer.style.display = "none";
			this.buttonContainer.style.backgroundColor = "transparent";
			this.buttonContainer.style.zIndex = 90;*/



			/*then, ADD the buttonContainer to the headerBox*/
			/*this.buttonLink.appendChild(this.buttonContainer);*/
			
			
			
		}
	
		function loadButtonImage()
		{
			/*first, set parameters for a new image node, which contains the button base-image for this button class*/
			/*this.buttonImage = document.createElement("IMG");*/
			this.buttonImage = document.getElementById(this.buttonText + "Image");
			
			
			/*--------CSS ATTRIBUTES---------*/
			/*
			this.buttonImage.className = "buttonClass";
			this.buttonImage.setAttribute("id", this.buttonText + "Image");
			this.buttonImage.border = "0";
			this.buttonImage.style.opacity = 0.8;
			this.buttonImage.style.filter = "alpha(opacity=70)";
			this.buttonImage.src = "/images/header-button.gif";
			this.buttonImage.zIndex = 111;*/
		
			/*then, render the image to the buttonContainer. The image should fill the container entirely.*/
			/*this.buttonContainer.appendChild(this.buttonImage);*/

		}
		
		/*this function loads a transparent div into the buttonContainer, which appears with different colors
		 * depending on the button state. The opacity of the div is reduced, so it will act as a 'filter' for the button color.*/
		function loadButtonFilter()
		{
			/*first, set parameters for a new div node, which is initially transparent and changes color depending on the state of the button.
			 * It should be directly above the image.
			 */
			/*this.buttonFilter = document.createElement("DIV");*/
			this.buttonFilter = document.getElementById(this.buttonText + "Filter");
			this.buttonFilter.name = "outButton";
			
			/*
			this.buttonFilter.className = "buttonClass";
			this.buttonFilter.name = "buttonFilter";
			
			this.buttonFilter.setAttribute("id", this.buttonText + "Filter");
			
			this.buttonFilter.style.opacity = 0;
			this.buttonFilter.style.opacity = "0";
			this.buttonFilter.style.zIndex = 350;

			this.buttonFilter.display = "none";
			
			
			this.buttonFilter.style.zIndex = 90;
		*/

			
			/*then, attach the filter div to the main button container*/
			/*this.buttonContainer.appendChild(this.buttonFilter);*/
			
		}


function imgPopup(url)
{
	newWin = window.open(url,"View Image","width=1024, height=750, location=0, toolbar=0, resizable=1") 
	/*winRef = window.open( URL, name [ , features [, replace ] ] )*/
	return false;
}

/*creates a highlight over an image upon hover -- DISABLED
function imgHover(el)
{
	hl = document.createElement("div");
	hl.style.width = "100px";
	hl.style.height = "100px";
	hl.style.backgroundColor = "navy";


	el.appendChild(hl);
	Effect.Appear(hl);
	
	return false;
}
		
*/