Init spinner

app/coffeescripts/beathaven.coffee

@@ -44,8 +44,6 @@ class BeatHaven
 		_pages = new Pages()
 		
 		_settings = new Settings()
-		
-		_ajax.detectPage()
 	
 	adjustSizes: ->
 		$('.data-container').height $(window).height() - $('.header-container').height()

app/coffeescripts/pages.coffee

@@ -80,7 +80,7 @@ class Pages
 		false
 	
 	renderSettings: (data) ->
-		unless _session.getUser().name?
+		unless _session.getUser().id?
 			_ajax.go('/search/')
 			return false
 		$('.data-container').css background: 'none'

app/coffeescripts/vkontakte.coffee

@@ -37,12 +37,18 @@ class Vkontakte
 							_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>!'
+							window._session = _session
+							_ajax.detectPage()
+							$('.fullscreen').hide();
 				else
 					_session.setUser ar.user
 				
 				$('.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>!'
+				window._session = _session
+				_ajax.detectPage()
+				$('.fullscreen').hide();
 			
 			if response.session.expire?
 				setTimeout ->
@@ -54,10 +60,12 @@ class Vkontakte
 			_session.setUser {}
 			$('#vk_login, .auth_notice').css display: 'block'
 			$('.header-container .hello').hide()
-		window._session = _session
+			window._session = _session
+			_ajax.detectPage()
+			$('.fullscreen').hide();
 	
 	auth: ->
-		VK.Auth.login (response) ->
+		VK.Auth.getLoginStatus (response) ->
 			_vkontakte.authInfo(response)
 			false
 		, 8
@@ -121,7 +129,10 @@ class Vkontakte
 		false
 
 $('#vk_login').live 'click', ->
-	_vkontakte.auth()
+	VK.Auth.login (response) ->
+		_vkontakte.authInfo(response)
+		false
+	, 8
 	false
 $('#vk_logout').live 'click', ->
 	_ajax.go '/search/';

app/views/layouts/application.html.erb

@@ -74,6 +74,11 @@
 
 		<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="fullscreen">
+			<div class="inner">
+				<img src="/images/loader.gif" alt=""/>
+			</div>
+		</div>
 		
 		<!-- Yandex.Metrika counter -->
 		<script type="text/javascript">var yaParams = {};</script><div style="display:none;"><script type="text/javascript">(function(w, c) { (w[c] = w[c] || []).push(function() { try { w.yaCounter7596904 = new Ya.Metrika({id:7596904, enableAll: true,params:window.yaParams||{ }}); } catch(e) { } }); })(window, "yandex_metrika_callbacks");</script></div><script src="//mc.yandex.ru/metrika/watch.js" type="text/javascript" defer="defer"></script><noscript><div><img src="//mc.yandex.ru/watch/7596904" style="position:absolute; left:-9999px;" alt="" /></div></noscript>

public/javascripts/coffee/beathaven.js

@@ -35,8 +35,7 @@ BeatHaven = (function() {
     _player.initJplayer();
     _search = new Search();
     _pages = new Pages();
-    _settings = new Settings();
+    return _settings = new Settings();
-    return _ajax.detectPage();
   };
   BeatHaven.prototype.adjustSizes = function() {
     $('.data-container').height($(window).height() - $('.header-container').height());

public/javascripts/coffee/pages.js

@@ -81,7 +81,7 @@ Pages = (function() {
     return false;
   };
   Pages.prototype.renderSettings = function(data) {
-    if (_session.getUser().name == null) {
+    if (_session.getUser().id == null) {
       _ajax.go('/search/');
       return false;
     }

public/javascripts/coffee/vkontakte.js

@@ -42,17 +42,23 @@ Vkontakte = (function() {
               name: r.response
             }, function(ar2) {
               _session.setUser(ar2.user);
-              return $('.header-container .hello .greating').html('Tēnā koe, <span class="settings">' + (_session.getUser().name ? _session.getUser().name : '%username%') + '</span>!');
+              $('.header-container .hello .greating').html('Tēnā koe, <span class="settings">' + (_session.getUser().name ? _session.getUser().name : '%username%') + '</span>!');
+              window._session = _session;
+              _ajax.detectPage();
+              return $('.fullscreen').hide();
             });
           });
         } else {
           _session.setUser(ar.user);
         }
         $('.header-container .hello').show();
-        return $('.header-container .hello .greating').html('Tēnā koe, <span class="settings">' + (_session.getUser().name ? _session.getUser().name : '%username%') + '</span>!');
+        $('.header-container .hello .greating').html('Tēnā koe, <span class="settings">' + (_session.getUser().name ? _session.getUser().name : '%username%') + '</span>!');
+        window._session = _session;
+        _ajax.detectPage();
+        return $('.fullscreen').hide();
       });
       if (response.session.expire != null) {
-        setTimeout(function() {
+        return setTimeout(function() {
           _vkontakte.auth();
           return false;
         }, response.session.expire * 1000 - new Date().getTime() + 1000);
@@ -64,11 +70,13 @@ Vkontakte = (function() {
         display: 'block'
       });
       $('.header-container .hello').hide();
+      window._session = _session;
+      _ajax.detectPage();
+      return $('.fullscreen').hide();
     }
-    return window._session = _session;
   };
   Vkontakte.prototype.auth = function() {
-    VK.Auth.login(function(response) {
+    VK.Auth.getLoginStatus(function(response) {
       _vkontakte.authInfo(response);
       return false;
     }, 8);
@@ -145,7 +153,10 @@ Vkontakte = (function() {
   return Vkontakte;
 })();
 $('#vk_login').live('click', function() {
-  _vkontakte.auth();
+  VK.Auth.login(function(response) {
+    _vkontakte.authInfo(response);
+    return false;
+  }, 8);
   return false;
 });
 $('#vk_logout').live('click', function() {

public/stylesheets/_sass/misc.scss

@@ -1,9 +1,25 @@
 @import "rounded";
 
 .fullscreen {
+	position: absolute;
+	z-index: 9999;
+	top: 0;
+	left: 0;
 	width: 100%;
 	height: 100%;
+	background-color: #ffffff;
 	text-align: center;
+	
+	background: rgba(255, 255, 255, 0.9);
+	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#e5ffffff, endColorstr=#e5ffffff);
+	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#e5ffffff, endColorstr=#e5ffffff)";
+	
+	.inner {
+		position: relative;
+		top: 50%;
+		margin-top: -50px;
+		height: 100px;
+	}
 }
 
 .button {
@@ -119,7 +135,7 @@
 	background-color: #07F;
 	color: #FFF;
 	top: 32px;
-	left: 230px;
+	left: 280px;
 	padding: 8px;
 	border: #05D 1px solid;
 	@include rounded(3);

public/stylesheets/misc.css

@@ -1,7 +1,20 @@
 .fullscreen {
+  position: absolute;
+  z-index: 9999;
+  top: 0;
+  left: 0;
   width: 100%;
   height: 100%;
-  text-align: center; }
+  background-color: #ffffff;
+  text-align: center;
+  background: rgba(255, 255, 255, 0.9);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#e5ffffff, endColorstr=#e5ffffff);
+  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#e5ffffff, endColorstr=#e5ffffff)"; }
+  .fullscreen .inner {
+    position: relative;
+    top: 50%;
+    margin-top: -50px;
+    height: 100px; }
 
 .button {
   display: inline;
@@ -79,7 +92,7 @@
   background-color: #07F;
   color: #FFF;
   top: 32px;
-  left: 230px;
+  left: 280px;
   padding: 8px;
   border: #05D 1px solid;
   border-radius: 3px;