$(document).ready(function(){


// MENU top
// ========================================================= */
// uses bgposition.js


	$('')
		.css( {backgroundPosition: "0 0"} )
		.mouseover(function(){
			$(this).stop().animate({backgroundPosition:"(-150px 0)"}, {duration:500})
		})
		.mouseout(function(){
			$(this).stop().animate({backgroundPosition:"(-300px 0)"}, {duration:200, complete:function(){
				$(this).css({backgroundPosition: "0 0"})
			}})
		})



// SHOWCASE products
// ========================================================= */
// uses innerfade.js


	$('ul#portfolio').innerfade({
		speed: 900, // speed in miliseconds - decrease for faster animation / 1000 default
		timeout: 5000,
		type: 'random',
		containerheight: '350px'
	})



// MENU - three products
// ========================================================= */
// uses jquery.js


	$(".menu_products a").hover(function() {
		$(this).next("em").animate({opacity: "show", top: "205"}, "slow");
	}, function() {
		$(this).next("em").animate({opacity: "hide", top: "210"}, "fast");
	})



// FADE Images throughout site
// ========================================================= */
// uses innerfade.js


// Fade images in
	$(".fade_in").fadeTo("fast", 0.5); // This sets the opacity of the thumbs to fade down to 50% when the page loads
	$(".fade_in").hover(function(){
		$(this).fadeTo("fast", 1.0); // This should set the opacity to 100% on hover
	},function(){
		$(this).fadeTo("fast", 0.5); // This should set the opacity back to 50% on mouseout
	})


// Fade images in
	$(".menu-top a").fadeTo("fast", 0.6); // This sets the opacity of the thumbs to fade down to 60% when the page loads
	$(".menu-top a").hover(function(){
		$(this).fadeTo("fast", 1.0); // This should set the opacity to 100% on hover
	},function(){
		$(this).fadeTo("fast", 0.6); // This should set the opacity back to 60% on mouseout
	})


// Fade images in - Portfolio rollover
	$(".imgborder").fadeTo("fast", 0.6); // This sets the opacity of the thumbs to fade down to 60% when the page loads
	$(".imgborder").hover(function(){
		$(this).fadeTo("fast", 1.0); // This should set the opacity to 100% on hover
	},function(){
		$(this).fadeTo("fast", 0.6); // This should set the opacity back to 60% on mouseout
	})


// Fade images out
	$(".fade_out").fadeTo("fast", 1.0); // This sets the opacity of the thumbs to 100% when the page loads
	$(".fade_out").hover(function(){
		$(this).fadeTo("fast", 0.3); // This should set the opacity to 30% on hover
	},function(){
		$(this).fadeTo("fast", 1.0); // This should set the opacity back to 100% on mouseout
	})
	


// BACKGROUND positioning

// ========================================================= */
// uses bgposition.js
//		easing.js
//		slider.js


	$('.nav-slide-product1 a')
		.css( {backgroundPosition: "0 0"} )
		.mouseover(function(){
			$(this).stop().animate({backgroundPosition:"(150px 0)"}, {duration:500, easing: "easeOutExpo"})
		})
		.mouseout(function(){
			$(this).stop().animate({backgroundPosition:"(-150px 0)"}, {duration:250, easing: "easeOutExpo", complete:function(){
				$(this).css({backgroundPosition: "0 0"})
		}})


});
});