/* 
	less grid v4.0 - For Less Framework 4.
	(c) Arnau March http://arnaumarch.com/en/lessgrid.html, freely distributable under the terms of the MIT license.
*/

$(document).ready(function() {
	createSwitch();
});

function createGrid () {
	$('body').append('<div id="less-grid"></div>');
	var pageWidth = $('body').width();
	//var pageWidth = $('body').children(':first').width();   
	//If you don't set body width, uncomment this
	//var pageLeft = ($('body').width() - pageWidth) / 2;	  
	//If you don't set body width, uncomment this
	$('#less-grid').css({ 
							width: pageWidth,
							position: "absolute",
							top: "0",
							bottom: "0",
							zIndex: 900,
							//left: pageLeft 
							//If you don't set body width, uncomment this
	});
	var colWidth = 68;
	var colSep = 24;
	var colCount = 1;
	for(colLeft=0;colLeft<=pageWidth;colLeft=(colWidth+colSep)*(colCount-1)){
		$('#less-grid').append('<span class="col col-'+colCount+'">&nbsp;col:&nbsp;'
		+colCount+'<br/>&nbsp;w:&nbsp;'+(((colWidth+colSep)*colCount)-colSep)+'</span>'); 
		$('#less-grid .col-'+colCount).css({ 
								width: colWidth,
								position: "absolute",
								top: "0",
								left: colLeft,
								bottom: "0",
								//background: "#3d5fa3",
								background: "#202634",
								opacity: 0.5,
								//color: "#fff",
								color: "#E3F1F4",
								fontSize: "13px",
								paddingTop: "33px"
		});
		colCount++;
	};
}

function createSwitch () {
	$('body').append('<span id="less-grid-switch">grid</span>');
	$('#less-grid-switch').css({ 
							position: "fixed",
							top: "0",
							left: "0",
							background: "#202634",
							border: "0px solid #fff",
							borderTop: 0,
							color: "#E3F1F4",
							fontSize: "13px",
							lineHeight: "13px",
							padding: "2px 8px 6px 8px",
							cursor: "pointer",
							"border-radius": "0 0 5px 5px",
							"-moz-border-radius": "0 0 5px 5px",
							zIndex: 1000
							
	});
	$('#less-grid-switch').toggle(function() {
		$(this).text("x");
		$('#less-grid').show();
		$(this).attr('rel','on');
		$('#less-grid').remove();
		createGrid();	
	}, function() {
		$(this).text('grid');
		$('#less-grid').hide();
		$(this).attr('rel','off');
	});
	
}

$(function(){
	$(window).resize(function(){
		if($('#less-grid-switch').attr('rel')=="on") {
			$('#less-grid').remove();
			createGrid();
		}
	 });
});