$(document).ready(function(){
	
		var gridLabels = new Array('cols','colWidth','colMarg','outerMarg'); 
		var popGrid960_12 = new Array(12,60,20,10); 
		var popGrid960_16 = new Array(16,40,20,10); 
	
		// reset all forms on laod
		var allForms = document.forms;
		var len = allForms.length;
		for (var i=0; i<len; i++){
			allForms[i].reset();
		}

		initGridValues = function() {
			for (i=0;i<=gridLabels.length;i++)
			{
 				$("#"+gridLabels[i]).attr("value",popGrid960_12[i]);
			}
		}
	
		showError = function(){
			$("#error").css("display","block");
			setTimeout("hideError()",5000);
		}
		hideError = function(){
			$("#error").fadeOut();
		}
	
		var paramCols = $(document).getUrlParam("c");
		var paramColWidth = $(document).getUrlParam("cw");
		var paramColMarg = $(document).getUrlParam("cm");
		var paramOutMarg = $(document).getUrlParam("om");
		
		if ( (paramCols && isNaN(paramCols)) || (paramColWidth && isNaN(paramColWidth)) || (paramColMarg && isNaN(paramColMarg)) || (paramOutMarg && isNaN(paramOutMarg)) ) {
			showError();
			initGridValues();
		} else if (paramCols && paramColWidth && paramColMarg && paramOutMarg ){
			$("#cols").attr("value",paramCols);
			$("#colWidth").attr("value",paramColWidth);
			$("#colMarg").attr("value",paramColMarg);
			$("#outerMarg").attr("value",paramOutMarg);
		} else {
			initGridValues();
		}
		
		updatePopGrids = function(el){
			if (el == false) {
				alert("heyo");
			}	
		}
		
		updateGrid = function() {
		
			$("#grid, #colField").empty();
			
			var cols = $("#cols").attr("value");
			var colWidth = $("#colWidth").attr("value");
			var colMarg = $("#colMarg").attr("value");
			var outerMarg = $("#outerMarg").attr("value");

			$("#urlC").html(cols);
			$("#urlCW").html(colWidth);
			$("#urlCM").html(colMarg);
			$("#urlOM").html(outerMarg);
			
			mailtoURL = "mailto:?body=http://gridr.atomeye.com/?c="+cols+"%26cw="+colWidth+"%26cm="+colMarg+"%26om="+outerMarg;
			$("#shareURL").attr("href",mailtoURL);

			for (i=1;i<=cols;i++)
			{
				$("#grid").append("<li class='gridBox'>&nbsp;<\/li>");
				var colFieldWidths = (colWidth*i) + (colMarg*i) - colMarg; 
				$("#colField").append("<li style='width:"+(colFieldWidths-3)+"px'>"+i+":"+colFieldWidths+"<\/li>"); // subtract 3 for padding
			}
			$("li.gridBox").css("width",colWidth+"px")
			$("li.gridBox").css("marginRight",colMarg+"px")
			$("li.gridBox:last").css("marginRight","0")
			
			var mainGridWidth = colWidth*cols + colMarg*cols - colMarg*1;
			var totalWidth = mainGridWidth+outerMarg*2;

			if (outerMarg == "0") {
				$("#totalWidthTxt").hide();
			} else {
				$("#totalWidthTxt").show();
				$("#totalWidthTxt").css("width",totalWidth-10); // subtract 10 to compensate for right-padding
				$("#totalWidth").html(totalWidth);
			}
	
			$("#pageWidth").css("width",mainGridWidth);
			$("#ruler").css("width",totalWidth+20); // add 20 to allow ruler to extend a bit

			$("#liveWidth").html(mainGridWidth);
			$("#liveWidthTxt").css("left",outerMarg+"px");
			$("#liveWidthTxt").css("width",mainGridWidth-10); // subtract 10 to compensate for right-padding

			$("#pageWidth").css("border-left-width",outerMarg+"px");
			$("#pageWidth").css("border-right-width",outerMarg+"px");
			
			var colFieldHeight = (25 * cols) + 3;
			$("#pageWidth").css("height",colFieldHeight);
			$("ul#grid li").css("height",colFieldHeight);
			
			// check to see if values match a popular grid array
			
			for (i=0;i<=gridLabels.length;i++) {
				if ( $("#"+gridLabels[i]).attr("value") != popGrid960_12[i] ) {
					$("#grid960-12").attr("checked","");
					break;
				} else {
					$("#grid960-12").attr("checked","checked");
				}
			}
			for (i=0;i<=gridLabels.length;i++) {
				if ( $("#"+gridLabels[i]).attr("value") != popGrid960_16[i] ) {
					$("#grid960-16").attr("checked","");
					break;
				} else {
					$("#grid960-16").attr("checked","checked");
				}
			}
			
					$(".block").css("position","absolute");

			
		} // end update function
	

		$("input").keyup(function()  {
			updateGrid();
		 });
		
		$("input").numeric();
		
		$(".block").draggable();

		$("#resizer").resizable({ 
			handles: "e",
			resize: function(e, ui) { 
				$("#resizerVals").html( $(this).css("width") );
			}
		}); 			
						
		$(":checkbox").click(function() {
 			target = $(this);
			buttonHTML = $(target).attr("id");
 			buttonTarget = buttonHTML.replace("target-","#");
 			$(buttonTarget).toggleFade({ speedIn : "fast"});
		});
		
		$("#popGrids :radio").click(function() {
			target = $(this);
			gridTarget = $(target).attr("id");
			$(".gridOption").removeClass("active");
			$(target).addClass("active");
			if ( gridTarget == "grid960-12") {
				$("#cols").attr("value","12");
				$("#colWidth").attr("value","60");
				$("#colMarg").attr("value","20");
				$("#outerMarg").attr("value","10");
				updateGrid();
			}
			if ( gridTarget == "grid960-16") {
				$("#cols").attr("value","16");
				$("#colWidth").attr("value","40");
				$("#colMarg").attr("value","20");
				$("#outerMarg").attr("value","10");
				updateGrid();
			}
		});
                  
		updateGrid();
		

	});