{@ $wi = $widget_info; }
<load target="css/mwea.css" />

<style>
.mwa-box { box-sizing:border-box; background:url({$wi->b_img}) no-repeat; background-color:{$wi->background_color}; height:{$wi->main_height+4}px; <!--@if($wi->boxshadow == '')-->-moz-box-shadow:1px 3px 15px #555; -webkit-box-shadow:1px 3px 15px #555; box-shadow:1px 3px 15px #555;<!--@end--> border:{$wi->border_size}px solid {$wi->border_color}; }
.mwa-box .b_text { color:{$wi->b_color}; font-size:{$wi->b_size} }

.mwa-accordion li {  box-sizing:border-box; float:{$wi->display_location}; width:{$wi->a_width}px; height:{$wi->main_height}px; border-left:{$wi->border_size}px solid {$wi->border_color}; }
.mwa-accordion li.bleft { border-left:{$wi->border_size}px solid {$wi->border_color};}
.mwa-accordion li .heading { width:{$wi->a_width}px; top:{$wi->title_height}px; }
.mwa-accordion li img {<!--@if($wi->thumb_gray == 'Y')--> -webkit-filter:grayscale(100%); filter:grayscale(100%)<!--@end-->}
.mwa-accordion li img:hover { -webkit-filter:grayscale(0%); filter:grayscale(0%)}
.mwa-accordion li .description h2 { font-size:{$wi->title_size}; color:{$wi->title_color};}
.mwa-accordion li .description { width:{$wi->box_width}px; height:{$wi->text_height}px}
.mwa-accordion li .bgDescription{ height:340px}
.mwa-accordion li .description p { width:{$wi->box_width-80}px; font-size:{$wi->sum_font_size}; -webkit-line-clamp:{$wi->content_h_n}; height:{$wi->content_l_h*$wi->content_h_n}; line-height:{$wi->content_l_h}; color:{$wi->sum_font_color}}

.mwa-accordion li:first-of-type { background-color:{$wi->back_color1};}
.mwa-accordion li:nth-of-type(2) { background-color:{$wi->back_color2};}
.mwa-accordion li:nth-of-type(3) { background-color:{$wi->back_color3};}
.mwa-accordion li:nth-of-type(4) { background-color:{$wi->back_color4};}
.mwa-accordion li:nth-of-type(5) { background-color:{$wi->back_color5};}

@media all and (max-width:479px) {
.mwa-box { height:244px }
.mwa-accordion li { width:50px; height:240px}
.mwa-accordion li .description { width:130px; height:120px}
.mwa-accordion li .bgDescription{ height:250px}
.mwa-accordion li .description p { width:100px; font-size:11px; }
.mwa-accordion li .description h2 { font-size:14px; text-overflow:ellipsis; white-space:nowrap;}
}
</style>

<div class="mwa-box">
	<span cond="$wi->b_text" class="b_text">{$wi->b_text}</span>

	<ul class="mwa-accordion" id="mwa-accordion">
		<!--@foreach($wi->document_list as$oDocument)-->
		<li class="bg">
			<img src="{$oDocument->getThumbnail($wi->thumbnail_width,$wi->thumbnail_height,$wi->thumbnail_type)}"/>
			<div cond="$wi->title_visibility == 'true'" class="heading">{$oDocument->getTitleText(9)}</div>
			<div class="bgDescription"></div>
			<div class="description">
				<h2 cond="$wi->title_visibility == 'true'">{$oDocument->getTitleText($wi->title_length)}</h2>
				<p cond="$wi->display_summary == 'Y'">{$oDocument->getSummary($wi->content_cut_size)}</p>
				<a href="{getUrl('','document_srl',$oDocument->document_srl)}">more &rarr;</a>
			</div>
		</li>
		<!--@end-->
	</ul>
</div>

<script cond="!Mobile::isMobileCheckByAgent()">
	$(function() {
		$('#mwa-accordion > li').hover(
			function () {
				var $this = $(this);
				$this.stop().animate({width:{$wi->box_width-40}},500);
				$('.heading',$this).stop(true,true).fadeOut();
				$('.bgDescription',$this).stop(true,true).slideDown(500);
				$('.description',$this).stop(true,true).fadeIn();
			},
			function () {
				var $this = $(this);
				$this.stop().animate({width:{$wi->a_width}},500);
				$('.heading',$this).stop(true,true).fadeIn();
				$('.description',$this).stop(true,true).fadeOut(500);
				$('.bgDescription',$this).stop(true,true).slideUp(700);
			}
		);
	});
</script>

<script cond="Mobile::isMobileCheckByAgent()">
	$(function() {
		$('#mwa-accordion > li').hover(
			function () {
				var $this = $(this);
				$this.stop().animate({width:130},500);
				$('.heading',$this).stop(true,true).fadeOut();
				$('.bgDescription',$this).stop(true,true).slideDown(500);
				$('.description',$this).stop(true,true).fadeIn();
			},
			function () {
				var $this = $(this);
				$this.stop().animate({width:50},500);
				$('.heading',$this).stop(true,true).fadeIn();
				$('.description',$this).stop(true,true).fadeOut(500);
				$('.bgDescription',$this).stop(true,true).slideUp(700);
			}
		);
	});
</script>