/**
* Dit bestand heeft alle afhandelingen van het systeem, events , intializaties van gmaps, markers, sliders, de hele bende.
* 
* TODO:
* - background-position: in firefox geeft renderng issues met slider, firefox is ook echt bagger af en toe...
* - Resize werkt niet goed
* - IN Ie wanneer naar de site geklikt wordt initializeeerd het AVR framework niet, via window onload hier een hack omheen gedaan
*/


<!-- progress bar -->
var progressBar;
// google last!
var packagesToLoad = new Array('slider', 'ajax', 'cookies', 'clock', 'tabs', 'google');
var progressBarSteps = (packagesToLoad.length + 1) + 3;
<!-- Slider vars -->
var taskbar;
var sidebar;
<!-- Frame work -->
var avr = new Avr({'basePath': 'external/avr/'});
avr.addListener(Avr.events.loadPackage, initProgressBar);
<!-- Google Maps -->
var gmaps;
var googleMapsHeight;

<!-- Seperate vars -->
var ajax;
var clock;
var cookie;
var tabs;

function initPackages(obj, event, status, extra) {
	if ( status == Avr.status.succes ) {
		if (extra.packageLoaded == 'slider') {
			initSliders();
		}
		else if ( avr.packageIsLoaded('ajax') && avr.packageIsLoaded('google') && avr.packageIsLoaded('cookies') && ajax == undefined ) {
			ajax = new Ajax();
			cookie = new Cookie();
			initializeGoogle();
		}
		else if ( extra.packageLoaded == 'tabs' ) {
			tabs = new Tabs();
			nodes = document.getElementById('menu').childNodes;
			for(i = 0; i < nodes.length; i++ ) {
				if ( nodes[i].name != undefined ) {
					tabs.addTab(nodes[i].name, nodes[i]);
				}
			}
			tabs.addListener(Tabs.events.OPEN, openTab);
			tabs.addListener(Tabs.events.CLOSE, closeTab);
		}
		else if ( extra.packageLoaded == 'clock' ) {
			try {
				clock = new Clock(document.getElementById('clock'));
				clock.start();
			}
			catch(obj) { alert(obj.message + ' - ' + Clock.events.CLOCKSTOP); }
		}
		progressBar.addStage();
	}
}
function initProgressBar(obj, event, status, extra) {
	if ( status == Avr.status.succes ) {
		if (extra.packageLoaded == 'progressBar') {
			progressBar = new ProgressBar(progressBarSteps);
			progressBar.addListener(ProgressBarEvents.START, progressBarStart);
			progressBar.addListener(ProgressBarEvents.STOP, progressBarStop);
			progressBar.addListener(ProgressBarEvents.SETSTAGE, progressBarSetStage);
			progressBar.start();
			avr.removeListener(Avr.events.loadPackage);
			avr.addListener(Avr.events.loadPackage, initPackages);
			// Load Packages
			for(i in packagesToLoad) {
				avr.loadPackage(packagesToLoad[i]);
			}
		}
	}
}

function initSliders() {
	taskbar = new Slider(document.getElementById('taskbar'), new SliderDirection(SliderDirection.BOTTOM), {'speed': 1, 'interval': 10});
	taskbar.addListener(Slider.events.MOTION, motiontaskbar);
	taskbar.addListener(Slider.events.MOTIONSTART, googleToggleTaskBar);
	taskbar.addListener(Slider.events.MOTIONSTOP, googleToggleTaskBar);
	sidebar = new Slider(document.getElementById('sidebar'), new SliderDirection(SliderDirection.RIGHT), {'speed': 5, 'interval': 10, 'show': false});
	sidebar.addListener(Slider.events.MOTION, motionsidebar);
	sidebar.addListener(Slider.events.MOTIONSTART, googleToggleSideBar);
	sidebar.addListener(Slider.events.MOTIONSTOP, googleToggleSideBar);
}
<!-- Ajax data -->
// Retrieve the markers
function retrieveMarkers() {
	initGoogleSizes();
	runTab('persoonlijk');
}

