function eventBox(array, string, date) {

	// set up the main variables date is typically today's date, in Unix Timestamp format
	this.eventArray = array;
	this.upComingArray = Array();
	
	this.identifier = string;
	this.date = date;
	
	// variable to hold the div in which all HTML manipulation will take place
	this.eventsDiv = document.getElementById(this.identifier);

	this.selected = "upcoming";
	
	// function to preload images
	 function preloadImg (imageSrcArr)
	{
	
		var images = Array();
	
		for (x = 0; x < imageSrcArr.length; x++)
		{
		
			images[x] = new Image();
		
			images[x].src = imageSrcArr[x];
	
	
		}
	}
	this.preloadImg = preloadImg;
	
	/////////////////////// CORE DISPLAY FUNCTION ////////////////////
	
	
	function removeElements(elementId) {
	
		var cell = document.getElementById(elementId);

		if ( cell.hasChildNodes() )
		{
  	 		 while ( cell.childNodes.length >= 1 )
   			 {
    		    cell.removeChild( cell.firstChild );       
    		 } 
		}
	
	
	}
	this.removeElements = removeElements;
	
	function display(displayArray) {
	
		// remove current elements
		this.removeElements(this.identifier + "eventsul");
		
		// temporary array to hold each element as it's being instated.
		var tempArray = Array();
		
		for (var x = 0; x < displayArray.length; x++) {
		
			
			
			// create necessary elements
			li = document.createElement('li');
			link = document.createElement('a');
			img = document.createElement('img');
			h2 = document.createElement('h2');
			h1 = document.createElement('h1');
			div = document.createElement('div');
			
			// format each element
			link.href = "event.php?id=" + displayArray[x][0];
			
			img.src = "../" + displayArray[x][6];
			
			h2.innerHTML = displayArray[x][7] + "<br />" + displayArray[x][3];
			
			h1.innerHTML = displayArray[x][2];
			
			div.innerHTML = displayArray[x][4] + "<p>" + displayArray[x][5] + "</p>";
			
			
			// append each element to the li
			
			link.appendChild(img);
			link.appendChild(h2);
			link.appendChild(h1);
			link.appendChild(div);
			
			li.appendChild(link);
		
			// append the li to the ul
			
			document.getElementById(this.identifier + "eventsul").appendChild(li);
			
		}

	}
	this.display = display;
	
	
	function displayControls() {
		this.removeElements(this.identifier + "controlBar");
	
		switch(this.selected) {
			case "upcoming":
				document.getElementById(this.identifier + "controlBar").innerHTML = "<div class = \"selected\">Upcoming Events</div><a href = \"#\" onclick = \"" + this.identifier + ".showAll(); return false;\">Show All</a> <div class=\"search\">Search: <input type = \"text\" class = \"textinput\" value = \"Enter Text\" onfocus = \"if(this.value == 'Enter Text') this.value = ''; \" onblur = \"if(this.value == '') this.value = 'Enter Text'; \" onKeyUp = \"" + this.identifier + ".doSearch(this.value); \" /></div>";
				break;	
			case "all":
				document.getElementById(this.identifier + "controlBar").innerHTML = "<a href = \"#\" onclick = \"" + this.identifier + ".upComing(); return false;\">Upcoming Events</a><div class = \"selected\">Show All</div> <div class=\"search\">Search: <input type = \"text\" class = \"textinput\" value = \"Enter Text\" onfocus = \"if(this.value == 'Enter Text') this.value = ''; \" onblur = \"if(this.value == '') this.value = 'Enter Text'; \" onKeyUp = \"" + this.identifier + ".doSearch(this.value); \" /></div>";
				break;
			default:
				document.getElementById(this.identifier + "controlBar").innerHTML = "<a href = \"#\" onclick = \"" + this.identifier + ".upComing(); return false;\">Upcoming Events</a><a href = \"#\" onclick = \"" + this.identifier + ".showAll(); return false;\">Show All</a> <div class=\"search\">Search: <input type = \"text\" class = \"textinput\" value = \"Enter Text\" onfocus = \"if(this.value == 'Enter Text') this.value = ''; \" onblur = \"if(this.value == '') this.value = 'Enter Text'; \" onKeyUp = \"" + this.identifier + ".doSearch(this.value); \" /></div>";
				break;
		}
	}
	this.displayControls = displayControls;
	
	//////////////////////// USER INPUT FUNCTIONS ///////////////////
	
	
	function upComing() {
		
		this.selected = "upcoming";
		this.displayControls();
		this.display(this.upComingArray);
		
	}
	this.upComing = upComing;
	
	
	
	function showAll() {
		
		this.selected = "all";
		this.displayControls();
		this.display(this.eventArray);
		
	}
	this.showAll = showAll;
	
	function doSearch(string)
	{
		
		var results = Array();
	
		for (var x = 0; x < array.length; x++)
		{
	
			if ((this.eventArray[x][2].search(new RegExp(string, "i")) >= 0) || (this.eventArray[x][4].search(new RegExp(string, "i")) >= 0))
			{
			
				results[results.length] = array[x];
			}
		
		
			
		}
		
		this.display(results);


	}
	this.doSearch = doSearch;
	
	
	
	
	

	///////////////////////// initialize the eventBox //////////////////
	function init() {
		
		//preload images
		var tempArray = Array();
		for (var y = 0; y < this.eventArray.length; y++) {
			tempArray[y] = this.eventArray[y][6];
		}
		this.preloadImg(tempArray);
		
		// create control bar at the top
		h1 = document.createElement('h1');
		h1.id = this.identifier + "controlBar";
		
		
		// create ul to house search results
		ul = document.createElement('ul');
		ul.id = this.identifier + "eventsul";
		
		// append the control bar and ul
		this.eventsDiv.appendChild(h1);
		this.eventsDiv.appendChild(ul);
		
		
		//////// seperate out items that are in the future ////////
		
		var y = 0;
		
		for (var x = 0; x < this.eventArray.length; x++) {
		
			if (this.eventArray[x][1] >= this.date) {
				
				this.upComingArray[y] = this.eventArray[x];
				y++;
				
			}
			
		}
		
		
		
		// call function to display upcoming results as initial state
		this.displayControls();
		this.display(this.upComingArray);
		
		
		
		
	}
	this.init = init;






}