More zazz for home page code language selection.

app/styles/home.sass

@@ -32,6 +32,7 @@
     img
       display: block
       margin: 0 auto
+      @include transition(box-shadow .50s ease-in-out)
 
     text-shadow: 2px 2px 5px black
     
@@ -58,14 +59,27 @@
       color: $yellow
       font-size: 90px
       font-family: Bangers
-      @include transition(color .10s linear)
+      @include transition(color .25s ease-in-out)
           
-    &:hover div
+    &:hover div, &.hovered div
       color: lighten($yellow, 20%)
-    &:hover img
+    &:hover img, &.hovered img
       filter: brightness(1.2)
       -webkit-filter: brightness(1.2)
-      box-shadow: 0 0 5px black
+      box-shadow: 0 0 15px black
+
+    .code-language-logo
+      background-color: transparent
+      background-repeat: no-repeat
+      position: absolute
+      right: 35px
+      top: 15px
+      width: 50px
+      height: 50px
+
+      &.inverted
+        filter: invert(100%)
+        -webkit-filter: invert(100%)
 
   .code-languages
     margin: 10px 0 30px 0

app/templates/home.jade

@@ -74,6 +74,7 @@ block content
         h3(data-i18n="home.campaign") Campaign
         h4(data-i18n="home.for_beginners") For Beginners
       .play-text(data-i18n="home.play") Play
+      .code-language-logo
 
   a#multiplayer(href="/play/ladder")
     div.game-mode-wrapper
@@ -84,5 +85,6 @@ block content
         h3(data-i18n="home.multiplayer") Multiplayer
         h4(data-i18n="home.for_developers") For Developers
       .play-text(data-i18n="home.play") Play
+      .code-language-logo
 
   .clearfix

app/views/home_view.coffee

@@ -49,6 +49,10 @@ module.exports = class HomeView extends View
 
     codeLanguage = (me.get('aceConfig') ? {}).language or 'javascript'
     @$el.find(".code-language[data-code-language=#{codeLanguage}]").addClass 'selected-language'
+    @updateLanguageLogos codeLanguage
+
+  updateLanguageLogos: (codeLanguage) ->
+    @$el.find('.game-mode-wrapper .code-language-logo').css('background-image', "url(/images/pages/home/language_logo_#{codeLanguage}.png)").toggleClass 'inverted', (codeLanguage in ['io', 'coffeescript'])
 
   onCodeLanguageSelected: (e) ->
     target = $(e.target).closest('.code-language')
@@ -60,3 +64,8 @@ module.exports = class HomeView extends View
     aceConfig.language = codeLanguage
     me.set 'aceConfig', aceConfig
     me.save()  # me.patch() doesn't work if aceConfig previously existed and we switched just once
+
+    firstButton = @$el.find('#beginner-campaign .game-mode-wrapper').delay(500).addClass('hovered', 500).delay(500).removeClass('hovered', 500)
+    lastButton = @$el.find('#multiplayer .game-mode-wrapper').delay(1000).addClass('hovered', 500).delay(500).removeClass('hovered', 500)
+    $('#page-container').animate {scrollTop: firstButton.offset().top - 100, easing: 'easeInOutCubic'}, 500
+    @updateLanguageLogos codeLanguage