// JavaScript Document

if (screen.width>1200) {
	var smallCorner = 65;
	var smallHeight = 75;
	var smallWidth = 130;
	var largeCorner = 318;
	var largeHeight = 232;
	var largeWidth = 636;
} else {
	var smallCorner = 50;
	var smallHeight = 57;
	var smallWidth = 100;
	var largeCorner = 268;
	var largeHeight = 215;
	var largeWidth = 536;
}

	var shrinkBox = function() {
		// remove class grown, as part of the growbox function uses it as a selector //
		$(this).removeClass('grown');
		// remove the event shrinkBox, add the event growBox //
		$(this).unbind("click").click(growBox);
		// perform the actual shrinkage animation //
		$(this).children('.corner').animate({'width': smallCorner + 'px'},275);
		$(this).animate({'width': smallWidth + 'px', 'marginTop': '0'},275);		
		$(this).children('.content').animate({'height': smallHeight + 'px'},275);
		$(this).children('.content').children('.innerBox').animate({'marginTop': smallCorner + 'px'},275);
	};
	var growBox = function() {
		// remove the growBox function, as the box is already grown //
		$(this).unbind("click");
		// shrink the existing large box in order to make space for the new box to grow //
		$('.grown').not(this).click(shrinkBox).trigger('click');
		// perform the actual grown animation //
		$(this).animate({'width': largeWidth + 'px', 'marginTop': '-158px'}, 275);		
		$(this).children('.corner').animate({'width': largeCorner + 'px'},275);
		$(this).children('.content').animate({'height': largeHeight + 'px'},275);
		$(this).children('.content').children('.innerBox').animate({'marginTop': '4px'},275);
		// add class grown so the next time a box is clicked the script can identify the current large box //
		$(this).addClass('grown');
	};