// called from index.php on onmouseover event
function timelinePuller(w,highlight) {
	if (w == true) {
		document.getElementById("pull_left").style.visibility="visible";
		document.getElementById("pull_right").style.visibility="visible";
	} else {
		document.getElementById("pull_left").style.visibility="hidden";
		document.getElementById("pull_right").style.visibility="hidden";
	}
	document.getElementById("pull_left" ).style.backgroundImage = "url('img/zl_weiter_links_passiv.png')";
	document.getElementById("pull_right").style.backgroundImage = "url('img/zl_weiter_rechts_passiv.png')";
	
	if ((highlight == 'left') && (slideToLeft == true)) {
		document.getElementById("pull_left" ).style.backgroundImage = "url('img/zl_weiter_links_aktiv.png')";
	}
	if ((highlight == 'right') && (slideToRight) == true) {
		document.getElementById("pull_right").style.backgroundImage = "url('img/zl_weiter_rechts_aktiv.png')";
	}
}


// called from refreshTimelineDates()
function genSkala() {
	
	//log('genSkala: timeline_dates.length: ' + timeline_dates.length);
	
	if (timeline_dates.length <= 0) {
		// timeline_dates.length is 0 when genSkala is called from initGui() -> this call can be omitted -> done
		return "";
	}
	
	timeline_size = 1;
	var html = '<div id="day_tick_line"></div>';
	for (var i = 0; i < timeline_dates.length; i++) {
		if (isUnort(timeline_dates[i])) {
			//log('genSkala: isUnort true: ' + timeline_dates[i]);
			// activity indicator for a certain day
			html += '<div id="day_tick"><img src="img/map/timebar/skala_full.png" title="Zu diesem Datum existieren Unorte" /></div>';
		} else {
			html += '<div id="day_tick"></div>';
		}
	}
	
	html = html+'<div id="month_tick_line"></div>';
	
	// month of the first created unort
	var lastmonth = timeline_dates[0].substr(5,2);
	
	//log('genSkala: lastmonth: ' + lastmonth);
	
	var last = false;
	var first = true;
	
	for (var i = 0; i < timeline_dates.length; i++) {
		// used for positioning the month names
		timeline_size = timeline_size + 11; 
		
		if (i == (timeline_dates.length-1)) {
			// true for the last day a unort was created
			last = true;
		} else {
			var thismonth = timeline_dates[i+1].substr(5,2);
			// last 2 numbers of the year
			var thisyear  = timeline_dates[i+1].substr(2,2);
		}
		
		if (lastmonth != thismonth) {
			html=html+'<div id="month_tick_on">';
			html=html+'</div>';
			first = true;
			lastmonth = thismonth;
		} else {
			if (!last) {
				html=html+'<div id="month_tick_empty">';
				/*
				if (first) {
					html=html+'<div style="position:absolute;top:8px;left:'+(timeline_size-3)+'px;color:#ffffff;">';
					html=html+'<b>' + mon_map[thismonth] + ' ' + thisyear  +'</b>';
					html=html+'</div>';
					first = false;				
				}
				*/
				html=html+'</div>';
			} else {
				html=html+'<div id="month_tick_empty" style="border-right:1px solid #fff;height:17px;"></div>';
			}
		}
	}
	if (timeline_size > 1) {
			document.getElementById("timeline").style.width = timeline_size+"px";
			document.getElementById("balken").style.width = timeline_size+"px";
			document.getElementById("skala").style.width = timeline_size+"px";
			document.getElementById("rutsche_innen").style.width = timeline_size+"px";
			
			// scroll to the end of the timeline (default)
			rutsche_pos = (timeline_size-browser_width);
			
			if (rutsche_pos < 0) {
				rutsche_pos = 0;
			}
			
			//log('rutsche_pos: ' + rutsche_pos);
			
			// TODO Uncomment
			scroll.scrollTo(rutsche_pos,0);
	}
	return html;
}


