/*
 * ButtonExtension
 * @version $Revision: 1.2 $
 * @author Katsuhiko Ito
 * this.img に元のimgオブジェクトが入っています。
 * this.img.src とか this.img.id とか



SYNOPSIS

	HTML
		<img id="203" src="../images/button/timeSelect/timeAnimateStartC.png">
		<img id="204" src="../images/button/timeSelect/timeAnimateStopC.png">

	SCRIPT
		var playMovie   = new ButtonExtension("203", play);
		var stopMovie   = new ButtonExtension("204", stop);

		function play() {
			movie.forwards();
			buttonImgManager();
		}
		function stop() {
			movie.stop();
			buttonImgManager();
		}
		window.onload = function () {
			ButtonExtension.activates(playMovie, stopMovie);
			buttonImgManager();
		}

		function buttonImgManager() {
			if (movie.isMove()) {
				playMovie.doSelect();
				stopMovie.doEnable();
			} else {
				playMovie.doEnable();
				stopMovie.doDisable();
				if (movie.isFirst()) {
					//......
				} else {
					//......
				}
				if (movie.isLast()) {
					//......
				} else {
					//......
				}
			}
		}

とか

 */
function ButtonExtension(/*string*/imgId, /*function*/callback, /*bool*/enable, /*bool*/select) {
	this.imgId  = imgId  || false;
	this.enable = enable == null ? true : enable;
	this.select = select || false;
	this.callback = callback || function () {};
	this.role = null;
//	this.role = {
//		enabled   : '_link',// 使用可能画像
//		disabled  : '_link',// 使用不可画像
//		selected  : '' // 選択済画像
//	};
	this.img;
}

ButtonExtension.roleSuffix = {
	enabled   : '',// 使用可能画像
	disabled  : '_off',// 使用不可画像
	selected  : '_on'//,// 選択済画像
};

ButtonExtension.setRoleSuffix = function (/*hash*/confs) {
	for (var key in confs) {
		if (ButtonExtension.roleSuffix[key] != undefined) 
			ButtonExtension.roleSuffix[key] = confs[key];
	}
};

/*
 * 設定
 */
ButtonExtension.prototype.setProperties = function (/*hash*/confs) {
	for (var key in confs) {
		if (typeof this[key] != "undefined") this[key] = confs[key];
	}
	return this;
};

/*
 * functionオブジェクト（コールバック）を設定
 */
ButtonExtension.prototype.setCallBack = function (/*function*/callback) {
	this.callback = callback || function () {};
	return this;
};

/*
 * 役割識別子設定
 */
ButtonExtension.prototype.setRole = function (/*hash*/confs) {
	for (var key in confs) {
		if (this.role[key] != undefined) this.role[key] = confs[key];
	}
	return this;
};

ButtonExtension.prototype.setStatus = function (/*string*/status) {
	if (status == "SELECTED") {
		this.enable = true;
		this.select = true;
	} else if (status == "DISABLE") {
		this.enable = false;
		this.select = false;
	} else if (status == "ENABLE") {
		this.enable = true;
		this.select = false;
	}
	return this;
};

/*
 * 初期化処理
 */
ButtonExtension.prototype.initialize = function () {
	this.img = document.getElementById(this.imgId);
	if (! this.img)
		throw Error("Not found by ID \"" + this.imgId + "\".");
	this.img.style.border = 0;

	if (!this.role) this.role = ButtonExtension.roleSuffix;

	var src  = this.img.src;
	var pos  = src.lastIndexOf('.');
	var len  = this.role.enabled.length;
	var path = src.substr(0, pos - len);
	var ext  = src.substr(pos);

	// HTML内のonclick属性を優先
	this.doExec = this.img.onclick || this.callback;
	this.preLoadImage(path, ext);
	this.setEventHandler();
};

/*
 * 画像読み込み
 */
ButtonExtension.prototype.preLoadImage = function (path, ext) {
	for (var key in this.role) {
		var img = key + "Img";
		this[img] = document.createElement("img")
		this[img].src = path + this.role[key] + ext;
	}
};


/*
 * 作成
 */
ButtonExtension.prototype.activate = function () {
	this.initialize();
	if (this.enable) {
		this.enable = false;
		this.doEnable();
		if (this.select) this.doSelect();
	} else {
		this.enable = true;
		this.doDisable();
	}
};

/*
 * まとめて作成
 */
ButtonExtension.activates = function () {
	for (var i = 0; i < arguments.length; i++) {
		arguments[i].activate();
	}
};

/*
 * 使用可能
 */
ButtonExtension.prototype.doEnable = function () {
	if (! this.enable) {
		this.img.src = this.enabledImg.src;
		this.enable = true;
	}
};

/*
 * 使用不可
 */
