window.addEvent('domready', function(){
	
	$('leave_date').addEvent('change', calcDays );
	
	var firstEl = $(document.body).getElement('select[name=city]');
	firstEl.set('name', 'city[]');
	
	firstEl.addEvent('change', changeCity.bindWithEvent(firstEl.getParent('tr')) );
});

function loadRoute( data ){
	
	var blnFirst = true;
	var cityEl;
	var prevValue = null;
	
	data.each( function( row ){
		
		if( blnFirst ){
			
			citySelect = $('start').getElement('select');
			citySelect.set('value', row.id ).set('disabled', 'disabled');
			addGooglemaps( $('start').getElement('select').getParent('tr') );
			
			blnFirst = false;
		}else{
			
			var rowElement = new Element('tr');
			
			var citySelect = createCitySelect( row.cities, rowElement, prevValue );
			citySelect.set('value', row.id ).set('disabled', 'disabled');
			
			// Find distance
			var valueOption = citySelect.getElement('option[value=' + citySelect.get('value') + ']');
			
			// Create the row
			rowElement.grab( new Element('td').grab( new Element('label') ) );
			rowElement.grab( new Element('td').grab( citySelect ));
			rowElement.grab( new Element('td').set('html', ' '));
			rowElement.grab( new Element('td', {'class':'distance', text:valueOption?valueOption.retrieve('current_distance'):0 } ) );
			
			rowElement.grab( new Element('td').set('html', ' ' ));
			
			rowElement.inject( $('totals'), 'before' );
			
			addInsertBetween( rowElement.getPrevious() );
			addGooglemaps( rowElement );
			
			if( prevValue == row.id ){
				addDelete( rowElement );
			}
		}
		
		cityEl = citySelect;
		prevValue = row.id;
	});
	
	cityEl.fireEvent('change');
	
	calcTotal();
	calcDays();
}

function createCitySelect( data, rowElement, previousValue ){
	// Create a cityelement
	var cityEl = new Element('select', {name:'city[]', styles:{width:150}});
	cityEl.addEvent('change', changeCity.bindWithEvent(rowElement) );
	cityEl.grab( new Element('option', {value:'', text:'Volgende plaats'}) );
	
	if( previousValue ){
	
		var cityName;
		data.each( function( row ){
			if( row.to_city_id == previousValue ) cityName = row.to_city_name;
		});
		
		if( cityName ) cityEl.grab( new Element('option', {value:previousValue, text:'Overnachting in ' + cityName }) );
		else cityEl.grab( new Element('option', {value:previousValue, text:'Overnachting' }) );
	}
	
	var region;
	
	data.each(function(row){
		if( region == null || region.get('label') != row.to_region_name ){
			if( $type(region) == 'element'){
				cityEl.grab( region );
			}
			
			region = new Element('optgroup', {label:row.to_region_name});
		}
		
		var option = new Element('option', {text:row.to_city_name, value:row.to_city_id}).store('current_distance', row.current_distance);
		
		if( row.next_distance ){
			option.store('next_distance', row.next_distance);
		}
		
		region.grab( option );
	});
	if( $type(region) == 'element'){
		cityEl.grab( region );
	}
	
	return cityEl;
}

