require_once("_template/js/lib/swfobject.js");
require_once("_template/js/lib/jquery/jquery.js");
require_once("_template/js/lib/jquery/jquery.ui.js");
require_once("_template/js/lib/jquery/jquery.metadata.js");
require_once("_template/js/lib/jquery/jquery.flash.js");
require_once("_template/js/lib/jquery/jquery.blockUI.js");

var config = {
	url : {
		backgroundSWF	: '_template/swf/bg.swf',
		eJournalData 	: '/ejournal.cfm',
		mainMenuData	: '/ejournal.cfm?mode=mainmenu',
		pageHeaderData	: '/ejournal.cfm?mode=pageheaders',
		projectListData	: '/ejournal.cfm?mode=projectlist&category=',
		projectData		: '/ejournal.cfm?mode=project&project='
	}
	,
	element : {
		wrapper 	: '#wrapper-inner',		// inner content wrapper
		pagecontent	: '#pagecontent',		// page content wrapper
		pageheader 	: '#pageheader',		// page header container
		backbutton	: '#mainmenuback',		// back button
		searchbutton: '#searchbtn',			// search button
		searchkeyword: '#searchkeyword',	// search keyword
		mainmenu	: '#mainmenu',			// main menu wrapper
		projectlist	: '#projectlist',		// project listing
		projectmenu	: '#projectmenu',		// wrapper for project list (scroll box)
		timeline	: '#timeline',			// timeline container
		title		: '#title'				// title element
	}
}

/* blockUI defaults (change default message) */
$.extend($.blockUI.defaults,{
	message: "<img hspace='5' src='/_template/images/throbber.gif' width='16' height='16' style='vertical-align:middle'/> <span class='glow-throbber'>please wait...</span>"
	,
	css: { 
		padding:        0,
		margin:         0,
		width:          '30%', 
		top:            '40%', 
		left:           '35%', 
		textAlign:      'center', 
		color:          '#000', 
		border:         '',
		backgroundColor:'',
		cursor:         'wait'
	}
	,
	 // styles for the overlay
    overlayCSS:  { 
        backgroundColor:'#fff', 
        opacity:        '0.8' 
    }
});

// timeline 
var myTimeline;
var backgroundTimeout;

jQuery(document).ready(function($){	
	var ie = $.browser.msie;
	var ie6 = $.browser.msie && parseInt($.browser.version)==6;
	var ff2 = $.browser.mozilla && parseFloat($.browser.version)<=1.8;

	var objBookmark = getBookmarkAsObject();
	
	// init the page
	initPage(objBookmark)
});

jQuery(window).resize(function($){	
	var resizeTimerID = null;
	if (resizeTimerID == null && myTimeline) {
		resizeTimerID = window.setTimeout(function() {
			resizeTimerID = null;
			try{ myTimeline.layout() }catch(e){if(window.console) console.log(e)};
		}, 500);
	}
});

/**
 * Initialise the display of the page. 
 * Load requested data and show required view.
 * @param {Object} data
 */
function initPage(data) {
	var mode = data.mode;
	// create basic content regions
	var header 		= $("<div id='pageheader'></div>");
	var pagecontent = $("<div id='pagecontent'></div>");
	var timeline 	= $("<div id='timeline'></div>");
	$(config.element.wrapper).append(header);
	$(config.element.wrapper).append(pagecontent);
	$(config.element.wrapper).append(timeline);
	
	var container = $(config.element.wrapper);
	container.data('mode',mode);	
	
	// onload: reveal content area transition
	// NB this has to happen BEFORE initialising any other bits or things don't behave 
	// (due to widths for undisplayed elements not calculated properly)	
	container.show('fold',{size:1},1500);	
	
	// init back button
	$(config.element.backbutton)
			.hide()			
			.click(function(){
				backButtonClick();
				return false;
			});	
	
	// search button
	$(config.element.searchbutton)			
			.click(function(){
				searchButtonClick();
				return false;
			});	
			
	// search box
	$(config.element.searchkeyword)			
			.focus(function(){
				if($(this).val()=="Search ejournal") $(this).val(''); 
			})
			.blur(function(){
				if(jQuery.trim($(this).val()).length==0) $(this).val("Search ejournal"); 
			});	
	
	// load page header (async)
	getPageHeader(data);

	// load page prerequisites based on mode
	var url;
	switch(mode) {
		case "mainmenu" 	:
			loadMainMenu();			
			break;
		case "projectlist" 	:			
			loadProjectList(data.category, 1, data.keyword || "");			
			break;
		case "project"		:
			loadProject(data.project);
	}
	
	// load background SWF
	$("body").css('background', 'url(/_template/images/bg.gif) center center no-repeat #FFF');
	loadBackground();
	
	/*
	// start/stop background (debug only)
	var btnPlay = $("<input type='button' value='play'/>");
	var btnStop = $("<input type='button' value='stop'/>");
	
	btnPlay.click(function(){		
		backgroundPlay();
	});
	btnStop.click(function(){
		backgroundStop();
	});
	
	$("body").prepend(btnPlay);
	$("body").prepend(btnStop);
	*/
	
	$("body").click(function(){
		backgroundStop();
		clearTimeout(backgroundTimeout);
		backgroundTimeout = setTimeout(function(){backgroundPlay();}, 5000);
	});
	
	//backgroundTimeout = setTimeout(function(){backgroundPlay();}, 2000);
	
}

