old2.html

<script type="text/javascript" src="jquery.js"></script> 
<style>
html {
  margin-left: 150px;
  margin-top: 40px;
  background: #f2f2f2;
}
.ti {
  font-size: 80%;
  color: #666;
}
.st {
  font-weight: bold;
  text-transform: uppercase;
  font-size: 84%;
}
#a {
  padding: 10px;
  background: #fff  ;
  border: 1px solid #333;
  width:100px;
  text-align: center;
  cursor: pointer;
}
#a:hover {
  zcolor: #00bb00;
}
#b {
  display: none;
  height: 250px;
  overflow-y: auto;
  margin-top: 15px;
  margin-bottom: 20px;
  background: #fff;
}
.start {
  background: #3fbf3f;
  color: #fff;
}
#done {
  background: #3fbf3f;
  color: #fff;
  padding-left:3px;
  padding-right:3px;  
  display:none;
}
.mark {
  background:#FFFF99;
}
.step {
  font-size: 88%;
  padding-left:3px;
  padding-right: 3px;
}
</style>
<script>
var start = null;
var end = null;
var step = 60;

function on_mouseout(evt) {
  if (!start && !end) {
    $(this).css('background', '');
  }
}

function on_mouseover(evt) {
  if (start && end) {
    return;
  } else if (!start && !end) {
    $(this).css('background', '#eee');
    return;
  }
  $(".t").removeClass("mark");
  if (start == $(this).html())
    return;
  var cur = $(this).html();
  var stop = false;
  $(".start").nextAll(".t").each(function() {
    if (!stop)
      $(this).addClass("mark");
    if ($(this).html() == cur)
      stop = true;
  });
}

function gen_time_intervals() {
  $("#b").html('');
  $(".t").unbind('click');
  $(".t").unbind('mouseover');
  $(".t").unbind('mouseout');
  var pad2 = function(x) { 
    if (x < 10) x = '0' + x;
    return x + '';
  };
  for (var hr=0; hr <= 23; hr++) {
    var ampm = "AM";
    var h = hr;
    if (h >= 12) {
      ampm = "PM";
      if (h > 12) h -= 12;
    }
    if (h == 0)
      h = 12;
    for (var min=0; min < 60; min += step) {
      var t = h + ':' + pad2(min) + ' ' + ampm;
      $("#b").append("<div class='t'>" + t + "</div>");
    }
  }
  $(".t").click(t_click);
  $(".t").mouseover(on_mouseover);
  $(".t").mouseout(on_mouseout);
}

function t_click() {
  if ($(this).html() == start) {
    start = null;
    $(this).removeClass("start");
    return;
  }
  if (!start) {
    start = $(this).html();
    $(this).css('background', '');
    $(this).addClass("start");
    //$(this).prevAll(".t").hide();//slideUp('fast');
  } else if (!end) {
    if ($(this).hasClass("mark"))
      $(this).removeClass("mark");
    end = $(this).html();
    $(this).addClass("start");
    //setTimeout(hide_b, 400);
  }
}

function hide_b() {
  $('#b').hide();
  start = end = null;
  $(".t").removeClass("mark");
  $(".t").removeClass("start");
  $(".t").unbind('mouseover');
  $(".t").unbind('mouseout');
  $("#done").hide();
}

function show_b() {
  $('#b').show();
  $(".t").show();
  $(".t").mouseover(on_mouseover);
  $(".t").mouseout(on_mouseout);
  $("#done").show();
}

function startup() {
  $("#done").click(hide_b);
  $("#a").mouseover(show_b);
  //$('#a').hover(show_b, hide_b);
  $(".t").click(t_click);
  $(".step").hover(
    function() { 
      if (!$(this).hasClass("start"))
        $(this).css("background", "#eee"); 
    },
    function() { $(this).css("background", ""); }
  );
  $(".step").click(function() {
    $(this).css("background", "");
    $(".step").removeClass("start");
    $(this).addClass("start");
    start = end = null
    step = parseInt($(this).html());
    gen_time_intervals();
  });
  gen_time_intervals();
}
$(document).ready(startup);
</script>

<div id="a">
  <div class="st">select time</div>
  <div class="ti">Intervals</div>
  <span class="step" title="Generate Times with 15 minute intervals">15</span>
  <span class="step" title="Generate Times with 30 minute intervals">30</span>
  <span class="step" title="Generate Times with 45 minute intervals">45</span>
  <span class="step start" title="Generate Times with 1 hour intervals">60</span>  
  <div id="b">
  </div>
  <div id="done">Done</div>
</div>