Added site locales

app/coffeescripts/ajax.coffee

@@ -29,13 +29,13 @@ class Ajax
 	loadSearchPage: ->
 		$.get '/templates/search.html', (data) ->
 			_ajax.setArchor '/search/'
-			_pages.renderSearch data
+			_pages.renderSearch _beathaven.localizeHTML $(data)
 		false
 	
 	loadSettingsPage: ->
 		$.get '/templates/settings.html', (data) ->
 			_ajax.setArchor '/settings/'
-			_pages.renderSettings data
+			_pages.renderSettings _beathaven.localizeHTML $(data)
 		false
 	
 	load404Page: ->

app/coffeescripts/beathaven.coffee

@@ -18,13 +18,16 @@ $ ->
 	
 	$(window).resize ->
 		_beathaven.adjustSizes()
+		false
 	window.setTimeout ->
 		_beathaven.checkRedrawScrollbar()
+		false
 	, 500
 
 class BeatHaven
 	
 	last_height: false
+	lang: 'ru'
 	
 	init: ->
 		this.adjustSizes()
@@ -45,6 +48,8 @@ class BeatHaven
 		
 		_settings = new Settings()
 		
+		false
+	
 	adjustSizes: ->
 		$('.data-container').height $(window).height() - $('.header-container').height()
 		$('.data-container').width $(window).width() - $('.player').width()
@@ -53,6 +58,7 @@ class BeatHaven
 		
 		$('.data-container').scrollbar()
 		$('.playlist').scrollbar()
+		false
 	
 	checkRedrawScrollbar: ->
 		focused_id = false
@@ -67,11 +73,33 @@ class BeatHaven
 			focused_id = false
 		window.setTimeout ->
 			_beathaven.checkRedrawScrollbar()
+			false
 		, 500
+		false
 	
 	redrawScrollbar: ->
 		$('.data-container').html $('.data-container').find('.inner').first()
 		$('.data-container').scrollbar()
+		false
+	
+	localizeHTML: (obj) ->
+		unless obj?
+			obj = $('body')
+		$(obj).find('[data-ls]').each ->
+			if _locale[$(this).attr 'data-ls']? and _locale[$(this).attr 'data-ls'][_beathaven.lang]?
+				if this.nodeName is 'INPUT'
+					$(this).val _locale[$(this).attr 'data-ls'][_beathaven.lang]
+				else
+					$(this).text _locale[$(this).attr 'data-ls'][_beathaven.lang]
+		return obj
+	
+	ls: (id, lang) ->
+		unless lang?
+			lang = _beathaven.lang
+		if _locale[id]? and _locale[id][lang]?
+			_locale[id][lang]
+		else
+			id
 
 
 String::htmlsafe = ->

app/coffeescripts/locale.coffee

@@ -0,0 +1,80 @@
+_locale =
+	# Global
+	SEARCH:
+		en: "Search"
+		ru: "Поиск"
+	NEWS:
+		en: "News"
+		ru: "Новости"
+	ABOUT:
+		en: "About"
+		ru: "О проекте"
+	LOGIN:
+		en: "Log in"
+		ru: "Войти"
+	LOGOUT:
+		en: "Log out"
+		ru: "Выйти"
+	ADD_SOME_MUSIC:
+		en: "Add some music to playlist"
+		ru: "Добавьте музыку в плей-лист"
+	LOGIN_PLEASE:
+		en: "Don't forget to log in, please. It's simple."
+		ru: "Авторизуйтесь, пожалуйста. Это действительно просто."
+	REPEAT:
+		en: "Repeat"
+		ru: "Повторять"
+	SHUFFLE:
+		en: "Shuffle"
+		ru: "Перемешать"
+	EMPTY_PLAYLIST:
+		en: "Empty playlist"
+		ru: "Очистить"
+	HELLO:
+		en: "Hi there"
+		ru: "Привет"
+		
+	# Search
+	ARTIST_LOADING_FAILED:
+		en: "Something very bad happened while we tried out to load some info about this artist. How about some other one?"
+		ru: "Что-то ужасное произошло пока мы собирали информацию об этом исполнителе. Может пока поищем другого?"
+	ARTIST_LOADING_IN_PROCESS:
+		en: "Artist info is loading for the first time now. Usually it takes less than a minute, please wait a bit."
+		ru: "Прямо сейчас мы собираем всю возможною информацию об этом исполнителе в первый раз. Обычно это занимает меньше минуты."
+	MISSPELLED:
+		en: "Misspelled?"
+		ru: "Опечатались?"
+	
+	# Settings
+	SETTINGS_ACCOUNT:
+		en: "Account"
+		ru: "Аккаунт"
+	SETTINGS_LASTFM:
+		en: "Last.fm"
+		ru: "Last.fm"
+	USERNAME:
+		en: "Username"
+		ru: "Имя"
+	EMAIL:
+		en: "Email"
+		ru: "Почта"
+	LANG:
+		en: "Language"
+		ru: "Язык"
+	USELESS_BUTTON:
+		en: "Hello, my name is Useless Button"
+		ru: "Привет, меня зовут Бесполезная Кнопка"
+	NOT_CONNECTED:
+		en: "Not connected"
+		ru: "Не подключен"
+	CONNECT:
+		en: "Connect"
+		ru: "Подключить"
+	WINDOW_LANG_RELOAD:
+		en: "To change application language it is needed to reload page. Your current playlist will be emptied and music will stop. Do you really wish to continue?"
+		ru: "Чтобы изменить язык приложения, необходимо перезагрузить страницу. Ваш текущий плей-лист будет очищен и музыка остановится. Вы действительно хотите продолжить?"
+	
+	# Player
+	ADD_TO_NOW_PLAYING:
+		en: "Add to Now Playing"
+		ru: "Добавить в плей-лист"

