[gnomeweb-wp] created "language selector" area together with the footer to show available translations

[Vinicius Scopel Depizzol <vdepizzol src gnome org>]

commit 2417f5235bc7553d630dc8272354d1df08095e63
Author: Vinicius Depizzol <vdepizzol gmail com>
Date:   Sat Mar 12 03:43:30 2011 -0300

    created "language selector" area together with the footer to show available translations
    
    The actual list of languages is currently fake, but all the css, javascript and html are ready.

 wp-content/themes/gnome-grass/footer.php           |    4 +-
 .../gnome-grass/images/language-selector-bg.png    |  Bin 0 -> 9289 bytes
 .../images/language-selector-wanda-bg.png          |  Bin 0 -> 894 bytes
 wp-content/themes/gnome-grass/js/template.js       |   36 +++++++++++-
 .../themes/gnome-grass/language-selector.php       |   45 ++++++++++++++
 wp-content/themes/gnome-grass/style.css            |   62 +++++++++++++++++---
 6 files changed, 136 insertions(+), 11 deletions(-)
---
diff --git a/wp-content/themes/gnome-grass/footer.php b/wp-content/themes/gnome-grass/footer.php
index f32bb5e..c99f239 100644
--- a/wp-content/themes/gnome-grass/footer.php
+++ b/wp-content/themes/gnome-grass/footer.php
@@ -18,13 +18,13 @@
             <div class="language grid_3">
                 <div>
                     <strong><?php _e( 'This website is available in many languages', 'grass' ); ?></strong><br />
-                    <a href="#FIXME" class="map"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/footer-map.png" alt="<?php _e( 'Switch Language', 'grass' ); ?>" title="<?php _e( 'Switch Language', 'grass' ); ?>" /></a>
+                    <a href="<?php bloginfo('stylesheet_directory'); ?>/language-selector.php" class="map"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/footer-map.png" alt="<?php _e( 'Switch Language', 'grass' ); ?>" title="<?php _e( 'Switch Language', 'grass' ); ?>" /></a>
                 </div>
             </div>
             
             <!-- footnotes -->
             <div id="footnotes" class="grid_9">
-                <?php _e( 'Copyright', 'grass' ); ?> © 2005â??2010 <strong class="gnome_logo"><?php _e( 'The GNOME Project', 'grass' ); ?></strong><br />
+                <?php _e( 'Copyright', 'grass' ); ?> © 2005â??<?php echo date('Y');?> <strong class="gnome_logo"><?php _e( 'The GNOME Project', 'grass' ); ?></strong><br />
                 <small><?php _e( 'Optimised for standards', 'grass' ); ?>. <?php _e( 'Hosted by', 'grass' ); ?> <a href="http://redhat.com";>Red Hat</a>.</small>
             </div>
             
diff --git a/wp-content/themes/gnome-grass/images/language-selector-bg.png b/wp-content/themes/gnome-grass/images/language-selector-bg.png
new file mode 100644
index 0000000..54f9270
Binary files /dev/null and b/wp-content/themes/gnome-grass/images/language-selector-bg.png differ
diff --git a/wp-content/themes/gnome-grass/images/language-selector-wanda-bg.png b/wp-content/themes/gnome-grass/images/language-selector-wanda-bg.png
new file mode 100644
index 0000000..cc7b63f
Binary files /dev/null and b/wp-content/themes/gnome-grass/images/language-selector-wanda-bg.png differ
diff --git a/wp-content/themes/gnome-grass/js/template.js b/wp-content/themes/gnome-grass/js/template.js
index 4c48c85..6c72cf2 100644
--- a/wp-content/themes/gnome-grass/js/template.js
+++ b/wp-content/themes/gnome-grass/js/template.js
@@ -22,5 +22,39 @@ $(document).ready(function() {
                 search_input.addClass('placeholder').val(search_placeholder);
             }
         });        
-    }    
+    }
+    
+    
+    /* Language selector
+     * ====================================================================== */
+    
+    $('#footer .language a.map').click(function(e) {
+        e.preventDefault();
+        
+        if($('#language_selector').length == 0) {
+        
+            $.ajax({
+                'type': 'GET',
+                'url': $(this).attr('href'),
+                'dataType': 'text',
+                'success': function(data) {
+                    $('#footer').after('<div id="language_selector">' + data + '</div>');
+                    window.scrollTo(0, $('body').height());
+                    $('#language_selector').show().addClass('active');
+                    $('html, body').animate({scrollTop: $(window).scrollTop() + $('#language_selector').height()}, 500);
+                }
+            });
+            
+        } else {
+        
+            if($('#language_selector').hasClass('active')) {
+                $('#language_selector').slideUp().removeClass('active');
+            } else {
+                window.scrollTo(0, $('body').height());
+                $('#language_selector').show().addClass('active');
+                $('html, body').animate({scrollTop: $(window).scrollTop() + $('#language_selector').height()}, 500);
+            }
+        
+        }
+    });
 });
