$(document).ready(function(){
 
//Larger thumbnail preview 
 


$("#navigation span").hover(function() {
	var buttonwidth=$(this).find("#nav_botton").width();
	$(this).find('#button_mask').addClass("hover").stop()
		.animate({
			width: buttonwidth+5,
			opacity:1
		}, 200);
	
	} , function() {
	$(this).find('#button_mask').removeClass("hover").stop()
		.animate({
			marginTop:'5px',	 
			height: '0px',
			opacity:0
		}, 400).animate({
			height: '20px',
			width: '0px',
			marginTop:'-5px'
		}, 1);
});

$("#subnavigation span").hover(function() {
	var buttonwidth=$(this).find("#nav_botton").width();
	$(this).find('#button_mask').addClass("hover").stop()
		.animate({
			width: buttonwidth+5,
			opacity:1
		}, 200);
	
	} , function() {
	$(this).find('#button_mask').removeClass("hover").stop()
		.animate({
			marginTop:'5px',	 
			height: '0px',
			opacity:0
		}, 400).animate({
			height: '20px',
			width: '0px',
			marginTop:'-5px'
		}, 1);
});

$("#navigationb span").hover(function() {
	var buttonwidth=$(this).find("#nav_botton").width();
	$(this).find('#button_mask').addClass("hover").stop()
		.animate({
			width: buttonwidth+5,
			opacity:1
		}, 200);
	
	} , function() {
	$(this).find('#button_mask').removeClass("hover").stop()
		.animate({
			marginTop:'5px',	 
			height: '0px',
			opacity:0
		}, 400).animate({
			height: '20px',
			width: '0px',
			marginTop:'-5px'
		}, 1);
});

$("#subnavigation span").hover(function() {
	var buttonwidth=$(this).find("#nav_botton").width();
	$(this).find('#button_mask').addClass("hover").stop()
		.animate({
			width: buttonwidth+5,
			opacity:1
		}, 200);
	
	} , function() {
	$(this).find('#button_mask').removeClass("hover").stop()
		.animate({
			marginTop:'5px',	 
			height: '0px',
			opacity:0
		}, 400).animate({
			height: '20px',
			width: '0px',
			marginTop:'-5px'
		}, 1);
});
 
});