Search, Animation

app/views/layouts/application.html.haml

@@ -11,5 +11,18 @@
         %h1
           = image_tag "9minutes.png"
         - form_tag search_index_path, :method => 'get', :id => "search_form", :class => "right" do
-          = text_field_tag 'search_term', params[:search_term], :class => "input", :placeholder => "Search for"
+          .wrap
+            = text_field_tag 'search_term', params[:search_term], :class => "input", :placeholder => "Search for"
+            -# TODO: image_submit_tag
+            .selection{:dropping=>"true"}
+              %span ALL
+              .box
+                %span.arr
+                %ul
+                  %li All
+                  %li Artists
+                  %li Albums
+                  %li Songs
+              = hidden_field_tag 'category', 'all'
+            = submit_tag '', :class=>"submit"
       = yield

public/javascripts/jqueryInit.js

@@ -1,51 +1,293 @@
-$(function() {
+$(document).ready(function(){
   $(".artists li:nth-child(6n)").css("marginRight", 0);
   $(".songs.tab li:nth-child(2n)").css("marginRight", 0);
 });
 
 $(window).load(function() {
+
+  // dropdown
+  $("div[dropping]").hoverIntent(function(){
+    $(this).children(".box").fadeIn(500);
+  }, function(){
+    $(this).children(".box").fadeOut(300);
+  });
+  $("div[dropping]").click(function(){
+    $(this).children(".box").fadeOut(300);
+  });
+  
+  $("div[dropping] .box li").click(function(){
+    $("div[dropping] > span").html($(this).html());
+    $("div[dropping] #category").attr("value", $(this).html().toLowerCase());
+  });
+  
+  // set positions
+  $(".navigation").each(function(){
+    $i = 0;
+    $(this).children().each(function(){
+      $(this).attr("position", $i);
+      $i++;
+    });
+  });
+  
+  // add actives
+  $('.navigation li:first-child').addClass('active');
+  $("div[wheel] > div:first-child").addClass('active');
+  
   
   $("ul[steering] li").live("click", function(){
+    if($(this).is('.active')) return;
+    // VARS	
+	  var id = $(this).attr("position");
+    var position = $(this).parent().children().index(this);
+    $active = $("div[wheel="+wheel+"] > .active");
+    var active_id = $active.attr("position");
+    var wi = 0;
+    var size = $(this).parent().children().size();
+    $hiddenElements = [];
+    for(var i=0; i<position;i++)
+    { wi+=$(this).parent().children("li:eq("+i+")").width(); }
+    $x = $(this);
+    
+    // NAVIGATION HANDLING
+    //// active switch
     $(this).parent().children().each(function(){
       $(this).removeClass("active");
+      // TODO: weggefadetes active Element bleibt dick
     });
     $(this).addClass("active");
+    
+    //// animation
+    ////// move container
+    $(this).parent().animate({
+      marginLeft: -wi-5
+    }, 300);
+    
+    ////// move elements
+    for(var i=0; i<position;i++)
+    {
+      $v = $(this).parent().children("li:eq("+i+")");
+      $hiddenElements[i] = $v;
+      $v.animate({
+        opacity: 0
+      }, 300, function(){
+        $(this).remove();
+        $x.parent().css("marginLeft", 0);
+      });
+      
+      $(this).parent().append("<li style='opacity:0;margin-left: 20px;' position='"+$hiddenElements[i].attr('position')+"'>"+$hiddenElements[i].text()+"</li>");
+      $(this).parent().children().last().animate({
+        opacity: 1,
+        marginLeft: 0
+      }, 500);
+    }
+   
+   
     var wheel = $(this).parent().attr("steering");
     
     // get ID		
-	  var id = $(this).parent().children().index(this);
-    $active = $("div[wheel="+wheel+"] > .active");
-    var active_id = $active.parent().children().index($active);
+	  var uid = $(this).attr("position");
+    $uactive = $("div[wheel="+wheel+"] > .active");
+    var active_uid = $uactive.parent().children().index($uactive);
+    
+    //alert(active_uid + " _ " + id);
     
     $speed = 200;
     $range = 200;
     
     // animation
-    if(id > active_id)
+    if(uid != active_uid)
     {
       $("div[wheel="+wheel+"] > .active").css("left", 0).animate({
         left: -$range,
         opacity: 0
       }, $speed, function(){
         $(this).hide();
-        $("div[wheel="+wheel+"] > div:eq("+id+")").css("left", $range).show().addClass("active").animate({
+        $("div[wheel="+wheel+"] > div:eq("+uid+")").css("left", $range).show().addClass("active").animate({
           left: 0,
           opacity: 1
         }, $speed);
       }).removeClass("active");
     }
-    else if(id < active_id)
+      /*
+    }
+    else if(uid < active_uid)
     {
       $("div[wheel="+wheel+"] > .active").css("left", 0).animate({
         left: $range,
         opacity: 0
       }, $speed, function(){
         $(this).hide();
-        $("div[wheel="+wheel+"] > div:eq("+id+")").css("left", -$range).show().addClass("active").animate({
+        $("div[wheel="+wheel+"] > div:eq("+uid+")").css("left", -$range).show().addClass("active").animate({
+          left: 0,
+          opacity: 1
+        }, $speed);
+      }).removeClass("active");
+    }*/
+  });
+});
+
+
+// Overlay
+function overlay(id){
+    $.blockUI({ 
+    	css: {
+    		cursor: 'default'
+    	},
+    	overlayCSS:  { 
+    		opacity: 0,
+    		cursor: 'default'
+  		}, 
+  		themedCSS: {
+			width:	'388px',
+			top:	'17%',
+			left:	'50%'
+		},
+        theme:     true, 
+        message:   $(id), 
+        timeout:   0,
+	    fadeIn:    400, 
+	    fadeOut:   300,
+	    focusInput: false
+    });     
+    $(id+" .close").click(function() {
+        $.unblockUI(); 
+        return false; 
+    });
+}
+
+
+/*
+$(document).ready(function(){
+  $(".artists li:nth-child(6n)").css("marginRight", 0);
+  $(".songs.tab li:nth-child(2n)").css("marginRight", 0);  
+  
+  addActive();
+  
+  // URL Handling
+  $hash = window.location.hash;
+  $hash = $hash.substr(1).toUpperCase();
+  if ($hash == null) $hash = $('.navigation li a:first-child').html().toUpperCase();
+  $hash = "#"+$hash;
+
+});
+
+function addActive(){
+  $('.navigation').each(function(){
+    $(this).children('li').each(function(){
+      $(this).wrapInner('<a href="#'+$(this).html().toUpperCase()+'"></a>');
+    });
+  });
+}
+
+$(window).load(function() {
+
+  // dropdown
+  $("div[dropping]").hoverIntent(function(){
+    $(this).children(".box").fadeIn();
+  }, function(){
+    $(this).children(".box").fadeOut();
+  });
+  
+  $("div[dropping] .box li").click(function(){
+    $("div[dropping] > span").html($(this).html());
+    $("div[dropping] #category").attr("value", $(this).html().toLowerCase());
+  });
+  
+  // set positions
+  $(".navigation").each(function(){
+    $i = 0;
+    $(this).children().each(function(){
+      $(this).attr("position", $i);
+      $i++;
+    });
+  });
+  
+  
+  $('.navigation li').removeClass('active');  
+  $('.navigation li a[href='+$hash+']').parent().addClass('active');
+  $position = $('.navigation a[href='+$hash+']').parent().attr("position");
+  //alert($position);
+  $("div[wheel] > div:eq("+$position+")").addClass('active');
+  
+  
+  $("ul[steering] li").live("click", function(){
+    if($(this).is('.active')) return;
+    
+    // VARS	
+	  var id = $(this).attr("position");
+    var position = $(this).parent().children().index(this);
+    $active = $("div[wheel="+wheel+"] > .active");
+    var active_id = $active.attr("position");
+    var wi = 0;
+    var size = $(this).parent().children().size();
+    $hiddenElements = [];
+    for(var i=0; i<position;i++)
+    { wi+=$(this).parent().children("li:eq("+i+")").width(); }
+    $x = $(this);
+    
+    // NAVIGATION HANDLING
+    //// active switch
+    $(this).parent().children().each(function(){
+      $(this).removeClass("active");
+      // TODO: weggefadetes active Element bleibt dick
+    });
+    $(this).addClass("active");
+    
+    //// animation
+    ////// move container
+    $(this).parent().animate({
+      marginLeft: -wi-5
+    }, 300);
+    
+    ////// move elements
+    for(var i=0; i<position;i++)
+    {
+      $v = $(this).parent().children("li:eq("+i+")");
+      $hiddenElements[i] = $v;
+      $v.animate({
+        opacity: 0
+      }, 300, function(){
+        $(this).remove();
+        $x.parent().css("marginLeft", 0);
+      });
+      
+      $(this).parent().append("<li style='opacity:0;margin-left: 20px;' position='"+$hiddenElements[i].attr('position')+"'><a href='#"+$hiddenElements[i].text().toUpperCase()+"'>"+$hiddenElements[i].text()+"</a></li>");
+      $(this).parent().children().last().animate({
+        opacity: 1,
+        marginLeft: 0
+      }, 500);
+    }
+   
+   
+    var wheel = $(this).parent().attr("steering");
+    
+    // get ID		
+	  var uid = $(this).attr("position");
+    $uactive = $("div[wheel="+wheel+"] > .active");
+    var active_uid = $uactive.parent().children().index($uactive);
+    
+    //alert(active_uid + " _ " + id);
+    //alert(wheel);
+    $speed = 200;
+    $range = 200;
+    
+    // animation
+    if(uid != active_uid)
+    {
+      $("div[wheel="+wheel+"] > .active").css("left", 0).animate({
+        left: -$range,
+        opacity: 0
+      }, $speed, function(){
+        $(this).hide();
+        $("div[wheel="+wheel+"] > div:eq("+uid+")").css("left", $range).show().addClass("active").animate({
           left: 0,
           opacity: 1
         }, $speed);
       }).removeClass("active");
     }
   });
-});
+  
+  
+  
+});
+*/

public/stylesheets/layout.css

@@ -1,5 +1,4 @@
 @charset "utf-8";
-
 /** FONTS **/
 @font-face{ 
 	font-family: AauxNextLight;
@@ -48,6 +47,9 @@ body
 
 a { text-decoration: none; color: #7d8791; }
 
+.blue { color: #027bbf!important; }
+
+
 /** SITE **/
 #site
 {
@@ -57,16 +59,113 @@ a { text-decoration: none; color: #7d8791; }
 }
 #head { height: 140px; }
 #head h1 { padding-top: 60px; float: left; }
-#search_form .input
+#search_form { position: relative; }
+#search_form .wrap
 {
-  width: 290px;
+  width: 300px;
   height: 28px;
   margin-top: 60px;
-  border: 1px solid #bdc5ca;
+  border: 1px solid #e9eef2;
   border-radius: 14px;
   -moz-border-radius: 14px;
   -webkit-border-radius: 14px;
-  text-indent: 15px;
+  overflow: hidden;  
+}
+#search_form .input
+{
+  height: 18px;
+  width: 190px;
+  border: 0;
+  margin-top: 5px;
+  border-radius: 14px;
+  -moz-border-radius: 14px;
+  -webkit-border-radius: 14px;
+  padding-left: 15px;
+}
+#search_form .input:focus { outline: 0!important;}
+#search_form .submit
+{
+  background: transparent url('../images/ico/search-kl.png');
+  width: 22px;
+  height: 27px;
+  border: 0; outline: 0;
+  position: absolute;
+  right: 8px;
+  margin-top: 1px;
+  cursor: pointer;
+}
+#search_form .selection
+{
+  position: absolute;
+  right: 40px; top: 61px;
+  font-family: AauxNextBold, "Segoe UI", Arial, sans-serif;
+  font-size: 11px;
+  color: #868f98;
+  cursor: pointer;
+  background:  url('../images/ico/dropdown.png') no-repeat right;
+  padding-right: 10px;
+  text-align: right;
+  width: 50px;
+  height: 29px; line-height: 29px;
+  display: block;
+}
+#search_form .selection > span { text-transform: uppercase;}
+#search_form .box
+{
+  background: #101618;
+  width: 80px;
+  border-radius: 8px;
+  -moz-border-radius: 8px;
+  -webkit-border-radius: 8px;
+  position: absolute;
+  right: -26px;
+  top: 26px;
+  text-align: left;
+  z-index: 9999;
+  display: none;
+}
+#search_form .box .arr
+{
+  background: url('../images/ico/arr-top.png');
+  position: absolute;
+  width: 19px; height: 8px;
+  top: -8px; right: 20px;
+}
+#search_form .box li
+{
+  height: 25px; line-height: 25px;
+  /*border-bottom: 1px solid #020303;
+  border-top: 1px solid #1c262a;*/
+  padding: 0 10px;
+  color: White;
+  cursor: pointer;
+  display: block;
+  font-size: 11px;
+  text-transform: uppercase;
+}
+#search_form .box li:hover { background: #202c30;}
+#search_form .box li:first-child 
+{ 
+  border-top: 0;
+  line-height: 27px; 
+  -webkit-border-top-left-radius: 8px;
+	-moz-border-radius-topleft: 8px;
+	border-top-left-radius: 8px;
+  -webkit-border-top-right-radius: 8px;
+	-moz-border-radius-topright: 8px;
+	border-top-right-radius: 8px;
+  font-family: AauxNextBold, "Segoe UI", Arial, sans-serif;
+}
+#search_form .box li:last-child 
+{
+  border-bottom: 0; 
+  line-height: 23px; 
+  -webkit-border-bottom-left-radius: 8px;
+	-moz-border-radius-bottomleft: 8px;
+	border-bottom-left-radius: 8px;
+  -webkit-border-bottom-right-radius: 8px;
+	-moz-border-radius-bottomright: 8px;
+	border-bottom-right-radius: 8px;
 }
 
 .headline
@@ -80,16 +179,32 @@ a { text-decoration: none; color: #7d8791; }
   font-size: 24px;
   margin-bottom: 12px;
 }
-.navigation { margin-bottom: 40px; height: 15px; line-height: 15px; }
+.navigation { margin-bottom: 40px; height: 15px; line-height: 15px; position: relative; }
 .navigation li
 {
   float: left;
   color: #7d8791;
   margin-right: 10px;
   cursor: pointer;
+  text-transform: uppercase;
 }
 .navigation li:hover { color: #5d666e; }
-.navigation .active { font-family: AauxNextBold, "Segoe UI", Arial, sans-serif; }
+.navigation li.active:hover { color: #7d8791; }
+.navigation .active { font-family: AauxNextBold, "Segoe UI", Arial, sans-serif; cursor: default!important; }
+
+.navigation.sub { margin-bottom: 15px; height: 30px; line-height: 30px; margin-top: -10px;}
+.navigation.sub li
+{
+  float: left;
+  color: #bbc3ca;
+  margin-right: 15px;
+  cursor: pointer;
+  font-size: 24px;
+  text-transform: none;
+  font-family: AauxNextLight, "Segoe UI", Arial, sans-serif;
+}
+.navigation.sub li:hover { color: #68727c; }
+.navigation.sub .active { color: #7d8791; font-family: AauxNextLight, "Segoe UI", Arial, sans-serif; }
 
 .artists li
 {
@@ -144,13 +259,13 @@ a { text-decoration: none; color: #7d8791; }
 }
 .albums .img 
 { 
-  background: url('../images/bg/fuse.png') -294px 0; 
+  background: url('../images/bg/fuse.png') -294px 0 no-repeat; 
   width: 77px; height: 65px;
   margin-right: 6px;
   float: left;
   margin-top: 3px;
 }
-.albums img { margin-left: 16px; width: 54px; height: 54px;}
+.albums img { margin-left: 16px; width: 54px; height: 54px; }
 .albums span { color: #2e353c;}
 .albums sub { color: #99a4ad; font-size: 11px;}
 
@@ -160,4 +275,100 @@ a { text-decoration: none; color: #7d8791; }
   display: block;
 }
 div[wheel] > div { display: none; opacity: 0.0; position: relative; }
-div[wheel] > div:first-child { opacity: 1.0; display: block; }
+div[wheel] > div:first-child { opacity: 1.0; display: block; }
+
+#artist .side { float: left; width: 400px;}
+#artist .side .img
+{
+  width: 439px;
+  height: 281px;
+  background: url('../images/bg/fuse.png') -401px 160px no-repeat;
+}
+#artist .description { width: 363px; font-size: 12px; }
+#artist .description span { color: #2e353c; }
+#artist .main
+{
+  float: right;
+  width: 550px;
+  position: relative;
+  top: -8px;
+}
+#artist .main_content
+{
+  margin-left: 20px;
+}
+
+.overlay
+{
+  background: rgba(255,255,255,0.8);
+  padding: 7px;
+  border-radius: 14px;
+  -moz-border-radius: 14px;
+  -webkit-border-radius: 14px;
+  -moz-box-shadow: 0 0 5px 5px rgba(0,0,0,0.2);
+  -webkit-box-shadow: 0 0 10px 10px rgba(0,0,0,0.2);
+  box-shadow: 0 0 3px 3px rgba(0,0,0,0.1);
+  width: 488px;
+	display: none;
+	margin-left: -244px;
+}
+.overlay > div
+{
+  background: #1a1c1f;
+  border-radius: 8px;
+  -moz-border-radius: 8px;
+  -webkit-border-radius: 8px;
+  min-height: 170px;
+  overflow: hidden;
+}
+.overlay .close
+{
+	position: absolute;
+	right: 134px; top: 20px;
+  cursor: pointer;
+  z-index: 9999;
+}
+.overlay.album .side
+{
+  background: #0d1213;
+  float: left;
+  width: 150px;
+  border-right: 1px solid #020303;
+  min-height: 150px;
+  -webkit-border-bottom-left-radius: 8px;
+	-moz-border-radius-bottomleft: 8px;
+	border-bottom-left-radius: 8px;
+  -webkit-border-top-left-radius: 8px;
+	-moz-border-radius-topleft: 8px;
+	border-top-left-radius: 8px;
+  padding: 10px;
+}
+.overlay.album .side img { width: 150px; height: 150px; z-index: 10000; }
+.overlay.album .side h3
+{
+  color: White;
+  font-size: 18px;
+  margin-top: 10px;
+}
+.overlay.album .side h4 { margin-bottom: 15px; color: #2f3439; }
+.overlay.album .side p { font-size: 12px; margin-bottom: 20px; color: #2f3439; }
+.overlay.album .mid
+{
+  width: 317px;
+  float: right;
+}
+.overlay.album .mid li img { display: none;}
+.overlay.album .mid li
+{
+  width: 317px; 
+  border-bottom: 1px solid #020303;
+  border-top: 1px solid #1c262a;
+  color: #2f3439;
+  padding-left: 10px;
+  font-family: AauxNextBold, "Segoe UI", Arial, sans-serif;
+}
+.overlay.album .mid li span { color: White; font-family: AauxNextMedium, "Segoe UI", Arial, sans-serif;}
+.overlay.album .mid li:first-child { border-top: 0; }
+.overlay.album .mid li:last-child { border-bottom: 0; }
+
+