// --------------------------------------------------------------------------------------------------------
// UTILS 
// --------------------------------------------------------------------------------------------------------

/**
 * LOAD BACKGROUND SWF
 */
function loadBackground() {
	///////////////////////////////////////
	// put swf in bg
	var params = {
		wmode:"opaque", scale:"noscale"//, play:false
	}
	// PPC mac doesn't have the grunt for the SWF background so swap for static gif
	if (navigator.platform.toLowerCase() != "macppc") {
		//$("body").css("background","none");
		swfobject.embedSWF(config.url.backgroundSWF, "bgswf", "100%", "100%", "8", null, {sliveconnect:true,name:"bgswf"}, params);
	} else {
		$("body").css('background', 'url(/_template/images/bg.gif) center center no-repeat #FFF');
	}
}

function backgroundStop(){
	var swf = getBackgroundSwf();
	if(swf!=null)	swf.StopPlay();
}

function backgroundPlay(){
	var swf = getBackgroundSwf();
	if(swf!=null)	getBackgroundSwf().Play();
}

/**
 * get a reference to the bg swf
 */
function getBackgroundSwf() {
	var movieName = "bgswf";
	var theSwf = null;
  if (window.document[movieName]) {
      theSwf = window.document[movieName];
  }
  if (navigator.appName.indexOf("Microsoft Internet")==-1) {
    if (document.embeds && document.embeds[movieName])
      theSwf = document.embeds[movieName]; 
  }
  else {// if (navigator.appName.indexOf("Microsoft Internet")!=-1) {
    theSwf = document.getElementById(movieName);
  }
  if(theSwf==undefined) return null
  else return theSwf;
}


/**
 * SYNCHRONOUS ajax call to retrieve content
 * This is a blocking request to allow us to retrieve pre-requisites before continued processing
 * @param {Object} data
 */
function loadContentSync(url) {
	$(config.element.wrapper).block();
	var html = $.ajax({
		url: url,
		async: false
	}).responseText;
	$(config.element.wrapper).unblock();
	return html;
}

function getBookmarkAsObject(){
	// get the anchor to see what mode to initialise
	var bookmark = document.location.hash.substring(1);
	var aBookmark = bookmark.split('&');
	var objBookmark = {};
	for(var i=0;i<aBookmark.length;i++){
		var e = aBookmark[i].split('=');
		if(e.length==2){
			objBookmark[e[0]] = e[1];
		}
	}
	//console.log(bookmark);
	//console.log(aBookmark);
	//console.log(objBookmark);	
	
	objBookmark.mode = 'mainmenu';
	if(objBookmark.category) objBookmark.mode = 'projectlist';
	else if(objBookmark.project)  objBookmark.mode = 'project';
	
	return objBookmark;
}

/**
 * retrieve the page header for the selected mode
 * @param {Object} container
 * @param {Object} data
 */
function getPageHeader(data){
	var container = $(config.element.pageheader);
	var selector = "";
	switch(data.mode){
		case "mainmenu" :
			selector = "mainmenu";
			break; 
		case "projectlist" :		
			var cat = data.category ? data.category  : "generic";			
			selector = "category-"+cat;
			break;		
		default: 
			// nothing to do			
			
	}
	if (selector.length) {
		// if there's already content, fade it out and replace
		if ($('div', container).size()) {
			$('div', container).fadeOut(500, function(){
				$(container).load(config.url.pageHeaderData + ' #ph-' + selector, function(responseText, textStatus, XMLHttpRequest){
					$('div', container).hide();
					$('div', container).fadeIn(1500);
				});
			});
		}
		// otherwise just load stuff in
		else {
			$(container).load(config.url.pageHeaderData + ' #ph-' + selector, function(responseText, textStatus, XMLHttpRequest){
				// nothing to do
			});
		}
				
	}
}

