var cities_types = new Array() ;
cities_types['dep'] = '/find_departure_city.php' ;
cities_types['arr'] = '/find_arrive_city.php' ;

var min_length = 3 ;

var prev_entered_strs = [] ;

var cur_record = undefined ;
var cur_dropdown_list = undefined ;
var old_keyup_handler = '' ;
var cur_input_field = undefined ;

var old_form_submit_action = undefined ;

var cur_iframe = undefined ;//@@hack: iframe to hide select in IE




function get_city_txt_representation_from_xml( xml_city )
{
	var city_name    = xml_city.getElementsByTagName( 'name' )[0].firstChild.data ;
	var city_code    = xml_city.getElementsByTagName( 'code' )[0].firstChild.data ;
	var country_name = xml_city.getElementsByTagName( 'country_name' )[0].firstChild.data ;
	
	var txtRepresentation = city_code + ', ' + city_name ;//+', ' + country_name ;		
	return txtRepresentation  ;
}

function complete_city_name( input_field_name_id, cities_type, callback_function_name )
{
//	if ( !is_enter_enabled )
//		return ;

	//check that we have such cities-type
	if ( undefined == cities_types[ cities_type ] ) 
	{
		//hide dropdown-list: so even if user simply deleted chars, the old drop-down-list will not be shown to him/her
		if ( undefined != cur_dropdown_list )
			cur_dropdown_list.style.visibility = 'hidden' ;
		return ;
	}
	//get length of entered string from specified input-field
	input_field = document.getElementById( input_field_name_id ) ;
	var entered_string = input_field.value ;
	
	if (
		  !( undefined == prev_entered_strs[input_field.id] )
		&& ( prev_entered_strs[input_field.id] == entered_string )
		)
	{//if prev. entered string is the same as current
		//do nothing
		return ;
	}	
//alert( input_field_name_id ) ;	
//alert( '"' + prev_entered_strs[input_field_name_id] + '" vs "' + entered_string + '"') ;
	//remember new entered string
	prev_entered_strs[input_field.id] = entered_string ;	
	//check length of value 
	if ( entered_string.length < min_length )
	{
		//hide dropdown-list: so even if user simply deleted chars, the old drop-down-list will not be shown to him/her
		if ( undefined != cur_dropdown_list )
			cur_dropdown_list.style.visibility = 'hidden' ;
		return ;
	}
	

	
	//get url to post request to
	var url = cities_types[ cities_type ] ;
	var fields = new Array(1) ;
	fields['str'] = entered_string ;

	//create ajax handler
	var ajax_handler = new CAjaxHandler ;
	//make request
	ajax_handler.MakeRequest( 'GET', url, fields, callback_function_name, true )	
}//complete_city_name

function update_arrive_field( str_result, xml )
{
	update_field( document.getElementById( 'to_city_field' ), str_result, xml ) ;
}


function update_dep_field( str_result, xml )
{
	update_field( document.getElementById( 'from_city_field' ), str_result, xml ) ;
}