diff --git a/wp-content/themes/gnome-grass/language-selector.php b/wp-content/themes/gnome-grass/language-selector.php
new file mode 100644
index 0000000..bf78655
--- /dev/null
+++ b/wp-content/themes/gnome-grass/language-selector.php
@@ -0,0 +1,45 @@
+<?php
+
+/*
+ * FIXME
+ * This must be an automatic list, with proper links and language names.
+ */
+
+?>
+<div class="container_12">
+    <div class="grid_9">
+        <h3>GNOME speaks your language.</h3>
+        
+        <ul>
+            <li class="active"><a href="#">English</a></li>
+            <li><a href="#">Afrikaans</a></li>
+            <li><a href="#">Català </a></li>
+            <li><a href="#">Ä?eÅ¡tina</a></li>
+            <li><a href="#">Deutsch</a></li>
+            <li><a href="#">Español</a></li>
+            <li><a href="#">Français</a></li>
+            <li><a href="#">Hrvatski</a></li>
+            <li><a href="#">Magyar</a></li>
+            <li><a href="#">Indonesia</a></li>
+            <li><a href="#">Italiano</a></li>
+            <li><a href="#">���</a></li>
+            <li><a href="#">Nederlands</a></li>
+            <li><a href="#">Norsk</a></li>
+            <li><a href="#">Polski</a></li>
+            <li><a href="#">Português (BR)</a></li>
+            <li><a href="#">Ð Ñ?Ñ?Ñ?кий</a></li>
+            <li><a href="#">СÑ?пÑ?ки</a></li>
+            <li><a href="#">Svenska</a></li>
+            <li><a href="#">中æ??</a></li>
+        </ul>
+    </div>
+    
+    <div class="grid_3">
+        
+        <div class="help_us_translating">
+            Found a translation bug or want to help translating GNOME? 
+            Join the <a href="http://live.gnome.org/TranslationProject/JoiningTranslation";>GNOME Translation Project</a>!
+        </div>
+        
+    </div>
+</div>
diff --git a/wp-content/themes/gnome-grass/style.css b/wp-content/themes/gnome-grass/style.css
index 81c0abe..253e64b 100644
--- a/wp-content/themes/gnome-grass/style.css
+++ b/wp-content/themes/gnome-grass/style.css
@@ -755,7 +755,7 @@ dl.icon_list dt img {
 }
 #footer div.links div {
     float: left;
-    margin-right: 20px;
+    margin: 0 20px 10px 0;
 }
 #footer div.links div a, #footer div.links div strong {
     display: block;
@@ -791,16 +791,11 @@ dl.icon_list dt img {
 #footer ul.menu > li > a {
     font-weight: bold;
 }
-#footer a {
+#footer .links a {
     color: inherit;
     -webkit-transition: background-color 100ms ease-in;
 }
-#footer .available_languages li.active {
-    background: url(images/selected-language.png) no-repeat right center;
-    margin-right: -10px;
-    padding-right: 10px;
-}
-#footer a:focus {
+#footer .links a:focus {
    background: #ececec;
    padding: 1px 3px;
    margin: -1px -3px;
@@ -816,3 +811,54 @@ dl.icon_list dt img {
 #footer #footnotes small {
     font-size: 80%;
 }
+
+
+/* Language Selector */
+/* ========================================================================== */
+
+
+#language_selector {
+    display: none;
+    /* poor wanda the fish */
+    background: #555753 url(images/language-selector-bg.png) top center repeat-x;
+    clear: left;
+    overflow: hidden;
+}
+#language_selector .container_12 {
+    background: url(images/language-selector-wanda-bg.png) 60px right no-repeat;
+    overflow: hidden;
+}
+#language_selector h3 {
+    color: #f57900;
+    margin: 60px 0 35px;
+}
+#language_selector ul {
+    list-style: none;
+    -moz-column-count: 4;
+    -webkit-column-count: 4;
+    column-count: 4;
+    margin: 10px 0 40px;
+    color: #fff;
+}
+#language_selector ul li {
+    margin: 0;
+    padding: 0;
+    margin: 0 0 7px;
+}
+#language_selector ul li.active {
+    font-weight: bold;
+}
+#language_selector ul a {
+    color: #fff;
+    text-decoration: none;
+}
+#language_selector ul a:hover {
+    text-decoration: underline;
+}
+#language_selector .help_us_translating {
+    color: #d3d7cf;
+    margin-top: 118px;
+}
+#language_selector .help_us_translating a {
+    color: #fff;
+}