added z-index stuff

4 files changed, 33 insertions, 12 deletions

diff --git a/assets/css/application.css b/assets/css/application.css
index df74acb..c3dba05 100644
--- a/assets/css/application.css
+++ b/assets/css/application.css
@@ -19,7 +19,6 @@ header {
 
 #samples {
 	margin: 3em 0;
-    z-index:1;
 }
 
 
@@ -116,7 +115,6 @@ header {
 
 /* . Buttons . */
 .button {
-    z-index:1;
 	border-width: 1px;
 	border-style: solid;
 	cursor: pointer;
@@ -211,8 +209,17 @@ header {
      width: 100%;
      height: 100%;
      position:absolute;
+
+    z-index: -10;
   }
 
-.sample-media{
-    z-index: -1;
-}
+.overlay {
+     position: absolute;
+     top: 0;
+     left: 0;
+     width: 100%;
+     height: 100%;
+     position:absolute;
+    z-index: -5;
+	background: url('../images/background.png') repeat;
+  }
diff --git a/assets/js/models/sample.js b/assets/js/models/sample.js
index 228454b..c3c395c 100644
--- a/assets/js/models/sample.js
+++ b/assets/js/models/sample.js
@@ -8,7 +8,8 @@ ClipPlay.Models.Sample = Backbone.Model.extend({
 		'player': '',
 		'iframe': '',
         'timeout' : '',
-        'thumbnail' : ''
+        'thumbnail' : '',
+        'playing' : false
 	},
     initialize: function() {
         var a = ClipPlay.Config['key_defaults'].shift();
@@ -44,6 +45,7 @@ ClipPlay.Models.Sample = Backbone.Model.extend({
 	play: function() {
         console.log('playing');
     //play then pause
+        this.set('playing',true);
         window.clearTimeout(this.get('timeout'));
         this.get('player').pause();
         this.get('player').seekTo(this.get('start'));
@@ -53,6 +55,7 @@ ClipPlay.Models.Sample = Backbone.Model.extend({
         console.log(length);
         this.set('timeout',setTimeout(function(){
           that.get('player').pause();
+          that.set('playing',false);
         }, length*1000 ));
 	}
 });
diff --git a/assets/js/views/sample.js b/assets/js/views/sample.js
index aa07acd..21e0806 100644
--- a/assets/js/views/sample.js
+++ b/assets/js/views/sample.js
@@ -13,8 +13,8 @@ ClipPlay.Views.Sample = Marionette.ItemView.extend({
 
     initialize: function(options){
         this.collection = options.collection;
-
         this.listenTo(this.model, 'change:key', this.key_bind);
+        this.listenTo(this.model, 'change:playing', this.show_clip);
         this.key_bind();
     },
 
@@ -31,9 +31,9 @@ ClipPlay.Views.Sample = Marionette.ItemView.extend({
 				src: iframe_src,
 				id: 'video-sample-' + that.model.cid
 			});
-            var wrapper= document.createElement('div');
-            $(wrapper).addClass("responsive-object");
+            var wrapper= document.createElement('span');
             $(wrapper).append(iframe[0]);
+            $(wrapper).addClass("responsive-object");
 			$('#video').append(wrapper);
 			var player = new OP.Player(iframe[0]);
 			that.model.set('player', player);
@@ -47,7 +47,6 @@ ClipPlay.Views.Sample = Marionette.ItemView.extend({
             img_resize+=new_height;
 
             that.model.set('thumbnail', img_resize);
-
             window.BOKASHAKA = that.model;
 			player.getDuration(function(value) {
 				that.model.set('duration', value);
@@ -111,5 +110,17 @@ ClipPlay.Views.Sample = Marionette.ItemView.extend({
 		}, 500, function() {
 			Marionette.View.prototype.close.call(that, arguments);
 		});
-	}
+	},
+
+    show_clip: function(){
+        var isPlaying = this.model.get('playing');
+        console.log('playing :' + isPlaying);
+        var $iframe_video = $('#video-sample-' + this.model.cid);
+        if(isPlaying){
+            $iframe_video.css({'z-index':10});
+        }
+        if(!isPlaying){
+            $iframe_video.css({'z-index':-10});
+        }
+    }
 });
diff --git a/index.html b/index.html
index 27d6463..6a2991a 100644
--- a/index.html
+++ b/index.html
@@ -18,7 +18,7 @@
 	<header>
 		<h1>ClipPlay</h1>
 	</header>
-
+    <div class="overlay"></div>
 	<div role="main">
 		<div id="add-sample">
 			<input type="text" class="url-input js-sample-url" placeholder="http://www.youtube.com/watch?v=_JGaQ3g8WU4" />