// USES JQUERY
//
// This will fade in a div and fade out all of the other sibling divs in the process...
// 
// IN: parentDiv - the ID of the parent div that contains all of the other divs.
// 	   showThis - the div that will fade in.
//	   _duration - the time it takes to complete the transition (in milliseconds)
//
// NOTE: this function will only traverse ONE LEVEL of the parent_div. So only the children will
//		 be touched.
function showHide(parentDiv, showWhat, _duration){
	// Get the number of child divs we will be fading/showing.
	var count = $("#" + parentDiv).children().length;
	
	var duration = (_duration) ? _duration : "0";
	
	// Loop and fade in or fade out depending on if the
	// current child's name matches the showWhat variable...
	for(var i = 0; i < count; i++)
	{
		// The parentDiv > Children[x] > attribute
		if($("#" + parentDiv).children().eq(i).attr('id') == showWhat)
			$("#" + parentDiv).children().eq(i).fadeIn(duration);
		else
			$("#" + parentDiv).children().eq(i).fadeOut(duration);
	}
}

// Starts the timer and calls the recursive autoScroll() function.
// The same parameters as autoScroll() but supplies the start_bool variable
//	so there won't be duplicate timers created for the same div section.
//
// This function will scroll through a list of divs and fade them out based on
//	the supplied parent div.
//
// NOTE: The fading divs MUST be immediate children of the parent div in order to transition.
//
// start_bool - the variable to be passed in. Will be set to true once the timer has been started.
// elapsed_time - the int variable used to count the elapsed seconds.
// tts (time til switch) - the int variable that tells how long we should wait until we switch images.
// current_image - the int representing the current_image.
// parent_div - the div id of the parent array that encapsulates the other divs
// milliseconds - how many milliseconds should this function be called? (default is 1000 i.e. every second.)

function startTimer(start_bool, elapsed_time, tts, current_image, parent_div, milliseconds){
	if(start_bool == false)
	{
		start_bool = true;
		elapsed_time = 0;
		// Start the clock...
		autoScroll(elapsed_time, tts, current_image, parent_div, milliseconds);
	}
}
		

// autoScroll.
// This function will scroll through a list of divs and fade them out based on
//	the supplied parent div.
//
// NOTE: The fading divs MUST be immediate children of the parent div in order to transition.
//
// elapsed_time - the int variable used to count the elapsed seconds.
// tts (time til switch) - the int variable that tells how long we should wait until we switch images.
// current_image - the int representing the current_image.
// parent_div - the div id of the parent array that encapsulates the other divs
// milliseconds - how many milliseconds should this function be called? (default is 1000 i.e. every second.)
function autoScroll(elapsed_time, tts, current_image, parent_div, milliseconds){
	
	elapsed_time += 1;

	if(!milliseconds)
		milliseconds = 1000;
				
	// Check to see if we have reached our time limit...
	if(elapsed_time >= tts)
	{
		elapsed_time = 0;
		
		current_image += 1;
		
		if(current_image >= $("#" + parent_div).children().length - 1)
			current_image = 0;
			
		showHide(parent_div, $("#" + parent_div).children().eq(current_image).attr('id'));
	}
	
	setTimeout("autoScroll(" + elapsed_time + ", " + tts + ", " + current_image + ", '" + parent_div + "', " + milliseconds + ")", milliseconds);
}
				
// Obj, the html element object.
// force, are we forcing "SHOW" or "NOSHOW"? If neither, just leave blank.

function toggle(obj, force){
  var el = document.getElementById(obj);

  // Check to see if we're forcing it to be on or off...
  if(force == undefined || force == null || force == "")
    el.style.display = (el.style.display == "none" ? "" : "none");
  else if(force == "SHOW" || force == "show" || force == "Show")
    el.style.display = "";
  else if(force == "NOSHOW" || force == "noshow" || force == "NoShow")
    el.style.display = "none";
  else
    el.style.display = (el.style.display == "none" ? "" : "none");
}

/***********************************************************************************************************/
/***********************************************************************************************************/
/** BORROWED FROM http://www.codelifter.com/main/javascript/capturemouseposition1.html. Awesome function. **/
/***********************************************************************************************************/
/***********************************************************************************************************/
// Detect if the browser is IE or not.
// If it is not IE, we assume that the browser is NS.
var IE = document.all?true:false

// If NS -- that is, !IE -- then set up for mouse capture
if (!IE) document.captureEvents(Event.MOUSEMOVE)

// Set-up to use getMouseXY function onMouseMove
document.onmousemove = getMouseXY;

// Temporary variables to hold mouse x-y pos.s
var tempX = 0
var tempY = 0

function getMouseXY(e, obj) {
  if (IE) { // grab the x-y pos.s if browser is IE
    tempX = event.clientX + document.body.scrollLeft;
    tempY = event.clientY + document.body.scrollTop;
  } else {  // grab the x-y pos.s if browser is NS
    tempX = e.pageX;
    tempY = e.pageY;
  }  
  // catch possible negative values in NS4
  if (tempX < 0){tempX = 0}
  if (tempY < 0){tempY = 0}  
  // show the position values in the form named Show
  // in the text fields named MouseX and MouseY

  if(obj != undefined)
  {
    var el = document.getElementById(obj);
    // Now check to see if it's inside of our screen viewing position...
    
    	
    el.style.left = tempX - 285; // - 335;
    el.style.top = tempY - 220; // + 25;
    toggle(obj, "Show");
  }
}
/***********************************************************************************************************/
/***********************************************************************************************************/
/** BORROWED FROM http://www.codelifter.com/main/javascript/capturemouseposition1.html. Awesome function. **/
/***********************************************************************************************************/
/***********************************************************************************************************/





function getMousePos(oEvent, obj){
 // Get the id of obj and then use event to get the mouse pos and set obj's position. 
 var el = document.getElementById(obj);
 el.style.left = oEvent.screenX - 350;
 el.style.top = oEvent.screenY - 420; 
 toggle(obj, "Show");
}