function onLoad() {
/* datasetting */
var now=new Date();
  
/* Timeline Setting */
  var eventSource = new Timeline.DefaultEventSource();
  
 var bandTheme=Timeline.ClassicTheme.create();
 bandTheme.autoWidth = false;
 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",
 			hBottomStyler: function(elmt){
 				elmt.className = "timeline-ether-marker-bottom";
 			},
 			hBottomEmphasizedStyle: function(elmt){
 				elmt.className = "timeline-ether-marker-bottom-emphasized";
 			},
 			hTopStyler: function(elmt){
 				elmt.className = "timeline-ether-marker-top";
 			},
 			hTopEmphasizedStyler: function(elmt){
 				elmt.className = "timeline-ether-marker-top-emphasized";
 			},
 			vRightStyler: function(elmt){
 				elmt.className = "timeline-ether-marker-right";
 			},
 			vRightEmphasizedStyler: function(elmt){
 				elmt.className = "timeline-ether-marker-right-emphasized";
 			},
 			vLeftStyler: function(elmt){
 				elmt.className = "timeline-ether-marker-left";
 			},
 			vLeftEmphasizedStyler: function(elmt){
 				elmt.className = "timeline-ether-marker-left-emphasized";
 			}
 		}
 	}
 };
 bandTheme.event = {
 	track: {
 		offset: 2, // px.
			height: 10, // px.
			gap: 2, // px.
			autoWidthMargin: 1.5
		},
		overviewTrack: {
			offset: 20, // px -- top margin above tapes 
			tickHeight: 6, // px
			height: 2, // px
			gap: 1, // px
			autoWidthMargin: 5
		},
		tape: {
			height: 4 // px. For thicker tapes, remember to change track height too.
		},
		instant: {
			icon: "http://www.dlinkbring.com/picture/timelinemark.png",
			iconWidth: 10,
			iconHeight: 10,
			color: "#0066cc",
			impreciseColor: "#0066cc",
			impreciseIconMargin: 3,
			mpreciseOpacity: 20,
			showLineForNoText: true
		},
		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
		//      backgroundColor:   "#0066cc",
		//      lineColor:         "#ffffcc",
		},
		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:           now,
   width:          "75%", 
   intervalUnit:   Timeline.DateTime.WEEK, 
   intervalPixels: 50,
   theme:bandTheme,
   layout:   'original'
  }),
  Timeline.createBandInfo({
   eventSource:    eventSource,
   date:           now,
   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("mytimeline"), bandInfos);
 Timeline.loadXML('http://www.dlinkbring.com/ajax/art_timeline.xml', function(xml, url) { eventSource.loadXML(xml, url); });
}

function onLoadmusic() {
/* datasetting */
var now=new Date();
  
/* Timeline Setting */
  var eventSource = new Timeline.DefaultEventSource();
  
 var bandTheme=Timeline.ClassicTheme.create();
 bandTheme.autoWidth = false;
 bandTheme.ether = {
 	backgroundColors: [
     "#CCFFCC" ,  // Background Color for First Calendar
     "#FFFFCC" // Background Color First for Second Calendar
    ],
 	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: 10, // px.
			gap: 2, // px.
			autoWidthMargin: 1.5
		},
		overviewTrack: {
			offset: 20, // px -- top margin above tapes 
			tickHeight: 6, // px
			height: 2, // px
			gap: 1, // px
			autoWidthMargin: 5
		},
		tape: {
			height: 4 // px. For thicker tapes, remember to change track height too.
		},
		instant: {
			icon: "http://www.dlinkbring.com/picture/timelinemark.png",
			iconWidth: 10,
			iconHeight: 10,
			color: "#0066cc",
			impreciseColor: "#0066cc",
			impreciseIconMargin: 3,
			mpreciseOpacity: 20,
			showLineForNoText: true
		},
		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
		//      backgroundColor:   "#0066cc",
		//      lineColor:         "#ffffcc",
		},
		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:       +0,
   date:           tlcenter,
   width:          "80%", 
   intervalUnit:   Timeline.DateTime.YEAR, 
   intervalPixels: 100,
   theme:bandTheme,
   layout:   'original'
  }),
  Timeline.createBandInfo({
   eventSource:    eventSource,
   date:           tlcenter,
   timeZone:       +0,
   showEventText:  false,
   trackHeight:    0.3,
   trackGap:       0.2,
   width:          "20%", 
   intervalUnit:   Timeline.DateTime.DECADE, 
   intervalPixels: 150,
   theme:bandTheme,
   layout:   'overview'
  })
 ];

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

 tl = Timeline.create(document.getElementById("mymusictimeline"), bandInfos);
 Timeline.loadXML('http://www.dlinkbring.com/ajax/'+group.replace(/ /g,'_')+'_timeline.xml', function(xml, url) { eventSource.loadXML(xml, url); });
 new Ajax.Request('http://www.dlinkbring.com/ajax/xmlnew.php?name='+group.replace(/ /g,'_')+'_timeline.xml',{method:'get'});
}

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

