// JavaScript Document
var topBar = document.getElementById('top_bar');
var topBarGlossy = document.getElementById('top_bar_glossy');
var loading = document.getElementById('loading');
var loading_info = document.getElementById('loading-info');
var pro_bar = document.getElementById('pro-bar');

var content = document.getElementById('content');
var gotoYear = document.getElementById('gotoyear');
var timeline = document.getElementById('timeline');
var timelineBgd = document.getElementById('timeline-bgd');
var evtBox = document.getElementById('evt');

var ads_h = document.getElementById('ads-h');
var ads_v = document.getElementById('ads-v');

var footage = document.getElementById('footage');

var img_array = new Array("1859","1866","1869","1880","1889","19051","1910","1927","1928","1944","1948","1950","1951","1953","1956","1959","1964","19722","1977","1983","1994","1996","1997","2003");
var counter = 0;

//touch move variables
var startX;
var dX;
var objX;
var objW;
var moved = 0;



//start app
function startApp() {	
	if (!window.navigator.standalone) {
		hideAddress();
	}
	if (window.navigator.onLine) {
		addLog('Genetics History'); 
	}
	drawTimeline();
	
	if (window.orientation == -90 || window.orientation == 90) {
		document.getElementById('viewport').setAttribute("content","width = device-width, height = 268, maximum-scale = 1.0, user-scalable = no");
	} else {
		document.getElementById('viewport').setAttribute("content","width = device-width, height = 416, maximum-scale = 1.0, user-scalable = no");
	}
	loadImg();
}

