addListener(window, 'load', load, false);
function load(e){
	//メインテーブル
	var table = document.getElementById('main');
	var tbody = table.getElementsByTagName('tbody');
	addTd(tbody[0], true);
	
	//プレビュー
	table = document.getElementById('preview');
	tbody = table.getElementsByTagName('tbody');
	addTd(tbody[0], false);
	
	//色選択テーブル
	setColorTable();

	//色選択
	addColorOption('r');
	addColorOption('g');
	addColorOption('b');
	
	//色
	document.getElementById('color').style.backgroundColor = 'rgb(0,0,0)';
	
	//ツール
	document.getElementById('pen').style.borderColor = '#ff6666';
	
	addListener(document.getElementById('pen'), 'click', selTool, false);
	addListener(document.getElementById('sp'), 'click', selTool, false);
	
	//ボタン
	addListener(document.getElementById('png'), 'click', submit, false);
	addListener(document.getElementById('jpg'), 'click', submit, false);
	addListener(document.getElementById('gif'), 'click', submit, false);
}
//セル追加
function addTd(tbody, isMain){
	for(var i=0; i<16; i++){
		var tr = document.createElement('tr');
		for(var j=0; j<16; j++){
			var td = document.createElement('td');
			tr.appendChild(td);
			
			if(isMain){
				addListener(td, 'click', rectClick, false);
				td.id = 'main_' + i + '_' + j;
			}else{
				td.id = 'view_' + i + '_' + j;
			}
		}
		tbody.appendChild(tr);
	}
}
//色選択追加
function addColorOption(id){
	var col = document.getElementById(id);
	for(var i=0; i<256; i++){
		var strValue = i.toString(16);
		if(strValue.length == 1){
			strValue = '0' + strValue;
		}
		var op = document.createElement('option');
		op.setAttribute('value', i);
		op.appendChild(document.createTextNode(strValue));
		col.appendChild(op);
	}
	
	addListener(col, 'change', colorChange, false);
}
//色選択テーブル
function setColorTable(){
	var table = document.getElementById('selcolor');
	var tbody = table.getElementsByTagName('tbody');
	for(var i=0; i<256; i+=51){
		var tr = document.createElement('tr');
		for(var j=0; j<256; j+=51){
			for(var k=0; k<256; k+=51){
				var td = document.createElement('td');
				td.appendChild(document.createTextNode(''));
				td.style.backgroundColor = 'rgb(' + i + ','+ j +','+ k +')';
				addListener(td, 'click', colorClick, false);
				tr.appendChild(td);
			}
		}
		tbody[0].appendChild(tr);
	}
}

//色変更イベント
function colorChange(e){
	var color = 'rgb(' + document.getElementById('r').value + ','
			+ document.getElementById('g').value + ','
			+ document.getElementById('b').value + ')';
	document.getElementById('color').style.backgroundColor = color;
}
//カラーテーブルクリックイベント
function colorClick(e){
	var td = getElement(e);
	
	var color = td.style.backgroundColor;
	var match = matchCssColor(color);
	
	document.getElementById('r').value = match[1];
	document.getElementById('g').value = match[2];
	document.getElementById('b').value = match[3];
	
	document.getElementById('color').style.backgroundColor = color;
}
//セルクリックイベント
function rectClick(e){
	var td = getElement(e);
	
	if(document.getElementById('pen').style.borderColor != '#ffffff'){
		var id = td.id.replace('main', 'view');
		var td2 = document.getElementById(id);
		
		var color = document.getElementById('color').style.backgroundColor;
		
		td.style.backgroundColor = color;
		td2.style.backgroundColor = color;
	}else{
		document.getElementById('color').style.backgroundColor = td.style.backgroundColor;
	}
}
//ツールクリック
function selTool(e){
	var im = getElement(e);
	if(im.id == 'pen'){
		document.getElementById('pen').style.borderColor = '#ff6666';
		document.getElementById('sp').style.borderColor = '#ffffff';
	}else{
		document.getElementById('pen').style.borderColor = '#ffffff';
		document.getElementById('sp').style.borderColor = '#ff6666';
	}
}
//イメージ作成
function submit(e){
	var table = document.getElementById('main');
	var trs = table.getElementsByTagName('tr');
	var str = '';
	for(var i=0; i<trs.length; i++){
		var tds = trs[i].getElementsByTagName('td');
		for(var j=0; j<tds.length; j++){
			var color = tds[j].style.backgroundColor;
			var match;
			if(match = matchCssColor(color)){
				str += match[1] + '-' + match[2] + '-' + match[3] + ',';
			}else if(color.substr(0, 1) == '#'){
				str += get_rgb(color) + ',';
			}else{
				str += ',';
			}
		}
		str = str.substring(0, str.length-1) + '\r\n';
	}
	str = str.substring(0, str.length-2);
	
	document.getElementById('data').value = str;
	document.getElementById('kind').value = getElement(e).value;
	document.getElementById('createimage').submit();
}
function matchCssColor(color){
	return color.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
}
function get_rgb(color){
	var str = '';
	for(var i=0; i<3; i++){
		str += parseInt('0x' + color.substr(i*2+1, 2)) + '-';
	}
	return str = str.substr(0, str.length-1);
}

//〜共通関数〜
function getElement(e){
	if(e.target){
		return e.target;
	}else{
		return e.srcElement;
	}
}
function addListener(elem, eventType, func, cap){
	if(elem.addEventListener){
		elem.addEventListener(eventType, func, cap);
	}else if(elem.attachEvent){
		elem.attachEvent('on' + eventType, func);
	}
}