var tl;
var eventSource

$(document).ready( function () {
	eventSource = new Timeline.DefaultEventSource();
	var bandInfos = [
	                 Timeline.createBandInfo({
	                     eventSource:    eventSource,
	                     width:          "70%", 
	                     intervalUnit:   Timeline.DateTime.DAY, 
	                     intervalPixels: 100
	                 }),
	                 Timeline.createBandInfo({
	                     eventSource:    eventSource,
	                     width:          "30%", 
	                     intervalUnit:   Timeline.DateTime.MONTH, 
	                     intervalPixels: 200
	                 })
	               ];
	bandInfos[1].syncWith = 0;
	bandInfos[1].highlight = true;
	tl = Timeline.create(document.getElementById("timeline"), bandInfos);
	Timeline.loadXML("/process/schedule/", function(xml, url) { eventSource.loadXML(xml, url); });

    $('input#date').datepicker({
        dateFormat: $.datepicker.W3C,
        showOn: 'both',
        buttonImage: '/static/images/jquery-ui/calendar.png',
        buttonImageOnly: true
    });
    
    $('#project_type').change( function () {
    	// TODO initiate ajax request to '/process/ajax/project_sizes/%d/'
    	$.get('/process/ajax/project_sizes/' + $(this).val() + '/', {}, function (data) {
    		var options = data.split(',');
    		$('#size option[value="small"]').text(options[0]);
    		$('#size option[value="medium"]').text(options[1]);
    		$('#size option[value="large"]').text(options[2]);
    	});
    });
} );

var resizeTimerID = null;

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

function updateTimeline() {
	eventSource.clear();
	Timeline.loadXML("/process/schedule/?date=" + $('#date').val() + '&size=' + $('#size').val() + '&type=' + $('#project_type').val(), function(xml, url) { eventSource.loadXML(xml, url); });
}