var TTabbedBoxTab = Class.create();
TTabbedBoxTab.prototype = {
	initialize: function (container, head, body) {
		this.head = document.createElement ('span');
		this.head.innerHTML = head;
		this.head.onclick = this.showTab.bindAsEventListener(this);

		this.body = document.createElement ('div');
		this.body.className = 'tabbedbox_body';
		this.body_in = document.createElement ('div');
		this.body_in.innerHTML = body;
		this.body_in.className = 'tabbedbox_body_in';

		this.scroll_element = document.createElement('div');
		this.scroll_element.className = 'tabbedbox_scroll';

		this.imgScrollUp = document.createElement('div');
		this.imgScrollUp.className = 'tabbedbox_img_scroll_up';
		this.imgScrollDown = document.createElement('div');
		this.imgScrollDown.className = 'tabbedbox_img_scroll_down';

		this.body.appendChild(this.body_in);
		this.body.appendChild(this.scroll_element);
		this.body.appendChild(this.imgScrollUp);
		this.body.appendChild(this.imgScrollDown);

		this.scroll = new Scrollbar (this.body_in, this.scroll_element);
		this.scroll.button_height = 15;
		this.imgScrollUp.onclick = this.scroll.scrollUp.bindAsEventListener(this.scroll);
		this.imgScrollDown.onclick = this.scroll.scrollDown.bindAsEventListener(this.scroll);

		if (container != null)
			this.attachToContainer(container);
	},

	attachToContainer: function (container) {
		this.container = container;
		this.container.tabs_switch_in.appendChild (this.head);
		this.container.body.appendChild (this.body);
	},

	showTab: function (event) {
		this.container.hideAllTabs();
		this.body.style.display = 'block';
		this.scroll_element.style.display = "block";
		this.scroll.update();
		Element.addClassName (this.head, 'current');
		this.container.onShowTab(this);
	},

	hideTab: function (event) {
		Element.removeClassName (this.head, 'current');
		this.body.style.display = 'none';
		this.scroll_element.style.display = "none";
	},
	fixWidth: function (width) { //ie6 issue
		this.body.style.width = width + "px";
	},
	setHeight: function (height) {
		this.body.style.height = this.body_in.style.height = height + "px";
		this.scroll_element.style.height = height - 22 + "px";
		if (this.body.style.display == 'block') {
			this.scroll.update(height - 22);
		}
		if (isIE6) this.imgScrollDown.style.top = height - 9 + "px";
	},
	onThemeChange: function () {
		this.imgScrollUp.src = TB_SCROLL_UP;
		this.imgScrollDown.src = TB_SCROLL_DOWN;
		this.scroll.button.src = TB_SCROLL_BTN;
	},
	setHeadTitleAttr: function (title) {
		this.head.title = title;
	}
}

var TTabbedBoxButton = Class.create();
TTabbedBoxButton.prototype = {
	initialize: function (container, head, onClick) {
		this.container = container;
		this.head = document.createElement ('SPAN');
		this.head.innerHTML = head;
		this.head.onclick = onClick;
		if (container != null)
			this.attachToContainer(container);
	},
	attachToContainer: function (container) {
		this.container = container;
		this.container.tabs_switch_in.appendChild (this.head);
	},
	fixWidth: function (width) {},
	showTab: function () {},
	hideTab: function () {},
	setHeight: function () {},
	setContent: function (content) {
		this.head.innerHTML = content;
	},
	onThemeChange: function () {},
	setHeadTitleAttr: function (title) {
		this.head.title = title;
	}
}

var TTabbedBox = Class.create ();
TTabbedBox.prototype = {
	tabsHeight: 100,
	initialize: function (element) {
		this.element = element;
		this.tabs_switch = document.createElement ('div');
		this.tabs_switch_in = document.createElement ('div');
		this.tabs_switch.appendChild(this.tabs_switch_in);
		this.tabs_switch.className = 'tabbedbox_switch';

		this.body = document.createElement('div');
		this.body.className = 'tabbedbox_content';

		this.element.appendChild(this.tabs_switch);
		this.element.appendChild(this.body);

		this.tabs = new Array ();
	},
	appendTab: function (tabObject) {
		this.tabs.push(tabObject);
		tabObject.attachToContainer(this);
		tabObject.setHeight (this.tabsHeight);
		if (!this.firstTabAttached) {
			Element.addClassName (tabObject.head, 'first');
			this.firstTabAttached = true;
		}
	},
	createTab: function (headContent, bodyContent) {
		this.tabs.push (new TTabbedBox(this, headContent, bodyContent));
	},
	hideAllTabs: function () {
		for (var i = 0; i < this.tabs.length; i ++)
			this.tabs[i].hideTab();
	},
	onShowTab: function (tab) { },
	showTab: function (tab) {
		if (typeof(tab) == "number")
			var tab = this.tabs[tab];
		tab.showTab();
	},
	fixWidth: function (width) { //ie6 issue
		this.tabs_switch.style.width = width - 1 + "px";
		this.body.style.width = width + "px";
		for (var i = 0; i < this.tabs.length; i ++)
			this.tabs[i].fixWidth(width);
	},
	setHeight: function (height) {
		if (arguments.length == 0)
			var height = this.element.parentNode.offsetHeight;
		this.element.style.height = height + "px";
		height -= this.tabs_switch.offsetHeight;
		height -= 2;
		this.tabsHeight = height;
		for (var i = 0; i < this.tabs.length; i ++)
			this.tabs[i].setHeight(height); // 20 is the height of tabs_switch
	},
	onThemeChange: function () {
		for (var i = 0; i < this.tabs.length; i ++)
			this.tabs[i].onThemeChange();
	}
}