// JavaScript Document


// new theme

var theme = Timeline.ClassicTheme.create(); // create the theme
 			theme.ether.highlightOpacity = '90';
 			theme.event.bubble.width = 300;
 			theme.event.bubble.height = 200;
            theme.event.track.height = 30;
            theme.event.tape.height = 8;
	
//basic function
 function onLoad() {
   var eventSource = new Timeline.DefaultEventSource();
   var bandInfos = [

     Timeline.createBandInfo({
		 overview:		false,
         eventSource:    eventSource,
         date:           "Jan 01 1960 00:00:00 GMT",
         width:          "80%", 
         intervalUnit:   Timeline.DateTime.YEAR, 
         intervalPixels: 100,
		 theme:theme
     }),
	 Timeline.createBandInfo({
		 overview:		true,
         eventSource:    eventSource,
         date:           "Jan 01 1960 00:00:00 GMT",
         width:          "20%", 
         intervalUnit:   Timeline.DateTime.DECADE, 
         intervalPixels: 200,
		 theme:theme
     })
   ];
   bandInfos[1].syncWith = 0;
   bandInfos[1].highlight = true;
   
   tl = Timeline.create(document.getElementById("my-timeline"), bandInfos);
   Timeline.loadXML("/Scripts/timeline.xml", function(xml, url) { eventSource.loadXML(xml, url); });
 }
 
 
 
 //customize bubble
 Timeline.DefaultEventSource.Event.prototype.fillInfoBubble = 
function(elmt, theme, labeller) {
          // do whatever to fill elmt
        var doc = elmt.ownerDocument;
        
        var title = this.getText();
        var link = this.getLink();
        var image = this.getImage();
        

        //add title
        var divTitle = doc.createElement("div");
        var textTitle = doc.createTextNode(title);
        if (link != null) {
            var a = doc.createElement("a");
            a.href = link;
            a.appendChild(textTitle);
            divTitle.appendChild(a);
        } else {
            divTitle.appendChild(textTitle);
        }
        theme.event.bubble.titleStyler(divTitle);
        elmt.appendChild(divTitle);
		
		
        //add div
        var divBody = doc.createElement("div");
		//didnt work
		//div.id="bubbleBody";
		
        this.fillDescription(divBody);
        theme.event.bubble.bodyStyler(divBody);
        elmt.appendChild(divBody);
		
		//add img
		if (image != null) {
            var img = doc.createElement("img");
            img.src = image;
			//works for IE if we change image.class to image.id, or remove this line if no style
			//img.class = "bubbleImage";
			img.id = "bubbleImage";
            
            theme.event.bubble.imageStyler(img);
            elmt.appendChild(img);
        }
        
		//print date/time
        //var divTime = doc.createElement("div");
        //this.fillTime(divTime, labeller);
        //theme.event.bubble.timeStyler(divTime);
        //elmt.appendChild(divTime);
        
		//wiki stuff
        var divWiki = doc.createElement("div");
        this.fillWikiInfo(divWiki);
        theme.event.bubble.wikiStyler(divWiki);
        elmt.appendChild(divWiki);



       };