function swapCities(){
	
	$( '#citiesSelf' ).html( $( '#city_id option:selected' ).text() + ', ' );
	$( '#provinceSelf' ).html( $( '#province_id option:selected' ).text() );
	showCities( false );
}

function showCities( state, url ){
	
	if( state ){
		
		$( '#citiesSelf' ).hide();
		$( '#provinceSelf' ).hide();
		$( '#citiesList' ).show();
		$( '#provinceList' ).show();
		
		if( $( '#city_id option').length == 0 ){ swapProvinces( url ); }
	}
	else{
		
		$( '#citiesSelf' ).show();
		$( '#provinceSelf' ).show();
		$( '#citiesList' ).hide();
		$( '#provinceList' ).hide();
	}
}

function swapProvinces( url ){
  
  $( '#citiesList' ).hide();
  $( '#loadingCities' ).show();
  
  var id = $( '#province_id option:selected' ).val();
  
  if( id != '' ){
	  
	   $( '#province_id' ).attr( 'disabled', true );
	  $.post( url, {id:id}, function( data ){ responseHandler( data ); }, 'xml' );
  }
  else{ alert( 'ERROR!' ); }

}

function responseHandler( xml ){

  var error = $( xml ).find( 'error' ).text();
  cnt = 0;
   
   if( error == '' ){
   
      $( '#city_id option').remove();
	  
	  $( xml ).find( 'item' ).each( function(){
											 
											    var id = $(this).find( 'id' ).text();
												var name = $(this).find( 'name' ).text();
												
												if( id != '' && name != '' ){ 
												  
												  $( '#city_id' ).append( '<option value="' + id + '">' + name + '</option>' );
												  //var txt = '<option value="' + id + '">' + name + '</option>';
												  //$(txt).appendTo( '#city_id' );
												} 
											 
											 });
   
   
 }  
 $( '#loadingCities' ).hide();   
 $( '#citiesList' ).show();
 $( '#province_id' ).attr( 'disabled', false );
}

function start(){
  $( '#provinceSelf' ).html( $( '#province_id option:selected' ).text() );
}