// JavaScript Document

var date_Now=new Date()
var date_Begin = new Date("April 16, 1987")
var array_Dates = new Array();

var num_IconSize = 20;
var num_DocumentZoom = 1;
var num_DocumentWidth = 0;
var num_DocumentHeight = 0;
var num_Years = (date_Now.getFullYear() - date_Begin.getFullYear())+1;
var num_ResizeTimer=null;
var bool_Dragging = false;


function pageload(hash){
		if(hash){
			if($.browser.msie){
				hash=encodeURIComponent(hash)}
				
				setTimeout(function(){
					$('#Links a').each(function(){
								if ($(this).attr('href') == hash){
													$('img', $(this)).addClass('Checked');
													$('img', $(this)).attr('src', 'assets/png/checked.png');
													fixGIF($('img', this));
								}
												
												
					});
					Filter(hash.toString()+'.html')
					document.title='past present future | '+hash.toString()
					}, 250);
			
		}else{
		//$("#Dynamic").empty()
		}
}

function checkHash(){
	if(window.location.href.indexOf('#') < 0){
		
	
	}	
}
function Container(){
	$('#Container').draggable({ axis: 'x', animate:true, scroll:false, start:function(){
														 bool_Dragging = true;
															   if($('#Viewer').css('opacity') > 0.2){
																	ViewerOff();
															 }
														 }
														 ,
														 drag:function(){
															var values = $('#Zoomline div#Bar').slider('option', 'values');
															var np = 100 - ((($(this).position().left)/$('#Timeline').width()+1)*100);
															var center = (values[1] - values[0])/2 + values[0];
															var dist = 	Math.round(np - center)%10;
																//	30 -	50 = -30
																//	45 -	25 =  20
															if (values[0] + dist < 0){
																
															}else if (values[1] + dist > 100){
																
															}else{
																values[0] += dist;
																values[1] += dist;
																
															//	alert(values[0]+":"+values[1]);
															$('#Zoomline div#Bar').slider('values', 0, Math.round(parseInt(values[0])));
															$('#Zoomline div#Bar').slider('values', 1, Math.round(parseInt(values[1]))); 
															}
														//YAY!!!!!!! Ok, now to move both values up the NP, if one hits either 100 or 0, it should stop.
													
													//	$('#Zoomline div#Bar').slider('values', 0, parseInt(0));
													//	$('#Zoomline div#Bar').slider('values', 1, parseInt(100)); 
														//alert(np);
														
														}
														 ,		
														 stop:function(){
															resizeWindow();
													 		bool_Dragging = false;
														 
															}
														});
}
function Viewer(){
	$('body').append('<div id="Viewer"><img /></div>');
	$('#Viewer').animate({opacity:0}, 0);
	$('#Viewer img').load(function(){
										$('#Viewer').animate({opacity:1}, 250, function(){
																						$('#Viewer').css('z-index', 5);
																						$('#Viewer').trigger('hover');
																						$('#Viewer').trigger('mouseenter');
																						});
	});
	$('#Viewer').click(function(event){
								if ($('#Viewer').css('opacity') != 0){
									alert('clicked');
												
								}
								});
	$('#Viewer').hover(function(event){
								//alert('hover');
											$('#Viewer').css('z-index', 5);
											
											if ($('#Viewer').css('opacity') != 0){
												$('#Viewer').stop();
												$('#Viewer').animate({opacity:1}, 200);
												$('a.Landmark').animate({opacity:0.25}, 100);
												
											}
												   },
											function(event){
												$('#Viewer').css('z-index', 0);
												if ($('#Viewer').css('opacity') != 0){
													
													$('#Viewer').stop();
													$('#Viewer').animate({opacity:0.25}, 100);
													$('a.Landmark').animate({opacity:1}, 100);
												}
											});
}
function ViewerOn(elem){
	
	$('div#Timeline').animate({top:$(window).height()*0.25}, 150, function(){
																			$('a.Landmark').each(function(){
																										  setLandmark($(this));
																										  });
																			
																			});
	
	
	$('#Viewer').stop();
	$('#Viewer img').attr('src', $('img', elem).attr('src').split('Thumb')[0]+'Large.jpg');
	$('#Viewer img').css('width', $(window).width()*0.85);
	$('#Viewer img').css('height', $(window).width()*0.85*0.33);
}
function ViewerOff(){
	$('div#Timeline').animate({top:0}, 200,  function(){
													 						
																			$('#Viewer img').attr('src', '');
																			$('#Viewer img').css('width', 0);
																			$('#Viewer img').css('height', 0);
																			$('a.Landmark').each(function(){
																										  setLandmark($(this));
																										  });
																			
																			});
	
	$('a.Landmark').animate({opacity:1}, 100);
	$('#Viewer').stop();
	$('#Viewer').animate({opacity:0}, 100);
	$('#Viewer').css('z-index', -5);
	
	
}
function RollOver(elem){
	$('body div#RollOver').stop();
	var eot = parseFloat(elem.offset().top);
	var eol = parseFloat(elem.offset().left);
	$('body div#RollOver').css('left', eol-(num_IconSize*4));
	$('body div#RollOver').css('top', eot+(num_IconSize*4.65));
	$('body div#RollOver').css('width', num_IconSize*10)
	$('body div#RollOver').css('height', 0);
	$('body div#RollOver .Logo img').attr('src', $('img', elem).attr('src').split('Thumb')[0]+'Logo.png');
	$('body div#RollOver .Logo img').css('width', num_IconSize*10);
	$('body div#RollOver .Logo img').css('height', num_IconSize*5);
	$('body div#RollOver .Details').html($('div#Details', elem).html());
	
	var addedHeight = 0;
	if($('body div#RollOver .Details').height() > num_IconSize*5){
		addedHeight += $('body div#RollOver .Details').height() - (num_IconSize*5) + 10;
	}
	
	//$('body div#RollOver .Details').css('fontSize', 1*(num_DocumentWidth/1680));
	$('body div#RollOver').animate({opacity:1}, 250, function(){
															  $(this).animate({height: num_IconSize*10 + addedHeight}, 50);
															  });
}
function RollOut(){
	$('body div#RollOver').stop();
	$('body div#RollOver').animate({height:0, opacity:0}, 50);
}
function Timeline(){
	 
	var tmp_increment = 0;
	var tmp_width = Math.floor(num_DocumentWidth*0.85);
	var tmp_spacing = Math.floor((tmp_width/num_Years)-30);
	
	//Create Line
	
	$('#Timeline').animate({width:0}, 0);
	setTimeout(function(){
						$('#Timeline').animate({width:tmp_width}, 250);
	}, 50);
	//Create Years
	while (tmp_increment < num_Years){
		var tmp_incrementyear = (parseFloat(date_Now.getFullYear())-tmp_increment);
		
		//Create Dash
		$('#Timeline').append('<div id="Dash_'+tmp_increment+'" class="Dash"><img src="assets/png/timedash.png" /><div id="Date">'+tmp_incrementyear+'</div></div>');
		
		var d = $('#Timeline div#Dash_'+tmp_increment);
		
		$('img', d).addClass('GIF');
		fixGIF($('img', d));
		
		
		$('#Timeline').disableSelection();
		//Style Dash
		d.css('marginLeft', tmp_spacing/2);	
		d.css('marginRight', tmp_spacing/2);	
		fadeOutIn(d, tmp_increment/num_Years);
		
		tmp_increment++;
	}
	
	//$('#Timeline div.Dash img').pngFix();
 	 //DD_belatedPNG.fix('#Timeline div.Dash img');
	 	$('#Timeline div.Dash img').addClass('GIF');
		$('#Timeline div.Dash #Date').fadeOut(0);
		$('#Timeline div.Dash #Date').fadeIn(250);
	
}
function Links(){
	 
	$('#Links a.Link').click(function(event){	
		event.preventDefault();	
		var hash=$(this).attr('href')
			hash=hash.replace(/^.*#/,'')
			
			
		if ($('img', this).hasClass('Checked')){		
			$('img', this).removeClass('Checked');
			$('img', this).attr('src', 'assets/png/unchecked.png');
			fixGIF($('img', this));
			$('body #Container #'+hash.toString()+' a').fadeOut(250, function(){
																			  $('body #Container #'+hash.toString()).remove();
																			  });
			
			return false;
		}else{
			$('img', this).addClass('Checked');		
			$('img', this).attr('src', 'assets/png/checked.png');
			fixGIF($('img', this));
				$.historyLoad(hash)
				
				
				//Filter(hash.toString()+'.html')
		
		}
		
	
		
	})
}
function Tags(){
			
}
function FitLandmarksToScreen(filter){
	setTimeout(function(){
				var first = getPercentOfDate($('a.Landmark:first', '#'+filter).attr('rel'))
				var last = getPercentOfDate($('a.Landmark:last', '#'+filter).attr('rel'))
				
				if (first < 0){
					first = 0;	
				}
				
				$('#Zoomline div#Bar').slider('values', [0], first*100)
				$('#Zoomline div#Bar').slider('values', [1], last*100)
				
				
				if (Math.floor($('#Zoomline div#Bar').slider('values', [0])) >= 1 && Math.ceil($('#Zoomline div#Bar').slider('values', [1])) <= 100){
				setTimeout(function(){
					$('#Container').animate({left:(-last*$('#Timeline').width())+$(window).width()*0.85}, 250, function(){delayedResize()});
						
				}, 250);
				}else{
					setTimeout(function(){
										delayedResize();
										}, 250)
				}
																								
	}, 250);
}
function Filter(url){
		var filter = url.split('.html')[0];
		var tmp_width = Math.floor(num_DocumentWidth*0.85);
		if (!$('#'+filter).attr('id')){													
		 	$('body #Container').prepend('<div id="'+filter+'" class="Filter"></div>');
		 	$('#'+filter, 'body #Container').load(url, function(){
														$('a.Landmark', '#'+filter).click(	function(event){
																								   if ($(this).hasClass('Thumb')){
																															ViewerOn($(this));
																															}
																								   });
														$('a.Landmark', '#'+filter).hover(	function(event){
																								   $(this).css('z-index', 20).focus();
																								   if (!bool_Dragging){
																									   	var scale = 1;
																										var percent = getPercentOfDate($(this).attr('rel'));
																										//alert(percent+":"+tmp_width);
																										var tmp_dashwidth = $('#Timeline div.Dash:first').offset().left - $('#Timeline div.Dash:last').offset().left;
																										var loc = (1-percent)*tmp_dashwidth;	
																										
																										
																										
																										var t = ($('#Timeline').height()*0.5) + $('#Timeline').position().top - (num_IconSize*0.5);
																										var l = $('#Timeline').position().left+$('#Timeline').width() - loc;
																										
																										if ($(this).hasClass('Thumb')){
																															scale = 2;
																															RollOver($(this));
																															}
																									   
																								   		$('a.Landmark').animate({opacity:0.25}, 100);
																										
																								   		$(this).stop();
																								   		$('img#Icon', this).stop();
																										$(this).animate({opacity:1}, 0);
																										$(this).animate({left:l-num_IconSize*2*scale, top:t-num_IconSize*2*scale}, 150);
																								  	 	$('img#Icon', this).animate({width:num_IconSize*5*scale, height:num_IconSize*5*scale}, 150);
																								   }
																							},
																							function(event){
																									if ($('body #RollOver').attr('id')){
																										RollOut();	
																									}
																									var percent = getPercentOfDate($(this).attr('rel'));
																										//alert(percent+":"+tmp_width);
																										
																								   $(this).css('z-index', 1);
																								   var t = $(this);
																								   var ti = $('img#Icon', this);
																								   ti.stop();
																								   
																								   
																								   setTimeout(function(){
																													   setLandmark(t);
																								   						$('a.Landmark').animate({opacity:1}, 50);
																														ti.animate({width:num_IconSize, height:num_IconSize}, 100);
																								   						
																													   }, 50);
																									
																							});
														
														$('a.Landmark', '#'+filter).each(	function(){
																var elem = $(this);
																var percent = getPercentOfDate(elem.attr('rel'))
															
																var t = ($('#Timeline').height()*0.5);
																
																elem.css('top', t);
																elem.css('left', -num_IconSize);
																
																$('img#Icon', this).width( num_IconSize );
																$('img#Icon', this).height( num_IconSize );
																
																$('img#Icon', this).addClass('GIF');
																fixGIF($('img.GIF', this));
																
																
																//elem.fadeOut(0);
																//alert(($('a.Landmark').length - delay)*50);
															//	var t = parseFloat($('#Timeline').css('top'))+$(this).height()/2;
															//	var l = parseFloat($('#Timeline').css('left'))-((1-percent)*tmp_width);
																
															
																
															});
														
														
														$('a.Landmark', '#'+filter).ready(	function(){
																	var elem = $(this);
																	
																	setTimeout(function(){
																					setLandmark(elem);
																	}, 250);
																								   });
														
														$('#'+filter).ready(		function(){
																					//DD_belatedPNG.fix('#'+filter+' a.Landmark img');
																					//alert('loaded');
																					setTimeout(function(){
																										FitLandmarksToScreen(filter)}, 500);
																					});
														});
		}
		
}

function Zoomline(){
	//$('body div#Container div#Controls div#Zoom').append('<div id="Zoomline"><img id="Max" src="assets/png/timezoom.png"/><img id="Min" src="assets/png/timezoomsm.png"/><br class="Clear" /><div id="Bar"></div></div>');
	//fixGIF($('div#Zoom'));
	fixGIF($('#Zoomline'));
		
	$('#Zoomline div#Bar').disableSelection();
	//fixGIF($('#Zoomline div#Bar'));
	//$('#Zoomline img#Min').fadeOut(0);
	//$('#Zoomline img#Max').fadeOut(0);
	$('#Zoomline div#Bar').slider({
																																			range: true,
																																			min: 0,
																																			max: 100,
																																			values: [0, 100],
																																			step: 1,
																																			slide: function(event, ui) {
																																				setScale(ui.values);
																																				delayedResize();	
																																				
																																			},
																																			stop:function(event, ui){
																																				setScale(ui.values);
																																				delayedResize();
																																				
																																			},
																																			change:function(event, ui){
																																				if (!bool_Dragging){
																																					setTimeout(function(){
																																									setScale(ui.values);
																																									delayedResize();
																																									}, 50);	
																																				}
																																				/*setTimeout(function(){
																																									setScale(ui)
																																									}, 50);*/
																																				//resizeWindow()	
																																				//delayedResize();
																																			}
																																			});
																
																
	$('#Zoomline div#Bar').fadeOut(0);
	setTimeout(function(){
						$('#Zoomline').animate({width:200}, 500, function(){
																		$('#Zoomline #Bar').fadeIn(250);
																			//$('#Zoomline img#Min').fadeIn(500);
																			//$('#Zoomline img#Max').fadeIn(1000);
																		  });
	}, 50);
	
	//$('div#Zoomline').pngFix();
	//$('div#Zoomline div#Bar').pngFix();
 	//DD_belatedPNG.fix('div#Zoomline');
 	//DD_belatedPNG.fix('div#Zoomline div#Bar');
}
function setScale(values){
		var dist = (values[1] - values[0]);
		var scale = 100 / dist;
		if (scale < 0.12){
			scale = 0.12;
		}
		if (scale > 12){
			scale = 12;
		}
		num_DocumentZoom = scale;	
}
function setLandmark(landmark){
	var percent = getPercentOfDate(landmark.attr('rel'));
	//alert(percent+":"+tmp_width);
	var tmp_dashwidth = $('#Timeline div.Dash:first').offset().left - $('#Timeline div.Dash:last').offset().left;
	var tmp_width = Math.floor(num_DocumentWidth*0.85);
	var loc = (1-percent)*tmp_dashwidth;	
	
	var t = ($('#Timeline').height()*0.5) + $('#Timeline').position().top - (num_IconSize*0.5);
	var l = $('#Timeline').position().left+$('#Timeline').width() - loc;
	
	$('img#Icon', landmark).stop();
	landmark.stop();
	$(landmark).animate({left:l, top:t}, 25*percent+25);
	$('img#Icon', landmark).animate({width:num_IconSize, height:num_IconSize}, 50);		
	
	
	
}
 	 
	 

function setMonthsInYear(year){
	
}
function getPercentOfDate(date){
	var d = new Date(date);
	var p = Math.ceil((d-date_Begin) / (date_Now - date_Begin)*1000)*0.001;
	
	return p;
}
function fadeOutIn(elem, delay){
	elem.fadeOut(0);
	setTimeout(function(){
						elem.fadeIn(300);	
						}, 800*delay);
}
function SizeCheck(){
	//Just a quick way to check and recheck.
	var iconscale = 25/num_DocumentZoom;
	
	if (iconscale < 0.25){
		iconscale = 0.25;	
	}
	
	num_DocumentWidth = $('body').width()*num_DocumentZoom;
	num_DocumentHeight = parseFloat($('body').css('height'))*num_DocumentZoom;	
	num_IconSize = (num_DocumentWidth/1600)*iconscale;
	
}
function delayedResize(){
	clearTimeout(num_ResizeTimer)
	num_ResizeTimer=setTimeout(function(){
			resizeWindow()
	},50)
}
function isScrolledIntoView(elem)
{
    var docViewLeft = $(window).scrollLeft();
    var docViewRight = docViewLeft + $(window).width();

    var elemLeft = $(elem).offset().left;
    var elemRight = elemLeft + $(elem).width();

    return ((elemLeft >= docViewRight) && (elemRight <= docViewLeft));
}

function resizeWindow(){
	
	SizeCheck();
	var ratio = $('body').width()/num_DocumentWidth;
	var tmp_width = Math.ceil(num_DocumentWidth*0.85);
	var tmp_spacing =  Math.floor((tmp_width/num_Years)-30.25);
	var tmp_dashwidth = $('#Timeline div.Dash:first').offset().left - $('#Timeline div.Dash:last').offset().left;
	$('#Viewer img').animate({width:$(window).width()*0.85, height:$(window).width()*0.85*0.33}, 25);
	$('.Filter').animate({width:tmp_width}, 15, function(){
				$('a.Landmark').each(function(){
								setLandmark($(this));
								//var percent = getPercentOfDate($(this).attr('rel'));
								//var loc = (1-percent)*tmp_dashwidth;
								
								//$(this).animate({left:parseFloat($('#Timeline').css('left'))+parseFloat($('#Timeline').css('width')) - loc, top:parseFloat($('#Timeline').css('top'))+$(this).height()/2}, 100);
								
								});
									
	
	});
	
	
	$('#Timeline').animate({width:tmp_width}, 50, function(){
														   $('#Timeline div.Dash').animate({marginLeft:tmp_spacing*0.5, marginRight:tmp_spacing*0.5}, 5)
														   });
	//ok, we needa get this thing hooked up so that there are constraints on the timeline...fun
	//$('#Zoomline div#Bar').slider('values', 0, parseInt(values[0]));
	
	
	if (!bool_Dragging){
		var values = $('#Zoomline div#Bar').slider('option', 'values');
		var lsv = -((values[0]*0.01) * $('#Timeline').width() + ($(window).width()*0.075));
		var rsv = ((values[1]*0.01) / $('#Timeline').width() + ($(window).width()*0.075));
		
		$('#Container').animate({left:rsv+lsv}, 25);
	}
	
}
function fixGIF(t){
	if (jQuery.browser.msie && parseFloat(jQuery.browser.version) < 7){
		//alert(t.attr('src'));
		if (t.attr('src')){
			if (t.attr('src').indexOf('.png') != -1){
				t.attr('src', t.attr('src').split('.png')[0]+'.gif');
			}
		}
		else if (t.css('background-image')){
			if(t.css('background-image').indexOf('.png') != -1){
				t.css('background-image', t.css('background-image').split('.png')[0]+'.gif")');
				
			}	
		}
		
	}
}
$(window).resize(function(){
						  delayedResize();
						  
						  });
$(window).load(function(){	
							$.historyInit(pageload,"index.html")
							
							$('#Version').fadeOut(500);
							
							
							
});


$(document).ready(function(){
						  	//DD_belatedPNG.fix('.PNG');
							
							$('img.GIF').each(function(){
													   fixGIF($(this));
													   });
							
							$('div.GIF').each(function(){
													   fixGIF($(this));
													   });
							
							$('#RollOver').animate({opacity:0}, 0);
							
							SizeCheck();
							Container();
							Zoomline();
							Links();
							Viewer();
							
							
							setTimeout(function(){Timeline()}, 500); 
							//setTimeout(function(){checkHash()}, 2000);
							
							//$('div#Timeline').pngFix();
							//$('div#Links').pngFix();
							//$('#Logo').pngFix();
							//DD_belatedPNG.fix('div#Timeline');	
							//DD_belatedPNG.fix('#Links a.Link img');
							//DD_belatedPNG.fix('img#Logo');
							
														
				  			//setTimeout(function(){Filter('History.html')}, 1500);
				  			//setTimeout(function(){Filter('Works.html')}, 2000);
				  			
				  
				  });