//draw the timeline interface
function drawTimeline() {
	var strtmp = "";
	for (var i = 1850; i <= 2000; i = i+10)	{	
		strtmp += "<div class='timesec' style='left:"+String(200*(i-1850)/10)+"px'>";
		strtmp += "<div class='year'>"+String(i)+"'s</div>";
		switch (i) {
			case 1850:
				strtmp += "<div id='1859' class='event' style='color:#FFCCCC;	background-color:#CC6666;' onclick='showEvent(1859)'>1859, The Origin of Species</div>";
				strtmp += "</div>";
				break;
			case 1860:
				strtmp +="<div id='1866' class='event' style='color:#FFCCCC;	background-color:#CC6666;' onclick='showEvent(1866)'>1866, Gregor Mendel's paper</div>";
				strtmp += "<div id='1869' class='event' style='color:#FFFFCC;	background-color:#FF9933;' onclick='showEvent(1869)'>1869, Discovery of DNA</div>";
				strtmp += "</div>";
				break;
			case 1880:
				strtmp += "<div id='1880' class='event' style='color:#FFCCCC;	background-color:#CC6666;' onclick='showEvent(1880)'>1880, Elucidate chromosome distribution during cell division</div>";
				strtmp += "<div id='1889' class='event' style='color:#FFFFCC;	background-color:#FF9933;' onclick='showEvent(1889)'>1889, inheritance of specific traits in organisms comes in particles</div>";
				strtmp += "</div>";
				break;
			case 1900:
				strtmp += "<div id='1900' class='event' style='color:#FFCCCC;	background-color:#CC6666;' onclick='showEvent(1900)'>1900, Rediscover Mendel's principles</div>";
				strtmp += "<div id='1902' class='event' style='color:#FFFFCC;	background-color:#FF9933;' onclick='showEvent(1902)'>1902, The chromosome theory of heredity is proposed by Sutton</div>";
				strtmp += "<div id='19051' class='event' style='color:#CCFFCC;	background-color:#339900;' onclick='showEvent(19051)'>1905, Described the behavior of sex chromosomes, XX and XY</div>";
				strtmp += "<div id='19052' class='event' style='color:#99CCFF;	background-color:#336699;' onclick='showEvent(19052)'>1905, Coins the term \"genetics\"</div>";
				strtmp += "<div id='19081' class='event' style='color:#FFCCFF;	background-color:#CC66CC;' onclick='showEvent(19081)'>1908, Inborn errors of metabolism</div>";
				strtmp += "<div id='19082' class='event' style='color:#CCCCFF;	background-color:#6633CC;' onclick='showEvent(19082)'>1908, Hardy-Weinberg law</div>";
				strtmp += "</div>";
				break;
			case 1910:
				strtmp += "<div id='1910' class='event' style='color:#FFCCCC;	background-color:#CC6666;' onclick='showEvent(1910)'>1910, Theory of sex-linked inheritance</div>";
				strtmp += "<div id='1913' class='event' style='color:#FFFFCC;	background-color:#FF9933;' onclick='showEvent(1913)'>1913, First genetic map of a chromosome</div>";
				strtmp += "<div id='1918' class='event' style='color:#CCFFCC;	background-color:#339900;' onclick='showEvent(1918)'>1918, The Modern Synthesis of Genetics and Evolutionary Biology starts.</div>";
				strtmp += "</div>";
				break;
			case 1920:
				strtmp += "<div id='1927' class='event' style='color:#FFCCCC;	background-color:#CC6666;' onclick='showEvent(1927)'>1927, Artificial gene mutations in Drosophila</div>";
				strtmp += "<div id='1928' class='event' style='color:#FFFFCC;	background-color:#FF9933;' onclick='showEvent(1928)'>1928, Discovers that hereditary material from dead bacteria</div>";
				strtmp += "</div>";
				break;
			case 1930:
				strtmp += "<div id='1931' class='event' style='color:#FFCCCC;	background-color:#CC6666;' onclick='showEvent(1931)'>1931, Crossing over is identified as the cause of recombination</div>";
				strtmp += "<div id='1933' class='event' style='color:#FFFFCC;	background-color:#FF9933;' onclick='showEvent(1933)'>1933, Found that DNA is in chromosomes and RNA is in the cytoplasm of all cells</div>";
				strtmp += "</div>";
				break;
			case 1940:
				strtmp += "<div id='1941' class='event' style='color:#FFCCCC;	background-color:#CC6666;' onclick='showEvent(1941)'>1941, One gene encodes on protein</div>";
				strtmp += "<div id='1944' class='event' style='color:#FFFFCC;	background-color:#FF9933;' onclick='showEvent(1944)'>1944, Isolate DNA as the genetic material</div>";
				strtmp += "<div id='1948' class='event' style='color:#CCFFCC;	background-color:#339900;' onclick='showEvent(1948)'>1948, Hypothesis of transposable elements</div>";
				strtmp += "</div>";
				break;
			case 1950:
				strtmp += "<div id='1950' class='event' style='color:#FFCCCC;	background-color:#CC6666;' onclick='showEvent(1950)'>1950, 1:1 ratio of AT and GC</div>";
				strtmp += "<div id='1951' class='event' style='color:#FFFFCC;	background-color:#FF9933;' onclick='showEvent(1951)'>1951, X-ray diffraction photographs of DNA</div>";
				strtmp += "<div id='1953' class='event' style='color:#CCFFCC;	background-color:#339900;' onclick='showEvent(1953)'>1953, 3D structure of the DNA</div>";
				strtmp += "<div id='1956' class='event' style='color:#99CCFF;	background-color:#336699;' onclick='showEvent(1956)'>1956, Established the correct chromosome number in humans</div>";
				strtmp += "<div id='19581' class='event' style='color:#FFCCFF;	background-color:#CC66CC;' onclick='showEvent(19581)'>1958, Semiconservative replication of DNA</div>";
				strtmp += "<div id='19582' class='event' style='color:#CCCCFF;	background-color:#6633CC;' onclick='showEvent(19582)'>1958, Purified DNA polymerase I</div>";
				strtmp += "<div id='1959' class='event' style='color:#FFCC99;	background-color:#CC6600;' onclick='showEvent(1959)'>1959, Function of mRNA</div>";
				strtmp += "</div>";
				break;
			case 1960:
				strtmp += "<div id='1964' class='event' style='color:#FFCCCC;	background-color:#CC6666;' onclick='showEvent(1964)'>1964, DNA to RNA transcription can be reversed</div>";
				strtmp += "<div id='1966' class='event' style='color:#FFFFCC;	background-color:#FF9933;' onclick='showEvent(1966)'>1966, Cracked the genetic codes</div>";
				strtmp += "</div>";
				break;
			case 1970:
				strtmp += "<div id='1970' class='event' style='color:#FFCCCC;	background-color:#CC6666;' onclick='showEvent(1970)'>1970, Isolated the first restriction enzyme</div>";
				strtmp += "<div id='19721' class='event' style='color:#FFFFCC;	background-color:#FF9933;' onclick='showEvent(19721)'>1972, Produced the first recombinant DNA</div>";
				strtmp += "<div id='19722' class='event' style='color:#CCFFCC;	background-color:#339900;' onclick='showEvent(19722)'>1972, First to determine the sequence of a gene</div>";
				strtmp += "<div id='1973' class='event' style='color:#99CCFF;	background-color:#336699;' onclick='showEvent(1973)'>1973, Found a recombinant DNA molecule can be maintained and replicated in <i>E. coli</i></div>";
				strtmp += "<div id='1977' class='event' style='color:#FFCCFF;	background-color:#CC66CC;' onclick='showEvent(1977)'>1977, DNA sequencing</div>";
				strtmp += "</div>";
				break;
			case 1980:
				strtmp += "<div id='1981' class='event' style='color:#FFCCCC;	background-color:#CC6666;' onclick='showEvent(1981)'>1981, Discovery of human oncogenes</div>";
				strtmp += "<div id='1983' class='event' style='color:#FFFFCC;	background-color:#FF9933;' onclick='showEvent(1983)'>1983, Development of PCR</div>";
				strtmp += "<div id='1989' class='event' style='color:#CCFFCC;	background-color:#339900;' onclick='showEvent(1989)'>1989, CFTR protein was sequenced</div>";
				strtmp += "</div>";
				break;
			case 1990:
				strtmp += "<div id='19901' class='event' style='color:#FFCCCC;	background-color:#CC6666;' onclick='showEvent(19901)'>1990, Genome projects are begun</div>";
				strtmp += "<div id='19902' class='event' style='color:#FFFFCC;	background-color:#FF9933;' onclick='showEvent(19902)'>1990, First gene therapy</div>";
				strtmp += "<div id='1994' class='event' style='color:#CCFFCC;	background-color:#339900;' onclick='showEvent(1994)'>1994, Genetically modified tomatoes were marketed</div>";
				strtmp += "<div id='1995' class='event' style='color:#99CCFF;	background-color:#336699;' onclick='showEvent(1995)'>1995, The genome of <i>H. influenzae</i> is sequenced</div>";
				strtmp += "<div id='1996' class='event' style='color:#FFCCFF;	background-color:#CC66CC;' onclick='showEvent(1996)'>1996, The genome of <i>S. cerevisiae</i> is sequenced</div>";
				strtmp += "<div id='1997' class='event' style='color:#CCCCFF;	background-color:#6633CC;' onclick='showEvent(1997)'>1997, Cloning of a mammal</div>";
				strtmp += "</div>";
				break;
			case 2000:
				strtmp += "<div id='2001' class='event' style='color:#FFCCCC;	background-color:#CC6666;' onclick='showEvent(2001)'>2001, First draft sequences of the human genome are released</div>";
				strtmp += "<div id='2003' class='event' style='color:#FFFFCC;	background-color:#FF9933;' onclick='showEvent(2003)'>2003, Successful completion of Human Genome Project</div>";
				strtmp += "<div id='2007' class='event' style='color:#CCFFCC;	background-color:#339900;' onclick='showEvent(2007)'>2007, Controversies continue over human and animal cloning</div>";
				strtmp += "</div>";
				break;
			default:
				strtmp += "</div>";
				break;
		}
	}		
	timeline.innerHTML = strtmp;
	objW = (2000-1850)*20+201;
}