function runTab(tab) {
	tabs.open(tab);
}
function openTab(obj, event, status, extra) {
	// When status == FAILED, tab is allready open 
	if ( status == Tabs.status.SUCCES ) {
		if ( extra != 'help' ) {
			sidebar.closed();
			gmaps.removeMarkers();
		}
		if ( ajax != undefined ) ajax.data = '';
		switch(extra) {
			case 'persoonlijk':
				document.getElementById('sidebarcontent').innerHTML = '<h1>Persoonlijk</h1>';
				ajax.get('xml/persoonlijk.xml', parseMarkers);
			break;
			case 'cv':
				document.getElementById('sidebarcontent').innerHTML = '<h1>Curriculum Vitae / Portfolio</h1>';
				werkcv = 'init';
				ajax.get('xml/cv-portfolio.xml', parseCv);
			break;
			case 'waarbenik':
				document.getElementById('sidebarcontent').innerHTML = '<h1>Waar was ik</h1><p class="inactive">Op dit moment is de data die onder deze tab staat fictief, het J2ME programma wat op mijn mobiel moet werken is nog niet functioneel.</p>';
				ajax.data = 'draw';
				ajax.get('xml/waarbenik.php', parseMarkers);
			break;
			case 'help':
				runInfo();
			break;
		}
		var htmlnode = tabs.getTab(extra);
		htmlnode.className = 'active';
	}
	else if ( sidebar.motionIsActive() == false && sidebar.isOpen == false ) sidebar.open();
}
function closeTab(obj, event, status, extra) {
	var htmlnode = tabs.getTab(extra);
	if ( htmlnode ) htmlnode.className = '';

	if ( extra == 'help' ) {
		document.getElementById('progressbaroverlay').style.display='none';
		document.getElementById('firstRun').style.display='none';
	}
}

function runInfo() {
	document.getElementById('progressbaroverlay').style.display='block';
	document.getElementById('firstRun').style.display='block';
}
function closeInfo() {
	document.getElementById('progressbaroverlay').style.display='none';
	document.getElementById('firstRun').style.display='none';
	// Rans
	tabs.currentTab = tabs.previoustab;
	var htmlnode = tabs.getTab(tabs.previoustab);
	htmlnode.className = 'active';
	var htmlnode = tabs.getTab('help');
	htmlnode.className = '';

	if ( cookie.getCookie('firstrun') == 'done' ) {
		cookie.setCookie('firstrun', 'finished');
		open('home');
	}
}

