var tl;
var t2;
var t3;
var IMG_PATH = '/assets/images/timeline/';
var PATH = '/assets/popups/timeline_2008.php';
var TEST_MODE = 0;
var eventSource = new Timeline.DefaultEventSource();
var eventSourceGeological = new Timeline.DefaultEventSource(new Timeline.EventIndex(Timeline.GeochronoUnit));

function timelineInit()
{
	var theme = Timeline.ESPTheme.create();
	//var theme = Timeline.ClassicTheme.create();
	//theme.ether.backgroundColors.unshift("white");
	var themeAges = theme;
	var themePeriods = theme;
	var startDATE = -4000;
	var opacity = 10;

	var stoneAgeColor1 = '#CC6666';
	var stoneAgeColor2 = '#CC9999';
	var middleAgeColor1 = '#CCCC66';
	var middleAgeColor2 = '#CCCC99';
	var modernAgeColor1 = '#66CC66';
	var modernAgeColor2 = '#99CC99';

	var colors = {
		Paleolithic:	stoneAgeColor1,
		Mesolithic:		stoneAgeColor2,
		Neolithic:		stoneAgeColor1,
		BronzeAge:		middleAgeColor1,
		IronAge:		middleAgeColor2,
		Romans:			middleAgeColor1,
		Saxons:			middleAgeColor2
	}

	var c1 = modernAgeColor1;
	var c2 = modernAgeColor2;

	var zones = [
	{
		start:    "-2500",
		end:      "500",
		magnify:  10,
		unit:     Timeline.DateTime.CENTURY
	},
	{
		start:    "500",
		end:      "2000",
		magnify:  100,
		unit:     Timeline.DateTime.DECADE
	},
	{
		start:    "2000",
		end:      "10000",
		magnify:  100,
		unit:     Timeline.DateTime.CENTURY,
		multiple: 10
	}
	];

	var zones2 = [
	{
		start:    "-800000",
		end:      "-2500",
		magnify:  4,
		unit:     Timeline.DateTime.MILLENNIUM
	},
	{
		start:    "-2500",
		end:      "700",
		magnify:  2,
		unit:     Timeline.DateTime.MILLENNIUM
	},
	{
		start:    "700",
		end:      "2050",
		magnify:  5,
		unit:     Timeline.DateTime.CENTURY
	},
	{
		start:    "2050",
		end:      "10000",
		magnify:  100,
		unit:     Timeline.DateTime.CENTURY,
		multiple: 10
	}
	];

	var zones3 = [
	{
		start:    "-800000",
		end:      "-2500",
		magnify:  4,
		unit:     Timeline.DateTime.MILLENNIUM
	},
	{
		start:    "-2500",
		end:      "700",
		magnify:  2,
		unit:     Timeline.DateTime.MILLENNIUM
	},
	{
		start:    "700",
		end:      "2050",
		magnify:  7,
		unit:     Timeline.DateTime.CENTURY,
		multiple: 10
	},
	{
		start:    "2050",
		end:      "10000",
		magnify:  100,
		unit:     Timeline.DateTime.CENTURY,
		multiple: 10
	}
	];

	var bandInfos = [
	Timeline.createHotZoneBandInfo({
		width:          "80%",
		intervalUnit:   Timeline.DateTime.MILLENNIUM,
		intervalPixels: 200,
		zones:			zones,
		eventSource:    eventSource,
		date:           startDATE,
		theme: 			theme
	}),
	Timeline.createHotZoneBandInfo({
		width:          "20%",
		intervalUnit:   Timeline.DateTime.MILLENNIUM,
		intervalPixels: 75,
		zones:			zones2,
		eventSource:    eventSource,
		date:           startDATE,
		showEventText:  false,
		trackHeight:    0.4,
		theme: 			theme
	})
	/*,
	Timeline.createHotZoneBandInfo({
		width:          "15%",
		intervalUnit:   Timeline.DateTime.MILLENNIUM,
		intervalPixels: 25,
		zones:			zones3,
		eventSource:    eventSource,
		date:           "1200",
		showEventText:  false,
		trackHeight:    0.3,
		theme: 			theme
	})*/
	];
	bandInfos[1].syncWith = 0;
	bandInfos[1].highlight = true;
	bandInfos[1].eventPainter.setLayout(bandInfos[0].eventPainter.getLayout());

	/*
	bandInfos[2].syncWith = 1;
	bandInfos[2].highlight = true;
	bandInfos[2].eventPainter.setLayout(bandInfos[1].eventPainter.getLayout());
	*/





	for (var i = 0; i < bandInfos.length; i++) {	
				
		var shd = {
			Paleolithic:		new Timeline.SpanHighlightDecorator({startDate:"-800000",endDate:"-8000",color:colors.Paleolithic,opacity:opacity,startLabel:'',endLabel:'',theme:themePeriods}),
			Mesolithic:			new Timeline.SpanHighlightDecorator({startDate:"-8000",endDate:"-4000",color:colors.Mesolithic,opacity:opacity,startLabel:'Paleolithic',endLabel:'',theme:themePeriods}),
			Neolithic:			new Timeline.SpanHighlightDecorator({startDate:"-4000",endDate:"-2500",color:colors.Neolithic,opacity:opacity,startLabel:(i==0 && !isIE6()?'<img src="'+IMG_PATH+'Mesolithic.png" style="position:absolute;margin-top:-10px;margin-left:-250px;"/>':'')+'<br/>Mesolithic',endLabel:'',theme:themePeriods}),

			BronzeAge:			new Timeline.SpanHighlightDecorator({startDate:"-2500",endDate:"-700",color:colors.BronzeAge,opacity:opacity,startLabel:(i==0 && !isIE6()?'<img src="'+IMG_PATH+'Neolithic.png" style="position:absolute;margin-top:-10px;margin-left:100px;"/>':'')+'Neolithic',endLabel:'',theme:themePeriods}),
			IronAge:			new Timeline.SpanHighlightDecorator({startDate:"-700",endDate:"43",color:colors.IronAge,opacity:opacity,startLabel:(i==0 && !isIE6()?'<img src="'+IMG_PATH+'BronzeAge.png" style="position:absolute;margin-left:-250px;"/>':'')+'<br/>Bronze Age',endLabel:'',theme:themePeriods}),
			Romans:				new Timeline.SpanHighlightDecorator({startDate:"43",endDate:"410",color:colors.Romans,opacity:opacity,startLabel:(i==0 && !isIE6()?'<img src="'+IMG_PATH+'IronAge.png" style="position:absolute;margin-top:-50px;margin-left:-250px;"/>':'')+'Iron Age',endLabel:'',theme:themePeriods}),
			Saxons:				new Timeline.SpanHighlightDecorator({startDate:"410",endDate:"1066",color:colors.Saxons,opacity:opacity,startLabel:(i==0 && !isIE6()?'<img src="'+IMG_PATH+'Romans.png" style="position:absolute;margin-left:-250px;"/>':'')+'<br/>Romans',endLabel:'',theme:themePeriods}),

			Medieval:			new Timeline.SpanHighlightDecorator({startDate:"1066",endDate:"1540",color:modernAgeColor2,opacity:opacity,startLabel:(i==0 && !isIE6()?'<img src="'+IMG_PATH+'Saxons.png" style="position:absolute;margin-left:-250px;"/>':'')+'Early Medieval (Anglo-Saxon)',endLabel:'',theme:themePeriods}),
			PostMedieval:		new Timeline.SpanHighlightDecorator({startDate:"1540",endDate:"1900",color:modernAgeColor1,opacity:opacity,startLabel:(i==0 && !isIE6()?'<img src="'+IMG_PATH+'Medieval.png" style="position:absolute;margin-top:-180px;margin-left:-150px;"/>':'')+'<br/>Medieval',endLabel:'',theme:themePeriods}),
			Modern:				new Timeline.SpanHighlightDecorator({startDate:"1900",endDate:"2050",color:modernAgeColor2,opacity:opacity,startLabel:'Post Medieval',endLabel:'<br/>Modern',theme:themePeriods})
		};

		switch(i)
		{
			case 0:
			bandInfos[i].decorators = [
			shd.Paleolithic,
			shd.Mesolithic,
			shd.Neolithic,
			shd.BronzeAge,
			shd.IronAge,
			shd.Romans,
			shd.Saxons,
			shd.Medieval,
			shd.PostMedieval,
			shd.Modern
			];
			break;

			case 1:case 2:
			bandInfos[i].decorators = [
			//Stone Age
			shd.Paleolithic,
			shd.Mesolithic,
			shd.Neolithic,
			//Middle Ages
			shd.BronzeAge,
			shd.IronAge,
			shd.Romans,
			shd.Saxons,
			// Main Ages
			shd.Medieval,
			shd.PostMedieval,
			shd.Modern
			];
			break;
			
		}
	}




	t3 = Timeline.create(document.getElementById("my-timeline"), bandInfos,Timeline.HORIZONTAL);


	createJumptoMenu();

	var url = PATH+"?dateStart=&dateEnd=";
	//window.open(url);
	//Timeline.loadXML("/assets/popups/timeline.php", function(xml, url) { eventSource.loadXML(xml, url); });

	if(TEST_MODE==0)
	{
		t3.loadXML(url, function(xml, url) {eventSource.loadXML(xml, url); });
	}
}



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

