:/

.gitmodules

@@ -1,3 +0,0 @@
-[submodule "vendor/plugins/more"]
-	path = vendor/plugins/more
-	url = git://github.com/cloudhead/more.git

Gemfile

@@ -4,12 +4,12 @@ gem 'rake' #, '0.8.7'
 
 gem 'rails', '3.0.5'
 gem 'jquery-rails', '>= 0.2.6'
-gem 'jrails'
 
 # templating / styling
 gem 'haml-rails'
 gem "sass"
 
+gem "youtube_it"
 
 # for using last.fm api
 gem 'typhoeus'

Gemfile.lock

@@ -57,7 +57,6 @@ GEM
     jquery-rails (1.0.9)
       railties (~> 3.0)
       thor (~> 0.14)
-    jrails (0.6.0)
     json (1.5.1)
     mail (2.2.19)
       activesupport (>= 2.3.6)
@@ -147,7 +146,6 @@ DEPENDENCIES
   haml-rails
   hashie
   jquery-rails (>= 0.2.6)
-  jrails
   json
   mongrel (= 1.2.0.pre2)
   oa-oauth

app/controllers/artists_controller.rb

@@ -28,25 +28,30 @@ class ArtistsController < ApplicationController
   
   
   def more_tracks
-    more params
-    @tracks = LastFM::Artist.getTopTracks params[:artist], @@limit[:tracks], (params[:size] / @@limit[:tracks] + 1)
+    prepare params
+    @tracks = LastFM::Artist.getTopTracks params[:q], @@limit[:tracks], (params[:size] / @@limit[:tracks] + 1)
     LastFM::LastFMRequest.run_queue!
    
     render :partial=>"more_tracks", :locals=>{:tracks=>@tracks}
   end
   
   def more_albums
-    more params
-    @albums = LastFM::Artist.getTopAlbums params[:artist], @@limit[:albums], (params[:size] / @@limit[:albums] + 1)
+    prepare params
+    @albums = LastFM::Artist.getTopAlbums params[:q], @@limit[:albums], (params[:size] / @@limit[:albums] + 1)
     LastFM::LastFMRequest.run_queue!
 
     render :partial=>"more_albums", :locals=>{:albums=>@albums}
   end
-  
-  def more params
-    params[:artist] = CGI.unescape params[:artist]
-    params[:size] = params[:size].to_i
 
-    params
+  def album_info
+    @album = LastFM::Album.getInfo CGI.unescape(params[:album]), CGI.unescape(params[:artist])
+    LastFM::LastFMRequest.run_queue!
+
+    render :partial=>"album_info", :locals=>{:album=>@album}
   end
-end
+  
+  def prepare params
+    params[:q] = CGI.unescape params[:q]
+    params[:size] = params[:size].to_i
+  end
+end

app/controllers/search_controller.rb

@@ -1,11 +1,35 @@
 class SearchController < ApplicationController
 
-  def index
-    @artists = LastFM::Artist.search(params[:q].to_s.lstrip, 8)
-    @tracks = LastFM::Track.search(params[:q].to_s.lstrip, 24)
-    @albums = LastFM::Album.search(params[:q].to_s.lstrip, 16)
+  @@limit = { artists: 5, tracks: 10, albums: 5 }
+
+  def show
+    @q = params[:id].to_s.lstrip
+    
+    @artists = LastFM::Artist.search @q, @@limit[:artists]
+    @tracks = LastFM::Track.search @q, @@limit[:tracks]
+    @albums = LastFM::Album.search @q, @@limit[:albums]
       
     LastFM::LastFMRequest.run_queue!
+    
+    render :partial=>"show", :locals=>{
+      :artist=>@artist,
+      :tracks=>@tracks,
+      :albums=>@albums
+    }
   end
+  
+  def autocomplete
+    q = params[:q].to_s.lstrip
 
+    @artists = $sevendigital_client.artist.search q, { :pagesize=>5 }
+
+    render :partial=>"autocomplete", :locals=>{ :artists=>@artists }
+  end
+  
+  def more_artists
+    @artists = LastFM::Artist.search params[:q].to_s.lstrip, @@limit[:artists], (params[:size].to_i / @@limit[:artists] + 1)
+    LastFM::LastFMRequest.run_queue!
+
+    render :partial=>"more_artists", :locals=>{:artists=>@artists}
+  end
 end

app/controllers/tracks_controller.rb

@@ -2,4 +2,11 @@ class TracksController < ApplicationController
   def index
   end
 
+  def search_video
+    
+    @video = @youtube_client.videos_by(:query => "#{CGI.unescape(params[:artist])} #{CGI.unescape(params[:track])} official", :page => 1, :per_page => 1, :order_by => "relevance")
+    @id = @video.videos.first.unique_id
+    
+    render :partial=>"video_id", :locals=>{:id=>@id}
+  end
 end

app/views/artists/_album_info.html.haml

@@ -0,0 +1 @@
+#album_box

app/views/artists/_more_albums.html.haml

@@ -1,7 +1,8 @@
-- albums.album.each do |album|
-  %li
+- @albums.album.each do |album|
+  - artist = album.artist.respond_to?(:name) ? album.artist.name : album.artist
+  %li{:album=>"#{CGI.escape(album.name)}",:artist=>"#{CGI.escape(artist)}"}
     .img= image_tag validate_img_url(album.image, "album", :medium), :class=>"cover"
     %p.name< 
       = trimString(album.name, 48)
       %br<>
-      %span.artist>= trimString(album.artist.name, 80)
+      %span.artist>= trimString(artist, 80)

app/views/artists/_more_tracks.html.haml

@@ -1,5 +1,6 @@
 - @tracks.track.each do |track|
-  %li
+  %li{:artist=>track.artist.name,:track=>track.name}
     = track.name
     %span by
-    = link_to trimString(track.artist.name, 50), "#!/artists/#{CGI.escape(track.artist.name)}"
+    - artist = track.artist.respond_to?(:name) ? track.artist.name : track.artist
+    = link_to trimString(artist, 50), "#!/artists/#{CGI.escape(artist)}"

app/views/artists/_show.html.haml

@@ -12,7 +12,7 @@
     .content
       #artist_info
         %h2 About
-        =raw artist.bio.summary
+        =raw artist.bio.summary.empty? ? "No information available!" : artist.bio.summary
       #artist_links
         %ul
         = image_tag "bing.png", :class=>"bing"
@@ -26,7 +26,7 @@
     %li songs
     %li albums
     %li related
-  .content{:artist=>"#{CGI.escape(artist.name)}"}
+  .content{:q=>"#{CGI.escape(artist.name)}"}
     %div
       %ul.list.songs.andmore{:tile=>"more_tracks"}
         = render :partial=>"more_tracks", :locals=>{:tracks=>@tracks}
@@ -43,6 +43,7 @@
                 %span= "#{(artist.match.to_f*100).to_i}"
               .img
                 = image_tag validate_img_url(artist.image, "artist", :extralarge), :alt=>artist.name, :title=>artist.name
+      %div.clean
 
 :javascript
   $(document).ready(function(){

app/views/layouts/_player.html.haml

@@ -0,0 +1,7 @@
+.player
+  = link_to image_tag("icons/player/backward.png"), "javascript:void(0);", :class=>"backward"
+  = link_to image_tag("icons/player/play.png"), "javascript:void(0);", :class=>"play"
+  = link_to image_tag("icons/player/forward.png"), "javascript:void(0);", :class=>"forward"
+  = link_to image_tag("icons/player/volume.png"), "javascript:void(0);", :class=>"volume"
+  = link_to image_tag("icons/player/repeat.png"), "javascript:void(0);", :class=>"repeat"
+  = link_to image_tag("icons/player/fullscreen.png"), "javascript:void(0);", :id=>"full"

app/views/layouts/application.html.haml

@@ -3,12 +3,11 @@
   %head
     %title Nineminutes
     = stylesheet_link_tag "9minutes"
-    =# javascript_include_tag "http://www.google.com/jsapi"
+    = javascript_include_tag "http://www.google.com/jsapi"
     = javascript_include_tag :defaults
     
     = csrf_meta_tag
   %body
-    %a#full{:style=>"position:absolute;z-index:999;color:white;"} FULL
     #loading Loading
     #error Error
     #block
@@ -23,16 +22,16 @@
         =link_to "Sign Out", destroy_user_session_path
       #head
         %h1= link_to image_tag("nine-minutes.png"), "/#!/home"
+        = render :partial=>"layouts/player"
       #navigation
         %li.active= link_to "home", "/#!/home"
         %li= link_to "charts", "/#!/charts"
         %li= link_to "about", "#"
         %li= link_to "register", "#"
         %li.search
-          = form_tag '/search', :method => 'get', :id => "search_form" do
+          = form_tag '/search', :method => 'get', :id => "search_form", :remote=>true do
             = text_field_tag 'q', params[:q], :class => "text", :placeholder => "Search here ..."
-            = link_to image_tag("icons/search-navi.png", :class=>"button"), "javascript:void(0);", :onclick=>"submit_redirect(this);"
-            = submit_tag '', :class=>"submit", :name => nil
+            = link_to image_tag("icons/search-navi.png", :class=>"button"), "/#!/search"
       %br.clean
       #content
       %br.clean
@@ -47,6 +46,32 @@
     #fullscreen
       %h2 Avril Lavigne
       %h1 Alice (In Wonderland)
-      = image_tag "examples/video-big.jpg", :class=>"left video"
+      #video Loading
       .sidebar
-        .player
+        .top
+          = render :partial=>"layouts/player"
+        %ul.play_list
+          %li
+            %h3
+              %div= "Firework"
+              %span= "Katie Perry"
+          %li
+            %h3
+              %div= "Firework"
+              %span= "Katie Perry"
+          %li
+            %h3
+              %div= "Firework"
+              %span= "Katie Perry"
+          %li
+            %h3
+              %div= "Firework"
+              %span= "Katie Perry"
+          %li
+            %h3
+              %div= "Firework"
+              %span= "Katie Perry"
+          %li
+            %h3
+              %div= "Firework"
+              %span= "Katie Perry"

app/views/search/_autocomplete.html.haml

@@ -0,0 +1,2 @@
+- @artists.each do |artist|
+  = artist.name

app/views/search/_more_artists.html.haml

@@ -0,0 +1,8 @@
+- @artists.artist.each do |artist|
+  %li 
+    - @link = "#!/artists/#{CGI.escape(artist.name)}"
+    .img= link_to image_tag(validate_img_url(artist.image, "artist", :large)), @link
+    .text
+      %h2= link_to artist.name, @link
+      %p
+        = artist.listeners+" Listeners"

app/views/search/_search_form.html.haml

@@ -0,0 +1,4 @@
+.box#search_bar
+  = form_tag '/search', :method => 'get', :id => "search_bar_form", :remote=>true do
+    = text_field_tag 'q', params[:q], :class => "text", :placeholder => "Search here ..."
+    = link_to image_tag("icons/search.png", :class=>"button"), "/#!/search"

app/views/search/_show.html.haml

@@ -0,0 +1,25 @@
+.tabs.tabs_js.w03
+  %ul.nav
+    %li artists
+    %li songs
+    %li albums
+    %li youtube
+  .content{:q=>"#{@q}"}
+    %div
+      = render :partial=>"sidebar/index"
+      = render :partial=>"search_form"
+      %ul.list.artists.andmore{:tile=>"more_artists"}
+        = render :partial=>"more_artists"
+    %div
+      = render :partial=>"sidebar/index"
+      = render :partial=>"search_form"
+      %ul.list.songs.andmore{:tile=>"more_tracks"}
+        = render :partial=>"artists/more_tracks"
+    %div
+      = render :partial=>"sidebar/index"
+      = render :partial=>"search_form"
+      %ul.list.albums.andmore{:tile=>"more_albums"}
+        = render :partial=>"artists/more_albums"
+    %div
+      = render :partial=>"sidebar/index"
+      = render :partial=>"search_form"

app/views/sidebar/_index.html.haml

@@ -1,4 +1,4 @@
 #sidebar
-  .advertisment
+  .box.advertisment
     %sup Advertisment
-    = image_tag "advertisment-placeholder.png"
+    = image_tag "placeholder/advertisment.png"

app/views/tracks/_list.html.haml

@@ -7,4 +7,4 @@
       = image_tag "ico/play.png", :class=>"play", :videoid=>id.videos.first.unique_id
       = image_tag "ico/add.png", :class=>"add"
       %span= track.name
-      = link_to trimString(track.artist, 50), artist_path(CGI.escape(track.artist))
+      = link_to trimString(track.artist, 50), "#!/artists/#{CGI.escape(track.artist)}"

app/views/tracks/_video_id.html.haml

@@ -0,0 +1 @@
+= @id

config/application.rb

@@ -41,14 +41,21 @@ module Nineminutes
       plugins/path
       ajax/requests
       ajax/routes
+      store
       plugins/bing 
       plugins/coloranimations
       plugins/nivoslider 
       plugins/imageresize 
+      plugins/autocomplete
+      plugins/scrolling
+      plugins/player
       animations/animations
       animations/fullscreen
       layout
+      player
       ajax/loadmore
+      ajax/album
+      search
     )
 
     # Configure the default encoding used in templates for Ruby 1.9.

config/initializers/sevendigital.rb

@@ -1 +1 @@
-#require "sevendigital"
+require "sevendigital"

config/routes.rb

@@ -14,13 +14,18 @@ Nineminutes::Application.routes.draw do
   match "/artists/:artist", :to => "artists#show"
   match "/more_tracks", :to => "artists#more_tracks"
   match "/more_albums", :to => "artists#more_albums"
+  match "/more_artists", :to => "search#more_artists"
   match "/more_charts", :to => "charts#more"
   get "artists/", :to => "artists#index"
 
+  match "/autocomplete", :to => "search#autocomplete"
+  match "/album_info", :to => "artists#album_info"
+  match "/search_video", :to => "tracks#search_video"
+  
   #resources :artists, :constraints => { :id => /.*/ }
-  resources :search
   resources :users
   resources :sidebar
+  resources :search
   
   get "home/", :to => "home#show"
   

public/javascripts/ajax/album.js

@@ -0,0 +1,34 @@
+
+function load_songs_from_album(obj){
+  if($(obj).attr("loaded") == "true")
+  {
+    $('#album_box').fadeOut(200);
+    $(obj).removeAttr("loaded");
+  }
+  else
+  {
+    $(obj).parent().parent().children().each(function(){
+      $(this).children("a").removeAttr("loaded");
+    });
+    $(obj).attr("loaded", "true");
+    artist = $(obj).parent().attr("artist");
+    album = $(obj).parent().attr("album");
+    
+    url = "/album_info";
+    params = "artist="+artist+"&album="+album;
+  
+    album_request(url, params, obj);
+  }
+}
+
+function show_songs_from_album(data, obj){
+  $('#album_box').remove();
+  $(obj).parent().prepend(data);
+  $('#album_box').fadeIn(200);
+  $('#album_box .wrap').jScrollPane();
+  
+  $('#album_box li').each(function(){
+    if(!$(this).has(".play").length)
+      $(this).prepend('<a class="play"/><a class="add" href="javascript:void(0);" onclick="open_playlists(this);"/>');
+  });
+}

public/javascripts/ajax/loadmore.js

@@ -17,11 +17,12 @@ function loadmore(obj){
   size = $(obj).parent().find('li').size();
   tile = $(obj).parent().children('.list').attr("tile");
   artist = $(obj).parent().parent(".content").attr("artist");
+  q = $(obj).parent().parent(".content").attr("q");
   
   disable_more_button(obj);
   
   url = "/"+tile;
-  params = "size="+size+"&artist="+artist;
+  params = "size="+size+"&artist="+artist+"&q="+q;
   
   load_more_request(url, params);
 }

public/javascripts/ajax/requests.js

@@ -16,6 +16,7 @@
 }
 
 function load_site_request(link, params){
+  hide_flash(true);
   $.ajax({
     type:"GET",
     dataType:"html",
@@ -33,4 +34,39 @@ function load_site_request(link, params){
       });
     }
   });
