function buttonManager(conf) {
	this.buttons       = []
	this.styleSwitcher = null;
	this.activeButton  = "";
	this.init(conf);
}
buttonManager.prototype = {
	init: function(conf) {
		var switcher = this.styleSwitcher = new styleSwitcher;
		var _this = this;
		var callBack = function(){ _this.callBack.apply(_this, arguments) };
		var area = document.getElementById(conf.area);
		var list = document.createElementBA("ul");
		var classes = conf.classes;
		for (var i = 0, n = classes.length; i < n; i++) {
			switcher.append(classes[i].id);

			var button = new actionButton(classes[i]);
			button.callBack = callBack;
			this.buttons.push(button);

			var item = document.createElementBA("li");
			item.appendChildBA(button.node);

			list.appendChildBA(item);
		}
		if (area) {
			if (conf.message) {
				var paragraph = document.createElementBA("p");
				//paragraph.innerHTML = conf.message;
				area.appendChildBA(paragraph);
			}
			area.appendChildBA(list);
		}
		this.select(conf.current);
	},
	select : function(id) {
		if (this.activeButton != id) {
			this.styleSwitcher.switching(id);
			for (var i = 0, n = this.buttons.length; i < n; i++) {
				if (this.buttons[i].getId() == id) {
					this.buttons[i].activate();
				} else {
					this.buttons[i].deactivate();
				}
			}
			this.activeButton = id;
		}
	},
	callBack : function(id) {
		this.select(id);
	}
}

function actionButton(conf) {
	this.node        = null;
	this.activeClass = "activeButton";
	this.isActive    = false;
	this.init(conf);
}
actionButton.prototype = {
	init : function(conf) {
		var node = this.node = document.createElementBA("a");
		node.setAttributeBA("href", "#");
		node.setAttributeBA("id"  , conf.id);

		this.image = document.createElementBA("img");
		this.image.setAttributeBA("src", conf.image.normal);
		this.image.setAttributeBA("alt", conf.label);
		node.appendChildBA(this.image);

		this.image.normal = conf.image.normal;
		this.image.over   = conf.image.over;
		this.image.stay   = conf.image.stay;

		var over = new Image();
		over.src = conf.image.over;
		var stay = new Image();
		stay.src = conf.image.stay;

		var _this = this;
		node.addEventListenerBA("click",     function(e){ _this.callBackClick(e)      }, false);
		node.addEventListenerBA("mouseover", function(e){ _this.callBackMouseOver(e); }, false);
		node.addEventListenerBA("mouseout",  function(e){ _this.callBackMouseOut(e);  }, false);
	},
	getId : function() {
		return this.node.getAttributeBA("id");
	},
	activate : function() {
		var node = this.node;
		node.appendClassNameBA(this.activeClass);
		if (node.removeAttribute) {
			node.removeAttribute("href");
		}
		if (BA.ua.isWinIE) {
			node.blur();
		}
		this.swapImage("stay");
		this.isActive = true;
	},
	deactivate : function() {
		var node = this.node;
		node.removeClassNameBA(this.activeClass);
		if (node.removeAttribute) {
			this.node.setAttributeBA("href", "#");
		}
		this.swapImage("normal");
		this.isActive = false;
	},
	swapImage : function(status) {
		this.image.src = this.image[status];
	},
	callBackClick : function(e) {
		if (!e) {
			e = window.event;
		}
		if (e.preventDefault) {
			e.preventDefault();
		} else {
			e.returnValue = false;
		}
		this.callBack(this.getId());
	},
	callBackMouseOver : function(e) {
		if (!e) {
			e = window.event;
		}
		if (!this.isActive) {
			this.swapImage("over");
		}
	},
	callBackMouseOut : function(e) {
		if (!e) {
			e = window.event;
		}
		if (!this.isActive) {
			this.swapImage("normal");
		}
	}
}

function styleSwitcher(titles) {
	this.styles = {};
	this.init(titles);
}
styleSwitcher.prototype = {
	init : function(titles) {
		if (titles) {
			for (var i = 0, n = titles.length; i < n; i++) {
				this.append(titles[i]);
			}
		}
	},
	append : function(title) {
		var styles = BAConcatNodeList([
			document.getElementsByTagNameBA("link"),
			document.getElementsByTagNameBA("style")
		]);
		for (var i = 0, n = styles.length; i < n; i++) {
			if (styles[i].getAttributeBA("title") == title) {
				this.styles[title] = styles[i];
				break;
			}
		}
	},
	enable : function(style) {
		style.disabled = false;
	},
	disable : function(style) {
		style.disabled = true;
	},
	switching : function(title) {
		var styles = this.styles;
		for (var i in styles) {
			if (i == title) {
				this.enable(styles[i]);
			} else {
				this.disable(styles[i]);
			}
		}
	}
}



BAAppendCSS("/features/2008/vol02/css/all.css",   "all");
BAAppendCSS("/features/2008/vol02/css/team.css",  "team");
BAAppendCSS("/features/2008/vol02/css/jarno.css", "jarno");
BAAppendCSS("/features/2008/vol02/css/timo.css", "timo");
BAAddOnload(function(){
	var manager = new buttonManager({
		area    : "buttonArea",
		message : "下のタブを切り替えることで、そのカテゴリーのメッセージだけが表示されます。",
		current : "all",
		classes : [
			{
				id    : "all",
				label : "全メッセージ",
				image : {
					normal : "img/tab_all_n.gif",
					over   : "img/tab_all_o.gif",
					stay   : "img/tab_all_s.gif"
				}
			},
			{
				id    : "team",
				label : "チームを応援！",
				image : {
					normal : "img/tab_team_n.gif",
					over   : "img/tab_team_o.gif",
					stay   : "img/tab_team_s.gif"
				}
			},
			{
				id    : "jarno",
				label : "ヤルノを応援！",
				image : {
					normal : "img/tab_jarno_n.gif",
					over   : "img/tab_jarno_o.gif",
					stay   : "img/tab_jarno_s.gif"
				}
			},
			{
				id    : "timo",
				label : "ティモを応援！",
				image : {
					normal : "img/tab_timo_n.gif",
					over   : "img/tab_timo_o.gif",
					stay   : "img/tab_timo_s.gif"
				}
			}
		]
	});
});