//detect orientation
function updateOrientation() {
	if (window.orientation == -90 || window.orientation == 90) {
		document.getElementById('viewport').setAttribute("content","width = device-width, height = 268, maximum-scale = 1.0, user-scalable = no");
		topBar.style.display = "none";
		topBarGlossy.style.display = "none";
		loading.style.display = "none";
		content.style.display = "block";
		content.style.width = "480px";
		content.style.height = "268px";
		content.style.top = "0px";
		gotoYear.style.display = "none";
		timeline.style.top = "0px";
		timelineBgd.style.top = "0px";
		ads_h.style.display = "block";
		ads_v.style.display = "none";
		footage.style.display = "none";
		evtBox.style.top = "30px";
		evtBox.style.left = "90px";
		window.location.href = "#2";
		var timelineX = Number(timeline.style.left.substr(0,timeline.style.left.length-2));
		if (timelineX == -objW+320) {
			timeline.style.webkitTransition = "left 300ms";
			timeline.style.left = String(-objW+480)+'px';
		}
	} else {
		document.getElementById('viewport').setAttribute("content","width = device-width, height = 416, maximum-scale = 1.0, user-scalable = no");
		topBar.style.display = "block";
		topBarGlossy.style.display = "block";
		loading.style.display = "none";
		content.style.display = "block";
		content.style.width = "320px";
		content.style.height = "350px";
		content.style.top = "45px";
		gotoYear.style.display = "block";
		timeline.style.top = "32px";
		timelineBgd.style.top = "32px";
		ads_h.style.display = "none";
		ads_v.style.display = "block";
		footage.style.display = "block";
		evtBox.style.top = "54px";
		evtBox.style.left = "10px";
		window.location.href = "#1";
	}
}

