var tl;
    function onLoad() {
        var eventSource = new Timeline.DefaultEventSource(0);
        
        var theme = Timeline.ClassicTheme.create();
        theme.event.bubble.width = 320;
        theme.event.bubble.height = 220;
        theme.ether.backgroundColors[1] = theme.ether.backgroundColors[0];
        var d = Timeline.DateTime.parseGregorianDateTime("1870")
        var bandInfos = [
     Timeline.createHotZoneBandInfo({
         zones: [
             {   start:    "Jan 01 1400 00:00:00 GMT-0500",
                 end:      "Jan 01 1840 00:00:00 GMT-0500",
                 magnify:  .09,
                 unit:     Timeline.DateTime.CENTURY
             }
             
         ],
         eventSource:    eventSource,
				date:           "Jan 1 1910 00:00:00 GMT",
         width:          "75%", 
         intervalUnit:   Timeline.DateTime.DECADE, 
         intervalPixels: 38 
     }),

			Timeline.createBandInfo({
				overview:       true,
				date:           "Jan 1 1900 00:00:00 GMT",
				width:          "25%", 
				intervalUnit:   Timeline.DateTime.CENTURY, 
				intervalPixels: 60
			})
        ];
        bandInfos[0].syncWith = 1;
		bandInfos[1].highlight = true;
		bandInfos[1].decorators = [
            ////////  Warning: these are load-bearing colors. Do not change. see decorators.js
			new Timeline.SpanHighlightDecorator({
				startDate:  "Nov 14 1400 00:00:00 GMT",
				endDate:    "Dec 05 1885 00:00:00 GMT",
				startLabel: "pre-photographic",
				color:      "#FFC080",
				opacity:    50,
                height:     20,
				top:         0
			}),
			new Timeline.SpanHighlightDecorator({
				startDate:  "Nov 14 1865 00:00:00 GMT",
				endDate:    "Dec 05 1975 00:00:00 GMT",
				startLabel: "photomechanical",
				color:      "#6b97ca",
				opacity:    50,
                height:     20,
				top:         22
			}),
			new Timeline.SpanHighlightDecorator({
				startDate:  "Nov 14 1840 00:00:00 GMT",
				endDate:    "Dec 05 2000 00:00:00 GMT",
				startLabel: "photographic",
				color:      "#ba7288",
				opacity:    50,
                height:     20,
				top:         44
			}),
			new Timeline.SpanHighlightDecorator({
				startDate:  "Nov 14 1960 00:00:00 GMT",
				endDate:    "Dec 05 3000 00:00:00 GMT",
				startLabel: "digital",
				color:      "#8ba86f",
				opacity:    50,
                height:     20,
				top:         66
			})
		];
    
    tl = Timeline.create(document.getElementById("timeline"), bandInfos, Timeline.HORIZONTAL);
    tl.loadJSON("/process_timeline/", function(json, url){
    	eventSource.loadJSON(json, url);
	});



/* uncomment this to remove popup bubbles and instead direct link.  
    Timeline.OriginalEventPainter.prototype._showBubble = function(x, y, evt) {
    document.location.href=evt.getLink();
    } 
    */

}

var resizeTimerID = null;
function onResize() {
    if (resizeTimerID == null) {
        resizeTimerID = window.setTimeout(function() {
            resizeTimerID = null;
            tl.layout();
        }, 500);
    }
}

function searchFuncs() {
	// Slide functionality for search options
	$("#search-nav > li > a").click(function(event) {
		currentSlide = $(this).attr("href");
		$(this).parent("li").addClass("current");
		$(this).parent("li").siblings("li").removeClass();
		
		
		switch(currentSlide)
		{
		case "#search":
			
			$("#process-search").show();
			$("#process-search").siblings("div").hide();
  			break;    
		
		case "#timeline-wrap":
			$("#timeline-wrap").show();
			$("#timeline-wrap").siblings("div").hide();
			onLoad();
  			break;    

		case "#browse":
			$("#browse").show();
			$("#browse").find("div.cats ul").hide();
			$("#browse").siblings("div").hide();
  			break;    
		
		case "#visual-browser":
			$("#visual-browser").show();
			$("#visual-browser").siblings("div").hide();
  			break;    

		default:

		}
		
		return false;
	});

	//Browsing drop-downs
	$("div.cats ul").hide();
	$("div.cats h5").click(function(event) {
		$(this).next("ul").toggle();
		
		if($(this).children("span").hasClass("collapse")){
			$(this).children("span").removeClass();
		}else {
			$(this).children("span").addClass("collapse");
		}
	});
	
	

}