$(document).ready(function(){
	setupApp();
});

$(window).unload(function(){});

var lastAppState;

function setupApp () {
	if ($('#app').size() == 0) return;

	var map = flashembed('map-container', {
		src: 'swf/map.swf', 
		expressInstall: 'swf/expressInstall.swf',
		version: [9, 0],
		menu: 'false',
		wmode: 'transparent',
		allowscriptaccess: 'always',
		swliveconnect: 'true',
		id: 'map-object',
		w3c: 'true'
	});

	$('#app').data('map', map);

	$('#app #step1 .formpart select#destination').remove();

	var input = document.createElement('input');
	input.setAttribute('type', 'hidden');
	input.setAttribute('name', 'destination');
	input.setAttribute('id', 'destination');
	$('#app #step1 .formpart').append(input);

	$('#app #step3 .formpart select option').each(function () {
		if ($(this).attr('office')) {
			$(this).attr('office', ',' + $(this).attr('office') + ',');	
		}
	})

	// save city groups
	$('#app').data('cities-it', $('#app #step2 .formpart select optgroup#city-group-it'));
	$('#app').data('cities-nl', $('#app #step2 .formpart select optgroup#city-group-nl'));

	// save purpose groups
	$('#app').data('purposes-it', $('#app #step3 .formpart select optgroup#purpose-group-it'));
	$('#app').data('purposes-nl', $('#app #step3 .formpart select optgroup#purpose-group-nl'));

	// create new city select
	var city_select = document.createElement('select');
	city_select.setAttribute('name', $('#app #step2 .formpart select').attr('name'));
	city_select.setAttribute('id',   $('#app #step2 .formpart select').attr('id'));

	$('#app #step2 .formpart select option:eq(0)').appendTo(city_select);
	$('#app #step2 .formpart select').after(city_select).remove();

	// create new purpose select
	var purpose_select = document.createElement('select');
	purpose_select.setAttribute('name', $('#app #step3 .formpart select').attr('name'));
	purpose_select.setAttribute('id',   $('#app #step3 .formpart select').attr('id'));

	$('#app #step3 .formpart select option:eq(0)').appendTo(purpose_select);
	$('#app #step3 .formpart select').after(purpose_select).remove();

	// setup events
	$('#app #step1 .formpart a').click(selectDestination);
	$('#app #step1 .formpart a.disabled').unbind().click(function (e) { e.preventDefault(); });
	$('#app #step2 .formpart select').change(changeCity);
	$('#app #step3 .formpart select').change(changePurpose);

	disableButton('#app #step2 .formpart a.next-step');
	disableButton('#app #step3 .formpart input.submit');

	$('#app #step3 .formpart p.info').css({ 'opacity': 0 });

	getAppState();
	window.setInterval(getAppState, 100);
}