function changeCity(e){
	
	var currentRow = $(this);
	addGooglemaps( currentRow );
	removeSleepover( currentRow );
	
	var citySelect = currentRow.getElement('select');
	if( citySelect.get('value') == '' ) return;
	
	// Prevent scrolling
	citySelect.blur();
	citySelect.set('disabled', 'disabled');
	if( currentRow.get('id') != 'start' ) addInsertBetween( currentRow.getPrevious() );
	if( currentRow.getNext().getElement('select') ) addInsertBetween( currentRow );
	
	// Select the proper value, in each value the distance is stored
	var valueOption = citySelect.getElement('option[value=' + citySelect.get('value') + ']');
	if( valueOption && valueOption.retrieve('current_distance') ){
		citySelect.getParent('td').getNext().getNext().set('text', valueOption.retrieve('current_distance') );
	}else{
		citySelect.getParent('td').getNext().getNext().set('text', 0 );
	}
	
	if( valueOption && valueOption.retrieve('next_distance') ){
		currentRow.getNext().getElement('select').getParent('td').getNext().getNext().set('text', valueOption.retrieve('next_distance') );
	}
	
	var currentValue = citySelect.get('value');
	var nextrow = currentRow.getNext();
	
	// Add deletebutton if it's a sleepover
	if( currentRow.get('id') != 'start' && citySelect.get('value') == currentRow.getPrevious().getElement('select').get('value') ){
		addDelete( currentRow );
		removeInsertBetween( currentRow.getPrevious() );
	}
	
	if( nextrow && nextrow.get('id') != 'totals'){
		
		// If the stop commando is stored in the city element, then stop
		if( !citySelect.retrieve('stop') ){
		
			// A insert-between button is clicked
			var request = new Request.JSON({
				url:urlGetFitCities,
				onSuccess: createRow.bindWithEvent(null, currentRow)
			}).post({from_city_id:currentValue, to_city_id:nextrow.getElement('select').get('value') });
		}else{
			citySelect.store('stop', false);
		}
	}else{
		
		var request = new Request.JSON({
			url:urlGetCities,
			onSuccess: createRow.bindWithEvent(null, null)
		}).post({from_city_id:currentValue});
		
	}
	
	calcTotal();
}

function createRow(data, insertAfter){
	
	var row = new Element('tr');
	
	if( $type(insertAfter) == 'element' ){
		cityEl = createCitySelect( data, row, insertAfter.getElement('select').get('value') );
	}else{
		cityEl = createCitySelect( data, row, $('totals').getPrevious().getElement('select').get('value') );
	}
	
	row.grab( new Element('td').grab( new Element('label') ) );
	row.grab( new Element('td').grab( cityEl ) );
	
	row.grab( new Element('td').set('html', ' ' ) );
	row.grab( new Element('td', {'class':'distance'}) );
	
	row.grab( new Element('td').set('html', ' ' ));
	
	if( $type(insertAfter) == 'element' ){
		cityEl.store('stop', true);
		row.inject( insertAfter, 'after' );
	}else{
		row.inject( $('totals'), 'before' );
		addSleepover( row );
	}
	
	calcDays();
}

function calcTotal(){
	var iTotal = 0;
	$$('.distance').each(function(el){
		if( el.get('text') != '' ) iTotal += parseInt( el.get('text') );
	});
	
	$('mile').set('html', '' + iTotal + ' mijl<br>' + Math.round(iTotal*1.609344) + ' km');
}

function calcDays(){
	
	var theDate = new Date();
	theDate.parse($('leave_date').get('value'));
	
	var rows = $('planner').getElements('tr');
	
	// First row not processed
	rows.shift(); // Date
	rows.shift(); // Titles
	rows.shift(); // Start
	
	theDate.increment('day');
	
	var stop = false;
	rows.each(function( el ){
		
		if( el.get('id') == 'totals') stop = true;
		if( stop ) return;
		
		var date = theDate.format("%d-%m-%Y");
		
		if( date == 'invalid date' ){
			date = 'Kies vertrekdatum';
		}
		el.getElement('label').set('text',  date);
		
		theDate.increment('day');
	});
}

function deleteLast(){
	
	activeRow = $('totals').getPrevious();
	previousRow = activeRow.getPrevious();
	
	if( activeRow.get('id') != 'start'){ activeRow.destroy(); }
	else return;
	
	// Enable element
	previousRow.getElement('select').set('value', '').set('disabled', false);
	previousRow.fireEvent('change');
	
	removeInsertBetween( previousRow );
	if( previousRow.get('id') != 'start' ) removeInsertBetween( previousRow.getPrevious() );
	addSleepover( previousRow );
	removeGooglemaps( previousRow );
	
	calcTotal();
}

