Page preview works! Very exciting.

Now we just need the ability to edit things.

templates/admin/pdfformfiller/page/preview.html

@@ -3,12 +3,54 @@
 {% load admin_urls %}
 
 {% block extrahead %}{{ block.super }}
-{{ media }} media
+{{ media }}
 {% endblock %}
 {% block content %}
 
-<div id="content-main">
+<style type="text/css">
+	.clearfix:after { content: " "; display: block; height: 0; clear:both, visiblity: hidden; }
+	.clearfix { display: inline-block; _height: 1%; clear: both; }
+	.clearfix { display: block; clear: both; }
+	#pff { max-width: 100%; }
 
-	<img src="{{ page.image.url }}" style="max-width:100%"/>
+	.pff-field {
+		text-indent: -9999px;
+		white-space: nowrap;
+	}
+	.pff-field:hover {
+		width: auto !;
+		height: auto !;
+		text-indent: 0;
+	}
+
+	.pff-field-t {
+		background: rgba(0,255,0,0.2);
+	}
+
+	.pff-field-b {
+		background: rgba(0,0,255,0.2);
+	}
+</style>
+
+<script type="text/javascript">
+$(function($) {
+
+
+		var page = new PDFFormFiller.Page(),
+			preview = new PDFFormFiller.PagePreviewView({
+				el: $('#pff'),
+				model: page
+		});
+
+		page.url = '{% url "pdfformfiller_api_page_detail" id=page.id %}';
+		page.fetch();
+
+		window.page = page;
+		window.preview = preview;
+	})
+</script>
+
+<div id="content-main">
+	<div id="pff"></div>
 </div>
 {% endblock %}