var theme = Timeline.ClassicTheme.create();

function createBandInfos1(eventSource) {
	var bandInfos = [
		Timeline.createBandInfo({
			width:          "100%",
			intervalUnit:   Timeline.DateTime.DAY, 
			intervalPixels: 400,
			eventSource:    eventSource
		})
	];
	
	for (var i = 0; i < bandInfos.length; i++) {
		bandInfos[i].decorators = [
			new Timeline.SpanHighlightDecorator({
				startDate:  "Jan 12 2009",
				endDate:    "Jan 16 2009",
				opacity:    50,
				startLabel: "",
				endLabel:   "<span></span>",
				cssClass: 	't-highlight1'
			})
		];
	}
	
	return bandInfos;
}

function createBandInfos2(eventSource) {
	var bandInfos = [
		Timeline.createBandInfo({
			width:          "100%", 
			intervalUnit:   Timeline.DateTime.DAY, 
			intervalPixels: 400,
			eventSource:    eventSource
		})
	];
	
	for (var i = 0; i < bandInfos.length; i++) {
		bandInfos[i].decorators = [
			new Timeline.SpanHighlightDecorator({
				startDate:  "Nov 17 2008",
				endDate:    "Dec 19 2008",
				opacity:    50,
				startLabel: "",
				endLabel:   "<span></span>",
				cssClass: 	't-highlight1'
			})
		];
	}
	
	return bandInfos;
}

function createBandInfos3(eventSource) {
	var bandInfos = [
		Timeline.createBandInfo({
			width:          "100%", 
			intervalUnit:   Timeline.DateTime.DAY, 
			intervalPixels: 400,
			eventSource:    eventSource
		})
	];
	
	for (var i = 0; i < bandInfos.length; i++) {
		bandInfos[i].decorators = [
			new Timeline.SpanHighlightDecorator({
				startDate:  "Nov 17 2008",
				endDate:    "Dec 18 2008",
				opacity:    50,
				startLabel: "",
				endLabel:   "<span></span>",
				cssClass: 	't-highlight1'
			})
		];
	}
	
	return bandInfos;
}

function createBandInfos4(eventSource) {
	var bandInfos = [
		Timeline.createBandInfo({
			width:          "100%", 
			intervalUnit:   Timeline.DateTime.DAY, 
			intervalPixels: 400,
			eventSource:    eventSource
		})
	];
	
	for (var i = 0; i < bandInfos.length; i++) {
		bandInfos[i].decorators = [
			new Timeline.SpanHighlightDecorator({
				startDate:  "Nov 17 2008",
				endDate:    "Dec 19 2008",
				opacity:    50,
				startLabel: "",
				endLabel:   "<span></span>",
				cssClass: 	't-highlight1'
			})
		];
	}
	
	return bandInfos;
}

function createBandInfos5(eventSource) {
	var bandInfos = [
		Timeline.createBandInfo({
			width:          "100%", 
			intervalUnit:   Timeline.DateTime.DAY, 
			intervalPixels: 400,
			eventSource:    eventSource
		})
	];
	
	for (var i = 0; i < bandInfos.length; i++) {
		bandInfos[i].decorators = [
			new Timeline.SpanHighlightDecorator({
				startDate:  "Nov 17 2008",
				endDate:    "Dec 17 2008",
				opacity:    50,
				startLabel: "",
				endLabel:   "<span></span>",
				cssClass: 	't-highlight1'
			})
		];
	}
	
	return bandInfos;
}
	
function onLoad() {
	var eventSource1 = new Timeline.DefaultEventSource();
	var eventSource2 = new Timeline.DefaultEventSource();
	var eventSource3 = new Timeline.DefaultEventSource();
	var eventSource4 = new Timeline.DefaultEventSource();
	var eventSource5 = new Timeline.DefaultEventSource();
	
	var bandInfos1 = createBandInfos1(eventSource1);
    timelines[0] = Timeline.create(document.getElementById("tl_1"), bandInfos1);
    
	var bandInfos2 = createBandInfos2(eventSource2);
    timelines[1] = Timeline.create(document.getElementById("tl_2"), bandInfos2);
	
	var bandInfos3 = createBandInfos3(eventSource3);
    timelines[2] = Timeline.create(document.getElementById("tl_3"), bandInfos3);
    
	var bandInfos4 = createBandInfos4(eventSource4);
    timelines[3] = Timeline.create(document.getElementById("tl_4"), bandInfos4);
	
	var bandInfos5 = createBandInfos5(eventSource5);
    timelines[4] = Timeline.create(document.getElementById("tl_5"), bandInfos5);
	
	Timeline.loadXML("files/ff_feed.php?url=http://friendfeed.com/kaichanvong?format=atom", function(xml, url) { eventSource1.loadXML(xml, url); });
	Timeline.loadXML("files/ff_feed.php?url=http://friendfeed.com/mnoo?format=atom", function(xml, url) { eventSource2.loadXML(xml, url); });
	Timeline.loadXML("files/ff_feed.php?url=http://friendfeed.com/thegirlinthecafe?format=atom", function(xml, url) { eventSource3.loadXML(xml, url); });
	Timeline.loadXML("files/ff_feed.php?url=http://friendfeed.com/iainbaker?format=atom", function(xml, url) { eventSource4.loadXML(xml, url); });
	Timeline.loadXML("files/ff_feed.php?url=http://friendfeed.com/3mobilebuzz?format=atom", function(xml, url) { eventSource5.loadXML(xml, url); });

    // add a listener for scrolling
    var b0 = timelines[0].getBand(0);
    b0.addOnScrollListener(updateDate0);
    
    var b1 = timelines[1].getBand(0);
    b1.addOnScrollListener(updateDate1);
    
    var b2 = timelines[2].getBand(0);
    b2.addOnScrollListener(updateDate2);
    
    var b3 = timelines[3].getBand(0);
    b3.addOnScrollListener(updateDate3);
    
    var b4 = timelines[4].getBand(0);
    b4.addOnScrollListener(updateDate4);
}

