// Script for hovering boxes

//global vars

//make hover settings global
var multi_hover_on = 0; //flag for whether or not the multi hover bg is on
var single_hover_on = 0;

//set max listings in a multi box
var max_listings = 4; //maximum number of listings in a multi div

//set timeout ids to be global
var single_show_timeout_id; 
var single_hide_timeout_id; //timer name for telling whether to hide single bg hover or not
var multi_show_timeout_id;
var multi_hide_timeout_id; //timer for multi bg hiding
var single_from_multi_show_timeout_id;
var single_from_multi_hide_timeout_id;

//set drop down html content outside of function to keep it alive
var html_info = "";
//---------------------------
//CONTROL                  --
//---------------------------

//main control function
function hover(e)
{
	//we first need to find who touched us
	var listing_hover = find_target(e);
	
	//we then grab the label number for this listing and will use it for the rest of the script
	var listing_label = listing_hover.id.substr(8);
	
	//we then need to see what other homes are touching ours
	var stack = check_stack(listing_label);
	
	//we the grab the mouse coordinates
	var x = get_mouse_x(e);
	var y = get_mouse_y(e);
	
	//if there was more than one home
	if ( stack.length > 1 )
	{
		//set the function up to call the multi function with the setTimeout
		function show_multi_call() { show_multi(listing_label, stack, x, y); }
		
		//if it is a new hover
		if ( multi_hover_on == 0 && single_hover_on == 0 )
		{
			//wait a second and then show the hover
			multi_show_timeout_id = setTimeout(show_multi_call, 1000);
		}
		//if hovers are already up, we just shoot straight to the new one with no wait
		else
		{
			show_multi_call();
		}
	}
	else
	{
		//set up function for setTimeout
		function show_single_call() { show_single(listing_label, x, y, 0); }
		
		//if it's a new hover
		if ( multi_hover_on == 0 && single_hover_on == 0 )
		{
			//wait a second and then call function
			single_show_timeout_id = setTimeout(show_single_call, 1000);
			
		}
		//otherwise shoot without hesitation
		else
		{
			show_single_call();
		}
	}
}

function hide_hover(e)
{
	if ( document.getElementById('multi_hover_bg').style.display == '' || document.getElementById('single_hover_bg').style.display == '' )
	{
		if ( document.getElementById('multi_hover_bg').style.display == '' )
		{
			function hide_multi() { document.getElementById('multi_hover_bg').style.display = 'none';  multi_hover_on = 0;}
			multi_hide_timeout_id = setTimeout(hide_multi, 1000);
		}
		if ( document.getElementById('single_hover_bg').style.display == '' )
		{
			function hide_single() { document.getElementById('single_hover_bg').style.display = 'none'; single_hover_on = 0;}
			single_hide_timeout_id = setTimeout(hide_single, 1000);
		}	
	}
	else
	{	
		if ( multi_show_timeout_id )
		{
			clearTimeout(multi_show_timeout_id);
		}
		if ( single_show_timeout_id )
		{
			clearTimeout(single_show_timeout_id);
		}
	}
}
	

		
//--------------------------
// PROCESSING             --
//--------------------------


