/**
 * create a tabbar
 * @param {Object} classname
 * @param {Object} tabs_target
 * @param {Object} tabs_click is called: bind(call_back(tabs, ev), tabs)
 */
setup_tabs=function(parent, classname, tabs_target, tabs_click_before, tabs_click_after) {
	forEach(getElementsByTagAndClassName(null, classname, $(parent)), function(tabs) {
		tabs.onclick_before = bind(tabs_click_before, tabs)
		tabs.onclick_after = bind(tabs_click_after, tabs)
		children = getElementsByTagAndClassName(null, 'tab', tabs)
		first = getFirstElementByTagAndClassName(null, null, tabs)
		if (null !== tabs_target) {
			tabs.bar = tabs_target
		} else {
			tabs.bar = DIV({'class':'bar'})
			insertSiblingNodesBefore(first, tabs.bar)
		}
		appendChildNodes(tabs.bar, map(bind(function(tab, i) {
			tab.current_top = 0
			tab.element_selector = H2({}, tab.title)
			if (i == 0) {
				showElement(tab)
				addElementClass(tab.element_selector, 'selected')
				this.current = tab
			}
			connect(tab.element_selector, 'onclick', partial(bind(function(tab, ev) {
				if (tab == this.current) return
				if (this.current) {
					if (typeof this.onclick_before == "function") {
						this.onclick_before(this.current, tab)
					}
					fade(this.current)
					removeElementClass(this.current.element_selector, 'selected')
				}
				old = this.current 
				this.current = tab
				appear(this.current, {'afterFinish': bind(function(){
					if (typeof this.onclick_after == "function") {
						this.onclick_after(this.current, old)
					}
				}, this)})
				addElementClass(this.current.element_selector, 'selected')
			}, this), tab))
			return tab.element_selector
		}, tabs), children, range(children.length)))
	})
}