/** 
 * set the main page title (swf)
 */
function setPageTitle(txt) {
	$('#title').empty();
	$('#title').flash(
        { 
          src: '/_template/swf/title.swf',
          width: 540,
          height: 50,
		  wmode : 'transparent',
          flashvars: { txt:txt }
        },
        { version: 8 }
    );
	
	document.title = txt;
}

//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// MAIN MENU (list four main categories)
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

/**
 * loadMainMenu
 */
function loadMainMenu() {
	var url = config.url.mainMenuData;
	$(config.element.pagecontent).html( loadContentSync(url) );
	initMainMenu();	
}

/**
 * Init main menu (four categories)
 * set menu positions
 */
function initMainMenu(){
	$(config.element.mainmenu).data('selectedMenu','');	
	
	// init menus (tweak positions)
	$('.menu-category',config.element.mainmenu).each(function(i){			
		var menuId = $(this).attr('id');		
		$('img',this)
				.addClass('link')
				.click(function(){
					selectMenu(menuId);
				});
		var xPos = ($(this).width() + 12) * i + 12;

		$(this).css('left',xPos);
		$(this).data('left',xPos);	// store original x pos
	});	
	
	setPageTitle('MLC eJournal');
}

/**
 * handle click of search button
 */
function searchButtonClick() {
	var keyword = jQuery.trim( $("#searchkeyword").val() );
	if(!keyword.length) return false;
	var cat = "search";
	var page = 1;
	document.location.hash = '#category=' + cat + '&page=' + page + '&keyword='+keyword;
	
	selectMenu('mainmenu-search',false);
	loadProjectList(cat,page,keyword);
	
	// bug fix: hide timeline if project (timeline) view is active
	if ($(config.element.wrapper).data('mode')=='project') {
		$(config.element.timeline).hide();
		$(config.element.pageheader).show();
		$(config.element.pagecontent).show();
	}
}

/**
 * handle click of back button depending on container mode
 */
function backButtonClick() {
	var mode = $(config.element.wrapper).data('mode');	
	var btn = $(config.element.backbutton);
	
	switch(mode) {
		case 'mainmenu' : 
			break;		
		
		case 'projectlist' :
			deselectMenu();
			btn.fadeOut(500);			
			break;

		case 'project'	:			
			$(config.element.timeline).hide();
			var pageHtml = $(config.element.pagecontent).html();
			// if no main menu exists, then load that
			if (pageHtml == null || pageHtml.length == 0) {
				getPageHeader({ mode: 'mainmenu' });
				$(config.element.wrapper).data('mode','mainmenu');
				$(config.element.backbutton).fadeOut(500);
				// visibility on/off to prevent flicker during init
				$(config.element.pagecontent).css('visibility','hidden');			
				$(config.element.pagecontent).show();
				loadMainMenu();
				$(config.element.pagecontent).hide();
				$(config.element.pagecontent).css('visibility','visible');
				document.location.hash = '#';				
				
			} else {
				$(config.element.wrapper).data('mode','projectlist');
				history.go(-1);				
			}
			// otherwise show the last menu
			$(config.element.pageheader).fadeIn(1000);
			$(config.element.pagecontent).fadeIn(1000);
			break;
	}
}

/**
 * Select a menu by ID - flag whether to animate or not
 * @param {Object} menuId
 * @param {Object} animate
 */
function selectMenu(menuId, animate){	
	// not enabled if animation is occurring or the item is selected already
	var isEnabled = ! ( $(config.element.mainmenu).hasClass('selected') || $(config.element.mainmenu).hasClass('animating') );
	if (!isEnabled) {		
		return;
	}
	$(config.element.mainmenu).data('selectedMenu',menuId);
	$(config.element.mainmenu).addClass('selected');
	menuTransition(menuId, 'select', animate);	
	
	// get category header
	var cat = $('#' + menuId).metadata().category;
	var title = $('#' + menuId).metadata().title;
	getPageHeader({mode:'projectlist', category:cat});
	
	// alter the URL (bookmark)
	var page = getBookmarkAsObject().page || 1;
	var keyword = getBookmarkAsObject().keyword || "";
	document.location.hash = '#category=' + cat + '&page=' + page;
	if(keyword.length) document.location.hash += ("&keyword="+keyword); 
	
	// set wrapper mode
	$(config.element.wrapper).data('mode','projectlist');

	// set title
	setPageTitle(title);
}