function show_multi(listing_label, stack, x, y)
{
	//register the multi background dib
	var multi_hover_bg = document.getElementById('multi_hover_bg');
	multi_hover_bg.style.left = x;
	multi_hover_bg.style.top = y;
	multi_hover_bg.innerHTML = '';
	clearTimeout(multi_hide_timeout_id);
	clearTimeout(single_hide_timeout_id);
	
	//set any single instances to go away
	document.getElementById('single_hover_bg').style.display = 'none';
	
	//set the max listings into effect
	var times_through = 0;
	if ( stack.length > max_listings )
	{
		times_through = max_listings;
	}
	else
	{
		times_through = stack.length;
	}
	
	//begin html layout for div
	
	var content_string ='';
	var for_counter = 0;
	for (var i=0; i<times_through; i++)
	{	
		//set html contents
		var content = document.getElementById('listing_info_' + stack[i]);
		var lid = content.childNodes[1].innerHTML;
		var default_content = '<div style="height: 80; width: 120; border: 1px solid black; background-image: url(\'/shared/get/lphoto.php?lid=' + lid + '&thumb=1&id=\'); background-repeat: no-repeat;" id="hover_listing_' + stack[i] + '"><span style="position: absolute; background-color: #FFFFFF; padding: 3px; font-family: arial; font-size: 9px; color: #FF0000; border: solid black; border-width: 0px 1px 1px 0px;">' + stack[i] + '</span></div>';

		/* This will make it so that if there are 3 homes in the hover, they will all show in a line
		if ( times_through == 3 )
		{
			content_string += '<td>' + default_content + '</td>';
		}
		else
		{
		*/
		
		//-----------------------------------------------------
		// This code will show the info between images
		//-----------------------------------------------------
			if ( i%2 == 0 )
			{
				var beg = '<tr><td>';
				var end = '</td>';				
			}
			else
			{
				if (i == 3)
				{
					var beg = '<td>';
					var end = '</td></tr>';
				}
				else
				{
					var beg = '<td>';
					var end = '</td></tr><tr><td id="extra_info" class="show" colspan="2" height="115" style="border: solid black; border-width: 1px 0px 1px 0px;">Hover over image for more information</td></tr>';
					
				}
			}
				
			content_string += beg + default_content + end;
		//}
		
		for_counter++;
	}
		
	multi_hover_bg.innerHTML += '<table border="0" cellspacing="0" cellpadding="2">' + content_string + '</table>';
		
		/* This bit of code will show the data below the images
			if ( i%2 == 0 )
			{
				var beg = '<tr><td>';
				var end = '</td>';				
			}
			else
			{
				var beg = '<td>';
				var end = '</td></tr>';
			}
				
			content_string += beg + default_content + end;
		//}
		
		for_counter++;
	}
		
	multi_hover_bg.innerHTML += '<table border="0" cellspacing="0" cellpadding="2">' + content_string + '<tr><td colspan=\"2\" id="extra_info" class="show" colspan="2"></td></tr></table>';
	*/

	for (var i=0; i<times_through; i++)
	{
		var stack_id = 'hover_listing_' + stack[i];
		add_event(document.getElementById(stack_id), 'mouseover', drop_info, false);
		
		/* This adds the events to open up a new single hover box
		//add_event(document.getElementById(stack_id), 'mouseover', single_from_multi_show, false);
		//add_event(document.getElementById(stack_id), 'mouseout', single_from_multi_dont_show, false);
		*/
	}
	
	//clear any timer closing this window
	multi_hover_bg.style.visibility = 'hidden';	
	multi_hover_bg.style.width = '250';
	multi_hover_bg.style.display = '';
		
		var multi_bg_width = document.getElementById('multi_hover_bg').offsetWidth 
		var multi_bg_height = document.getElementById('multi_hover_bg').offsetHeight 
		
		//set window to show where there is room on the screen
		if (self.innerHeight) //safari and Firefox
		{
			if ( multi_bg_width + x >= self.innerWidth + document.body.scrollLeft)
			{
				multi_hover_bg.style.left = x - multi_bg_width;
			}
			//alert(self.innerHeight + " - "  + self.innerWidth);
			if ( multi_bg_height + y > self.innerHeight + document.body.scrollTop )
			{
				//alert('true');
				multi_hover_bg.style.top = y - multi_bg_height;
			}
		}
		else //for IE
		{
			if ( multi_bg_width + x >= document.body.clientWidth + document.body.scrollLeft)
			{
				multi_hover_bg.style.left = x - multi_bg_width;
			}
			//alert(self.innerHeight + " - "  + self.innerWidth);
			if ( multi_bg_height + y > document.body.clientHeight + document.body.scrollTop )
			{
				//alert('true');
				multi_hover_bg.style.top = y - multi_bg_height;
			}
		}
		
	multi_hover_on = 1;
	
	multi_hover_bg.style.visibility = '';

}