function isIE6()
{	
	return navigator.appVersion.toLowerCase().indexOf("msie") && navigator.userAgent.indexOf('MSIE 6.0')!=-1;
}


/*==================================================
*  ESP Theme
*==================================================
*/
Timeline.ESPTheme = new Object();
Timeline.ESPTheme.implementations = [];
Timeline.ESPTheme.create = function(locale) {
	if (locale == null) {
		locale = Timeline.Platform.getDefaultLocale();
	}

	var f = Timeline.ESPTheme.implementations[locale];
	if (f == null) {
		f = Timeline.ESPTheme._Impl;
	}
	return new f();
};
Timeline.ESPTheme._Impl = function() {
	this.firstDayOfWeek = 0; // Sunday

	this.ether = {
		backgroundColors: [
		"#F8F6D3",
		"#E8E4A1",
		"#DBD577",
		"#999933"
		],
		highlightColor:     "white",
		highlightOpacity:   50,
		interval: {
			line: {
				show:       true,
				color:      "#86834E",
				opacity:    25
			},
			weekend: {
				color:      "#FFFFE0",
				opacity:    30
			},
			marker: {
				hAlign:     "Bottom",
				hBottomStyler: function(elmt) {
					elmt.className = "timeline-ether-marker-bottom";
				},
				hBottomEmphasizedStyler: function(elmt) {
					elmt.className = "timeline-ether-marker-bottom-emphasized";
				},
				hTopStyler: function(elmt) {
					elmt.className = "timeline-ether-marker-top";
				},
				hTopEmphasizedStyler: function(elmt) {
					elmt.className = "timeline-ether-marker-top-emphasized";
				},

				vAlign:     "Right",
				vRightStyler: function(elmt) {
					elmt.className = "timeline-ether-marker-right";
				},
				vRightEmphasizedStyler: function(elmt) {
					elmt.className = "timeline-ether-marker-right-emphasized";
				},
				vLeftStyler: function(elmt) {
					elmt.className = "timeline-ether-marker-left";
				},
				vLeftEmphasizedStyler:function(elmt) {
					elmt.className = "timeline-ether-marker-left-emphasized";
				}
			}
		}
	};

	this.event = {
		track: {
			offset:         0.5, // em
			height:         1.3, // em
			gap:            0.5  // em
		},
		instant: {
			icon:           Timeline.urlPrefix + "images/dull-blue-circle.png",
			lineColor:      "#86834E",
			impreciseColor: "#86834E",
			impreciseOpacity: 20,
			showLineForNoText: true
		},
		duration: {
			color:          "#C0C0C0",
			opacity:        100,
			impreciseColor: "#86834E",
			impreciseOpacity: 20
		},
		label: {
			insideColor:    "white",
			outsideColor:   "black",
			width:          400 // px
		},
		highlightColors: [
		"#FFFF00",
		"#FFC000",
		"#FF0000",
		"#0000FF"
		],
		bubble: {
			width:          250, // px
			height:         225, // px
			titleStyler: function(elmt) {
				elmt.className = "timeline-event-bubble-title";
			},
			bodyStyler: function(elmt) {
				elmt.className = "timeline-event-bubble-body";
			},
			imageStyler: function(elmt) {
				elmt.className = "timeline-event-bubble-image";
			},
			wikiStyler: function(elmt) {
				elmt.className = "timeline-event-bubble-wiki";
			},
			timeStyler: function(elmt) {
				elmt.className = "timeline-event-bubble-time";
			}
		}
	};
};