function update_field( input_field, str_result, xml_result ) 
{
//alert(  str_result ) ;		
//alert(  cities.length ) ;

	//get cities-objects from xml-response
	var cities = xml_result.getElementsByTagName( 'city' ) ;
	

	
	var cur_dropdown_list_id = 'city_field_dropdown_list' ;
	cur_dropdown_list =  document.getElementById( cur_dropdown_list_id )
	cur_iframe = document.getElementById( cur_dropdown_list_id + '_iframe' )	
	cur_input_field = input_field ;
	
	//clear list
	delete_all_childs( cur_dropdown_list ) ;

	cur_dropdown_list.className = 'drop-down-list' ;
	//move needed div
	show_under( input_field, cur_dropdown_list, 'firstpage' ) ;
		
	cur_record = undefined ;
	
	//if we found nothing
	if ( 0 == cities.length )
	{
		hide_dropdown_list() ;
		//show that no cities where found
		//cur_dropdown_list.innerHTML = str_no_cities_found ;
		return ;//return 
	}
	else
	{
		//we have some cities: let's insert them
		for ( var i = 0 ; i < cities.length ; i++ )
		{
			var city = cities[i] ;
	
			var city_name    = city.getElementsByTagName( 'name' )[0].firstChild.data ;
			var city_code    = city.getElementsByTagName( 'code' )[0].firstChild.data ;
			var country_name = city.getElementsByTagName( 'country_name' )[0].firstChild.data ;
			
			var txtRepresentation = 
				'&raquo;' + city_code + ', <span class="thinner">' + city_name + '</span>' ;
			
			//city_code + ', ' + city_name ;//+', ' + country_name ;		
		
			var subdiv = document.createElement( 'div' ) ;		
			subdiv.innerHTML = txtRepresentation ;
			//txtNode = document.createTextNode( txtRepresentation ) ;
			//subdiv.appendChild( txtNode ) ;
			//subdiv.txtRepresentation = txtRepresentation ;
			subdiv.className   = 'mouse-over' ;
			add_event_handler( subdiv, 'mouseout', function(){ cur_record = undefined ; this.className = 'mouse-over' ; } ) ;
			add_event_handler( subdiv, 'mouseover', function(){if ( undefined != cur_record ) {cur_record.className = 'mouse-over' ;}cur_record=this; this.className = 'mouse-out' ; } ) ;
			
			add_event_handler( 
				  subdiv
				, 'click'
				, function() {exchange_cur(cur_record, this ) ;cur_input_field.focus() ; hide_dropdown_list() ;}
				) ;
	//alert( subdiv.outerHTML ) ;		
			cur_dropdown_list.appendChild( subdiv ) ;
			
			//if this is first element
			if ( undefined == cur_record )
			{
				//make first record current one
				cur_record = subdiv ;
				cur_record.className = 'mouse-out' ;
			}
		}
//alert( dropdown_div.innerHTML ) ;		
	}
	
	//old_keyup_handler = get_assigned_event_handler( input_field, 'keyup' ) ;
	
	is_enter_enabled = false ;
//alert( navigator.appName ) ;	
	if( navigator.appName == "Microsoft Internet Explorer" ) 
	{//show iframe under drop-down-list, so we close select-elements, IE6.0 bug
		show_under( input_field, cur_iframe ) ;
		cur_iframe.style.height = cur_dropdown_list.offsetHeight + 'px' ;
	}
}//function update_field

function hide_dropdown_list()
{
//	var e = window.event ;
//alert( e.type ) ;	
//alert('2');
	if ( undefined == cur_dropdown_list )
		return;
	//delete_all_childs( document.getElementById( cur_dropdown_list_id ) ) ;
	cur_dropdown_list.className = 'drop-down-list-hidden' ;
	cur_iframe.style.visibility = 'hidden' ;
	
	//remove_event_handler( cur_input_field, 'keyup'  ) ;	
	//remove_event_handler( cur_input_field, 'blur'   ) ;

	//alert( old_keyup_handler ) ;
	//add_event_handler( cur_input_field, 'keyup', old_keyup_handler ) ;
	
	cur_record           = undefined ;
	cur_dropdown_list    = undefined ;
	cur_iframe           = undefined ;
	//cur_input_field      = undefined ;
	
	is_enter_enabled = true ; 
}

function dropdown_list_key_handler( event )
{
//alert('1' ) ;
	if (!event )
		event = window.event ;
	if ( undefined == cur_dropdown_list || !event )
	{
//alert('no');	
		return true;
	}
//alert( event.keyCode ) ;	
	cur_input_field.focus() ;
	switch ( event.keyCode )
	{
		case 34: //pgdn
//		case 35://end-key
			exchange_cur( cur_record, cur_dropdown_list.lastChild ) ;
			break ;
		case 33: //pgup
//		case 36://home-key
			exchange_cur( cur_record, cur_dropdown_list.firstChild ) ;
			break ;
		case 40://down-key
			if ( undefined == cur_record )
				next_record = cur_dropdown_list.firstChild ;
			else
				next_record = cur_record.nextSibling ;
			
			exchange_cur( cur_record, next_record ) ;
			
			
			break ;
		case 27://esc
			hide_dropdown_list() ;
			break ;
		case 13://enter		
//alert( cur_record ) ;		
			exchange_cur( cur_record, cur_record ) ;
			if ( undefined != cur_record )//if we selected smth already
				hide_dropdown_list() ;
			
			break; 
		case 38://up-key
			if ( undefined == cur_record )
				next_record = cur_dropdown_list.lastChild ;
			else
				next_record = cur_record.previousSibling ;
			
			exchange_cur( cur_record, next_record ) ;
			
			break ;
		
	}
	
	return false ;
}