function drop_info(e)
{	
	document.getElementById('extra_info').innerHTML = '';
	var listing = find_target(e);
	if (listing.tagName != 'SPAN') //this is for the listing label spans
	{
		//assing that target a name based on the number of the listing
		var listing_label = listing.id.substr(14);
		
			var html = '';
			var content = document.getElementById('listing_info_' + listing_label);
			var lid = content.childNodes[1].innerHTML;
			var price = content.childNodes[2].innerHTML;
			var street_city = content.childNodes[3].innerHTML;
			var link = content.childNodes[4].innerHTML;
			var beds = content.childNodes[5].innerHTML;
			var baths = content.childNodes[6].innerHTML;
			var sq_feet = content.childNodes[7].innerHTML;
			
		html_info = ""
				+"		<table border=\"0\" cellpadding=\"0\" cellspacing=\"3\" style=\"width: 100%; border-top: 0px solid black\">"
				+"			<tr>"
				+"				<td colspan=\"2\" class=\"show\" style=\"border: 1px solid black; background-color: " + hover_drop_address_bar_bg_color + "; color: " + hover_drop_address_bar_text_color + "; padding: 2px\">"
				+" 							"+ price + " &raquo; " + street_city + " "
				+"				</td>"
				+" 			</tr>"
				+"			<tr>"
				+"				<td width=\"120\">"
				+"			<div style='cursor: pointer; width: 120; height: 80; border: 1px solid black; background-image: url(\"/shared/get/lphoto.php?lid=" + lid + "&thumb=1&id=\"); background-repeat: no-repeat;' onclick=\"window.open('" + link + "','Property_Detail','width=550,height=450,status=no,resizable=yes,scrollbars=yes')\"><span style=\"position: absolute; background-color: #FFFFFF; padding: 3px; font-family: arial; font-size: 9px; color: #FF0000; border: solid black; border-width: 0px 1px 1px 0px;\">" + listing_label + "</span></div>"
				+"				</td>"
				+"				<td width=\"*\" class=\"show\" style=\"padding: 3px;\" valign=\"middle\">";
		if(HomeSearch_SqFeet != 1)
		html_info += "Sq feet: " + sq_feet + "<br>";
		html_info += ""
				+"					Baths: " + baths + "<br>Bedrooms: " + beds + "<br>&raquo; <a href=\"javascript:;\" onclick=\"window.open('" + link + "','Property_Detail','width=550,height=450,status=no,resizable=yes,scrollbars=yes')\">View Details</a>"
				+"				</td>"
				+"			</tr>"
				+"		</table>";
				
				document.getElementById('extra_info').innerHTML = html_info;
	}
	else //when you run over a label, this should keep the window alive
	{
		keep_drop_alive();
	}
}

//this function keeps the drop alive when you run over a tag
function keep_drop_alive()
{
	//document.getElementById('extra_info').innerHTML = html_info;
}

function multi_dont_show()
{
	if ( document.getElementById('multi_hover_bg').style.display == '' )
	{
		single_dont_show();
		function hide_multi() { document.getElementById('multi_hover_bg').style.display = 'none'; multi_hover_on = 0;}
		multi_hide_timeout_id = setTimeout(hide_multi, 1000);
	}
}

function keep_showing_multi()
{
	clearTimeout(multi_hide_timeout_id);
	clearTimeout(single_hide_timeout_id);
}

/* This function set is not being used currently because we have no singles popping up from multis
function single_from_multi_show(e)
{

	
	//find the current target
	var hover_target = find_target(e);
	
	//assing that target a name based on the number of the listing
	var listing_label = hover_target.id.substr(14);	
	
	var x = get_mouse_x(e);
	var y = get_mouse_y(e);
	function show_single_call() {show_single(listing_label, x, y, 1);}
	single_from_multi_show_timeout_id = setTimeout(show_single_call, 0);
}

function single_from_multi_dont_show()
{
		clearTimeout(single_from_multi_show_timeout_id);
}
*/

