$(document).ready(function(){
	var columnWidthInput = $('input#columnWidth');
	var gutterWidthInput = $('input#gutterWidth');
	var columnCountInput = $('input#columnCount');
	
	columnCountInput.keyup(function(event){
		if (event.keyCode == 38) {
			$(this).val(columnCount() + 1);
		}
		if (event.keyCode == 40) {
			$(this).val(columnCount() - 1);
		}
		
		if ($(this).val() == '') {
			// Do nothing
		} else if (isNaN(parseInt($(this).val()))){
			$(this).val(16);
			$(this).parents('span').addClass('error');
		} else if ($(this).val() > 16) {
			$(this).val(16);
			$(this).parents('span').addClass('error');
		} else if ($(this).val() < 0) {
			$(this).val(0);
			$(this).parents('span').addClass('error');
		}
		
		else {
			$(this).parents('span').removeClass('error');
			update();	
		}
	});
	columnWidthInput.keyup(function(event){
		if (event.keyCode == 38) {
			$(this).val(columnWidth() + 1);
		}
		if (event.keyCode == 40) {
			$(this).val(columnWidth() - 1);
		}
		
		if ($(this).val() == '') {
			// Do nothing
		} else if (isNaN(parseInt($(this).val()))){
			$(this).val(40);
			$(this).parents('span').addClass('error');
		} else {
			$(this).parents('span').removeClass('error');
			update();
		}
	});
	gutterWidthInput.keyup(function(event){
		if (event.keyCode == 38) {
			$(this).val(gutterWidth() + 1);
		}
		if (event.keyCode == 40) {
			$(this).val(gutterWidth() - 1);
		}
		
		if ($(this).val() == '') {
			// Do nothing
		} else if (isNaN(parseInt($(this).val()))){
			$(this).val(20);
			$(this).parents('span').addClass('error');
		} else {
			$(this).parents('span').removeClass('error');
			update();
		}
	});
	$('select#screenPresets').change(function(){
		$('div#previewPane').removeClass().addClass($(this).val());
	});
	
	$('select#presets').change(function(){
		if ($(this).val() == 'preset960') {
			columnWidthInput.val(40);
			gutterWidthInput.val(20);
			columnCountInput.val(16);
			update();
		}
	});
	
	function update(){
		if (columnWidth() != 40 || gutterWidth() != 20) {
			$('select#presets').val(0);
		} else {
			$('select#presets').val('preset960');
		}
		
		updateGrid();
		updateCSS();
		$('span#widthLabel').html(width());
	}
	
	function updateGrid(){
		$.each($('div.mini-column').hide(), function(index, div){
			if (index < columnCount()) {
				$(div).show();
			}
		});
		
		if ($.browser.safari) {
			$('div.mini-column').css({ width: (Math.round(columnWidth() / 2)) + 'px', 'margin-left': (gutterWidth() / 2) + 'px' });
			$('div.mini-column-row').css('width', (Math.round(columnWidth() / 2)  * columnCount()) + ((gutterWidth() / 2) * (columnCount() - 1)));
		} else {
			$('div.mini-column').css({ width: ((columnWidth() / 2)) + 'px', 'margin-left': (gutterWidth() / 2) + 'px' });
			$('div.mini-column-row').css('width', width() / 2);
		}
		$('div.mini-column.first').css({'margin-left': 0});
		
	}
	
	function updateCSS(){
		$('span.container-width').html(width());
		$('span.gutter-size').html(gutterWidth());
		
		$.each($('span.reg-column-width'), function(index, span){
			$(span).html(columnWidth() + (index * (columnWidth() + gutterWidth())));
		});
		$.each($('li.column-count').hide(), function(index, div){
			if (index < columnCount()) {
				$(div).show();
			}
		});
		
		// $('span.reg-third-width').html((4 * (columnWidth() + gutterWidth())));
		// $('span.reg-two-thirds-width').html(twoThirds());
		
		$('span.offset-half-width').html((columnWidth() + gutterWidth()) / 2);
		
		$.each($('span.offset-width'), function(index, span){
			$(span).html(columnWidth() + gutterWidth() + 	(index * (columnWidth() + gutterWidth())));
		});
		$.each($('li.offset-count').hide(), function(index, div){
			if (index < columnCount() - 2) {
				$(div).show();
			}
		});
		
		$.each($('span.ie-column-width'), function(index, span){
			$(span).html(columnWidth() + ((index + 7) * (columnWidth() + gutterWidth())) + gutterWidth());
		});
		$.each($('li.ie-count').hide(), function(index, div){
			if ((index + 7) < columnCount() - 1) {
				$(div).show();
			}
		});
		
		$('span.ie-container-width').html(width() + gutterWidth());
		$('span.ie-column-two-thirds-width').html(twoThirds() + gutterWidth());
	}
	
	function width() {
		return (columnWidth() * columnCount()) + (gutterWidth() * (columnCount() - 1));
	}
	
	function twoThirds() {
		return (8 * (columnWidth() + gutterWidth()))
	}
	
	function columnWidth() { return parseInt(columnWidthInput.val()); }
	function gutterWidth() { return parseInt(gutterWidthInput.val()); }
	function columnCount() { return parseInt(columnCountInput.val()); }
	
	$("a#goToCode").click(function () { 
		$.scrollTo($("h3#codeSection") ,400, {offset:0 -50}); 
		return false;
	});
	
});

function initZURB() {
}