/////////////////////CHANGING VARIABLES////////////////////////
//change1Date = Date.parse("Jan 23 2009");
//change2Date = Date.parse("Jan 26 2009");

username1 = "kai";
username2 = "marianne";
username3 = "thegirlinthecafe";
username4 = "iain";
username5 = "3MobileBuzz";
///////////////////////////////////////////////////////////////


function growTimeline(tl, tl_id, layoutFunction, extendImg, timelineImage){	
	if (document.getElementById(tl).clientHeight == 272){
	  $(tl_id).animate({height:172}, "slow", "linear", layoutFunction);
	  $(timelineImage).animate({height:172}, "slow", "linear", layoutFunction);
	  extendImgChange(extendImg,'images/extendHandle_down.jpg');
	}else{
	  $(tl_id).animate({height:272}, "slow", "linear", layoutFunction);
	  $(timelineImage).animate({height:272}, "slow", "linear", layoutFunction);
	  extendImgChange(extendImg,'images/extendHandle_up.jpg');
	}
}

// report the position including updating the center mark point highlighter
/*function updateDate0() {
	var viewD = Date.parse(timelines[0].getBand(0).getCenterVisibleDate());
    
    if (viewD > change1Date && viewD < change2Date){
    	username1 = "user6";
    }else if (viewD > change2Date){
    	username1 = "user11"
    }else{
    	username1 = "3MobileBuzz"
    }
    
    if (username1 == "3MobileBuzz"){
    	movepic('timeline_image1','url(images/tl_images/tl_1.gif)');
    }else if(username1 == "user6"){
    	movepic('timeline_image1','url(images/tl_images/tl_1.gif)');
    }
}

function updateDate1() {
    var viewD = Date.parse(timelines[1].getBand(0).getCenterVisibleDate());
    
    if (viewD > change1Date){
    	username2 = "nextPerson";
    }else{
    	username2 = "marianne"
    }
    
    if (username1 == "marianne"){
    	movepic('timeline_image2','url(images/tl_images/tl_marianne.jpg)');
    }else if(username1 == "nextPerson"){
    	movepic('timeline_image2','url(images/tl_images/tl_1.gif)');
    }
}

function updateDate2() {
    var viewD = Date.parse(timelines[2].getBand(0).getCenterVisibleDate());
    
    if (viewD > change1Date && viewD < change2Date){
    	username3 = "user7";
    }else if (viewD > change2Date){
    	username3 = "user12"
    }else{
    	username3 = "thegirlinthecafe"
    }
    
    if (username3 == "thegirlinthecafe"){
    	movepic('timeline_image3','url(images/tl_images/tl_girlinthecafe.jpg)');
    }
}

function updateDate3() {
    var viewD = Date.parse(timelines[3].getBand(0).getCenterVisibleDate());
    
    if (viewD > change1Date && viewD < change2Date){
    	username3 = "user7";
    }else if (viewD > change2Date){
    	username3 = "user12"
    }else{
    	username3 = "iain"
    }
    
    if (username3 == "iain"){
    	movepic('timeline_image4','url(images/tl_images/tl_iain.jpg)');
    }
}

function updateDate4() {
    var viewD = Date.parse(timelines[4].getBand(0).getCenterVisibleDate());
    
    if (viewD > change1Date && viewD < change2Date){
    	username3 = "user7";
    }else if (viewD > change2Date){
    	username3 = "user12"
    }else{
    	username3 = "kai"
    }
    
    if (username3 == "kai"){
    	movepic('timeline_image5','url(images/tl_images/tl_kai.jpg)');
    }
}*/