function show_single(listing_label, x, y, from_multi)
{
	if ( listing_label != '' )
	{
		//if there is a timeout running to close this window, stop it
		clearTimeout(single_hide_timeout_id);
		
		//register the single_hover_bg
		var single_hover_bg = document.getElementById('single_hover_bg');
		
		//set html contents after you clear them
		single_hover_bg.innerHTML = '';
		var html = '';
		var content = document.getElementById('listing_info_' + listing_label);
		var lid = content.childNodes[1].innerHTML;
		var price = content.childNodes[2].innerHTML;
		var street_city = content.childNodes[3].innerHTML;
		var link = content.childNodes[4].innerHTML;
		var beds = content.childNodes[5].innerHTML;
		var baths = content.childNodes[6].innerHTML;
		var sq_feet = content.childNodes[7].innerHTML;
		
		html = ""
			+"<table width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"2\">"
			+"	<tr>"
			+"		<td colspan=\"2\" class=\"show\" style=\"border: 1px solid black; background-color: " + hover_drop_address_bar_bg_color + "; color: " + hover_drop_address_bar_text_color + "; padding: 2px\">"
			+" 					"+ price + " &raquo; " + street_city + " "
			+"		</td>"
			+" 	</tr>"
			+"	<tr>"
			+"		<td width=\"120\">"
			+"			<div style='cursor: pointer; width: 120; height: 80; border: 1px solid black; background-image: url(\"/shared/get/lphoto.php?lid=" + lid + "&thumb=1&id=\"); background-repeat: no-repeat;' onclick=\"window.open('" + link + "')\"><span style=\"position: absolute; background-color: #FFFFFF; padding: 3px; font-family: arial; font-size: 9px; color: #FF0000; border: solid black; border-width: 0px 1px 1px 0px;\">" + listing_label + "</span></div>"
			+"		</td>"
			+"		<td class=\"show\" style=\"padding: 3px;\" valign=\"middle\">";
		if(HomeSearch_SqFeet != 1)
		html += "Sq feet: " + sq_feet + "<br>";
		html += ""
			+"					Baths: " + baths + "<br>Bedrooms: " + beds + "<br>&raquo; <a href=\"javascript:;\" onclick=\"window.open('" + link + "','Property_Detail','width=550,height=450,status=no,resizable=yes,scrollbars=yes')\">View Details</a>"
			+"		</td>"
			+"	</tr>"
			+"</table>";
			

		single_hover_bg.innerHTML = html;

				
		//set x
		single_hover_bg.style.left = x;
		
		//set y
		single_hover_bg.style.top = y;
		
		//set display to show
		single_hover_bg.style.width = "250";
		single_hover_bg.style.visibility = 'hidden';
		single_hover_bg.style.display = '';
		
		var single_bg_width = document.getElementById('single_hover_bg').offsetWidth
		var single_bg_height = document.getElementById('single_hover_bg').offsetHeight 
		
		//set window to show where there is room on the screen
		if (self.innerHeight) //Safari and Firefox
		{
			if ( single_bg_width + x >= self.innerWidth + document.body.scrollLeft)
			{
				single_hover_bg.style.left = x - single_bg_width;
			}
			if ( single_bg_height + y > self.innerHeight + document.body.scrollTop )
			{
				single_hover_bg.style.top = y - single_bg_height;
			}
		}
		else //for IE
		{
			if ( single_bg_width + x >= document.body.clientWidth + document.body.scrollLeft)
			{
				single_hover_bg.style.left = x - single_bg_width;
			}
			if ( single_bg_height + y > document.body.clientHeight + document.body.scrollTop )
			{
				single_hover_bg.style.top = y - single_bg_height;
			}
		}
		
		if ( from_multi != 1 )
		{
			//erase any multi instances
			document.getElementById('multi_hover_bg').style.display = 'none';
		}
		
		if ( from_multi == 1 )
		{
			//else clear the timeout that will clear the multi window
			clearTimeout(multi_hide_timeout_id);
		}
		
		//if there is a timeout running to close this window, stop it
		clearTimeout(single_hide_timeout_id);
		
		single_hover_on = 1;
		
		single_hover_bg.style.visibility = '';		

	}
}

function single_dont_show()
{
	if ( document.getElementById('single_hover_bg').style.display != '' )
	{
		clearTimeout(single_show_timeout_id);
	}
	else
	{
		function close_single_hover() { document.getElementById('single_hover_bg').style.display = 'none'; single_hover_on = 0; document.getElementById('multi_hover_bg').style.display = 'none'; multi_hover_on = 0; }
		single_hide_timeout_id = setTimeout(close_single_hover, 1000);
	}	
}


function keep_showing_single()
{
	clearTimeout(multi_hide_timeout_id);	
	clearTimeout(single_hide_timeout_id);
}
	

//check stack checks to see how many homes are touching the one we 
//are hovering on and returns an array with a list of their listing nums

