<style>
.widget_menu {cursor:pointer;}
</style>
<main id="main" role="main" tabindex="-1">
  <div class="container">
    <div class="layout-blog">
      <div>
        <section class="gap-bottom-md">
          <h2 class="visually-hidden">Webtoon hot</h2>
          <div class="img-slider-wrapper">
            <div class="img-slider-tools">
              <button class="arr prev"><span class="visually-hidden">Previous slide</span></button>
              <span class="current-index">1</span>/<span class="count">10</span>
              <button class="arr next"><span class="visually-hidden">Next slide</span></button>
            </div>
            <ul class="img-slider">
<?php
$len_slideshow = count($slideshow);
if(isset($slideshow)==TRUE && $len_slideshow>0) {
  foreach($slideshow as $v) {
    echo '<li class="photo-news">';
    echo '<a href="'.$v['episode_url'].'"><img src="'.$v['main_img'].'" alt="" width="500" height="281"></a>';
    echo '<div class="txt">
                  <h3 class="title">'.stripslashes($v['name'])." - ".stripslashes($v['title']).'</h3>
                  <div class="author">'.stripslashes($v['cartoonist']).'</div>
                </div>';
    echo '</li>';
  }
}
?>
            </ul>
          </div>
        </section>
  
        <section class="gap-bottom-md">
          <header class="row-header row-header-tools">
            <h2 class="title"><a>뜨끈뜨끈한</a><a class="new">신작</a></h2>
            <div class="tools sortby">
              <a class="update current widget_menu" base="hot_toons" tg="hot_toon_update">업데이트순</a>
              <a class="view-count widget_menu" base="hot_toons" tg="hot_toon_count">조회순</a>
              <a class="star-score widget_menu" base="hot_toons" tg="hot_toon_grade">별점순</a>
            </div>
          </header>
          <ul class="gallery-3 hot_toons" id="hot_toon_update">
<?php
foreach($new_release_date as $v) {
  echo '<li>';
  echo '<a class="img-scaleup" href="'.$v['episode_url'].'"><img src="'.$v['main_img'].'" alt="" width="218" height="120"></a>';
  echo '<h3 class="row-title"><a href="'.$v['maptoon_url'].'">'.stripslashes($v['name']).'</a></h3>';
  echo '<div class="row-des"><a href="'.$v['episode_url'].'">'.stripslashes($v['title']).'</a></div>';
  echo '<div class="row-user">'.stripslashes($v['cartoonist']).'</div>';
  echo '</li>';
}
?>
          </ul>

          <ul class="gallery-3 hot_toons" id="hot_toon_count" style="display:none;">
<?php
foreach($new_release_count as $v) {
  echo '<li>';
  echo '<a class="img-scaleup" href="'.$v['episode_url'].'"><img src="'.$v['main_img'].'" alt="" width="218" height="120"></a>';
  echo '<h3 class="row-title"><a href="'.$v['maptoon_url'].'">'.stripslashes($v['name']).'</a></h3>';
  echo '<div class="row-des"><a href="'.$v['episode_url'].'">'.stripslashes($v['title']).'</a></div>';
  echo '<div class="row-user">'.stripslashes($v['cartoonist']).'</div>';
  echo '</li>';
}
?>
          </ul>

          <ul class="gallery-3 hot_toons" id="hot_toon_grade" style="display:none;">
<?php
foreach($new_release_grade as $v) {
  echo '<li>';
  echo '<a class="img-scaleup" href="'.$v['episode_url'].'"><img src="'.$v['main_img'].'" alt="" width="218" height="120"></a>';
  echo '<h3 class="row-title"><a href="'.$v['maptoon_url'].'">'.stripslashes($v['name']).'</a></h3>';
  echo '<div class="row-des"><a href="'.$v['episode_url'].'">'.stripslashes($v['title']).'</a></div>';
  echo '<div class="row-user">'.stripslashes($v['cartoonist']).'</div>';
  echo '</li>';
}
?>
          </ul>
        </section>
  
        <section class="gap-bottom-md">
          <header class="row-header row-header-tools">
            <h2 class="title"><a href="">성경을 재미있게</a></h2>
            <div class="tools sortby">
              <a class="update current widget_menu" base="fun_toons" tg="fun_update">업데이트순</a>
              <a class="view-count widget_menu" base="fun_toons" tg="fun_count">조회순</a>
              <a class="star-score widget_menu" base="fun_toons" tg="fun_grade">별점순</a>
            </div>
          </header>
          <ul class="gallery-3 fun_toons" id="fun_update">
<?php
foreach($fun_date as $v) {
  echo '<li>';
  echo '<a class="img-scaleup" href="'.$v['episode_url'].'"><img src="'.$v['main_img'].'" alt="" width="218" height="120"></a>';
  echo '<h3 class="row-title"><a href="'.$v['maptoon_url'].'">'.stripslashes($v['name']).'</a></h3>';
  echo '<div class="row-des"><a href="'.$v['episode_url'].'">'.stripslashes($v['title']).'</a></div>';
  echo '<div class="row-user">'.stripslashes($v['cartoonist']).'</div>';
  echo '</li>';
}
?>
          </ul>
          <ul class="gallery-3 fun_toons" id="fun_count" style="display:none;">