+}
+
+function album_request(link, params, obj){
+  hide_flash(true);
+  $.ajax({
+    type: "GET",
+    dataType: "html",
+    url: link,
+    data: params,
+    error: function(){
+      hide_flash(false);
+      show_flash(true);
+      //enable_more_button();
+    },
+    success: function(data){
+      show_songs_from_album(data, obj);
+    }
+  });
+}
+
+function video_request(link, params, obj){
+  $.ajax({
+    type: "GET",
+    dataType: "html",
+    url: link,
+    data: params,
+    error: function(){
+      hide_flash(false);
+      show_flash(true);
+      //enable_more_button();
+    },
+    success: function(data){
+      playTrack(data, obj);
+    }
+  });
 }

public/javascripts/ajax/routes.js

@@ -17,4 +17,10 @@ $(document).ready(function(){
     show_flash(false);
     load_site_request(charts_path, "");
   });
+  
+  // Search Page
+  Path.map(hashbang+search_path+":q").to(function(){
+    show_flash(false);
+    load_site_request(search_path, this.params['q']);
+  });
 });

public/javascripts/animations/animations.js

@@ -40,4 +40,14 @@ function more_hover_out(obj){
     backgroundColor: "#f4f6f9",
     color: "#15191d"
   }, 100);
+}
+
+function init_playlist_scrollbar(){
+  $('#fullscreen .play_list').jScrollPane();
+  
+  $('#fullscreen .play_list').hover(function(){
+    $('#fullscreen .jspVerticalBar').stop().fadeTo(300, 1);
+  }, function(){
+    $('#fullscreen .jspVerticalBar').stop().fadeTo(200, 0.02);
+  });
 }

public/javascripts/animations/fullscreen.js

