Airplane chooser

by techsin

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;amp;libraries=places"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/geocomplete/1.4/jquery.geocomplete.min.js"></script>
<form id='airplane' action="#">
    <div class="cont where">
    <div class="bar"></div>
    <strong>Where</strong>
    <label id="from"><span>From:</span><input type="text"></label>
    <label id="To"><span>To:</span><input type="text"></label>    
</div>

<div class="cont when">
    <div class="bar"></div>
    <strong>When</strong>
    <label id="from"><span>Leave:</span><input type="text"></label>
    <label id="flex1">
        <span>Flexiblity:</span>
        <select name="leflexibility" id="leflex">
            <option value="choose">choose..</option>
            <option value="1">1 +/- Days</option>
            <option value="3">3 +/- Days</option>
            <option value="6">6 +/- Days</option>
            <option value="100">even more..</option>
        </select>
    </label> 
    <label id="to"><span>Return:</span><input type="text"></label>   
    <label id="flex2">
        <span>Flexiblity:</span>
        <select name="reflexibility" id="reflex">
            <option value="">choose..</option>
            <option value="1">1 +/- Days</option>
            <option value="3">3 +/- Days</option>
            <option value="6">6 +/- Days</option>
            <option value="100">even more..</option>
        </select>
    </label> 
</div>

<div class="cont who">
    <div class="bar"></div>
    <strong>Who</strong>
    <label id="adults"><span>Adults:</span><input type="number" value=0 min=0></label>
    <label id="children"><span>Children:</span><input type="number" value=0 min=0></label>       
</div>

    
</form>

CSS

.cont {
    min-height: 100px;
    background-color: #eee;
    margin: 5px 0;
    overflow: auto;
    padding: 20px 0 5px 20px;
    position: relative;
}
.cont .bar {
    width: 100%;
    height: 10px;
    background-color: #ddd;
    position: absolute;
    top: 0;
    margin-left: -20px;
}

.cont:hover .bar {
    background-color: red;
}
.a { background-color: red !important; }
.green {background-color: green !important; }

label {
    display: block;
    margin: 10px 0;
}

label span {
    display: inline-block;
    min-width: 50px;
    padding-right: 10px;
    text-align: right;
}

.done {
    outline:none;
    border:0;
    padding: 3px;
    font-family: "open sans";
    padding-left: 10px;
}

JavaScript

$('#airplane select,#airplane input').focus(function(){
    $('#airplane  .bar').removeClass('a');
    var p = $(this).parents('.cont');
    p.find('.bar').addClass('a');
    p.find('input, select').removeClass('done');
}).blur(function(){
    var pr = $(this).parents('.cont');
    var p = pr.find('input, select');
    var bool = true;
    p.each(function(){
        if ($(this).val()=='') bool=false;
    });
    if (bool) {
        p.addClass('done');
        pr.find('.bar').addClass('green');
    } else pr.find('.bar').removeClass('green');
});

$('.when input').datepicker();
$('.where input').geocomplete();
$('.where input').eq(0).focus();