app/coffeescripts/pages.coffee

@@ -21,7 +21,7 @@ class Pages
 					<div class="pic">
 						<img src="' +(if album.pic then album.pic else '/images/kitteh.png')+ '" alt="' +album.name+ ' by ' +data.artist.name+ '" width="250" height="250"/>
 						<div class="add-album-button-container">
-							<div class="add-album button gray">Add to Now Playing</div>
+							<div class="add-album button gray">'+_beathaven.ls('ADD_TO_NOW_PLAYING')+'</div>
 						</div>
 					</div>
 					<div class="tracklist"><ul></ul></div>

app/coffeescripts/session.coffee

@@ -13,6 +13,8 @@ class Session
 	
 	setUser: (user) ->
 		@user = user
+		_beathaven.lang = @user.lang
+		_beathaven.localizeHTML()
 		false
 		
 	getUser: ->

app/coffeescripts/settings.coffee

@@ -12,6 +12,7 @@ class Settings
 		if form == 'account'
 			$('.settings-container .form input[name$="username"]').val _session.getUser().name
 			$('.settings-container .form input[name$="email"]').val _session.getUser().email
+			$('.settings-container .form select').val _session.getUser().lang
 		else if form == 'lastfm'
 			if _session.getUser().lastfm_username
 				$('.form-container input[name$="username"]').first().val _session.getUser().lastfm_username
@@ -44,13 +45,20 @@ $('.lastfm-connect') .live 'click', ->
 	setTimeout _settings.updateLastfmLogin, 100
 	false
 	
-$('.settings-container .form input').live 'blur', ->
+$('.settings-container .form input, .settings-container .form select').live 'blur', ->
 	active_tab = $('.settings-container .tabs .tab.active').attr 'data-fieldset'
 	if active_tab == 'account'
 		params =
 			username: $('.settings-container .form input[name$="username"]').first().val()
 			email: $('.settings-container .form input[name$="email"]').first().val()
+			lang: $('.settings-container .form select').first().val()
+		lang_changed = params.lang != _session.getUser().lang
+		if lang_changed
+			if not confirm _beathaven.ls 'WINDOW_LANG_RELOAD', params.lang
+				$('.settings-container .form select').val _session.getUser().lang
 		_settings.saveAccountInfo params, ->
+			if lang_changed
+				window.location.reload()
 			$('.header-container .hello .greating span').text (if params.username.length > 0 then params.username else '%username%')
 			false
 	false

app/coffeescripts/vkontakte.coffee

@@ -18,14 +18,14 @@ class Vkontakte
 
 
 		setTimeout ->
-			$('#vk_api_transport').append('<script async="async" src="http://vkontakte.ru/js/api/openapi.js"></script>')
+			$('#vk_api_transport').append('<script async="async" type="text/javascript" src="http://vkontakte.ru/js/api/openapi.js"></script>')
 		, 0
 	
 	authInfo: (response) ->
 		if typeof response isnt 'undefined' and response.session			
 			_session = new Session(response.session)
 
-			$('#vk_login, .auth_notice').hide()
+			$('#vk_login, .auth-notice').hide()
 			$('#vk_logout').css display: 'block'
 			
 			$('#search_field').focus() if $('#search_field').length > 0
@@ -36,7 +36,7 @@ class Vkontakte
 						_session.query '/user/update', name: r.response, (ar2) ->
 							_session.setUser ar2.user
 							$('.header-container .hello .greating')
-								.html 'Tēnā koe, <span class="settings">' +(if _session.getUser().name then _session.getUser().name else '%username%')+ '</span>!'
+								.html _beathaven.ls('HELLO')+', <span class="settings">' +(if _session.getUser().name then _session.getUser().name else '%username%')+ '</span>!'
 							window._session = _session
 							_ajax.detectPage()
 							$('.fullscreen').hide();
@@ -45,7 +45,7 @@ class Vkontakte
 				
 				$('.header-container .hello').show()
 				$('.header-container .hello .greating')
