jQuery(document).ready(function($) {
	
	var img = 1;
	var timeline = {};
	
	function swapHeaderImage() {
		
		$('#slideshow-' + img).fadeOut(2000);
		img++;
		if (img > 16) img = 1;
		$('#slideshow-' + img).fadeIn(2000, callback );

	}
	
	function callback() {
		setTimeout(function() {
			swapHeaderImage();
		}, 5000);
	}
	
	callback();
		
	function setTimelineWidth() {
		getTimelinePadding();
		
		var dayWidth = $(".timeline-day:first").outerWidth();
		var dayCount = $("#timeline-days-count").val();
		$(".timeline-content").css('width', ((dayWidth * dayCount) + timeline.padding) + 'px');
	}
	
	function getTimelinePadding() {
		var dayWidth = $(".timeline-day:first").outerWidth();
		var firstMonthWidth = $(".timeline-month:first").outerWidth();
		var numDaysInFirstMonth = $(".timeline-month:first").children(".timeline-day").length;
		timeline.padding = firstMonthWidth - (numDaysInFirstMonth * dayWidth);
	}
	
	$(".timeline").show();
	setTimelineWidth();
	
	$(window).load(function() {		
		// call again to fix Webkit bug.
		setTimelineWidth();		
	})
	
	$(".timeline-entry-marker").click(function() {
		if (timeline.entry == null && timeline.marker == null) {
			timeline.entry = positionEntry($(this));
			timeline.marker = $(this);
			timeline.marker.find(".x").show();
			timeline.entry.show();
		} else if (timeline.entry != null && timeline.marker.attr("id") != $(this).attr("id")) {
			// hide current
			timeline.entry.hide();
			timeline.marker.find(".x").hide();
			// display new
			timeline.entry = positionEntry($(this));
			timeline.marker = $(this);
			timeline.marker.find(".x").show();
			timeline.entry.show();
		} else {
			timeline.entry.hide();
			timeline.marker.find(".x").hide();
			timeline.entry = null;
			timeline.marker = null;
		}
	});
	
	function positionEntry(marker) {
		var id = marker.attr("id");
		var posM = marker.offset();
		var posC = $(".timeline").offset();
		
		var left = posM.left - posC.left + marker.outerWidth(true);
		var top = posM.top;
				
		var entry = $("#" + id.replace("timeline-mark-", "activity-"));
		entry.css( { "left": left + "px", "top": top + "px" } );
		
		return entry;
	}
	
	//scrollpane parts
	var scrollPane = $('.timeline-container');
	var scrollContent = $('.timeline-content');
	
	//build slider
	var scrollbar = $(".timeline-scroll-bar").slider({
		slide:function(e, ui){
			if( scrollContent.width() > scrollPane.width() ){
				scrollContent.css('margin-left', 
						Math.round( ui.value / 100 * ( scrollPane.width() - scrollContent.width() + timeline.padding )) + 'px');
			} else { 
				scrollContent.css('margin-left', 0); 
			}
			if (timeline.marker != null) {
				positionEntry(timeline.marker);
			}
		}
	});
	
});