function adaptSliders() {
	
	/* Slider RECHTS */
	// 'left' is the css property that is altered by this mootools function
	// see: http://clientside.cnet.com/wiki/mootorial/05-effects#fx.style.js  
	// knopf is the left border slider
	var fx  = new Fx.Style($('knopf'),  'left', {duration: 30, wait: false});
	// knopf2 is the right border slider
	var fx2 = new Fx.Style($('knopf2'), 'left', {duration: 30, wait: false});
	// knopfc is the centre slider
	var fxc = new Fx.Style($('knopfc'), 'left', {duration: 30, wait: false});
	
	// For every slider a second effect is created for property 'left'
	var nx  = new Fx.Style($('knopf'),  'left', {duration: 5, wait: false});
	var nx2 = new Fx.Style($('knopf2'), 'left', {duration: 5, wait: false});
	var nxc = new Fx.Style($('knopfc'), 'left', {duration: 5, wait: false});
	
			
	mySlide2 = new Slider($('balken'), $('knopf2'), {

	    steps: (timeline_dates.length-1),
	
		onChange: function( step ) {
			if (timeline_active=="" || timeline_active=="right") {
				timeline_active = "right";
				filter['to'] = timeline_dates[step];
				
				timeline_right = step;
				// timeline_right cannot move further to the left than timeline_center
				if (timeline_right < timeline_center) {
					timeline_right = timeline_center;
					mySlide2.set(timeline_center);
				}
				// timeline_right cannot move to the end of the shown part of the timeline as the kalender, 
				// timeline and slider icons are shown there
				if (mySlideInit2 == true) {
					if (browser_width - ((timeline_right * 11) - rutsche_pos) < 100) {
						
						//log('timeline_right te ver naar rechts: browser_width: ' + browser_width + ' timeline_right: ' + timeline_right + ' rutsche_pos: ' + rutsche_pos);
						
						//timeline_right = timeline_dates.length - 9;
						timeline_right = Math.round((browser_width + rutsche_pos - 100)/11);
						
						//log('new timeline_right: ' + timeline_right);
						
						mySlide2.set(timeline_right);
					}
				}
				
				timeline_diff = parseInt(timeline_right - timeline_center);
				if (timeline_diff < 0) {
					timeline_diff = 0;
				}
				
				timeline_left = timeline_center - timeline_diff;
				/*
				if (timeline_left < 0) {
					timeline_left = 0;
				}
				*/
				if (mySlideInit == true) {
					if ((timeline_left * 11) - rutsche_pos < 25) {
						timeline_left = Math.round((rutsche_pos + 25)/11);
						mySlide.set(timeline_left);
					}
				} 
									
				if (mySlideInit == true) {
					mySlide.set(timeline_left);
					filter['from'] = timeline_dates[timeline_left];
				}
				
				filterMarker();
				
				$('zahl').setHTML( germanDate( timeline_dates[timeline_left] ) );
				$('zahl2').setHTML( germanDate( timeline_dates[timeline_right] ) );
				
				if (timeline_diff < 8) {
					document.getElementById("zahl2").style.left = (timeline_right * 11 + 16) + 'px';
					document.getElementById("zahl").style.left = (timeline_left * 11 - 60) + 'px';
					document.getElementById("diff").style.visibility = 'hidden';
				}
				else if (timeline_diff < 13) {
					document.getElementById("zahl2").style.left = (timeline_right * 11 + 16) + 'px';
					document.getElementById("zahl").style.left = (timeline_left * 11 + 16) + 'px';
					document.getElementById("diff").style.visibility = 'visible';
				}
				else {
					document.getElementById("zahl2").style.left = (timeline_right * 11 - 60) + 'px';
					document.getElementById("zahl").style.left = (timeline_left * 11 + 16) + 'px';
					document.getElementById("diff").style.visibility = 'visible';
				}
				
				timeline_active = "";
			}
		},
	
		onComplete: function(pos) {
		},
	
		onTick: function(pos){
			//if (pos > timeline_size) {
			//	pos = timeline_size;
			//}
			if (timeline_active == "center") {
				fx2.custom(pos);
			} else {
				nx2.custom(pos);
			}	
		}	
	}).set(timeline_right);
	
	mySlideInit2 = true;
	
	/* Slider LINKS */
	mySlide = new Slider($('balken'), $('knopf'), {
		
		steps: (timeline_dates.length-1),
		
		onChange: function( step ){
									
			if (timeline_active=="" || timeline_active=="left") {
				timeline_active = "left";
				filter['from'] = timeline_dates[step];
				
				timeline_left = step;
				// timeline_left cannot move further to the right than timeline_center
				if (timeline_left > timeline_center) {
					timeline_left = timeline_center;
					mySlide.set(timeline_center);
				}
				
				// timeline_left cannot move too far to the left as a slider icon is shown there
				if (mySlideInit == true) {
					if ((timeline_left * 11) - rutsche_pos < 25) {
						
						//log('timeline_left te ver naar links: browser_width: ' + browser_width + ' timeline_left: ' + timeline_right + ' rutsche_pos: ' + rutsche_pos);
						
						timeline_left = Math.round((rutsche_pos + 25)/11);
						
						//log('new timeline_left: ' + timeline_left);
						
						mySlide.set(timeline_left);
					}
				}
				
				timeline_diff = parseInt(timeline_center - timeline_left);
				if (timeline_diff < 0) {
					timeline_diff = 0;
				}
				//log('timeline_diff: ' + timeline_diff);
				timeline_right = timeline_center + timeline_diff;
				
				/*
				if (timeline_right > (timeline_dates.length - 1)) {
					timeline_right = timeline_dates.length - 1;
				}
				*/
				if (mySlideInit2 == true) {
					if (browser_width - ((timeline_right * 11) - rutsche_pos) < 100) {
						timeline_right = Math.round((browser_width + rutsche_pos - 100)/11);
						mySlide2.set(timeline_right);
					}
				} 
					
				mySlide2.set(timeline_right);
				filter['to'] = timeline_dates[timeline_right];
				filterMarker();
					
				$('zahl').setHTML( germanDate( timeline_dates[timeline_left] ) );
				$('zahl2').setHTML( germanDate( timeline_dates[timeline_right] ) );
				
				if (timeline_diff < 8) {
					document.getElementById("zahl2").style.left = (timeline_right * 11 + 16) + 'px';
					document.getElementById("zahl").style.left = (timeline_left * 11 - 60) + 'px';
					document.getElementById("diff").style.visibility = 'hidden';
				}
				else if (timeline_diff < 13) {
					document.getElementById("zahl2").style.left = (timeline_right * 11 + 16) + 'px';
					document.getElementById("zahl").style.left = (timeline_left * 11 + 16) + 'px';
					document.getElementById("diff").style.visibility = 'visible';
				}
				else {
					document.getElementById("zahl2").style.left = (timeline_right * 11 - 60) + 'px';
					document.getElementById("zahl").style.left = (timeline_left * 11 + 16) + 'px';
					document.getElementById("diff").style.visibility = 'visible';
				}
				
				//document.getElementById("zahl").style.left	=  (mySlide.toPosition(timeline_left)-rutsche_pos-20) +'px';
				//document.getElementById("zahl2").style.left	=  (mySlide2.toPosition(timeline_right)-rutsche_pos-20) +'px';
				
			
				timeline_active = "";
			}
		},
		
		onComplete: function(pos) {
			},
			
		onTick: function(pos){
			if (timeline_active == "center") {
				fx.custom(pos);
				
			} else {
				nx.custom(pos);
			}	
		}

	}).set(timeline_left);
	
	mySlideInit = true;
					
	/* Slider Center */
	mySlideC = new Slider( $('balken'), $('knopfc'), 
			{
				tick: 'on',
				steps: (timeline_dates.length-1),
				
				onChange: function( step ) {
				
						if (timeline_active=="" || timeline_active=="center") {
							timeline_active = "center";
							timeline_center = step;
							
							// adjust the left and right sliders
							timeline_right = (step+timeline_diff);
							timeline_left = (step-timeline_diff);
							
				if (browser_width - ((timeline_right * 11) - rutsche_pos) < 100) {
					timeline_right = Math.round((browser_width + rutsche_pos - 100)/11);
					
					timeline_diff = parseInt(timeline_right - timeline_center);
					if (timeline_diff < 0) {
						timeline_diff = 0;
					}
				}
				if ((timeline_left * 11) - rutsche_pos < 25) {
					timeline_left = Math.round((rutsche_pos + 25)/11);
					
					timeline_diff = parseInt(timeline_center - timeline_left);
					if (timeline_diff < 0) {
						timeline_diff = 0;
					}
				}
								
				mySlide.set(timeline_left);
				mySlide2.set(timeline_right);
				
				if (browser_width - ((timeline_center * 11) - rutsche_pos) < 100) {
					timeline_center = Math.round((browser_width + rutsche_pos - 100)/11);
					mySlideC.set(timeline_center);
				}
				if ((timeline_center * 11) - rutsche_pos < 25) {
					timeline_center = Math.round((rutsche_pos + 25)/11);
					mySlideC.set(timeline_center);
				}
								

				// set the filters based on the new positions of the left and right sliders
				filter['from'] = timeline_dates[timeline_left];					
				filter['to'] = timeline_dates[timeline_right];
					
				//$('diff').style.visibility="visible";
				//$('diff').style.left=rutsche_pos;
				$('diff').setHTML( germanDate( timeline_dates[timeline_center] ) );
				$('zahl').setHTML( germanDate( timeline_dates[timeline_left] ) );
				$('zahl2').setHTML( germanDate( timeline_dates[timeline_right] ) );
												
				document.getElementById("diff").style.left = (timeline_center * 11 + 20) + 'px';	
				if (timeline_diff < 8) {
					document.getElementById("zahl2").style.left = (timeline_right * 11 + 16) + 'px';
					document.getElementById("zahl").style.left = (timeline_left * 11 - 60) + 'px';
					document.getElementById("diff").style.visibility = 'hidden';
				}
				else if (timeline_diff < 13) {
					document.getElementById("zahl2").style.left = (timeline_right * 11 + 16) + 'px';
					document.getElementById("zahl").style.left = (timeline_left * 11 + 16) + 'px';
					document.getElementById("diff").style.visibility = 'visible';
				}
				else {
					document.getElementById("zahl2").style.left = (timeline_right * 11 - 60) + 'px';
					document.getElementById("zahl").style.left = (timeline_left * 11 + 16) + 'px';
					document.getElementById("diff").style.visibility = 'visible';
				} 
				
				//document.getElementById("diff").style.left	=  (mySlideC.toPosition(step)-rutsche_pos-20) +'px';
				
				// filter the unorts
				filterMarker();
				
				timeline_active = "";
			}
		},
	
		onComplete: function(pos) {
			//$('diff').style.visibility="hidden";
		},
	
		onTick: function(pos){
			//if (pos > timeline_size) {
			//	pos = timeline_size;
			//}
			//log('centerslider: onTick: pos: ' + pos);
			fxc.custom(pos);
			//("pos = "+(pos+11)+" \noffest = "+rutsche_pos);
		}
	}).set(timeline_center);
}