/**
* Override some of the default methods of the timeline
* Supported formats:
* Fri Nov 03 1893 18:00:00 GMT+0000 (GMT Standard Time)
* Wed Mar 20 15:00:00 UTC 1895

Timeline._Band.prototype._onMouseUp=function(innerFrame,evt,target)
{
	try{
		this._dragging=false;
		this._keyboardInput.focus();
		var startDate = this._ether.pixelOffsetToDate(0);
		//alert('Middle Date: '+this._ether.pixelOffsetToDate(this.getViewLength()/2));
		var endDate = this._ether.pixelOffsetToDate(this.getViewLength());

		var url = PATH+"?dateStart="+encodeURI(startDate)+"&dateEnd="+encodeURI(endDate);

		var p = document.createElement('P');
		document.body.appendChild(p);
		p.innerHTML = startDate+' ................ '+endDate+'<br/>'+url;

		//document.write(url);
		this._timeline.loadXML(url, function(xml, url) { eventSource.clear();eventSource.loadXML(xml, url); });
	}catch(e){
		alert(e);
	}
};
*/
function createJumptoMenu()
{
	
	/*
	var periods = [
		{name:'17th century - late',start:1676,end:1699},
		{name:'18th century - early',start:1700,end:1730},
		{name:'18th century - mid',start:1730,end:1775},
		{name:'18th century - late',start:1776,end:1799},
		{name:'19th century - early',start:1800,end:1836},
		{name:'19th century - early Victorian',start:1837,end:1850},
		{name:'19th century - mid Victorian',start:1851,end:1875},
		{name:'19th century - late Victorian',start:1876,end:1899},
		{name:'20th century - early',start:1900,end:1930},
		{name:'World War I',start:1914,end:1918},
		{name:'World War II',start:1939,end:1945},
		{name:'20th century - mid',start:1931,end:1970},
		{name:'20th century - late',start:1971,end:1999},
		{name:'21st century',start:2000,end:2099},
		{name:'17th century - mid',start:1630,end:1675},
		{name:'17th century - early',start:1600,end:1629},
		{name:'21st century',start:2000,end:2099}
	];
	*/
	try{
	var periods = [
		{name:'Palaeolithic',start:-800000,end:-8000,color:'F8F6D3'},
		{name:'Mesolithic',start:-8000,end:-4000,color:'F3ECCD'},
		{name:'Neolithic',start:-4000,end:-2500,color:'F3E7C8'},
		{name:'Bronze Age',start:-2500,end:-700,color:'FFFFCC'},
		{name:'Iron Age',start:-700,end:43,color:'FFFFCC'},
		{name:'Roman',start:43,end:410,color:'F3F1C8'},
		{name:'Early Medieval (Anglo-Saxon)',start:410,end:1066,color:'F3F1CD'},
		{name:'Medieval',start:1066,end:1540,color:'EEF1CD'},
		{name:'Post Medieval',start:1540,end:1900,color:'E9F1C8'},
		{name:'Modern',start:1900,end:2050,color:'EEF1CD'}

	];
	
	var menu = document.createElement('DIV');
	menu.className = 'timelineJumpto';	
	var table = document.createElement('TABLE');
	var tbody = document.createElement('TBODY');
	var tr = document.createElement('TR');
	var c = '';
	
	table.appendChild(tbody);
	tbody.appendChild(tr);
	for(var i in periods)
	{
		
		var yearStart = periods[i].start;
		var yearEnd = periods[i].end;
		var td = document.createElement('td');
		td.style.backgroundColor = '#'+periods[i].color;
		td.setAttribute('nowrap','nowrap');
		td.DATE_START = periods[i].start;
		td.DATE_END = periods[i].end;
		c=='c1' ? c='c2' : c='c1';
		td.className = c;
		td.DATE_END = periods[i].end;
		
		if(yearStart<0)
		{
			yearStart*=-1;
			yearStart+='BC';
		}
		if(yearEnd<0)
		{
			yearEnd*=-1;
			yearEnd+='BC';
		}
		
		if(i<periods.length-1)
		{
			td.innerHTML = periods[i].name+'<br/>('+yearStart+' to '+yearEnd+')';
		}
		else
		{
			td.innerHTML = periods[i].name+'<br/>('+yearStart+' onwards)';
		}
		td.innerHTML = td.innerHTML.split(' ').join('&nbsp;');
		td.onclick = function(){
			t3.getBand(0).setCenterVisibleDate(Timeline.DateTime.parseGregorianDateTime(this.DATE_END));
			t3.getBand(0)._onMouseUp();
		}
		tr.appendChild(td);
	}
	menu.appendChild(table);
	document.getElementById('my-timeline').parentNode.insertBefore(menu,document.getElementById('my-timeline').nextSibling);
	menu.style.width = document.getElementById('my-timeline').offsetWidth+'px';
	menu.style.height = (table.offsetHeight+18)+'px';
	
	}catch(e){}
}