Settings

Movie List
Directory selection

couchpotato/static/scripts/block.js

@@ -0,0 +1,26 @@
+var BlockBase = new Class({
+
+	Implements: [Options, Events],
+
+	options: {},
+
+	initialize: function(parent, options){
+		var self = this;
+		self.setOptions(options);
+		
+		self.parent = parent;
+
+		self.create();
+	},
+	
+	create: function(){
+		this.el = new Element('div.block');
+	},
+
+	toElement: function(){
+		return this.el
+	}
+
+});
+
+var Block = {}

couchpotato/static/scripts/block/footer.js

@@ -0,0 +1,11 @@
+Block.Footer = new Class({
+
+	Extends: BlockBase,
+
+	create: function(){
+		var self = this;
+
+		self.el = new Element('div.footer');
+	}
+
+});

couchpotato/static/scripts/block/navigation.js

@@ -0,0 +1,20 @@
+Block.Navigation = new Class({
+
+	Extends: BlockBase,
+
+	create: function(){
+		var self = this;
+
+		self.el = new Element('ul.navigation');
+	},
+
+	addTab: function(tab){
+		var self = this
+
+		return new Element('li').adopt(
+			new Element('a', tab)
+		).inject(self.el)
+
+	}
+
+});

couchpotato/static/scripts/block/search.js

@@ -0,0 +1,11 @@
+Block.Search = new Class({
+
+	Extends: BlockBase,
+
+	create: function(){
+		var self = this;
+
+		self.el = new Element('div.search_form');
+	}
+
+});

couchpotato/static/scripts/couchpotato.js

