$(document).ready(function() {
    createSearchHints();
    $('#searchbox').autocomplete({
        url: '../proc/city-autocomp.php',
        useCache: false,
        onItemSelect: function(item) {
            $('#searchbox').val(item.value);
        }
    }); 
});
function createSearchHints() {
    if(document.getElementById('searchbox')) {
        document.getElementById('searchbox').style.color = '#ccc';
        document.getElementById('searchbox').value = 'City, State, or Zip';
    }
    
    if(document.getElementById('start-city')) {
        document.getElementById('start-city').style.color = '#ccc';
        document.getElementById('start-city').value = 'City';
    }
    
    if(document.getElementById('start-state')) {
        document.getElementById('start-state').style.color = '#ccc';
        document.getElementById('start-state').value = 'State';
    }
    
    if(document.getElementById('start-zipcode')) {
        document.getElementById('start-zipcode').style.color = '#ccc';
        document.getElementById('start-zipcode').value = 'Zip Code';
    }
}
function clearSearchbox() {
    if(document.getElementById('searchbox').value == 'City, State, or Zip') {
        document.getElementById('searchbox').style.color = '#000';
        document.getElementById('searchbox').value = '';
    }
}
function clearInput(inputBox) {
    if(inputBox.id == "start-city" && inputBox.value == "City") {
        inputBox.style.color = '#000';
        inputBox.value = '';
    } else if(inputBox.id == "start-state" && inputBox.value == "State") {
        inputBox.style.color = '#000';
        inputBox.value = '';
    } else if(inputBox.id == "start-zipcode" && inputBox.value == "Zip Code") {
        inputBox.style.color = '#000';
        inputBox.value = '';
    } else if(inputBox.id == "searchbox" && inputBox.value == "City, State, or Zip") {
        inputBox.style.color = '#000';
        inputBox.value = '';
    }
}