//
//		zeitraum aus db holen
//

// called from initGui()
function refreshTimelineDates( xmlDoc2 ) {
	
	var days = xmlDoc2.documentElement.getElementsByTagName( "day" );
	
	for (var i = 0; i < days.length; i++) {
		timeline_dates[i] = days[i].getAttribute( "date" );
		
		if (timeline_dates[i] == today) {
			timeline_center = i;
		}
	}
	
	// default the most recent created unorts are shown 
	timeline_diff = 30; //mf 15
	//timeline_left = timeline_right - timeline_diff;
	timeline_left = timeline_center - timeline_diff;
	timeline_right = timeline_center + timeline_diff;
	if (timeline_left < 0) {
		timeline_left = 0;
	}
	if (timeline_right > (days.length - 1)) {
		timeline_right = days.length - 1;
	}
	
	// adjust filter 'to' and 'from'
	filter['from'] = timeline_dates[timeline_left];
	filter['to'] = timeline_dates[timeline_right];
		
	//timeline_center = Math.floor((timeline_right + timeline_left)/2.0);
	//log('refreshTimelineDates() - timeline_center: ' + timeline_center);
						
	// skala is the timeline
	// the HTML contains activity indicators and month names
	document.getElementById( "skala" ).innerHTML = genSkala(); 
}