function exchange_cur( from, to )
{

	if ( undefined != from && undefined != to )
	{
//alert( 'exchanging ' + from.id + ' to ' + to.id ) ;	
//alert( from.innerHTML ) ;	
		from.className = 'mouse-over' ;
	}
	if ( undefined != to )
	{
		cur_record = to ;
		cur_input_field.value = to.innerHTML ;
		prev_entered_strs[cur_input_field.id] = to.innerHTML ;
		to.className = 'mouse-out' ;
//alert( to.innerHTML ) ;		
	}
}

function delete_all_childs( field )
{
//alert( 'deleting all childs: ' + field.id);
	field.innerHTML = '' ;
	return ;

	for ( i = 0 ; i < field.childNodes.length ; i++ )
		field.removeChild( field.childNodes[i] ) ;
}

function show_under( item_to_show_under, item_to_be_shown, final_field_id )
{
	var width = item_to_show_under.offsetWidth - 2 ;
	var left = find_offset( item_to_show_under, 'offsetLeft', final_field_id ) ;
	var top  = find_offset( item_to_show_under, 'offsetTop',  final_field_id ) + item_to_show_under.offsetHeight -1 ;
//alert( top ) ;
//alert('showing ' + dropdown_list.id);
//alert( dropdown_list.innerHTML ) ;
	
	item_to_be_shown.style.visibility = 'visible' ;
	item_to_be_shown.style.position = 'absolute' ;
	//dropdown_list.style.zindex='1000' ;
	
	item_to_be_shown.style.width = width + 'px' ;
	item_to_be_shown.style.left  = left + 'px' ;
	item_to_be_shown.style.top   = top  + 'px' ;
//alert( dropdown_list.className ) ;	
}

function find_offset( field, attr, final_field_id )
{
	//init global offset as 0
	var offset = 0 ;
	//while we can find parent-field
	while(
		    field
		&& ( field.id != final_field_id ) //and it's id is not final_id
		)
	{	
		//add it's offset to global-offset
		offset += field[attr] ;
		//make cur-element equalt to it's parent
		field = field.offsetParent ;
	}
	//return result
	return offset ;
}//find_offset

function init_cities_fields()
{
	if ( document.getElementById( 'from_city_field' ) )
	{
		var from_complete_field = 
			new CompleteField
				( 
						'from_city_field'
					,	'/find_departure_city.php'
					,	new Array()
					, 	'str'
					, 	get_html_city
					, 	get_str_city
				)
			;
	
		from_complete_field.input_field.focus() ;
	}
	if ( document.getElementById( 'to_city_field' ) )
	{
		var to_complete_field = 
			new CompleteField
				( 
						'to_city_field'
					,	'/find_arrive_city.php'
					,	new Array()
					, 	'str'
					, 	get_html_city
					, 	get_str_city
				)
			;	
		if ( !document.getElementById( 'from_city_field' ) )
			to_complete_field.input_field.focus() ;
	}
}//function init_cities_fields
function get_html_city( xml_city )
{
	var city_name    = xml_city.getElementsByTagName( 'name' )[0].firstChild.data ;
	var city_code    = xml_city.getElementsByTagName( 'code' )[0].firstChild.data ;
	var country_name = xml_city.getElementsByTagName( 'country_name' )[0].firstChild.data ;

	var html = '&raquo; ' + city_code + ', <span class="thinner">' + city_name + '</span>' ;
	return html ;
}
function get_str_city( xml_city )
{
	var city_name    = xml_city.getElementsByTagName( 'name' )[0].firstChild.data ;
	var city_code    = xml_city.getElementsByTagName( 'code' )[0].firstChild.data ;
	var country_name = xml_city.getElementsByTagName( 'country_name' )[0].firstChild.data ;
	
	var str = city_code + ', ' + city_name ;
	return str ;
}
window.onload=function(){ init_cities_fields() } ;