/**
 * Deselect a menu (back to main menu)
 */
function deselectMenu() {	
	if($(config.element.mainmenu).hasClass('animating')) return;
	var menuId = $(config.element.mainmenu).data('selectedMenu');
	$(config.element.mainmenu).data('selectedMenu','');		
	menuTransition(menuId, 'deselect');
	
	getPageHeader({mode:'mainmenu'});
	// alter the URL (bookmark)
	document.location.hash = '#';
	
	// set wrapper mode
	$(config.element.wrapper).data('mode','mainmenu');
	
	// set title
	setPageTitle('MLC eJournal');
	
	// safari annoyance:
	$('.pagenumber').remove();
}

/**
 * manage menu transition from main menu to project list in different stages
 * stage1: hide other menus
 * stage2: move selected to left
 * stage3: load project list
 * 
 * @param {Object} menuId
 * @param {Object} operation
 * @param {Object} stage
 */
function menuTransition(menuId, operation, stage){
	if(stage==false) stage = -1; // disable animation
	if(!stage) stage=1;		
	// disable clicks
	$(config.element.mainmenu).addClass('animating');
	if(operation=='select'){
	
		switch(stage){
			case 1: // hide other menus				
				$('.menu-category:not(#' + menuId + ')',config.element.mainmenu)
							.addClass('animating')
							.fadeOut(500, function(){
								$(this).removeClass('animating');
								if($('.menu-category.animating').size()==0)
									menuTransition(menuId,operation,stage+1);
							});	
				break;
				 
			case 2: // move selected menu to the left
				$('#' + menuId)						
						.animate({left:12},800, function(){
							menuTransition(menuId,operation,stage+1);		
						});
				break;
				
			case 3:	// show back button and load projects, enable clicks				
				$(config.element.backbutton).show();
				$(config.element.mainmenu).removeClass('animating');
				var cat = $('#' + menuId).metadata().category;
				loadProjectList(cat);
				break;
			
			// NO ANIMATION (all above at once)
			case -1:
				$('.menu-category:not(#' + menuId + ')',config.element.mainmenu).hide();
				$('#' + menuId).css('left','12px');
				$(config.element.backbutton).show();
				$(config.element.mainmenu).removeClass('animating');
				break;
		}
	}else{
		switch(stage){
			case 1:					
				$(config.element.projectmenu).fadeOut(500, function(){menuTransition(menuId,operation,stage+1);});			
				break;
			case 2: // move selected menu back into position 
				var xPos = $('#' + menuId).data('left');
				$('#' + menuId)
						.animate({left:xPos},800, function(){
							menuTransition(menuId,operation,stage+1);			
						});
				break;
			case 3: // show other menus
				$('.menu-category:not(#' + menuId + ')',config.element.mainmenu)
							.addClass('animating')
							.fadeIn(500, function(){ 
								$(this).removeClass('animating');
								if($('.menu-category.animating').size()==0)
									menuTransition(menuId,operation,stage+1);
							});	
				break;
			case 4:	// re-enable clicks
				$(config.element.mainmenu).removeClass('animating');
				$(config.element.mainmenu).removeClass('selected');				
				break;
		}
	}
}

//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// PROJECT LIST (list projects within a category)
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

/**
 * Load the list of projects for the selected main menu category
 * @param {Object} menuId
 */
function loadProjectList(category, page, keyword){
	var page = page || getBookmarkAsObject().page || 1;
	var url = config.url.projectListData + category + "&page="+page;
	if(keyword && keyword.length) url += ( "&keyword=" + getBookmarkAsObject().keyword );

	var projectmenu = $(config.element.projectmenu);
	var mainmenu = $(config.element.mainmenu);	
	
	// safari annoyance:
	$('.pagenumber').remove();
	
	// requires main menu
	if($(mainmenu).html()==null) loadMainMenu();
	
	if (projectmenu.size() == 0) {
		projectmenu = $("<div id='projectmenu'></div>");
		$(config.element.pagecontent).append(projectmenu);
	}
	
	// load
	$(projectmenu).html( loadContentSync(url) );
	// init
	initProjectList();	
	$(projectmenu).hide();
	$(projectmenu).fadeIn(1000);
	// force mainmenu into the correct state	
	selectMenu('mainmenu-'+category, false);
}

