/* header */
	jqo = $("<div>")
		.html("1. this is a test!")
	posy.add({
		jqo_add:jqo,
		pos:{row:"header",cell:"left"},
		outer:"#frame-rect"
	});

	jqo = $("<div>")
		.html("2")
		.attr("class","apsmx-square")
		.css("background-color","#c4c");
	posy.add({
		jqo_add:jqo,
		pos:{row:"header",cell:"left"},
		pindex:-1
	});

	jqo = $("<div>")
		.html("3")
		.attr("class","apsmx-square")
		.css("background-color","#d75");
	posy.add({
		jqo_add:jqo,
		pos:{row:"header",cell:"center"}
	});

	jqo = $("<div>")
		.html("4")
		.attr("class","apsmx-square apsmx-square-s")
		.css("background-color","#7d5");
	posy.add({
		jqo_add:jqo,
		pos:{row:"header",cell:"center"},
		move:{x:0,y:0}
	});

	jqo = $("<div>")
		.html("5")
		.attr("class","apsmx-square apsmx-square-s")
		.css("background-color","#d75");
	posy.add({
		jqo_add:jqo,
		pos:{row:"header",cell:"right"},
		move:{x:0,y:0}
	});

	jqo = $("<div>")
		.html("6")
		.attr("class","apsmx-square")
		.css("background-color","#7d5");
	posy.add({
		jqo_add:jqo,
		pos:{row:"header",cell:"right"},
		move:{x:0,y:0}
	});

	/* main */
	var jqo = $("<div>")
		.html("11")
		.attr("class","apsmx-square apsmx-square-s")
		.css("background-color","#8f7");
	posy.add({
		jqo_add:jqo,
		pos:{row:"main",cell:"left"},
		move:{x:0,y:0}
	});

	jqo = $("<div>")
		.html("12")
		.attr("class","apsmx-square")
		.css("background-color","#f87");
	posy.add({
		jqo_add:jqo,
		pos:{row:"main",cell:"left"},
		move:{x:0,y:0}
	});

	jqo = $("<div>")
		.html("13. this is a test!")
		.css("background-color","#d75");
	posy.add({
		jqo_add:jqo,
		pos:{row:"main",cell:"center"},
		move:{x:0,y:0}
	});

	jqo = $("<div>")
		.html("14. TEST2!")
		.css("background-color","#d57");
	posy.add({
		jqo_add:jqo,
		pos:{row:"main",cell:"center"},
		move:{x:0,y:0}
	});

	jqo = $("<div>")
		.html("15")
		.attr("class","apsmx-square")
		.css("background-color","#f78");
	posy.add({
		jqo_add:jqo,
		pos:{row:"main",cell:"center"},
		move:{x:0,y:0}
	});

	jqo = $("<div>")
		.html("16")
		.attr("class","apsmx-square")
		.css("background-color","#ac8");
	posy.add({
		jqo_add:jqo,
		pos:{row:"main",cell:"right"},
		move:{x:0,y:0}
	});

	jqo = $("<div>")
		.html("17")
		.attr("class","apsmx-square apsmx-square-s")
		.css("background-color","#a8c");
	posy.add({
		jqo_add:jqo,
		pos:{row:"main",cell:"right"},
		move:{x:0,y:0}
	});

	/* footer */
	jqo = $("<div>")
		.html("21")
		.attr("class","apsmx-square apsmx-square-s")
		.css("background-color","#c4c");
	posy.add({
		jqo_add:jqo,
		pos:{row:"footer",cell:"left"},
		move:{x:0,y:0}
	});

	jqo = $("<div>")
		.html("22")
		.attr("class","apsmx-square apsmx-square-s")
		.css("background-color","#ccf");
	posy.add({
		jqo_add:jqo,
		pos:{row:"footer",cell:"left"},
		move:{x:0,y:0}
	});

	jqo = $("<div>")
		.html("23")
		.attr("class","apsmx-square apsmx-square-s")
		.css("background-color","#d75");
	posy.add({
		jqo_add:jqo,
		pos:{row:"footer",cell:"center"},
		move:{x:0,y:0}
	});

	jqo = $("<div>")
		.html("24")
		.attr("class","apsmx-square")
		.css("background-color","#d57");
	posy.add({
		jqo_add:jqo,
		pos:{row:"footer",cell:"center"},
		move:{x:0,y:0}
	});

	jqo = $("<div>")
		.html("25. this is the footer right!");
	posy.add({
		jqo_add:jqo,
		pos:{row:"footer",cell:"right"},
		"class":"#frame-round #background-red",
		style:"width:100px"
	});

	/* myrow */
	jqo = $("<div>")
		.html("31. this is a test!");
	posy.add({
		jqo_add:jqo,
		pos:{row:"myrow",cell:"left"},
		move:{x:0,y:-10},
		outer:"#frame-rect"
	});

	jqo = $("<div>")
		.html("32")
		.attr("class","apsmx-square")
		.css("background-color","#c4c");
	posy.add({
		jqo_add:jqo,
		pos:{row:"myrow",cell:"left"},
		move:{x:0,y:0}
	});

	jqo = $("<div>")
		.html("33")
		.attr("class","apsmx-square")
		.css("background-color","#d75");
	posy.add({
		jqo_add:jqo,
		pos:{row:"myrow",cell:"center"},
		move:{x:0,y:0}
	});

	jqo = $("<div>")
		.html("34")
		.attr("class","apsmx-square apsmx-square-s")
		.css("background-color","#7d5");
	posy.add({
		jqo_add:jqo,
		pos:{row:"myrow",cell:"center"},
		move:{x:0,y:0}
	});

	jqo = $("<div>")
		.html("35")
		.attr("class","apsmx-square apsmx-square-s")
		.css("background-color","#d75");
	posy.add({
		jqo_add:jqo,
		pos:{row:"myrow",cell:"right"},
		move:{x:0,y:0}
	});

	jqo = $("<div>")
		.html("36")
		.attr("class","apsmx-square")
		.css("background-color","#7d5");
	posy.add({
		jqo_add:jqo,
		pos:{row:"myrow",cell:"right"},
		move:{x:0,y:0}
	});

	/* absolute positioning */
	jqo = $("<div>")
		.html("101")
		.attr("class","apsmx-circle")
		.css("background-color","rgba(0,255,0,0.5)");
	posy.add({
		jqo_add:jqo,
		pos:{v:"middle",h:"center"}
	});

	jqo = $("<div>")
		.html("102")
		.attr("class","apsmx-circle")
		.css("background-color","rgba(255,255,255,0.5)");
	posy.add({
		jqo_add:jqo,
		pos:{row:"header",v:"top",h:"right"},
		move:{x:15,y:-15}
	});

	jqo = $("<div>")
		.html("103")
		.attr("class","apsmx-circle")
		.css("background-color","rgba(255,0,255,0.5)");
	posy.add({
		jqo_add:jqo,
		pos:{layer:"slidebottom",v:"middle",h:"left"},
		move:{x:20,y:0}
	});