// called from genSkala()
// check if there is minimum 1 unort created at a certain date
function isUnort(datum) {
	//log('isUnort: ' + datum + ' length: ' + unorte.length);
	for (i=0;i<unorte.length;i++) {
		u = unorte[i];
		//log('u[datum]: ' + u['datum']);
		if (u['datum'] == datum) {
			return true;
		}
	}
	return false;
}

function changeTimelineButton( state ) {
	document.getElementById( 'timeline_switch' ).src = timeline_switch[ state ].src;
}


function changeTimeline() {
	if (globalStatus.timeline) {
		globalStatus.timeline = false;
		changeTimelineButton( 0 );
		// show all markers
		filterMarker();
		// hide controls (fading)
		fxknopf.start(1,0);
		fxknopf2.start(1,0);
		fxknopfc.start(1,0);
		fxzahl.start(1,0);
		fxzahl2.start(1,0);
		fxdiff.start(1,0);
		
		// disable calendar
		document.getElementById('kalender_icon').innerHTML = '';
	} else {
		globalStatus.timeline = true;
		changeTimelineButton( 1 );
		
		// enable calendar
		document.getElementById('kalender_icon').innerHTML = '<a href="javascript:calendarShow(1);"><img src="img/icon_kalender4.png" alt="Kalender"  /></a>';
		
		// filter markers and set center marker on current date
		initGui();
		
		// show controls (fading) -> in initGui() after ajax calls
	}
	saveMapStatus();
}