<!-- Place markers on the stage -->
function parseMarkers() {
	if ( ajax.httprequest.readyState == 4 ) {
		progressBar.addStage();
		var xml = ajax.httprequest.responseXML;
		if ( xml.documentElement.childNodes[1] != undefined && xml.documentElement.childNodes[1].tagName == 'markers' ) {
			nodes = xml.documentElement.childNodes[1].childNodes;
		}
		else if ( xml.documentElement.childNodes[0] != undefined && xml.documentElement.childNodes[0].tagName == 'markers' ) {
			nodes = xml.documentElement.childNodes[0].childNodes;
		}
		if ( nodes ) {
			var panTo = '';
			var message = '<ul>';
			for(i = 0; i < nodes.length; i++ ) {
				if ( nodes[i].tagName == 'marker' ) { // Loop marker
					var Data = new Array();
					for(j = 0; j < nodes[i].childNodes.length; j++ ){
						var marker = nodes[i].childNodes[j];
						if( marker.tagName != undefined && marker.firstChild != null ) {
							Data[marker.tagName] = marker.firstChild.nodeValue;
						}
					}
					var oMarker = new GoogleMarker(gmaps.map, Data);
					gmaps.addMarker(Data.name, oMarker, false);
					if ( panTo == '' ) panTo = Data.name;
					message += '<li>' + oMarker.toString() + '</li>';
				}
			}
			message += '</ul>';
			document.getElementById('sidebarcontent').innerHTML += message;

			if ( cookie.getCookie('firstrun') == '' ) {
				cookie.setCookie('firstrun', 'done');
				runInfo();
			}
			else {
				open(panTo);
			}

			if ( ajax.data == 'draw' ) gmaps.drawLines();
			// Open sidebar:
			if ( sidebar.isOpen != true ) sidebar.open();
		}
	}
}
var werkcv = 'init';
function parseCv() {
	if ( ajax.httprequest.readyState == 4 ) {
		progressBar.addStage();
		var xml = ajax.httprequest.responseXML;
		if ( xml.documentElement.childNodes[1] != undefined && xml.documentElement.childNodes[1].tagName == 'markers' ) {
			nodes = xml.documentElement.childNodes[1].childNodes;
		}
		else if ( xml.documentElement.childNodes[0] != undefined && xml.documentElement.childNodes[0].tagName == 'markers' ) {
			nodes = xml.documentElement.childNodes[0].childNodes;
		}
		var message = '';
		if ( nodes ) {
			var panTo = '';
			if ( werkcv == true || werkcv == 'init' ) message += '<h2>Werk ervaring:</h2>';
			else if ( werkcv == false ) message += '<h2>Stage ervaring:</h2>';
			message += '<ul>';

			for(i = 0; i < nodes.length; i++ ) {
				if ( nodes[i].tagName == 'marker' ) { // Loop marker
					var werk = true;
					var Data = new Array();
					var werk = true;
					for(j = 0; j < nodes[i].childNodes.length; j++ ){
						var marker = nodes[i].childNodes[j];
						if( marker.tagName != undefined && marker.firstChild != null ) {
							Data[marker.tagName] = marker.firstChild.nodeValue;
						}
					}
					if ( werkcv == 'init' ) {
						var oMarker = new GoogleMarker(gmaps.map, Data);
						gmaps.addMarker(Data.name, oMarker, false);
					}
					else {
						var oMarker = gmaps.getMarker(Data.name);
					}
					if ( ( werkcv == false && Data["type"] == 'stage' ) || ( ( werkcv == true || werkcv == 'init' ) && Data["type"] == 'werk' ) ) {
						message += '<li>' + oMarker.toString() + '</li>';
						if ( panTo == '' ) panTo = Data.name;
					}
				}
			}
			open(panTo);

			message += '</ul><br />';
			if ( werkcv == true || werkcv == 'init' ) message += '<a href="javascript:switchCv(false);">Klik hier voor mijn stage ervaringen</a>';
			else message += '<a href="javascript:switchCv(true);">Klik hier voor mijn werk ervaringen</a>';

			message += '<br /><br />Download Curriculum Vitae:<br /> <a href="files/cv-arnovanrossum.pdf" target="_blank"><img src="img/icons/pdf.png" alt="PDF" title="PDF" /></a><a href="files/cv-arnovanrossum.html" target="_blank"><img src="img/icons/internetexplorer.png" alt="html" title="html" /></a><a href="files/cv-arnovanrossum.doc" target="_blank"><img src="img/icons/msword.png" alt="MS Word" title="MS Word" /></a>';
		}
		document.getElementById('sidebarcontent').innerHTML += message;
		// Open sidebar:
		if ( sidebar.isOpen != true ) sidebar.open();
	}
}
function switchCv(wcv) {
	werkcv=wcv;
	document.getElementById('sidebarcontent').innerHTML = '<h1>Curriculum Vitae / Portfolio</h1>';
	parseCv();
}
<!-- Google Maps -->
function initializeGoogle() {
	progressBar.addStage();
	// This generates google maps
	gmaps = new GoogleWrapper(document.getElementById("googlemaps"));
	gmaps.addListener(GoogleWrapper.events.finished, retrieveMarkers);
	gmaps.generateMaps();
	progressBar.addStage();
}

function initGoogleSizes() {
	document.getElementById('googlemaps').style.height = (document.getElementById('googlemaps').clientHeight - taskbar.getDivHeight()) + "px";
	googleMapsHeight = document.getElementById('googlemaps').clientHeight;
	googleMapsWidth = document.getElementById('googlemaps').clientWidth;
}
function panTo(name) {
	gmaps.panTo(name);
}
function open(name) { 
	gmaps.open(name);
}
<!------- -------->

