Movie list, navigate by letters

couchpotato/core/plugins/movie/static/list.js

@@ -7,6 +7,7 @@ var MovieList = new Class({
 	},
 
 	movies: [],
+	letters: {},
 
 	initialize: function(options){
 		var self = this;
@@ -19,9 +20,10 @@ var MovieList = new Class({
 	create: function(){
 		var self = this;
 
+		self.el.empty();
+
 		// Create the alphabet nav
-		if(self.options.navigation)
-			self.createNavigation();
+		self.createNavigation();
 
 		Object.each(self.movies, function(info){
 			var m = new Movie(self, {
@@ -29,6 +31,9 @@ var MovieList = new Class({
 			}, info);
 			$(m).inject(self.el);
 			m.fireEvent('injected');
+			
+			var first_char = m.getTitle().substr(0, 1);
+			self.activateLetter(first_char);
 		});
 
 		self.el.addEvents({
@@ -44,7 +49,6 @@ var MovieList = new Class({
 	createNavigation: function(){
 		var self = this;
 		var chars = '#ABCDEFGHIJKLMNOPQRSTUVWXYZ';
-		var selected = 'Z';
 
 		self.navigation = new Element('div.alph_nav').adopt(
 			self.alpha = new Element('ul.inlay'),
@@ -54,32 +58,39 @@ var MovieList = new Class({
 				new Element('li.thumbnails'),
 				new Element('li.text')
 			)
-		).inject(this.el, 'top')
+		).inject(this.el, 'top');
 
 		chars.split('').each(function(c){
-			new Element('li', {
+			self.letters[c] = new Element('li', {
 				'text': c,
-				'class': c == selected ? 'selected' : ''
+				'class': 'letter_'+c
 			}).inject(self.alpha)
-		})
+		});
 
 	},
+	
+	activateLetter: function(letter){
+		this.letters[letter].addClass('active')
+	},
 
-	getMovies: function(status, onComplete){
+	update: function(){
+		var self = this;
+
+		self.getMovies();
+	},
+
+	getMovies: function(){
 		var self = this
 
-		if(self.movies.length == 0)
-			Api.request('movie.list', {
-				'data': {
-					'status': self.options.status
-				},
-				'onComplete': function(json){
-					self.store(json.movies);
-					self.create();
-				}
-			})
-		else
-			self.list()
+		Api.request('movie.list', {
+			'data': {
+				'status': self.options.status
+			},
+			'onComplete': function(json){
+				self.store(json.movies);
+				self.create();
+			}
+		})
 	},
 
 	store: function(movies){

couchpotato/core/plugins/movie/static/movie.css

@@ -159,7 +159,11 @@
 		text-align: center;
 		cursor: pointer;
 		margin: 0 -1px 0 0;
+		color: #666;
 	}
+		.movies .alph_nav li.active {
+			color: #fff;
+		}
 	
 		.movies .alph_nav li:hover, .movies .alph_nav li.onlay {
 			font-weight: bold;

couchpotato/core/plugins/movie/static/movie.js

@@ -127,7 +127,8 @@ var MovieAction = new Class({
 		self.movie = movie;
 
 		self.create();
-		self.el.addClass(self.class_name)
+		if(self.el)
+			self.el.addClass(self.class_name)
 	},
 
 	create: function(){},
@@ -141,7 +142,7 @@ var MovieAction = new Class({
 	},
 
 	toElement: function(){
-		return this.el
+		return this.el || null
 	}
 
 });
@@ -173,4 +174,45 @@ var IMDBAction = new Class({
 		window.open('http://www.imdb.com/title/'+self.id+'/');
 	}
 
-})
+});
+
+var ReleaseAction = new Class({
+
+	Extends: MovieAction,
+	id: null,
+
+	create: function(){
+		var self = this;
+
+		self.id = self.movie.get('identifier');
+
+		self.el = new Element('a.releases', {
+			'title': 'Show the releases that are available for ' + self.movie.getTitle(),
+			'events': {
+				'click': self.show.bind(self)
+			}
+		});
+
+	},
+
+	show: function(e){
+		var self = this;
+		(e).stop();
+
+		if(!self.options_container){
+			self.options_container = new Element('div.options').adopt(
+				$(self.movie.thumbnail).clone(),
+				self.release_container = new Element('div.releases')
+			).inject(self.movie, 'top');
+
+			Array.each(self.movie.data.releases, function(release){
+				new Element('div', {
+					'text': release.title
+				}).inject(self.release_container)
+			});
+
+		}
+		self.movie.slide('in');
+	},
+
+});