<?
$method = $this->uri->segment(3);
$controller = $this->uri->segment(2);

$ci=& get_instance();

$ci->load->library('comm');
$arr_news_comm = $ci->comm->fn_news_right();

$arr_main_news          = $arr_news_comm['arr_main_news'];
$arr_recomm_column      = $arr_news_comm['arr_recomm_column'];
$arr_recomm_life        = $arr_news_comm['arr_recomm_life'];
$arr_life_ranking       = $arr_news_comm['arr_life_ranking'];
$arr_p_photo            = $arr_news_comm['arr_p_photo'];
$arr_p_video            = $arr_news_comm['arr_p_video'];
$arr_realtime_keyword   = $arr_news_comm['arr_realtime_keyword'];



$main_news_class = 'section';
$main_news_style='';
if($controller == 'search') {
	$main_news_class = 'lifepopular';
	$main_news_style = 'style="margin-top:0"';
}
?>



<?if($method != 'columnist'):?>
<div class="channel_cont">
	<div class="wrap">
		<h4 class="beachblue">추천연재</h4>
		<div class="channel_boxs" style="margin-bottom:0;">
			<?   foreach ($arr_recomm_column as $val) {
			$title_txt = mb_strimwidth($val['title'], '0', '60', '..', 'utf-8')."<br>";
			?>
			<div class="channel_con2">
				<a href="/m/news/column_view/<?=$val['content_idx']?>"><img src="<?=$val['theme_img']?>" class="art-img"></a>
				<p class="chtitle"><a href="/m/news/column_view/<?=$val['content_idx']?>"><span class="tit"> <?=$title_txt?> </a> <a href="/m/news/columnist/<?=$val['partner_idx']?>"><?=$val['column_name']?></a></p>
			</div>
			<?  }?>
		</div>
	</div>
</div>

<?endif;?>



<div class="life_footer" style="background:#f8f8f8;">
	<div style="text-align:center; margin:30px 0">
		<span><a href="javascript:change_popular_media('popular_video');" class="btn btn-default br20 tab-btn popular_video" style="padding:8px 40px; font-size:16px;" id="p_v">영상 </a></span>
		<span><a href="javascript:change_popular_media('popular_photo');" class="btn btn-default br20 tab-btn popular_photo" style="padding:8px 40px; font-size:16px; margin-left:5px;" id="p_p">포토</a></span>
	</div>
	<ul class="life_cont2_box">
		<span class="s_left"><a href=""><img src="/img/mobile/p_slide_left.png"></a></span>
		<span class="s_right"><a href=""><img src="/img/mobile/p_slide_right.png"></a></span>
		<div class="popular  responsive" id="popular_photo" style="display:none;">

			<? 	$i=1;
			foreach ($arr_p_photo as $val) {
				$title_txt = mb_strimwidth($val['title'], '0', '38', '..', 'utf-8');
				switch ($val['content_type']) {
					case '1': $img_view_url = '/m/news/news_view/'.$val['content_idx'];	break;
					case '2': $img_view_url = '/m/news/column_view/'.$val['content_idx'];	break;
					case '3': $img_view_url = '/m/life/life_view/'.$val['content_idx'];	break;
				}
				?>
				<li <?if(0 == $i%2) echo "class=right"?>>
					<a href="<?=$img_view_url?>"><img src="<?=$val['main_img']?>" class="art-img"></a>
					<p class="life_title"><a href=""><span class="beachblue">[인기]</span> <?=$title_txt?></a></p>
				</li>
 

				<? 		if($i==10)	break;
				$i++;
			}?>
		</div>

		<div class="popular  responsive" id="popular_video" style="">
			<? 	$i=1;
			foreach ($arr_p_video as $val) {
				$title_txt = mb_strimwidth($val['title'], '0', '38', '..', 'utf-8');
				switch ($val['content_type']) {
					case '1': $img_view_url = '/m/news/news_view/'.$val['content_idx'];	break;
					case '2': $img_view_url = '/m/news/column_view/'.$val['content_idx'];	break;
					case '3': $img_view_url = '/m/life/life_view/'.$val['content_idx'];	break;
				}

				?>
 
				<li <?if(0 == $i%2) echo "class=right"?>>
					<a href="<?=$img_view_url?>"><img src="<?=$val['main_img']?>" class="art-img"></a>
					<p class="life_title">

						<a href="<?=$img_view_url?>">
							<?if($val['head_title']!=''):?>

							<span class="beachblue">[<?=$val['head_title']?>]</span>
				<?endif?>
							<?=$title_txt?></a></p>
				</li>
	 
				<?
				if($i==10)	break;
				$i++;
			}?>
		</div>


	</ul>
