var d = document;

window.addEvent('domready', function(){
	var l1 = $('l1');
	var infoDat1 = $('infoDat1');
	var infoDat2 = $('infoDat2');
	var infoDat3 = $('infoDat3');
	var infoDat4 = $('infoDat4');
	var infoDat5 = $('infoDat5');
	var fish = $('fish');
	var octi = $('octi');
	var crab = $('crab');
	var corl = $('corl');

//初期化
	fish.fade(0);
	octi.fade(0);
	crab.fade(0);
	corl.fade(0);
	
	$('l1').set('class', 'ui-tabs-selected');
	infoDat1.setStyle( 'display', "block");
	infoDat2.setStyle( 'display', "none");
	infoDat3.setStyle( 'display', "none");
	infoDat4.setStyle( 'display', "none");
	infoDat5.setStyle( 'display', "none");
	

//ナビゲーション
//fish
	var mouseEnterFunction = function(){
		fish.fade(1);
		fish.setStyle( 'display', 'block');
	};
	var mouseLeaveFunction = function(){
		fish.fade(0);
	};
	$('hN3').addEvent('mouseenter', mouseEnterFunction);
	$('hN3').addEvent('mouseleave', mouseLeaveFunction);

//octi
	var mouseEnterFunction = function(){
		octi.fade(1);
		octi.setStyle( 'display', 'block');
	};
	var mouseLeaveFunction = function(){
		octi.fade(0);
	};
	$('hN4').addEvent('mouseenter', mouseEnterFunction);
	$('hN4').addEvent('mouseleave', mouseLeaveFunction);

//crab
	var mouseEnterFunction = function(){
		crab.fade(1);
		crab.setStyle( 'display', 'block');
	};
	var mouseLeaveFunction = function(){
		crab.fade(0);
	};
	$('hN5').addEvent('mouseenter', mouseEnterFunction);
	$('hN5').addEvent('mouseleave', mouseLeaveFunction);


//corl
	var mouseEnterFunction = function(){
		corl.fade(1);
		corl.setStyle( 'display', 'block');
	};
	var mouseLeaveFunction = function(){
		corl.fade(0);
	};
	$('hN1').addEvent('mouseenter', mouseEnterFunction);
	$('hN1').addEvent('mouseleave', mouseLeaveFunction);



//インフォメーション

	var el1 = $('infoDat1');
	var el2 = $('infoDat2');
	var el3 = $('infoDat3');
	var el4 = $('infoDat4');
	var el5 = $('infoDat5');
	el1.fade(1);
	el2.fade(0);
	el3.fade(0);
	el4.fade(0);
	el5.fade(0);

    $('t1').addEvent( 'click', function(e){
    	e.stop();

    	el1.fade(1);
    	el2.fade(0);
    	el3.fade(0);
    	el4.fade(0);
    	el5.fade(0);

    	el1.setStyle('display', "block");
    	el2.setStyle('display', "none");
    	el3.setStyle('display', "none");
    	el4.setStyle('display', "none");
    	el5.setStyle('display', "none");

    	$('l1').set('class', "ui-tabs-selected");
    	$('l2').set('class', "");
    	$('l3').set('class', "");
    	$('l4').set('class', "");
    	$('l5').set('class', "");

    } );

    $('t2').addEvent( 'click', function(e){
    	e.stop();

    	el1.fade(0);
    	el2.fade(1);
    	el3.fade(0);
    	el4.fade(0);
    	el5.fade(0);

    	el1.setStyle('display', "none");
    	el2.setStyle('display', "block");
    	el3.setStyle('display', "none");
    	el4.setStyle('display', "none");
    	el5.setStyle('display', "none");

    	$('l1').set('class', "");
    	$('l2').set('class', "ui-tabs-selected");
    	$('l3').set('class', "");
    	$('l4').set('class', "");
    	$('l5').set('class', "");

    } );

    $('t3').addEvent( 'click', function(e){
    	e.stop();

    	el1.fade(0);
    	el2.fade(0);
    	el3.fade(1);
    	el4.fade(0);
    	el5.fade(0);

    	el1.setStyle('display', "none");
    	el2.setStyle('display', "none");
    	el3.setStyle('display', "block");
    	el4.setStyle('display', "none");
    	el5.setStyle('display', "none");

    	$('l1').set('class', "");
    	$('l2').set('class', "");
    	$('l3').set('class', "ui-tabs-selected");
    	$('l4').set('class', "");
    	$('l5').set('class', "");

    } );

    $('t4').addEvent( 'click', function(e){
    	e.stop();

    	el1.fade(0);
    	el2.fade(0);
    	el3.fade(0);
    	el4.fade(1);
    	el5.fade(0);

    	el1.setStyle('display', "none");
    	el2.setStyle('display', "none");
    	el3.setStyle('display', "none");
    	el4.setStyle('display', "block");
    	el5.setStyle('display', "none");

    	$('l1').set('class', "");
    	$('l2').set('class', "");
    	$('l3').set('class', "");
    	$('l4').set('class', "ui-tabs-selected");
    	$('l5').set('class', "");

    } );

    $('t5').addEvent( 'click', function(e){
    	e.stop();

    	el1.fade(0);
    	el2.fade(0);
    	el3.fade(0);
    	el4.fade(0);
    	el5.fade(1);

    	el1.setStyle('display', "none");
    	el2.setStyle('display', "none");
    	el3.setStyle('display', "none");
    	el4.setStyle('display', "none");
    	el5.setStyle('display', "block");

    	$('l1').set('class', "");
    	$('l2').set('class', "");
    	$('l3').set('class', "");
    	$('l4').set('class', "");
    	$('l5').set('class', "ui-tabs-selected");

    } );
});