@@ -2,11 +2,11 @@
   $('#full').live("click",function(){
     if($(this).hasClass("open")) {
       $("#fullscreen").animate({
-        marginTop: 700,
+        marginTop: -300,
         opacity: 0
       }, 500, function(){
         $(this).hide();
-        $("#site, #bg_stripe").animate({
+        $("#site, #bg_stripe").show().animate({
           marginTop: 0,
           opacity: 1
         }, 500);
@@ -16,13 +16,15 @@
     }
     else {
       $("#site, #bg_stripe").animate({
-        marginTop: -700,
+        marginTop: 400,
         opacity: 0
       }, 500, function(){
-        $("#fullscreen").css("marginTop", 700).show().animate({
+        $(this).hide();
+        $("#fullscreen").css("marginTop", -100).show().animate({
           marginTop: 120,
           opacity: 1
         }, 500);
+        init_playlist_scrollbar();
         $("#fullscreen_wrap").fadeTo(1000, 0.5);
       });
       $(this).addClass("open");

public/javascripts/config.js

@@ -5,6 +5,8 @@ const hashbang = "#!";
 const artist_path = "/artists/";
 const home_path = "/home";
 const charts_path = "/charts";
+const search_path = "/search/";
+const search_autocomplete_path = "/autocomplete/";
 
 $(document).ready(function(){
   Path.root(hashbang+home_path);

public/javascripts/layout.js

@@ -54,8 +54,8 @@ function submit_redirect(obj){
 function add_controls(){
   $('.list.songs').each(function(){
     $(this).children("li").each(function(){
-      if(!$(this).has(".play").length)
-        $(this).prepend('<a class="play"/><a class="add" href="javascript:void(0);" onclick="open_playlists(this);"/>');
+      if(!$(this).has(".playsong").length)
+        $(this).prepend('<a class="playsong"/><a class="add" href="javascript:void(0);" onclick="open_playlists(this);"/>');
     });
   });
 }
@@ -112,7 +112,8 @@ function new_albums(){
 
 function album_hover(){
   $('.albums .img').hover(function(){
-    $(this).append('<div class="playall"><a href="javascript:void(0);"></a></div>');
+    if(!$(this).children(".playall").hasClass("playall"))
+      $(this).append('<div class="playall"><a href="javascript:void(0);"></a></div>');
     $(this).find('.playall').fadeIn(200);
   }, function(){
     $(this).find('.playall').stop().fadeOut(300, function(){ $(this).remove(); });
@@ -120,15 +121,16 @@ function album_hover(){
 }
 
 function album_add_show_songs_button(){
-  $('.albums li').each(function(){
+  $('.albums > li').each(function(){
     if(!$(this).has(".songsbtn").length)
-      $(this).append('<a class="songsbtn" href="">Songs</a>');
+      $(this).append('<a class="songsbtn" href="javascript:void(0);" onclick="load_songs_from_album(this);">Songs</a>');
   });
 }
 
 
 function init_site(link){
   Path.listen();
+  onYouTubePlayerReady();
   
   switch(link) {
     case artist_path:
@@ -143,10 +145,14 @@ function init_site(link){
       set_active_navigation(home_path);
       break;
     case charts_path:
+    case search_path:
       init_tabs();
       add_more_button();
+      add_controls();
+      init_autocomplete();
       set_active_navigation(charts_path);
       break;
+      
   }
 }
 

public/javascripts/player.js

@@ -0,0 +1,116 @@
+$(document).ready(function(){
+  loadPlayer();
+  initPlaylist();
+  makeTracksAddable(); // bind click-event to "add" button (for each track)
+  initPlayer();
+  initPlayTrack();
+});
+
+
+function initPlayer(){
+  $('.play').live('click', function(){
+    if($(this).hasClass('pause')) pauseVideo();
+    else playVideo();
+
+    $(this).toggleClass('pause');
+  });
+}
+
+
+function initPlayTrack(){
+  $('.playsong').live('click',function(){
+    url = "/search_video";
+    params = "artist="+$(this).parents('li').attr("artist")+"&track="+$(this).parents('li').attr("track");
+    video_request(url, params, this);
+  });
+}
+
+function playTrack(data, obj){
+  loadVideo(data);
+  $('#fullscreen h2').text($(obj).parents('li').attr("artist"));
+  $('#fullscreen h1').text($(obj).parents('li').attr("track"));
+}
+
+
+function initPlaylist() {
+  // TODO: reload Playlist form localStorage
+  storage = $.store.get("9minutesPlaylist");
+  if(storage !== undefined) {
+    size = storage.length;
+    for(i = 0; i < size; i++) {
+      $('.play_list').append('<li videoid="'+ storage[i].videoid + '"><h3><div>'+ storage[i].title + '</div><span>' + storage[i].artist + '</span></h3></li>');
+      $listElement = $('.play_list li:eq('+i+')');
+      //$listElement.prepend('<img class="delete-handle" src="/images/ico/delete.png" />');
+      //$listElement.append('<img class="drag-handle" src="/images/ico/drag.png" />');
+    }
+  }
+/*
+  $('ul#playlist').dragsort({
+      dragSelector: '.drag-handle',
+      dragEnd: savePlaylist,
+      placeHolderTemplate: '<li class="placeholder">',
+      scrollContainer: '#playlist-container'
+  });
+
+  $('#playlist .delete-handle').live("click", onRemoveTrackFromPlaylist);
+
+  $('#player #icons .playlist').live("click", function(){
+    $('#playlist-container').toggle();
+  });
+
+  $('#playlist-navigation .clear').live('click', function(){
+    $('#playlist li').remove();
+    $.store.clear();
+  });*/
+}
+
+function savePlaylist() {
+  var tracks = [];
+  $('.play_list li').each(function(i) {
+    tracks[i] = {
+      title     : $(this).attr("track"), // TODO
+      artist    : $(this).attr("artist"),
+      videoid   : $(this).attr('videoid')
+    }
+  });
+
+  //console.log(tracks);
+  $.store.set("9minutesPlaylist", tracks);
+  //console.log("playlist saved ;)");
+}
+
+function makeTracksAddable() {
+  $('.add').live("click", onAddTrackToPlaylist);
+}
+
+function onAddTrackToPlaylist(event) {
+  // if already in playlist
+  $listElement = $(event.target).parents('li').clone(); // TODO
+  $vuid = $listElement.children('.play').attr('videoid');
+
+
+  if ($('#playlist li[videoid='+$vuid+']').html() != null)
+  {
+    alert("Already in playlist!");
+    return;
+  }
+
+  $listElement.children('img').remove();
+  $listElement.attr('data-itemidx', 0); // important for dragsort plugin
+  $listElement.attr('videoid', $vuid);
+ // $listElement.prepend('<img class="delete-handle" src="/images/ico/delete.png" />');
+ // $listElement.append('<img class="drag-handle" src="/images/ico/drag.png" />');
+  $listElement.appendTo('#playlist');
+  
+  savePlaylist();
+}
+
+function onRemoveTrackFromPlaylist(event) {
+  $listElement = $(event.target).parent();
+  $listElement.fadeTo(300, 0.1, function() {
+    $(this).hide("blind", function() { 
+      $(this).remove();
+      savePlaylist();
+    });
+  });
+}

public/javascripts/plugins/autocomplete.js

@@ -0,0 +1,843 @@
+/*
+ * jQuery Autocomplete plugin 1.2.1
+ *
+ * Copyright (c) 2009 Jörn Zaefferer
+ *
+ * Dual licensed under the MIT and GPL licenses:
+ *   http://www.opensource.org/licenses/mit-license.php
+ *   http://www.gnu.org/licenses/gpl.html
+ *
+ * With small modifications by Alfonso Gómez-Arzola.
+ * See changelog for details.
+ *
+ */
+
+;(function($) {
+
+$.fn.extend({
+        autocomplete: function(urlOrData, options) {
+                var isUrl = typeof urlOrData == "string";
+                options = $.extend({}, $.Autocompleter.defaults, {
+                        url: isUrl ? urlOrData : null,
+                        data: isUrl ? null : urlOrData,
+                        delay: isUrl ? $.Autocompleter.defaults.delay : 10,
+                        max: options && !options.scroll ? 10 : 150
+                }, options);
+
+                // if highlight is set to false, replace it with a do-nothing function
+                options.highlight = options.highlight || function(value) { return value; };
+
+                // if the formatMatch option is not specified, then use formatItem for backwards compatibility
+                options.formatMatch = options.formatMatch || options.formatItem;
+
+                return this.each(function() {
+                        new $.Autocompleter(this, options);
+                });
+        },
+        result: function(handler) {
+                return this.bind("result", handler);
+        },
+        search: function(handler) {
+                return this.trigger("search", [handler]);
+        },
+        flushCache: function() {
+                return this.trigger("flushCache");
+        },
+        setOptions: function(options){
+                return this.trigger("setOptions", [options]);
+        },
+        unautocomplete: function() {
+                return this.trigger("unautocomplete");
+        }
+});
+
+$.Autocompleter = function(input, options) {
+
+        var KEY = {
+                UP: 38,
+                DOWN: 40,
+                DEL: 46,
+                TAB: 9,
+                RETURN: 13,
+                ESC: 27,
+                COMMA: 188,
+                PAGEUP: 33,
+                PAGEDOWN: 34,
+                BACKSPACE: 8
+        };
+
+        var globalFailure = null;
+        if(options.failure != null && typeof options.failure == "function") {
+          globalFailure = options.failure;
+        }
+
+        // Create $ object for input element
+        var $input = $(input).attr("autocomplete", "off").addClass(options.inputClass);
+
+        var timeout;
+        var previousValue = "";
+        var cache = $.Autocompleter.Cache(options);
+        var hasFocus = 0;
+        var lastKeyPressCode;
+        var config = {
+                mouseDownOnSelect: false
+        };
+        var select = $.Autocompleter.Select(options, input, selectCurrent, config);
+
+        var blockSubmit;
+
+        // prevent form submit in opera when selecting with return key
+        $.browser.opera && $(input.form).bind("submit.autocomplete", function() {
+                if (blockSubmit) {
+                        blockSubmit = false;
+                        return false;
+                }
+        });
+
+        // only opera doesn't trigger keydown multiple times while pressed, others don't work with keypress at all
+        $input.bind(($.browser.opera ? "keypress" : "keydown") + ".autocomplete", function(event) {
+                // a keypress means the input has focus
+                // avoids issue where input had focus before the autocomplete was applied
+                hasFocus = 1;
+                // track last key pressed
+                lastKeyPressCode = event.keyCode;
+                switch(event.keyCode) {
+
+                        case KEY.UP:
+                                if ( select.visible() ) {
+                                        event.preventDefault();
+                                        select.prev();
+                                } else {
+                                        onChange(0, true);
+                                }
+                                break;
+
+                        case KEY.DOWN:
+                                if ( select.visible() ) {
+                                        event.preventDefault();
+                                        select.next();
+                                } else {
+                                        onChange(0, true);
+                                }
+                                break;
+
+                        case KEY.PAGEUP:
+                                if ( select.visible() ) {
+                                event.preventDefault();
+                                        select.pageUp();
+                                } else {
+                                        onChange(0, true);
+                                }
+                                break;
+
+                        case KEY.PAGEDOWN:
+                                if ( select.visible() ) {
+                                event.preventDefault();
+                                        select.pageDown();
+                                } else {
+                                        onChange(0, true);
+                                }
+                                break;
+
+                        // matches also semicolon
+                        case options.multiple && $.trim(options.multipleSeparator) == "," && KEY.COMMA:
+                        case KEY.TAB:
+                        case KEY.RETURN:
+                                if( selectCurrent() ) {
+                                        // stop default to prevent a form submit, Opera needs special handling
+                                        event.preventDefault();
+                                        blockSubmit = true;
+                                        return false;
+                                }
+                                break;
+
+                        case KEY.ESC:
+                                select.hide();
+                                break;
+
+                        default:
+                                clearTimeout(timeout);
+                                timeout = setTimeout(onChange, options.delay);
+                                break;
+                }
+        }).focus(function(){
+                // track whether the field has focus, we shouldn't process any
+                // results if the field no longer has focus
+                hasFocus++;
+        }).blur(function() {
+          hasFocus = 0;
+                if (!config.mouseDownOnSelect) {
+                        hideResults();
+                }
+        }).click(function() {
+                // show select when clicking in a focused field
+                // but if clickFire is true, don't require field
+                // to be focused to begin with; just show select
+                if( options.clickFire ) {
+                  if ( !select.visible() ) {
+                        onChange(0, true);
+                }
+                } else {
+                  if ( hasFocus++ > 1 && !select.visible() ) {
+                        onChange(0, true);
+                }
+                }
+        }).bind("search", function() {
+                // TODO why not just specifying both arguments?
+                var fn = (arguments.length > 1) ? arguments[1] : null;
+                function findValueCallback(q, data) {
+                        var result;
+                        if( data && data.length ) {
+                                for (var i=0; i < data.length; i++) {
+                                        if( data[i].result.toLowerCase() == q.toLowerCase() ) {
+                                                result = data[i];
+                                                break;
+                                        }
+                                }
+                        }
+                        if( typeof fn == "function" ) fn(result);
+                        else $input.trigger("result", result && [result.data, result.value]);
+                }
+                $.each(trimWords($input.val()), function(i, value) {
+                        request(value, findValueCallback, findValueCallback);
+                });
+        }).bind("flushCache", function() {
+                cache.flush();
+        }).bind("setOptions", function() {
+                $.extend(true, options, arguments[1]);
+                // if we've updated the data, repopulate
+                if ( "data" in arguments[1] )
+                        cache.populate();
+        }).bind("unautocomplete", function() {
+                select.unbind();
+                $input.unbind();
+                $(input.form).unbind(".autocomplete");
+        });
+
+
+        function selectCurrent() {
+                var selected = select.selected();
+                if( !selected )
+                        return false;
+
+                var v = selected.result;
+                previousValue = v;
+
+                if ( options.multiple ) {
+                        var words = trimWords($input.val());
+                        if ( words.length > 1 ) {
+                                var seperator = options.multipleSeparator.length;
+                                var cursorAt = $(input).selection().start;
+                                var wordAt, progress = 0;
+                                $.each(words, function(i, word) {
+                                        progress += word.length;
+                                        if (cursorAt <= progress) {
+                                                wordAt = i;
+                                                return false;
+                                        }
+                                        progress += seperator;
+                                });
+                                words[wordAt] = v;
+                                // TODO this should set the cursor to the right position, but it gets overriden somewhere
+                                //$.Autocompleter.Selection(input, progress + seperator, progress + seperator);
+                                v = words.join( options.multipleSeparator );
+                        }
+                        v += options.multipleSeparator;
+                }
+
+                $input.val(v);
+                hideResultsNow();
+                $input.trigger("result", [selected.data, selected.value]);
+                return true;
+        }
+
+        function onChange(crap, skipPrevCheck) {
+                if( lastKeyPressCode == KEY.DEL ) {
+                        select.hide();
+                        return;
+                }
+
+                var currentValue = $input.val();
+
+                if ( !skipPrevCheck && currentValue == previousValue )
+                        return;
+
+                previousValue = currentValue;
+
+                currentValue = lastWord(currentValue);
+                if ( currentValue.length >= options.minChars) {
+                        $input.addClass(options.loadingClass);
+                        if (!options.matchCase)
+                                currentValue = currentValue.toLowerCase();
+                        request(currentValue, receiveData, hideResultsNow);
+                } else {
+                        stopLoading();
+                        select.hide();
+                }
+                $inval = escape($input.val());
+                $input.next("a").attr("href", hashbang+search_path+$inval);
+        };
+
+        function trimWords(value) {
+                if (!value)
+                        return [""];
+                if (!options.multiple)
+                        return [$.trim(value)];
+                return $.map(value.split(options.multipleSeparator), function(word) {
+                        return $.trim(value).length ? $.trim(word) : null;
+                });
+        }
+
+        function lastWord(value) {
+                if ( !options.multiple )
+                        return value;
+                var words = trimWords(value);
+                if (words.length == 1) 
+                        return words[0];
+                var cursorAt = $(input).selection().start;
+                if (cursorAt == value.length) {
+                        words = trimWords(value)
+                } else {
+                        words = trimWords(value.replace(value.substring(cursorAt), ""));
+                }
+                return words[words.length - 1];
+        }
+
+        // fills in the input box w/the first match (assumed to be the best match)
+        // q: the term entered
+        // sValue: the first matching result
+        function autoFill(q, sValue){
+                // autofill in the complete box w/the first match as long as the user hasn't entered in more data
+                // if the last user key pressed was backspace, don't autofill
+                if( options.autoFill && (lastWord($input.val()).toLowerCase() == q.toLowerCase()) && lastKeyPressCode != KEY.BACKSPACE ) {
+                        // fill in the value (keep the case the user has typed)
+                        $input.val($input.val() + sValue.substring(lastWord(previousValue).length));
+                        // select the portion of the value not typed by the user (so the next character will erase)
+                        $(input).selection(previousValue.length, previousValue.length + sValue.length);
+                }
+        };
+
+        function hideResults() {
+                clearTimeout(timeout);
+                timeout = setTimeout(hideResultsNow, 200);
+        };
+
+        function hideResultsNow() {
+                var wasVisible = select.visible();
+                select.hide();
+                clearTimeout(timeout);
+                stopLoading();
+                if (options.mustMatch) {
+                        // call search and run callback
+                        $input.search(
+                                function (result){
+                                        // if no value found, clear the input box
+                                        if( !result ) {
+                                                if (options.multiple) {
+                                                        var words = trimWords($input.val()).slice(0, -1);
+                                                        $input.val( words.join(options.multipleSeparator) + (words.length ? options.multipleSeparator : "") );
+                                                }
+                                                else {
+                                                        $input.val( "" );
+                                                        $input.trigger("result", null);
+                                                }
+                                        }
+                                }
+                        );
+                }
+        };
+
+        function receiveData(q, data) {
+                if ( data && data.length && hasFocus ) {
+                        stopLoading();
+                        select.display(data, q);
+                        autoFill(q, data[0].value);
+                        select.show();
+                } else {
+                        hideResultsNow();
+                }
+        };
+
+        function request(term, success, failure) {
+                if (!options.matchCase)
+                        term = term.toLowerCase();
+                var data = cache.load(term);
+                // recieve the cached data
+                if (data && data.length) {
+                        success(term, data);
+                // if an AJAX url has been supplied, try loading the data now
+                } else if( (typeof options.url == "string") && (options.url.length > 0) ){
+
+                        var extraParams = {
+                                timestamp: +new Date()
+                        };
+                        $.each(options.extraParams, function(key, param) {
+                                extraParams[key] = typeof param == "function" ? param() : param;
+                        });
+
+                        $.ajax({
+                                // try to leverage ajaxQueue plugin to abort previous requests
+                                mode: "abort",
+                                // limit abortion to this input
+                                port: "autocomplete" + input.name,
+                                dataType: options.dataType,
+                                url: options.url,
+                                data: $.extend({
+                                        q: lastWord(term),
+                                        limit: options.max
+                                }, extraParams),
+                                success: function(data) {
+                                        var parsed = options.parse && options.parse(data) || parse(data);
+                                        cache.add(term, parsed);
+                                        success(term, parsed);
+                                }
+                        });
+                } else {
+                        // if we have a failure, we need to empty the list -- this prevents the the [TAB] key from selecting the last successful match
+                        select.emptyList();
+                        if(globalFailure != null) {
+        globalFailure();
+      }
+      else {
+        failure(term);
+                        }
+                }
+        };
+
+        function parse(data) {
+                var parsed = [];
+                var rows = data.split("\n");
+                for (var i=0; i < rows.length; i++) {
+                        var row = $.trim(rows[i]);
+                        if (row) {
+                                row = row.split("|");
+                                parsed[parsed.length] = {
+                                        data: row,
+                                        value: row[0],
+                                        result: options.formatResult && options.formatResult(row, row[0]) || row[0]
+                                };
+                        }
+                }
+                return parsed;
+        };
+
+        function stopLoading() {
+                $input.removeClass(options.loadingClass);
+        };
+
+};
+
+$.Autocompleter.defaults = {
+        inputClass: "ac_input",
+        resultsClass: "ac_results",
+        loadingClass: "ac_loading",
+        minChars: 1,
+        delay: 400,
+        matchCase: false,
+        matchSubset: true,
+        matchContains: false,
+        cacheLength: 100,
+        max: 1000,
+        mustMatch: false,
+        extraParams: {},
+        selectFirst: true,
+        formatItem: function(row) { return row[0]; },
+        formatMatch: null,
+        autoFill: false,
+        width: 0,
+        multiple: false,
+        multipleSeparator: " ",
+        inputFocus: true,
+        clickFire: false,
+        highlight: function(value, term) {
+                return value.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + term.replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1") + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>");
+        },
+    scroll: true,
+    scrollHeight: 180,
+    scrollJumpPosition: true
+};
+
+$.Autocompleter.Cache = function(options) {
+
+        var data = {};
+        var length = 0;
+
+        function matchSubset(s, sub) {
+                if (!options.matchCase) 
+                        s = s.toLowerCase();
+                var i = s.indexOf(sub);
+                if (options.matchContains == "word"){
+                        i = s.toLowerCase().search("\\b" + sub.toLowerCase());
+                }
+                if (i == -1) return false;
+                return i == 0 || options.matchContains;
+        };
+
+        function add(q, value) {
+                if (length > options.cacheLength){
+                        flush();
+                }
+                if (!data[q]){ 
+                        length++;
+                }
+                data[q] = value;
+        }
+
+        function populate(){
+                if( !options.data ) return false;
+                // track the matches
+                var stMatchSets = {},
+                        nullData = 0;
+
+                // no url was specified, we need to adjust the cache length to make sure it fits the local data store
+                if( !options.url ) options.cacheLength = 1;
+
+                // track all options for minChars = 0
+                stMatchSets[""] = [];
+
+                // loop through the array and create a lookup structure
+                for ( var i = 0, ol = options.data.length; i < ol; i++ ) {
+                        var rawValue = options.data[i];
+                        // if rawValue is a string, make an array otherwise just reference the array
+                        rawValue = (typeof rawValue == "string") ? [rawValue] : rawValue;
+
+                        var value = options.formatMatch(rawValue, i+1, options.data.length);
+                        if ( value === false )
+                                continue;
+
+                        var firstChar = value.charAt(0).toLowerCase();
+                        // if no lookup array for this character exists, look it up now
+                        if( !stMatchSets[firstChar] ) 
+                                stMatchSets[firstChar] = [];
+
+                        // if the match is a string
+                        var row = {
+                                value: value,
+                                data: rawValue,
+                                result: options.formatResult && options.formatResult(rawValue) || value
+                        };
+
+                        // push the current match into the set list
+                        stMatchSets[firstChar].push(row);
+
+                        // keep track of minChars zero items
+                        if ( nullData++ < options.max ) {
+                                stMatchSets[""].push(row);
+                        }
+                };
+
+                // add the data items to the cache
+                $.each(stMatchSets, function(i, value) {
+                        // increase the cache size
+                        options.cacheLength++;
+                        // add to the cache
+                        add(i, value);
+                });
+        }
+
+        // populate any existing data
+        setTimeout(populate, 25);
+
+        function flush(){
+                data = {};
+                length = 0;
+        }
+
+        return {
+                flush: flush,
+                add: add,
+                populate: populate,
+                load: function(q) {
+                        if (!options.cacheLength || !length)
+                                return null;
+                        /* 
+                         * if dealing w/local data and matchContains than we must make sure
+                         * to loop through all the data collections looking for matches
+                         */
+                        if( !options.url && options.matchContains ){
+                                // track all matches
+                                var csub = [];
+                                // loop through all the data grids for matches
+                                for( var k in data ){
+                                        // don't search through the stMatchSets[""] (minChars: 0) cache
+                                        // this prevents duplicates
+                                        if( k.length > 0 ){
+                                                var c = data[k];
+                                                $.each(c, function(i, x) {
+                                                        // if we've got a match, add it to the array
+                                                        if (matchSubset(x.value, q)) {
+                                                                csub.push(x);
+                                                        }
+                                                });
+                                        }
+                                }				
+                                return csub;
+                        } else 
+                        // if the exact item exists, use it
+                        if (data[q]){
+                                return data[q];
+                        } else
+                        if (options.matchSubset) {
+                                for (var i = q.length - 1; i >= options.minChars; i--) {
+                                        var c = data[q.substr(0, i)];
+                                        if (c) {
+                                                var csub = [];
+                                                $.each(c, function(i, x) {
+                                                        if (matchSubset(x.value, q)) {
+                                                                csub[csub.length] = x;
+                                                        }
+                                                });
+                                                return csub;
+                                        }
+                                }
+                        }
+                        return null;
+                }
+        };
+};
+
+$.Autocompleter.Select = function (options, input, select, config) {
+        var CLASSES = {
+                ACTIVE: "ac_over"
+        };
+
+        var listItems,
+                active = -1,
+                data,
+                term = "",
+                needsInit = true,
+                element,
+                list;
+
+        // Create results
+        function init() {
+                if (!needsInit)
+                        return;
+                element = $("<div/>")
+                .hide()
+                .addClass(options.resultsClass)
+                .css("position", "absolute")
+                .appendTo(document.body)
+                .hover(function(event) {
+                  // Browsers except FF do not fire mouseup event on scrollbars, resulting in mouseDownOnSelect remaining true, and results list not always hiding.
+                  if($(this).is(":visible")) {
+                    input.focus();
+                  }
+                  config.mouseDownOnSelect = false;
+                });
+
+                list = $("<ul/>").appendTo(element).mouseover( function(event) {
+                        if(target(event).nodeName && target(event).nodeName.toUpperCase() == 'LI') {
+                    active = $("li", list).removeClass(CLASSES.ACTIVE).index(target(event));
+                            $(target(event)).addClass(CLASSES.ACTIVE);            
+                }
+                }).click(function(event) {
+                        $(target(event)).addClass(CLASSES.ACTIVE);
+                        select();
+                        if( options.inputFocus )
+                          input.focus();
+                        return false;
+                }).mousedown(function() {
+                        config.mouseDownOnSelect = true;
+                }).mouseup(function() {
+                        config.mouseDownOnSelect = false;
+                });
+
+                if( options.width > 0 )
+                        element.css("width", options.width);
+
+                needsInit = false;
+        } 
+
+        function target(event) {
+                var element = event.target;
+                while(element && element.tagName != "LI")
+                        element = element.parentNode;
+                // more fun with IE, sometimes event.target is empty, just ignore it then
+                if(!element)
+                        return [];
+                return element;
+        }
+
+        function moveSelect(step) {
+                listItems.slice(active, active + 1).removeClass(CLASSES.ACTIVE);
+                movePosition(step);
+        var activeItem = listItems.slice(active, active + 1).addClass(CLASSES.ACTIVE);
+        if(options.scroll) {
+            var offset = 0;
+            listItems.slice(0, active).each(function() {
+                                offset += this.offsetHeight;
+                        });
+            if((offset + activeItem[0].offsetHeight - list.scrollTop()) > list[0].clientHeight) {
+                list.scrollTop(offset + activeItem[0].offsetHeight - list.innerHeight());
+            } else if(offset < list.scrollTop()) {
+                list.scrollTop(offset);
+            }
+        }
+        };
+
+        function movePosition(step) {
+                if (options.scrollJumpPosition || (!options.scrollJumpPosition && !((step < 0 && active == 0) || (step > 0 && active == listItems.size() - 1)) )) {
+                        active += step;
+                        if (active < 0) {
+                                active = listItems.size() - 1;
+                        } else if (active >= listItems.size()) {
+                                active = 0;
+                        }
+                } 
+        }
+
+
+        function limitNumberOfItems(available) {
+                return options.max && options.max < available
+                        ? options.max
+                        : available;
+        }
+
+        function fillList() {
+                list.empty();
+                var max = limitNumberOfItems(data.length);
+                for (var i=0; i < max; i++) {
+                        if (!data[i])
+                                continue;
+                        var formatted = options.formatItem(data[i].data, i+1, max, data[i].value, term);
+                        if ( formatted === false )
+                                continue;
+                        var li = $("<li/>").html( options.highlight(formatted, term) ).addClass(i%2 == 0 ? "ac_even" : "ac_odd").appendTo(list)[0];
+                        $.data(li, "ac_data", data[i]);
+                }
+                listItems = list.find("li");
+                if ( options.selectFirst ) {
+                        listItems.slice(0, 1).addClass(CLASSES.ACTIVE);
+                        active = 0;
+                }
+                // apply bgiframe if available
+                if ( $.fn.bgiframe )
+                        list.bgiframe();
+        }
+
+        return {
+                display: function(d, q) {
+                        init();
+                        data = d;
+                        term = q;
+                        fillList();
+                },
+                next: function() {
+                        moveSelect(1);
+                },
+                prev: function() {
+                        moveSelect(-1);
+                },
+                pageUp: function() {
+                        if (active != 0 && active - 8 < 0) {
+                                moveSelect( -active );
+                        } else {
+                                moveSelect(-8);
+                        }
+                },
+                pageDown: function() {
+                        if (active != listItems.size() - 1 && active + 8 > listItems.size()) {
+                                moveSelect( listItems.size() - 1 - active );
+                        } else {
+                                moveSelect(8);
+                        }
+                },
+                hide: function() {
+                        element && element.hide();
+                        listItems && listItems.removeClass(CLASSES.ACTIVE);
+                        active = -1;
+                },
+                visible : function() {
+                        return element && element.is(":visible");
+                },
+                current: function() {
+                        return this.visible() && (listItems.filter("." + CLASSES.ACTIVE)[0] || options.selectFirst && listItems[0]);
+                },
+                show: function() {
+                        var offset = $(input).offset();
+                        element.css({
+                                width: typeof options.width == "string" || options.width > 0 ? options.width : $(input).width(),
+                                top: offset.top + input.offsetHeight,
+                                left: offset.left
+                        }).show();
+            if(options.scroll) {
+                list.scrollTop(0);
+                list.css({
+                                        maxHeight: options.scrollHeight,
+                                        overflow: 'auto'
+                                });
+
+                if($.browser.msie && typeof document.body.style.maxHeight === "undefined") {
+                                        var listHeight = 0;
+                                        listItems.each(function() {
+                                                listHeight += this.offsetHeight;
+                                        });
+                                        var scrollbarsVisible = listHeight > options.scrollHeight;
+                    list.css('height', scrollbarsVisible ? options.scrollHeight : listHeight );
+                                        if (!scrollbarsVisible) {
+                                                // IE doesn't recalculate width when scrollbar disappears
+                                                listItems.width( list.width() - parseInt(listItems.css("padding-left")) - parseInt(listItems.css("padding-right")) );
+                                        }
+                }
+
+            }
+                },
+                selected: function() {
+                        var selected = listItems && listItems.filter("." + CLASSES.ACTIVE).removeClass(CLASSES.ACTIVE);
+                        return selected && selected.length && $.data(selected[0], "ac_data");
+                },
+                emptyList: function (){
+                        list && list.empty();
+                },
+                unbind: function() {
+                        element && element.remove();
+                }
+        };
+};
+
+$.fn.selection = function(start, end) {
+        if (start !== undefined) {
+                return this.each(function() {
+                        if( this.createTextRange ){
+                                var selRange = this.createTextRange();
+                                if (end === undefined || start == end) {
+                                        selRange.move("character", start);
+                                        selRange.select();
+                                } else {
+                                        selRange.collapse(true);
+                                        selRange.moveStart("character", start);
+                                        selRange.moveEnd("character", end);
+                                        selRange.select();
+                                }
+                        } else if( this.setSelectionRange ){
+                                this.setSelectionRange(start, end);
+                        } else if( this.selectionStart ){
+                                this.selectionStart = start;
+                                this.selectionEnd = end;
+                        }
+                });
+        }
+        var field = this[0];
+        if ( field.createTextRange ) {
+                var range = document.selection.createRange(),
+                        orig = field.value,
+                        teststring = "<->",
+                        textLength = range.text.length;
+                range.text = teststring;
+                var caretAt = field.value.indexOf(teststring);
+                field.value = orig;
+                this.selection(caretAt, caretAt + textLength);
+                return {
+                        start: caretAt,
+                        end: caretAt + textLength
+                }
+        } else if( field.selectionStart !== undefined ){
+                return {
+                        start: field.selectionStart,
+                        end: field.selectionEnd
+                }
+        }
+};
+
+})(jQuery);

public/javascripts/plugins/bing.js

@@ -46,7 +46,7 @@ function DisplayResults(response)
     var resultStr = "";
     for (var i = 0; i < results.length; ++i)
     {
-        title = results[i].Title.substring(0,40) + "&hellip;";
+        title = (results[i].Title.length > 40) ? results[i].Title.substring(0,40) + "&hellip;" : results[i].Title;
         $appendData = "<li><a href=\""+results[i].Url+"\"><h3>"+title+"</h3>"+results[i].DisplayUrl+"</a></li>";
         $appendData = ReplaceHighlightingCharacters($appendData, "<span>", "</span>");
         $('#artist_links ul').append($appendData);

public/javascripts/plugins/player.js

@@ -121,7 +121,7 @@
       ytplayer.loadVideoById(videoID);
       active = videoID;
       $li = activeVid();
-      $('#playlist li').each(function(){
+      $('.play_list li').each(function(){
       $(this).removeClass("active");
       });
       $li.addClass("active");
@@ -137,8 +137,8 @@
     });
 
 	  // This function is automatically called by the player once it loads
-	  function onYouTubePlayerReady(playerId) {
-      ytplayer = document.getElementById("ytPlayer");
+	function onYouTubePlayerReady(playerid) {
+      ytplayer = document.getElementById("video");
       // This causes the updatePlayerInfo function to be called every 250ms to
       // get fresh data from the player
       startUpdate();
@@ -151,14 +151,14 @@
 	  }
 
 	  // The "main method" of this sample. Called when someone clicks "Run".
-	  function loadPlayer() {
+	function loadPlayer() {
       // Lets Flash from another domain call JavaScript
       var params = { allowScriptAccess: "always" };
       // The element id of the Flash embed
       var atts = { id: "ytPlayer" };
       // All of the magic handled by SWFObject (http://code.google.com/p/swfobject/)
       swfobject.embedSWF("http://www.youtube.com/apiplayer?version=3&enablejsapi=1", 
-                "videoDiv", "50", "28", "8", null, null, params, atts);
+                "videoDiv", "640", "360", "8", null, null, params, atts);
 	  }
 	  function _run() {
 		loadPlayer();
@@ -171,7 +171,7 @@
 		$next = $e.next('li');
 		if($next.html() != null) 
 			loadVideo($next.attr('videoid'));
-    else loadVideo($('#playlist li:first-child').attr('videoid'));
+    else loadVideo($('.play_list li:first-child').attr('videoid'));
 	}
 	function prevVideo()
 	{
@@ -179,22 +179,22 @@
 		$prev = $e.prev('li');
 		if($prev.html() != null) 
 			loadVideo($prev.attr('videoid'));
-    else loadVideo($('#playlist li:last-child').attr('videoid'));
+    else loadVideo($('.play_list li:last-child').attr('videoid'));
 		//$(this).parent().children().index(this);
 	}
 
 	function activeVid()
 	{
-		$x = $('#playlist [videoid='+active+']');
+		$x = $('.play_list [videoid='+active+']');
     //console.log($('#playlist').html());
     return ($x==null) ? '' : $x;
 	}
     
   $('document').ready(function(){
-    $('#player .forward').live('click', function(){
+    $('.forward').live('click', function(){
       nextVideo();
     });
-    $('#player .backward').live('click', function(){
+    $('.backward').live('click', function(){
       prevVideo();
     });
   });

public/javascripts/plugins/scrolling.js

@@ -0,0 +1,118 @@
+/*! Copyright (c) 2010 Brandon Aaron (http://brandonaaron.net)
+ * Licensed under the MIT License (LICENSE.txt).
+ *
+ * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
+ * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
+ * Thanks to: Seamus Leahy for adding deltaX and deltaY
+ *
+ * Version: 3.0.4
+ * 
+ * Requires: 1.2.2+
+ */
+
+(function($) {
+
+var types = ['DOMMouseScroll', 'mousewheel'];
+
+$.event.special.mousewheel = {
+	setup: function() {
+		if ( this.addEventListener ) {
+			for ( var i=types.length; i; ) {
+				this.addEventListener( types[--i], handler, false );
+			}
+		} else {
+			this.onmousewheel = handler;
+		}
+	},
+
+	teardown: function() {
+		if ( this.removeEventListener ) {
+			for ( var i=types.length; i; ) {
+				this.removeEventListener( types[--i], handler, false );
+			}
+		} else {
+			this.onmousewheel = null;
+		}
+	}
+};
+
+$.fn.extend({
+	mousewheel: function(fn) {
+		return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
+	},
+
+	unmousewheel: function(fn) {
+		return this.unbind("mousewheel", fn);
+	}
+});
+
+
+function handler(event) {
+	var orgEvent = event || window.event, args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true, deltaX = 0, deltaY = 0;
+	event = $.event.fix(orgEvent);
+	event.type = "mousewheel";
+
+	// Old school scrollwheel delta
+	if ( event.wheelDelta ) { delta = event.wheelDelta/120; }
+	if ( event.detail     ) { delta = -event.detail/3; }
+
+	// New school multidimensional scroll (touchpads) deltas
+	deltaY = delta;
+
+	// Gecko
+	if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
+		deltaY = 0;
+		deltaX = -1*delta;
+	}
+
+	// Webkit
+	if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/120; }
+	if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = -1*orgEvent.wheelDeltaX/120; }
+
+	// Add event and delta to the front of the arguments
+	args.unshift(event, delta, deltaX, deltaY);
+
+	return $.event.handle.apply(this, args);
+}
+
+})(jQuery);
+
+
+
+
+
+
+
+
+
+
+
+
+/*
+* jScrollPane - v2.0.0beta6 - 2010-10-28
+* http://jscrollpane.kelvinluck.com/
+*
+* Copyright (c) 2010 Kelvin Luck
+* Dual licensed under the MIT and GPL licenses.
+*/
+(function (b, a, c) {
+  b.fn.jScrollPane = function (f) {
+	function d(C, L) {
+	  var au, N = this, V, ah, v, aj, Q, W, y, q, av, aB, ap, i, H, h, j, X, R, al, U, t, A, am, ac, ak, F, l, ao, at, x, aq, aE, g, aA, ag = true, M = true, aD = false, k = false, Z = b.fn.mwheelIntent ? "mwheelIntent.jsp" : "mousewheel.jsp"; aE = C.css("paddingTop") + " " + C.css("paddingRight") + " " + C.css("paddingBottom") + " " + C.css("paddingLeft"); g = (parseInt(C.css("paddingLeft")) || 0) + (parseInt(C.css("paddingRight")) || 0); an(L); function an(aH) { var aL, aK, aJ, aG, aF, aI; au = aH; if (V == c) { C.css({ overflow: "hidden", padding: 0 }); ah = C.innerWidth() + g; v = C.innerHeight(); C.width(ah); V = b('<div class="jspPane" />').wrap(b('<div class="jspContainer" />').css({ width: ah + "px", height: v + "px" })); C.wrapInner(V.parent()); aj = C.find(">.jspContainer"); V = aj.find(">.jspPane"); V.css("padding", aE) } else { C.css("width", ""); aI = C.outerWidth() + g != ah || C.outerHeight() != v; if (aI) { ah = C.innerWidth() + g; v = C.innerHeight(); aj.css({ width: ah + "px", height: v + "px" }) } aA = V.innerWidth(); if (!aI && V.outerWidth() == Q && V.outerHeight() == W) { if (aB || av) { V.css("width", aA + "px"); C.css("width", (aA + g) + "px") } return } V.css("width", ""); C.css("width", (ah) + "px"); aj.find(">.jspVerticalBar,>.jspHorizontalBar").remove().end() } aL = V.clone().css("position", "absolute"); aK = b('<div style="width:1px; position: relative;" />').append(aL); b("body").append(aK); Q = Math.max(V.outerWidth(), aL.outerWidth()); aK.remove(); W = V.outerHeight(); y = Q / ah; q = W / v; av = q > 1; aB = y > 1; if (!(aB || av)) { C.removeClass("jspScrollable"); V.css({ top: 0, width: aj.width() - g }); n(); D(); O(); w(); af() } else { C.addClass("jspScrollable"); aJ = au.maintainPosition && (H || X); if (aJ) { aG = ay(); aF = aw() } aC(); z(); E(); if (aJ) { K(aG); J(aF) } I(); ad(); if (au.enableKeyboardNavigation) { P() } if (au.clickOnTrack) { p() } B(); if (au.hijackInternalLinks) { m() } } if (au.autoReinitialise && !aq) { aq = setInterval(function () { an(au) }, au.autoReinitialiseDelay) } else { if (!au.autoReinitialise && aq) { clearInterval(aq) } } C.trigger("jsp-initialised", [aB || av]) } function aC() { if (av) { aj.append(b('<div class="jspVerticalBar" />').append(b('<div class="jspCap jspCapTop" />'), b('<div class="jspTrack" />').append(b('<div class="jspDrag" />').append(b('<div class="jspDragTop" />'), b('<div class="jspDragBottom" />'))), b('<div class="jspCap jspCapBottom" />'))); R = aj.find(">.jspVerticalBar"); al = R.find(">.jspTrack"); ap = al.find(">.jspDrag"); if (au.showArrows) { am = b('<a class="jspArrow jspArrowUp" />').bind("mousedown.jsp", az(0, -1)).bind("click.jsp", ax); ac = b('<a class="jspArrow jspArrowDown" />').bind("mousedown.jsp", az(0, 1)).bind("click.jsp", ax); if (au.arrowScrollOnHover) { am.bind("mouseover.jsp", az(0, -1, am)); ac.bind("mouseover.jsp", az(0, 1, ac)) } ai(al, au.verticalArrowPositions, am, ac) } t = v; aj.find(">.jspVerticalBar>.jspCap,>.jspVerticalBar>.jspArrow").each(function () { t -= b(this).outerHeight() }); ap.hover(function () { ap.addClass("jspHover") }, function () { ap.removeClass("jspHover") }).bind("mousedown.jsp", function (aF) { b("html").bind("dragstart.jsp selectstart.jsp", function () { return false }); ap.addClass("jspActive"); var s = aF.pageY - ap.position().top; b("html").bind("mousemove.jsp", function (aG) { S(aG.pageY - s, false) }).bind("mouseup.jsp mouseleave.jsp", ar); return false }); o() } } function o() { al.height(t + "px"); H = 0; U = au.verticalGutter + al.outerWidth(); V.width(ah - U - g); if (R.position().left == 0) { V.css("margin-left", U + "px") } } function z() {
+		if (aB) {
+		  aj.append(b('<div class="jspHorizontalBar" />').append(b('<div class="jspCap jspCapLeft" />'), b('<div class="jspTrack" />').append(b('<div class="jspDrag" />').append(b('<div class="jspDragLeft" />'), b('<div class="jspDragRight" />'))), b('<div class="jspCap jspCapRight" />'))); ak = aj.find(">.jspHorizontalBar"); F = ak.find(">.jspTrack"); h = F.find(">.jspDrag"); if (au.showArrows) {
+			at = b('<a class="jspArrow jspArrowLeft" />').bind("mousedown.jsp", az(-1, 0)).bind("click.jsp", ax); x = b('<a class="jspArrow jspArrowRight" />').bind("mousedown.jsp", az(1, 0)).bind("click.jsp", ax); if (au.arrowScrollOnHover) {
+			  at.bind("mouseover.jsp", az(-1, 0, at));
+			  x.bind("mouseover.jsp", az(1, 0, x))
+			} ai(F, au.horizontalArrowPositions, at, x)
+		  } h.hover(function () { h.addClass("jspHover") }, function () { h.removeClass("jspHover") }).bind("mousedown.jsp", function (aF) { b("html").bind("dragstart.jsp selectstart.jsp", function () { return false }); h.addClass("jspActive"); var s = aF.pageX - h.position().left; b("html").bind("mousemove.jsp", function (aG) { T(aG.pageX - s, false) }).bind("mouseup.jsp mouseleave.jsp", ar); return false }); l = aj.innerWidth(); ae()
+		} else { } 
+	  } function ae() { aj.find(">.jspHorizontalBar>.jspCap:visible,>.jspHorizontalBar>.jspArrow").each(function () { l -= b(this).outerWidth() }); F.width(l + "px"); X = 0 } function E() { if (aB && av) { var aF = F.outerHeight(), s = al.outerWidth(); t -= aF; b(ak).find(">.jspCap:visible,>.jspArrow").each(function () { l += b(this).outerWidth() }); l -= s; v -= s; ah -= aF; F.parent().append(b('<div class="jspCorner" />').css("width", aF + "px")); o(); ae() } if (aB) { V.width((aj.outerWidth() - g) + "px") } W = V.outerHeight(); q = W / v; if (aB) { ao = 1 / y * l; if (ao > au.horizontalDragMaxWidth) { ao = au.horizontalDragMaxWidth } else { if (ao < au.horizontalDragMinWidth) { ao = au.horizontalDragMinWidth } } h.width(ao + "px"); j = l - ao; ab(X) } if (av) { A = 1 / q * t; if (A > au.verticalDragMaxHeight) { A = au.verticalDragMaxHeight } else { if (A < au.verticalDragMinHeight) { A = au.verticalDragMinHeight } } ap.height(A + "px"); i = t - A; aa(H) } } function ai(aG, aI, aF, s) { var aK = "before", aH = "after", aJ; if (aI == "os") { aI = /Mac/.test(navigator.platform) ? "after" : "split" } if (aI == aK) { aH = aI } else { if (aI == aH) { aK = aI; aJ = aF; aF = s; s = aJ } } aG[aK](aF)[aH](s) } function az(aF, s, aG) { return function () { G(aF, s, this, aG); this.blur(); return false } } function G(aH, aF, aK, aJ) { aK = b(aK).addClass("jspActive"); var aI, s = function () { if (aH != 0) { T(X + aH * au.arrowButtonSpeed, false) } if (aF != 0) { S(H + aF * au.arrowButtonSpeed, false) } }, aG = setInterval(s, au.arrowRepeatFreq); s(); aI = aJ == c ? "mouseup.jsp" : "mouseout.jsp"; aJ = aJ || b("html"); aJ.bind(aI, function () { aK.removeClass("jspActive"); clearInterval(aG); aJ.unbind(aI) }) } function p() { w(); if (av) { al.bind("mousedown.jsp", function (aH) { if (aH.originalTarget == c || aH.originalTarget == aH.currentTarget) { var aG = b(this), s = setInterval(function () { var aI = aG.offset(), aJ = aH.pageY - aI.top; if (H + A < aJ) { S(H + au.trackClickSpeed) } else { if (aJ < H) { S(H - au.trackClickSpeed) } else { aF() } } }, au.trackClickRepeatFreq), aF = function () { s && clearInterval(s); s = null; b(document).unbind("mouseup.jsp", aF) }; b(document).bind("mouseup.jsp", aF); return false } }) } if (aB) { F.bind("mousedown.jsp", function (aH) { if (aH.originalTarget == c || aH.originalTarget == aH.currentTarget) { var aG = b(this), s = setInterval(function () { var aI = aG.offset(), aJ = aH.pageX - aI.left; if (X + ao < aJ) { T(X + au.trackClickSpeed) } else { if (aJ < X) { T(X - au.trackClickSpeed) } else { aF() } } }, au.trackClickRepeatFreq), aF = function () { s && clearInterval(s); s = null; b(document).unbind("mouseup.jsp", aF) }; b(document).bind("mouseup.jsp", aF); return false } }) } } function w() { F && F.unbind("mousedown.jsp"); al && al.unbind("mousedown.jsp") } function ar() { b("html").unbind("dragstart.jsp selectstart.jsp mousemove.jsp mouseup.jsp mouseleave.jsp"); ap && ap.removeClass("jspActive"); h && h.removeClass("jspActive") } function S(s, aF) { if (!av) { return } if (s < 0) { s = 0 } else { if (s > i) { s = i } } if (aF == c) { aF = au.animateScroll } if (aF) { N.animate(ap, "top", s, aa) } else { ap.css("top", s); aa(s) } } function aa(aF) { if (aF == c) { aF = ap.position().top } aj.scrollTop(0); H = aF; var aI = H == 0, aG = H == i, aH = aF / i, s = -aH * (W - v); if (ag != aI || aD != aG) { ag = aI; aD = aG; C.trigger("jsp-arrow-change", [ag, aD, M, k]) } u(aI, aG); V.css("top", s); C.trigger("jsp-scroll-y", [-s, aI, aG]) } function T(aF, s) { if (!aB) { return } if (aF < 0) { aF = 0 } else { if (aF > j) { aF = j } } if (s == c) { s = au.animateScroll } if (s) { N.animate(h, "left", aF, ab) } else { h.css("left", aF); ab(aF) } } function ab(aF) { if (aF == c) { aF = h.position().left } aj.scrollTop(0); X = aF; var aI = X == 0, aH = X == j, aG = aF / j, s = -aG * (Q - ah); if (M != aI || k != aH) { M = aI; k = aH; C.trigger("jsp-arrow-change", [ag, aD, M, k]) } r(aI, aH); V.css("left", s); C.trigger("jsp-scroll-x", [-s, aI, aH]) } function u(aF, s) { if (au.showArrows) { am[aF ? "addClass" : "removeClass"]("jspDisabled"); ac[s ? "addClass" : "removeClass"]("jspDisabled") } } function r(aF, s) {
+		if (au.showArrows) {
+		  at[aF ? "addClass" : "removeClass"]("jspDisabled");
+		  x[s ? "addClass" : "removeClass"]("jspDisabled")
+		} 
+	  } function J(s, aF) { var aG = s / (W - v); S(aG * i, aF) } function K(aF, s) { var aG = aF / (Q - ah); T(aG * j, s) } function Y(aR, aM, aG) { var aK, aH, aI, s = 0, aQ = 0, aF, aL, aO, aN, aP; try { aK = b(aR) } catch (aJ) { return } aH = aK.outerHeight(); aI = aK.outerWidth(); aj.scrollTop(0); aj.scrollLeft(0); while (!aK.is(".jspPane")) { s += aK.position().top; aQ += aK.position().left; aK = aK.offsetParent(); if (/^body|html$/i.test(aK[0].nodeName)) { return } } aF = aw(); aL = aF + v; if (s < aF || aM) { aN = s - au.verticalGutter } else { if (s + aH > aL) { aN = s - v + aH + au.verticalGutter } } if (aN) { J(aN, aG) } viewportLeft = ay(); aO = viewportLeft + ah; if (aQ < viewportLeft || aM) { aP = aQ - au.horizontalGutter } else { if (aQ + aI > aO) { aP = aQ - ah + aI + au.horizontalGutter } } if (aP) { K(aP, aG) } } function ay() { return -V.position().left } function aw() { return -V.position().top } function ad() { aj.unbind(Z).bind(Z, function (aI, aJ, aH, aF) { var aG = X, s = H; T(X + aH * au.mouseWheelSpeed, false); S(H - aF * au.mouseWheelSpeed, false); return aG == X && s == H }) } function n() { aj.unbind(Z) } function ax() { return false } function I() { V.unbind("focusin.jsp").bind("focusin.jsp", function (s) { if (s.target === V[0]) { return } Y(s.target, false) }) } function D() { V.unbind("focusin.jsp") } function P() { var aF, s; C.attr("tabindex", 0).unbind("keydown.jsp").bind("keydown.jsp", function (aJ) { if (aJ.target !== C[0]) { return } var aH = X, aG = H, aI = aF ? 2 : 16; switch (aJ.keyCode) { case 40: S(H + aI, false); break; case 38: S(H - aI, false); break; case 34: case 32: J(aw() + Math.max(32, v) - 16); break; case 33: J(aw() - v + 16); break; case 35: J(W - v); break; case 36: J(0); break; case 39: T(X + aI, false); break; case 37: T(X - aI, false); break } if (!(aH == X && aG == H)) { aF = true; clearTimeout(s); s = setTimeout(function () { aF = false }, 260); return false } }); if (au.hideFocus) { C.css("outline", "none"); if ("hideFocus" in aj[0]) { C.attr("hideFocus", true) } } else { C.css("outline", ""); if ("hideFocus" in aj[0]) { C.attr("hideFocus", false) } } } function O() { C.attr("tabindex", "-1").removeAttr("tabindex").unbind("keydown.jsp") } function B() { if (location.hash && location.hash.length > 1) { var aG, aF; try { aG = b(location.hash) } catch (s) { return } if (aG.length && V.find(aG)) { if (aj.scrollTop() == 0) { aF = setInterval(function () { if (aj.scrollTop() > 0) { Y(location.hash, true); b(document).scrollTop(aj.position().top); clearInterval(aF) } }, 50) } else { Y(location.hash, true); b(document).scrollTop(aj.position().top) } } } } function af() { b("a.jspHijack").unbind("click.jsp-hijack").removeClass("jspHijack") } function m() { af(); b("a[href^=#]").addClass("jspHijack").bind("click.jsp-hijack", function () { var s = this.href.split("#"), aF; if (s.length > 1) { aF = s[1]; if (aF.length > 0 && V.find("#" + aF).length > 0) { Y("#" + aF, true); return false } } }) } b.extend(N, { reinitialise: function (aF) { aF = b.extend({}, aF, au); an(aF) }, scrollToElement: function (aG, aF, s) { Y(aG, aF, s) }, scrollTo: function (aG, s, aF) { K(aG, aF); J(s, aF) }, scrollToX: function (aF, s) { K(aF, s) }, scrollToY: function (s, aF) { J(s, aF) }, scrollBy: function (aF, s, aG) { N.scrollByX(aF, aG); N.scrollByY(s, aG) }, scrollByX: function (s, aG) { var aF = ay() + s, aH = aF / (Q - ah); T(aH * j, aG) }, scrollByY: function (s, aG) { var aF = aw() + s, aH = aF / (W - v); S(aH * i, aG) }, animate: function (aF, aI, s, aH) { var aG = {}; aG[aI] = s; aF.animate(aG, { duration: au.animateDuration, ease: au.animateEase, queue: false, step: aH }) }, getContentPositionX: function () { return ay() }, getContentPositionY: function () { return aw() }, getIsScrollableH: function () { return aB }, getIsScrollableV: function () { return av }, getContentPane: function () { return V }, scrollToBottom: function (s) { S(i, s) }, hijackInternalLinks: function () { m() } })
+	} f = b.extend({}, b.fn.jScrollPane.defaults, f); var e; this.each(function () { var g = b(this), h = g.data("jsp"); if (h) { h.reinitialise(f) } else { h = new d(g, f); g.data("jsp", h) } e = e ? e.add(g) : g }); return e
+  }; b.fn.jScrollPane.defaults = { showArrows: false, maintainPosition: true, clickOnTrack: true, autoReinitialise: false, autoReinitialiseDelay: 500, verticalDragMinHeight: 0, verticalDragMaxHeight: 99999, horizontalDragMinWidth: 0, horizontalDragMaxWidth: 99999, animateScroll: false, animateDuration: 300, animateEase: "linear", hijackInternalLinks: false, verticalGutter: 4, horizontalGutter: 4, mouseWheelSpeed: 10, arrowButtonSpeed: 10, arrowRepeatFreq: 100, arrowScrollOnHover: false, trackClickSpeed: 30, trackClickRepeatFreq: 100, verticalArrowPositions: "split", horizontalArrowPositions: "split", enableKeyboardNavigation: true, hideFocus: false }
+})(jQuery, this);

public/javascripts/search.js

@@ -0,0 +1,13 @@
+$(document).ready(function(){
+  $("#search_form .text").autocomplete('', {
+    width: 300,
+    multiple: true
+  });
+});
+
+function init_autocomplete(){
+  $("#search_bar .text").autocomplete('', {
+    width: 300,
+    multiple: true
+  });
+}

public/javascripts/store.js

@@ -0,0 +1,101 @@
+/* Copyright (c) 2010 Marcus Westin
+ *
+ * store.js
+ */
+
+jQuery.store = (function(){
+	var api = {},
+		win = window,
+		doc = win.document,
+		localStorageName = 'localStorage',
+		globalStorageName = 'globalStorage',
+		storage
+
+	api.disabled = false
+	api.set = function(key, value) {}
+	api.get = function(key) {}
+	api.remove = function(key) {}
+	api.clear = function() {}
+	api.transact = function(key, transactionFn) {
+		var val = api.get(key)
+		if (typeof val == 'undefined') { val = {} }
+		transactionFn(val)
+		api.set(key, val)
+	}
+
+	api.serialize = function(value) {
+		return JSON.stringify(value)
+	}
+	api.deserialize = function(value) {
+		if (typeof value != 'string') { return undefined }
+		return JSON.parse(value)
+	}
+
+	// Functions to encapsulate questionable FireFox 3.6.13 behavior 
+	// when about.config::dom.storage.enabled === false
+	// See https://github.com/marcuswestin/store.js/issues#issue/13
+	function isLocalStorageNameSupported() {
+		try { return (localStorageName in win && win[localStorageName]) }
+		catch(err) { return false }
+	}
+
+	function isGlobalStorageNameSupported() {
+		try { return (globalStorageName in win && win[globalStorageName] && win[globalStorageName][win.location.hostname]) }
+		catch(err) { return false }
+	}	
+
+	if (isLocalStorageNameSupported()) {
+		storage = win[localStorageName]
+		api.set = function(key, val) { storage.setItem(key, api.serialize(val)) }
+		api.get = function(key) { return api.deserialize(storage.getItem(key)) }
+		api.remove = function(key) { storage.removeItem(key) }
+		api.clear = function() { storage.clear() }
+
+	} else if (isGlobalStorageNameSupported()) {
+		storage = win[globalStorageName][win.location.hostname]
+		api.set = function(key, val) { storage[key] = api.serialize(val) }
+		api.get = function(key) { return api.deserialize(storage[key] && storage[key].value) }
+		api.remove = function(key) { delete storage[key] }
+		api.clear = function() { for (var key in storage ) { delete storage[key] } }
+
+	} else if (doc.documentElement.addBehavior) {
+		var storage = doc.createElement('div')
+		function withIEStorage(storeFunction) {
+			return function() {
+				var args = Array.prototype.slice.call(arguments, 0)
+				args.unshift(storage)
+				// See http://msdn.microsoft.com/en-us/library/ms531081(v=VS.85).aspx
+				// and http://msdn.microsoft.com/en-us/library/ms531424(v=VS.85).aspx
+				doc.body.appendChild(storage)
+				storage.addBehavior('#default#userData')
+				storage.load(localStorageName)
+				var result = storeFunction.apply(api, args)
+				doc.body.removeChild(storage)
+				return result
+			}
+		}
+		api.set = withIEStorage(function(storage, key, val) {
+			storage.setAttribute(key, api.serialize(val))
+			storage.save(localStorageName)
+		})
+		api.get = withIEStorage(function(storage, key) {
+			return api.deserialize(storage.getAttribute(key))
+		})
+		api.remove = withIEStorage(function(storage, key) {
+			storage.removeAttribute(key)
+			storage.save(localStorageName)
+		})
+		api.clear = withIEStorage(function(storage) {
+			var attributes = storage.XMLDocument.documentElement.attributes
+			storage.load(localStorageName)
+			for (var i=0, attr; attr = attributes[i]; i++) {
+				storage.removeAttribute(attr.name)
+			}
+			storage.save(localStorageName)
+		})
+	} else {
+		api.disabled = true
+	}
+
+	return api
+})();

public/stylesheets/sass/9minutes.scss

@@ -5,8 +5,13 @@
 @import "home";
 @import "user";
 @import "charts";
+@import "search";
+@import "album";
 
+@import "player";
 @import "sidebar";
 @import "nivoslider";
+@import "scrolling";
 @import "lists";
-@import "fullscreen";
+@import "fullscreen";
+@import "autocomplete";

public/stylesheets/sass/_album.scss

@@ -0,0 +1,78 @@
+/*********************************/
+/************* ALBUM *************/
+/*********************************/
+
+$bg: #f4f6f9;
+
+#album_box {
+  position: absolute;
+  top: 69px;
+  left: 100px;
+  display: none;
+  z-index: 12;
+  border: 7px solid rgba(255,255,255,0.8);
+  //@include rounded(10px);
+  @include shadow(0 0 2px 2px rgba(31,34,40,0.10));
+  > span {
+    position: absolute;
+    top: -19px;
+    left: 70px;
+    background: url('#{$ico-url}/arrow.png') no-repeat;
+    width: 47px;
+    height: 23px;
+  }
+  .headline {
+    background: desaturate(darken($bg,6%),10%);
+    float: left;
+    width: 128px;
+    height: 180px;
+    padding: 10px;
+    border-right: 1px solid desaturate(darken($bg,10%),10%);
+    h4 {
+      font-size: 18px;
+      line-height: 16px;
+      span {
+        font-size: 14px;
+        color: $blue;
+      }
+    }
+    img {
+      margin-bottom: 10px;
+      width: 128px;
+      height: 128px;
+    }
+  }
+  
+  .wrap {
+    background: $bg;
+    float: right;
+    max-height: 200px;
+    overflow:auto;
+    width: 279px;
+    //@include rounded(8px);
+    li {
+      padding: 7px 9px;
+      overflow: hidden;
+      width: 259px;
+      border-bottom: 1px solid darken($bg,6%);
+      border-top: 1px solid lighten($bg,01%);
+      span {
+        color: #9aa7b3;
+        width: 20px;
+        display: inline-block;
+      }
+      .playsong, .add {
+        width: 20px;
+        height: 20px;
+        display: inline-block;
+        background: url('#{$ico-url}/list-controls.png') no-repeat 0 0;
+        vertical-align: middle;
+        float: right;
+      }
+      .add {
+        margin-right: 6px;
+        background-position: 0 -20px;
+      }
+    }
+  }
+}

public/stylesheets/sass/_artist.scss

@@ -13,12 +13,13 @@ $padding: 28px;
 #artist_left {
   float: left;
   @include set-width-for-artist-left(386px);
-
+  
   #slider {
     position: relative;
     width: 386px;
     height: 240px;
     overflow: hidden;
+    background: url('#{$place-url}/artist-big.png') no-repeat 0 0;
 
     img {
       position: absolute;
@@ -27,6 +28,17 @@ $padding: 28px;
       max-width: 386px;
     }
   }
+  h1 {
+    color: #fff;
+    font-size: 30px;
+    $height: 74px;
+    overflow: hidden;
+    height: $height;
+    line-height: $height - 4;
+    text-indent: $padding;
+    margin-bottom: 23px;
+    @include stripe-bg();
+  }
   #artist_links {
     ul { margin: -2px 0 30px 0; }
     li {

public/stylesheets/sass/_autocomplete.scss

@@ -0,0 +1,52 @@
+/*********************************/
+/********* AUTOCOMPLETE **********/
+/*********************************/
+
+.ac_results {
+  padding: 0px;
+  border: 1px solid black;
+  background-color: white;
+  overflow: hidden;
+  z-index: 99999;
+}
+
+.ac_results ul {
+  width: 100%;
+  list-style-position: outside;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.ac_results li {
+  margin: 0px;
+  padding: 2px 5px;
+  cursor: default;
+  display: block;
+  /* 
+  if width will be 100% horizontal scrollbar will apear 
+  when scroll mode will be used
+  */
+  /*width: 100%;*/
+  font: menu;
+  font-size: 12px;
+  /* 
+  it is very important, if line-height not setted or setted 
+  in relative units scroll will be broken in firefox
+  */
+  line-height: 16px;
+  overflow: hidden;
+}
+
+.ac_loading {
+  background: white url('indicator.gif') right center no-repeat;
+}
+
+.ac_odd {
+  background-color: #eee;
+}
+
+.ac_over {
+  background-color: #0A246A;
+  color: white;
+}

public/stylesheets/sass/_charts.scss

@@ -25,6 +25,7 @@
     .img {
       width: 90px;
       height: $height;
+      background: url('#{$place-url}/artist.png') no-repeat 0 0;
       float: left;
       overflow: hidden;
       position: relative;
@@ -44,9 +45,6 @@
           &:hover { text-decoration: underline; }
         }
       }
-      p {
-        
-      }
     }
   }
 }

public/stylesheets/sass/_fullscreen.scss

@@ -33,19 +33,49 @@
     color: #fff;
     margin-bottom: 20px;
   }
-  img.left {
+  #video {
     float: left;
     width: 640px;
+    height: 360px;
+    @include stripe-bg();
   }
   .sidebar {
     float: right;
     width: 310px;
     height: 360px;
     @include stripe-bg();
-    .player {
+    .top {
       width: 310px;
       height: 125px;
       @include stripe-bg();
+      text-align: center;
+      line-height: 125px;
+      .player {
+        float: left;
+        margin-top: 47px;
+        margin-left: 40px;
+      }
+    }
+    .play_list {
+      width: 310px;
+      height: 235px;
+      padding: 10px 0; 
+      overflow: auto; 
+      li {
+        padding: 6px 25px;
+        h3 {
+          font-size: 22px;
+          color: white;
+          line-height: 22px;
+          span {
+            display: block;
+            font-size: 12px;
+            text-transform: uppercase;
+            color: $blue;
+          }
+        }
+      }
+      .jspVerticalBar { left: 0!important; opacity: 0.02; }
     }
   }
 }

public/stylesheets/sass/_layout.scss

@@ -17,6 +17,7 @@ $ultra-light: #f4f6f9;
 $base-url: "/images";
 $bg-url: "#{$base-url}/backgrounds";
 $ico-url: "#{$base-url}/icons";
+$place-url: "#{$base-url}/placeholder";
 
 /* FUNCTIONS */
 @mixin center() {
@@ -30,6 +31,18 @@ $ico-url: "#{$base-url}/icons";
   background: transparent url('#{$bg-url}/stripe-dark.png') repeat;
 }
 
+@mixin rounded($radius) {
+  border-radius: $radius;
+  -moz-border-radius: $radius;
+  -webkit-border-radius: $radius;
+}
+@mixin shadow($value) {
+  -moz-box-shadow: $value;
+  -webkit-box-shadow: $value;
+  box-shadow: $value;
+}
+
+
 /* SHORTCUTS */
 .clean { clear: both; }
 
@@ -51,7 +64,7 @@ a { cursor: pointer; }
 
 /* OVERALL */
 body { 
-  background: #010203 url('#{$bg-url}/overall.png') no-repeat center top;
+  background: #05070a url('#{$bg-url}/overall.png') no-repeat center top;
   color: $content-black;
   font-size: 12px;
   @include medium-font()
@@ -172,7 +185,7 @@ body {
     > div { width: $w - 2*$p; }
     .more { 
       width: $w; 
-      margin: 0 0 - $p -48px 0 - $p;
+      margin: 7px 0 - $p -48px 0 - $p;
     }
   }
 }
@@ -184,7 +197,7 @@ body {
   $padding-width: 37px;
   .content {
     background: #fff;
-    > div { display: none; }
+    > div { display: none; position: relative; }
     padding: 48px $padding-width;
   }
   .more {
@@ -232,16 +245,6 @@ body {
 $padding: 22px;
 
 #content {
-  h1 {
-    color: #fff;
-    font-size: 30px;
-    $height: 74px;
-    height: $height;
-    line-height: $height - 4;
-    text-indent: $padding;
-    margin-bottom: 23px;
-    @include stripe-bg();
-  }
   .information {
     overflow: hidden;
     padding-bottom: 22px;
@@ -305,8 +308,14 @@ $padding: 22px;
   width: 100%;
   height: 100%;
   position: fixed;
-  z-index: 8;
+  z-index: 22;
   background: #000;
   opacity: 0;
   display: none;
+}
+
+.box {
+  padding: 10px;
+  border: 1px solid desaturate(darken($ultra-light, 6%), 20%);
+  background: $ultra-light;
 }

public/stylesheets/sass/_lists.scss

@@ -5,7 +5,7 @@
 .list {
   margin-bottom: 20px;
   display: block;
-  overflow: hidden;
+  float: left;
   &.songs {
     li {
       $height: 24px;
@@ -22,7 +22,7 @@
       }
       @include std-font();
       &:last-child { margin-bottom: 0; }
-      .play, .add {
+      .playsong, .add {
         width: 20px;
         height: 20px;
         display: inline-block;
@@ -39,9 +39,11 @@
 
   &.albums {
     margin-bottom: 10px;
-    li {
-      overflow: hidden;
+    > li {
       margin-bottom: 15px;
+      min-width: 450px;
+      position: relative;
+      clear: both;
       &:last-child { margin-bottom: 0; }
       .songsbtn {
         text-transform: uppercase;
@@ -127,11 +129,50 @@
         float: left;
         overflow: hidden;
         position: relative;
+        background: url('#{$place-url}/related.png') no-repeat 0 0;
+      }
+    }
+  }
+  &.artists {
+    width: 530px;
+    float: left;
+    li {
+      $height: 50px;
+      overflow: hidden;
+      display: block;
+      padding-bottom: 10px;
+      border-bottom: 1px solid #f0f2f4;
+      margin-bottom: 10px;
+      .img {
+        width: 90px;
+        height: $height;
+        float: left;
+        overflow: hidden;
+        position: relative;
+        background: url('#{$place-url}/artist.png') no-repeat 0 0;
+        img {
+          max-width: 90px;
+        }
+      }
+      .text {
+        float: left;
+        margin-left: 15px;
+        h2 {
+          margin: -3px 0 5px 0;
+          a {
+            color: $blue;
+            font-size: 16px;
+            text-decoration: none;
+            &:hover { text-decoration: underline; }
+          }
+        }
       }
     }
   }
 }
 
+
+
 .playlist {
   background: #080a0c;
   width: 150px;

public/stylesheets/sass/_player.scss

@@ -0,0 +1,20 @@
+/*********************************/
+/************ LAYOUT *************/
+/*********************************/
+
+.player {
+  float: right;
+  height: 47px;
+  margin: 52px 17px 0 0;
+  line-height: 47px;
+  a { float: left; }
+  .play { margin: -8px 5px 0 5px; }
+  .forward, .backward {
+    display: inline-block;
+    width: 32px;
+    height: 32px;
+  }
+  .volume, .repeat, #full {
+    margin: -5px 0 0 20px;
+  }
+}

public/stylesheets/sass/_scrolling.scss

@@ -0,0 +1,122 @@
+/*********************************/
+/********** SCROLLING ************/
+/*********************************/
+
+/*
+ * CSS Styles that are needed by jScrollPane for it to operate correctly.
+ *
+ * Include this stylesheet in your site or copy and paste the styles below into your stylesheet - jScrollPane
+ * may not operate correctly without them.
+ */
+
+.jspContainer
+{
+  overflow: hidden;
+  position: relative;
+}
+
+.jspPane
+{
+  position: absolute;
+}
+
+.jspVerticalBar
+{
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 6px;
+  height: 100%;
+}
+
+.jspHorizontalBar
+{
+  width: 0; height: 0;
+  display: none;
+}
+
+.jspVerticalBar *,
+.jspHorizontalBar *
+{
+  margin: 0;
+  padding: 0;
+}
+
+.jspCap
+{
+  display: none;
+}
+
+.jspHorizontalBar .jspCap
+{
+  float: left;
+}
+
+.jspTrack
+{
+  background: transparent;
+  position: relative;
+  padding: 0 0;
+}
+
+.jspDrag
+{
+  background: #e0e6ee;
+  position: relative;
+  top: 0;
+  left: 2px;
+  width: 4px;
+  cursor: pointer;
+}
+
+.jspHorizontalBar .jspTrack,
+.jspHorizontalBar .jspDrag
+{
+  float: left;
+  height: 100%;
+}
+
+.jspArrow
+{
+  background: #50506d;
+  text-indent: -20000px;
+  display: block;
+  cursor: pointer;
+}
+
+.jspArrow.jspDisabled
+{
+  cursor: default;
+  background: #80808d;
+}
+
+.jspVerticalBar .jspArrow
+{
+  height: 16px;
+}
+
+.jspHorizontalBar .jspArrow
+{
+  width: 16px;
+  float: left;
+  height: 100%;
+}
+
+.jspVerticalBar .jspArrow:focus
+{
+  outline: none;
+}
+
+.jspCorner
+{
+  background: #eeeef4;
+  float: left;
+  height: 100%;
+}
+
+/* Yuk! CSS Hack for IE6 3 pixel bug :( */
+* html .jspCorner
+{
+  margin: 0 -3px 0 0;
+}
+

public/stylesheets/sass/_search.scss

@@ -0,0 +1,28 @@
+/*********************************/
+/************ LAYOUT *************/
+/*********************************/
+
+#search_bar {
+  width: 500px;
+  float: left;
+  border: 0;
+  margin-bottom: 20px;
+  position: relative;
+  padding: 15px;
+  input {
+    width: 498px;
+    height: 35px;
+    text-indent: 10px;
+    font-size: 14px;
+    border: 1px solid desaturate(darken($ultra-light, 10%), 20%);
+    @include rounded(4px);
+    &:focus { border-color: $blue }
+  }
+  .button {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    right: 26px;
+    top: 24px;
+  }
+}

public/stylesheets/sass/_sidebar.scss

@@ -8,9 +8,6 @@
   .advertisment {
     width: 300px;
     height: 270px;
-    padding: 10px;
-    border: 1px solid $ultra-light;
-    background: lighten($ultra-light, 2%);
   }
   img { float: left; }
   sup {