-					.html 'Tēnā koe, <span class="settings">' +(if _session.getUser().name then _session.getUser().name else '%username%')+ '</span>!'
+					.html _beathaven.ls('HELLO')+', <span class="settings">' +(if _session.getUser().name then _session.getUser().name else '%username%')+ '</span>!'
 				window._session = _session
 				_ajax.detectPage()
 				$('.fullscreen').hide();
@@ -58,7 +58,8 @@ class Vkontakte
 		else
 			_session = new Session({})
 			_session.setUser {}
-			$('#vk_login, .auth_notice').css display: 'block'
+			$('#vk_login').css display: 'block'
+			$('.auth-notice').css('left', $('#vk_login').offset().left).show()
 			$('.header-container .hello').hide()
 			window._session = _session
 			_ajax.detectPage()
@@ -128,7 +129,7 @@ class Vkontakte
 			@qr[query]
 		false
 
-$('#vk_login').live 'click', ->
+$('#vk_login, .auth-notice').live 'click', ->
 	VK.Auth.login (response) ->
 		_vkontakte.authInfo(response)
 		false

app/controllers/user_controller.rb

@@ -8,6 +8,7 @@ class UserController < ApplicationController
     if user.nil?
       user = User.new
       user.vkid = params[:mid]
+      user.lang = 'ru'
       user.save
       @res[:newbie] = true
     end
@@ -20,10 +21,13 @@ class UserController < ApplicationController
       :name => user.name,
       :email => user.email,
       :vkid => user.vkid,
-      :lastfm_username => user.lastfm_username,
+      :lang => user.lang,
-      :lastfm_login_url => 'http://www.last.fm/api/auth?api_key='+ LastFmController.api_key +
+      :lastfm_username => user.lastfm_username
-        '&cb=http://'+ request.host << '/lastfm/connect/?sid='+ user.session.key
     }
+    unless user.lastfm_username
+      @res[:lastfm_login_url] = 'http://www.last.fm/api/auth?api_key='+ LastFmController.api_key +
+        '&cb=http://'+ request.host << '/lastfm/connect/?sid='+ user.session.key
+    end
     
     render :json => @res
   end
@@ -36,6 +40,7 @@ class UserController < ApplicationController
     unless params[:username].nil? or params[:email].nil?
       user.name = params[:username]
       user.email = params[:email]
+      user.lang = params[:lang] if ['ru', 'en'].include? params[:lang]
       user.save
     end
     @res[:user] = {
@@ -43,10 +48,13 @@ class UserController < ApplicationController
       :name => user.name,
       :email => user.email,
       :vkid => user.vkid,
-      :lastfm_username => user.lastfm_username,
+      :lang => user.lang,
-      :lastfm_login_url => 'http://www.last.fm/api/auth?api_key='+ LastFmController.api_key +
+      :lastfm_username => user.lastfm_username
-        '&cb=http://'+ request.host << '/lastfm/connect/?sid='+ user.session.key
     }
+    unless user.lastfm_username
+      @res[:lastfm_login_url] = 'http://www.last.fm/api/auth?api_key='+ LastFmController.api_key +
+        '&cb=http://'+ request.host << '/lastfm/connect/?sid='+ user.session.key
+    end
     
     render :json => @res
   end

app/views/layouts/application.html.erb

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 	<head>
-		<title>BetaHaven</title>
+		<title>BeatHaven</title>
 		<meta charset="utf-8"/>
 		<link rel="shortcut icon" href="/favicon.ico" />
 		<link rel="stylesheet" type="text/css" media="screen" href="/stylesheets/beathaven.css" />
@@ -12,6 +12,7 @@
 		<%= javascript_include_tag "jquery/jquery.jplayer.js", :type => "text/javascript", :charset => "utf-8"  %>
 		<%= javascript_include_tag "jquery/jquery.scroll.js", :type => "text/javascript", :charset => "utf-8"  %>
 		<%= javascript_include_tag "coffee/beathaven.js", :type => "text/javascript", :charset => "utf-8" %>
+		<%= javascript_include_tag "coffee/locale.js", :type => "text/javascript", :charset => "utf-8" %>
 		<%= javascript_include_tag "coffee/vkontakte.js", :type => "text/javascript", :charset => "utf-8" %>
 		<%= javascript_include_tag "coffee/session.js", :type => "text/javascript", :charset => "utf-8" %>
 		<%= javascript_include_tag "coffee/ajax.js", :type => "text/javascript", :charset => "utf-8" %>
@@ -27,7 +28,7 @@
 		<div class="player-container">
 			<div class="player">
 				<div id="jplayer"></div>
-				<div class="now-playing">Add some music to playlist</div>
+				<div class="now-playing" data-ls="ADD_SOME_MUSIC"></div>
 				<div class="progress">
 					<div class="loaded">
 						<div class="played"></div>
@@ -45,13 +46,13 @@
 			</div>
 			<div class="additional-controls">
 				<div class="item active" id="repeat">