function saveAppState () {
	var step = $('#app').data('currentStep');
	var parts = new Array();

	if (step > 0) {
		var v;
		v = $('#app #step1 .formpart #destination').attr('value');
		if (v != '') parts.push(v)
	}

	if (step > 1) {
		var v;
		v = $('#app #step2 .formpart select option:eq(' + $('#app #step2 .formpart select').attr('selectedIndex') + ')').attr('value');
		if (v != 0) parts.push(v)
	}

	if (step > 2) {
		var v;
		v = $('#app #step3 .formpart select option:eq(' + $('#app #step3 .formpart select').attr('selectedIndex') + ')').attr('value');
		if (v != 0) parts.push(v)
	}

	var anchor = parts.join('/');

	var base = String(document.location).replace(/#.*/, '');

	if (anchor) {
		document.location = base + '#/' + anchor;
	} else if (document.location != base) {
		document.location = base + '#';
	}

	lastAppState = document.location.hash;
}

function getAppState () {
	if (document.location.hash == lastAppState) return;
	lastAppState = document.location.hash;

	$('#app .formpart').hide();	

	var step = 0;

	var parts = String(document.location.hash).replace(/^#*\/*\s*/, '').split('/', 3);

	if (parts[0]) {
		step = 1;
		$('#app #step1 .formpart #destination').attr('value', parts[0])
		$('#app #step1 .header .value').text($('#app #step1 .formpart a#destination-' + parts[0]).attr('title'));
		showCitiesForCountry(parts[0]);
		showPurposesForCountry(parts[0]);
	}

	if (parts[1]) {
		step = 2;
		var selectedOption = $('#app #step2 .formpart select option[value=' + parts[1] + ']');
		var index = selectedOption.index();

		showPurposesForOffice(selectedOption.attr('office'));

		$('#app #step2 .formpart select').attr('selectedIndex', index);
		$('#app #step2 .header .value').text(selectedOption.text());
	}

	if (parts[2]) {
		// step = 3;
		var selectedOption = $('#app #step3 .formpart select option[value=' + parts[2] + ']');
		var index = selectedOption.index();

		$('#app #step3 .formpart select').attr('selectedIndex', index);
	}

	showStep(step);
}

function showStep (step) {
	step = Math.min(step, 2);

	// if (step == $('#app').data('currentStep')) return;

	$('#app .step .header').unbind().css({ 'cursor': 'default' });
	$('#app .step .header h2').css({ 'opacity': null });

	for (var i = 0; i < step; i++) {
		$('#app #step' + (i+1) + ' .header').css({ 'cursor': 'pointer' }).click(gotoStep).hover(hoverStepIn, hoverStepOut);
	}

	for (var i = step; i < 3; i++) {
		$('#app #step' + (i+1) + ' .header .value').text('');
	}

	$('#app').data('currentStep', step);

	$('#app .step:not(:eq(' + step + '))').removeClass('active').addClass('inactive');
	$('#app .step:eq(' + step + ')').addClass('active').removeClass('inactive');

	$('#app .step.inactive .formpart').fadeOut(125);
	$('#app .step.active .formpart').fadeIn(250);

	$('#app #step2 .formpart select').change();
	$('#app #step3 .formpart select').change();

	saveAppState();
}

function gotoStep (e) {
	e.preventDefault();
	var step = String($(this).parents('.step:eq(0)').attr('id')).replace(/[^0-9]/g, '');
	showStep(Number(step)-1);
}

function hoverStepIn (e) {
	$(this).children('h2').animate({'opacity': 1.0}, 125);
}

function hoverStepOut (e) {
	$(this).children('h2').animate({'opacity': 0.4}, 125);
}

function nextStep () {
	var step = $('#app').data('currentStep');

	if (step < 2) {
		step++;
		showStep(step);
	} else {
		locateDocument();
	}
}

function selectDestination (e) {
	e.preventDefault();

	var destination = $(this).attr('id').replace(/^[^-]*-/, '');

	$('#app #step1 .header .value').text($(this).attr('title'));
	$('#app #step1 .formpart input#destination').attr('value', destination)

	showCitiesForCountry(destination);
	showPurposesForCountry(destination);

	if (destination == 'nl') {
		$('#app #step2 p.note').css({'visibility': 'hidden'});
	} else {
		$('#app #step2 p.note').css({'visibility': 'visible'});
	}

	nextStep();
}

function showCitiesForCountry (destination) {
	if (destination) {
		$('#app').data('currentCitySet', destination);
		$('#app #step2 .formpart select option:gt(0)').remove();
		$('#app').data('cities-' + destination).children('option').clone().appendTo($('#app #step2 .formpart select'));

		$('#app #step2 .formpart select').attr('selectedIndex', 0);
	}
}

function showPurposesForCountry (destination) {
	if (destination) {
		$('#app').data('currentPurposeSet', destination);
		$('#app #step3 .formpart select option:gt(0)').remove();
		$('#app').data('purposes-' + destination).children('option').clone().appendTo($('#app #step3 .formpart select'));
	}
}

function showPurposesForOffice (office) {
	showPurposesForCountry($('#app').data('currentPurposeSet'));

	var re = new RegExp(',' + office + ',');
	$('#app #step3 .formpart select option:gt(0)').each(function () {
		if (!String($(this).attr('office')).match(re)) {
			$(this).remove();
		}
	});

	$('#app #step3 .formpart select').css({'display': 'none'}).css({'display': 'block'});
}

function changeCity (e) {
	e.preventDefault();
	var selectedIndex = $('#app #step2 .formpart select').attr('selectedIndex');
	var selectedCityCode = $('#app #step2 .formpart select option:eq(' + selectedIndex + ')').val();

	var map = $('#app').data('map').getApi();
	if (map && typeof map.externalSelect != 'undefined') {
		try { map.externalSelect(selectedCityCode) } catch (err) {}
	}

	if (selectedIndex > 0) {
		enableButton('#app #step2 .formpart a.next-step', selectCity);
	} else {
		disableButton('#app #step2 .formpart a.next-step');
	}

	showPurposesForOffice($('#app #step2 .formpart select option:eq(' + selectedIndex + ')').attr('office'));
}

function mapOnline () {
	var selectedIndex = $('#app #step2 .formpart select').attr('selectedIndex');
	var selectedCityCode = $('#app #step2 .formpart select option:eq(' + selectedIndex + ')').val();

	var map = $('#app').data('map').getApi();
	if (map && typeof map.externalSelect != 'undefined') {
		try { map.externalSelect(selectedCityCode) } catch (err) {}
	}

	var cities = new Array();
	$('#app #step2 .formpart select option').each(function () { cities.push($(this).text()) });
	return cities;
}

function changeCityViaMap (id) {
	$('#app #step2 .formpart select').attr('selectedIndex', id).change();
}

function selectCity (e) {
	e.preventDefault();
	
	var selectedIndex = $('#app #step2 .formpart select').attr('selectedIndex');
	var selectedOption = $('#app #step2 .formpart select option:eq(' + selectedIndex + ')').text();
	$('#app #step2 .header .value').text(selectedOption);

	nextStep();
}

function changePurpose (e) {
	e.preventDefault();
	var selectedIndex = $('#app #step3 .formpart select').attr('selectedIndex');

	if (selectedIndex > 0) {
		var info = $('#app #step3 .formpart select option:eq(' + selectedIndex + ')').attr('title');
		$('#app #step3 .formpart p.info').animate({ 'opacity': 0 }, 100).text(info).animate({ 'opacity': 1 }, 250);
		enableButton('#app #step3 .formpart input.submit', selectPurpose);
	} else {
		$('#app #step3 .formpart p.info').animate({ 'opacity': 0 }, 250);
		disableButton('#app #step3 .formpart input.submit');
	}
}

function selectPurpose (e) {
	e.preventDefault();

	var selectedIndex = $('#app #step3 .formpart select').attr('selectedIndex');
	var selectedOption = $('#app #step3 .formpart select option:eq(' + selectedIndex + ')').text();
	// $('#app #step3 .header .value').text(selectedOption);

	nextStep();
}

function locateDocument () {
	$('#app').submit();
}

function disableButton (jq) {
	$(jq).unbind().click(function (e) { e.preventDefault() }).addClass('disabled').animate({'opacity': 0.4}, 250);
}

function enableButton (jq, func) {
	$(jq).unbind().removeClass('disabled').animate({'opacity': 1.0}, 250).bind('click', func);
}