$(window).load(function(){
	var spotlight = {
		 // the opacity of the "transparent" images - change it if you like
		opacity : 1,

		/*the vars bellow are for width and height of the images so we can make
		the <li> same size */
		imgWidth : $('.main_content ul li').find('img').width(),
		imgHeight : $('.main_content ul li').find('img').height()

	};

	//set the width and height of the list items same as the images
	$('.main_content ul li').css({ 'width' : spotlight.imgWidth, 'height' : spotlight.imgHeight });

	//when mouse over the list item...
	$('.main_content ul li').hover(function(){

		//...find the image inside of it and add active class to it and change opacity to 1 (no transparency)
		$(this).find('img').addClass('active').animate({ 'opacity' : 0.4}, 200);;

		//get the other list items and change the opacity of the images inside it to the one we have set in the spotlight array
		$(this).siblings('li').find('img').animate({ 'opacity' : spotlight.opacity}, 200) ;

		//when mouse leave...
	}, function(){

		//... find the image inside of the list item we just left and remove the active class
		$(this).find('img').removeClass('active');

	});

	//when mouse leaves the unordered list...
	$('.main_content ul').bind('mouseleave',function(){
		//find the images and change the opacity to 1 (fully visible)
		$(this).find('img') .animate({ 'opacity' : 1}, 50);
	});


});