/* Script for manipulating the timeline */

// updates the timelines with an ajax call to the database
function ajaxFunction()  {
	var windowWidth = findWidth();
	addtoquerystring();  // update the end of the query string
	var ajaxRequest;
	
	//Browser Support Code
	try  {
		// Opera 8.0+, Firefox, Safari
		ajaxRequest = new XMLHttpRequest();
	} catch (e)  {
		// Internet Explorer
		try  {
			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e)  {
			try {
				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e)  {
				// Something went wrong
				alert("Your browser is not very good");
				return false;
			}
		}
	}
	
	// get the year parameters from the slider
	var startYear = $('#slider').slider('values', 0);
	var endYear = $('#slider').slider('values', 1);

	// Create a function that will receive data sent from the server
	ajaxRequest.onreadystatechange = function()  {
		if(ajaxRequest.readyState == 4)  {
			var ajaxDisplay = document.getElementById('timeline_display');
			ajaxDisplay.innerHTML = getYearLabels(startYear, endYear, windowWidth, 'lines');
			ajaxDisplay.innerHTML += ajaxRequest.responseText;
			var yearlabels = document.getElementById('year_labels');
			yearlabels.innerHTML = getYearLabels(startYear, endYear, windowWidth, 'years');
		}
	}
	var queryString = "?start=" + startYear + "&end=" + endYear + "&windowwidth=" + windowWidth + "&windowheight=" + currentHeight + addon; //create query string
	ajaxRequest.open("GET", "timelinemaker.php" + queryString, true);
	ajaxRequest.send(null);
}

// select or deselect all checkboxes under a header box
function chooseall(id)  {
	var string = "#" + id + " > input";
	var array = $(string);
	if (array[0].checked)  {
		for (i = 1; i < array.length; i++)  {
			array[i].checked = true;
		}	
	}  else  {
		for (i = 1; i < array.length; i++)  {
			array[i].checked = false;
		}
	}
	addtoquerystring();
		
}

// show or hide ui elements
function showhide()  {
	var name = document.getElementById('bottom_ui').className;
	var winHeight = findHeight();
	if (name == 'shown')  {
		document.getElementById('bottom_ui').className = 'hidden';
		var newHeight = winHeight + 'px';
		setStyle(document.getElementById("timeline_display"), 'height', newHeight);
		currentHeight = winHeight;
		
	} else  {
		document.getElementById('bottom_ui').className = 'shown';
		setStyle(document.getElementById("timeline_display"), 'height', '500px');
		currentHeight = 500;
	}
	orientSpans();
	
	var startYear = $('#slider').slider('values', 0);
	var endYear = $('#slider').slider('values', 1);
	var windowWidth = findWidth();
	ajaxFunction();
	
}

// retrieves appropriate year labels for the timeline
function getYearLabels(startyear, endyear, windowWidth, type)  {
	var years = getMiddleDates(startyear, endyear);  // function that finds the appriopriate year labels to display based on the year range
	var htmlstring = '<div class="years" style="left:84px;">' + years[0] + '</div>'; // the first year is always in the same place
	var linesstring ='';
	linesstring += '<div class="lines" style="left:90px; height:' + currentHeight + 'px;"></div>';  
	var arraysize = years.length;
	var pixperyear = (windowWidth - 100)/(endyear - startyear);
	
	// walk through array of years, placing each one in the correct place using absolute positioning
	for(count = 1; count < arraysize - 1; count++)  {
		var leftpos = ((years[count] - startyear) * pixperyear) + 84;
		
		// if years would overlap with either the first or last year, don't show them
		if(leftpos >= 108 && leftpos <= (windowWidth - 40))  {
			htmlstring = htmlstring + '<div class="years" style="left:' + leftpos + 'px;">' + years[count] + '</div>';
			linepos = leftpos + 5;
			linesstring += '<div class="lines" style="left:' + linepos + 'px; height:' + currentHeight + 'px;"></div>';
		}
	}
	// last year is always in same place relative to window width
	var lastspot = windowWidth - 16;
	htmlstring = htmlstring + '<div class="years" style="left:' + lastspot + 'px;">' + endyear + '</div>';
	if (type == 'years')  {
		return htmlstring;
	}  else  {
		return linesstring;
	}
}

// used to change the style of html objects
function setStyle(obj, style, value)  {
	getRef(obj).style[style]=value;
}

// helper for setStyle
function getRef(obj)  {
	return(typeof obj == "string") ?
		document.getElementById(obj) : obj;
}

// re-orient the positioning of popup boxes after drag/drop, based on current position of box
function orientSpans()  {
	var plusboxes = $('.expand');
	for(count = 0; count < plusboxes.length; count++)  {
		var spans = plusboxes[count].getElementsByTagName('span');
		for(i = 0; i < spans.length; i++)  {
			var toppos = getPageCoords(plusboxes[count]);
			if(toppos < (currentHeight - 200))  {
				setStyle(spans[i], 'top', '5px');
			}  else  {
				if (spans[i].getElementsByTagName('img').length != 0)  {
					setStyle(spans[i], 'top', '-238px');
				}  else   {
					setStyle(spans[i], 'top', '-58px');
				}
			}
		}
		
	}
}
// determine width of user's window, change the timeline area to fit into that width
function findWidth()  {
	var winWidth = document.all?document.body.clientWidth:window.innerWidth - 20;
	var displayarea = document.getElementById("timeline_display");
	var newwidth = winWidth + 'px';
	setStyle(displayarea, 'width', newwidth);
	return winWidth;
}

// find the current height of the user's browser window
function findHeight()  {
	var winHeight = document.all?document.body.clientHeight:window.innerHeight - 75;
	return(winHeight);
}

// get the offset from the top of the page of an object
function getPageCoords (element) {
	var toppos = 0;
	while (element) {
		toppos += element.offsetTop;
		element = element.offsetParent;
	}
	return toppos;
}