Merge branch 'newstyles'
[astakos] / snf-astakos-app / astakos / im / static / im / cloudbar / cloudbar.js
index 7a338a5..6351956 100644 (file)
@@ -1,3 +1,9 @@
+function equalWidths ( secondEl, firstEl) {
+       secondEl.css('width',firstEl.outerWidth() );
+}
+
+
+
 $(document).ready(function(){
     
     /*
@@ -21,6 +27,12 @@ $(document).ready(function(){
     var css = $("<link />");
     css.attr({rel:'stylesheet', type:'text/css', href:cssloc + 'cloudbar.css'});
     $("head").append(css);
+    
+    // load fonts
+    var font_url = 'http://fonts.googleapis.com/css?family=Didact+Gothic&subset=latin,greek,greek-ext';
+    var css_font = $("<link />");
+    css_font.attr({rel:'stylesheet', type:'text/css', href:font_url});
+    $("head").append(css_font);
 
     // load service specific css
     var SKIP_ADDITIONAL_CSS = window.SKIP_ADDITIONAL_CSS == undefined ? false : window.SKIP_ADDITIONAL_CSS;
@@ -32,7 +44,7 @@ $(document).ready(function(){
     }
 
     var root = $('body');
-    var bar = $('<div class="cloudbar"></div>');
+    var bar = $('<div class="cloudbar servicesbar clearfix"></div>');
     var services = $('<ul class="services"></ul>');
     var profile = $('<div class="profile"></div>');
     
@@ -53,7 +65,7 @@ $(document).ready(function(){
             slink.attr('title', el.name);
             sli.append(slink);
             services.append(sli);
-            if (el.id == ACTIVE_MENU) {
+            if (el.id == ACTIVE_MENU || el.name == ACTIVE_MENU) {
                 sli.addClass("active");
             }
         });
@@ -69,7 +81,7 @@ $(document).ready(function(){
     $.getJSON(get_menu_url, function(data) {
         $.each(data, function(i,el) {
             if (i == 0){
-                username.text(el.name);
+                username.html('<span>'+el.name+'</span>');
                 username.attr('href', el.url);
                 user.removeClass('full');
             }else{
@@ -99,24 +111,25 @@ $(document).ready(function(){
 
     // ie fix
     user.hover(function(){$(this).addClass("hover")}, function(){$(this).removeClass("hover")});
-    
-    /*$('.cloudbar .profile ul').mouseover(function(){
-        $(this).parents('.profile').css('backgroundColor','#000');
-        
-    });
-     $('.cloudbar .profile ul').mouseout(function(){
-        $(this).parents('.profile').css('backgroundColor','#01A1AE');
-        
-    });*/
-   $('.cloudbar .profile .full a').live('click', function(e){
-               e.preventDefault();
+    $('html').live('click', function(e){
+               $('.cloudbar .profile .full>a').removeClass('open');
+               $('.cloudbar .profile .full>a').siblings('ul').hide();
+       });
+   
+       $('.cloudbar .profile .full>a').live('click', function(e){
+               
+               e.stopPropagation();
+        e.preventDefault();
+        equalWidths ( $('.cloudbar .profile ul'), $('.cloudbar .profile'));
                $(this).siblings('ul').toggle();
-   });
-    
-    var profileWidth = profile.outerWidth(); 
-    $('.header .profile ul').css('width',profileWidth );
+               $(this).toggleClass('open');
+               
+       });
 
     
-    
-    
+});
+
+$(window).resize(function() {
+       equalWidths ( $('.cloudbar .profile ul'), $('.cloudbar .profile'));
 });