$(document).ready(function() {
	
	$("#timeline #background").append("\
		<div id=\"timepassed\"></div>\
		<div id=\"marker\"></div>\
		");
	
	$def = $("h1").text();
	$from = 51;
	$to = 75;
	$max = 419;
	$highlight = 0;
	$range = false;
	$klicked = false;
	$("#timeline")
		.ready(function(){			
			$("#background #timepassed").css("width", ($max*100)/516+"%");
			showRange($from,$to);
		})
		.mousemove(function(e){
			if (!$klicked) {
				$padding = 20;
		    	$i = Math.ceil(((e.pageX - $("#timeline #background").offset().left)/960)*516);
				$highlight = ($i <= $max+$padding && $i > -$padding	 && !($i >= $from && $i <= $to)) ? (($i>$max)?(($to!=$max)?$max:0):($i<1?(($from!=1)?1:0):$i)) : 0;
				if ($highlight) {		
					$(this).css("cursor", "pointer");
					$range = showRangeOf($highlight);
				}else {
					$range = false;
					$(this).css("cursor", "auto");
					$("h1").text($def);
					showRange($from,$to);
				}	
			}
	    })
		.mouseout(function(){
			$highlight = 0;
			$range = false;
			$("h1").text($def);
			showRange($from,$to);
		})
		.click(function(){
			//bug currently makes h1 tag clear once following line is called
			//only occuress once html content of h1 has been changed using jquery
			if ($highlight) {
				$klicked = true;
				$("h1").text("Loading Archive");
				//alert($("h1").text());
				document.location.href = "/"+ $range;
			}
			
		});
});

function showRange($from, $to) {
	$n = $to-$from+1;
	$("#background #marker").css("margin-left", ($from*100)/516+"%");
	$("#background #marker").css("width", Math.max(($n*100)/516,0.3)+"%");
}

function showRangeOf($day_num) {
	$t = Math.ceil($day_num/25)*25;
	$f = $t - 25 + 1;
	$t = Math.min($t,419);
	$("h1").text("Show Days " + $f + "-" + $t);
	
	showRange($f,$t);
	return $f+"-"+$t;
}