//Author: Bryan Black 
//Notes: This will created an XMLHttpRequest or ActiveXObject depending on the browser. execute the search script and place the respective video thumbnails in the right container 

function setThumbnails() {
	//This function will if the httpObject has loaded all the info will grab the thumbs container and place the results inside the container 
	if(httpObject.readyState == 4){
		var thumbDiv = document.getElementById('thumbs'); 
		thumbDiv.innerHTML = httpObject.responseText; 	
		//Now we will set the width of the container Dynamically depending on how many images we have 
		var numImg = thumbDiv.getElementsByTagName('img').length; 
		var thumbContent = document.getElementById('thumb_content');
		
		if(numImg > 0){
			var width = ((numImg * 74) + (numImg * 5) + (numImg * 2)) + 700;
			//Now that we have the dynamic width lets place it on the thumb_content div 
			thumbContent.style.width = width +'px';  
		}else{
			thumbContent.style.width = 950+'px'; 
		}
		//add the spacer image after the thumbnails are in 
		var spacer = document.createElement('img'); 
		spacer.setAttribute('id','spacer'); 
		spacer.setAttribute('src','images/spacer.jpg'); 
		thumbDiv.appendChild(spacer);
		
		//adjust horizontal scroll bar if needed 
		var scroller = document.getElementById('thumb_src'); 
		var scrolled = scroller.scrollLeft; 
		if(scrolled > 0){
			scroller.scrollLeft = 0; 
		
		}


		
	}
}

function showSearch(){
	var search = document.getElementById('search_results');
	search.innerHTML = "<p>Search<br />Results: <br />"+document.getElementById('search_term').value+"</p>";
	var filler = document.getElementById('filler'); 
	filler.style.width = "0"; 
	search.style.width = "0"; 
		
	new Effect.Parallel([
		
		new Effect.Morph('search_results',{style:{width:'100px',background:'#799746'}}),
		new Effect.Morph('filler',{style:{width:'100px'}})
	],{duration:1});
	
	
	
}

function loadAllVideos(){
	//This function is called when the page loads so we can load all the video thumbnails
	httpObject = getHttpObject(); 
	if(httpObject != null){
		httpObject.open("GET","videoSearch.php?search=",true); 
		httpObject.send(null); 
		httpObject.onreadystatechange = setThumbnails; 

	}
}


function getThumbNails() {
	//This function will call the getHttpObject to get the XMLRequest or ActiveXObject then check to see if it worked. After that it executes the php script and calls the setThumbnails function 
	httpObject = getHttpObject(); 
	if(httpObject != null) {
		httpObject.open("GET", "videoSearch.php?search="+document.getElementById('search_term').value,true); 
		httpObject.send(null); 
		httpObject.onreadystatechange = setThumbnails; 
		showSearch(); 
		
	}else{
		alert('httpObject == null'); 
	}
	
	return false; 
	
}


function moveDes(event){
	//Lets set up all our variables
	var e = event || window.event; 						//This is our event object 
	var hScroll = Geometry.getHorizontalScroll();		//This gets the leftScroll 
	var tScroll = Geometry.getVerticalScroll();			//this gets the topScroll 
	var x = e.clientX + hScroll + 15; 					//Convert all that into our x cord
	var y = e.clientY + tScroll + 15;					//Convert all that into our y cord
	
	//Grab the tool tip div 
	var tooltip = document.getElementById('tooltip');
	
	tooltip.style.left = x +'px';					//Place our x cord to position the div tag 
	tooltip.style.top = y + 'px';
}

function hideDes(){
	document.onmousemove = null; 
	
	//Grab the tool tip div 
	var tooltip = document.getElementById('tooltip');
	tooltip.style.left = null; 
	tooltip.style.top = null;
	tooltip.style.display = 'none';
}

function loadDes(_linkName,event){
	//Lets set up all our variables
	var e = event || window.event; 						//This is our event object 
	var linkName = _linkName; 							//This will be used to get the specific thumbnail description 
	var hScroll = Geometry.getHorizontalScroll();		//This gets the leftScroll 
	var tScroll = Geometry.getVerticalScroll();			//this gets the topScroll 
	var x = e.clientX + hScroll + 15; 					//Convert all that into our x cord
	var y = e.clientY + tScroll + 15;					//Convert all that into our y cord 
	
	//Do our ajax stuff and grab the description 
	
	httpObject = getHttpObject(); 
	if(httpObject != null){
		httpObject.open("GET", "loadDescription.php?link="+linkName,false);
		httpObject.send(null);  
	}
	
	
	//Grab the tool tip div 
	var tooltip = document.getElementById('tooltip');
	
	tooltip.innerHTML = httpObject.responseText; 	//Insert the text into our div tag 
	tooltip.style.left = x +'px';					//Place our x cord to position the div tag 
	tooltip.style.top = y + 'px';					//Place our y cord to positoin the div tag 
	tooltip.style.display = "block"; 			//set visiblility to visible 
	
	//Register the onmousemove Event to make the tool tip follow the cursor 
	document.onmousemove = moveDes; 
	
	//Set the opacity of the div 
	Element.setOpacity('tooltip',.8); 
	
}






var httpObject = null;