var tl;
var Timeline;
//var document;
//var window;
function onLoad() {
//    var theme = Timeline.ClassicTheme.create();
var theme = Timeline.rbTheme.create();
            theme.event.label.width = 200; // px

var today  = new Date();
var ontem = new Date();
ontem.setDate(today.getDate()-2);
var amanha = new Date();
amanha.setDate(today.getDate()+1);
var duasHoras = new Date();
duasHoras.setHours(today.getHours()-1);
var maisDozeHoras = new Date();
maisDozeHoras.setHours(today.getHours()+12);
var hotStart = new Date();
var hotEnd = new Date();
hotStart.setHours(12);
hotStart.setMinutes(00);
hotEnd.setHours(18);
hotEnd.setMinutes(00);

  var eventSource = new Timeline.DefaultEventSource();
  var bandInfos = [
    Timeline.createHotZoneBandInfo({
       zones: [
            {   start:    hotStart,
                end:      hotEnd,
                magnify:  4,
                unit:     Timeline.DateTime.HOUR
            }
        ],
		eventSource:    eventSource,
   //     date:           today.toUTCString(),
        date:           duasHoras,
        width:          "90%",
        trackHeight:    1.35,
        trackGap:       1.0, 
	intervalUnit:   Timeline.DateTime.HOUR,
        intervalPixels: 250,
	color:		"black",
	theme:		theme
    }),

    Timeline.createBandInfo({
        showEventText:  false,
        trackHeight:   2.0,
        trackGap:       0.1, 
	    eventSource:    eventSource,
//        date:           today.toUTCString(),
        date:           duasHoras,
        width:          "10%",
        intervalUnit:   Timeline.DateTime.DAY,
        intervalPixels: 450,
        color:      "#eee",
        theme:          theme
    })
  ];

  bandInfos[1].syncWith = 0;
  bandInfos[1].highlight = true;
            bandInfos[0].eventPainter = new Timeline.ThumbnailEventPainter({
                theme:              theme,
                trackHeight:        40,
                trackOffset:        20,
                labelWidth:         300,
                thumbnailWidth:     24,
                thumbnailHeight:    24
            });


	  bandInfos[0].decorators = [
                    new Timeline.PointHighlightDecorator({
                        date:       ontem,
                        color:      "#FFFC00",
                        opacity:    100,
                        theme:      theme
                    }),
                new Timeline.SpanHighlightDecorator({
                    startDate:  ontem,
                    endDate:    amanha,
                    startLabel: "inicio",
                    endLabel:   "",
                    color:      "white",
                    opacity:    20,
		theme: theme
                }),
                   new Timeline.PointHighlightDecorator({
                        date:       amanha,
                        color:      "#FFFC00",
                        opacity:    100,
                        theme:      theme
                    })
        ];
                bandInfos[1].decorators = [
                    new Timeline.SpanHighlightDecorator({
                        startDate:  maisDozeHoras,
                        endDate:    maisDozeHoras,
                        color:      "green",
                        opacity:    50,
                        startLabel: "",
                        endLabel:   "arraste para mover",
                        theme:      theme
                    })
		];

  var tl = Timeline.create(
    document.getElementById("my-timeline"),
    bandInfos);

  Timeline.loadXML("33.xml?" +
      Math.random(), function(xml, url) {
         eventSource.loadXML(xml, url);
      });
}

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