/* WP SIMILE Timeline JavaScript configuration script
 * Plugin version: 0.4.6.3 */
var tl;
function loadSimileTimeline() {
	
	if(document.getElementById("stl-mytimeline")){	
		
		// ### create custom theme
var mytheme = Timeline.ClassicTheme.create();
mytheme.firstDayOfWeek = 0;
mytheme.ether.highlightOpacity = 50;
mytheme.ether.interval.line.show = true;
mytheme.ether.interval.line.color = "";
mytheme.ether.interval.line.opacity = 25;
mytheme.ether.interval.weekend.color = "";
mytheme.ether.interval.weekend.opacity = 30;
mytheme.ether.interval.marker.hAlign = "Bottom";
mytheme.event.track.offset = 0.5;
mytheme.event.track.height = 1.5;
mytheme.event.track.gap = 0.5;
mytheme.event.instant.icon = Timeline.urlPrefix + "images/gray-circle.png";
mytheme.event.instant.impreciseOpacity = 20;
mytheme.event.instant.showLineForNoText = true;
mytheme.event.duration.opacity = 100;
mytheme.event.duration.impreciseOpacity = 20;
mytheme.event.label.width = 200;
mytheme.event.highlightColors = ["#FFFF00","#FFC000","#FF0000","#0000FF"];
mytheme.event.bubble.width = 320;
mytheme.event.bubble.height = 160;
mytheme.event.bubble.titleStyler = function(elmt) {
				elmt.className = "timeline-event-bubble-title";
};
mytheme.event.bubble.bodyStyler = function(elmt) {
				elmt.className = "timeline-event-bubble-body";
};
mytheme.event.bubble.imageStyler = function(elmt) {
				elmt.className = "timeline-event-bubble-image";
};
mytheme.event.bubble.wikiStyler = function(elmt) {
				elmt.className = "timeline-event-bubble-wiki";
};
mytheme.event.bubble.timeStyler = function(elmt) {
				elmt.className = "timeline-event-bubble-time";
};


// ### duplicate theme and apply to lower band
var mytheme_second = Timeline.ClassicTheme.create();
mytheme_second = mytheme;


var eventSource = new Timeline.DefaultEventSource();

Timeline.loadXML("http://www.dexthis.com/wp-content/plugins/wp-simile-timeline/data/timeline.xml.php?cat=5",
		function(xml, url) {
			eventSource.loadXML(xml, url);
});




var bandInfos = [
Timeline.createHotZoneBandInfo({	zones:[{
	start:	"Tue, 07 Sep 2010 19:29:29 +0000",
	end:	"Tue, 07 Sep 2010 19:29:29 +0000",
	magnify:	1,
	unit:		Timeline.DateTime.DAY,
	multiple:	1
}],
	width:          "70%",
	intervalUnit:   Timeline.DateTime.DAY,
	intervalPixels: 200,
	eventSource:    eventSource,
	date:           "Tue, 07 Sep 2010 19:29:29 +0000",
	timeZone:	0,
	showText:	true,
	theme:		mytheme,
	overview:	false,
	locale:		"en"
}),
Timeline.createHotZoneBandInfo({	zones:[{
	start:	"Tue, 07 Sep 2010 19:29:29 +0000",
	end:	"Tue, 07 Sep 2010 19:29:29 +0000",
	magnify:	1,
	unit:		Timeline.DateTime.MONTH,
	multiple:	1
}],
	width:          "30%",
	intervalUnit:   Timeline.DateTime.MONTH,
	intervalPixels: 100,
	eventSource:    eventSource,
	date:           "Tue, 07 Sep 2010 19:29:29 +0000",
	timeZone:	0,
	trackGap:	0.5,
	trackHeight:	0.3,
	showText:	false,
	theme:		mytheme_second,
	overview:	true,
	locale:		"en"
})];

/* This has to be done manually */
bandInfos[1].syncWith = 0;   // synchronize with primary band
bandInfos[1].highlight = true;   // highlight focused area
//bandInfos[1].eventPainter.setLayout(bandInfos[0].eventPainter.getLayout());
		
tl = Timeline.create(document.getElementById("stl-mytimeline"), bandInfos, 0);
  }else{ /* empty - do nothing when no timeline-frame is found */ }
}