/* WP SIMILE Timeline JavaScript configuration script
 * Plugin version: 0.4.5.4 */
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.ether.interval.marker.hBottomStyler = function(elmt) {
				elmt.className = "timeline-ether-marker-bottom";
};
mytheme.ether.interval.marker.hBottomEmphasizedStyler = function(elmt) {
				elmt.className = "timeline-ether-marker-bottom-emphasized";
};
mytheme.ether.interval.marker.hTopStyler = function(elmt) {
				elmt.className = "timeline-ether-marker-top";
};
mytheme.ether.interval.marker.hTopEmphasizedStyler = function(elmt) {
				elmt.className = "timeline-ether-marker-top-emphasized";
};
mytheme.ether.interval.marker.vAlign = "Right";
mytheme.ether.interval.marker.vRightStyler = function(elmt) {
				elmt.className = "timeline-ether-marker-right";
};
mytheme.ether.interval.marker.vRightEmphasizedStyler = function(elmt) {
				elmt.className = "timeline-ether-marker-right-emphasized";
};
mytheme.ether.interval.marker.vLeftStyler = function(elmt) {
				elmt.className = "timeline-ether-marker-left";
};
mytheme.ether.interval.marker.vLeftEmphasizedStyler = function(elmt) {
				elmt.className = "timeline-ether-marker-left-emphasized";
};
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://anewmanifesto.org/wp-content/plugins/wp-simile-timeline/data/timeline.xml.php?cat=3",
		function(xml, url) {
			eventSource.loadXML(xml, url);
});




var bandInfos = [
Timeline.createHotZoneBandInfo({	zones:[{
	start:	"Thu, 09 Sep 2010 11:10:39 +0100",
	end:	"Thu, 09 Sep 2010 11:10:39 +0100",
	magnify:	1,
	unit:		Timeline.DateTime.MONTH,
	multiple:	1
}],
	width:          "50%",
	intervalUnit:   Timeline.DateTime.MONTH,
	intervalPixels: 30,
	eventSource:    eventSource,
	date:           "Fri, 15 Jun 1984 00:00:00 +0100",
	timeZone:	0,
	showText:	true,
	theme:		mytheme,
	overview:	false,
	locale:		"en"
}),
Timeline.createHotZoneBandInfo({	zones:[{
	start:	"Thu, 09 Sep 2010 11:10:39 +0100",
	end:	"Thu, 09 Sep 2010 11:10:39 +0100",
	magnify:	1,
	unit:		Timeline.DateTime.YEAR,
	multiple:	1
}],
	width:          "50%",
	intervalUnit:   Timeline.DateTime.YEAR,
	intervalPixels: 150,
	eventSource:    eventSource,
	date:           "Fri, 15 Jun 1984 00:00:00 +0100",
	timeZone:	0,
	trackGap:	0.5,
	trackHeight:	0.3,
	showText:	true,
	theme:		mytheme_second,
	overview:	false,
	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 */ }
}