$(document).ready(function() {

	//Transition you want :)
	var easing_type = 'easeOutBounce';
	
	//The default height for the dock (on mouse out)
	var default_dock_height = '70';
	
	//Expanded height, the height of the dock on mouse over, you have to set it in CSS
	//var expanded_dock_height = $('#dock').height();
	
	//Fake body height
	var body_height = $(window).height() - default_dock_height;
	
	//Set the size of #fake_body
	$('#content').height(body_height);
	
	//Set the CSS attribute for #dock
	$('#dock').css({'height': default_dock_height, 'position':'absolute', 'top': body_height});
	
	//In case the user resize the browser, we will need to recalculate the height and top for #fake_body and #dock
	$(window).resize(function () {
		
		//Grab the updated height/top
		updated_height = $(window).height() - default_dock_height;
		
		//Set the updated height for #fake_body and top for #dock
		$('#content').height(updated_height);		
		$('#dock').css({'top': updated_height});
	});
		
	
	//surlignage
	
	
	//The main event for the dock bottom menu
	$('#dock').mouseover(function () {
		
		//Recalculate expanded height (always get the latest height), in case user has resized the window
		//expanded_height = $(window).height() - expanded_dock_height;
	
		//Animate the height change, set the height to expanded_dock_height and set the top value as well
		//$(this).animate({'height':expanded_dock_height,'top': expanded_height},{queue:false, duration:800, easing: easing_type});
		
	}).mouseout(function () {
		
		//Recalculate default body height (always get the latest height), in case user has resized the window
		body_height = $(window).height() - default_dock_height;
		
		//Animate the height change, set the height to default_dock-height and set the top value as well
		$(this).animate({'height':default_dock_height,'bottom': body_height},{queue:false, duration:800, easing: easing_type});
		
	});
	
});