<?php
foreach($fun_count as $v) {
  echo '<li>';
  echo '<a class="img-scaleup" href="'.$v['episode_url'].'"><img src="'.$v['main_img'].'" alt="" width="218" height="120"></a>';
  echo '<h3 class="row-title"><a href="'.$v['maptoon_url'].'">'.stripslashes($v['name']).'</a></h3>';
  echo '<div class="row-des"><a href="'.$v['episode_url'].'">'.stripslashes($v['title']).'</a></div>';
  echo '<div class="row-user">'.stripslashes($v['cartoonist']).'</div>';
  echo '</li>';
}
?>
          </ul>
          <ul class="gallery-3 fun_toons" id="fun_grade" style="display:none;">
<?php
foreach($fun_grade as $v) {
  echo '<li>';
  echo '<a class="img-scaleup" href="'.$v['episode_url'].'"><img src="'.$v['main_img'].'" alt="" width="218" height="120"></a>';
  echo '<h3 class="row-title"><a href="'.$v['maptoon_url'].'">'.stripslashes($v['name']).'</a></h3>';
  echo '<div class="row-des"><a href="'.$v['episode_url'].'">'.stripslashes($v['title']).'</a></div>';
  echo '<div class="row-user">'.stripslashes($v['cartoonist']).'</div>';
  echo '</li>';
}
?>
          </ul>
        </section>
  
        <!-- banner box -->
        <!--
        <div class="banner-box gap-bottom-md">
          <div><a href=""><img src="img/banner1.png" alt="" width="294" height="172"></a></div>
          <div><a href=""><img src="img/banner2.png" alt="" width="295" height="172"></a></div>
        </div>-->
  
        <section class="gap-bottom-md">
          <header class="row-header row-header-tools">
            <h2 class="title"><a href="">신앙터치</a></h2>
            <div class="tools sortby">
              <a class="update current widget_menu" base="faith_toons" tg="faith_update">업데이트순</a>
              <a class="view-count widget_menu" base="faith_toons" tg="faith_count">조회순</a>
              <a class="star-score widget_menu" base="faith_toons" tg="faith_grade">별점순</a>
            </div>
          </header>
          <ul class="gallery-3 faith_toons" id="faith_update">
<?php
foreach($faith_date as $v) {
  echo '<li>';
  echo '<a class="img-scaleup" href="'.$v['episode_url'].'"><img src="'.$v['main_img'].'" alt="" width="218" height="120"></a>';
  echo '<h3 class="row-title"><a href="'.$v['maptoon_url'].'">'.stripslashes($v['name']).'</a></h3>';
  echo '<div class="row-des"><a href="'.$v['episode_url'].'">'.stripslashes($v['title']).'</a></div>';
  echo '<div class="row-user">'.stripslashes($v['cartoonist']).'</div>';
  echo '</li>';
}
?>
          </ul>
          <ul class="gallery-3 faith_toons" id="faith_count" style="display:none;">
<?php
foreach($faith_count as $v) {
  echo '<li>';
  echo '<a class="img-scaleup" href="'.$v['episode_url'].'"><img src="'.$v['main_img'].'" alt="" width="218" height="120"></a>';
  echo '<h3 class="row-title"><a href="'.$v['maptoon_url'].'">'.stripslashes($v['name']).'</a></h3>';
  echo '<div class="row-des"><a href="'.$v['episode_url'].'">'.stripslashes($v['title']).'</a></div>';
  echo '<div class="row-user">'.stripslashes($v['cartoonist']).'</div>';
  echo '</li>';
}
?>
          </ul>
          <ul class="gallery-3 faith_toons" id="faith_grade" style="display:none;">
<?php
foreach($faith_grade as $v) {
  echo '<li>';
  echo '<a class="img-scaleup" href="'.$v['episode_url'].'"><img src="'.$v['main_img'].'" alt="" width="218" height="120"></a>';
  echo '<h3 class="row-title"><a href="'.$v['maptoon_url'].'">'.stripslashes($v['name']).'</a></h3>';
  echo '<div class="row-des"><a href="'.$v['episode_url'].'">'.stripslashes($v['title']).'</a></div>';
  echo '<div class="row-user">'.stripslashes($v['cartoonist']).'</div>';
  echo '</li>';
}
?>
          </ul>
        </section>
      </div>
  
      <!-- side bar -->
      <?php include_once ('mt_right_inc.php');?>
      <!-- //side bar -->
    </div>
  </div>
</main>

<script>
$(document).ready(function() {
  $(".widget_menu").click(function() {
    base = $(this).attr('base');
    tg_id = $(this).attr('tg');

    if(base!=undefined && tg_id!=undefined) {
      reset_menu(base);
      $("#"+tg_id).show();
      $(this).addClass('current');
    }
    return false;
  });

  var reset_menu = function(menu_class) {
    if(menu_class!=undefined) {
      $("."+menu_class).hide();
      $(".widget_menu[base="+menu_class+"]").removeClass('current');
    }
  }
});
</script>