-					<img src="/images/icns/repeat.png" alt=""/><div class="annotation">Repeat</div>
+					<img src="/images/icns/repeat.png" alt=""/><div class="annotation" data-ls="REPEAT"></div>
 				</div>
 				<div class="item" id="shuffle">
-					<img src="/images/icns/shuffle.png" alt=""/><div class="annotation">Shuffle</div>
+					<img src="/images/icns/shuffle.png" alt=""/><div class="annotation" data-ls="SHUFFLE"></div>
 				</div>
 				<div class="item" id="empty-playlist">
-					<img src="/images/icns/empty.png" alt=""/><div class="annotation">Empty Playlist</div>
+					<img src="/images/icns/empty.png" alt=""/><div class="annotation" data-ls="EMPTY_PLAYLIST"></div>
 				</div>
 			</div>
 		</div>
@@ -62,10 +63,10 @@
 			</div>
 			<ul class="navigation">
 				<li class="logo search">BeatHaven<div class="version">0.4b</div></li>
-				<li class="search">Search</li>
+				<li class="search" data-ls="SEARCH"></li>
-				<li><a href="https://twitter.com/#!/beat_haven" target="_blank">News</a></li>
+				<li><a href="http://blog.beathaven.org/" target="_blank" data-ls="NEWS"></a></li>
-				<li class="about">About</li>
+				<li class="about" data-ls="ABOUT"></li>
-				<li class="vk_auth" id="vk_login">Login</li>
+				<li class="vk_auth" id="vk_login" data-ls="LOGIN"></li>
 			</ul>
 		</div>
 		<div class="data-container" class="css-scrollbar">
@@ -73,7 +74,10 @@
 		</div>
 
 		<div id="vk_api_transport"></div>
-		<div class="auth_notice"><div class="arrow">&uarr;</div>Don't forget to log in, please. It's simple.</div>
+		<div class="auth-notice">
+			<div class="arrow">&uarr;</div>
+			<span data-ls="LOGIN_PLEASE"></span>
+		</div>
 		<div class="fullscreen">
 			<div class="inner">
 				<img src="/images/loader.gif" alt=""/>

db/migrate/20110630035132_add_lang_to_user.rb

@@ -0,0 +1,9 @@
+class AddLangToUser < ActiveRecord::Migration
+  def self.up
+    add_column :users, :lang, :string
+  end
+
+  def self.down
+    remove_column :users, :lang
+  end
+end

db/schema.rb

@@ -10,7 +10,7 @@
 #
 # It's strongly recommended to check this file into your version control system.
 
-ActiveRecord::Schema.define(:version => 20110624073136) do
+ActiveRecord::Schema.define(:version => 20110630035132) do
 
   create_table "albums", :force => true do |t|
     t.string   "name"
@@ -101,6 +101,7 @@ ActiveRecord::Schema.define(:version => 20110624073136) do
     t.datetime "updated_at"
     t.string   "lastfm_key"
     t.string   "lastfm_username"
+    t.string   "lang"
   end
 
 end

public/javascripts/coffee/ajax.js