ButtonExtension.prototype.doDisable = function () {
	if (this.enable) {
		this.img.src = this.disabledImg.src;
		this.enable = false;
		this.select = false;
	}
};

/*
 * 選択済
 */
ButtonExtension.prototype.doSelect = function () {
	if (this.enable) {
		this.img.src = this.selectedImg.src;
		this.enable = false;
		this.select = true;
	} else {
		this.select = false;
	}
};

/*
 * イベント処理
 */
ButtonExtension.prototype.setEventHandler = function () {
	var that = this;
	Event.observe(this.img, 'click', function (evt) {
		if (! that.enable) return false;
//		that.doSelect();
		that.doExec();
	}, false);
}

ButtonExtension.prototype.addOnloadListener = function () {
	var that = this;
	var listener = function () {
		that.activate();
		Event.stopObserving(window, 'load', listener, false);
	};
	Event.observe(window, 'load', listener, false);
	return this;
};
///////////////////////////////////////////////////////////////////////////////
/*
 * 拡張版
 */
function ButtonExtensionPlus(imgId, enable, select) {
	this.base = ButtonExtension;
	this.base(imgId, enable, select);
	this.constructor = ButtonExtensionPlus;
//	this.role.mouseOver = '_hover';// マウスオーバー画像
//	this.role.mouseDown = '_click';// マウスダウン画像
}
ButtonExtensionPlus.prototype = new ButtonExtension; 

ButtonExtension.roleSuffix.mouseOver = '_hover';// マウスオーバー画像
ButtonExtension.roleSuffix.mouseDown = '_click';// マウスダウン画像
ButtonExtensionPlus.setRoleSuffix = function (/*hash*/confs) {
	for (var key in confs) {
		if (ButtonExtension.roleSuffix[key] != undefined) 
			ButtonExtension.roleSuffix[key] = confs[key];
	}
};

/*
 * 拡張版画像読み込み
 */
//ButtonExtensionPlus.prototype.preLoadImage = function (role, path, ext) {
//	this.base.prototype.preLoadImage.call(this, role, path, ext);
//	this.mouseDownImg = document.createElement("img")
//	this.mouseDownImg.src = path + role.mouseDown + ext;
//	this.mouseOverImg = document.createElement("img")
//	this.mouseOverImg.src = path + role.mouseOver + ext;
//};

/*
 * 拡張版イベント処理
 */
ButtonExtensionPlus.prototype.setEventHandler = function () {
	this.base.prototype.setEventHandler.call(this);
	var that = this;
	var button = this.img;
	
	Event.observe(this.img, 'mousedown', function (evt) {
		if (! that.enable) return false;
		button.src = that.mouseDownImg.src;
		return false;
	}, false);
	Event.observe(this.img, 'mouseup', function (evt) {
		if (! that.enable) return false;
		button.src = that.mouseOverImg.src;
		return false;
	}, false);
	Event.observe(this.img, 'mouseover', function (evt) {
		if (! that.enable) return false;
		button.src = that.mouseOverImg.src;
		return false;
	}, false);
	Event.observe(this.img, 'mouseout', function (evt) {
		if (! that.enable) return false;
		button.src = that.enabledImg.src;
		return false;
	}, false);
}

///////////////////////////////////////////////////////////////////////////////
/*
 * グループ化
 * 
 */
function ButtonExtensionGroup() {
	this.group = new Array();
	for (var i = 0; i < arguments.length; i++) {
		if (!(arguments[i] instanceof ButtonExtension))
			throw Error("Not instance of ButtonExtension.");
		this.group.push(arguments[i]);
	}
	this.select;
}

/*
 * ボタン追加
 */
ButtonExtensionGroup.prototype.addButtonExtension = function (button) {
	this.group.push(button);
	return this;
};

/*
 * まとめて作成
 */
ButtonExtensionGroup.prototype.activate = function () {
	var group = this;
	for (var n = 0; n < this.group.length; n++) {
		var button = this.group[n];
		if (! this.select && button.enable) {
			if (button.select)
				this.select = button;
		} else {
			if (button.select)
				button.select = false;
		}
		button.activate();
		group.onClick(button);
	}
};

/*
 * イベント処理
 */
ButtonExtensionGroup.prototype.onClick = function (button) {
	var group = this;
	button.img.onclick = function () {
		if (! button.enable) return false;
		if (group.select) group.select.doEnable();
		button.doSelect();
		group.select = button;
		button.doExec();
	};
};


///////////////////////////////////////////////////////////////////////////////
/**
 * 未
 * 
 */
function toggleButtonExtension() {


}




/*
Event.observe(target, 'event', function (evt) {
}, false);
Event.pointerX(evt);
Event.pointerY(evt);
Event.element(evt);
Event.stop(evt);
*/