function check_stack(num)
{
	var coords = document.getElementById('listing_coords_' + num);
	
	var h1_x1 = 0;
	var h1_y1 = 0;
	var h1_x2 = 0;
	var h1_y2 = 0;
	
	h1_x1 = coords.childNodes[0].innerHTML;
	h1_y1 = coords.childNodes[1].innerHTML;
	h1_x2 = coords.childNodes[2].innerHTML;
	h1_y2 = coords.childNodes[3].innerHTML;
	
	var id = coords.id;
	var all_divs = document.getElementsByTagName('div');
	
	/*for debugging
	var success = '';
	var failed = '';
	var orig_hover = "x1: " + h1_x1 + " | x2: " + h1_x2 + " | y1: " + h1_y1 + " | y2: " + h1_y2 + "\n";
	var count = 0;
	var success_x = '';
	var success_x_y = '';
	var failed_y = '';*/
	
	
	var listings = new Array();

	for ( i=0; i<all_divs.length; i++ )
	{
		var home_id = '';
		var h2_x1 = 0;
		var h2_y1 = 0;
		var h2_x2 = 0;
		var h2_y2 = 0;
		
		
		
		if (all_divs[i].className == 'coords')
		{

			home_id = all_divs[i].id.substr(15);
			h2_x1 = all_divs[i].childNodes[0].innerHTML;
			h2_y1 = all_divs[i].childNodes[1].innerHTML;
		    h2_x2 = all_divs[i].childNodes[2].innerHTML;
			h2_y2 = all_divs[i].childNodes[3].innerHTML;
			
			if  ( ( eval(h1_x2 + " >= " + h2_x1 + " && " + h1_x1 + " <= " + h2_x1) ) || ( eval(h2_x2 + " >= " + h1_x1 + " && " + h2_x2 + " <= " + h1_x2) ) ) 
			{
				//success_x += home_id + "\nx1: " + h2_x1 + " | x2: " + h2_x2 + " | y1: " + h2_y1 + " | y2: " + h2_y2 + "\n";	
				
				if ( ( eval(h2_y1 + " >= " + h1_y1 + " && " + h2_y1 + " <= " + h1_y2) ) || ( eval(h2_y2 + " >= " + h1_y1 + " && " + h2_y2 + " <= " + h1_y2) ) ) 
				{
					listings.push(home_id);
					//success_x_y += home_id + "\n"; // + " - \nx1: " + h2_x1 + " | " + h1_x1 + ", " + h1_x2 + " | x2: " + h2_x2 + " \n y1: " + h2_y1 + " | " + h1_y1 + ", " + h1_y2 + " | y2: " + h2_y2 + "\n";		
				}
				else
				{
					//failed_y += home_id + "\n x1: " + h2_x1 + " | x2: " + h2_x2 + " | y1: " + h2_y1 + " | y2: " + h2_y2 + "\n";		
				}
			}
			else
			{
				//failed += home_id + "\n x1: " + h2_x1 + " | x2: " + h2_x2 + " | y1: " + h2_y1 + " | y2: " + h2_y2 + "\n";		
			}
		}
	}

	//alert(orig_hover + "\nSuccess X\n" + success_x + "\nSuccess X and Y\n" + success_x_y );
		
	return listings;
}

//----------------------------------
//ON LOAD - add the listeners     --
//----------------------------------
add_event(window, 'load', add_listeners, false);

//----------------------------------
//default behavior functions      --
//----------------------------------

//add listeners for the mouse rollovers
function add_listeners(e)
{
	
	if ( !document.getElementById )
	{
		return;
	}
	
	var all_divs = document.getElementsByTagName('div');
	
	var num = 0;
	for ( i=1; i<all_divs.length; i++ )
	{
		if (all_divs[i].className == 'hover' )
		{
			add_event(all_divs[i], 'mouseover', hover, false);
			add_event(all_divs[i], 'mouseout', hide_hover, false);
		}
	}
	/*
	add_event(single_hover_bg, 'mouseover', keep_showing_single, false);
	add_event(single_hover_bg, 'mouseout', single_dont_show, false);
	add_event(multi_hover_bg, 'mouseover', keep_showing_multi, false);
	add_event(multi_hover_bg, 'mouseout', multi_dont_show, false);
	*/
		
	add_event(document.getElementById('single_hover_bg'), 'mouseover', keep_showing_single, false);
	add_event(document.getElementById('single_hover_bg'), 'mouseout', single_dont_show, false);
	add_event(document.getElementById('multi_hover_bg'), 'mouseover', keep_showing_multi, false);
	add_event(document.getElementById('multi_hover_bg'), 'mouseout', multi_dont_show, false);
	

}



//default target finder function with feature sniffing
function find_target(e)
{
	if ( window.event && window.event.srcElement)
	{
		e = window.event.srcElement;
	}
	if ( e && e.target )
	{
		e = e.target;
	}
	if ( !e )
	{
		return;
	}
	
	return e;
}


//find mouse x and y
function get_mouse_x(e)
{
	if (document.all) 
	{
    	X = event.clientX + document.body.scrollLeft;
  	} 
  	else 
  	{
    	X = e.pageX;
  	}
  
  	return X;
}

function get_mouse_y(e)
{
	if (document.all) 
	{
    	Y = event.clientY + document.body.scrollTop;
  	} 
  	else 
  	{
    	Y = e.pageY;    
  	}
  	
  	return Y;
}
	

//add events function with feature sniffing
function add_event(elm, evType, fn, useCapture)
{
	if( elm.addEventListener )
	{
		elm.addEventListener( evType, fn, useCapture);
		return true;
	}
	else if ( elm.attachEvent )
	{
		var r = elm.attachEvent('on' + evType, fn);
		return r;
	}
	else
	{
		elm['on' + evType] = fn;
	}
}