@@ -3,20 +3,13 @@ var CouchPotato = new Class({
 	Implements: [Options],
 
 	defaults: {
-		page: 'movie',
+		page: 'wanted',
 		action: 'index',
 		params: {}
 	},
 
 	pages: [],
-
-	tabs: [
-	    {'href': '/movie/', 'title':'Gimmy gimmy gimmy!', 'label':'Wanted'},
-	    {'href': '/manage/', 'title':'Do stuff to your existing movies!', 'label':'Manage'},
-	    {'href': '/feed/', 'title':'Which wanted movies are released soon?', 'label':'Soon'},
-	    {'href': '/log/', 'title':'Show recent logs.', 'class':'logLink', 'label':'Logs'},
-	    {'href': '/config/', 'title':'Change settings.', 'id':'showConfig'}
-	],
+	block: [],
 
 	initialize: function(options) {
 		var self = this;
@@ -25,38 +18,24 @@ var CouchPotato = new Class({
 		self.c = $(document.body)
 
 		self.route = new Route(self.defaults);
-		self.api = new Api(self.options.api_url)
+		self.api = new Api(self.options.api)
 
-		History.addEvent('change', self.createPage.bind(self));
+		self.createLayout();
+		self.createPages();
+
+		History.addEvent('change', self.openPage.bind(self));
 		History.handleInitialState();
 
-		self.createLayout()
-		self.createNavigation()
-
-		self.c.addEvent('click:relay(a)', self.openPage.bind(self))
+		self.c.addEvent('click:relay(a)', self.pushState.bind(self));
 	},
 
-	openPage: function(e){
+	pushState: function(e){
 		var self = this;
-		(e).stop()
-
-		var url = e.target.get('href')
-		History.push(url)
-	},
-
-	createNavigation: function(){
-		var self = this
-
-		self.tabs.each(function(tab){
-			new Element('li').adopt(
-				new Element('a', {
-					'href': tab.href,
-					'title': tab.title,
-					'text': tab.label
-				})
-			).inject(self.navigation)
-		})
+		(e).stop();
 
+		var url = e.target.get('href');
+		if(History.getPath() != url)
+			History.push(url);
 	},
 
 	createLayout: function(){
@@ -64,15 +43,27 @@ var CouchPotato = new Class({
 
 		self.c.adopt(
 			self.header = new Element('div.header').adopt(
-				self.navigation = new Element('ul.navigation'),
-				self.add_form = new Element('div.add_form')
+				self.block.navigation = new Block.Navigation(self, {}),
+				self.block.search = new Block.Search(self, {})
 			),
 			self.content = new Element('div.content'),
-			self.footer = new Element('div.footer')
-		)
+			self.block.footer = new Block.Footer(self, {})
+		);
 	},
 
-	createPage: function(url) {
+	createPages: function(){
+		var self = this;
+
+		Object.each(Page, function(page_class, class_name){
+			pg = new Page[class_name](self, {});
+			self.pages[class_name] = pg;
+
+			$(pg).inject(self.content);
+		});
+
+	},
+
+	openPage: function(url) {
 		var self = this;
 
 		self.route.parse(url);
@@ -80,14 +71,19 @@ var CouchPotato = new Class({
 		var action = self.route.getAction();
 		var params = self.route.getParams();
 
-		var pg = self.pages[page_name]
-		if(!pg){
-			pg = new Page[page_name]();
-			pg.setParent(self)
-			self.pages[page_name] = pg;
-		}
-		pg.open(action, params)
+		var page = self.pages[page_name];
+			page.open(action, params);
+			page.show();
 
+		if(self.current_page)
+			self.current_page.hide()
+
+		self.current_page = page;
+
+	},
+
+	getBlock: function(block_name){
+		return this.block[block_name]
 	},
 
 	getApi: function(){
@@ -95,77 +91,41 @@ var CouchPotato = new Class({
 	}
 });
 
-var PageBase = new Class({
-
-	Implements: [Options],
-
-	initialize: function(options) {
-
-	},
-
-	open: function(action, params){
-		var self = this;
-		p('Opening: ' +self.getName() + ', ' + action + ', ' + Object.toQueryString(params));
-
-		try {
-			self[action+'Action'](params)
-		}
-		catch (e){
-			self.errorAction(e)
-		}
-	},
-
-	errorAction: function(e){
-		p('Error, action not found', e);
-	},
-
-	getName: function(){
-		return this.name
-	},
-
-	setParent: function(parent){
-		this.parent = parent
-	},
-
-	getParent: function(){
-		return this.parent
-	},
-
-	api: function(){
-		return this.parent.getApi()
-	}
-});
 
 var Api = new Class({
 
 	url: '',
 
-	initialize: function(url){
+	initialize: function(options){
 		var self = this
 
-		self.url = url
+		self.options = options;
 		self.req = new Request.JSON({
 			'method': 'get'
 		})
 
 	},
 
-	request: function(type, params, data){
+	request: function(type, options){
 		var self = this;
 
-		self.req.setOptions({
-			'url': self.createUrl(type, params),
-			'data': data
-		})
-		self.req.send()
+		new Request.JSON(Object.merge({
+			'method': 'get',
+			'url': self.createUrl(type),
+		}, options)).send()
 	},
 
-	createUrl: function(action, params){
-		return this.url + (action || 'default') + '/?' + Object.toQueryString(params)
+	createUrl: function(action){
+		return this.options.url + (action || 'default') + '/'
+	},
+
+	getOption: function(name){
+		return this.options[name]
 	}
 
 });
 
+
 var Route = new Class({
 
 	defaults: {},

couchpotato/static/scripts/mootools.js

@@ -3,10 +3,10 @@
 MooTools: the javascript framework
 
 web build:
- - http://mootools.net/core/755c9fd7bb9342a1fa57db060c2cd141
+ - http://mootools.net/core/efcfcd2923b4129a00a22580c45b1d75
 
 packager build:
- - packager build Core/Class Core/Class.Extras Core/Element Core/Request.JSON Core/DOMReady
+ - packager build Core/Class Core/Class.Extras Core/Element Core/Element.Style Core/Request.JSON Core/DOMReady
 
 /*
 ---
@@ -3120,6 +3120,187 @@ Element.Properties.html = (function(){
 })();
 
 
+/*
+---
+
+name: Element.Style
+
+description: Contains methods for interacting with the styles of Elements in a fashionable way.
+
+license: MIT-style license.
+
+requires: Element
+
+provides: Element.Style
+
+...
+*/
+
+(function(){
+
+var html = document.html;
+
+Element.Properties.styles = {set: function(styles){
+	this.setStyles(styles);
+}};
+
+var hasOpacity = (html.style.opacity != null);
+var reAlpha = /alpha\(opacity=([\d.]+)\)/i;
+
+var setOpacity = function(element, opacity){
+	if (!element.currentStyle || !element.currentStyle.hasLayout) element.style.zoom = 1;
+	if (hasOpacity){
+		element.style.opacity = opacity;
+	} else {
+		opacity = (opacity == 1) ? '' : 'alpha(opacity=' + opacity * 100 + ')';
+		var filter = element.style.filter || element.getComputedStyle('filter') || '';
+		element.style.filter = filter.test(reAlpha) ? filter.replace(reAlpha, opacity) : filter + opacity;
+	}
+};
+
+Element.Properties.opacity = {
+
+	set: function(opacity){
+		var visibility = this.style.visibility;
+		if (opacity == 0 && visibility != 'hidden') this.style.visibility = 'hidden';
+		else if (opacity != 0 && visibility != 'visible') this.style.visibility = 'visible';
+
+		setOpacity(this, opacity);
+	},
+
+	get: (hasOpacity) ? function(){
+		var opacity = this.style.opacity || this.getComputedStyle('opacity');
+		return (opacity == '') ? 1 : opacity;
+	} : function(){
+		var opacity, filter = (this.style.filter || this.getComputedStyle('filter'));
+		if (filter) opacity = filter.match(reAlpha);
+		return (opacity == null || filter == null) ? 1 : (opacity[1] / 100);
+	}
+
+};
+
+var floatName = (html.style.cssFloat == null) ? 'styleFloat' : 'cssFloat';
+
+Element.implement({
+
+	getComputedStyle: function(property){
+		if (this.currentStyle) return this.currentStyle[property.camelCase()];
+		var defaultView = Element.getDocument(this).defaultView,
+			computed = defaultView ? defaultView.getComputedStyle(this, null) : null;
+		return (computed) ? computed.getPropertyValue((property == floatName) ? 'float' : property.hyphenate()) : null;
+	},
+
+	setOpacity: function(value){
+		setOpacity(this, value);
+		return this;
+	},
+
+	getOpacity: function(){
+		return this.get('opacity');
+	},
+
+	setStyle: function(property, value){
+		switch (property){
+			case 'opacity': return this.set('opacity', parseFloat(value));
+			case 'float': property = floatName;
+		}
+		property = property.camelCase();
+		if (typeOf(value) != 'string'){
+			var map = (Element.Styles[property] || '@').split(' ');
+			value = Array.from(value).map(function(val, i){
+				if (!map[i]) return '';
+				return (typeOf(val) == 'number') ? map[i].replace('@', Math.round(val)) : val;
+			}).join(' ');
+		} else if (value == String(Number(value))){
+			value = Math.round(value);
+		}
+		this.style[property] = value;
+		return this;
+	},
+
+	getStyle: function(property){
+		switch (property){
+			case 'opacity': return this.get('opacity');
+			case 'float': property = floatName;
+		}
+		property = property.camelCase();
+		var result = this.style[property];
+		if (!result || property == 'zIndex'){
+			result = [];
+			for (var style in Element.ShortStyles){
+				if (property != style) continue;
+				for (var s in Element.ShortStyles[style]) result.push(this.getStyle(s));
+				return result.join(' ');
+			}
+			result = this.getComputedStyle(property);
+		}
+		if (result){
+			result = String(result);
+			var color = result.match(/rgba?\([\d\s,]+\)/);
+			if (color) result = result.replace(color[0], color[0].rgbToHex());
+		}
+		if (Browser.opera || (Browser.ie && isNaN(parseFloat(result)))){
+			if (property.test(/^(height|width)$/)){
+				var values = (property == 'width') ? ['left', 'right'] : ['top', 'bottom'], size = 0;
+				values.each(function(value){
+					size += this.getStyle('border-' + value + '-width').toInt() + this.getStyle('padding-' + value).toInt();
+				}, this);
+				return this['offset' + property.capitalize()] - size + 'px';
+			}
+			if (Browser.opera && String(result).indexOf('px') != -1) return result;
+			if (property.test(/(border(.+)Width|margin|padding)/)) return '0px';
+		}
+		return result;
+	},
+
+	setStyles: function(styles){
+		for (var style in styles) this.setStyle(style, styles[style]);
+		return this;
+	},
+
+	getStyles: function(){
+		var result = {};
+		Array.flatten(arguments).each(function(key){
+			result[key] = this.getStyle(key);
+		}, this);
+		return result;
+	}
+
+});
+
+Element.Styles = {
+	left: '@px', top: '@px', bottom: '@px', right: '@px',
+	width: '@px', height: '@px', maxWidth: '@px', maxHeight: '@px', minWidth: '@px', minHeight: '@px',
+	backgroundColor: 'rgb(@, @, @)', backgroundPosition: '@px @px', color: 'rgb(@, @, @)',
+	fontSize: '@px', letterSpacing: '@px', lineHeight: '@px', clip: 'rect(@px @px @px @px)',
+	margin: '@px @px @px @px', padding: '@px @px @px @px', border: '@px @ rgb(@, @, @) @px @ rgb(@, @, @) @px @ rgb(@, @, @)',
+	borderWidth: '@px @px @px @px', borderStyle: '@ @ @ @', borderColor: 'rgb(@, @, @) rgb(@, @, @) rgb(@, @, @) rgb(@, @, @)',
+	zIndex: '@', 'zoom': '@', fontWeight: '@', textIndent: '@px', opacity: '@'
+};
+
+
+
+Element.ShortStyles = {margin: {}, padding: {}, border: {}, borderWidth: {}, borderStyle: {}, borderColor: {}};
+
+['Top', 'Right', 'Bottom', 'Left'].each(function(direction){
+	var Short = Element.ShortStyles;
+	var All = Element.Styles;
+	['margin', 'padding'].each(function(style){
+		var sd = style + direction;
+		Short[style][sd] = All[sd] = '@px';
+	});
+	var bd = 'border' + direction;
+	Short.border[bd] = All[bd] = '@px @ rgb(@, @, @)';
+	var bdw = bd + 'Width', bds = bd + 'Style', bdc = bd + 'Color';
+	Short[bd] = {};
+	Short.borderWidth[bdw] = Short[bd][bdw] = All[bdw] = '@px';
+	Short.borderStyle[bds] = Short[bd][bds] = All[bds] = '@';
+	Short.borderColor[bdc] = Short[bd][bdc] = All[bdc] = 'rgb(@, @, @)';
+});
+
+})();
+
+
 /*
 ---
 

couchpotato/static/scripts/mootools_more.js

@@ -1,6 +1,141 @@
 // MooTools: the javascript framework.
-// Load this file's selection again by visiting: http://mootools.net/more/82d3c4f6ee721f808321f6bf6818d8fb 
-// Or build this file again with packager using: packager build More/Element.Delegation More/Element.Shortcuts
+// Load this file's selection again by visiting: http://mootools.net/more/4da9e3082bf0d4194b76d7e5b3874113 
+// Or build this file again with packager using: packager build More/Element.Forms More/Element.Delegation More/Element.Shortcuts
+/*
+---
+
+script: String.Extras.js
+
+name: String.Extras
+
+description: Extends the String native object to include methods useful in managing various kinds of strings (query strings, urls, html, etc).
+
+license: MIT-style license
+
+authors:
+  - Aaron Newton
+  - Guillermo Rauch
+  - Christopher Pitt
+
+requires:
+  - Core/String
+  - Core/Array
+
+provides: [String.Extras]
+
+...
+*/
+
+(function(){
+
+var special = {
+	'a': /[àáâãäåăą]/g,
+	'A': /[ÀÁÂÃÄÅĂĄ]/g,
+	'c': /[ćčç]/g,
+	'C': /[ĆČÇ]/g,
+	'd': /[ďđ]/g,
+	'D': /[ĎÐ]/g,
+	'e': /[èéêëěę]/g,
+	'E': /[ÈÉÊËĚĘ]/g,
+	'g': /[ğ]/g,
+	'G': /[Ğ]/g,
+	'i': /[ìíîï]/g,
+	'I': /[ÌÍÎÏ]/g,
+	'l': /[ĺľł]/g,
+	'L': /[ĹĽŁ]/g,
+	'n': /[ñňń]/g,
+	'N': /[ÑŇŃ]/g,
+	'o': /[òóôõöøő]/g,
+	'O': /[ÒÓÔÕÖØ]/g,
+	'r': /[řŕ]/g,
+	'R': /[ŘŔ]/g,
+	's': /[ššş]/g,
+	'S': /[ŠŞŚ]/g,
+	't': /[ťţ]/g,
+	'T': /[ŤŢ]/g,
+	'ue': /[ü]/g,
+	'UE': /[Ü]/g,
+	'u': /[ùúûůµ]/g,
+	'U': /[ÙÚÛŮ]/g,
+	'y': /[ÿý]/g,
+	'Y': /[ŸÝ]/g,
+	'z': /[žźż]/g,
+	'Z': /[ŽŹŻ]/g,
+	'th': /[þ]/g,
+	'TH': /[Þ]/g,
+	'dh': /[ð]/g,
+	'DH': /[Ð]/g,
+	'ss': /[ß]/g,
+	'oe': /[œ]/g,
+	'OE': /[Œ]/g,
+	'ae': /[æ]/g,
+	'AE': /[Æ]/g
+},
+
+tidy = {
+	' ': /[\xa0\u2002\u2003\u2009]/g,
+	'*': /[\xb7]/g,
+	'\'': /[\u2018\u2019]/g,
+	'"': /[\u201c\u201d]/g,
+	'...': /[\u2026]/g,
+	'-': /[\u2013]/g,
+//	'--': /[\u2014]/g,
+	'»': /[\uFFFD]/g
+};
+
+var walk = function(string, replacements){
+	var result = string;
+	for (key in replacements) result = result.replace(replacements[key], key);
+	return result;
+};
+
+var getRegexForTag = function(tag, contents){
+	tag = tag || '';
+	var regstr = contents ? "<" + tag + "(?!\\w)[^>]*>([\\s\\S]*?)<\/" + tag + "(?!\\w)>" : "<\/?" + tag + "([^>]+)?>";
+	reg = new RegExp(regstr, "gi");
+	return reg;
+};
+
+String.implement({
+
+	standardize: function(){
+		return walk(this, special);
+	},
+
+	repeat: function(times){
+		return new Array(times + 1).join(this);
+	},
+
+	pad: function(length, str, direction){
+		if (this.length >= length) return this;
+
+		var pad = (str == null ? ' ' : '' + str)
+			.repeat(length - this.length)
+			.substr(0, length - this.length);
+
+		if (!direction || direction == 'right') return this + pad;
+		if (direction == 'left') return pad + this;
+
+		return pad.substr(0, (pad.length / 2).floor()) + this + pad.substr(0, (pad.length / 2).ceil());
+	},
+
+	getTags: function(tag, contents){
+		return this.match(getRegexForTag(tag, contents)) || [];
+	},
+
+	stripTags: function(tag, contents){
+		return this.replace(getRegexForTag(tag, contents), '');
+	},
+
+	tidy: function(){
+		return walk(this, tidy);
+	}
+
+});
+
+})();
+
+
 /*
 ---
 
@@ -35,6 +170,148 @@ MooTools.More = {
 };
 
 
+/*
+---
+
+script: Element.Forms.js
+
+name: Element.Forms
+
+description: Extends the Element native object to include methods useful in managing inputs.
+
+license: MIT-style license
+
+authors:
+  - Aaron Newton
+
+requires:
+  - Core/Element
+  - /String.Extras
+  - /MooTools.More
+
+provides: [Element.Forms]
+
+...
+*/
+
+Element.implement({
+
+	tidy: function(){
+		this.set('value', this.get('value').tidy());
+	},
+
+	getTextInRange: function(start, end){
+		return this.get('value').substring(start, end);
+	},
+
+	getSelectedText: function(){
+		if (this.setSelectionRange) return this.getTextInRange(this.getSelectionStart(), this.getSelectionEnd());
+		return document.selection.createRange().text;
+	},
+
+	getSelectedRange: function(){
+		if (this.selectionStart != null){
+			return {
+				start: this.selectionStart,
+				end: this.selectionEnd
+			};
+		}
+
+		var pos = {
+			start: 0,
+			end: 0
+		};
+		var range = this.getDocument().selection.createRange();
+		if (!range || range.parentElement() != this) return pos;
+		var duplicate = range.duplicate();
+
+		if (this.type == 'text'){
+			pos.start = 0 - duplicate.moveStart('character', -100000);
+			pos.end = pos.start + range.text.length;
+		} else {
+			var value = this.get('value');
+			var offset = value.length;
+			duplicate.moveToElementText(this);
+			duplicate.setEndPoint('StartToEnd', range);
+			if (duplicate.text.length) offset -= value.match(/[\n\r]*$/)[0].length;
+			pos.end = offset - duplicate.text.length;
+			duplicate.setEndPoint('StartToStart', range);
+			pos.start = offset - duplicate.text.length;
+		}
+		return pos;
+	},
+
+	getSelectionStart: function(){
+		return this.getSelectedRange().start;
+	},
+
+	getSelectionEnd: function(){
+		return this.getSelectedRange().end;
+	},
+
+	setCaretPosition: function(pos){
+		if (pos == 'end') pos = this.get('value').length;
+		this.selectRange(pos, pos);
+		return this;
+	},
+
+	getCaretPosition: function(){
+		return this.getSelectedRange().start;
+	},
+
+	selectRange: function(start, end){
+		if (this.setSelectionRange){
+			this.focus();
+			this.setSelectionRange(start, end);
+		} else {
+			var value = this.get('value');
+			var diff = value.substr(start, end - start).replace(/\r/g, '').length;
+			start = value.substr(0, start).replace(/\r/g, '').length;
+			var range = this.createTextRange();
+			range.collapse(true);
+			range.moveEnd('character', start + diff);
+			range.moveStart('character', start);
+			range.select();
+		}
+		return this;
+	},
+
+	insertAtCursor: function(value, select){
+		var pos = this.getSelectedRange();
+		var text = this.get('value');
+		this.set('value', text.substring(0, pos.start) + value + text.substring(pos.end, text.length));
+		if (select !== false) this.selectRange(pos.start, pos.start + value.length);
+		else this.setCaretPosition(pos.start + value.length);
+		return this;
+	},
+
+	insertAroundCursor: function(options, select){
+		options = Object.append({
+			before: '',
+			defaultMiddle: '',
+			after: ''
+		}, options);
+
+		var value = this.getSelectedText() || options.defaultMiddle;
+		var pos = this.getSelectedRange();
+		var text = this.get('value');
+
+		if (pos.start == pos.end){
+			this.set('value', text.substring(0, pos.start) + options.before + value + options.after + text.substring(pos.end, text.length));
+			this.selectRange(pos.start + options.before.length, pos.end + options.before.length + value.length);
+		} else {
+			var current = text.substring(pos.start, pos.end);
+			this.set('value', text.substring(0, pos.start) + options.before + current + options.after + text.substring(pos.end, text.length));
+			var selStart = pos.start + options.before.length;
+			if (select !== false) this.selectRange(selStart, selStart + current.length);
+			else this.setCaretPosition(selStart + text.length);
+		}
+		return this;
+	}
+
+});
+
+
 /*
 ---
 

couchpotato/static/scripts/page.js

@@ -0,0 +1,78 @@
+var PageBase = new Class({
+
+	Implements: [Options, Events],
+
+	options: {
+
+	},
+
+	has_tab: true,
+
+	initialize: function(parent, options) {
+		var self = this;
+
+		self.setOptions(options)
+		self.setParent(parent)
+
+		// Create main page container
+		self.el = new Element('div.page.'+self.name);
+
+		// Create tab for page
+		if(self.has_tab){
+			var nav = self.getParent().getBlock('navigation');
+			self.tab = nav.addTab({
+				'href': '/'+self.name,
+				'title': self.title,
+				'text': self.name.capitalize()
+			});
+		}
+	},
+
+	open: function(action, params){
+		var self = this;
+		//p('Opening: ' +self.getName() + ', ' + action + ', ' + Object.toQueryString(params));
+
+		try {
+			self[action+'Action'](params);
+			self.fireEvent('opened');
+		}
+		catch (e){
+			self.errorAction(e);
+			self.fireEvent('error');
+		}
+	},
+
+	errorAction: function(e){
+		p('Error, action not found', e);
+	},
+
+	getName: function(){
+		return this.name
+	},
+
+	setParent: function(parent){
+		this.app = parent
+	},
+
+	getParent: function(){
+		return this.app
+	},
+
+	api: function(){
+		return this.getParent().getApi()
+	},
+	
+	show: function(){
+		this.el.addClass('active');
+	},
+	
+	hide: function(){
+		this.el.removeClass('active');
+	},
+	
+	toElement: function(){
+		return this.el
+	}
+});
+
+var Page = {}

couchpotato/static/scripts/page/log.js

@@ -0,0 +1,8 @@
+Page.Log = new Class({
+
+	Extends: PageBase,
+
+	name: 'log',
+	title: 'Show recent logs.'
+
+})

couchpotato/static/scripts/page/manage.js

@@ -0,0 +1,8 @@
+Page.Manage = new Class({
+
+	Extends: PageBase,
+
+	name: 'manage',
+	title: 'Do stuff to your existing movies!'
+
+})

couchpotato/static/scripts/page/settings.js

@@ -0,0 +1,426 @@
+Page.Settings = new Class({
+
+	Extends: PageBase,
+
+	name: 'settings',
+	title: 'Change settings.',
+
+	groups: {},
+
+	open: function(action, params){
+		var self = this
+		//p('open config', action, params)
+
+		if(!self.data)
+			self.getData(self.create.bind(self))
+		else
+			self.openTab(action);
+	},
+
+	openTab: function(action){
+		var self = this;
+
+		if(self.current)
+			self.toggleTab(self.current, true);
+		
+		self.toggleTab(action)
+		self.current = action;
+
+	},
+	
+	toggleTab: function(tab, hide){
+		var self = this;
+		
+		var a = hide ? 'removeClass' : 'addClass';
+		var c = 'active';
+
+		var g = self.groups[tab] || self.groups.general
+				g.tab[a](c);
+				g.group[a](c);
+
+	},
+
+	getData: function(onComplete){
+		var self = this;
+
+		if(onComplete)
+			self.api().request('settings', {
+				'useSpinner': true,
+				'spinnerOptions': {
+					'target': self.el
+				},
+				'onComplete': function(json){
+					self.data = json;
+					onComplete(json);
+				}
+			})
+
+		return self.data;
+	},
+
+	getValue: function(section, name){
+		var self = this;
+		try {
+			return self.data.values[section][name] || '';
+		}
+		catch(e){
+			return ''
+		}
+	},
+
+	create: function(json){
+		var self = this
+
+		self.el.adopt(
+			self.tabs = new Element('ul.tabs'),
+			self.containers = new Element('form.uniForm.containers')
+		);
+
+		Object.each(json.sections, function(section, section_name){
+
+			// Create tab
+			var tab = new Element('li').adopt(
+				new Element('a', {
+					'href': '/'+self.name+'/'+section.tab+'/',
+					'text': section.tab.capitalize()
+				})
+			).inject(self.tabs);
+			var group = new Element('div.group').inject(self.containers);
+
+			self.groups[section.tab] = {
+				'tab': tab,
+				'group': group
+			}
+
+			// Add section
+			var fieldset = new Element('fieldset.inlineLabels').inject(group)
+			Object.each(section.options, function(option, option_name){
+				var class_name = (option.type || 'input').capitalize();
+				var input = new Option[class_name](self, section_name, option_name, option);
+					input.inject(fieldset);
+			});
+
+		});
+
+		self.openTab();
+
+	}
+
+});
+
+var OptionBase = new Class({
+
+	Implements: [Options, Events],
+
+	klass: 'textInput',
+	focused_class : 'focused',
+	save_on_change: true,
+
+	initialize: function(parent, section, name, options){
+		var self = this
+		self.setOptions(options)
+
+		self.page = parent;
+		self.section = section;
+		self.name = name;
+
+		self.createBase();
+		self.create();
+		self.createHint();
+		self.setAdvanced();
+
+		// Add focus events
+		self.input.addEvents({
+			'change': self.changed.bind(self),
+			'keyup': self.changed.bind(self),
+			'focus': function() {
+				self.el.addClass(self.focused_class);
+			},
+			'blur' : function() {
+				self.el.removeClass(self.focused_class);
+			}
+		});
+
+	},
+
+	/**
+	 * Create the element
+	 */
+	createBase: function(){
+		var self = this
+		self.el = new Element('div.ctrlHolder')
+	},
+
+	create: function(){},
+
+	setAdvanced: function(){
+		this.el.addClass(this.options.advanced ? 'advanced': '')
+	},
+
+	createHint: function(){
+		var self = this;
+		if(self.options.description)
+			new Element('p.formHint', {
+				'text': self.options.description
+			}).inject(self.el);
+	},
+
+	// Element has changed, do something
+	changed: function(){
+		var self = this;
+
+		if(self.getValue() != self.previous_value){
+			if(self.save_on_change){
+				if(self.changed_timer) clearTimeout(self.changed_timer);
+				self.changed_timer = self.save.delay(300, self);
+			}
+			self.fireEvent('change')
+		}
+
+	},
+
+	save: function(){
+		var self = this;
+
+		self.api().request('setting.save', {
+			'data': {
+				'section': self.section,
+				'name': self.name,
+				'value': self.getValue()
+			},
+			'useSpinner': true,
+			'spinnerOptions': {
+				'target': self.el
+			},
+			'onComplete': self.saveCompleted.bind(self)
+		});
+
+	},
+
+	saveCompleted: function(json){
+		var self = this;
+
+		var sc = json.success ? 'save_success' : 'save_failed';
+
+		self.previous_value = self.getValue();
+		self.el.addClass(sc);
+
+		(function(){
+			self.el.removeClass(sc);
+		}).delay(3000, self);
+	},
+
+	setName: function(name){
+		this.name = name;
+	},
+
+	postName: function(){
+		var self = this;
+		return self.section +'['+self.name+']';
+	},
+
+	getValue: function(){
+		var self = this;
+		return self.input.get('value');
+	},
+
+	getSettingValue: function(){
+		var self = this;
+		return self.page.getValue(self.section, self.name);
+	},
+
+	api: function(){
+		return this.page.api();
+	},
+
+	inject: function(el, position){
+		this.el.inject(el, position);
+		return this.el;
+	},
+
+	toElement: function(){
+		return this.el;
+	}
+})
+
+var Option = {}
+Option.String = new Class({
+	Extends: OptionBase,
+
+	type: 'input',
+
+	create: function(){
+		var self = this
+
+		self.el.adopt(
+			new Element('label', {
+				'text': self.options.label
+			}),
+			self.input = new Element('input', {
+				'name': self.postName(),
+				'value': self.getSettingValue()
+			})
+		);
+	}
+});
+
+Option.Dropdown = new Class({
+	Extends: OptionBase,
+
+	create: function(){
+		var self = this
+
+		new Element('label', {
+			'text': self.options.label
+		}).adopt(
+			self.input = new Element('select', {
+				'name': self.postName()
+			})
+		).inject(self.el)
+
+		Object.each(self.options.values, function(label, value){
+			new Element('option', {
+				'text': label,
+				'value': value
+			}).inject(self.input)
+		})
+
+		self.input.set('value', self.getSettingValue());
+	}
+});
+
+Option.Checkbox = new Class({
+	Extends: OptionBase,
+
+	type: 'checkbox',
+
+	create: function(){
+		var self = this;
+
+		new Element('label', {
+			'text': self.options.label
+		}).adopt(
+			self.input = new Element('input', {
+				'type': 'checkbox',
+				'value': self.getSettingValue(),
+				'checked': self.getSettingValue() !== undefined
+			})
+		).inject(self.el);
+	}
+});
+
+Option.Bool = new Class({
+	Extends: Option.Checkbox
+});
+
+Option.Int = new Class({
+	Extends: Option.String
+});
+
+Option.Directory = new Class({
+
+	Extends: OptionBase,
+
+	type: 'span',
+	browser: '',
+	save_on_change: false,
+
+	create: function(){
+		var self = this;
+
+
+		self.el.adopt(
+			new Element('label', {
+				'text': self.options.label
+			}),
+			self.input = new Element('span', {
+				'text': self.getSettingValue(),
+				'events': {
+					'click': self.showBrowser.bind(self),
+					'outerClick': self.hideBrowser.bind(self)
+				}
+			})
+		);
+
+		self.cached = {};
+	},
+
+	showBrowser: function(){
+		var self = this;
+
+		if(!self.browser)
+			self.browser = new Element('div.directory_list').adopt(
+				self.dir_list = new Element('ul')
+			).inject(self.input, 'after')
+
+		self.getDirs()
+		self.browser.show()
+	},
+
+	hideBrowser: function(){
+		this.browser.hide()
+	},
+
+	fillBrowser: function(json){
+		var self = this;
+
+		var c = self.getCurrentDir();
+		var v = self.input.get('value');
+		var add = true
+
+		if(!json){
+			json = self.cached[c];
+		}
+		else {
+			self.cached[c] = json;
+		}
+
+		self.dir_list.empty();
+		json.dirs.each(function(dir){
+			if(dir.indexOf(v) != -1){
+				new Element('li', {
+					'text': dir
+				}).inject(self.dir_list)
+
+				if(add){
+					self.input.insertAtCursor(dir.substring(v.length), true);
+					add = false
+				}
+			}
+		})
+	},
+
+	getDirs: function(){
+		var self = this;
+
+		var c = self.getCurrentDir();
+
+		if(self.cached[c]){
+			self.fillBrowser()
+		}
+		else {
+			self.api().request('directory.list', {
+				'data': {
+					'path': c
+				},
+				'onComplete': self.fillBrowser.bind(self)
+			})
+		}
+	},
+
+	getCurrentDir: function(){
+		var self = this;
+
+		var v = self.input.get('value');
+		var sep = self.api().getOption('path_sep');
+		var dirs = v.split(sep);
+			dirs.pop();
+
+		return dirs.join(sep)
+	},
+
+	getValue: function(){
+		var self = this;
+		return self.input.get('text');
+	}
+});

couchpotato/static/scripts/page/soon.js

@@ -0,0 +1,8 @@
+Page.Soon = new Class({
+
+	Extends: PageBase,
+
+	name: 'soon',
+	title: 'Which wanted movies are released soon?'
+
+})

couchpotato/static/scripts/page/wanted.js

@@ -0,0 +1,73 @@
+Page.Wanted = new Class({
+
+	Extends: PageBase,
+
+	name: 'wanted',
+	title: 'Gimmy gimmy gimmy!',
+
+	movies: [],
+
+	indexAction: function(param){
+		var self = this;
+
+		self.get()
+	},
+
+	list: function(){
+		var self = this;
+
+		if(!self.movie_container)
+			self.movie_container = new Element('div.movies').inject(self.el);
+		
+		self.movie_container.empty();
+		Object.each(self.movies, function(info){
+			var m = new Movie(self, {}, info);
+			$(m).inject(self.movie_container);
+		});
+	},
+
+	get: function(status, onComplete){
+		var self = this
+
+		if(self.movies.length == 0)
+			self.api().request('movie', {
+				'data': {},
+				'onComplete': function(json){
+					self.store(json.movies);
+					self.list();
+				}
+			})
+		else
+			self.list()
+	},
+
+	store: function(movies){
+		var self = this;
+
+		self.movies = movies;
+	}
+
+});
+
+var Movie = new Class({
+
+	Extends: BlockBase,
+
+	initialize: function(self, options, data){
+		var self = this;
+
+		self.data = data;
+
+		self.parent(self, options);
+	},
+
+	create: function(){
+		var self = this;
+
+		self.el = new Element('div.movie', {
+			'text': self.data.name
+		});
+
+	}
+
+})

couchpotato/static/scripts/pages.js

@@ -1,72 +0,0 @@
-var Page = {}
-
-Page.Movie = new Class({
-
-	Extends: PageBase,
-
-	name: 'movie',
-
-	initialize: function(options){
-
-	},
-
-	indexAction: function(param){
-		var self = this
-		self.getMovies()
-	},
-
-	getMovies: function(){
-		var self = this
-
-		this.api().request('movie', {'status': 'wanted'})
-	}
-
-})
-
-Page.Manage = new Class({
-
-	Extends: PageBase,
-
-	name: 'manage',
-
-	initialize: function(options){
-
-	}
-
-})
-
-Page.Soon = new Class({
-
-	Extends: PageBase,
-
-	name: 'soon',
-
-	initialize: function(options){
-
-	}
-
-})
-
-Page.Config = new Class({
-
-	Extends: PageBase,
-
-	name: 'config',
-
-	initialize: function(options){
-
-	}
-
-})
-
-Page.Log = new Class({
-
-	Extends: PageBase,
-
-	name: 'log',
-
-	initialize: function(options){
-
-	}
-
-})