//Javascript code for Water Conflict Chronology Timeline
//created by Matthew Heberger, August 2009
//modified from http://simile-widgets.googlecode.com/svn/timeline/tags/latest/src/webapp/examples/religions/jewish-history.html


var tl;
var eventSource;

function onLoad() {
    resizeTimeLineDiv();

    eventSource = new Timeline.DefaultEventSource(0);
    
    var theme = Timeline.ClassicTheme.create();
    // demonstrate highlighting of labels (in addition to icons and tapes)
    theme.event.highlightLabelBackground = true;
    theme.event.bubble.width = 320;
    
    var zones2 = [
        {   start:    "1900",
            end:      "2010",
            magnify:  5,
            unit:     Timeline.DateTime.DECADE
        }
    ];
    
    var zones = [
            {   start:    "1840",
                end:      "1930",
                magnify:  10,
                unit:     Timeline.DateTime.DECADE,
                multiple: 1
       },
       
       {   start:    "1930",
           end:      "2010",
           magnify:  100,
           unit:     Timeline.DateTime.YEAR,
           multiple: 1
            }
    ];
    
    var d = Timeline.DateTime.parseGregorianDateTime("2000");
    var bandInfos = [
        Timeline.createHotZoneBandInfo({
            width:          "80%", 
            intervalUnit:   Timeline.DateTime.CENTURY, 
            intervalPixels: 250,
            zones:          zones,
            eventSource:    eventSource,
            date:           d,
            timeZone:       -6,
            theme:          theme
        }),
        Timeline.createHotZoneBandInfo({
            width:          "20%", 
            intervalUnit:   Timeline.DateTime.CENTURY, 
            intervalPixels: 70,
            zones:          zones2,
            eventSource:    eventSource,
            date:           d,
            overview:       true,
            theme:          theme
        })
    ];
    bandInfos[1].syncWith = 0;
    bandInfos[1].highlight = true;
    
    tl = Timeline.create(document.getElementById("timeline"), bandInfos, Timeline.HORIZONTAL);
    loadNewData();
    
    //setupFilterHighlightControls(document.getElementById("controls"), tl, [0,1], theme);
}


function centerTimeline(year) {
    tl.getBand(0).setCenterVisibleDate(new Date(year, 0, 1));
}


var resizeTimerID = null;

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


function loadNewData(){
  var params = {}
  params.region=document.getElementById('region').value;
  params.conftype = document.getElementById('conftype').value;
  params.epoch = document.getElementById('epoch').value;
  
  var jstr = JSON.stringify(params);
  var myURL = '../../php/timeline.php?jstr=' + jstr;
  //alert(myURL);
  
  eventSource.clear();
  tl.loadJSON(myURL, function(json, url) {
    eventSource.loadJSON(json, url);
    fillInfo();
  });
}

function print(str){
  document.getElementById("txt").innerHTML += str + "<br />"
}

function ListProperties(){
  var o = eventSource;
  for(var att in o){
    print(o[att]);
  }
}

function getMinDate(){
  alert(eventSource.getEarliestDate());
}

function fillInfo(){
  var num =eventSource.getCount();
  var begin =eventSource.getEarliestDate();
  var end = eventSource.getLatestDate();
  var myBegin = new Date(begin);
  var myEnd = new Date(end);
  
  document.getElementById("num").innerHTML = num;
  if (num>1){
    var yr = myBegin.getFullYear();
    var a = " entries from <a href=\"javascript:goToDate('" + yr + "');\">" + formatBC(yr) + "</a>";  
    document.getElementById("begin").innerHTML = a;
    
    yr = myEnd.getFullYear();
    if(yr>0){yr+=1;}
    var a = " to <a href=\"javascript:goToDate('" + yr + "');\">" + formatBC(yr) + "</a>";
    document.getElementById("end").innerHTML = a;
    goToDate(myEnd.getFullYear());
  }
  else if (num==1){
    var yr = myBegin.getFullYear();
    var a = " entry in <a href=\"javascript:goToDate('" + yr + "');\">" + formatBC(yr) + "</a>";  
    document.getElementById("begin").innerHTML = a;
    document.getElementById("end").innerHTML = "";
    goToDate(myBegin.getFullYear());
  }
  else {
    document.getElementById("begin").innerHTML = "";
    document.getElementById("end").innerHTML = "entries";
  }
}

function formatBC(yr){
  if (yr>=0){
    return yr;
  }else{
    return -yr + " BC";
  }
}

function goToDate(date) {
    tl.getBand(0).setCenterVisibleDate(SimileAjax.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 = "Filter:";
    
    td = tr.insertCell(1);
    td.innerHTML = "Highlight:";
    
    var handler = function(elmt, evt, target) {
        onKeyPress(timeline, bandIndices, table);
    };
    
    tr = table.insertRow(1);
    tr.style.verticalAlign = "top";
    
    td = tr.insertCell(0);
    
    var input = document.createElement("input");
    input.type = "text";
    SimileAjax.DOM.registerEvent(input, "keypress", handler);
    td.appendChild(input);
    
    for (var i = 0; i < theme.event.highlightColors.length; i++) {
        td = tr.insertCell(i + 1);
        
        input = document.createElement("input");
        input.type = "text";
        SimileAjax.DOM.registerEvent(input, "keypress", handler);
        td.appendChild(input);
        
        var divColor = document.createElement("div");
        divColor.style.height = "0.5em";
        divColor.style.background = theme.event.highlightColors[i];
        td.appendChild(divColor);
    }
    
    td = tr.insertCell(tr.cells.length);
    var button = document.createElement("button");
    button.innerHTML = "Clear All";
    SimileAjax.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() {
        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 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 = "";
    }
    
    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();
}


function getWindowHeight() {
    if (window.self&&self.innerHeight) {
        return self.innerHeight;
    }
    if (document.documentElement&&document.documentElement.clientHeight) {
        return document.documentElement.clientHeight;
    }
    return 0;
};

function resizeTimeLineDiv() {
  //Resize the height of the div containing the map.
  //Do not call any map methods here as the resize is called before the map is created.
  var d=document.getElementById("timeline");
    var offsetTop=0;
    for (var elem=d; elem!==null; elem=elem.offsetParent) {
        offsetTop+=elem.offsetTop;
    }
    var height=getWindowHeight()-offsetTop-32;
    if (height>=0) {
        d.style.height=height+"px";
    }

};