$(function(){
	var hai = [
		'm1','m2','m3','m4','m5','m6','m7','m8','m9',
		'p1','p2','p3','p4','p5','p6','p7','p8','p9',
		's1','s2','s3','s4','s5','s6','s7','s8','s9',
		'東','南','西','北',
		'白','發','中',
		'赤m5','赤p5','赤s5'
	];
	
	$('body').append([	
		'<div id="haiga_list">',
		'<table border="0" cellspacing="0" cellpadding="0" width="100%" class="normal">',
		'<tr>',
		'<th width="60" id="haiga_tab1">通常牌</th>',
		'<th width="60" id="haiga_tab2">横向き牌</th>',
		'<th id="haiga_close"><span class="close">閉じる</span></th>',
		'</tr>',
		'<tr>',
		'<td colspan="3"><div id="haiga_list1"></div><div id="haiga_list2"></div></td>',
		'</tr>',
		'</table>',
		'</div>'
	].join(''));
	
	for (var i = 1; i < 3; i++) {
		var html = [];
		var c    = 0;
		var sep  = [9,9,9,7,3];
		var s    = 0;
		var w    = (i==1) ? 20 : 27;
		var h    = (i==1) ? 27 : 20;
		var x    = 0;
		var y    = 0;
		var target = $('#haiga_list' +i);

		html.push('<img src="/img/haiga_table_'+i+'.gif" alt="" usemap="#icons'+ i +'" />');
		html.push('<map name="icons'+ i +'" id="icons'+ i +'">');
		for (var j = 0; j < hai.length; j++) {
			html.push('<area shape="rect" coords="'+(w*c)+','+y+','+((w*c)+w)+','+(y+h)+'" href="#" name="'+ hai[j] +'_'+ i +'">');
			c++;
			if(c >= sep[s]){
				c  = 0;
				y += h;
				s++;
			}
		}
		html.push('</map>');
		$('#haiga_list' +i).html(html.join(''));
		$('area', '#icons' +i).click(function(){
			$.insertHaigaStr($(this).attr('name'));
			return false;
		})
	}
	
	$('#haiga_tab1').click(function(){
		$('#haiga_list table').attr('class', 'normal');
	})
	$('#haiga_tab2').click(function(){
		$('#haiga_list table').attr('class', 'y');
	})
	$('#haiga_close span').click(function(){
		$('#haiga_list').hide();
	})
});

(function($){
	$.extend({
		currentHaigaTarget : '',
		
		showHaigaList : function(elm, target){
			var offset = $(elm).offset();
			$('#haiga_list').toggle()
				.css('left', offset.left + 'px')
				.css('top', (offset.top + $(elm).height()) + 'px');
			$.currentHaigaTarget = target;		
		},
		
		insertHaigaStr : function(s){
			var hai    = s.split('_')[0];
			var page   = (s.split('_')[1] =='1') ? '' : 'リーチ';
			var str    = '[' + hai + page +']';
			var target = document.getElementById($.currentHaigaTarget);
			target.focus();
			if (document.selection != null){//ie
				document.selection.createRange().text = str;
			}else if(target.selectionStart || target.selectionStart == '0'){//other
				var s = target.selectionStart;
				var e = target.selectionEnd;	
				target.value = target.value.substring(0,s) + str + target.value.substring(e,target.value.length);
				target.focus();
			}else{
				target.value += str;
			}
			$('#haiga_list').hide();
		}
	});
})(jQuery);