About page, lots of fixin

app/coffeescripts/ajax.coffee

@@ -20,10 +20,10 @@ class Ajax
 				else if data.status == 'loading_failed'
 					_search.hideSpinner()
 					_search.showError()
+				_beathaven.redrawScrollbar()
 			else
 				_ajax.setArchor '/artist/' +name+ '/'
 				_pages.renderArtist data
-				_beathaven.redrawScrollbar()
 		false
 	
 	loadSearchPage: ->
@@ -44,6 +44,12 @@ class Ajax
 			_beathaven.redrawScrollbar()
 		false
 	
+	loadAboutPage: ->
+		$.get '/templates/about.html', (data) ->
+			_pages.renderTextpage data
+			_ajax.setTitle 'About'
+		false
+	
 	setArchor: (anchor) ->
 		@referer = this.getAnchor()
 		window.location.hash = '#' +anchor
@@ -65,6 +71,8 @@ class Ajax
 			_ajax.loadSearchPage();
 		else if _ajax.getAnchor().match /\/settings\//
 			_ajax.loadSettingsPage()
+		else if _ajax.getAnchor().match /\/about\//
+			_ajax.loadAboutPage()
 		else
 			_ajax.loadSearchPage()
 		false

app/coffeescripts/beathaven.coffee

@@ -10,7 +10,7 @@ _settings = null
 
 $ ->
 	l = document.location
-	if l.host not in ['beathaven.org', 'localhost']
+	if l.host not in ['beathaven.org', 'local.beathaven.org']
 		l.href = 'http://beathaven.org/'+ l.hash
 	
 	_beathaven = new BeatHaven()
@@ -30,7 +30,8 @@ class BeatHaven
 		this.adjustSizes()
 		this.checkRedrawScrollbar()
 		
-		_vkontakte = new Vkontakte(if document.location.host == 'beathaven.org' then 2335068 else 2383163)
+		# if document.location.host == 'beathaven.org' then 2335068 else 2383163
+		_vkontakte = new Vkontakte(2335068)
 		_vkontakte.init()
 		
 		_ajax = new Ajax()

app/coffeescripts/pages.coffee

@@ -49,6 +49,7 @@ class Pages
 		
 		yaCounter7596904.hit _ajax.getAnchor(), data.artist.name, _ajax.referer
 		_ajax.setTitle data.artist.name
+		_beathaven.redrawScrollbar()
 		false
 	
 	renderSearch: (data) ->
@@ -79,9 +80,22 @@ class Pages
 		false
 	
 	renderSettings: (data) ->
+		unless _session.getUser().name?
+			_ajax.go('/search/')
+			return false
 		$('.data-container').css background: 'none'
 		$('.data-container .inner').html data
 		yaCounter7596904.hit _ajax.getAnchor(), 'Settings', _ajax.referer
 		_ajax.setTitle 'Settings'
 		$('.settings-container .tabs .tab').first().trigger 'click'
 		false
+	
+	renderTextpage: (data) ->
+		$('.data-container').css background: 'url(/images/concrete_wall_2.png) 0 -30px repeat'
+		$('.data-container .inner').html data
+		_beathaven.redrawScrollbar()
+		false
+
+$('.about').live 'click', ->
+	_ajax.go '/about/'
+	false

app/coffeescripts/session.coffee

@@ -24,3 +24,7 @@ class Session
 			q_params[key] = val
 		$.post url, q_params, callback
 		false
+	
+	reloadSession: ->
+		_session.query '/user/auth', {}, (ar) ->
+			_session.setUser ar.user

app/coffeescripts/settings.coffee

@@ -2,9 +2,11 @@ class Settings
 	
 	getAccountInfo: (callback) ->
 		_session.query '/user/update/', {}, callback
+		false
 	
 	saveAccountInfo: (params, callback) ->
 		_session.query '/user/update', params, callback
+		false
 		
 	loadFormData: (form) ->
 		if form == 'account'
@@ -13,10 +15,21 @@ class Settings
 		else if form == 'lastfm'
 			if _session.getUser().lastfm_username
 				$('.form-container input[name$="username"]').first().val _session.getUser().lastfm_username
