<?

	include($_SERVER['DOCUMENT_ROOT'] . "/system_files/functions.php");
	
	$focusDate       = false;
	$timelineID      = false;
	$focusDate       = date("Y");
	$errorMessage    = false;
	$yearArray       = array();
	
	$jsonString      = false;
	$jsonArray       = array();
	
	$showPeople      = true;
	$showEvents      = true;
	$showCitations   = true;
	$showConceptions = true;
	
	
	
	//first we decide which timeline to show by getting the supplied ID
	if( isset($_GET['id']) ){
		
		if( is_numeric($_GET['id']) && $_GET['id']>0 ){
		
			//the timelineID appears valid so grab it
			$timelineID= (integer) $_GET['id'];
			
			//now we decide whether to filter the items we show
			if( isset($_GET['people']) || isset($_GET['events']) || isset($_GET['citations']) || isset($_GET['conceptions']) ){
				
				if( isset($_GET['people']) && $_GET['people']=="people" ){ $showPeople=true; } else { $showPeople=false; }
				if( isset($_GET['events']) && $_GET['events']=="events" ){ $showEvents=true; } else { $showEvents=false; }
				if( isset($_GET['citations']) && $_GET['citations']=="citations" ){ $showCitations=true; } else { $showCitations=false; }
				if( isset($_GET['conceptions']) && $_GET['conceptions']=="conceptions" ){ $showConceptions=true; } else { $showConceptions=false; }
			
			}
			
			
			
			
			//now that the ID *appears* to be valid let's try to grab the items that belong to this timeline
			$sqlQuery="SELECT title, description, contributor, CONCAT(MONTHNAME(created), ' ', DAY(created), ', ', YEAR(created)) FROM Timelines WHERE id=$timelineID LIMIT 1";
			
			$result=database_query($sqlQuery);
			
			if($result && mysql_num_rows($result)==1){
				
				//we got our row so store the info
				$myrow=mysql_fetch_row($result);
				
				$timelineTitle=$myrow[0];
				$timelineDescription=$myrow[1];
				$timelineContributor=$myrow[2];
				$timelineCreated=$myrow[3];
				
				
				
				/****************************************************
				now we need to get all the objects for this timeline.
				****************************************************/
				
				
				
				/****** start with concepts ******/
				if($showConceptions){
					
					$sqlCitation="SELECT TimelineObjects.type, TimelineObjects.objectID, TimelineObjects.timelineID, ConceptsBeta.id, ConceptsBeta.concept, ConceptsBeta.year, ConceptsBeta.conception FROM TimelineObjects, ConceptsBeta WHERE ConceptsBeta.id=TimelineObjects.objectID AND TimelineObjects.timelineID=$timelineID AND TimelineObjects.type='C' ORDER BY ConceptsBeta.concept ASC";
					$resultCitation=database_query($sqlCitation);
					if($resultCitation && mysql_num_rows($resultCitation)>=1){
						
						//we found some citations to include
						while($myrow=mysql_fetch_row($resultCitation)){
							
							//create a json entry into an array for this	
							$jsonArray[] = "{ 'start': '$myrow[5]', 'title': '" . preg_replace("/[\n\r]/", " ", htmlspecialchars($myrow[4], ENT_QUOTES)) . "', 'description': '" . trim(substr( preg_replace("/[\n\r]/", " ", htmlspecialchars(convertURLs($myrow[6], "_blank"), ENT_QUOTES)), 0, 500)) . "...', 'link': '/toolkit/conceptDatabase/viewConcept.php?id=$myrow[3]', 'durationEvent': false, 'icon': '/system_files/icons/document-icon-small.gif', 'color': '#000044' }";
							$yearArray[] = $myrow[5];
													
						}
							
						
					}
				
				}
				
				
				
				
				/****** now with citations ******/
				if($showCitations){
					
					$sqlCitation="SELECT TimelineObjects.type, TimelineObjects.objectID, TimelineObjects.timelineID, Citations.id, Citations.citation, Citations.date, Citations.description, YEAR(Citations.date) FROM TimelineObjects, Citations WHERE Citations.id=TimelineObjects.objectID AND TimelineObjects.timelineID=$timelineID AND TimelineObjects.type='T' ORDER BY Citations.citation ASC";
					$resultCitation=database_query($sqlCitation);
					if($resultCitation && mysql_num_rows($resultCitation)>=1){
						
						//we found some citations to include
						while($myrow=mysql_fetch_row($resultCitation)){
							
							//create a json entry into an array for this	
							$jsonArray[] = "{ 'start': '$myrow[5]', 'title': '" . preg_replace("/[\n\r]/", " ", htmlspecialchars($myrow[4], ENT_QUOTES)) . "', 'description': '" . preg_replace("/[\n\r]/", " ", htmlspecialchars(convertURLs($myrow[6], "_blank"), ENT_QUOTES)) . "', 'durationEvent': false, 'icon': '/system_files/icons/document-icon-small.gif', 'color': '#004400' }";
							$yearArray[] = $myrow[7];
													
						}
							
						
					}
				
				}
				
				
				
				/****** now we do the people ******/
				if($showPeople){
					
					$sqlPeople="SELECT TimelineObjects.type, TimelineObjects.objectID, TimelineObjects.timelineID, TimelinePeople.id, TimelinePeople.name, TimelinePeople.start, TimelinePeople.end, TimelinePeople.description, TimelinePeople.span, CONCAT(MONTHNAME(TimelinePeople.start), ' ', DAY(TimelinePeople.start), ', ', YEAR(TimelinePeople.start)) as startDate, CONCAT(MONTHNAME(TimelinePeople.end), ' ', DAY(TimelinePeople.end), ', ', YEAR(TimelinePeople.end)) as endDate, YEAR(TimelinePeople.start), YEAR(TimelinePeople.end) FROM TimelineObjects, TimelinePeople WHERE TimelinePeople.id=TimelineObjects.objectID AND TimelineObjects.timelineID=$timelineID AND TimelineObjects.type='P' ORDER BY TimelinePeople.name ASC";
					$resultPeople=database_query($sqlPeople);
					if($resultPeople && mysql_num_rows($resultPeople)>=1){
						
						//we found some people to include
						while($myrow=mysql_fetch_row($resultPeople)){
							
							//create a json entry into an array for this	
							if($myrow[8]){
								
								//show birth and death
								$jsonArray[] = "{ 'start': '$myrow[5]', 'end': '$myrow[6]', 'title': '" . preg_replace("/[\n\r]/", " ", htmlspecialchars($myrow[4], ENT_QUOTES)) . "', 'description': '" . preg_replace("/[\n\r]/", " ", htmlspecialchars("$myrow[9] - $myrow[10].  " . convertURLs($myrow[7], "_blank"), ENT_QUOTES)) . "', 'durationEvent': true, 'icon': '/system_files/icons/person.gif', 'color': '#ff9999' }";
								$yearArray[] = $myrow[11];
								$yearArray[] = $myrow[12];
								
							}
							else{
								
								//just show birth and still alive today
								$jsonArray[] = "{ 'start': '$myrow[5]', 'end': '" . date("Y-m-d") . " 00:00:00', 'title': '" . preg_replace("/[\n\r]/", " ", htmlspecialchars($myrow[4], ENT_QUOTES)) . "', 'description': '" . preg_replace("/[\n\r]/", " ", htmlspecialchars("Born: $myrow[9].  " . convertURLs($myrow[7], "_blank"), ENT_QUOTES)) . "', 'durationEvent': true, 'icon': '/system_files/icons/person.gif', 'color': '#ff9999' }";
								$yearArray[] = $myrow[11];
								
							}
						
						}
						
					}
					
				}
				
				
				
				
				/****** now we do the events ******/
				if($showEvents){
					
					$sqlEvents="SELECT TimelineObjects.type, TimelineObjects.objectID, TimelineObjects.timelineID, TimelineEvents.id, TimelineEvents.title, TimelineEvents.start, TimelineEvents.end, TimelineEvents.description, TimelineEvents.span, CONCAT(MONTHNAME(TimelineEvents.start), ' ', DAY(TimelineEvents.start), ', ', YEAR(TimelineEvents.start)) as startDate, CONCAT(MONTHNAME(TimelineEvents.end), ' ', DAY(TimelineEvents.end), ', ', YEAR(TimelineEvents.end)) as endDate, YEAR(TimelineEvents.start), YEAR(TimelineEvents.end) FROM TimelineObjects, TimelineEvents WHERE TimelineEvents.id=TimelineObjects.objectID AND TimelineObjects.timelineID=$timelineID AND TimelineObjects.type='E' ORDER BY TimelineEvents.title ASC";
					$resultEvents=database_query($sqlEvents);
					if($resultEvents && mysql_num_rows($resultEvents)>=1){
						
						//we found some events to include
						while($myrow=mysql_fetch_row($resultEvents)){
							
							//create a json entry into an array for this	
							if($myrow[8]){
								
								//show start and end
								$jsonArray[] = "{ 'start': '$myrow[5]', 'end': '$myrow[6]', 'title': '" . preg_replace("/[\n\r]/", " ", htmlspecialchars($myrow[4], ENT_QUOTES)) . "', 'description': '" . preg_replace("/[\n\r]/", " ", htmlspecialchars("$myrow[9] - $myrow[10].  " . convertURLs($myrow[7], "_blank"), ENT_QUOTES)) . "', 'durationEvent': true, 'icon': '/system_files/icons/calendar-10x10.jpg', 'color': '#000000' }";
								
								$yearArray[] = $myrow[11];
								$yearArray[] = $myrow[12];
								
							}
							else{
								
								//just show start as a non-duration event
								$jsonArray[] = "{ 'start': '$myrow[5]', 'title': '" . preg_replace("/[\n\r]/", " ", htmlspecialchars($myrow[4], ENT_QUOTES)) . "', 'description': '" . preg_replace("/[\n\r]/", " ", htmlspecialchars("$myrow[9].  " . convertURLs($myrow[7], "_blank"), ENT_QUOTES)) . "', 'durationEvent': false, 'icon': '/system_files/icons/calendar-10x10.jpg', 'color': '#000000' }";
								
								$yearArray[] = $myrow[11];
								
							}
							
						}
						
					}
			
				}
				
				
				//now that we have all the dates lets get the arrays in order
				$sortTest=sort($yearArray);
				
				if($sortTest) $focusDate=$yearArray[count($yearArray)-1]; 
				$earliestYear=$yearArray[0];
				$latestYear=$yearArray[count($yearArray)-1];
				
				
			}
			else{
				
				//we couldn't find the timeline in the database
				$errorMessage[]="We could not find a timeline with the ID you supplied.  Please check the ID and try again."; 
				
			}
			
			
			
			
			
		}
		else{
		
			//the timeline ID is invalid or bad
			$errorMessage[]="There appears to be an error in the timeline ID you submitted.  Please double check and try it again.";
			
		}
	
	}
	else{
		
		$errorMessage[]="You must supply a timeline ID so we know which timeline you wish to view.  Please check the ID and try again.";
		
	}
	
	
	
	
	
	