function dms_tl(id) {
/* datasetting */
var now=new Date();
  
/* 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.dlinkbring.com/picture/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";
			}
		}
};

tlstart=tlstart;
 if(tlzone==false){
 var bandInfos = [
  Timeline.createHotZoneBandInfo({
        zones: [
            {   start:    tlmagstart,
                end:      tlmagend,
                magnify:  25,
                unit:     Timeline.DateTime.MONTH
            }
        ],
   eventSource:    eventSource,
   timeZone:       +9,
   date:           tlstart,
   width:          "85%", 
   intervalUnit:   tlwide0, 
   intervalPixels: tlint0,
   theme:bandTheme,
   layout:   'original'
  }),
  Timeline.createBandInfo({
   eventSource:    eventSource,
   date:           tlstart,
   timeZone:       +9,
   showEventText:  false,
   trackHeight:    0.3,
   trackGap:       0.1,
   width:          "15%", 
   intervalUnit:   tlwide1, 
   intervalPixels: tlint1,
   theme:bandTheme,
   layout:   'overview'
  })
 ];
 }else{
 var bandInfos = [
  Timeline.createBandInfo({
   eventSource:    eventSource,
   timeZone:       +9,
   date:           tlstart,
   width:          "85%", 
   intervalUnit:   tlwide0, 
   intervalPixels: tlint0,
   theme:bandTheme,
   layout:   'original'
  }),
  Timeline.createBandInfo({
   eventSource:    eventSource,
   date:           tlstart,
   timeZone:       +9,
   showEventText:  false,
   trackHeight:    0.3,
   trackGap:       0.1,
   width:          "15%", 
   intervalUnit:   tlwide1, 
   intervalPixels: tlint1,
   theme:bandTheme,
   layout:   'overview'
  })
 ];
 }

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

 tl = Timeline.create(document.getElementById("dmstimeline"), bandInfos);
 Timeline.loadXML('http://www.dlinkbring.com/ajax/wt_'+id+'.xml', function(xml, url) { eventSource.loadXML(xml, url); });
 /*new Ajax.Request('http://www.dlinkbring.com/ajax/xmlnew.php?name=wt_'+id,{method:'get'});*/
}

function centerTimeline(date) {
    tl.getBand(0).setCenterVisibleDate(Timeline.DateTime.parseGregorianDateTime(date));
}

function centerMove(direction){
 var years= new Number(document.tlmove.tlyear.value);
 var curdate=tl.getBand(0).getCenterVisibleDate();
 var curcenter=new Number(curdate.getYear());
 if(curcenter<2000){
  curcenter=curcenter+1900;
 }
/* window.alert(curcenter);*/
/* window.alert(years);*/
 var newcenter;
 if(years.toString().match(/[1-9]{1}[0-9]{0,3}/)){
  if(direction=="b"){
   newcenter=curcenter-years;
  }
  if(direction=="f"){
   newcenter=curcenter+years;
  }
/*  window.alert(newcenter);*/
  centerTimeline(newcenter);
 }
}