//preload all images
function loadImg() {
	/* using HTML DOM to load - Will load images one by one */
	
	var imgObj = document.createElement("img");
	imgObj.onload = onImgLoad;
	
	imgObj.setAttribute("src","img/src/"+img_array[counter]+".jpg");
	imgObj.setAttribute("id","im-"+img_array[counter]);
	imgObj.setAttribute("style",'display:none;');	
	loading.appendChild(imgObj);
}

function onImgLoad() {
	counter++;
	var totalImg = img_array.length-1;
	
	if (counter <= totalImg) {		
		loading_info.innerHTML = "Loading ... "+Math.round(counter*100/totalImg)+"%";
		pro_bar.style.width = String(Math.round(counter*100/totalImg)*200/100)+"px";
		loadImg();
	} else {
		updateOrientation();
	}
}



//touch move event functions
function touchStart(evt) {
	evt.preventDefault();
	
	objX = Number(timeline.style.left.substr(0,timeline.style.left.length-2));
	startX = evt.targetTouches[0].pageX;
}

function touchMove(evt) {
	evt.preventDefault();
	moved = evt.targetTouches[0].pageX;
	
	dX = evt.targetTouches[0].pageX-startX;
	timeline.style.left = String(objX+dX)+'px';
}

function touchEnd(evt) {
	var obj = evt.target;
	
	if (moved == 0) {
		if (obj.id && obj.id != "timeline") {
			//console.log(obj+": "+obj.id+", "+moved);
			showEvent(Number(obj.id));			
		} else if (obj.parentNode.id && obj.parentNode.id != "timeline") {
			//console.log(obj+": "+obj.parentNode.id+", "+moved);
			showEvent(Number(obj.parentNode.id));
		}
	} else {
		moved = 0;
		if (window.orientation == -90 || window.orientation == 90) {
			if (objX+dX < -objW+480) {
				timeline.style.webkitTransition = "left 300ms";
				timeline.style.left = String(-objW+480)+'px';
			} else if (objX+dX > 0) {
				timeline.style.webkitTransition = "left 300ms";
				timeline.style.left = '0px';
			}
			window.location.href = "#2";
		} else {
			if (objX+dX < -objW+320) {
				timeline.style.webkitTransition = "left 300ms";
				timeline.style.left = String(-objW+320)+'px';
			} else if (objX+dX > 0) {
				timeline.style.webkitTransition = "left 300ms";
				timeline.style.left = '0px';
			}
			window.location.href = "#1";
		}
	}	
}


