(function($){	
	
	$(function(){
	
		var boxWidth = 10 + 100;
		var currentBox;
		var currentRow;
		var currentCol;

		var gridWidth =	$('#container').width();
		var n = gridWidth / boxWidth;
		var numColumn = Math.floor(n);
		
		
		$('div.box:nth-child(' + numColumn + 'n)').addClass('lastBox');
		$('div.box:nth-child(' + numColumn + 'n + 1)').addClass('firstBox');
	
		$(window).resize(function() {

			      	$('div.box').removeClass('lastBox').removeClass('firstBox');
					var gridWidth =	$('#container').width();
					var n = gridWidth / boxWidth;
					var numColumn = Math.floor(n);

					$('div.box:nth-child(' + numColumn + 'n)').addClass('lastBox');
					$('div.box:nth-child(' + numColumn + 'n + 1)').addClass('firstBox');

		});
		

		$('#container').hover(
				  function () {
					$('#container .box').animate({opacity: '.25'}, {queue: false});
				 }, 
				  function () {	
					$('#container .box').animate({opacity: '1'}, {queue: false});
					$('#topIndicator-wrapper').animate({left: 0}, {queue: false});
					$('#leftIndicator-wrapper').animate({top: 100}, {queue: false});
					$('#leftIndicator-wrapper').css({position: 'fixed'});
				 }
		);		
		$('.box').hover(
				  function () {
					$('div.box').removeClass('lastBox').removeClass('firstBox');
					var gridWidth =	$('#container').width();
					var n = gridWidth / boxWidth;
					var numColumn = Math.floor(n);

					$('div.box:nth-child(' + numColumn + 'n)').addClass('lastBox');
					$('div.box:nth-child(' + numColumn + 'n + 1)').addClass('firstBox');
					
					currentBox = $(this).parent().children().index(this) + 1;
					r = currentBox / numColumn;
					currentRow = Math.ceil(r);
					currentCol = currentBox - numColumn*(currentRow-1);
					
					$('#topIndicator-wrapper').animate({left: 110*(currentCol-1)}, {queue: false});
					$('#leftIndicator-wrapper').animate({top: 10+110*(currentRow-1)}, {queue: false});	
					$('#leftIndicator-wrapper').css({position: 'relative'});			
					$(this).prevUntil("div.lastBox").animate({opacity: '.25'}, {queue: false});
					$(this).nextUntil("div.firstBox").animate({opacity: '.25'}, {queue: false});
					$('div.box:nth-child(' + numColumn + 'n + ' + currentCol +')').animate({opacity: '.25'}, {queue: false});
					$(this).animate({opacity: '1'}, {queue: false});
				 }, 
				  function () {	
					$('.box').animate({opacity: '.25'}, {queue: false});
				 }
		);

	
	}); // end of document ready
})(jQuery); // end of jQuery name space