<div class="open_roll bar_type">
	<div class="mostpopular-fixed"><span>실시간급상승</span></div>
	<div>

		<?
		$ci = &get_instance();
		$ci->load->model('web/m_realtime_keyword');
		$arr_realtime_keyword   = $ci->m_realtime_keyword->realtime_keyword_all_list();


		foreach ($arr_realtime_keyword as $key=>$val) :

			$last_rank  = $val['last_rank'];
			$rank       = $val['rank'];

			$class = '';
			$last_rank_txt = '';
			if($last_rank==0){
				$class = 'new';
				$last_rank_txt = 'NEW';
			} else {
				$calc_rank = $last_rank - $rank;
				if($calc_rank == 0){   // 같음
					$last_rank_txt = '-';
				} else if($calc_rank > 0){   // up
					$last_rank_txt = '<img src="/img/web/btn_up.jpg">'.$calc_rank;
				} else {
					$last_rank_txt = '<img src="/img/web/btn_down.jpg">'.abs($calc_rank);
				}
			}
			$keyword = mb_strimwidth($val['keyword'], '0', '25', '..', 'utf-8');
			?>
			<div class="roll_box">
				<span class="mostpopular">실시간급상승</span>
				<span class="no" >
									<?=$rank?>
								</span>
				<span class="keyword" style="cursor:pointer;">
									<a href="/m/search/?search_keyword=<?=urlencode($val['keyword'])?>">
										<?=$keyword?>
									</a>
								</span>
				<span class="graph updown" style="cursor:pointer;">
									<?=$last_rank_txt?>
								</span>
				<span style="padding-left:10px;cursor:pointer" ><img src="/img/mobile/arr_down.gif"></span>

			</div>


		<?endforeach; ?>

	</div>
</div>
<div class="open_roll spread">
	<div class="open_roll_wrap">
		<div class="txt">실시간 급상승
			<a class="close_btn" style="cursor:pointer;">×</a>
		</div>
		<ul class="ranking">
			<li style="width:48%">
				<a class="rank first current" style="cursor:pointer;">1-10위</a>
			</li>
			<li style="width:2%">
				<img src="/img/mobile/img_ranking.gif">
			</li>
			<li style="width:48%">
				<a class="rank second" style="cursor:pointer;">11-20위</a>
			</li>
		</ul>
		<ul class="roll_box_wrap">
			<div>
				<?
				foreach ($arr_realtime_keyword as $key=>$val) :

					$last_rank  = $val['last_rank'];
					$rank       = $val['rank'];

					$class = '';
					$last_rank_txt = '';
					if($last_rank==0){
						$class = 'new';
						$last_rank_txt = 'NEW';
					} else {
						$calc_rank = $last_rank - $rank;
						if($calc_rank == 0){   // 같음
							$last_rank_txt = '-';
						} else if($calc_rank > 0){   // up
							$last_rank_txt = '<img src="/img/web/btn_up.jpg">'.$calc_rank;
						} else {
							$last_rank_txt = '<img src="/img/web/btn_down.jpg">'.abs($calc_rank);
						}
					}
					$keyword = mb_strimwidth($val['keyword'], '0', '25', '..', 'utf-8');
					?>
					<div class="<?echo ($key < 10)?"first": "second hide"?>">
						<div class="issue_box">
												<span class="no">
													<?=$rank?>
												</span>
							<span>
													<a href="/m/search/?search_keyword=<?=urlencode($val['keyword'])?>">
														<?=$keyword?>
													</a>
												</span>
							<span class="bbox <?=$class?> updown">
													<?=$last_rank_txt?>
												</span>
						</div>
					</div>
				<?endforeach; ?>
			</div>
		</ul>
	</div>
</div>

<script>

	$(document).ready(function(){

		// 실시간 급상승 검색어 위로 슬라이딩
		var margin_top = 0;
		var no_i = 0;
		setInterval(function(){
 			(margin_top < (51*20*-1))? margin_top = 0 : margin_top -= 51.5;
 			$(".open_roll.bar_type > div").animate({ "margin-top" : margin_top +"px"},1000);
		},10000);

		// 실시간 급상승 펼치기 버튼
		$(".open_roll.bar_type .roll_box img").click(function(){
			$(".open_roll.spread").show();
		});

		// 실시간 급상승 접기 버튼
		$(".open_roll.spread .close_btn").click(function(){
			$(".open_roll.spread").hide();
		});

		//순위별 보여주기 , 1-10위 | 11-20위 클릭시
		$(".open_roll.spread .ranking a.rank").click(function(){

			//모든 current 클래스 제거
			$(".open_roll.spread .ranking a.rank").removeClass("current");
			//클릭된 엘리먼트에 current 추가
			$(this).addClass("current");

			// 1-10위 클릭이면
			$(".roll_box_wrap > div > div").addClass("hide");
			if($(this).hasClass("first")){

				$(".roll_box_wrap > div > div.first").removeClass("hide");
			}
			// 11-20위 클릭이면
			else if($(this).hasClass("second")){
				$(".roll_box_wrap > div > div.second").removeClass("hide");
			}

		});


	});
</script>
