var _start = null;
var _stop = null;
var _update = null;
var _operation = null;

ScreenElement = {
	id: "screen",
	update: function(){
		elapsed_time = State.active_bell.elapsed_time();
		// 実際の hour にタイムゾーンが考慮されないように、UTC の値を取得する
		if(elapsed_time){
			$(this.id).innerHTML = [
				elapsed_time.getUTCHours().pad_zero(2),
				elapsed_time.getUTCMinutes().pad_zero(2),
				elapsed_time.getUTCSeconds().pad_zero(2)
			].join(':');
		}
	}
};

BarbellInfoElement = {
	id: "barbell_info",
	update: function(){
		_started_at.update();
		_stopped_at.update();
		var barbell = State.active_bell;
		if(barbell){
			if(barbell.tags) $("barbell_tags").value = barbell.tags.join(" ");
			if(barbell.note) $("barbell_note").value = barbell.note;
		}
	}
};

// select_datetime で生成されるフォーム用のクラス
var DatetimeElement = Class.create();
DatetimeElement.prototype = {
	initialize: function(){
//		console.debug(this.id);
		// TODO: 無駄に呼ばれてる
		if(!this.id) return;
		
		this._year = $(this.id + "_year");
		this._month	 = $(this.id + "_month");
		this._day = $(this.id + "_day");
		this._hour = $(this.id + "_hour");
		this._minute = $(this.id + "_minute");
		this._second = $(this.id + "_second");
	},
	get_date: function(){
		var year =  Select.get_selected_option(this.id + "_year").value;
		var month = Select.get_selected_option(this.id + "_month").value;
		var day = Select.get_selected_option(this.id + "_day").value;
		var hour = Select.get_selected_option(this.id + "_hour").value;
		var minute = Select.get_selected_option(this.id + "_minute").value;
		var second = Select.get_selected_option(this.id + "_second").value;
		
		if(!year || !month || !day || !hour || !minute || !second){
			return null;
		}
		return new Date(year, month - 1, day, hour, minute, second);
	},
	update: function(){
		var target_date = this.get_target_date();
		if(target_date == null || target_date.getTime() == 0){
			this.clear();
			return;
		}
		this.enable();
		
		Select.select_by_value(this.id + "_year", target_date.getFullYear());
		$(this.id + "_month").selectedIndex = target_date.getMonth() + 1;
		$(this.id + "_day").selectedIndex = target_date.getDate();
		$(this.id + "_hour").selectedIndex = target_date.getHours() + 1;
		$(this.id + "_minute").selectedIndex = target_date.getMinutes() + 1;
		$(this.id + "_second").selectedIndex = target_date.getSeconds() + 1;
	},
	clear: function(){
		this._item_array().forEach(function(_item){
			_item.selectedIndex = 0;
		});
	},
	_item_array: function(){
		return $A([ this._year, this._month, this._day, this._hour, this._minute, this._second ]);
	},
	disable: function(){
		this._item_array().forEach(function(_item){
			_item.selectedIndex = 0;
			_item.disable();
			_item.style.background = "#e8e8e8";
		});
	},
	enable: function(){
		this._item_array().forEach(function(_item){
			_item.enable();
			_item.style.background = "#ffffff";
		});
	}
};

var TagsElement = {
	id: "barbell_tags",
	get_tags: function(){
		return is_empty_string($(this.id).value) ? [] : $(this.id).value.split(' ');
	}
};

var StartedAtElement = Class.create();
StartedAtElement.prototype = Object.extend(new DatetimeElement, {
	id: "started_at",
	get_target_date: function(){
		if(State.active_bell == null || State.active_bell.started_at == null){
			return null;
		}
		return State.active_bell.started_at;
	}
});

var StoppedAtElement = Class.create();
StoppedAtElement.prototype = Object.extend(new DatetimeElement, {
	id: "stopped_at",
	get_target_date: function(){
		if(State.active_bell == null || State.active_bell.stopped_at == null){
			return null;
		}
		return State.active_bell.stopped_at;
	}
});

// this._start, this._stop
var OperationElement = Class.create();
OperationElement.prototype = {
	id: "operation",
	initialize: function(){
	},
	update: function(){
		var barbell = State.active_bell;
		if( !barbell ){
			return;
		}
		
		if(barbell instanceof SimpleBell){
			_start.disable();
			_stop.disable();
			_update.disable();
			return;
		}
		
		/*
		|started_at	|stopped_at	|start_button	|stop_button	|note	|
		|not null	|not null	|x				|o				|		|
		|not null	|-			|x				|o				|		|
		|-			|not null	|x				|x				|		|
		|-			|-			|?				|?				|		|
		*/
		if(barbell.is_finished()){
			_start.disable();
			_stop.enable();
			_update.enable();
		}
		else if(barbell.is_running()){
			_start.disable();
			_stop.enable();
			_update.enable();
		}
		else{
			_update.disable();
		}
		
		// updateable
		if(barbell instanceof Bell == false){
			_update.disable();
		}
	}
};

/* GUI */
ListItem = {
	over: function(e){
		add_class(e, 'hovered');
	},
	unover: function(e){
		remove_class(e, 'hovered');
	}
}