function onLoadTL(divid,strget) {
  
/* Timeline Setting */
  var eventSource = new Timeline.DefaultEventSource();
  
 var bandTheme=Timeline.ClassicTheme.create();
 bandTheme.autoWidth = false;
 bandTheme.firstDayOfWeek = 1;  // Start Week Setting (Monday)
 bandTheme.ether = {
 	backgroundcolors: ["#ccffcc","#ffffcc"],
 	highlightColor: "#ccffcc",
 	highlightOpacity: 90,
 	interval: {
 		line: {
 			show: true,
 			color: "#330066",
 			opacity: 30
 		},
 		weekend: {
 			color: "#99ff33",
 			opacity: 60
 		},
 		marker: {
 			hAlign: "Bottom",
 			vAlign: "Right"
 		}
 	}
 }
 bandTheme.event = {
 	track: {
 		offset: 2, // px.
		height: 8, // px.
		gap: 1, // px.
		autoWidthMargin: 1.5
	},
		overviewTrack: {
			offset: 20, // px -- top margin above tapes 
			tickHeight: 6, // px
			height: 2, // px
			gap: 1, // px
			autoWidthMargin: 1.2
		},
		tape: {
			height: 3 // px. For thicker tapes, remember to change track height too.
		},
		instant: {
			icon: "http://www.seunze.com/pictures/timelinemark.png",
			iconWidth: 10,
			iconHeight: 10,
			color: "#0066cc",
			impreciseColor: "#0066cc",
			impreciseIconMargin: 3,
			mpreciseOpacity: 20
		},
		duration: {
			color: "#0066cc",
			//opacity:90,
			impreciseColor: "#0066cc",
			impreciseOpacity: 20
		//insideColor:"#ffffcc",  //event title text
		//outsideColor:"#0066cc",  //event title text
		//width:300,  //px
		},
		label: {
			backgroundOpacity: 90,// only used in detailed painter
			offsetFromLine: 3 // px left margin amount from icon's right edge
		},
		highlightColors: [ // Use with getEventPainter().setHighlightMatcher
	// See webapp/examples/examples.js
		"#ffff00", "#ffff00"],
		highlightLabelBackground: false, // When highlighting an event, also change the event's label background?
		bubble: {
			width: 280, // px
			height: 180, // px
			titleStyler: function(elmt){
				elmt.className = "my_timeline-event-bubble-title";
			},
			bodyStyler: function(elmt){
				elmt.className = "my_timeline-event-bubble-body";
			},
			imageStyler: function(elmt){
				elmt.className = "my_timeline-event-bubble-image";
			},
			wikiStyler: function(elmt){
				elmt.className = "my_timeline-event-bubble-wiki";
			},
			timeStyler: function(elmt){
				elmt.className = "my_timeline-event-bubble-time";
			}
		}
}

 var bandInfos = [
  Timeline.createBandInfo({
   eventSource:    eventSource,
   timeZone:       +9,
   date:           tlcenter,
   width:          "75%", 
   intervalUnit:   Timeline.DateTime.WEEK, 
   intervalPixels: 50,
   theme:bandTheme,
   layout:   'original'
  }),
  Timeline.createBandInfo({
   eventSource:    eventSource,
   date:           tlcenter,
   timeZone:       +9,
   showEventText:  false,
   trackHeight:    0.3,
   trackGap:       0.2,
   width:          "25%", 
   intervalUnit:   Timeline.DateTime.MONTH, 
   intervalPixels: 70,
   theme:bandTheme,
   layout:   'overview'
  })
 ];

 bandInfos[1].syncWith = 0;
 bandInfos[1].highlight = true;

 tl = Timeline.create(document.getElementById(divid), bandInfos);
/*
 Timeline.loadXML('http://localhost/project/xml/test.xml', function(xml, url) { eventSource.loadXML(xml, url); });
*/
 Timeline.loadXML('http://www.seunze.com/timeline.xml?'+strget, function(xml, url) { eventSource.loadXML(xml, url); });
}
var resizeTimerID = null;
function onResizeTL() {
 if (resizeTimerID == null) {
  resizeTimerID = window.setTimeout(function() {
   resizeTimerID = null;
   tl.layout();
  }, 500);
 }
}
function centerTimeline(date) {
    tl.getBand(0).setCenterVisibleDate(Timeline.DateTime.parseGregorianDateTime(date));
}
function centerMove(direction){
 var days= new Number(document.tlmove.tlday.value);
 var curcenter=tl.getBand(0).getCenterVisibleDate();
 var curyear= new Number(curcenter.getYear());
 var curdate=new Number(curcenter.getDate());
 if(curyear<2000){
  curyear=curyear+1900;
 }
 var newdate=new Number();
  if(direction=="b"){
   newdate=curdate-days;
  }
  if(direction=="f"){
   newdate=curdate+days;
  }
	curcenter.setDate(newdate);
  	centerTimeline(curcenter);
}