$(document).ready(function () {

		//loop through all the children in #items
		//save title value to a span and then remove the value of the title to avoid tooltips
		$('#items .item').each(function () {
			title = $(this).attr('title');
			description = $(this).attr('description');
			$(this).append('<div class="caption"><h3>' + title + '</h3></div>');	
			$(this).attr('title','');
		});

		/*$('#items .item').children('.caption').hover(
			function () {
				$(this).addClass('effectWhite');
				$(this).css({'background':'#FFFFFF'});

			}
		)
		
		$('#items .item').children('.caption').mouseleave(function () {
			//reset all the opacity to full and remove effect class
			$(this).removeClass('effectWhite');
			//$(this).show();
			//$(this).children('.caption')..removeClass('effectWhite');		
			$(this).css({'background':'none'});
		});*/
		
		$('#items .item').hover(
			function () {
				//set the opacity of all siblings
				//$(this).siblings().css({'opacity': '0.1'});	
				
				//set the opacity of current item to full, and add the effect class
					$(this).css({'opacity': '0.5'}).addClass('effect');
				/*$(this).children('.caption').css({'opacity': '0'});*/
				//$(this).children('.caption').fadeTo('500', '0.9');
				$(this).children('.caption').css({'background':'none'});
				//$(this).siblings().children('.caption').fadeTo('100','0.9');
				//show the caption

				//$(this).children('.caption').css({'opacity': '0.9'});


			},		
			function () {
				//hide the caption
				/*$(this).children('.caption').hide();		*/
			}
		);
		
				$('#items .item').mouseleave(function () {
					$(this).css({'opacity': '1.0'}).removeClass('effect');
									$(this).children('.caption').css({'background':'#FFFFFF'});

				});
				
				$('#items .item').click(function () {
					$(this).css({'opacity': '1.0'}).removeClass('effect');
					$(this).siblings().fadeTo('100','0.1');

				});

		
		$('#items').mouseleave(function () {
			//reset all the opacity to full and remove effect class
			$(this).children().removeClass('effect').children('.caption').removeClass('effectWhite').show();	
			//$(this).children('.caption')..removeClass('effectWhite');		
			$(this).children().children('.caption').css({'background':'#FFFFFF'});
		});
		
	});