--- a/client/js/main.js	Fri Aug 17 12:50:00 2012 +0200
+++ b/client/js/main.js	Fri Aug 17 18:36:12 2012 +0200
@@ -79,63 +79,102 @@
 
 Rkns.Bins = {}
 
-Rkns.Bins._Base = function(_project) {
-    if (typeof _project !== "undefined") {
-        this._project = _project;
+Rkns.Bins._Base = 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_$ = Rkns.$('<h2>')
+            .addClass("Rk-Bin-Title")
+            .appendTo(this.$);
+        this.main_$ = Rkns.$('<div>')
+            .addClass("Rk-Bin-Main")
+            .appendTo(this.$);
+        this.renkan.resizeBins();
     }
 }
-
-Rkns.Bins._Base.prototype.baseTemplate = '';
-
-Rkns.Bins._Base.prototype.addTab = function(_title) {
-    var _tabDiv = Rkns.$('<div>');
-    _tabDiv.addClass('Rk-TabDiv')
-        .css("display","none")
-        .appendTo('.Rk-TabDivs');
-    var _tabButton = Rkns.$('<li>');
-    _tabButton.addClass('Rk-TabButton')
-        .html(_title)
-        .click(function() {
-            Rkns.$('.Rk-TabButton').removeClass("active");
-            Rkns.$(this).addClass("active");
-            Rkns.$('.Rk-TabDiv').hide();
-            _tabDiv.show();
-        })
-        .appendTo('.Rk-TabButtons');
-    return {
-        button: _tabButton,
-        contents: _tabDiv
-    }
-}
-
 /* Point of entry */
 
 Rkns.Renkan = function(_opts) {
-    if (typeof _opts.remotemodel == "undefined") {
-        _opts.remotemodel = "BasicJson";
+    if (typeof _opts.remotemodel !== "string") {
+        _opts.remotemodel = "FullJson";
     }
-    if (typeof _opts.language == "undefined" || typeof Rkns.i18n[_opts.language] == "undefined") {
+    if (typeof _opts.language !== "string" || typeof Rkns.i18n[_opts.language] == "undefined") {
         _opts.language = "en";
     }
-    if (typeof _opts.container == "undefined") {
+    if (typeof _opts.container !== "string") {
         _opts.container = "renkan";
     }
+    if (typeof _opts.search !== "object" || !_opts.search) {
+        _opts.search = [];
+    }
     this.project = new Rkns.ViewModel.Project();
     this.project.l10n = Rkns.i18n[_opts.language];
     if (typeof _opts.user === "object") {
         this.current_user = this.project.addUser(_opts.user)
     }
-    Rkns.$("#" + _opts.container).html(this.template());
-    this.project.remotemodel = new Rkns.RemoteModels[_opts.remotemodel](this.project, _opts);
-    this.project.renderer = new Rkns.Renderer.Scene(this.project, _opts);
+    this.$ = Rkns.$("#" + _opts.container);
+    this.$.html(this.template());
+    this.remotemodel = this.project.remotemodel = new Rkns.RemoteModels[_opts.remotemodel](this.project, _opts);
+    this.renderer = this.project.renderer = new Rkns.Renderer.Scene(this.project, _opts);
+    this.renderer.renkan = this;
+    this.tabs = [];
+    this.selected_bin_item = undefined;
+    this.mousedown = false;
     var _this = this;
-/*    if (typeof _opts.bins === "object") {
-        this.bins = Rkns._(_opts.bins).map(function(_type) {
-            return new Rkns.Bins[_type](_this);
+    this.$.mouseup(function() {
+        _this.selected_bin_item = undefined;
+    });
+    if (!_opts.search.length) {
+        this.$.find(".Rk-Search-Form").detach();
+    } else {
+        var _tmpl = Rkns._.template('<option value="<%= name %>"><%= name %></option>');
+        this.$.find(".Rk-Search-Select").html(
+            Rkns._(_opts.search).map(function(_name) {
+                return _tmpl({name:_name});
+            }).join("")
+        );
+    }
+    this.$.find(".Rk-Search-Form").submit(function() {
+        _this.tabs.push(
+            new Rkns.Bins[_this.$.find(".Rk-Search-Select").val()](
+                _this,
+                {
+                    search: _this.$.find(".Rk-Search-Input").val()
+                }
+            )
+        );
+        return false;
+    });
+    this.$.find(".Rk-Bins")
+        .click(function(_e) {
+            if (_e.target.className == "Rk-Bin-Title") {
+                var _mainDiv = Rkns.$(_e.target).siblings(".Rk-Bin-Main");
+                if (_mainDiv.is(":hidden")) {
+                    _this.$.find(".Rk-Bin-Main").slideUp();
+                    _mainDiv.slideDown();
+                }
+            }
+        }).mousedown(function(_e) {
+            var _t = Rkns.$(_e.target);
+            while (!_t.is(".Rk-Bins,.Rk-Bin-Item")) {
+                _t = _t.parent();
+            }
+            if (_t.is(".Rk-Bin-Item")) {
+                _this.selected_bin_item = {
+                    uri : $(_t).attr("data-uri"),
+                    title : $(_t).attr("data-title"),
+                    description : $(_t).attr("data-description")
+                }
+                return false;
+            }
         });
-        Rkns.$('.Rk-TabButton:last').addClass("active");
-        Rkns.$('.Rk-TabDiv:last').show();
-} */
+    Rkns.$(window).resize(function() {
+        _this.resizeBins();
+    })
+    
     this.project.remotemodel.onLoad(function() {
         if (typeof _this.project.current_user === "undefined") {
             _this.project.current_user = _this.project.users[0];
@@ -145,9 +184,20 @@
 }
 
 Rkns.Renkan.prototype.template = Rkns._.template(
-    '<div class="Rk-Bins"></div><div class="Rk-Render"></div>'
+    '<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>'
+    + '<ul class="Rk-Bin-List"></ul></div><div class="Rk-Render"></div>'
 );
 
+
+Rkns.Renkan.prototype.resizeBins = function() {
+    var _titles = this.$.find(".Rk-Bin-Title"),
+        _d = _titles.length * _titles.outerHeight() + this.$.find(".Rk-Search-Form").outerHeight();
+    this.$.find(".Rk-Bin-Main").css({
+        height: this.$.find(".Rk-Bins").height() - _d
+    });
+}
+
 /* Utility functions */
 
 Rkns.Utils = {