Page preview works! Very exciting.

Now we just need the ability to edit things.

static/js/pdfformfiller/pdfformfiller.js

@@ -1 +1,135 @@
-console.log('pdfformfiller loaded!');
+/*global Backbone, Marionette, _ */
+(function () {
+	'use strict';
+
+	var root = this,
+		PDFFormFiller,
+		PagePreviewView,
+		FieldItemPreviewView,
+		FieldPreviewView,
+		Document,
+		Page,
+		Field,
+		PageCollection,
+		FieldCollection;
+
+	if (typeof exports !== 'undefined') {
+		PDFFormFiller = exports;
+	} else {
+		PDFFormFiller = root.PDFFormFiller = {};
+	}
+
+	Field = PDFFormFiller.Field = Backbone.Model.extend({});
+
+	FieldCollection = PDFFormFiller.FieldCollection = Backbone.Collection.extend({
+		model: Field
+	});
+
+	Page = PDFFormFiller.Page = Backbone.Model.extend({
+		initialize: function (options) {
+			var fields,
+				self = this;
+
+			if (typeof this.get('fields') === 'undefined') {
+				fields = new FieldCollection();
+				fields.url = function () {
+					return self.url + 'fields/';
+				};
+				this.set('fields', fields);
+			}
+		},
+
+		fetch: function () {
+			var self = this;
+
+			Backbone.Model.prototype.fetch.apply(this, arguments).then(function () {
+				var model = self;
+				// Auto-fetch the fields collection
+				if (typeof model.get('fields') !== 'undefined') {
+					model.get('fields').fetch();
+				}
+			});
+		},
+	});
+
+
+	FieldItemPreviewView = PDFFormFiller.FieldItemPreviewView = Marionette.ItemView.extend({
+		/* template: _.template('<div class="pff-field pff-field-<%= fieldtype %>"><%= name %></div>'), */
+		template: _.template('<%= name %>'),
+		tagName: 'div',
+		className: 'pff-field',
+
+		onRender: function () {
+			var page = this.options.page,
+				page_height = page.get('height'),
+				page_width = page.get('width'),
+				model = this.model;
+
+			this.$el.css({
+				position: 'absolute',
+				bottom: (model.get('pos_y') / page_height) * 100 + '%',
+				left: (model.get('pos_x') / page_width) * 100 + '%',
+				width: (model.get('width') / page_width) * 100 + '%',
+				height: (model.get('height') / page_height) * 100 + '%'
+			})
+				.addClass('pff-field-' + model.get('fieldtype'));
+		}
+	});
+
+	FieldPreviewView = PDFFormFiller.FieldPreviewView = Marionette.CollectionView.extend({
+		itemView: FieldItemPreviewView,
+		collection: FieldCollection,
+
+		onRender: function () {
+
+			this.$el.css({
+				position: 'absolute',
+				height: '100%',
+				width: '100%'
+			});
+		},
+
+		buildItemView: function (item, ItemView) {
+			var view = new ItemView({
+				model: item,
+				page: this.options.page,
+			});
+			return view;
+		}
+	});
+
+	PagePreviewView = PDFFormFiller.PagePreviewView = Marionette.Layout.extend({
+		template: _.template('<div class="fields"></div><img class="imgPreview" src="<%= image %>"/>'),
+
+		regions: {
+			fields: '.fields'
+		},
+
+		ui: {
+			image: '.imgPreview',
+			fields: '.fields'
+		},
+
+		initialize: function (options) {
+			this.listenTo(this.model, 'change', this.render);
+		},
+
+		onRender: function () {
+			var page = this.model,
+				fields = page.get('fields');
+
+			this.$el.css({
+				position: 'relative'
+			});
+
+			this.ui.image.css({
+				'width': '100%'
+			});
+
+			this.fields.show(new FieldPreviewView({el: this.ui.fields, collection: fields, page: page, image: this.ui.image}));
+		}
+
+	});
+
+
+}).call(this);