/*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);