?>



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
    	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
        <title><? if($timelineTitle){ echo "Timeline: " . $timelineTitle; } else { echo "Timeline Viewer"; } ?></title>
        
     	<script>
			Timeline_ajax_url="/system_files/timeline/timeline_ajax/simile-ajax-api.js";
			Timeline_urlPrefix='/system_files/timeline/timeline_js/';       
			Timeline_parameters='bundle=true';
		</script>
		<script src="/system_files/timeline/timeline_js/timeline-api.js" `type="text/javascript"></script>
        <script type="text/javascript" src="/system_files/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="/system_files/qtip/qtip-1.0.0-rc3.min.js"></script>
		<script type="text/javascript" src="/system_files/jquery-ui.min.js"></script>
     	
		
		<script>
		
		
			/***************************
			customization of bubble
			***************************/
			
			
			var tl;
 			function onLoad() {
   			
				//create a data variable to store all the datapoints
				var eventSource = new Timeline.DefaultEventSource();
				var theme = Timeline.ClassicTheme.create();
				theme.event.bubble.width=300;
				
				
				var bandInfos = [
     				
					//create the top band
					Timeline.createBandInfo({
         				eventSource:    eventSource,
         				date:           "Jan 01 <? echo $focusDate; ?> 00:00:00 GMT",
						width:          "80%",
						theme:			theme, 
         				intervalUnit:   Timeline.DateTime.YEAR, 
         				intervalPixels: 250
     				}),
     				
					
					//create the bottom smaller band
					Timeline.createBandInfo({
         				eventSource:    eventSource,
         				date:           "Jan 01 <? echo $focusDate; ?> 00:00:00 GMT",
						width:          "20%", 
         				intervalUnit:   Timeline.DateTime.DECADE, 
        				intervalPixels: 150,
						layout: 'overview'
     				})
   				];
   			
				
				//this part syncs the two bands and tells the second one to highlight what is in the first
				bandInfos[1].syncWith = 0;
   				bandInfos[1].highlight = true;
				
				
				//actually loads the bands onto the timeline
				tl = Timeline.create(document.getElementById("my-timeline"), bandInfos);
				
				//place the XML datapoints onto the timeline
				//Timeline.loadXML("<? //echo $xmlTarget; ?>", function(xml, url) { eventSource.loadXML(xml, url); })
				
				
				
				
				var timelineDataJSON = { 
  					'wiki-url':"http://www.wikipedia.com/", 
  					'wiki-section':"None", 
  					'dateTimeFormat': 'Gregorian',
  					'events': [
    					
						<?
						
							$jsonString=implode(", ", $jsonArray);
							echo $jsonString;
							
						/*
						{
       						'start':"Sat May 20 1961 00:00:00 GMT-0600",
       						'title':"'Bay of Pigs' Invasion",
       						'durationEvent':false // Notes: not "false". And no trailing comma.
     					},
						{
       						'start':"Wed May 01 1963 00:00:00 GMT-0600" ,
       						'end':"Sat Jun 01 1963 00:00:00 GMT-0600" ,
       						'durationEvent':true,
       						'title':"Oswald moves to New Orleans",
       						'description':"Oswald moves to New Orleans, and finds employment at the William B. Riley Coffee Company. <i>ref. Treachery in Dallas, p 320</i>"
     					}
						*/
						
						?>
					]    // Note: Do NOT include a trailing comma! (Breaks on IE)
				}
				
				eventSource.loadJSON(timelineDataJSON, document.location.href);
				
			}

 			var resizeTimerID = null;
 			function onResize() {
     			if (resizeTimerID == null) {
         	
					resizeTimerID = window.setTimeout(function() {
             			resizeTimerID = null;
             			tl.layout();
         	
					}, 500);
     		
				}
 			
			}
			
			
			
			function moveToYear(date) {

				tl.getBand(0).scrollToCenter(Timeline.DateTime.parseGregorianDateTime(date));
			
			}
			
			function scrollTimeline(pixels) {

				tl.getBand(1)._autoScroll(pixels);
			
			}
			
			
			function timelineMenuJump(){
				
				moveToYear(document.getElementById("itemJumpMenu").value);	
				
			}
			
			
			
			
			
			//for the pop up bubbles not part of the timeline - qTIP
			$(document).ready(function(){
			
				$('.menuItem').each(function(){
      
	  				$(this).qtip({
	
						content: $(this).attr('alt'), // Use the ALT attribute of the area map
						style: { 
							width: 500,
							padding: 10,
							textAlign: 'left',
							border: {
								width: 5,
								radius: 5
							},
							tip: 'topRight',
							name: 'red' // Inherit the rest of the attributes from the preset dark style
						},
		
						position: {
							corner: {
								target: 'bottomLeft',
								tooltip: 'topRight'
							},
							adjust: { 
								x: 3,
								y: 0
							}
						}
					});
				});
				
				
				$('.menuLowerLeft').each(function(){
      
	  				$(this).qtip({
	
						content: $(this).attr('alt'), // Use the ALT attribute of the area map
						style: { 
							width: 300,
							padding: 10,
							textAlign: 'left',
							background: '#6296fc',
							color: '#FFFFFF',
							border: {
								width: 5,
								radius: 5,
								color: '#2a5faa'
							},
							tip: 'bottomLeft',
							name: 'blue' // Inherit the rest of the attributes from the preset dark style
						},
		
						position: {
							corner: {
								target: 'topRight',
								tooltip: 'bottomLeft'
							},
							adjust: { 
								x: 0,
								y: 0
							}
						}
					});
				});
				
				
				
				$('.menuLowerRight').each(function(){
      
	  				$(this).qtip({
	
						content: $(this).attr('alt'), // Use the ALT attribute of the area map
						style: { 
							width: 300,
							padding: 10,
							textAlign: 'left',
							background: '#6296fc',
							color: '#FFFFFF',
							border: {
								width: 5,
								radius: 5,
								color: '#2a5faa'
							},
							tip: 'bottomRight',
							name: 'blue' // Inherit the rest of the attributes from the preset dark style
						},
		
						position: {
							corner: {
								target: 'topLeft',
								tooltip: 'bottomRight'
							},
							adjust: { 
								x: 0,
								y: 0
							}
						}
					});
				});
				
				
				
			});
			
			
		</script>
		
        
        
        <style>
			body, html {
				font-family: 'Segoe UI', Georgia, Verdana, 'Times New Roman', Times, serif;
				font-size: 12px;
				margin: 0px;
				padding: 0px;
			}
			.timeline-event-bubble-time {
    			display: none;
			}
			.timeline-event-bubble-wiki {
    			visibility: hidden; 
				display: none;
			}
			.timeline-event-bubble-title {
    			font-family: "Segoe UI", Georgia, Verdana, "Times New Roman", Times, serif;
    			font-size:16px;
			}
			.timeline-event-bubble-title a {
    			color:#0066FF;
    			text-decoration:none;
			}
			.timeline-event-bubble-body {
    			font-family: "Segoe UI", Georgia, Verdana, "Times New Roman", Times, serif;
    			font-size:14px;
	
			}
		</style>
     	
		
		
		
		
	</head>
   
   
	<body onload="onLoad();" onresize="onResize();">
    
    
    	<div id="masthead" style="width: 100%; height: 94px; margin: 0px; padding: 0px; border: none; background-image: url('./images/header-background.png'); background-repeat: repeat-x; overflow: hidden;">
        	
            <div style="float: left; margin-left: 15px;"><img src="./images/header-sclcr.png" /></div>
            <div style="float: right; margin-right: 15px;"><img src="./images/header-logo.png" /></div>
        
        </div>
        
        <div style="clear: both;"></div>
        
        
        
        
        <?
		
			//if there are no errors then we actually process things
			if(!$errorMessage){
				
		?>
        
        <div id="masthead" style="width: 100%; margin: 0px; padding: 0px; background-color: #A6CAF0; overflow: hidden; border-bottom: 2px solid #0066FF; vertical-align: bottom;">
        	<div style="float: left; margin-left: 15px; font-size: large; font-weight: bold; vertical-align: bottom;">Timeline: <i><? echo $timelineTitle; ?></i></div>
            <div style="float: right; margin-right: 15px; font-size: small; vertical-align: bottom;">
            	[<a href="#" class="menuItem" alt="<? echo htmlspecialchars($timelineDescription); ?>">Description</a>] 
                [<a href="#" class="menuItem" alt="Contributed by <? echo htmlspecialchars($timelineContributor); ?> on <? echo $timelineCreated; ?>">Contribution</a>]
				<a href="#" class="menuItem" alt="<p><b>Using the Timeline</b></p><p>Use your mouse to drag either the larger upper band of the timeline or the smaller lower band of the timelines.  You can also click the blue arrows below the timeline to move 10 years at a time.  The arrow keys on your keyboard work as well.</p>"><img src="system_files/icons/help.png" width="12" height="12" /></a>
			</div>
        
        </div>
	
		<div style="clear: both; margin-bottom: 1px;"></div>
        
		<div id="my-timeline" style="height: 500px; border: 1px solid #aaa; margin: 0px; font-family: 'Segoe UI', Georgia, Verdana, 'Times New Roman', Times, serif; font-size: 12px;"></div>
		
        <div style="height: 100px; bottom: 0px; border: 1px solid #aaa; margin: 0px;">
        
			<div style="float: left; width: 49%; margin: 0px; overflow: hidden;">
				
				<a href="#" onclick="scrollTimeline(150); return false" alt="Scroll the timeline ten years back" class="menuLowerLeft"><img src="/template/arrow-blue-left.gif" /></a>
			
				<div style="padding-left: 15px; margin-top: 15px;">
					<form action="viewTimeline.php" method="get" name="viewTimelineForm">
						<b>Show:</b><br /> 
						<input name="people" type="checkbox" value="people" <? if($showPeople) echo "checked"; ?> />People 
                    	<input name="events" type="checkbox" value="events" <? if($showEvents) echo "checked"; ?> />Events 
                    	<input name="citations" type="checkbox" value="citations" <? if($showCitations) echo "checked"; ?> />Citations
						<input name="conceptions" type="checkbox" value="conceptions" <? if($showConceptions) echo "checked"; ?> />Concepts 
						<input type="image" src="/system_files/icons/update-16x16.png" name="submit" alt="Update the timeline with these new settings" class="menuLowerLeft">
						<input name="id" type="hidden" value="<? echo $timelineID; ?>">
					</form>
				</div>
				
			</div>
			
			
	
			<div style="float: right; width: 49%; margin: 0px; overflow: hidden; text-align: right;">
				
				<a href="#" onclick="scrollTimeline(-150); return false" alt="Scroll the timeline ten years forward" class="menuLowerRight"><img src="/template/arrow-blue-right.gif" alt="Scroll ten years forward" /></a>
			
				<div style="padding-right: 15px; margin-top: 15px;">
				
					<form action="browseTimelines.php" method="get" name="browseTimelinesForm">
    		    		<b>Move to Timeline Item:</b><br />
						
						<a href="#" onclick="moveToYear('<? echo $earliestYear; ?>'); return false" class="menuLowerRight" alt="View the earliest item on the timeline">Earliest</a> |
						<a href="#" onclick="moveToYear('<? echo $latestYear; ?>'); return false" class="menuLowerRight" alt="View the most recent item on the timeline">Latest</a>  
						<select name="itemJumpMenu" id="itemJumpMenu" onChange="timelineMenuJump()" class="menuLowerRight" alt="Jump directly to a specific date on the timeline">
						
							<?
							
								foreach($yearArray as $yearItem){
					
									echo "<option value='$yearItem' class='menuItem' >$yearItem</option>\n";
									
								}
								
							?>
						
						</select>
						
        			</form>	
				
				
				</div>
			
			</div>
			
			
        </div>
        
        <?
		
			}
			else{
				
				//there was an error so we tell them what it was
				echo "<div>";
				foreach($errorMessage as $error){
					
					echo "<p>$error</p>\n";
					
				}
				echo "</div>\n";
				
			}
			
		?>
        
        <noscript>
			This page uses Javascript to show you a Timeline. Please enable Javascript in your browser to see the full page. Thank you.
		</noscript>
        
        
	
	
	
	
	</body>

</html>