var tl;
function onLoad() {
  var eventSource = new Timeline.DefaultEventSource();

  var theme = Timeline.ClassicTheme.create();
	theme.event.label.width = 400;
  theme.event.bubble.width = 300;
  theme.event.bubble.height = 200;

  var bandInfos = [
  Timeline.createBandInfo({
		eventSource:    eventSource,
    trackHeight:    1.4,
    date:           "Jun 28 1985",
    width:          "85%", 
    intervalUnit:   Timeline.DateTime.DECADE, 
    intervalPixels: 150,
		theme:					theme
  }),
  Timeline.createBandInfo({
		showEventText:  false,
    trackHeight:    0.3,
    trackGap:       0,
		eventSource:    eventSource,
    date:           "Jun 28 1650",
    width:          "15%", 
    intervalUnit:   Timeline.DateTime.CENTURY, 
    intervalPixels: 100,
		theme:					theme
  })
  ];
  bandInfos[1].syncWith = 0;
  bandInfos[1].highlight = true;
  bandInfos[1].eventPainter.setLayout(bandInfos[0].eventPainter.getLayout());

	for (var i = 0; i < bandInfos.length; i++) {
    bandInfos[i].decorators = [
      new Timeline.PointHighlightDecorator({
					date: 			new Date(),
          //date:       "Sat Nov 29 2008",
          color:      "#FFC080",
          opacity:    50,
          theme:      theme
      })
  	];
	}

  tl = Timeline.create(document.getElementById("timeline"), bandInfos);
  Timeline.loadXML("/timeline/lapatum.xml", function(xml, url) { eventSource.loadXML(xml, url); });

  setupFilterHighlightControls(document.getElementById("patum-controls"), tl, [0,1], theme);
}

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

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

function setupFilterHighlightControls(div, timeline, bandIndices, theme) {
    var table = document.createElement("table");
    var tr = table.insertRow(0);
    
    var td = tr.insertCell(0);
    td.innerHTML = "Filtre:";
    
    td = tr.insertCell(1);
    td.innerHTML = "Destacar:";
    
    var handler = function(elmt, evt, target) {
        onKeyPress(timeline, bandIndices, table);
    };
    
    var handler2 = function(elmt, evt, target) {
        onChange(timeline, bandIndices, table);
    };
    
    tr = table.insertRow(1);
    tr.style.verticalAlign = "top";
    
    td = tr.insertCell(0);

		//filter
    var input = document.createElement("input");
    input.type = "text";
		var size = document.createAttribute("size");
		size.nodeValue = "15";
		input.setAttributeNode(size);
    Timeline.DOM.registerEvent(input, "keypress", handler);
    td.appendChild(input);

		//list select
		var sel = document.createElement("select");
		var nom = document.createAttribute("name");
		nom.nodeValue = "comparsa";
		sel.setAttributeNode(nom);
		var id = document.createAttribute("id");
		id.nodeValue = "comparsa";
		sel.setAttributeNode(id);
		var opt0 = document.createElement("option");
		opt0.appendChild(document.createTextNode("- tria -"));
		sel.appendChild(opt0);
		var opt1 = document.createElement("option");
		opt1.appendChild(document.createTextNode("\u00C0liga"));
		sel.appendChild(opt1);
		var opt2 = document.createElement("option");
		opt2.appendChild(document.createTextNode("Gegants"));
		sel.appendChild(opt2);
		var opt3 = document.createElement("option");
		opt3.appendChild(document.createTextNode("Guita"));
		sel.appendChild(opt3);
		var opt4 = document.createElement("option");
		opt4.appendChild(document.createTextNode("Nan"));
		sel.appendChild(opt4);
		var opt5 = document.createElement("option");
		opt5.appendChild(document.createTextNode("Cavallet"));
		sel.appendChild(opt5);
    Timeline.DOM.registerEvent(sel, "change", handler2);
    td.appendChild(sel);

		//highlights
    for (var i = 0; i < theme.event.highlightColors.length; i++) {
        td = tr.insertCell(i + 1);
        
        input = document.createElement("input");
        input.type = "text";
        Timeline.DOM.registerEvent(input, "keypress", handler);
        td.appendChild(input);
        
        var divColor = document.createElement("div");
        divColor.style.height = "0.2em";
        divColor.style.background = theme.event.highlightColors[i];
        td.appendChild(divColor);
    }
    
    td = tr.insertCell(tr.cells.length);
    var button = document.createElement("button");
    button.innerHTML = "Buidar";
    Timeline.DOM.registerEvent(button, "click", function() {
        clearAll(timeline, bandIndices, table);
    });
    td.appendChild(button);
    
    div.appendChild(table);
}

var timerID = null;
function onKeyPress(timeline, bandIndices, table) {
    if (timerID != null) {
        window.clearTimeout(timerID);
    }
    timerID = window.setTimeout(function() {
				document.getElementById("comparsa").selectedIndex = 0;
        performFiltering(timeline, bandIndices, table);
    }, 300);
}
function onChange(timeline, bandIndices, table) {
    if (timerID != null) {
        window.clearTimeout(timerID);
    }
    timerID = window.setTimeout(function() {
        performFiltering(timeline, bandIndices, table);
    }, 300);
}
function cleanString(s) {
    return s.replace(/^\s+/, '').replace(/\s+$/, '');
}
function performFiltering(timeline, bandIndices, table) {
    timerID = null;
    
    var tr = table.rows[1];
    var text = cleanString(tr.cells[0].firstChild.value);
		var pos = document.getElementById("comparsa").selectedIndex;
		if (pos != 0){
			text = cleanString(tr.cells[0].childNodes[1].childNodes[pos].value);
			tr.cells[0].firstChild.value = "";
		}
    
    var filterMatcher = null;
    if (text.length > 0) {
        var regex = new RegExp(text, "i");
        filterMatcher = function(evt) {
            return regex.test(evt.getText()) || regex.test(evt.getDescription());
        };
    }
    
    var regexes = [];
    var hasHighlights = false;
    for (var x = 1; x < tr.cells.length - 1; x++) {
        var input = tr.cells[x].firstChild;
        var text2 = cleanString(input.value);
        if (text2.length > 0) {
            hasHighlights = true;
            regexes.push(new RegExp(text2, "i"));
        } else {
            regexes.push(null);
        }
    }
    var highlightMatcher = hasHighlights ? function(evt) {
        var text = evt.getText();
        var description = evt.getDescription();
        for (var x = 0; x < regexes.length; x++) {
            var regex = regexes[x];
            if (regex != null && (regex.test(text) || regex.test(description))) {
                return x;
            }
        }
        return -1;
    } : null;
    
    for (var i = 0; i < bandIndices.length; i++) {
        var bandIndex = bandIndices[i];
        timeline.getBand(bandIndex).getEventPainter().setFilterMatcher(filterMatcher);
        timeline.getBand(bandIndex).getEventPainter().setHighlightMatcher(highlightMatcher);
    }
    timeline.paint();
}
function clearAll(timeline, bandIndices, table) {
    var tr = table.rows[1];
    for (var x = 0; x < tr.cells.length - 1; x++) {
        tr.cells[x].firstChild.value = "";
    }
		//clear select list    
		document.getElementById("comparsa").selectedIndex = 0;

    for (var i = 0; i < bandIndices.length; i++) {
        var bandIndex = bandIndices[i];
        timeline.getBand(bandIndex).getEventPainter().setFilterMatcher(null);
        timeline.getBand(bandIndex).getEventPainter().setHighlightMatcher(null);
    }
    timeline.paint();
}