$(document).ready(function(){
    $('#js_country').live('change',function(){
    	$('#js_location').val('');
	    $('#js_cityId').val('');
    	
    	$('#js_stateList').find('#js_state').html('').load('/autocomplete.html?do=state_list&countryId=' + $('#js_country').val());
    });	
	   
   $('#js_state').live('change', function(){
	  $('#js_location').val('');
	  $('#js_cityId').val('');
   });
   
   
   $('#js_location').live('keyup', function(event){
       var fragment = $(this).val();
      // var key = event.keyCode; //40-up, 38-down
        
       $.post('/autocomplete',
    		  {
    	       'do':'find_city',
    	       'countryId': $('#js_country').val(),
    	       'stateId': $('#js_state').val(),
    	       'fragment': fragment
    	      },
    	      function(data) {
    	    	  if(data == null) {
    	    		  $("#js_city_list").html('').hide();
    	    		  return false; 
    	    	  }    	          
    	    	      	    	  
    	    	  var count= 0;
    	    	  var list_div = '<div id="js_city_list" class="city_list"><ul>';
    	    	  for(var i in data) {
    	    		  ++count;
    	    		  list_div += '<li><a class="js_city_in_list" href="javascript:void(0);" rel="' + i + '">' + data[i] + "</a></li>";
    	    	  }	  
    	    	  list_div += '</ul></div>';
    	    	  
    	          $('#js_city_list').replaceWith(list_div);
    	          if (count > 3) {
    	        	  $('#js_city_list').css('overflow-y', 'scroll');
    	          }
    	      }, 
    	      'json');
   });
   
   $('.js_city_in_list').live('click', function(){
	   $('#js_location').text('').val($(this).text());
   
	   $('#js_cityId').val($(this).attr('rel'));
	   
	   $("#js_city_list").html('').hide();
   });
   
});