+		false
+	
+	updateLastfmLogin: ->
+		if window.lastfm_popup.closed
+			_session.query '/user/auth', {}, (ar) ->
+				_session.setUser ar.user
+				_settings.loadFormData 'lastfm'
+		else
+			setTimeout _settings.updateLastfmLogin, 100
+		false
 
 
 $('.settings') .live 'click', ->
 	_ajax.go('/settings/');
+	false
 
 $('.settings-container .tabs .tab').live 'click', ->
 	if not $(this).hasClass 'active'
@@ -24,9 +37,12 @@ $('.settings-container .tabs .tab').live 'click', ->
 		$(this).addClass 'active'
 		$('.form-container').html $('.forms .'+ $(this).attr 'data-fieldset').html()
 		_settings.loadFormData $(this).attr 'data-fieldset'
+	false
 
 $('.lastfm-connect') .live 'click', ->
-	window.open _session.getUser().lastfm_login_url
+	window.lastfm_popup = window.open _session.getUser().lastfm_login_url
+	setTimeout _settings.updateLastfmLogin, 100
+	false
 	
 $('.settings-container .form input').live 'blur', ->
 	active_tab = $('.settings-container .tabs .tab.active').attr 'data-fieldset'
@@ -35,4 +51,6 @@ $('.settings-container .form input').live 'blur', ->
 			username: $('.settings-container .form input[name$="username"]').first().val()
 			email: $('.settings-container .form input[name$="email"]').first().val()
 		_settings.saveAccountInfo params, ->
-			$('#header-container .hello .greating').text 'Hi there, ' +(if params.username.length > 0 then params.username else '%username%')+ '!'
+			$('.header-container .hello .greating span').text (if params.username.length > 0 then params.username else '%username%')
+			false
+	false

app/coffeescripts/vkontakte.coffee

@@ -1,15 +1,24 @@
 class Vkontakte
 	
 	qr: null
+	api_id: null
 	
 	constructor: (@api_id) ->
 	
+	getApiId: ->
+		@api_id
+	
 	init: ->
 		@qr = []
-		VK.init
-			apiId: @api_id
 		
-		VK.Auth.getLoginStatus this.authInfo
+		window.vkAsyncInit = ->
+			VK.init apiId: _vkontakte.getApiId()
+			VK.Auth.getLoginStatus _vkontakte.authInfo
+
+
+		setTimeout ->
+			$('#vk_api_transport').append('<script async="async" src="http://vkontakte.ru/js/api/openapi.js"></script>')
+		, 0
 	
 	authInfo: (response) ->
 		if typeof response isnt 'undefined' and response.session			
@@ -26,16 +35,18 @@ class Vkontakte
 						_session.query '/user/update', name: r.response, (ar2) ->
 							_session.setUser ar2.user
 							$('.header-container .hello .greating')
-								.text 'Hi there, ' +(if _session.getUser().name then _session.getUser().name else '%username%')+ '!'
+								.html 'Tēnā koe, <span class="settings">' +(if _session.getUser().name then _session.getUser().name else '%username%')+ '</span>!'
 				else
 					_session.setUser ar.user
 				
+				$('.header-container .hello').show()
 				$('.header-container .hello .greating')
-					.text 'Hi there, ' +(if _session.getUser().name then _session.getUser().name else '%username%')+ '!'
+					.html 'Tēnā koe, <span class="settings">' +(if _session.getUser().name then _session.getUser().name else '%username%')+ '</span>!'
 		else
 			_session = new Session({})
+			_session.setUser {}
 			$('#vk_login, .auth_notice').css display: 'block'
-			$('#vk_logout').hide()
+			$('.header-container .hello').hide()
 		window._session = _session
 	
 	loadTracksData: (artist, track, duration, callback) ->
@@ -96,8 +107,13 @@ class Vkontakte
 			@qr[query]
 		false
 
-$ ->
+$('#vk_login').live 'click', ->
-	$('#vk_login').click ->
+	VK.Auth.login (response) ->
-		VK.Auth.login _vkontakte.authInfo(), 8
+		_vkontakte.authInfo(response)
-	$('#vk_logout').click ->
+		false
-		VK.Auth.logout _vkontakte.authInfo()
+	, 8
+	false
+$('#vk_logout').live 'click', ->
+	_ajax.go '/search/';
+	VK.Auth.logout _vkontakte.authInfo
+	false