@@ -32,14 +32,14 @@ Ajax = (function() {
   Ajax.prototype.loadSearchPage = function() {
     $.get('/templates/search.html', function(data) {
       _ajax.setArchor('/search/');
-      return _pages.renderSearch(data);
+      return _pages.renderSearch(_beathaven.localizeHTML($(data)));
     });
     return false;
   };
   Ajax.prototype.loadSettingsPage = function() {
     $.get('/templates/settings.html', function(data) {
       _ajax.setArchor('/settings/');
-      return _pages.renderSettings(data);
+      return _pages.renderSettings(_beathaven.localizeHTML($(data)));
     });
     return false;
   };

public/javascripts/coffee/beathaven.js

@@ -16,15 +16,18 @@ $(function() {
   _beathaven = new BeatHaven();
   _beathaven.init();
   $(window).resize(function() {
-    return _beathaven.adjustSizes();
+    _beathaven.adjustSizes();
+    return false;
   });
   return window.setTimeout(function() {
-    return _beathaven.checkRedrawScrollbar();
+    _beathaven.checkRedrawScrollbar();
+    return false;
   }, 500);
 });
 BeatHaven = (function() {
   function BeatHaven() {}
   BeatHaven.prototype.last_height = false;
+  BeatHaven.prototype.lang = 'ru';
   BeatHaven.prototype.init = function() {
     this.adjustSizes();
     this.checkRedrawScrollbar();
@@ -35,7 +38,8 @@ BeatHaven = (function() {
     _player.initJplayer();
     _search = new Search();
     _pages = new Pages();
-    return _settings = new Settings();
+    _settings = new Settings();
+    return false;
   };
   BeatHaven.prototype.adjustSizes = function() {
     $('.data-container').height($(window).height() - $('.header-container').height());
@@ -43,7 +47,8 @@ BeatHaven = (function() {
     $('.player-container').height($(window).height());
     $('.playlist').height($(window).height() - $('.player').height() - $('.player-container .additional-controls').height());
     $('.data-container').scrollbar();
-    return $('.playlist').scrollbar();
+    $('.playlist').scrollbar();
+    return false;
   };
   BeatHaven.prototype.checkRedrawScrollbar = function() {
     var focused_id, outer_height;
@@ -60,13 +65,41 @@ BeatHaven = (function() {
       document.getElementById(focused_id).focus();
       focused_id = false;
     }
-    return window.setTimeout(function() {
+    window.setTimeout(function() {
-      return _beathaven.checkRedrawScrollbar();
+      _beathaven.checkRedrawScrollbar();
+      return false;
     }, 500);
+    return false;
   };
   BeatHaven.prototype.redrawScrollbar = function() {
     $('.data-container').html($('.data-container').find('.inner').first());
-    return $('.data-container').scrollbar();
+    $('.data-container').scrollbar();
+    return false;
+  };
+  BeatHaven.prototype.localizeHTML = function(obj) {
+    if (obj == null) {
+      obj = $('body');
+    }
+    $(obj).find('[data-ls]').each(function() {
+      if ((_locale[$(this).attr('data-ls')] != null) && (_locale[$(this).attr('data-ls')][_beathaven.lang] != null)) {
+        if (this.nodeName === 'INPUT') {
+          return $(this).val(_locale[$(this).attr('data-ls')][_beathaven.lang]);
+        } else {
+          return $(this).text(_locale[$(this).attr('data-ls')][_beathaven.lang]);
+        }
+      }
+    });
+    return obj;
+  };
+  BeatHaven.prototype.ls = function(id, lang) {
+    if (lang == null) {
+      lang = _beathaven.lang;
+    }
+    if ((_locale[id] != null) && (_locale[id][lang] != null)) {
+      return _locale[id][lang];
+    } else {
+      return id;
+    }
   };
   return BeatHaven;
 })();

public/javascripts/coffee/locale.js

@@ -0,0 +1,99 @@
+var _locale;
+_locale = {
+  SEARCH: {
+    en: "Search",
+    ru: "Поиск"
+  },
+  NEWS: {
+    en: "News",
+    ru: "Новости"
+  },
+  ABOUT: {
+    en: "About",
+    ru: "О проекте"
+  },
+  LOGIN: {
+    en: "Log in",
+    ru: "Войти"
+  },
+  LOGOUT: {
+    en: "Log out",
+    ru: "Выйти"
+  },
+  ADD_SOME_MUSIC: {
+    en: "Add some music to playlist",
+    ru: "Добавьте музыку в плей-лист"
+  },
+  LOGIN_PLEASE: {
+    en: "Don't forget to log in, please. It's simple.",
+    ru: "Авторизуйтесь, пожалуйста. Это действительно просто."
+  },
+  REPEAT: {
+    en: "Repeat",
+    ru: "Повторять"
+  },
+  SHUFFLE: {
+    en: "Shuffle",
+    ru: "Перемешать"
+  },
+  EMPTY_PLAYLIST: {
+    en: "Empty playlist",
+    ru: "Очистить"
+  },
+  HELLO: {
+    en: "Hi there",
+    ru: "Привет"
+  },
+  ARTIST_LOADING_FAILED: {
+    en: "Something very bad happened while we tried out to load some info about this artist. How about some other one?",
+    ru: "Что-то ужасное произошло пока мы собирали информацию об этом исполнителе. Может пока поищем другого?"
+  },
+  ARTIST_LOADING_IN_PROCESS: {
+    en: "Artist info is loading for the first time now. Usually it takes less than a minute, please wait a bit.",
+    ru: "Прямо сейчас мы собираем всю возможною информацию об этом исполнителе в первый раз. Обычно это занимает меньше минуты."
+  },
+  MISSPELLED: {
+    en: "Misspelled?",
+    ru: "Опечатались?"
+  },
+  SETTINGS_ACCOUNT: {
+    en: "Account",
+    ru: "Аккаунт"
+  },
+  SETTINGS_LASTFM: {
+    en: "Last.fm",
+    ru: "Last.fm"
+  },
+  USERNAME: {
+    en: "Username",
+    ru: "Имя"
+  },
+  EMAIL: {
+    en: "Email",
+    ru: "Почта"
+  },
+  LANG: {
+    en: "Language",
+    ru: "Язык"
+  },
+  USELESS_BUTTON: {
+    en: "Hello, my name is Useless Button",
+    ru: "Привет, меня зовут Бесполезная Кнопка"
+  },
+  NOT_CONNECTED: {
+    en: "Not connected",
+    ru: "Не подключен"
+  },
+  CONNECT: {
+    en: "Connect",
+    ru: "Подключить"
+  },
+  WINDOW_LANG_RELOAD: {
+    en: "To change application language it is needed to reload page. Your current playlist will be emptied and music will stop. Do you really wish to continue?",
+    ru: "Чтобы изменить язык приложения, необходимо перезагрузить страницу. Ваш текущий плей-лист будет очищен и музыка остановится. Вы действительно хотите продолжить?"
+  },
+  ADD_TO_NOW_PLAYING: {
+    en: "Add to Now Playing",
+    ru: "Добавить в плей-лист"
+  }
+};

public/javascripts/coffee/pages.js

@@ -23,7 +23,7 @@ Pages = (function() {
 					<div class="pic">\
 						<img src="' + (album.pic ? album.pic : '/images/kitteh.png') + '" alt="' + album.name + ' by ' + data.artist.name + '" width="250" height="250"/>\
 						<div class="add-album-button-container">\
-							<div class="add-album button gray">Add to Now Playing</div>\
+							<div class="add-album button gray">' + _beathaven.ls('ADD_TO_NOW_PLAYING') + '</div>\
 						</div>\
 					</div>\
 					<div class="tracklist"><ul></ul></div>\

public/javascripts/coffee/session.js

@@ -16,6 +16,8 @@ Session = (function() {
   }
   Session.prototype.setUser = function(user) {
     this.user = user;
+    _beathaven.lang = this.user.lang;
+    _beathaven.localizeHTML();
     return false;
   };
   Session.prototype.getUser = function() {

public/javascripts/coffee/settings.js

@@ -13,6 +13,7 @@ Settings = (function() {
     if (form === 'account') {
       $('.settings-container .form input[name$="username"]').val(_session.getUser().name);
       $('.settings-container .form input[name$="email"]').val(_session.getUser().email);
+      $('.settings-container .form select').val(_session.getUser().lang);
     } else if (form === 'lastfm') {
       if (_session.getUser().lastfm_username) {
         $('.form-container input[name$="username"]').first().val(_session.getUser().lastfm_username);
@@ -51,15 +52,25 @@ $('.lastfm-connect').live('click', function() {
   setTimeout(_settings.updateLastfmLogin, 100);
   return false;
 });
-$('.settings-container .form input').live('blur', function() {
+$('.settings-container .form input, .settings-container .form select').live('blur', function() {
-  var active_tab, params;
+  var active_tab, lang_changed, params;
   active_tab = $('.settings-container .tabs .tab.active').attr('data-fieldset');
   if (active_tab === 'account') {
     params = {
       username: $('.settings-container .form input[name$="username"]').first().val(),
-      email: $('.settings-container .form input[name$="email"]').first().val()
+      email: $('.settings-container .form input[name$="email"]').first().val(),
+      lang: $('.settings-container .form select').first().val()
     };
+    lang_changed = params.lang !== _session.getUser().lang;
+    if (lang_changed) {
+      if (!confirm(_beathaven.ls('WINDOW_LANG_RELOAD', params.lang))) {
+        $('.settings-container .form select').val(_session.getUser().lang);
+      }
+    }
     _settings.saveAccountInfo(params, function() {
+      if (lang_changed) {
+        window.location.reload();
+      }
       $('.header-container .hello .greating span').text((params.username.length > 0 ? params.username : '%username%'));
       return false;
     });

public/javascripts/coffee/vkontakte.js

@@ -19,14 +19,14 @@ Vkontakte = (function() {
       });
     };
     return setTimeout(function() {
-      return $('#vk_api_transport').append('<script async="async" src="http://vkontakte.ru/js/api/openapi.js"></script>');
+      return $('#vk_api_transport').append('<script async="async" type="text/javascript" src="http://vkontakte.ru/js/api/openapi.js"></script>');
     }, 0);
   };
   Vkontakte.prototype.authInfo = function(response) {
     var _session;
     if (typeof response !== 'undefined' && response.session) {
       _session = new Session(response.session);
-      $('#vk_login, .auth_notice').hide();
+      $('#vk_login, .auth-notice').hide();
       $('#vk_logout').css({
         display: 'block'
       });
@@ -42,7 +42,7 @@ Vkontakte = (function() {
               name: r.response
             }, function(ar2) {
               _session.setUser(ar2.user);
-              $('.header-container .hello .greating').html('Tēnā koe, <span class="settings">' + (_session.getUser().name ? _session.getUser().name : '%username%') + '</span>!');
+              $('.header-container .hello .greating').html(_beathaven.ls('HELLO') + ', <span class="settings">' + (_session.getUser().name ? _session.getUser().name : '%username%') + '</span>!');
               window._session = _session;
               _ajax.detectPage();
               return $('.fullscreen').hide();
@@ -52,7 +52,7 @@ Vkontakte = (function() {
           _session.setUser(ar.user);
         }
         $('.header-container .hello').show();
-        $('.header-container .hello .greating').html('Tēnā koe, <span class="settings">' + (_session.getUser().name ? _session.getUser().name : '%username%') + '</span>!');
+        $('.header-container .hello .greating').html(_beathaven.ls('HELLO') + ', <span class="settings">' + (_session.getUser().name ? _session.getUser().name : '%username%') + '</span>!');
         window._session = _session;
         _ajax.detectPage();
         return $('.fullscreen').hide();
@@ -66,9 +66,10 @@ Vkontakte = (function() {
     } else {
       _session = new Session({});
       _session.setUser({});
-      $('#vk_login, .auth_notice').css({
+      $('#vk_login').css({
         display: 'block'
       });
+      $('.auth-notice').css('left', $('#vk_login').offset().left).show();
       $('.header-container .hello').hide();
       window._session = _session;
       _ajax.detectPage();
@@ -152,7 +153,7 @@ Vkontakte = (function() {
   };
   return Vkontakte;
 })();
-$('#vk_login').live('click', function() {
+$('#vk_login, .auth-notice').live('click', function() {
   VK.Auth.login(function(response) {
     _vkontakte.authInfo(response);
     return false;

public/stylesheets/_sass/misc.scss

@@ -45,6 +45,10 @@
 		border-color: #eaa0a0;
 		box-shadow: #da9090 1px 1px 0px;
 	}
+	
+	&.big {
+		font-size: 22px;
+	}
 }
 
 /* Scrollbars */
@@ -129,20 +133,22 @@
 	clear: both;
 }
 
-.auth_notice {
+.auth-notice {
 	display: none;
 	position: absolute;
-	background-color: #07F;
+	background-color: #60a0ff;
-	color: #FFF;
+	color: #ffffff;
 	top: 32px;
-	left: 280px;
+	left: 290px;
-	padding: 8px;
+	line-height: 35px;
-	border: #05D 1px solid;
+	padding-right: 10px;
+	border: #4080dd 1px solid;
 	@include rounded(3);
+	cursor: pointer;
 	
 	.arrow {
 		float: left;
-		margin: -8px 15px 0 8px;
+		margin: -5px 10px 0 10px;
 		font-size: 25px;
 		font-weight: bold;
 	}

public/stylesheets/_sass/search.scss

@@ -12,15 +12,6 @@
 			border: #CCC 1px solid;
 			@include rounded(3);
 		}
-	
-		#search_button {
-			width: 100px;
-			font-size: 24px;
-			padding: 4px;
-			background-color: #DDD;
-			border: #CCC 1px solid;
-			@include rounded(3);
-		}
 	}
 	
 	.spinner {

public/stylesheets/_sass/settings.scss

@@ -80,22 +80,26 @@
 					input[type="text"]{
 						font-size: 24px;
 						padding: 4px;
+						background-color: #ffffff;
+						color: #202020;
 						border: #CCC 1px solid;
 						@include rounded(3);
 						width: 300px;
 					}
+					
+					select {
+						font-size: 24px;
+						background-color: #ffffff;
+						color: #202020;
+						border: #CCC 1px solid;
+						width: 310px;
+						height: 38px;
+					}
 				}
 				
 				.action-button {
-					input[type="button"]{
+					float: left;
-						width: 120px;
+					margin: 6px 0 0 5px;
-						font-size: 24px;
-						padding: 4px;
-						background-color: #DDD;
-						border: #CCC 1px solid;
-						@include rounded(3);
-						margin-left: 5px;
-					}
 				}
 				
 				.saved {

public/stylesheets/misc.css

@@ -37,6 +37,8 @@
     text-shadow: #c08080 0px 1px 1px;
     border-color: #eaa0a0;
     box-shadow: #da9090 1px 1px 0px; }
+  .button.big {
+    font-size: 22px; }
 
 /* Scrollbars */
 .data-container .scrollbar-pane {
@@ -86,20 +88,22 @@
   height: 30px;
   clear: both; }
 
-.auth_notice {
+.auth-notice {
   display: none;
   position: absolute;
-  background-color: #07F;
+  background-color: #60a0ff;
-  color: #FFF;
+  color: #ffffff;
   top: 32px;
-  left: 280px;
+  left: 290px;
-  padding: 8px;
+  line-height: 35px;
-  border: #05D 1px solid;
+  padding-right: 10px;
+  border: #4080dd 1px solid;
   border-radius: 3px;
   -moz-border-radius: 3px;
-  -webkit-border-radius: 3px; }
+  -webkit-border-radius: 3px;
-  .auth_notice .arrow {
+  cursor: pointer; }
+  .auth-notice .arrow {
     float: left;
-    margin: -8px 15px 0 8px;
+    margin: -5px 10px 0 10px;
     font-size: 25px;
     font-weight: bold; }

public/stylesheets/search.css

@@ -9,15 +9,6 @@
     border-radius: 3px;
     -moz-border-radius: 3px;
     -webkit-border-radius: 3px; }
-  .search-container #search_form #search_button {
-    width: 100px;
-    font-size: 24px;
-    padding: 4px;
-    background-color: #DDD;
-    border: #CCC 1px solid;
-    border-radius: 3px;
-    -moz-border-radius: 3px;
-    -webkit-border-radius: 3px; }
   .search-container .spinner {
     display: none;
     margin: 20px 0 0 175px; }

public/stylesheets/settings.css

@@ -63,21 +63,23 @@
           .settings-container .form-container .form .field .value input[type="text"] {
             font-size: 24px;
             padding: 4px;
+            background-color: #ffffff;
+            color: #202020;
             border: #CCC 1px solid;
             border-radius: 3px;
             -moz-border-radius: 3px;
             -webkit-border-radius: 3px;
             width: 300px; }
-        .settings-container .form-container .form .field .action-button input[type="button"] {
+          .settings-container .form-container .form .field .value select {
-          width: 120px;
             font-size: 24px;
-          padding: 4px;
+            background-color: #ffffff;
-          background-color: #DDD;
+            color: #202020;
             border: #CCC 1px solid;
-          border-radius: 3px;
+            width: 310px;
-          -moz-border-radius: 3px;
+            height: 38px; }
-          -webkit-border-radius: 3px;
+        .settings-container .form-container .form .field .action-button {
-          margin-left: 5px; }
+          float: left;
+          margin: 6px 0 0 5px; }
         .settings-container .form-container .form .field .saved {
           float: left; }
     .settings-container .form-container .logout {

public/templates/search.html

@@ -1,14 +1,14 @@
 <div class="search-container">
 	<form action="" method="post" id="search_form">
 		<input type="text" id="search_field"/>
-		<input type="submit" value="Search" id="search_button"/>
+		<input type="submit" value="" id="search_button" class="button gray big" data-ls="SEARCH"/>
 	</form>
 	<img class="spinner" src="/images/loader.gif" alt=""/>
-	<div class="artist_loading failed">Something very bad happened while we tried out to load some info about this artist. How about some other one?</div>
+	<div class="artist_loading failed" data-ls="ARTIST_LOADING_FAILED"></div>
-	<div class="artist_loading ok">Artist info is loading for the first time now. Usually it takes less than a minute, please wait a bit.</div>
+	<div class="artist_loading ok" data-ls="ARTIST_LOADING_IN_PROCESS"></div>
 	<div class="artist_pics"></div>
 	<div class="suggestions">
-		<div>Misspelled?</div>
+		<div data-ls="MISSPELLED"></div>
 		<ul></ul>
 	</div>
 </div>

public/templates/settings.html

@@ -1,37 +1,46 @@
 <div class="settings-container">
 	<div class="tabs">
 		<div class="left-space"></div>
-		<div class="tab" data-fieldset="account">Account</div>
+		<div class="tab" data-fieldset="account" data-ls="SETTINGS_ACCOUNT"></div>
 		<div class="middle-space"></div>
-		<div class="tab" data-fieldset="lastfm">Last.fm</div>
+		<div class="tab" data-fieldset="lastfm" data-ls="SETTINGS_LASTFM"></div>
 	</div>
 	<div class="form-container"></div>
 	<div class="forms">
 		<div class="account">
 			<div class="form">
 				<div class="field">
-					<div class="label">Username:</div>
+					<div class="label" data-ls="USERNAME"></div>
 					<div class="value"><input name="username" type="text"/></div>
 				</div>
 				<div class="field">
-					<div class="label">Email:</div>
+					<div class="label" data-ls="EMAIL"></div>
 					<div class="value"><input name="email" type="text"/></div>
 				</div>
+				<div class="field">
+					<div class="label" data-ls="LANG"></div>
+					<div class="value">
+						<select name="lang">
+							<option value="ru">Русский</option>
+							<option value="en">English</option>
+						</select>
+					</div>
+				</div>
 				
 				<div class="save">
-					<div class="button gray">Hello, my name is Useless Button</div>
+					<div class="button gray" data-ls="USELESS_BUTTON"></div>
 				</div>
 			</div>
 			<div class="logout">
-				<div class="button red" id="vk_logout">Log out</div>
+				<div class="button red" id="vk_logout" data-ls="LOGOUT"></div>
 			</div>
 		</div>
 		<div class="lastfm">
 			<div class="form">
 				<div class="field">
-					<div class="label">Username:</div>
+					<div class="label" data-ls="USERNAME"></div>
-					<div class="value"><input name="username" type="text" disabled="disabled" readonly="readonly" value="Not connected" /></div>
+					<div class="value"><input name="username" type="text" disabled="disabled" readonly="readonly" value="" data-ls="NOT_CONNECTED" /></div>
-					<div class="action-button"><input type="button" class="lastfm-connect" value="Connect"/></div>
+					<div class="action-button"><div class="lastfm-connect button gray big" data-ls="CONNECT"></div></div>
 				</div>
 			</div>
 		</div>