// JavaScript Document
$(document).ready(function() {


var easingType = 'easeOutQuint';

function solidState()
{
		  $("#cell1").animate({"left": "0px"}, {queue: false, easing: easingType});
        $("#cell2").animate({"left": "351px"}, {queue: false, easing: easingType});
        $("#cell3").animate({"left": "702px"}, {queue: false, easing: easingType});
	
	
}


function cell1Hover()
{
	        $("#cell1").animate({"left": "0px"}, {queue: false, easing: easingType});
        $("#cell2").animate({"left": "789px"}, {queue: false, easing: easingType});
        $("#cell3").animate({"left": "921px"}, {queue: false, easing: easingType});
	
	
}

function cell2Hover()
{
	    $("#cell1").animate({"left": "0px"}, {queue: false, easing: easingType});
        $("#cell2").animate({"left": "132px"}, {queue: false, easing: easingType});
        $("#cell3").animate({"left": "921px"}, {queue: false, easing: easingType});
	
}

function cell3Hover()
{
	  $("#cell1").animate({"left": "0px"}, {queue: false, easing: easingType});
        $("#cell2").animate({"left": "132px"}, {queue: false, easing: easingType});
        $("#cell3").animate({"left": "264px"}, {queue: false, easing: easingType});
		
}


function cell4Hover()
{
	        $("#cell4").animate({"top": "-336px"}, {queue: false, easing: easingType});
        $("#cell5").animate({"top": "-336px"}, {queue: false, easing: easingType});
        $("#cell6").animate({"top": "0px"}, {queue: false, easing: easingType});

	
	
}

function cell5Hover()
{
	
        $("#cell5").animate({"top": "0px"}, {queue: false, easing: easingType});
		  $("#cell4").animate({"top": "0px"}, {queue: false, easing: easingType});
        $("#cell6").animate({"top": "0px"}, {queue: false, easing: easingType});

}

function cell6Hover()
{
	
        $("#cell6").animate({"top": "-336px"}, {queue: false, easing: easingType});
		  $("#cell4").animate({"top": "0px"}, {queue: false, easing: easingType});
        $("#cell5").animate({"top": "-336px"}, {queue: false, easing: easingType});

	
}

   $("#cell1").hover(cell1Hover, solidState);
  $("#cell2").hover(cell2Hover, solidState);
   $("#cell3").hover(cell3Hover, solidState);
     $("#cell4Hover").bind('mouseenter', cell4Hover); //.hover is not used because of flickering problems in Firefox, chrome, safari
  $("#cell5Hover").bind('mouseenter', cell5Hover);
   $("#cell6Hover").bind('mouseenter', cell6Hover);
});