//when open and close an event
function showEvent(year) {
	var hasImg = false;
	var strtmp = "<div style='position:absolute; width:73px; height:25px; left:105px; top:127px; cursor:pointer' onclick='closeEvt("+year+")'></div>";
	switch(year) {
		case 1859:
			strtmp += "<div style='line-height:18px; font-size:14px;'>1859</div>";
			strtmp += "<div id='img-box' class='imgleft'></div>";
			hasImg = true;
			strtmp += "<div>Charles Darwin published <i>The Origin of Species</i>.</div>";
			break;
		case 1866:
			strtmp += "<div style='line-height:18px; font-size:14px;'>1866</div>";
			strtmp += "<div id='img-box' class='imgleft'></div>";
			hasImg = true;
			strtmp += "<div>Gregor Mendel published the results of his investigations of the inheritance of \"factors\" in pea plants.</div>";
			break;
		case 1869:
			strtmp += "<div style='line-height:18px; font-size:14px;'>1869</div>";
			strtmp += "<div id='img-box' class='imgleft'></div>";
			hasImg = true;
			strtmp += "<div>Friedrich Miescher discovered a weak acid in the nuclei of white blood cells that today we call DNA.</div>";
			break;
		case 1880:
			strtmp += "<div style='line-height:18px; font-size:14px;'>1880's</div>";
			strtmp += "<div id='img-box' class='imgleft'></div>";
			hasImg = true;
			strtmp += "<div>Walther Flemming, Eduard Strasburger and Edouard van Beneden elucidated chromosome distribution during cell division.</div>";
			break;
		case 1889:
			strtmp += "<div style='line-height:18px; font-size:14px;'>1889</div>";
			strtmp += "<div id='img-box' class='imgleft'></div>";
			hasImg = true;
			strtmp += "<div>Hugo de Vries postulated that \"inheritance of specific traits in organisms comes in particles\", naming such particles \"(pan)genes\".</div>";
			break;
		case 1900:
			strtmp += "<div style='line-height:18px; font-size:14px;'>1900</div>";
			strtmp += "<div>Carl Correns, Hugo de Vries and Erich von Tschermak \"re-discovered\" Mendel's principles independently, marking the beginning of modern genetics.</div>";
			break;
		case 1902:
			strtmp += "<div style='line-height:18px; font-size:14px;'>1902</div>";
			strtmp += "<div>Walter Sutton pointed out the interrelationships between cytology and Mendelism, closing the gap between cell morphology and heredity.</div>";
			break;
		case 19051:
			strtmp += "<div style='line-height:18px; font-size:14px;'>1905</div>";
			strtmp += "<div id='img-box' class='imgleft'></div>";
			hasImg = true;
			strtmp += "<div>Nettie Stevens and Edmund Wilson independently described the behavior of sex chromosomes: XX determines female; XY determines male.</div>";
			break;
		case 19052:
			strtmp += "<div style='line-height:18px; font-size:14px;'>1905</div>";
			strtmp += "<div>William Bateson coins the term \"genetics\" in a letter to Adam Sedgwick and at a meeting in 1906.</div>";
			break;
		case 19081:
			strtmp += "<div style='line-height:18px; font-size:14px;'>1908</div>";
			strtmp += "<div>Archibald Garrod proposed that some human diseases are due to \"inborn errors of metabolism\" that result from the lack of a specific enzyme.</div>";
			break;
		case 19082:
			strtmp += "<div style='line-height:18px; font-size:14px;'>1908</div>";
			strtmp += "<div>Hardy-Weinberg law was derived, which is important in population genetics.</div>";
			break;
		case 1910:
			strtmp += "<div style='line-height:18px; font-size:14px;'>1910</div>";
			strtmp += "<div id='img-box' class='imgleft'></div>";
			hasImg = true;
			strtmp += "<div>Thomas Hunt Morgan proposed a theory of sex-linked inheritance for the first mutation discovered in the fruit fly, Drosophila, white eye.</div>";
			break;
		case 1913:
			strtmp += "<div style='line-height:18px; font-size:14px;'>1913</div>";
			strtmp += "<div>Alfred Sturtevant makes the first genetic map of a chromosome. Gene maps show chromosomes containing linear arranged genes.</div>";
			break;
		case 1918:
			strtmp += "<div style='line-height:18px; font-size:14px;'>1918</div>";
			strtmp += "<div>Ronald Fisher publishes \"The Correlation Between Relatives on the Supposition of Mendelian Inheritance\" the modern synthesis of genetics and evolutionary biology starts.</div>";
			break;
		case 1927:
			strtmp += "<div style='line-height:18px; font-size:14px;'>1927</div>";
			strtmp += "<div id='img-box' class='imgleft'></div>";
			hasImg = true;
			strtmp += "<div>Hermann J. Muller used x-rays to cause artificial gene mutations in Drosophila.</div>";
			break;
		case 1928:
			strtmp += "<div style='line-height:18px; font-size:14px;'>1928</div>";
			strtmp += "<div id='img-box' class='imgleft'></div>";
			hasImg = true;
			strtmp += "<div>Fred Griffith proposed that some unknown \"principle\" had transformed the harmless R strain of Diplococcus to the virulent S strain.</div>";
			break;
		case 1931:
			strtmp += "<div style='line-height:18px; font-size:14px;'>1931</div>";
			strtmp += "<div>Harriet Creighton and Barbara McClintock demonstrated the cytological proof for crossing-over in maize.</div>";
			break;
		case 1933:
			strtmp += "<div style='line-height:18px; font-size:14px;'>1933</div>";
			strtmp += "<div>Jean Brachet shows that DNA is found in chromosomes and that RNA is present in the cytoplasm of all cells.</div>";
			break;
		case 1941:
			strtmp += "<div style='line-height:18px; font-size:14px;'>1941</div>";
			strtmp += "<div>George Wells Beadle and Edward Lawrie Tatum irradiated the red bread mold, Neurospora, and proved that the gene produces its effect by regulating particular enzymes - one gene encodes on protein.</div>";
			break;
		case 1944:
			strtmp += "<div style='line-height:18px; font-size:14px;'>1944</div>";
			strtmp += "<div id='img-box' class='imgleft'></div>";
			hasImg = true;
			strtmp += "<div>Oswald Theodore Avery, Colin MacLeod and Maclyn McCarty purified DNA as the genetic material.</div>";
			break;
		case 1948:
			strtmp += "<div style='line-height:18px; font-size:14px;'>1948-1950</div>";
			strtmp += "<div id='img-box' class='imgleft'></div>";
			hasImg = true;
			strtmp += "<div>Barbara McClintock developed the hypothesis of transposable elements to explain color variations in corn.</div>";
			break;
		case 1950:
			strtmp += "<div style='line-height:18px; font-size:14px;'>1950</div>";
			strtmp += "<div id='img-box' class='imgleft'></div>";
			hasImg = true;
			strtmp += "<div>Erwin Chargaff discovered a one-to-one ratio of adenine to thymine and guanine to cytosine in DNA samples from a variety of organisms.</div>";
			break;
		case 1951:
			strtmp += "<div style='line-height:18px; font-size:14px;'>1951</div>";
			strtmp += "<div id='img-box' class='imgleft'></div>";
			hasImg = true;
			strtmp += "<div>Rosalind Franklin obtained sharp X-ray diffraction photographs of DNA.</div>";
			break;
		case 1952:
			strtmp += "<div style='line-height:18px; font-size:14px;'>1952</div>";
			strtmp += "<div>Martha Chase, Alfred Hershey used phages in which the protein was labeled with 35S and the DNA with 32P for the final proof that DNA is the molecule of heredity.</div>";
			break;
		case 1953:
			strtmp += "<div style='line-height:18px; font-size:14px;'>1953</div>";
			strtmp += "<div id='img-box' class='imgleft'></div>";
			hasImg = true;
			strtmp += "<div>Francis Crick and James Watson solved the three-dimensional structure of the DNA molecule.</div>";
			break;
		case 1956:
			strtmp += "<div style='line-height:18px; font-size:14px;'>1956</div>";
			strtmp += "<div id='img-box' class='imgleft'></div>";
			hasImg = true;
			strtmp += "<div>Joe Hin Tjio and Albert Levan established the correct chromosome number in humans to be 46.</div>";
			break;
		case 19581:
			strtmp += "<div style='line-height:18px; font-size:14px;'>1958</div>";
			strtmp += "<div>Matthew Meselson and Frank Stahl used isotopes of nitrogen to prove the semiconservative replication of DNA.</div>";
			break;
		case 19582:
			strtmp += "<div style='line-height:18px; font-size:14px;'>1958</div>";
			strtmp += "<div>Arthur Kornberg purified DNA polymerase I from <i>E. coli</i>, the first enzyme that made DNA in a test tube.</div>";
			break;
		case 1959:
			strtmp += "<div style='line-height:18px; font-size:14px;'>1959</div>";
			strtmp += "<div id='img-box' class='imgleft'></div>";
			hasImg = true;
			strtmp += "<div>Messenger RNA is the intermediate between DNA and protein.</div>";
			break;
		case 1964:
			strtmp += "<div style='line-height:18px; font-size:14px;'>1964</div>";
			strtmp += "<div id='img-box' class='imgleft'></div>";
			hasImg = true;
			strtmp += "<div>Howard Temin showed using RNA viruses that the direction of DNA to RNA transcription can be reversed.</div>";
			break;	
		case 1966:
			strtmp += "<div style='line-height:18px; font-size:14px;'>1966</div>";
			strtmp += "<div>Marshall Nirenberg, H. Gobind Khorana, Sydney Brenner and Francis Crick led teams that cracked the genetic code that triplet mRNA codons specify each of the twenty amino acids.</div>";
			break;
		case 1970:
			strtmp += "<div style='line-height:18px; font-size:14px;'>1970</div>";
			strtmp += "<div>Hamilton Smith and Kent Wilcox isolated the first restriction enzyme, HindII, that could cut DNA molecules within specific recognition sites.</div>";
			break;
		case 19721:
			strtmp += "<div style='line-height:18px; font-size:14px;'>1972</div>";
			strtmp += "<div>Paul Berg and Herb Boyer produced the first recombinant DNA molecules.</div>";
			break;
		case 19722:
			strtmp += "<div style='line-height:18px; font-size:14px;'>1972</div>";
			strtmp += "<div id='img-box' class='imgleft'></div>";
			hasImg = true;
			strtmp += "<div>Walter Fiers first to determine the sequence of a gene: the gene for Bacteriophage MS2 coat protein.</div>";
			break;
		case 1973:
			strtmp += "<div style='line-height:18px; font-size:14px;'>1973</div>";
			strtmp += "<div>Annie Chang and Stanley Cohen showed that a recombinant DNA molecule can be maintained and replicated in <i>E. coli</i>.</div>";
			break;
		case 1977:
			strtmp += "<div style='line-height:18px; font-size:14px;'>1977</div>";
			strtmp += "<div id='img-box' class='imgleft'></div>";
			hasImg = true;
			strtmp += "<div>Fred Sanger developed the chain termination (dideoxy) method for sequencing DNA.</div>";
			break;
		case 1981:
			strtmp += "<div style='line-height:18px; font-size:14px;'>1981</div>";
			strtmp += "<div>Three independent research teams announced the discovery of human oncogenes (cancer genes).</div>";
			break;
		case 1983:
			strtmp += "<div style='line-height:18px; font-size:14px;'>1983</div>";
			strtmp += "<div id='img-box' class='imgleft'></div>";
			hasImg = true;
			strtmp += "<div>Kary B. Mullis discovers the polymerase chain reaction (PCR) enabling the easy amplification of DNA</div>";
			break;
		case 1989:
			strtmp += "<div style='line-height:18px; font-size:14px;'>1989</div>";
			strtmp += "<div>Francis Collins and Lap-Chee Tsui identified the gene coding for the cystic fibrosis transmembrane conductance regulator protein (CFTR) on chromosome 7 that, when mutant, causes cystic fibrosis.</div>";
			break;
		case 19901:
			strtmp += "<div style='line-height:18px; font-size:14px;'>1990</div>";
			strtmp += "<div>Genome projects are begun.</div>";
			break;
		case 19902:
			strtmp += "<div style='line-height:18px; font-size:14px;'>1990</div>";
			strtmp += "<div>First gene replacement therapy-T cells of a four-year old girl were exposed outside of her body to retroviruses containing an RNA copy of a normal ADA gene. This allowed her immune system to begin functioning.</div>";
			break;
		case 1994:
			strtmp += "<div style='line-height:18px; font-size:14px;'>1994</div>";
			strtmp += "<div id='img-box' class='imgleft'></div>";
			hasImg = true;
			strtmp += "<div>FlavrSavr tomatoes, genetically engineered for longer shelf life, were marketed.</div>";
			break;
		case 1995:
			strtmp += "<div style='line-height:18px; font-size:14px;'>1995</div>";
			strtmp += "<div>The genome of <i>Haemophilus influenzae</i> is the first genome of a free living organism to be sequenced.</div>";
			break;
		case 1996:
			strtmp += "<div style='line-height:18px; font-size:14px;'>1996</div>";
			strtmp += "<div id='img-box' class='imgleft'></div>";
			hasImg = true;
			strtmp += "<div><i>Saccharomyces cerevisiae</i> is the first eukaryote genome sequence to be released.</div>";
			break;
		case 1997:
			strtmp += "<div style='line-height:18px; font-size:14px;'>1997</div>";
			strtmp += "<div id='img-box' class='imgleft'></div>";
			hasImg = true;
			strtmp += "<div>The first cloning of a mammal (Dolly the sheep) is performed by Ian Wilmut and colleagues, from the Roslin institute in Scotland.</div>";
			break;
		case 2001:
			strtmp += "<div style='line-height:18px; font-size:14px;'>2001</div>";
			strtmp += "<div>First draft sequences of the human genome are released simultaneously by the Human Genome Project and Celera Genomics.</div>";
			break;
		case 2003:
			strtmp += "<div style='line-height:18px; font-size:14px;'>2003</div>";
			strtmp += "<div id='img-box' class='imgleft'></div>";
			hasImg = true;
			strtmp += "<div>Successful completion of Human Genome Project with 99% of the genome sequenced to a 99.99% accuracy.</div>";
			break;
		case 2007:
			strtmp += "<div style='line-height:18px; font-size:14px;'>2007</div>";
			strtmp += "<div>Controversies continue over human and animal cloning, research on stem cells, and genetic modification of crops.</div>";
			break;
		default:
			break;
	}
	evtBox.innerHTML = strtmp;
	if (hasImg) {
		var imgObj = document.getElementById("im-"+String(year));
		imgObj.style.display = "block";
		document.getElementById('img-box').appendChild(imgObj);
	}
	
	evtBox.style.display = "block";
	if (window.orientation == -90 || window.orientation == 90) {
		window.location.href = "#2";
	} else {
		window.location.href = "#1";
	}
}

function closeEvt(year) {
	//return image
	if (document.getElementById('img-box') != null) {
		var imgObj = document.getElementById("im-"+String(year));
		imgObj.style.display = "none";
		loading.appendChild(imgObj);
	}
	
	evtBox.innerHTML = "";
	evtBox.style.display = "none";
}


//goto year function
function jumpTo(str) {
	timeline.style.webkitTransition = "left 1s";
	
	if(str == "1850") {
		timeline.style.left = "0px";
	} else if (str == "2000") {		
		timeline.style.left = String(-objW+320)+'px';
	} else {
		timeline.style.left=String(-200*(Number(str)-1850)/10+60)+"px";
	}
	window.location.href = "#1";
}

function onTransEnd() {
	timeline.style.webkitTransition = "none";
}