@import "common.less";
@import "style.less";

@each_w : @main_w;
@each_h : @main_h;


@each_panel_w: @each_w;
@each_panel_h: 450px;

@each_top_w: @each_w;
@each_top_h: @main_h - @each_panel_h;

@tile_w: 180px;
@tile_h: @tile_w;
@tile_color : rgba(0,0,0,0.4);
@tile_text_color : #fff;
@tile_inner_pad: 10px;


.main#each{
	overflow : hidden;
	color: @tile_text_color;
	#each_top{
		display: inline;
		color: #000;
		left: 10px;
		width: @each_w;
		position: absolute;
		line-height: @each_top_h;
		font-size: 40px;
		text-align: center;
	}

	#panel{	
		margin-left:0px;
		margin-top:@each_top_h;
		position: absolute;
		width: @each_panel_w;
		height: @each_panel_h;
	}
	.tile{
		overflow: hidden;
		width: @tile_w;
		height: @tile_w;
		padding : 0px;
		background-color: @tile_color;			
		.tile_icon{
			padding : @tile_inner_pad;
		}
		.tile_content{
			.abs();
			display: none;
			opacity: 0.0;
			width : 100%;
			height : 100%;
			cursor : pointer;
		}
	}
	/*選択から戻す*/
	#panel .tile_unselected{
		/* #panelの子として指定することで各祭のidで指定したプロパティに
		ここのプロパティが負けなくなる。地味すぎるでしょこれ。 */
		width: @tile_w;
		height: @tile_w;
	}
	/*非選択から選択する*/
	#panel .tile_selected{
		z-index: 10;
		.tile_selected_size_w();
		.tile_selected_size_h();
		.sorted_hor_abs(@each_panel_w, @tile_w, 1, 5);
		.sorted_ver_abs(@each_panel_h, @tile_h, 1, 2);
		cursor : pointer;
	}
	/*非選択から隠す*/
	.tile_hidden{
		display: none;
		animation: hide 1.0s ease 0s;
	}
	/*隠したところから表示*/
	.tile_shown{
		display: block;
		animation: show 1.0s ease 0s;
	}
		
	@keyframes hide {
		0% {
			width: @tile_w;
			height: @tile_h;
			opacity: 1.0;
		}
		100% {
			width: @tile_w;
			height: @tile_h;
			opacity: 0.0;
		}
	}
	@keyframes show {
		0% {
			width: @tile_w;
			height: @tile_h;
			opacity: 0.0;
		}
		100% {
			width: @tile_w;
			height: @tile_h;
			opacity: 1.0;
		}
	}
		
	.icon{
		background-repeat: no-repeat;
		background-position: center center;
		background-color: transparent;
		position: absolute;
		top: 0px;
		left: -@tile_inner_pad;
		width: @tile_w;
		height: @tile_h;
		position: relative;
		transition: top 0.5s, transform 0.5s;
	}
	.icon:hover{
		cursor: pointer;
		top: -15px;
		transform:scale(1.1, 1.1);
	}
	
	a{
		cursor : pointer;
		text-decoration:none;
		color: #00f;
		&visited{
			color: #d3d;
			text-decoration:none;
		}
		&:hover{
			text-decoration:underline;
		}
	}
	a.get_url{
		.abs();
		font-size : 0.8em;
		right : 0.1em;
		bottom : 0.1em;
	}

	
	/* ここからカオス */
	#huf{
		.sorted_hor_abs(@each_panel_w, @tile_w, 1, 5);
		.sorted_ver_abs(@each_panel_h, @tile_h, 1, 2);
		h4{.decorate(@blue);}
		.icon{.set_icon(url("../img/each/huf.png"));}
	}
	#huf.tile_selected{
		animation: select_1_1 1.0s ease 0s;
	}
	#huf.tile_unselected{
		animation: unselect_1_1 1.0s ease 0s;
	}
	@keyframes select_1_1 {
		.select_custom(1,1);
	}
	@keyframes unselect_1_1 {
		.unselect_custom(1,1);
	}
	
	#vet{
		.sorted_hor_abs(@each_panel_w, @tile_w, 2, 5);
		.sorted_ver_abs(@each_panel_h, @tile_h, 1, 2);
		h4{.decorate(@brown);}
		.icon{.set_icon(url("../img/each/vet.png"));}
	}
	#vet.tile_selected{
		animation: select_2_1 1.0s ease 0s;
	}
	#vet.tile_unselected{
		animation: unselect_2_1 1.0s ease 0s;
	}
	@keyframes select_2_1 {
		.select_custom(2,1);
	}
	@keyframes unselect_2_1 {
		.unselect_custom(2,1);
	}
		
	#nire{
		.sorted_hor_abs(@each_panel_w, @tile_w, 3, 5);
		.sorted_ver_abs(@each_panel_h, @tile_h, 1, 2);
		h4{.decorate(@lightgreen);}
		.icon{.set_icon(url("../img/each/nire.png"));}
	}
	#nire.tile_selected{
		animation: select_3_1 1.0s ease 0s;
	}
	#nire.tile_unselected{
		animation: unselect_3_1 1.0s ease 0s;
	}
	@keyframes select_3_1 {
		.select_custom(3,1);
	}
	@keyframes unselect_3_1 {
		.unselect_custom(3,1);
	}

	
	#med{
		.sorted_hor_abs(@each_panel_w, @tile_w, 4, 5);
		.sorted_ver_abs(@each_panel_h, @tile_h, 1, 2);
		h4{.decorate(@white);}
		.icon{.set_icon(url("../img/each/med.png"));}
	}
	#med.tile_selected{
		animation: select_4_1 1.0s ease 0s;
	}
	#med.tile_unselected{
		animation: unselect_4_1 1.0s ease 0s;
	}
	@keyframes select_4_1 {
		.select_custom(4,1);
	}
	@keyframes unselect_4_1 {
		.unselect_custom(4,1);
	}

	/*
	( 'ω')＜工学祭は星になったのだ…
	.eng{
		.sorted_hor_abs(@each_panel_w, @tile_w, 4, 5);
		.sorted_ver_abs(@each_panel_h, @tile_h, 1, 2);
		h4{.decorate(hsl(0,0%,60%));}
		.icon{.set_icon(url("../img/each/eng.png"));}
	}
	.eng.tile_selected{
		animation: select_4_1 1.0s ease 0s;
	}
	@keyframes select_4_1 {
		.select_custom(4,1)
	}
	*/
	
	#den{
		.sorted_hor_abs(@each_panel_w, @tile_w, 5, 5);
		.sorted_ver_abs(@each_panel_h, @tile_h, 1, 2);
		h4{.decorate(@gray);}
		.icon{.set_icon(url("../img/each/den.png"));}
	}
	#den.tile_selected{
		animation: select_5_1 1.0s ease 0s;
	}
	#den.tile_unselected{
		animation: unselect_5_1 1.0s ease 0s;
	}
	@keyframes select_5_1 {
		.select_custom(5,1);
	}
	@keyframes unselect_5_1 {
		.unselect_custom(5,1);
	}
	

	
	#pha{
		.sorted_hor_abs(@each_panel_w, @tile_w, 1, 5);
		.sorted_ver_abs(@each_panel_h, @tile_h, 2, 2);
		h4{.decorate(@orange);}
		.icon{.set_icon(url("../img/each/pha.png"));}
	}
	#pha.tile_selected{
		animation: select_1_2 1.0s ease 0s;
	}
	#pha.tile_unselected{
		animation: unselect_1_2 1.0s ease 0s;
	}
	@keyframes select_1_2 {
		.select_custom(1,2);
	}
	@keyframes unselect_1_2 {
		.unselect_custom(1,2);
	}
	
	
	
	#hel{
		.sorted_hor_abs(@each_panel_w, @tile_w, 2, 5);
		.sorted_ver_abs(@each_panel_h, @tile_h, 2, 2);
		h4{.decorate(@pink);}
		.icon{.set_icon(url("../img/each/hel.png"));}
	}
	#hel.tile_selected{
		animation: select_2_2 1.0s ease 0s;
	}
	#hel.tile_unselected{
		animation: unselect_2_2 1.0s ease 0s;
	}
	@keyframes select_2_2 {
		.select_custom(2,2);
	}
	@keyframes unselect_2_2 {
		.unselect_custom(2,2);
	}


	
	#sci{
		.sorted_hor_abs(@each_panel_w, @tile_w, 3, 5);
		.sorted_ver_abs(@each_panel_h, @tile_h, 2, 2);
		h4{.decorate(@yellow);}
		.icon{.set_icon(url("../img/each/sci.png"));}
	}
	#sci.tile_selected{
		animation: select_3_2 1.0s ease 0s;
	}
	#sci.tile_unselected{
		animation: unselect_3_2 1.0s ease 0s;
	}
	@keyframes select_3_2 {
		.select_custom(3,2);
	}
	@keyframes unselect_3_2 {
		.unselect_custom(3,2);
	}
	
	
	#agr{
		.sorted_hor_abs(@each_panel_w, @tile_w, 4, 5);
		.sorted_ver_abs(@each_panel_h, @tile_h, 2, 2);
		h4{.decorate(@green);}
		.icon{.set_icon(url("../img/each/agr.png"));}
	}
	#agr.tile_selected{
		animation: select_4_2 1.0s ease 0s;
	}
	#agr.tile_unselected{
		animation: unselect_4_2 1.0s ease 0s;
	}
	@keyframes select_4_2 {
		.select_custom(4,2);
	}
	@keyframes unselect_4_2 {
		.unselect_custom(4,2);
	}

	#iff{
		.sorted_hor_abs(@each_panel_w, @tile_w, 5, 5);
		.sorted_ver_abs(@each_panel_h, @tile_h, 2, 2);
		h4{.decorate(@lightblue);}
		.icon{.set_icon(url("../img/each/iff.png"));}
	}
	#iff.tile_selected{
		animation: select_5_2 1.0s ease 0s;
	}
	#iff.tile_unselected{
		animation: unselect_5_2 1.0s ease 0s;
	}
	@keyframes select_5_2 {
		.select_custom(5,2);
	}
	@keyframes unselect_5_2 {
		.unselect_custom(5,2);
	}
	
	/* 使用したスタイル・関数 */
	.select_custom(@x,@y){
		0% {
			width: @tile_w;
			height: @tile_h;
			.sorted_hor_abs(@each_panel_w, @tile_w, @x, 5);
			.sorted_ver_abs(@each_panel_h, @tile_h, @y, 2);
		}
		50%{
			.tile_selected_size_w();
			height: @tile_h;
			.sorted_hor_abs(@each_panel_w, @tile_w, 1, 5);
			.sorted_ver_abs(@each_panel_h, @tile_h, @y, 2);
		}
		100% {
			.tile_selected_size_h();
			.sorted_ver_abs(@each_panel_h, @tile_h, 1, 2);
		}
	}
	.unselect_custom(@x,@y){
		0% {
			.tile_selected_size_w();
			.tile_selected_size_h();
			.sorted_hor_abs(@each_panel_w, @tile_w, 1, 5);
			.sorted_ver_abs(@each_panel_h, @tile_h, 1, 2);
		}
		/*
		50%{
			// 垂直面から格納
			// .tile_selected_size_w();
			// height: @tile_h;
			// .sorted_ver_abs(@each_panel_h, @tile_h, @y, 2);
			// .sorted_hor_abs(@each_panel_w, @tile_w, 1, 5);
			// 水平面から格納
			// width: @tile_w;
			// .tile_selected_size_h();
			// .sorted_hor_abs(@each_panel_w, @tile_w, @x, 5);
			// .sorted_ver_abs(@each_panel_h, @tile_h, 1, 2);
		}
		// でもやっぱり一気に格納したほうがカッコイイ
		*/
		100% {
			width: @tile_w;
			height: @tile_h;
			.sorted_hor_abs(@each_panel_w, @tile_w, @x, 5);
			.sorted_ver_abs(@each_panel_h, @tile_h, @y, 2);
		}
	}
	
	h4{
		font-weight: 300;
		// text-shadow: 1px 0px 0px .fff, 0px 1px 0px .fff, -1px 0px 0px .fff, 0px -1px 0px .fff;
		text-align: center;
		font-size: 1.3em;
		width:@tile_w - @tile_inner_pad*2;
	}
	.decorate(@cal){
		border-bottom: 3px @cal solid;
	}
	.set_icon(@url){
		background-image:@url;
	}

}

.tile_selected_size(){
	width: ((@each_panel_w + @tile_w) / 6 - @tile_w) * 4 + @tile_w * 5;
	height: ((@each_panel_h + @tile_h) / 3 - @tile_h) + @tile_h * 2;
}
.tile_selected_size_w(){
	width: ((@each_panel_w + @tile_w) / 6 - @tile_w) * 4 + @tile_w * 5;
}
.tile_selected_size_h(){
	height: ((@each_panel_h + @tile_h) / 3 - @tile_h) + @tile_h * 2;
}