3 files changed, 58 insertions, 4 deletions

diff --git a/assets/js/models/sample.js b/assets/js/models/sample.js
index 5483f01..7cb417f 100644
--- a/assets/js/models/sample.js
+++ b/assets/js/models/sample.js
@@ -11,6 +11,30 @@ ClipPlay.Models.Sample = Backbone.Model.extend({
 	},
 
 
+	in_minutes_and_seconds: function(seconds) {
+		var minutes = Math.floor(seconds / 60);
+		seconds = Math.floor(seconds);
+		var seconds = seconds - minutes * 60;
+		
+		if (seconds < 10) {
+			seconds = '0' + seconds;
+		}
+		console.log(minutes + ':' + seconds);
+		return {
+			minutes: minutes,
+			seconds: seconds
+		};
+	},
+	
+	start_in_minutes_and_seconds: function() {
+		return this.in_minutes_and_seconds(this.get('start'));
+	},
+	
+	stop_in_minutes_and_seconds: function() {
+		return this.in_minutes_and_seconds(this.get('stop'));
+	},
+	
+	
 	play: function() {
         console.log('playing');
     //play then pause
diff --git a/assets/js/views/clip-line.js b/assets/js/views/clip-line.js
index 208c927..2760d5b 100644
--- a/assets/js/views/clip-line.js
+++ b/assets/js/views/clip-line.js
@@ -6,6 +6,10 @@ ClipPlay.Views.ClipLine = Marionette.View.extend({
 		
 		this.type = options.type;
 		
+		this.listenTo(this.model, 'change:duration', this.initialize_time_values);
+		var start_or_stop = this.type;
+		this.listenTo(this.model, 'change:' + start_or_stop, this.render_time);
+		
 		this.initialize_drag_handles();
 	},
 	
@@ -19,12 +23,33 @@ ClipPlay.Views.ClipLine = Marionette.View.extend({
 		});
 		
 		var that = this;
-		this.$el.on('dragstop', function(e, ui) {
-			that.on_clip_drag_stop(e, ui);
+		
+		this.$el.on('drag', function(e, ui) {
+			that.on_clip_drag(e, ui);
 		});
 	},
 	
 	
+	initialize_time_values: function() {
+		this.set_seek_point();
+		this.render_time();
+	},
+	
+	
+	render_time: function() {
+		var time;
+		if (this.type === 'start') {
+			time = this.model.start_in_minutes_and_seconds();
+		}
+		else if (this.type === 'stop') {
+			time = this.model.stop_in_minutes_and_seconds();
+		}
+		
+		var time_string = time.minutes + ':' + time.seconds;
+		this.$('.js-time').text(time_string);
+	},
+	
+	
 	// percentage_progress
 	//
 	// Get a percentage value from a clip-line that represents its 
@@ -52,7 +77,12 @@ ClipPlay.Views.ClipLine = Marionette.View.extend({
 	},
 	
 	
-	on_clip_drag_stop: function(e, ui) {
+	set_seek_point: function() {
 		this.model.set(this.type, this.seek_point());
+	},
+	
+	
+	on_clip_drag: function(e, ui) {
+		this.set_seek_point();
 	}
 });
\ No newline at end of file
diff --git a/assets/js/views/sample.js b/assets/js/views/sample.js
index 6555464..e1c1448 100644
--- a/assets/js/views/sample.js
+++ b/assets/js/views/sample.js
@@ -41,7 +41,7 @@ ClipPlay.Views.Sample = Marionette.ItemView.extend({
 			model: this.model
 		});
 
-		this.end_clip_line = new ClipPlay.Views.ClipLine({
+		this.stop_clip_line = new ClipPlay.Views.ClipLine({
 			type: 'stop',
 			el: this.$('.js-end-position'),
 			model: this.model