$(document).ready(function(){

var timer; 
var meikanList = ['communication','business','service','hobby','human'];
var current = meikanList[0];
var roboWaku = '.robo_meikan_wrap ul';
var roboTitle = '.robot_meikan_title';
var roboTitleLi = roboTitle + ' li';



$('div.panel p').css('display','none');
$('<div id="tooltip"/>').appendTo(document.body);
$('.robo_meikan_wrap').css('height','310px');
$('.robo_meikan_wrap ul').css('width','756px');



$(roboTitle).append('<ul></ul>')
$(roboWaku).each(function(idx){
	var firstLiText = $(this).children('li:first').text();
	$(this).children('li:first').remove();
	$(roboTitle).children('ul').append($('<li></li>').addClass(meikanList[idx]).append('<a/>'));
	$(roboTitleLi).children('a').eq(idx).attr('href','javascript:void(0)').text(firstLiText);
	$(this).css('display','none');
})
$('.robo_meikan_wrap ul#communication').show();
$('.robot_meikan_title ul li.communication a').addClass('active');


$('div.panel').hover(
	function(ev){
		clearTimeout(timer);
		var imgText = $(this).children('p').text();
		var evTop = $(this).offset().top - 100 + 'px';
		var evLeft = $(this).offset().left + 'px';
		$('#tooltip').text(imgText).css({'top':evTop,'left':evLeft,'display':'block'});	
	},
	function(ev){
		timer = setTimeout(function(){$("#tooltip").css('display','none');},1000);
});

$('#tooltip').hover(
	function(){clearTimeout(timer);},
	function(){$(this).css('display','none');
});



$(roboTitleLi).click(function(){
	var clickC = $(this).attr('class');
	$(this).children('a').addClass('active');
	var clickLi = roboWaku + "#" + clickC;
		if(clickC != current){
			$(roboTitleLi + '.' + current + ' a').removeClass('active');
			var currentUl = roboWaku + '#' + current;
		$(currentUl).fadeOut('fast',function(){
			$(clickLi).fadeIn('fast');
			current = clickC;
		});

	}
});

	
});