// format of the date should be yyyy-mm-dd
function centerTimelineOnDate( date ) {
	
	for (var i = 0; i < timeline_dates.length; i++) {
		if (timeline_dates[i] == date) {
			timeline_center = i;
			timeline_left = timeline_center - 30; //mf 15
			timeline_right = timeline_center + 30; //mf 15
			if (timeline_left < 0) {
				timeline_left = 0;
			}
			if (timeline_right > (timeline_dates.length - 1)) {
				timeline_right = timeline_dates.length - 1;
			}
				
			// before adapting the sliders, the timeline should be moved (if necessary)
			// therefore rutsche_pos needs to be adapted, so that the chosen date is centered
			// in the part of the timeline shown in the browser.
			// rutsche_pos is minimal 0 and maximum (timeline_size - browser_width) 
			rutsche_pos = (timeline_center * 11) - (browser_width / 2);
			
			if (rutsche_pos < 0) {
				rutsche_pos = 0;
				slideToLeft = false;
				timelinePuller(true, 'left');
			} else {
				slideToLeft = true;
			}
			
			if (rutsche_pos > (timeline_size - browser_width)) {
				rutsche_pos = timeline_size - browser_width;
				slideToRight = false;
				timelinePuller(true, 'right');
			}
			else {
				slideToRight = true;
			}
			
			// timeline_right cannot move to the end of the shown part of the timeline as the kalender, 
			// timeline and slider icons are shown there
			if (browser_width - ((timeline_right * 11) - rutsche_pos) < 100) {
				timeline_right = Math.round((browser_width + rutsche_pos - 100)/11);
			}
			
			// timeline_left cannot move to the end of the shown part of the timeline as the slider icon
			// is shown there
			if ((timeline_left * 11) - rutsche_pos < 25) {
				timeline_left = Math.round((rutsche_pos + 25)/11);
			}
			
			// timeline_center cannot move to the end of the shown part of the timeline as the kalender, 
			// timeline and slider icons are shown there
			if (browser_width - ((timeline_center * 11) - rutsche_pos) < 100) {
				timeline_center = Math.round((browser_width + rutsche_pos - 100)/11);
			}
			
			// timeline_center cannot move to the end of the shown part of the timeline as the slider icon
			// is shown there
			if ((timeline_center * 11) - rutsche_pos < 25) {
				timeline_center = Math.round((rutsche_pos + 25)/11);
			}
						
			scroll.scrollTo(rutsche_pos,0);
			
			// adapt the sliders
			adaptSliders(); 
		}
	}
}