Spontaneous.Views = (function($, S) {
	var dom = S.Dom;
	var View = new JS.Class({
		include: Spontaneous.Properties,
		initialize: function(content) {
			this.content = content;
			this._subviews = [];
		},
		unload: function() {
			this.unwatchOthers();
			this.unloadView();
			this.unloadChildren();
		},
		unloadView: function() {
			// cleanup
		},
		unloadChildren: function() {
			for (var i = 0, c = this._subviews, ii = c.length; i < ii; i++) {
				if (typeof c[i].unload === 'function') {
					c[i].unload();
				} else {
					console.warn('unable to unload child view', c[i]);
				}
			}
		},
		id: function() {
			return this.content.id();
		},
		uid: function() {
			return this.content.uid();
		},
		depth_class: function() {
			return 'depth-'+this.content.depth();
		},
		depth: function() {
			return this.content.depth();
		},
		visibility_class: function() {
			return this.content.hidden() ? 'hidden' : 'visible';
		},
		alias_class: function() {
			return this.content.type().is_alias() ? 'alias' : 'not-alias';
		},
		fields_class: function() {
			return this.content.has_fields() ? 'fields' : 'no-fields';
		},
		boxes_class: function() {
			return this.content.has_boxes() ? 'boxes' : 'no-boxes';
		},

		has_fields: function() {
			return this.content.field_list().length > 0;
		},
		field_list: function() {
			return this.content.field_list();
		},
		image_fields: function() {
			return this.content.image_fields();
		},
		text_fields: function() {
			return this.content.text_fields();
		},
		string_values: function() {
			return this.content.string_values();
		},
		file_fields: function() {
			return this.content.file_fields();
		},
		mouseover: function(event) {
		},
		mouseout: function(event) {
		},
		save_path: function() {
			return this.content.save_path();
		},
		create_edit_wrapper: function(read_content) {
			var s = {'style':'position: relative; overflow: hidden;'};
			var outer = dom.div('.edit-wrapper-outer', s);
			var write = dom.div({'style':'position: absolute; height: 0; overflow: hidden;'});
			var write_inner = dom.div();
			var read = dom.div(s);
			var read_inner = dom.div();
			write.append(write_inner);
			read_inner.append(read_content);
			read.append(read_inner);
			outer.append(write).append(read);
			this.editing_area = {
				outer: outer,
				write: write,
				write_inner: write_inner,
				read: read,
				read_inner: read_inner
			};
			return outer;
		},

		edit: function(focus_field) {
			var time_to_reveal = 300, back = 10, front = 20,
				a = this.editing_area, o = a.outer, w = a.write, r = a.read, wi = a.write_inner, ri = a.read_inner;
			var panel = new Spontaneous.EditPanel(this), view = panel.view();
			r.css('z-index', front);
			w.css('z-index', back).css('height', 'auto').show();
			wi.append(view);
			var h = wi.outerHeight();
			o.add(r).animate({'height':h}, { queue: false, duration: time_to_reveal });
			w.css({'position':'relative'});
			r.css({'position':'absolute', 'top':0, 'right':0, 'left':0}).animate({'top':h}, { queue: false, duration: time_to_reveal, complete:function() {
				w.css({'z-index': front, 'position':'relative', 'height':'auto'});
				r.css({'z-index': back, 'position':'absolute', 'display':'none'});
				o.css('height', 'auto');
				panel.on_show(focus_field);
			}});
		},
		edit_closing: false,
		edit_closed: function() {
			if (this.edit_closing) { return; }
			this.edit_closing = true;
			var time_to_reveal = 300, back = 10, front = 20,
			a = this.editing_area, o = a.outer, w = a.write, r = a.read.css('display', 'block'), wi = a.write_inner, ri = a.read_inner, __content = this, h = ri.outerHeight();
			o.add(r).animate({'height':h}, { queue: false, duration: time_to_reveal });
			r.css({'z-index':front, 'height':h, 'top':wi.outerHeight()+'px'}).animate({'top':0}, { queue: true, duration: time_to_reveal, complete: function() {
				w.css({'position':'absolute', 'z-index':back});
				r.css({'position':'relative', 'height':'auto', 'z-index':front});
				o.css('height', 'auto');
				wi.empty();
				__content.edit_closing = false;
			}});
		},
		save_complete:function(response) {
			this.content.save_complete(response);
		}
	});
	return {
		View: View
	};
}(jQuery, Spontaneous));