/**
 * init project list after load
 * set URL and click actions
 */
function initProjectList(){
	var projectmenu = $(config.element.projectmenu);
	var pagecontent = $(config.element.pagecontent);
	var url = '#project=';
	var cat = getBookmarkAsObject().category;
	var keyword = getBookmarkAsObject().keyword  || "";
	
	var pn = $('.pagenumber');
	pn.prependTo('#pagecontent').css({
		left: '232px', 
		top: '12px',
		position: 'absolute',
		'z-index':5000
	})
		
	// init page numbers
	$('.pagenumber A',pagecontent).each(function(i,val){
		var pageNum = $(val).text();
		$(val).click(function(){
			// modify browser URL
			document.location.hash = '#category=' + cat + '&page=' + pageNum;
			if(keyword.length) document.location.hash += ("&keyword="+keyword);
			// go get me a page of projects
			loadProjectList(cat, pageNum, keyword);
			return false;
		});
	});
	
	$('.project',projectmenu).each(function(){
		var id = $(this).metadata().id;
		$('a',this).attr('href',url+id)
				   .click(function(){
				   		loadProject(id);
				   });
	});
}

//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// PROJECT (get a single project by id)
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

function loadProject(id){	
	// set wrapper mode
	$(config.element.wrapper).data('mode','project');
	// init
	initProject(id);
	// location
	document.location.hash = '#project=' + id;
}

function initProject(id){
	// add the html elements required by timeline 	
	$(config.element.timeline).html('<div id="myTimeline" class="mlc-theme"></div>');
	
	// transition
	$(config.element.pageheader).fadeOut(500);
	$(config.element.pagecontent).fadeOut(500);
	$(config.element.backbutton).fadeIn(500);
	
	// do timeline setup now	
	$(config.element.timeline).show();
	loadTimelineXML(id);
}

/** 
 * load XML for timeline
 * @param {Object} id
 */
function loadTimelineXML(id) {
	// need to get 2 timeline sources - duration events and single date events
	$(config.element.wrapper).block();
	var url = config.url.projectData + id;

	// this function is called if either SimileAjax.XmlHttp.get fails
	var fError = function(statusText, status, xmlhttp) {
        alert("Failed to load data xml from " + url + "\n" + statusText);
		$(config.element.wrapper).unblock();
    };
	
	// this function is called by the outer SimileAjax.XmlHttp.get on success
	var fDone = function(xmlhttp) {
	    var xml = xmlhttp.responseXML;
	    if (!xml.documentElement && xmlhttp.responseStream) {
	        xml.load(xmlhttp.responseStream);
	    }
		// fhis function is called by the inner SimileAjax.XmlHttp.get on success
		var fDoneSingle = function(xmlhttp) {
		    var xmlSingle = xmlhttp.responseXML;
		    if (!xmlSingle.documentElement && xmlhttp.responseStream) {
		        xmlSingle.load(xmlhttp.responseStream);
		    }
			// fhis function is called by the inner SimileAjax.XmlHttp.get on success
			var fDoneOverview = function(xmlhttp) {
			    var xmlOverview = xmlhttp.responseXML;
			    if (!xmlOverview.documentElement && xmlhttp.responseStream) {
			        xmlOverview.load(xmlhttp.responseStream);
			    }
				initTimeline(id, xml, xmlSingle, xmlOverview, url);
				$(config.element.wrapper).unblock();
			};
	
			// get the transformed xml via ejournal.cfm for the single data events,
			// if successful we will then init the timeline inside the fDoneSingle function
			SimileAjax.XmlHttp.get(url, fError, fDoneOverview);

		};

		// get the transformed xml via ejournal.cfm for the single data events,
		// if successful we will then init the timeline inside the fDoneSingle function
		SimileAjax.XmlHttp.get(url+'&durationMode=single', fError, fDoneSingle);
	};

	// get the transformed xml via ejournal.cfm for the duration events,
	// if successful we will then get the xml for the single data events inside the fDone function
	SimileAjax.XmlHttp.get(url+'&durationMode=duration', fError, fDone);
}


/**
 * initialise timeline with loaded data
 * @param {Object} id
 * @param {Object} data
 */
