diff -r 126cbe638fee -r 08a366a35143 client/js/main.js
--- a/client/js/main.js	Thu Aug 30 18:11:25 2012 +0200
+++ b/client/js/main.js	Mon Sep 03 17:21:35 2012 +0200
@@ -26,15 +26,24 @@
 
 Rkns._ = _;
 
-Rkns.Bins = {}
-
-Rkns.Bins._Base = function(_renkan, _opts) {
+Rkns._BaseBin = function(_renkan, _opts) {
     if (typeof _renkan !== "undefined") {
         this.renkan = _renkan;
         this.renkan.$.find(".Rk-Bin-Main").hide();
         this.$ = Rkns.$('<li>')
             .addClass("Rk-Bin")
             .appendTo(_renkan.$.find(".Rk-Bin-List"));
+        this.title_icon_$ = Rkns.$('<span>')
+            .addClass("Rk-Bin-Title-Icon")
+            .appendTo(this.$);
+        var _this = this;
+        Rkns.$('<span>')
+            .addClass("Rk-Bin-Close")
+            .html('&times;')
+            .appendTo(this.$)
+            .click(function() {
+                _this.destroy();
+            });
         this.title_$ = Rkns.$('<h2>')
             .addClass("Rk-Bin-Title")
             .appendTo(this.$);
@@ -45,6 +54,12 @@
         this.renkan.resizeBins();
     }
 }
+
+Rkns._BaseBin.prototype.destroy = function() {
+    this.$.detach();
+    this.renkan.resizeBins();
+}
+
 /* Point of entry */
 
 Rkns.Renkan = function(_opts) {
@@ -58,14 +73,18 @@
         _opts.search = [];
     }
     this.project = new Rkns.Models.Project();
+    this.language = _opts.language;
     this.l10n = Rkns.i18n[_opts.language];
     if (typeof _opts.user_id !== "undefined") {
         this.current_user = _opts.user_id;
     }
     this.$ = Rkns.$("#" + _opts.container);
-    this.$.html(this.template());
+    this.$
+        .addClass("Rk-Main")
+        .html(this.template());
     this.renderer = new Rkns.Renderer.Scene(this);
     this.tabs = [];
+    this.search_engines = [];
     this.selected_bin_item = undefined;
     var _this = this;
     this.$.mouseup(function() {
@@ -75,33 +94,41 @@
     if (!_opts.search.length) {
         this.$.find(".Rk-Search-Form").detach();
     } else {
-        var _tmpl = Rkns._.template('<option value="<%= key %>"><%= value.title %></option>'),
-            _select = this.$.find(".Rk-Search-Select"),
+        var _tmpl = Rkns._.template('<li class="<%= className %>" data-key="<%= key %>"><%= title %></li>'),
+            _select = this.$.find(".Rk-Search-List"),
             _input = this.$.find(".Rk-Search-Input")
             _form = this.$.find(".Rk-Search-Form");
+        Rkns._(_opts.search).each(function(_search, _key) {
+            var _searchObj = new _search.type(_this, _search);
+            _this.search_engines.push(_searchObj);
+        });
         _select.html(
-            Rkns._(_opts.search).map(function(_value, _key) {
+            Rkns._(this.search_engines).map(function(_search, _key) {
                 return _tmpl({
                     key: _key,
-                    value: _value
+                    title: _search.getSearchTitle(),
+                    className: _search.getBgClass()
                 });
             }).join("")
-        ).change(function() {
+        );
+        _select.find("li").click(function() {
+            var _el = Rkns.$(this);
+            _this.setSearchEngine(_el.attr("data-key"));
             _form.submit();
         });
         _form.submit(function() {
             if (_input.val()) {
-                var _search = _opts.search[_select.val()];
-                _this.tabs.push(
-                    new _search.bin(
-                        _this,
-                        Rkns._({ search: _input.val() }).defaults(_search)
-                    )
-                );
+                var _search = _this.search_engine;
+                _search.search(_input.val());
             }
             return false;
-            
         });
+        this.$.find(".Rk-Search-Select").mouseenter(function() {
+            _select.slideDown();
+        }).mouseleave(function() {
+            _select.slideUp();
+        })
+        this.setSearchEngine(0);
     }
     Rkns._(_opts.bins).each(function(_bin) {
         _this.tabs.push(new _bin.bin(_this, _bin));
@@ -124,7 +151,7 @@
     
     this.$.find(".Rk-Bins")
         .click(function(_e) {
-            if (_e.target.className == "Rk-Bin-Title") {
+            if (Rkns.$(_e.target).is(".Rk-Bin-Title,.Rk-Bin-Title-Icon")) {
                 var _mainDiv = Rkns.$(_e.target).siblings(".Rk-Bin-Main");
                 if (_mainDiv.is(":hidden")) {
                     _this.$.find(".Rk-Bin-Main").slideUp();
@@ -161,12 +188,19 @@
 }
 
 Rkns.Renkan.prototype.template = Rkns._.template(
-    '<div class="Rk-Bins">'
-    + '<form class="Rk-Search-Form"><input class="Rk-Search-Input" type="search" placeholder="Search" /><select class="Rk-Search-Select"></select></form>'
+    '<div class="Rk-Title"><h1>Hyper Plateau</h1></div><div class="Rk-Bins">'
+    + '<form class="Rk-Search-Form"><input class="Rk-Search-Input" type="text" placeholder="Search" />'
+    + '<div class="Rk-Search-Select"><div class="Rk-Search-Current"></div><ul class="Rk-Search-List"></ul></div>'
+    + '<input type="submit" value="" class="Rk-Search-Submit" /></form>'
     + '<ul class="Rk-Bin-List"></ul></div><div class="Rk-Render Rk-Render-Panel"></div>'
 );
 
 
+Rkns.Renkan.prototype.setSearchEngine = function(_key) {
+    this.search_engine = this.search_engines[_key];
+    this.$.find(".Rk-Search-Current").attr("class","Rk-Search-Current " + this.search_engine.getBgClass());
+}
+
 Rkns.Renkan.prototype.resizeBins = function() {
     var _d = + this.$.find(".Rk-Search-Form").outerHeight();
     this.$.find(".Rk-Bin-Title").each(function() {