// require jQuery

var speed = 800;
var masonryParams = {
	animate: true,
	itemSelector: 'li:not(.hidden)',
	animationOptions: {
		duration: speed,
		easing: 'easeOutQuad',
		queue: false
	},
	columnWidth: 176
};

/* ------------------------------------------ */

jQuery(document).ready(function() {
	var wall = jQuery("#recruitment");
	var spaceBar = jQuery("#recruitment_width");
	jQuery("#recruitment").css("width", "auto");
	function spaceBarResize() {
		var contentsWidth = wall.width();
		var spaceBarWidth = (Math.floor(contentsWidth / masonryParams.columnWidth) - 1) * masonryParams.columnWidth;
		spaceBar.width(spaceBarWidth);
	}
	jQuery(window).resize(function() {
		spaceBarResize();
	});
	spaceBarResize();
	wall.masonry(masonryParams);

	// grid rayout mouseover
	jQuery("#recruitment a").each(function() {
		jQuery(this).hover(function() {
			var target = jQuery(this);
			jQuery(this).css({
				"display": "block",
				"background-color": "#333333"
			}).find("img").css("opacity", "0.4").animate({
				"opacity": "0.8"
			}, {
				"duration": 800,
				"easing": "easeOutQuad"
			});
		}, function() {
			jQuery(this).css({
				"display": "inline",
				"background-color": "transparent"
			}).find("img").stop().css("opacity", "1.0");
		});
	});
});