var tl;
function onLoadTimeline(PKTimelineXML) {

	Timeline.ClassicTheme.create();
	//alert(Timeline.urlPrefix);

	// create band infos with default date showing current as "Oct 08 2008 00:00:00 GMT"
	var now = new Date();
	//alert(dateFormat(now, "dddd, mmmm dS, yyyy, h:MM:ss TT")); // => Monday, November 17th, 2008, 1:21:12 PM
	//alert(dateFormat(now, "ddd, mmmm dS, yyyy, h:MM:ss TT")); // => Mon, November 17th, 2008, 1:21:12 PM
	//alert(dateFormat(now, "mmm dd yyyy h:MM:ss")+' GMT'); // => Nov 17 2008 12:12:12 GMT
	//format current date to be used in timeline band
	var pk_timeline_date = dateFormat(now, "mmm dd yyyy h:MM:ss")+' GMT';
	
  var eventSource = new Timeline.DefaultEventSource();
  var bandInfos = [
    Timeline.createBandInfo({
        eventSource:    eventSource,
        date:           pk_timeline_date, //"Oct 08 2008 00:00:00 GMT",
        width:          "80%", 
        intervalUnit:   Timeline.DateTime.MONTH, 
        intervalPixels: 300
    }),
    Timeline.createBandInfo({
        showEventText:  false,
        trackHeight:    0.4,
        trackGap:       0.2,
        eventSource:    eventSource,
        date:           pk_timeline_date, //"Oct 08 2008 00:00:00 GMT",
        width:          "20%", 
        intervalUnit:   Timeline.DateTime.YEAR, 
        intervalPixels: 200
    })
  ];
  bandInfos[1].syncWith = 0;
  bandInfos[1].highlight = true;
  
  tl = Timeline.create(document.getElementById("my-timeline"), bandInfos);
	//Timeline.loadXML("timeline/example2.xml", function(xml, url) { eventSource.loadXML(xml, url); });
	//alert(PKTimelineXML);

	Timeline.loadXML(PKTimelineXML, function(xml, url) { eventSource.loadXML(xml, url); });
}

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