$(document).ready(function(){
	//To switch directions up/down and left/right just place a "-" in front of the top/left attribute
	//Vertical Sliding
	$('.boxgrid.slidedown').hover(function(){
		$(".cover", this).stop().animate({top:'-260px'},{queue:false,duration:300});
	}, function() {
		$(".cover", this).stop().animate({top:'0px'},{queue:false,duration:300});
	});
	//Horizontal Sliding
	$('.boxgrid.slideright').hover(function(){
		$(".cover", this).stop().animate({left:'325px'},{queue:false,duration:300});
	}, function() {
		$(".cover", this).stop().animate({left:'0px'},{queue:false,duration:300});
	});
	//Diagnal Sliding
	$('.boxgrid.thecombo').hover(function(){
		$(".cover", this).stop().animate({top:'260px', left:'325px'},{queue:false,duration:300});
	}, function() {
		$(".cover", this).stop().animate({top:'0px', left:'0px'},{queue:false,duration:300});
	});
	//Partial Sliding (Only show some of background)
	$('.boxgrid.peek').hover(function(){
		$(".cover", this).stop().animate({top:'90px'},{queue:false,duration:160});
	}, function() {
		$(".cover", this).stop().animate({top:'0px'},{queue:false,duration:160});
	});
	//Full Caption Sliding (Hidden to Visible)
	$('.boxgrid.captionfull').hover(function(){
		$(".cover", this).stop().animate({top:'060px'},{queue:false,duration:160});
	}, function() {
		$(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160});
	});
	//Caption Sliding (Partially Hidden to Visible)
	$('.boxgrid.caption').hover(function(){
		$(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160});
	}, function() {
		$(".cover", this).stop().animate({top:'220px'},{queue:false,duration:160});
	});
	
	$('.automargin').each(function (nodeCounter){				
		var node = $(this);
		node.css('padding', 0);
		var width = node.width();
		var children = node.children('div');
		var childrenWidth = 0;
		var childrenInARow = children.length;
		
		var whiteWidth = -1;
		
		while (whiteWidth < 0)
		{
			childrenWidth = 0;		
		
			for (var i = 0; i<childrenInARow; i++)
			{
				childrenWidth += $(children[i]).width() + Number($(children[i]).css('border-left-width').replace('px', '')) + Number($(children[i]).css('border-right-width').replace('px', ''));
			}
			
			var whiteWidth = width - childrenWidth;
			var margin = Math.floor(whiteWidth/(childrenInARow - 1));
			
			childrenInARow -= 1;		
		}
		
		childrenInARow += 1;
		
		/*
		alert(width);
		alert(childrenWidth);
		alert(whiteWidth);
		alert(margin);		
		*/
		
		widthCount = 0;
		
		for (var i = 0; i<children.length; i++)
		{
			$(children[i]).css('padding', 0);
			
			if (i % (childrenInARow) == 0)
			{			
				widthCount = 0;			
				$(children[i]).css({'margin-left': 0, 'margin-right': margin+'px'});
				widthCount += $(children[i]).width() + margin;			
			}
			else if ((i % childrenInARow) == (childrenInARow - 1))
			{
				$(children[i]).css({'margin-left': 0, 'margin-right': 0});
				widthCount += $(children[i]).width();							
			}
			else if ((i % childrenInARow) == (childrenInARow - 2))
			{
				$(children[i]).css({'margin-left': 0, 'margin-right': margin+'px'});
				widthCount += $(children[i]).width() + margin;					
			}
			else
			{
				$(children[i]).css({'margin-left': 0, 'margin-right': margin+'px'});
				widthCount += $(children[i]).width() + margin;					
			}
			//$(children[i]).css('border', '1px solid green');			
		}	
		
		//$(this).css('border', '1px solid green');
	});
	
});