// CUSTOM SIZED BOXES -Alex:
/* 	
	Have class="box"
	Specify the width in the 'title' attribute
	Add extra styling for the content via the '.box-content' div in boxes.css
	(not the '.box' div)
	
	Modify backgrounds from CSS and have: 
		box-corners
		box-rx
		box-ry
	images. 
	
	A corner should be 5x5 px.
	Sides should be 1x3 px, 3x1 px respectively.
		Otherwise modify in CSS.
*/
$(document).ready(function() {
	$('.box').each(function() {
		var html  = $(this).html();
		var width = parseInt($(this).attr('title'));
		$(this).attr('title', '');
		$(this).attr('width', width);
		
		var newHtml = '';
		// Header:
		newHtml += '<div class="header clearfix">';
		newHtml += '<div class="cl">&nbsp;</div>';
		newHtml += '	<div class="m" style="width: ' + (width-10) + 'px">&nbsp;</div>';
		newHtml += '	<div class="cr">&nbsp;</div>';
		newHtml += '</div>';
		// Content:
		newHtml += '<div class="content clearfix">';
		newHtml += '	<div class="lc" style="width: ' + (width-3) + 'px">';
		newHtml += '		<div class="box-content clearfix">';
		newHtml += html;
		newHtml += '		</div>';
		newHtml += '	</div>';
		newHtml += '	<div class="rc">&nbsp;</div>';
		newHtml += '</div>';
		// Footer:
		newHtml += '<div class="footer clearfix">';
		newHtml += '	<div class="cl">&nbsp;</div>';
		newHtml += '	<div class="m" style="width: ' + (width-10) + 'px">&nbsp;</div>';
		newHtml += '	<div class="cr">&nbsp;</div>';
		newHtml += '</div>';
		
		$(this).html(newHtml);
		$(this).find('.rc').height($(this).find('.lc').height());
	});
	// Boxes that need to match height:
	var boxMaxHeightRC = 0;
	var boxMaxHeightBC = 0;
	$(".box.matchHeight").each(function() {
		if($(this).find('.rc').height() > boxMaxHeightRC)
			boxMaxHeightRC = $(this).find('.rc').height();
		if($(this).find('.box-content').height() > boxMaxHeightBC)
			boxMaxHeightBC = $(this).find('.box-content').height();
	});
	$(".box.matchHeight").find('.rc').height(boxMaxHeightRC);
	$(".box.matchHeight").find('.box-content').height(boxMaxHeightBC);
});