function initTimeline(id,dataDuration,dataSingle,dataOverview,url) {
	// retrieve setup values
	var projectTitle = dataDuration.documentElement.getAttribute('wiki-section');
	var projectStart = dataDuration.documentElement.getAttribute('minDate');
	var projectEnd 	 = dataDuration.documentElement.getAttribute('maxDate');

	//console.log(data)
	setPageTitle(projectTitle);	
	var eventSourceDuration = new Timeline.DefaultEventSource();
	var eventSourceSingle = new Timeline.DefaultEventSource();
	var eventSourceOverview = new Timeline.DefaultEventSource();
	var theme = Timeline.ClassicTheme.create();
	Timeline.ThemeName = 'mlc-theme';
	
	theme.event.bubble.width = 435;
	theme.event.bubble.maxHeight = 400;
	theme.event.track.height = 0;
    theme.event.tape.height = 16;
	theme.event.instant.icon = "/_template/images/event_icon.gif";
	theme.event.instant.iconWidth = 14;
	theme.event.instant.iconHeight = 14;
	theme.ether.highlightOpacity = 80;
	
	var startDate = new Date( Date.parse(projectStart) );
	theme.timeline_start = startDate.getTime();
	
	var endDate = new Date( Date.parse(projectEnd) );
	endDate.setMonth(endDate.getMonth()+1)
	theme.timeline_stop = endDate.getTime();
	
	//var d = Timeline.DateTime.parseGregorianDateTime("Sat Jan 01 2009 00:00:00 GMT+1000");
	var d = Timeline.DateTime.parseGregorianDateTime(projectStart);

	var bandInfos = [
		Timeline.createBandInfo({
			width:		  "8%", 
			intervalUnit:   Timeline.DateTime.DAY, 
			intervalPixels: 40,
			//zones:		  zones,
			//eventSource:	eventSourceDuration,
			date:		   d,
			timeZone:	   10,
		    theme:		  theme
		}),
		Timeline.createBandInfo({
			width:		  "35%", 
			intervalUnit:   Timeline.DateTime.WEEK, 
			intervalPixels: 280,
			//zones:		  zones,
			eventSource:	eventSourceDuration,
			trackHeight:	0,
			trackGap:		0,
			//date:		   d,
			timeZone:	   10,
		    theme:		  theme
		}),
		Timeline.createBandInfo({
			width:		  "36%", 
			intervalUnit:   Timeline.DateTime.WEEK, 
			intervalPixels: 280,
			//zones:		  zones,
			eventSource:	eventSourceSingle,
			trackHeight:	0,
			trackGap:		0,
			//date:		   d,
			timeZone:	   10,
		    theme:		  theme
		}),
		Timeline.createBandInfo({
			width:		  "21%", 
			intervalUnit:   Timeline.DateTime.MONTH, 
			intervalPixels: 80,
		   // zones:		  zones2, 
			eventSource:	eventSourceOverview,
			//date:		   d, 
			timeZone:	   10,
			overview:	   true,
		    theme:		  theme
		})
	];
	bandInfos[1].syncWith = 0;
	bandInfos[2].syncWith = 0;
	bandInfos[3].syncWith = 0;
	bandInfos[3].highlight = true;
	
	
	myTimeline = Timeline.create(document.getElementById("myTimeline"), bandInfos, Timeline.HORIZONTAL);
	
	//console.log('eventSource.loadXML',data,url)
	eventSourceDuration.loadXML(dataDuration, url);
	eventSourceSingle.loadXML(dataSingle, url);
	eventSourceOverview.loadXML(dataOverview, url);
	$(window).resize();	
	
//	myTimeline.loadXML(config.url.projectData + id, function(xml, url) {
//		console.log('eventSource.loadXML',xml,url)
//		eventSource.loadXML(xml, url);
//		$(window).resize();
//	});	
	
	//myTimeline.getBand(0).setMinVisibleDate(Timeline.DateTime.parseGregorianDateTime("Sat Jan 17 2009 10:00:00 GMT+1000"));
	//myTimeline.getBand(1).setMinVisibleDate(Timeline.DateTime.parseGregorianDateTime("Sat Jan 17 2009 10:00:00 GMT+1000"));
	//myTimeline.getBand(2).setMinVisibleDate(Timeline.DateTime.parseGregorianDateTime("Sat Jan 17 2009 10:00:00 GMT+1000"));
}