5 files changed, 124 insertions, 8 deletions
diff --git a/public/assets/javascripts/ui/_router.js b/public/assets/javascripts/ui/_router.js
index 886b8be..c0f35b6 100644
--- a/public/assets/javascripts/ui/_router.js
+++ b/public/assets/javascripts/ui/_router.js
@@ -61,7 +61,7 @@ var SiteRouter = Router.extend({
 		app.mode.builder = true
 		app.launch()
 
-		this.builderView = new BuilderView()
+		this.builderView = app.controller = new BuilderView()
 		this.builderView.load(name)
 	},
 	
@@ -92,7 +92,7 @@ var SiteRouter = Router.extend({
 		layout = slugify(layout)
 		
 		window.history.pushState(null, document.title, "/project/new/" + layout)
-		this.editorView = new EditorView()
+		this.editorView = app.controller = new EditorView()
 		this.editorView.loadLayout(layout)
 	},
 
@@ -109,7 +109,7 @@ var SiteRouter = Router.extend({
 		app.mode.editor = true
 		app.launch()
 
-		this.editorView = new EditorView()
+		this.editorView = app.controller = new EditorView()
 		this.editorView.load(name)
 	},
 	
@@ -117,7 +117,7 @@ var SiteRouter = Router.extend({
 		app.mode.editor = true
 		app.launch()
 
-		this.readerView = new ReaderView()
+		this.readerView = app.controller = new ReaderView()
 		this.readerView.load(name)
 	},
 
diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js
index 322637e..4067c4d 100644
--- a/public/assets/javascripts/ui/editor/EditorView.js
+++ b/public/assets/javascripts/ui/editor/EditorView.js
@@ -37,6 +37,14 @@ var EditorView = View.extend({
 	readyLayout: function(data){
 		data.isNew = true
 		this.ready(data)
+	},
+	
+	pick: function(scenery){
+		this.mediaEditor.pick(scenery)
+	},
+	
+	hideExtras: function(){
+		this.mediaEditor.hide()
 	}
 
 })
diff --git a/public/assets/javascripts/ui/editor/MediaEditor.js b/public/assets/javascripts/ui/editor/MediaEditor.js
index aea78aa..4e1132c 100644
--- a/public/assets/javascripts/ui/editor/MediaEditor.js
+++ b/public/assets/javascripts/ui/editor/MediaEditor.js
@@ -5,6 +5,7 @@ var MediaEditor = FormView.extend({
 	events: {
 		"click .playButton": "togglePlaying",
 		"mousedown [name=keyframe]": "stopPropagation",
+		"mousedown": "stopPropagation",
 		"change [name=keyframe]": "seek",
 		"change [name=autoplay]": "setAutoplay",
 		"change [name=loop]": "setLoop",
@@ -17,7 +18,6 @@ var MediaEditor = FormView.extend({
 		
 		this.$name = this.$("[name=name]")
 		this.$description = this.$("[name=description]")
-		this.$autoplay = this.$("[name=autoplay]")
 
 		// image fields
 		this.$widthDimension = this.$("[name=width]")
@@ -79,7 +79,13 @@ var MediaEditor = FormView.extend({
 
 				break
 		}
+	},
 
+	hide: function(scenery){
+		if (this.scenery) {
+			this.unbind()
+		}
+		this.toggle(false)
 	},
 	
 	seek: function(){
@@ -88,7 +94,6 @@ var MediaEditor = FormView.extend({
 		
 		this.scenery.media.keyframe = n
 	},
-
 	setAutoplay: function(){
 		var checked = this.$autoplay.prop('checked')
 		this.scenery.media.autoplay = checked
diff --git a/public/assets/javascripts/ui/reader/MediaPlayer.js b/public/assets/javascripts/ui/reader/MediaPlayer.js
new file mode 100644
index 0000000..74054b4
--- /dev/null
+++ b/public/assets/javascripts/ui/reader/MediaPlayer.js
@@ -0,0 +1,92 @@
+
+var MediaPlayer = FormView.extend({
+	el: "#mediaPlayer",
+		
+	events: {
+		"click .playButton": "togglePlaying",
+		"mousedown": "stopPropagation",
+	},
+	
+	initialize: function(opt){
+		this.parent = opt.parent
+		this.__super__.initialize.call(this)
+		
+		this.$name = this.$(".name")
+		this.$description = this.$(".description")
+
+		// image fields
+		this.$dimensions = this.$(".dimensions")
+		
+		// video fields
+		this.$playButton = this.$(".playButton")
+	},
+	
+	toggle: function(state) {
+    this.$el.toggleClass("active", state);
+	},
+	
+	togglePlaying: function(){
+		var state = this.scenery.toggle()
+		this.$playButton.toggleClass("playing", ! state)
+	},
+	
+	pick: function(scenery) {
+		var media = scenery.media
+
+		if (this.scenery) {
+			this.unbind()
+		}
+		if (media.type == "image") {
+			if ((! media.title || ! media.title.length) && (! media.description || ! media.description.length)) {
+				this.hide()
+				return
+			}
+		}
+
+		this.bind(scenery)
+		this.$el.addClass("active")
+				
+		this.$name.html(media.title)
+		this.$description.html(media.description)
+		
+		switch (media.type) {
+			case "image":
+				this.$(".image").show()
+				this.$(".video").hide()
+
+				this.$widthDimension.html( Number(media.widthDimension) || "" )
+				this.$heightDimension.html( Number(media.heightDimension) || "" )
+				this.$units.html( media.units || "cm" )
+				
+				break
+
+			case "youtube":
+			case "vimeo":
+			case "video":
+				this.$(".video").show()
+				this.$(".image").hide()
+				
+				this.$playButton.toggleClass("playing", ! this.scenery.paused())
+
+				break
+		}
+	},
+	
+	hide: function(scenery){
+		if (this.scenery) {
+			this.unbind()
+		}
+		this.toggle(false)
+	},
+	
+	bind: function(scenery){
+		this.scenery = scenery
+		this.scenery.mx.bound = true
+	},
+	
+	unbind: function(){
+		this.scenery.mx.bound = false
+		this.scenery = null
+	},
+
+})
diff --git a/public/assets/javascripts/ui/reader/ReaderView.js b/public/assets/javascripts/ui/reader/ReaderView.js
index bbdd437..a2c2983 100644
--- a/public/assets/javascripts/ui/reader/ReaderView.js
+++ b/public/assets/javascripts/ui/reader/ReaderView.js
@@ -8,6 +8,7 @@ var ReaderView = View.extend({
 	},
 	
 	initialize: function(){
+		this.mediaPlayer = new MediaPlayer ({ parent: this })
 	},
 
 	load: function(name){
@@ -27,8 +28,10 @@ var ReaderView = View.extend({
 		
 		editor.permissions.clear()
 		
-		//
-		
+		this.listen()
+	},
+	
+	listen: function(){
 		var base = this
 		
 		$(window).on('message', function(event){
@@ -55,6 +58,14 @@ var ReaderView = View.extend({
 		if (this.spinning) {
 			scene.camera.rotationY -= 1/180
 		}
+	},
+
+	pick: function(scenery){
+		this.mediaPlayer.pick(scenery)
+	},
+
+	hideExtras: function(){
+		this.mediaPlayer.hide()
 	}
 
 })