function extendImgChange(img_name,img_src) {
	document[img_name].src=img_src;
}

function tooltipDisplay1(){
	if (username1 == "kai"){
		Tip('<img class=\'closeBtn\' src=\'images/closeBtn.jpg\'><img class=\'balloonImg\' src=\'images/tl_images/tooltip_kai.jpg\' width=\'50\'><div class=\'balloonTxt\'><p class=\'balloonTitle\'>Kai</p><p>Kai is a half Chinese/English web designer & developer that loves taking photos around London. Amongst other things, he often enjoys sushi with friends with the odd drop of Asahi (a Japanese beer).</p><p class=\'balloonP\'><a class=\'balloonLink\' href=\'http://friendfeed.com/kaichanvong\' target=_blank>http://friendfeed.com/kaichanvong</a></p></div>', BALLOON, true, OFFSETX, -10, ABOVE, true, WIDTH, 300, STICKY, true, CLICKCLOSE, true);	
	}
}

function tooltipDisplay2(){
	if (username2 == "marianne"){
		Tip('<img class=\'closeBtn\' src=\'images/closeBtn.jpg\'><img class=\'balloonImg\' src=\'images/tl_images/tooltip_marianne.jpg\' width=\'50\'><div class=\'balloonTxt\'><p class=\'balloonTitle\'>MarianneTaylor</p><p>A Finnish Designer and Photographer living in London. I cherish the small things in life and embrace all forms of communication. Nothing beats a good hug though.</p><p class=\'balloonP\'><a class=\'balloonLink\' href=\'http://friendfeed.com/mnoo\' target=_blank>http://friendfeed.com/mnoo</a></p></div>', BALLOON, true, OFFSETX, -10, ABOVE, true, WIDTH, 300, STICKY, true, CLICKCLOSE, true);	
	}
}

function tooltipDisplay3(){
	if (username3 == "thegirlinthecafe"){
		Tip('<img class=\'closeBtn\' src=\'images/closeBtn.jpg\'><img class=\'balloonImg\' src=\'images/tl_images/tooltip_girlinthecafe.jpg\' width=\'50\'><div class=\'balloonTxt\'><p class=\'balloonTitle\'>girlinthecafe</p><p>London based creative working in communication. Film freak. Cafe addict. Screen writer and short film maker.</p><p class=\'balloonP\'><a class=\'balloonLink\' href=\'http://friendfeed.com/girlinthecafe\' target=_blank>http://friendfeed.com/girlinthecafe</a></p></div>', BALLOON, true, OFFSETX, -10, ABOVE, true, WIDTH, 300, STICKY, true, CLICKCLOSE, true);	
	}
}

function tooltipDisplay4(){
	if (username4 == "iain"){
		Tip('<img class=\'closeBtn\' src=\'images/closeBtn.jpg\'><img class=\'balloonImg\' src=\'images/tl_images/tooltip_iain.jpg\' width=\'50\'><div class=\'balloonTxt\'><p class=\'balloonTitle\'>Iain</p><p>DJ and Broadcaster (Xfm, NME Radio), Musician (Jesus Jones), Voiceover artist (meetthejonses), Social Networker (Shadowglobe.com) and Social Media evangelist.</p><p class=\'balloonP\'><a class=\'balloonLink\' href=\'http://friendfeed.com/iainbaker\' target=_blank>http://friendfeed.com/iainbaker</a></p></div>', BALLOON, true, OFFSETX, -10, ABOVE, true, WIDTH, 300, STICKY, true, CLICKCLOSE, true);	
	}
}

function tooltipDisplay5(){
	if (username5 == "3MobileBuzz"){
		Tip('<img class=\'closeBtn\' src=\'images/closeBtn.jpg\'><img class=\'balloonImg\' src=\'images/tl_images/tooltip_3mobilebuzz.jpg\' width=\'50\'><div class=\'balloonTxt\'><p class=\'balloonTitle\'>3MobileBuzz</p><p>At 3mobilebuzz we bring you what others are saying about 3. The latest reviews, news and opinion from across the web. And as Timelines is our little project we thought we\'d jump in from the get-go, playing about with the INQ1 and letting you know exactly what we\'re up to. </p><p class=\'balloonP\'><a class=\'balloonLink\' href=\'http://friendfeed.com/3mobilebuzz\' target=_blank>http://friendfeed.com/3mobilebuzz</a></p></div>', BALLOON, true, OFFSETX, -10, ABOVE, true, WIDTH, 300, STICKY, true, CLICKCLOSE, true);	
	}
}

var resizeTimerID = null;
function onResize() {
    if (resizeTimerID == null) {
        resizeTimerID = window.setTimeout(function() {
            resizeTimerID = null;
            for (var i = 0; i < timelines.length; i++) {
                timelines[i].layout();
            }
        }, 500);
    }
}