<?php
	$pageTitle = "Era Timeline";
	include("../header.php");
?>
					<script type="text/javascript">
					<!--
						var browserSupportsCanvas = true;

						function createShadowGradient(context, x1, y1, x2, y2)
						{
							var shadowGradient = context.createLinearGradient(x1, y1, x2, y2);
							shadowGradient.addColorStop(0.0, "rgba(255, 255, 255, 0.0)");
							shadowGradient.addColorStop(1.0, "rgba(0, 0, 0, 0.5)");
							return shadowGradient;						
						}

						function saveTimeline()
						{
							//var strDataURI = canvas.toDataURL();
							//open(strDataURI);
							open(document.getElementById("timeline-image").src);
						}

						function drawTimelineToScale(drawToScale)
						{
							if (drawToScale) {
								document.getElementById("timeline-image").src = "../images/era_timeline_scaled.png";

								myToPx = 10;
								document.getElementById("timeline-canvas").width = 4090;
								precambrianLength = ACTUAL_PRECAMBRIAN_LENGTH;
								drawTimeline();
							} else {
								document.getElementById("timeline-image").src = "../images/era_timeline.png";

								myToPx = 0.17
								document.getElementById("timeline-canvas").width = 3700;
								precambrianLength = DEFAULT_PRECAMBRIAN_LENGTH;
								drawTimeline();
							}
						}
					
						function drawTimeline()
						{
							ctx.strokeStyle = "white";
							ctx.font = "14px Arial";

							// Draw Precambrian
							ctx.fillStyle = PRECAMBRIAN_COLOR;
							ctx.fillRect(0, 0, precambrianLength, PRECAMBRIAN_HEIGHT);
							ctx.fillStyle = "white";
							ctx.fillText(PRECAMBRIAN_NAME, 5, 20);
							ctx.fillText(PRECAMBRIAN_YEARS, 5, 35);
							ctx.moveTo(precambrianLength, 0);
							ctx.lineTo(precambrianLength, PRECAMBRIAN_HEIGHT);
							ctx.stroke();

							// Draw shadows on eras and periods
							ctx.fillStyle = createShadowGradient(ctx, 0, 0, 0, PRECAMBRIAN_HEIGHT);
							ctx.fillRect(0, 0, precambrianLength, PRECAMBRIAN_HEIGHT);
							
							drawEras();
							drawPeriods();							
						}
						
						function drawEras()
						{
							// Draw eras
							var startX = precambrianLength;
							for (var i = 0; i < ERA_LENGTHS.length; i++) {
								ctx.fillStyle = ERA_COLORS[i];
								ctx.fillRect(startX, 0, ERA_LENGTHS[i] / myToPx, ERA_HEIGHT);
								// Draw name
								ctx.fillStyle = "white";
								ctx.fillText(ERA_NAMES[i], startX + 5, 20);
								ctx.fillText(ERA_YEARS[i], startX + 5, 35);
								startX += ERA_LENGTHS[i] / myToPx;
								// Draw line divider
								ctx.moveTo(startX, 0);
								ctx.lineTo(startX, ERA_HEIGHT);
								ctx.stroke();
							}

							// Shadow gradient
							ctx.fillStyle = createShadowGradient(ctx, precambrianLength, 0, precambrianLength, ERA_HEIGHT);//eraShadowGradient;
							ctx.fillRect(precambrianLength, 0, canvas.width, ERA_HEIGHT);
						}
						
						function drawPeriods()
						{
							// Draw periods
							startX = precambrianLength;
							for (var i = 0; i < PERIOD_LENGTHS.length; i++) {
								for (var j = 0; j < PERIOD_LENGTHS[i].length; j++) {
									ctx.fillStyle = PERIOD_COLORS[i][j];
									ctx.fillRect(startX, ERA_HEIGHT, PERIOD_LENGTHS[i][j] / myToPx, PERIOD_HEIGHT);
									// Draw name
									ctx.fillStyle = "white";
									ctx.fillText(PERIOD_NAMES[i][j], startX + 5, ERA_HEIGHT + 20);
									ctx.fillText(PERIOD_YEARS[i][j], startX + 5, ERA_HEIGHT + 35);
									startX += PERIOD_LENGTHS[i][j] / myToPx;
									// Draw line divider
									ctx.moveTo(startX, ERA_HEIGHT);
									ctx.lineTo(startX, ERA_HEIGHT + PERIOD_HEIGHT);
									ctx.stroke();
								}
							}
							
							// Shadow gradient
							ctx.fillStyle = createShadowGradient(ctx, precambrianLength, ERA_HEIGHT, precambrianLength, ERA_HEIGHT + PERIOD_HEIGHT);
							ctx.fillRect(precambrianLength, ERA_HEIGHT, canvas.width, PERIOD_HEIGHT);
						}
					-->
					</script>

					<div id="main-content">
						<p></p>

						<p style="text-indent: 0;">This timeline shows the periods and eras drawn to scale with the exception
						of the Precambrian, which was very large, and the Quaternary Period, which was too small to fit its name.
						If you want to see them all scaled to proportionally, check the box below. It will give you an idea of
						how large the Precambrian really was in comparison to the rest.
							<form name="timelineForm" style="margin-left: 10px;">
								<input type="checkbox" name="drawToScaleCheckBox"
										onclick="drawTimelineToScale(document.timelineForm.drawToScaleCheckBox.checked);" /> Draw all to scale<br />
						<script type="text/javascript">
						<!--
							if (browserSupportsCanvas) {
								document.writeln("Or <button onclick=\"saveTimeline()\">save</button> the timeline as an image.");
							}
						-->
						</script>
							</form>
						</p>

						<div id="canvas-container" style="width: 550px; height: 125px; overflow: auto;">
							<canvas id="timeline-canvas" width="3700" height="100" style="background-color: white;">
								<img id="timeline-image" src="../images/era_timeline.png" />
							</canvas>
						</div>

						<script type="text/javascript">
						<!--
							var canvas = document.getElementById("timeline-canvas");
							var ctx = canvas.getContext("2d");

							// Adjust Quaternary Period so that its name fits
							var QUATERNARY_ADJUSTMENT = 20;

							// Lengths and colors of eras and periods
							// Lengths are in millions of years and are converted
							// to pixels by dividing by myToPx
							var ERA_LENGTHS = [322, 185, 63 + QUATERNARY_ADJUSTMENT]; // Cenozoic Era = 63
							var ERA_COLORS = ["#202045", "#2D1C43", "#1A2F40"];
							var ERA_NAMES = ["Paleozoic Era", "Mesozoic Era", "Cenozoic Era"];
							var ERA_YEARS = ["570 mya - 248 mya", "248 mya - 63 mya", "63 mya - Present"];

							var PERIOD_LENGTHS = [[70, 65, 25, 50, 70, 42],[43, 67, 75],[39, 22, 2 + QUATERNARY_ADJUSTMENT]]; // Quaternary Period = 2
							var PERIOD_COLORS = [["#4b1935", "#5d2020", "#30173e", "#44571e", "#214d1a", "#143a36"],["#46581e", "#5b1f23", "#30173e"],["4b1935", "#241b40", "#5d5d20"]];
							var PERIOD_NAMES = [["Cambrian Period", "Ordovician Period", "Silurian Period", "Devonian Period", "Carboniferous Period", "Permian Period"],["Triassic Period", "Jurassic Period", "Cretaceous Period"],["Paleogene Period", "Neogene Period", "Quaternary Period"]];
							var PERIOD_YEARS = [["570 mya - 500 mya", "500 mya - 435 mya", "435 mya - 410 mya", "410 mya - 360 mya", "360 mya - 290 mya", "290 mya - 248 mya"],["248 mya - 205 mya", "205 mya - 138 mya", "138 mya - 63 mya"],["63 mya - 24 mya", "24 mya - 2 mya", "2 mya - Present"]];

							// Height of the rectangles
							var ERA_HEIGHT = 50;
							var PERIOD_HEIGHT = ERA_HEIGHT;

							// Million Years to Pixels
							var myToPx = 0.17;

							// Precambrian
							var lengthWithoutPrecambrian = 0;
							for (var i = 0; i < ERA_LENGTHS.length; i++)
								lengthWithoutPrecambrian += ERA_LENGTHS[i];

							var DEFAULT_PRECAMBRIAN_LENGTH = canvas.width - lengthWithoutPrecambrian / myToPx;
							var ACTUAL_PRECAMBRIAN_LENGTH = 4030;

							var precambrianLength = DEFAULT_PRECAMBRIAN_LENGTH;
							var PRECAMBRIAN_COLOR = "#303030";
							var PRECAMBRIAN_NAME = "Precambrian";
							var PRECAMBRIAN_YEARS = "4,600 mya - 570 mya";
							var PRECAMBRIAN_HEIGHT = ERA_HEIGHT + PERIOD_HEIGHT;

							drawTimeline();
						-->
						</script>

						<p style="margin-top: 40px;">If you prefer to see it in list form, here is an outline of the timeline:</p>
						<ul>
							<li>Precambrian 4,600 mya - 570 mya</li>
							<ul>
								<li>Earth forms 4.6 bya</li>
							</ul>
							<li>Paleozoic Era</li>
								<ul>
									<li>Cambrian Period 570 mya - 500 mya</li>
									<li>Ordovician Period 500 mya - 435 mya</li>
									<li>Silurian Period 435 mya - 410 mya</li>
									<li>Devonian Period 410 mya - 360 mya</li>
									<li>Carboniferous Period 360 mya - 290 mya</li>
									<li>Permian Period 290 mya - 248 mya</li>
									<ul>
										<li>Largest extinction ever 248 mya</li>
										<ul>
											<li>70% of landanimals</li>
											<li>95% of marine animals</li>
										</ul>
									</ul>
								</ul>
							<li>Mesozoic Era</li>
							<ul>
								<li>Triassic Period 248 mya - 205 mya</li>
								<li>Jurassic Period 205 mya - 138 mya</li>
								<li>Cretaceous Period 65 138 mya - 63 mya</li>
									<ul>
										<li>Dinosaurs become extinct 63 mya</li>
									</ul>
								</ul>
								<li>Cenozoic Era</li>
								<ul>
									<li>Paleogene Period 63 mya - 24 mya</li>
									<li>Neogene Period 24 mya - 2 mya</li>
									<li>Quaternary Period 2 mya - Present</li>
									<ul>
										<li>Homo sapiens evolve in eastern Africa 190,000 years ago</li>
									</ul>
								</ul>
							</ul>

						<p>To learn more, visit the timeline on <a href="http://science.nationalgeographic.com/science/prehistoric-world/prehistoric-time-line.html">National Geographic</a>.</p>
						
						<div id="sources">
							<h5>Sources:</h5>

							<h6>National Geographic</h6>
							<a href="http://science.nationalgeographic.com/science/prehistoric-world/prehistoric-time-line.html">science.nationalgeographic.com/science/prehistoric-world/prehistoric-time-line.html</a>
						</div>
					</div> <!-- closes main-content --></td>
<?php
	include("../footer.php");
?>