app/controllers/application_controller.rb

@@ -4,7 +4,8 @@ class ApplicationController < ActionController::Base
   protect_from_forgery
   
   def authorized?
-    secret_key = request.host == 'beathaven.org' ? 'sdgwSbl3nNE4ZxafuPrp' : 's5zyjb693z6uV4rbhEyc'
+    # secret_key = request.host == 'beathaven.org' ? 'sdgwSbl3nNE4ZxafuPrp' : 's5zyjb693z6uV4rbhEyc'
+    secret_key = 'sdgwSbl3nNE4ZxafuPrp'
     unless params[:expire].nil? or params[:mid].nil? or params[:secret].nil? or params[:sid].nil? or params[:sig].nil?
       # Calculating hash
       hash = 'expire='+ params[:expire] +'mid='+ params[:mid] +'secret='+ params[:secret] +'sid='+ params[:sid] + secret_key

app/controllers/artist_controller.rb

@@ -4,6 +4,10 @@ class ArtistController < ApplicationController
   @@default_album_types = ['Album', 'Soundtrack']
   def data
     data = {}
+    if params[:name].nil? or params[:name].length == 0
+      render :json => {status: 'loading_failed', pics: []}
+      return
+    end
     name = params[:name].gsub('%20', ' ').gsub('+', ' ')
     artist = Artist.find_by_name(name)
     if artist and artist.status == 0

app/models/artist.rb

@@ -1,3 +1,3 @@
 class Artist < ActiveRecord::Base
-  has_many :albums, :order => 'year ASC, id ASC', :dependent => :destroy
+  has_many :albums, :order => 'pic_url DESC, year ASC, id ASC', :dependent => :destroy
 end

app/views/layouts/application.html.erb

@@ -5,7 +5,6 @@
 		<meta charset="utf-8"/>
 		<link rel="shortcut icon" href="/favicon.ico" />
 		<link rel="stylesheet" type="text/css" media="screen" href="/stylesheets/beathaven.css" />
-		<script type="text/javascript" charset="windows-1251" src="http://vkontakte.ru/js/api/openapi.js"></script>
 		<%= javascript_include_tag "jquery/jquery.min.js" %>
 		<%= javascript_include_tag "jquery/jquery-ui/js/jquery-ui-1.8.13.custom.min.js" %>
 		<%= javascript_include_tag "jquery/jquery.autocomplete.js" %>
@@ -59,12 +58,13 @@
 		<div class="header-container">
 			<div class="hello">
 				<span class="greating"></span>
-				<div class="settings"></div>
+				<div class="settings settings-button"></div>
 			</div>
 			<ul class="navigation">
 				<li class="logo search">BeatHaven<div class="version">0.4</div></li>
 				<li class="search">Search</li>
 				<li><a href="https://twitter.com/#!/beat_haven" target="_blank">News</a></li>
+				<li class="about">About</li>
 				<li class="vk_auth" id="vk_login">Login</li>
 			</ul>
 		</div>

public/javascripts/coffee/ajax.js