<!-- AFHANDELING SLIDER -->
function toggle(slider) {
	slider.toggle();
}
function motiontaskbar(slider, e, status, extra) {
	document.getElementById('toggletaskbar').style.marginTop = (slider.getDivHeight() - 5) + "px";
}
function motionsidebar(slider, e, status, extra) {
	document.getElementById('togglesidebar').style.marginLeft = (slider.getDivWidth() - 5) + "px";
}


<!-- Resize google maps based on bars events -->
function googleToggleTaskBar(slider, e, status, extra) {
	if ( e == Slider.events.MOTIONSTART && slider.getDivHeight() > slider.minimum) {
		document.getElementById('googlemaps').style.height = ( googleMapsHeight + slider.getDivHeight()) + "px";
		document.getElementById('googlemaps').style.marginTop = slider.minimum + "px";
		google.maps.event.trigger(gmaps.map, 'resize');
	}
	if ( e == Slider.events.MOTIONSTOP && slider.getDivHeight() > slider.minimum ) {
		document.getElementById('googlemaps').style.height = googleMapsHeight + "px";
		document.getElementById('googlemaps').style.marginTop = slider.getDivHeight() + "px";
		google.maps.event.trigger(gmaps.map, 'resize');
	}
}
function googleToggleSideBar(slider, e, status, extra) {
	if ( e == Slider.events.MOTIONSTART ) {
		document.getElementById('googlemaps').style.width = googleMapsWidth + "px";
		document.getElementById('googlemaps').style.marginLeft = slider.minimum + "px";
		google.maps.event.trigger(gmaps.map, 'resize');
	}
	if ( e == Slider.events.MOTIONSTOP ) {
		document.getElementById('googlemaps').style.width = (googleMapsWidth - slider.getDivWidth()) + "px";
		document.getElementById('googlemaps').style.marginLeft = slider.getDivWidth() + "px";
		google.maps.event.trigger(gmaps.map, 'resize');
	}
}
<!------- -------->

<!-- AFHANDELING PROGRESSBAR -->
function setOpacity(obj, value) {
	obj.style.opacity = value/10;
	obj.style.filter = 'alpha(opacity=' + value * 10 + ')';
}
function getOpacity(obj) {
	return obj.style.opacity;
}
function progressBarStart(pb, e) {
	document.getElementById('progressbaroverlay').style.display='block';
	document.getElementById('progressbar').style.display='block';
	setOpacity(document.getElementById('progressbaroverlay'), 6);
}
function progressBarSetStage(pb, e) {
	document.getElementById('progressbarpercentage').style.width = pb.getPercentage() + '%';
	document.getElementById('progressbarcontent').innerHTML = pb.getPercentage() + '%';
}
function progressBarStop(pb, e) {
	document.getElementById('progressbaroverlay').style.display='none';
	document.getElementById('progressbar').style.display='none';
}
<!-- when shit resizes, help! -->
function resize() {
	if ( gmaps != undefined ) google.maps.event.trigger(gmaps.map, 'resize');
	if ( taskbar != undefined ) {
		document.getElementById('googlemaps').style.height = (document.body.clientHeight - taskbar.getDivHeight()) + 'px';
	}
	if ( sidebar != undefined ) { // Deze bugt nog
		document.getElementById('googlemaps').style.width = (document.body.clientWidth) + 'px';
	}
	googleMapsHeight = document.getElementById('googlemaps').clientHeight;
	googleMapsWidth = document.getElementById('googlemaps').clientWidth;
}
window.onresize = resize;
<!------- -------->
window.onload = function() {
	// Initialize first essential package
	window.setTimeout('FallBack()', 500);
}
function FallBack() {
	opac = getOpacity(document.getElementById('progressbaroverlay'));
	if ( opac == undefined || opac == '' ) document.location.reload(true);
}

avr.loadPackage('progressBar');