$(document).ready(function() {

    $('.slider_bar').slider({
        handle: '.slider_handle', 
		startValue: $('#age').val(),
		min: 0,
		max: 85,
        start: function(e, ui) { 
            $('#slider_callout').fadeIn('fast');
        }, 
        stop: function(e, ui) { 
			$('#slider_callout').css('left', ui.handle.position().left - 6).text(Math.round(ui.value)); 
			$('#age').val(Math.round(ui.value));
			window.setTimeout(function() { 
				$('#slider_callout').fadeOut('fast'); 
			}, 1500);
        },
        slide: function(e, ui) { 
            $('#slider_callout').show().css('left', ui.handle.position().left - 6).text(Math.round(ui.value)); 
			$('.slider_fill').width(ui.handle.position().left + 6);
		}
    });

	// Moves the slider fill over when the page loads, this is a bit of a hack
	// but is less intrusive than trying to re-write the slider object
	$('.slider_fill').width($('.slider_handle').position().left + 6)

});