@@ -9,22 +9,22 @@ Ajax = (function() {
       if (data.status != null) {
         if (data.status === 'loading') {
           _search.showArtistPics(data.pics);
-          return setTimeout(function() {
+          setTimeout(function() {
             return _ajax.loadArtistData(name);
           }, 3000);
         } else if (data.status === 'corrected') {
-          return _ajax.loadArtistData(data.page);
+          _ajax.loadArtistData(data.page);
         } else if (data.status === 'suggestions') {
           _search.hideSpinner();
-          return _search.showSuggestions(data.values);
+          _search.showSuggestions(data.values);
         } else if (data.status === 'loading_failed') {
           _search.hideSpinner();
-          return _search.showError();
+          _search.showError();
         }
+        return _beathaven.redrawScrollbar();
       } else {
         _ajax.setArchor('/artist/' + name + '/');
-        _pages.renderArtist(data);
+        return _pages.renderArtist(data);
-        return _beathaven.redrawScrollbar();
       }
     });
     return false;
@@ -50,6 +50,13 @@ Ajax = (function() {
     });
     return false;
   };
+  Ajax.prototype.loadAboutPage = function() {
+    $.get('/templates/about.html', function(data) {
+      _pages.renderTextpage(data);
+      return _ajax.setTitle('About');
+    });
+    return false;
+  };
   Ajax.prototype.setArchor = function(anchor) {
     this.referer = this.getAnchor();
     return window.location.hash = '#' + anchor;
@@ -72,6 +79,8 @@ Ajax = (function() {
       _ajax.loadSearchPage();
     } else if (_ajax.getAnchor().match(/\/settings\//)) {
       _ajax.loadSettingsPage();
+    } else if (_ajax.getAnchor().match(/\/about\//)) {
+      _ajax.loadAboutPage();
     } else {
       _ajax.loadSearchPage();
     }

public/javascripts/coffee/beathaven.js

@@ -10,7 +10,7 @@ _settings = null;
 $(function() {
   var l, _ref;
   l = document.location;
-  if ((_ref = l.host) !== 'beathaven.org' && _ref !== 'localhost') {
+  if ((_ref = l.host) !== 'beathaven.org' && _ref !== 'local.beathaven.org') {
     l.href = 'http://beathaven.org/' + l.hash;
   }
   _beathaven = new BeatHaven();
@@ -28,7 +28,7 @@ BeatHaven = (function() {
   BeatHaven.prototype.init = function() {
     this.adjustSizes();
     this.checkRedrawScrollbar();
-    _vkontakte = new Vkontakte(document.location.host === 'beathaven.org' ? 2335068 : 2383163);
+    _vkontakte = new Vkontakte(2335068);
     _vkontakte.init();
     _ajax = new Ajax();
     _player = new Player();

public/javascripts/coffee/pages.js

@@ -52,6 +52,7 @@ Pages = (function() {
     $('.data-container .inner').html('').append(artist_info).append(albums_info);
     yaCounter7596904.hit(_ajax.getAnchor(), data.artist.name, _ajax.referer);
     _ajax.setTitle(data.artist.name);
+    _beathaven.redrawScrollbar();
     return false;
   };
   Pages.prototype.renderSearch = function(data) {
@@ -80,6 +81,10 @@ Pages = (function() {
     return false;
   };
   Pages.prototype.renderSettings = function(data) {
+    if (_session.getUser().name == null) {
+      _ajax.go('/search/');
+      return false;
+    }
     $('.data-container').css({
       background: 'none'
     });
@@ -89,5 +94,17 @@ Pages = (function() {
     $('.settings-container .tabs .tab').first().trigger('click');
     return false;
   };
+  Pages.prototype.renderTextpage = function(data) {
+    $('.data-container').css({
+      background: 'url(/images/concrete_wall_2.png) 0 -30px repeat'
+    });
+    $('.data-container .inner').html(data);
+    _beathaven.redrawScrollbar();
+    return false;
+  };
   return Pages;
-})();
+})();
+$('.about').live('click', function() {
+  _ajax.go('/about/');
+  return false;
+});

public/javascripts/coffee/session.js

@@ -30,5 +30,10 @@ Session = (function() {
     $.post(url, q_params, callback);
     return false;
   };
+  Session.prototype.reloadSession = function() {
+    return _session.query('/user/auth', {}, function(ar) {
+      return _session.setUser(ar.user);
+    });
+  };
   return Session;
 })();

public/javascripts/coffee/settings.js

@@ -2,36 +2,54 @@ var Settings;
 Settings = (function() {
   function Settings() {}
   Settings.prototype.getAccountInfo = function(callback) {
-    return _session.query('/user/update/', {}, callback);
+    _session.query('/user/update/', {}, callback);
+    return false;
   };
   Settings.prototype.saveAccountInfo = function(params, callback) {
-    return _session.query('/user/update', params, callback);
+    _session.query('/user/update', params, callback);
+    return false;
   };
   Settings.prototype.loadFormData = function(form) {
     if (form === 'account') {
       $('.settings-container .form input[name$="username"]').val(_session.getUser().name);
-      return $('.settings-container .form input[name$="email"]').val(_session.getUser().email);
+      $('.settings-container .form input[name$="email"]').val(_session.getUser().email);
     } else if (form === 'lastfm') {
       if (_session.getUser().lastfm_username) {
-        return $('.form-container input[name$="username"]').first().val(_session.getUser().lastfm_username);
+        $('.form-container input[name$="username"]').first().val(_session.getUser().lastfm_username);
       }
     }
+    return false;
+  };
+  Settings.prototype.updateLastfmLogin = function() {
+    if (window.lastfm_popup.closed) {
+      _session.query('/user/auth', {}, function(ar) {
+        _session.setUser(ar.user);
+        return _settings.loadFormData('lastfm');
+      });
+    } else {
+      setTimeout(_settings.updateLastfmLogin, 100);
+    }
+    return false;
   };
   return Settings;
 })();
 $('.settings').live('click', function() {
-  return _ajax.go('/settings/');
+  _ajax.go('/settings/');
+  return false;
 });
 $('.settings-container .tabs .tab').live('click', function() {
   if (!$(this).hasClass('active')) {
     $('.settings-container .tabs .tab').removeClass('active');
     $(this).addClass('active');
     $('.form-container').html($('.forms .' + $(this).attr('data-fieldset')).html());
-    return _settings.loadFormData($(this).attr('data-fieldset'));
+    _settings.loadFormData($(this).attr('data-fieldset'));
   }
+  return false;
 });
 $('.lastfm-connect').live('click', function() {
-  return window.open(_session.getUser().lastfm_login_url);
+  window.lastfm_popup = window.open(_session.getUser().lastfm_login_url);
+  setTimeout(_settings.updateLastfmLogin, 100);
+  return false;
 });
 $('.settings-container .form input').live('blur', function() {
   var active_tab, params;
@@ -41,8 +59,10 @@ $('.settings-container .form input').live('blur', function() {
       username: $('.settings-container .form input[name$="username"]').first().val(),
       email: $('.settings-container .form input[name$="email"]').first().val()
     };
-    return _settings.saveAccountInfo(params, function() {
+    _settings.saveAccountInfo(params, function() {
-      return $('#header-container .hello .greating').text('Hi there, ' + (params.username.length > 0 ? params.username : '%username%') + '!');
+      $('.header-container .hello .greating span').text((params.username.length > 0 ? params.username : '%username%'));
+      return false;
     });
   }
+  return false;
 });

public/javascripts/coffee/vkontakte.js

@@ -1,15 +1,24 @@
 var Vkontakte;
 Vkontakte = (function() {
   Vkontakte.prototype.qr = null;
+  Vkontakte.prototype.api_id = null;
   function Vkontakte(api_id) {
     this.api_id = api_id;
   }
+  Vkontakte.prototype.getApiId = function() {
+    return this.api_id;
+  };
   Vkontakte.prototype.init = function() {
     this.qr = [];
-    VK.init({
+    window.vkAsyncInit = function() {
-      apiId: this.api_id
+      VK.init({
-    });
+        apiId: _vkontakte.getApiId()
-    return VK.Auth.getLoginStatus(this.authInfo);
+      });
+      return VK.Auth.getLoginStatus(_vkontakte.authInfo);
+    };
+    return setTimeout(function() {
+      return $('#vk_api_transport').append('<script async="async" src="http://vkontakte.ru/js/api/openapi.js"></script>');
+    }, 0);
   };
   Vkontakte.prototype.authInfo = function(response) {
     var _session;
@@ -31,20 +40,22 @@ Vkontakte = (function() {
               name: r.response
             }, function(ar2) {
               _session.setUser(ar2.user);
-              return $('.header-container .hello .greating').text('Hi there, ' + (_session.getUser().name ? _session.getUser().name : '%username%') + '!');
+              return $('.header-container .hello .greating').html('Tēnā koe, <span class="settings">' + (_session.getUser().name ? _session.getUser().name : '%username%') + '</span>!');
             });
           });
         } else {
           _session.setUser(ar.user);
         }
-        return $('.header-container .hello .greating').text('Hi there, ' + (_session.getUser().name ? _session.getUser().name : '%username%') + '!');
+        $('.header-container .hello').show();
+        return $('.header-container .hello .greating').html('Tēnā koe, <span class="settings">' + (_session.getUser().name ? _session.getUser().name : '%username%') + '</span>!');
       });
     } else {
       _session = new Session({});
+      _session.setUser({});
       $('#vk_login, .auth_notice').css({
         display: 'block'
       });
-      $('#vk_logout').hide();
+      $('.header-container .hello').hide();
     }
     return window._session = _session;
   };
@@ -117,11 +128,15 @@ Vkontakte = (function() {
   };
   return Vkontakte;
 })();
-$(function() {
+$('#vk_login').live('click', function() {
-  $('#vk_login').click(function() {
+  VK.Auth.login(function(response) {
-    return VK.Auth.login(_vkontakte.authInfo(), 8);
+    _vkontakte.authInfo(response);
-  });
+    return false;
-  return $('#vk_logout').click(function() {
+  }, 8);
-    return VK.Auth.logout(_vkontakte.authInfo());
+  return false;
-  });
+});
+$('#vk_logout').live('click', function() {
+  _ajax.go('/search/');
+  VK.Auth.logout(_vkontakte.authInfo);
+  return false;
 });

public/stylesheets/_sass/albums.scss

@@ -49,7 +49,7 @@
 			
 			.add-album-button-container {
 				position: relative;
-				margin: 10px -25px 0 0;
+				margin: 10px -50px 0 0;
 				text-align: center;
 			}
 		}

public/stylesheets/_sass/header.scss

@@ -1,5 +1,6 @@
 .header-container {
 	.hello {
+		display: none;
 		float: right;
 		margin: 6px 10px 0 0;
 		color: #222;
@@ -8,16 +9,21 @@
 			display: block;
 			float: left;
 			margin-right: 8px;
+			
+			span {
+				border-bottom: #202020 1px dotted;
+				cursor: pointer;
+			}
 		}
 	
-		.settings {
+		.settings-button {
 			float: right;
 			width: 15px;
 			height: 15px;
 			margin: 1px 0;
 			background-image: url(/images/icns/settings.png);
 			cursor: pointer;
-		}
+		}	
 	}
 	
 	.navigation {
@@ -54,7 +60,7 @@
 				}
 			}
 
-			.vk_auth {
+			&.vk_auth {
 				display: none;
 			}
 

public/stylesheets/_sass/misc.scss

@@ -15,9 +15,19 @@
 	@include rounded(3);
 	
 	&.gray {
-		background-color: #EEE;
+		background-color: #e0e0e0;
-		color: #444;
+		color: #404040;
-		border-color: #DDD;
+		text-shadow: #d0d0d0 0px 1px 1px;
+		border-color: #d0d0d0;
+		box-shadow: #c0c0c0 1px 1px 0px;
+	}
+	
+	&.red {
+		background-color: #fab0b0;
+		color: #e05050;
+		text-shadow: #c08080 0px 1px 1px;
+		border-color: #eaa0a0;
+		box-shadow: #da9090 1px 1px 0px;
 	}
 }
 

public/stylesheets/_sass/player.scss

@@ -17,7 +17,7 @@ $icons_dir: "/images/icns/";
 				position: absolute;
 				top: 0px;
 				right: 0px;
-				width: 80px;
+				width: 50px;
 				height: 30px;
 				z-index: 10;
 				@include alpha_gradient(32, 32, 32, '202020');

public/stylesheets/_sass/settings.scss

@@ -53,7 +53,10 @@
 		border-top: #CCC 1px solid;
 		
 		.form {
-			margin: 25px;
+			position: absolute;
+			top: 25px;
+			left: 0;
+			width: 100%;
 			
 			.field {
 				height: 40px;
@@ -94,8 +97,18 @@
 						margin-left: 5px;
 					}
 				}
+				
+				.saved {
+					float: left;
+				}
 			}
 		}
+		
+		.logout {
+			position: absolute;
+			top: 25px;
+			right: 0;
+		}
 	}
 	
 	.forms {

public/stylesheets/_sass/textpage.scss

@@ -0,0 +1,3 @@
+.textpage {
+	margin: 25px;
+}

public/stylesheets/albums.css

@@ -31,7 +31,7 @@
         border: #d0d0d0 1px solid; }
       .albums .album .pic .add-album-button-container {
         position: relative;
-        margin: 10px -25px 0 0;
+        margin: 10px -50px 0 0;
         text-align: center; }
     .albums .album .name {
       display: block;

public/stylesheets/beathaven.css

@@ -5,3 +5,4 @@
 @import "search.css" all;
 @import "albums.css" all;
 @import "settings.css" all;
+@import "textpage.css" all;

public/stylesheets/header.css

@@ -1,4 +1,5 @@
 .header-container .hello {
+  display: none;
   float: right;
   margin: 6px 10px 0 0;
   color: #222; }
@@ -6,7 +7,10 @@
     display: block;
     float: left;
     margin-right: 8px; }
-  .header-container .hello .settings {
+    .header-container .hello .greating span {
+      border-bottom: #202020 1px dotted;
+      cursor: pointer; }
+  .header-container .hello .settings-button {
     float: right;
     width: 15px;
     height: 15px;
@@ -39,7 +43,7 @@
         font-size: 9px;
         font-weight: normal;
         margin: 10px 0 0 4px; }
-    .header-container .navigation li .vk_auth {
+    .header-container .navigation li.vk_auth {
       display: none; }
     .header-container .navigation li a {
       color: inherit;

public/stylesheets/misc.css

@@ -13,9 +13,17 @@
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px; }
   .button.gray {
-    background-color: #EEE;
+    background-color: #e0e0e0;
-    color: #444;
+    color: #404040;
-    border-color: #DDD; }
+    text-shadow: #d0d0d0 0px 1px 1px;
+    border-color: #d0d0d0;
+    box-shadow: #c0c0c0 1px 1px 0px; }
+  .button.red {
+    background-color: #fab0b0;
+    color: #e05050;
+    text-shadow: #c08080 0px 1px 1px;
+    border-color: #eaa0a0;
+    box-shadow: #da9090 1px 1px 0px; }
 
 /* Scrollbars */
 .data-container .scrollbar-pane {

public/stylesheets/player.css

@@ -10,7 +10,7 @@
     position: absolute;
     top: 0px;
     right: 0px;
-    width: 80px;
+    width: 50px;
     height: 30px;
     z-index: 10;
     background: -moz-linear-gradient(left, rgba(32, 32, 32, 0) 0%, #202020 50%, #202020 100%);

public/stylesheets/settings.css

@@ -39,7 +39,10 @@
     height: 500px;
     border-top: #CCC 1px solid; }
     .settings-container .form-container .form {
-      margin: 25px; }
+      position: absolute;
+      top: 25px;
+      left: 0;
+      width: 100%; }
       .settings-container .form-container .form .field {
         height: 40px;
         margin-bottom: 10px;
@@ -75,5 +78,11 @@
           -moz-border-radius: 3px;
           -webkit-border-radius: 3px;
           margin-left: 5px; }
+        .settings-container .form-container .form .field .saved {
+          float: left; }
+    .settings-container .form-container .logout {
+      position: absolute;
+      top: 25px;
+      right: 0; }
   .settings-container .forms {
     display: none; }

public/stylesheets/textpage.css

@@ -0,0 +1,2 @@
+.textpage {
+  margin: 25px; }

public/templates/about.html

@@ -0,0 +1,3 @@
+<div class="textpage">
+	Now back to the good part!
+</div>

public/templates/settings.html

@@ -17,6 +17,13 @@
 					<div class="label">Email:</div>
 					<div class="value"><input name="email" type="text"/></div>
 				</div>
+				
+				<div class="save">
+					<div class="button gray">Hello, my name is Useless Button</div>
+				</div>
+			</div>
+			<div class="logout">
+				<div class="button red" id="vk_logout">Log out</div>
 			</div>
 		</div>
 		<div class="lastfm">