</div>






<script>
/**
$(document).ready(function() {
	setInterval("popular_media_interval()", 7000);
});





function change_popular_media(id){


	ids = (id == 'popular_video') ? "p_v":"p_p";
	ids2 = (id == 'popular_video') ? "p_p":"p_v"
	$("#popular_photo").hide();
	$("#popular_video").hide();
	$("#"+id).show();
	$("#"+ids).addClass("btn-default_bb");
	$("#"+ids).removeClass("btn-default");

	$("#"+ids2).removeClass("btn-default_bb");
	$("#"+ids2).addClass("btn-default");


}


function popular_media_interval(){
	$("#popular_photo").toggle();
	$("#popular_video").toggle();
}**/
$(document).ready(function() {
	$(".tab-btn.popular_video").addClass("btn-default_bb");
	$("#popular_video").show();
	$('.responsive').slick({
	  dots: false,
		infinite: true,
	  speed: 300,
	  slidesToShow: 2,
	  slidesToScroll: 2,
	  responsive: [
		{
		  breakpoint: 480,
		  settings: {
	  slidesToShow: 2,
	  slidesToScroll: 2,
		  }
		}
	   ]
	});
	$("#popular_video")[0].slick.refresh();
	$("#popular_video").slick('slickPlay');
});

function change_popular_media(objId){
	$(".popular").hide();
	$(".tab-btn").removeClass("btn-default_bb");
	$(".tab-btn."+objId).addClass("btn-default_bb");
	$("#"+objId).show();
	$('#'+objId+'.responsive')[0].slick.refresh();
	$('#'+objId+'.responsive').slick('slickPlay');
 
}
</script>
<script>

</script>
<style>
.life_cont2_box li img{width:98%;margin-right:2%}
.life_cont2_box li.right img{width:98%;margin-right:0;margin-left:2%}
.life_cont2_box .s_left, .life_cont2_box .s_right{display:none}
.life_cont2_box {position:relative}
.life_cont2_box .life_cont4_box{float:none;margin:0 auto}
.life_cont2_box .slick-prev.slick-arrow{cursor:pointer;z-index:99;position:absolute;left:0;top:30%;background:url('/img/mobile/p_slide_left.png') center center no-repeat;width:31px;height:59px;border:none;text-indent:-9999rem;text-decoration:}
.life_cont2_box .slick-next.slick-arrow{cursor:pointer;z-index:99;position:absolute;right:0;top:30%;background:url('/img/mobile/p_slide_right.png') center center no-repeat;width:31px;height:59px;border:none;text-indent:-9999rem;}
.life_cont2_box .tr_txt{padding-top:1rem}
 @media screen and (max-width: 640px){
	.life_cont2_box .slick-prev.slick-arrow{left:0;top:20%;background:url('/img/mobile/p_slide_left.png') center center no-repeat;width:31px;background-size:100% auto }
	.life_cont2_box .slick-next.slick-arrow{ right:0;top:20%;background:url('/img/mobile/p_slide_right.png') center center no-repeat;width:31px;background-size:100% auto}
} 
@media screen and (max-width: 400px){
	.life_cont2_box .slick-prev.slick-arrow{top:10%;}
	.life_cont2_box .slick-next.slick-arrow{top:10%;}
} 
</style>