function deleteRow(){
	// Row deletion can only be done by an overnight
	var prevSelect = this.getPrevious().getElement('select');
	var nextSelect = this.getNext().getElement('select');
	
	if( prevSelect.get('value') != nextSelect.get('value') && nextSelect.get('value') == '' ){
		addInsertBetween( this.getPrevious() );
	}
	
	this.destroy();
	calcDays();
}

function addSleepover( row ){
	var overnight = new Element('a', {
		'href':'javascript:void null;',
		'class':'overnightButoon'
	}).grab( new Element('img', {
			src: imgRoot + '/bed2.png',
			alt: 'Overnachting',
			title: 'Overnachting'
	}));
	overnight.addEvent('click', (function(){
		this.getElement('select').set('value', this.getPrevious().getElement('select').get('value') );
		this.getElement('select').fireEvent('change');
	}).bindWithEvent(row));
	
	row.getElement('select').getParent('td').getNext().empty().grab( overnight );
}

function removeSleepover( row ){
	row.getElement('select').getParent('td').getNext().empty().set('html', '&nbsp;');
}

function addDelete( row ){
	var delEl = new Element('a', {href:'javascript:void null;', alt:'Verwijder', title:'Verwijder'}).grab(
		new Element('img', { src:imgRoot + '/icons/delete.png'} )
	);
	delEl.addEvent('click', deleteRow.bind( row ) );
	row.getElement('select').getParent('td').getNext().empty().grab(delEl);
}

function removeDelete( row ){
	row.getElement('select').getParent('td').getNext().empty().set('html', '&nbsp;');
}

function addInsertBetween( row ){
	
	nextRow = row.getNext();
	
	// If item is present, ignore it
	if( row.getElement('select').getNext('a') ) return;
	
	if( nextRow.getElement('select').get('value') == row.getElement('select').get('value') ){
		removeInsertBetween( row );
	}else{
		var cell = row.getElement('select').getParent('td');
		cell.grab( new Element('br') );
		
		var insertBetweenEl = new Element('a', {href:'javascript:void null', text:'Dag tussenvoegen', 'class':'injectBetween'});
		insertBetweenEl.addEvent('click', changeCity.bindWithEvent(row) );
		
		cell.grab( insertBetweenEl );
	}
}

function removeInsertBetween( row ){
	row.getElement('select').getAllNext().destroy();
}

function addGooglemaps( row ){
	var mapsEl = new Element('a', {href:'javascript:void null;', alt:'Bekijk deze plaats in google maps', title:'Bekijk deze plaats in google maps'}).grab(
		new Element('img', { src:imgRoot + '/icons/map.png'} )
	);
	mapsEl.addEvent('click', showmap.bind(mapsEl) );
	row.getLast().empty().grab(mapsEl);
}

function removeGooglemaps( row ){
	row.getLast().set('html', '&nbsp;');
}

function showmap( ){
	
	var value = this.getParent('tr').getElement('select').get('value');
	if( value != '' && this.getParent('tr').getElement('select').get('value') != '0' ){
		var theSelectedOption = this.getParent('tr').getElement('select').getElement('option[value=' + value + ']');
		
		var request = new Request.JSON({
			 url: urlGoogleMaps,
			 onSuccess: function( data ){
				if( data.self ){
					var url = data.url + theSelectedOption.get('text').replace('NP', 'National Park') + ', ' + theSelectedOption.getParent().get('label'); 
				}else{
					var url = data.url;
				}
				var myWin = new StickyWin.Modal({
					 content: '<div id="theMap" style="background-color:#FFFFFF; text-align:center;">'
					 + '<a href="javascript:void(0);" class="closeSticky" style="font-size:14px; font-weight:bold; color:#000000; margin-bottom:8px">sluiten</a><br>'
					 + '<iframe style="width:900px; height:650px;" src="' + url + '" border="0"></iframe>'
					 + '<br><a href="javascript:void(0);" class="closeSticky" class="closeSticky" style="font-size:14px; font-weight:bold; color:#000000; margin-top:8px">sluiten</a>'
					 + '</div>',
					 width: 900,
					 height: 700,
					 position: 'center'
				 });
			 }
		}).post({'id': this.getParent('tr').getElement('select').get('value') });
	}
}