<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>{{$book->book_name}}</title>
    <link href="/wapbrowser/web/base.css" rel="stylesheet">
    <script src="/wapbrowser/web/refreshRem.js"></script>
    <style>
        .reader-text {
            background: rgb(255, 248, 235);
            color: rgb(38, 38, 38);
            font-size: 19px;
        }

        .reader-text--vertical {
            padding-bottom: .9rem;
            padding-top: .4rem;
            box-sizing: border-box;
            min-height: 100vh;
        }

        .reader-text__name {
            font-size: 24px;
            margin: 0 .24rem;
            border-bottom: 1px solid;
            margin-bottom: 1em;
            padding-bottom: .5em;
        }

        .reader-text__paragraph {
            line-height: 1.75em;
            min-height: 1.75em;
            text-indent: 2em;
            margin: 0 .24rem;
            margin-top: .8em;
        }

        .reader-text__footer {
            display: none;
            margin: 0 .24rem;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            margin-top: .5rem;
            font-size: .32rem;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;
        }

        .reader-text__button {
            height: .7rem;
            line-height: .68rem;
            text-align: center;
            box-sizing: border-box;
            border-radius: .05rem;
            border: 1px solid;
        }

        .reader-text__prev, .reader-text__catalog {
            width: 1.7rem;
        }

        .reader-text__next {
            width: 3.2rem;
        }

        .reader-text--vertical .reader-text__footer {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
        }

        .reader-text--horizontal {
            overflow: hidden;
        }

        .reader-text--horizontal .reader-text__wrap {
            -webkit-column-width: 7.5rem;
            column-width: 7.5rem;
            -webkit-column-gap: 0;
            column-gap: 0;
            box-sizing: border-box;
            padding-bottom: .9rem;
            padding-top: .4rem;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            height: 100vh;
            -webkit-transform: translate3d(0px, 0px, 0px);
            transform: translate3d(0px, 0px, 0px);
            -webkit-transition: .15s transform;
            transition: .15s transform;
        }

        .reader-text--horizontal .reader-text__info {
            display: block;
        }

        .reader-text__info {
            display: none;
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: .9rem;
            line-height: .9rem;
            padding: 0 .24rem;
            font-size: 13px;
            box-sizing: border-box;
        }

        .info__title {
            float: left;
            width: 5rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .info__page {
            float: right;
        }

        .reader-menu {
            color: #afb0ba;
            display: none;
        }

        .reader-menu__head {
            height: 1rem;
            background: #262626;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            box-sizing: border-box;
            padding: 0 .24rem;
        }

        .reader-menu__head img {
            width: .45rem;
            padding: .275rem .2rem;
            display: block;
        }

        .reader-menu__back {
            float: left;
        }

        .reader-menu__more {
            float: right;
        }

        .reader-menu__add {
            float: right;
        }

        .reader-menu__nav {
            position: absolute;
            background: #262626;
            right: 0;
            top: 1rem;
            width: 2rem;
            -webkit-box-shadow: 0 0.2rem 0.1rem -0.1rem #000 inset;
            box-shadow: 0 0.2rem 0.1rem -0.1rem #000 inset;
            display: none;
        }

        .nav__item {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            margin: .26rem 0;
        }

        .nav__icon.nav__icon {
            padding: 0 .25rem 0 .4rem;
        }

        .nav__text {
            font-size: .28rem;
        }

        .reader-menu__foot {
            background: #262626;
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            font-size: .26rem;
            box-sizing: border-box;
        }

        .reader-menu__title {
            width: 1.6rem;
            font-size: .28rem;
        }

        .reader-menu__box {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;
        }

        .reader-menu__font {
            margin-top: .4rem;
            padding: 0 .24rem;
        }

        .font-box {
            width: 5.9rem;
        }

        .font__btn {
            height: .4rem;
            width: 1.25rem;
            text-align: center;
            border-radius: .08rem;
            border: 1px solid #afb0ba;
            line-height: .4rem;
        }

        .font__size {
            width: 2em;
            text-align: center;
        }

        .reader-menu__bg {
            margin: .4rem 0;
            padding: 0 .24rem;
        }

        .bg__box {
            width: 5.9rem;
        }

        .bg__item {
            width: .6rem;
            height: .6rem;
            position: relative;
        }

        .bg__icon, .bg__icon--check {
            display: block;
            height: 100%;
            width: 100%;
            border-radius: .08rem;
        }

        .bg__icon--check {
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }

        .bg__icon--check.is-active {
            display: block
        }

        .reader-menu__option {
            -webkit-box-shadow: 0 0 .2rem 0 #000;
            box-shadow: 0 0 .2rem 0 #000;
            padding: 0.2rem .24rem;
        }

        .option__item {
            height: 1rem;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            font-size: .28rem;
        }

        .option__icon {
            width: .5rem;
        }

        .reader-guide {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            display: none;
            opacity: 0;
            -webkit-transition: opacity .3s;
            transition: opacity .3s;
        }

        .reader-guide-1 img {
            width: 60%;
            margin: auto;
        }

        .reader-guide-1 div {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
        }

        @for ($i = 1; $i <= 3; $i++)
            @for ($j = 1; $j <= 3; $j++)
            .reader-guide-1-{{$i * 3 + $j - 3}}   {
            @if($i === 2)
                 height: 50%;
            @else
                 height: 25%;
            @endif
            @if($j === 2)
                 width: 50%;
            @else
                 width: 25%;
            @endif
            @if($j === 1 || $i * 3 + $j - 3 === 2)
                 background-color: rgba(0, 0, 0, 0.78);
            @elseif($j === 3 || $i * 3 + $j - 3 === 8)
                 background-color: rgba(0, 0, 0, 0.70);
            @else
               background-color: rgba(0, 0, 0, 0.85);
        @endif



        }

        @endfor
  @endfor
  .reader-guide-2 {
            background-color: rgba(0, 0, 0, 0.85);
        }

        .reader-guide-2 img {
            width: 100%;
            display: block;
        }
    </style>
    <script src="/wapbrowser/web/gesture.js"></script>
</head>
<body>
@php
    $navs = [
        [
          'name' => '首页',
          'className' => 'home',
          'href' =>  '/',
          'icon' => 'data:image/png;base64,[encoded data, 5900 characters]'
        ],
        [
          'name' => '分类',
          'className' => 'category',
          'href' => '/stock',
          'icon' => 'data:image/png;base64,[encoded data, 6287 characters]'
        ],
        /*[
          'name' => '排行',
          'className' => 'rank',
          'href' => '/rank',
          'icon' => 'data:image/png;base64,[encoded data, 5660 characters]'
        ],*/
        [
          'name' => '详情',
          'className' => 'detail',
          'href' => '/detail?bid='.book_hash_encode($book->bid),
          'icon' => 'data:image/png;base64,[encoded data, 5156 characters]'
        ]
      ];
$bg = [
    [
      'icon' => "#f5dce4",
      'background' => "#f5dce4",
      'color' => "#7B3149"
    ],
    [
      'icon' => '#DFF5DC',
      'background' => "#DFF5DC",
      'color' => "#1F4D2B"
    ],
    [
      'icon' => '#38658C',
      'background' => "#38658C",
      'color' => "#fff"
    ],
    [
      'icon' => '#fff8eb',
      'background' => "#fff8eb",
      'color' => "#262626",
      'default' => true
    ],
    [
      'icon' => '#ffdca3',
      'background' => "url(http://yueduyun.oss-cn-hangzhou.aliyuncs.com/h5/reader_bg_parchment_paper.jpg) center / 100% 100% fixed",
      'color' => "#4c3831"
    ]
  ];
$options = [
    [
      'name' => '上一章',
      'className' => 'prev',
      'icon' => 'data:image/png;base64,[encoded data, 5428 characters]'
    ],
    [
      'name' => '目录',
      'className' => 'catalog',
      'icon' => 'data:image/png;base64,[encoded data, 5184 characters]'
    ],
    [
      'horizontal' => [
        'name' => '左右翻页',
        'className' => 'horizontal',
        'icon' => 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkNDMDk5RDk1RDFEQzExRTc4MDI0OTg1RDJCRjk3QjlFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkNDMDk5RDk2RDFEQzExRTc4MDI0OTg1RDJCRjk3QjlFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Q0MwOTlEOTNEMURDMTFFNzgwMjQ5ODVEMkJGOTdCOUUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Q0MwOTlEOTREMURDMTFFNzgwMjQ5ODVEMkJGOTdCOUUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6MDzYHAAACMUlEQVR42uyZTShEURTH3wyJKRIpNvayITUN+SiSYsFGUjbKTlmKhaIkFlJk5WMpWfgoLAhFyN5OioVISGKSr/E/nFen16NnvDfu1Zz6NffeZl6/uXPemXvv80UiEeO7WFxap5dE8CyGfYbDaKivNtwMv8P35Vr63SDF+INwKhy09AfAHWj6yWzHUnjWZiyRx/dBaqyEfQuLa07fK5O9CwyK/g3IA5eqzLA1hkAWOOR+BjgC6X8h7DQnr0AhMH+iNLD1i0nwdIbNeAG1YqYLQHOshKkSLIN7zteIJW+/ildQJfqTIMEm/6PhgZ2CVmHKyQNQBwJRfHG62ca5nQyKXJrQADsdsOOHcDHodOHio6Ld6EE2kGMxCfeJwRq+6SRO40S0q2xu5GiR1+ol4TIxsPaLGXgS7XwXZ3ZTtMv9nHNuR5JHRSLZ05qpYh2OC8eF48Jx4X8iPG2zMVVauBWcgjleuCspnAM6wK1lVXbNi3jlhC/AGMgElbxFMnfPK7z1VzIl3njvRjPebzlcUbpK0H6uB5Tyl9CmrO2ytFZ1mE5/RnT74xjWTfhctA91EJbXetZBOFu0d3QQbhPtedWF07gmm/V5V3XhGXGtdpZWVphSoY7bZ2BK5bJGj4gmRL/C+DzN9FT4McrP0opNHm3RufCxx/8bj35LCap0+MEWsCH6vYb9gxs3Qjpt00MZOm7d02RLV+LnhcuQBrLkuG/edPQYKwRWQVghyTA7hdjReBdgAGGxcDtAOGy0AAAAAElFTkSuQmCC'
      ],
      'vertical' => [
        'name' => '上下翻页',
        'className' => 'vertical',
        'icon' => 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkNDMDk5RDk1RDFEQzExRTc4MDI0OTg1RDJCRjk3QjlFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkNDMDk5RDk2RDFEQzExRTc4MDI0OTg1RDJCRjk3QjlFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Q0MwOTlEOTNEMURDMTFFNzgwMjQ5ODVEMkJGOTdCOUUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Q0MwOTlEOTREMURDMTFFNzgwMjQ5ODVEMkJGOTdCOUUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6MDzYHAAACMUlEQVR42uyZTShEURTH3wyJKRIpNvayITUN+SiSYsFGUjbKTlmKhaIkFlJk5WMpWfgoLAhFyN5OioVISGKSr/E/nFen16NnvDfu1Zz6NffeZl6/uXPemXvv80UiEeO7WFxap5dE8CyGfYbDaKivNtwMv8P35Vr63SDF+INwKhy09AfAHWj6yWzHUnjWZiyRx/dBaqyEfQuLa07fK5O9CwyK/g3IA5eqzLA1hkAWOOR+BjgC6X8h7DQnr0AhMH+iNLD1i0nwdIbNeAG1YqYLQHOshKkSLIN7zteIJW+/ildQJfqTIMEm/6PhgZ2CVmHKyQNQBwJRfHG62ca5nQyKXJrQADsdsOOHcDHodOHio6Ld6EE2kGMxCfeJwRq+6SRO40S0q2xu5GiR1+ol4TIxsPaLGXgS7XwXZ3ZTtMv9nHNuR5JHRSLZ05qpYh2OC8eF48Jx4X8iPG2zMVVauBWcgjleuCspnAM6wK1lVXbNi3jlhC/AGMgElbxFMnfPK7z1VzIl3njvRjPebzlcUbpK0H6uB5Tyl9CmrO2ytFZ1mE5/RnT74xjWTfhctA91EJbXetZBOFu0d3QQbhPtedWF07gmm/V5V3XhGXGtdpZWVphSoY7bZ2BK5bJGj4gmRL/C+DzN9FT4McrP0opNHm3RufCxx/8bj35LCap0+MEWsCH6vYb9gxs3Qjpt00MZOm7d02RLV+LnhcuQBrLkuG/edPQYKwRWQVghyTA7hdjReBdgAGGxcDtAOGy0AAAAAElFTkSuQmCC'
      ]
    ],
    [
      'night' => [
        'name' => '夜间',
        'className' => 'night',
        'icon' => 'data:image/png;base64,[encoded data, 6488 characters]'

      ],
      'sun' => [
        'name' => '日间',
        'className' => 'sun',
        'icon' => 'data:image/png;base64,[encoded data, 5924 characters]'
      ]
    ],
    [
      'name' => '下一章',
      'className' => 'next',
      'icon' => 'data:image/png;base64,[encoded data, 5428 characters]'
    ]
  ];

  $night = [
    "color" => "#999",
    "background" => "#222"
  ];
  function firstItem($i)
  {
    if(array_key_exists ('name', $i)){
      return $i;
    }else{
      return reset($i);
    }
  };
@endphp

<div class="reader-text reader-text--vertical">
    <div class="reader-text__wrap">
        <p class="reader-text__name">{{$content['chapter_name']}}</p>
        @php
            $content_arr = preg_split( "/\s*\n\s*/" , trim($content['chapter_content']));
        @endphp
        @foreach($content_arr as $paragraph)
            <p class="reader-text__paragraph">{{$paragraph}}</p>
        @endforeach
    </div>
    <div class="reader-text__info">
        <div class="info__title">{{$content['chapter_name']}}</div>
        <div class="info__page">1/5</div>
    </div>
    <p class="reader-text__footer">
        <span class="reader-text__prev reader-text__button">上一章</span>
        <span class="reader-text__catalog reader-text__button">目录</span>
        <span class="reader-text__next reader-text__button">下一章</span>
    </p>
</div>
<div class="reader-menu">
    <div class="reader-menu__head">
        <div class="reader-menu__back">
            <img src="data:image/png;base64,[encoded data, 5336 characters]">
        </div>
        <div class="reader-menu__more">
            <img src="data:image/png;base64,[encoded data, 4972 characters]">
        </div>
        {{--<div class="reader-menu__add">
            <img src="data:image/png;base64,[encoded data, 5352 characters]">
        </div>--}}
        <div class="reader-menu__nav">
            @foreach($navs as $nav)
                <div class="nav__item" data-href="{{$nav['href']}}">
                    <img class="nav__icon" src="{{$nav['icon']}}">
                    <span class="nav__text">{{$nav['name']}}</span>
                </div>
            @endforeach
        </div>
    </div>
    <div class="reader-menu__foot">
        <div class="reader-menu__font reader-menu__box">
            <div class="reader-menu__title">字号</div>
            <div class="reader-menu__box font-box">
                <div class="font__btn" data-type="-">A-</div>
                <div class="font__size">19</div>
                <div class="font__btn" data-type="+">A+</div>
                <div class="font__default" data-type="d">默认</div>
            </div>
        </div>
        <div class="reader-menu__bg reader-menu__box">
            <div class="reader-menu__title ">背景</div>
            <div class="reader-menu__box bg__box">
                @foreach($bg as $item)
                    <div class="bg__item">
                        <i class="bg__icon" style="background: {{$item['icon']}}"></i>
                        <img class="bg__icon--check {{array_key_exists('default', $item) ? 'is-active' : '' }}"
                             src="data:image/png;base64,[encoded data, 5148 characters]">
                    </div>
                @endforeach
            </div>
        </div>
        <div class="reader-menu__option reader-menu__box">
            @foreach($options as $item)
                <div class="option__item reader-menu__box option__item-{{$loop->index}}">
                    <img class="option__icon" src="{{firstItem($item)['icon']}}">
                    <span class="option__name">{{firstItem($item)['name']}}</span>
                </div>
            @endforeach
        </div>
    </div>
</div>
<div class="reader-guide reader-guide-1">
    <div class="l reader-guide-1-1"></div>
    <div class="l reader-guide-1-2"></div>
    <div class="l reader-guide-1-3"></div>
    <div class="l reader-guide-1-4"><img src="https://cdn-novel.iycdm.com/static/img/uppage.png">
    </div>
    <div class="l reader-guide-1-5"><img
                src="https://cdn-novel.iycdm.com/static/img/readermiddel.png"></div>
    <div class="l reader-guide-1-6"><img src="https://cdn-novel.iycdm.com/static/img/downpage.png">
    </div>
    <div class="l reader-guide-1-7"></div>
    <div class="l reader-guide-1-8"></div>
    <div class="l reader-guide-1-9"></div>
</div>
<div class="reader-guide reader-guide-2">
    <img src="https://cdn-novel.iycdm.com/static/img/readremind.png">
</div>
<script>
    var _hmt = _hmt || [];
    (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?a46c07c34b53ce1eee93fe78ec49c113";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>

</body>

<script>
    function sin(pos, cycle, width) {
        return Math.sin(pos / width * Math.PI / 2) * cycle
    }

    function edge(offsetX, min, max, width) {
        if (offsetX > min) {
            //极限处理，第一页再往右划
            var start = prevTranslate > 0 ? prevTranslate : 0
            var cycle = (width * times) - (start - min)
            return sin(offsetX, cycle, width) + start;
        }
        if (Math.abs(offsetX) > max) {
            //极限处理，最后一页再往左滑
            var start = Math.abs(prevTranslate) > max ? Math.abs(prevTranslate) : max
            var cycle = (width * times) - (start - max)
            return -(sin(Math.abs(offsetX) - start, cycle, width) + start);
        }
        return offsetX
    }

    function setFont(type) {
        switch (type) {
            case '-':
                --readerStatus.fontsize
                break;
            case '+':
                ++readerStatus.fontsize
                break;
            case 'd':
                readerStatus.fontsize = 19
                break;
        }
    }

    function anotherMode(type) {
        return type === 'vertical' ? 'horizontal' : 'vertical'
    }

    function readerGuide() {
        if (getCookie('readerGuide')) return
        var guide1 = document.querySelector('.reader-guide-1')
        var guide2 = document.querySelector('.reader-guide-2')
        // step 2
        addEvent(guide1, 'tap', function () {
            guide1.style.opacity = 0
            guide2.style.display = 'block'
            getComputedStyle(guide2, null).display
            guide2.style.opacity = 1
        })
        // step 3
        addEvent(guide2, 'tap', function () {
            setCookie('readerGuide', true)
            guide2.style.opacity = 0
            setTimeout(function () {
                guide1.parentNode.removeChild(guide1)
                guide2.parentNode.removeChild(guide2)
            }, 300)
        })
        // step 1
        guide1.style.display = 'block'
        getComputedStyle(guide1, null).display
        guide1.style.opacity = 1
    }

    function init() {
        readerStatus.width = Math.min(screen.width,document.body.offsetWidth)
        readerStatus.height = screen.height
        readerStatus.scrollWidth = DOM_wrap.scrollWidth
        readerStatus.max = readerStatus.scrollWidth - readerStatus.width
        readerStatus.translate = 0
        readerStatus.currentPage = 1
        readerStatus.totalPage = readerStatus.scrollWidth / readerStatus.width
    }

    var modeOptions = @json($options[2]),
            bgOptions =  @json($bg),
            nightOptions = @json($options[3]),
            nightStyle = @json($night),
            DOM_bg = document.querySelectorAll('.bg__icon--check'),
            DOM_reader = document.querySelector('.reader-text'),
            DOM_wrap = document.querySelector('.reader-text__wrap'),
            DOM_page = document.querySelector('.info__page'),
            DOM_font = document.querySelector('.font__size'),
            DOM_mode = document.querySelector('.option__item-2'),
            DOM_night = document.querySelector('.option__item-3'),
            DOM_menu = document.querySelector('.reader-menu'),
            DOM_nav = document.querySelector('.reader-menu__more'),
            DOM_navList = document.querySelector('.reader-menu__nav'),
            times = 1 / 5, //滑动边界倍数
            tapTimes = 1 / 4, //点击边界倍数
            prevTranslate = 0,
            readerStatus = (function () {
                var translate = 0,
                        totalPage = 1,
                        currentPage = 1,
                        menu = false,
                        nav = false,
                        fontsize = 19,
                        mode = 'vertical',
                        bg = 3,
                        transition = true,
                        night = false
                return {
                    get bg() {
                        return bg
                    },
                    set bg(index) {
                        setCookie('readerStatusBg', index)
                        removeClass(DOM_bg[bg], 'is-active')
                        addClass(DOM_bg[index], 'is-active')
                        DOM_reader.style.background = bgOptions[index].background
                        DOM_reader.style.color = bgOptions[index].color
                        return bg = index
                    },
                    get translate() {
                        return translate
                    },
                    set translate(value) {
                        DOM_wrap.style.transform = DOM_wrap.style.webkitTransform = 'translate3d(' + value + 'px, 0px, 0px)';
                        return translate = value
                    },
                    get transition() {
                        return transition
                    },
                    set transition(value) {
                        if (value) {
                            DOM_wrap.style.transition = DOM_wrap.style.webkitTransition = ''
                        } else {
                            DOM_wrap.style.transition = DOM_wrap.style.webkitTransition = 'none'
                        }
                        return value
                    },
                    get totalPage() {
                        return totalPage
                    },
                    set totalPage(value) {
                        DOM_page.innerHTML = readerStatus.currentPage + '/' + value
                        return totalPage = value
                    },
                    get currentPage() {
                        return currentPage
                    },
                    set currentPage(value) {
                        if (value === 0) {
                            console.log('prev')
                            var prev_cid = {{$content['prev_cid']}}
                            if (parseInt(prev_cid) !== 0) {
                                next_url = '/reader?bid=' + "{{$content['bid']}}" + '&cid=' + "{{$content['prev_cid']}}"
                                console.log(next_url)
                                location.href = next_url
                                value++
                            }

                        } else if (value > readerStatus.totalPage) {
                            console.log('next-page')
                            next_url = '/reader?bid=' + "{{$content['bid']}}" + '&cid=' + "{{$content['next_cid']}}"
                            console.log(next_url)
                            location.href = next_url
                            value--
                        }
                        readerStatus.translate = -(value - 1) * readerStatus.width
                        DOM_page.innerHTML = value + '/' + totalPage
                        return currentPage = value
                    },
                    get fontsize() {
                        return fontsize
                    },
                    set fontsize(value) {
                        if (value < 12 || value > 36) return false
                        DOM_reader.style.fontSize = value + 'px'
                        DOM_font.innerHTML = value
                        init()
                        setCookie('readerStatusFontsize', value)
                        return fontsize = value
                    },
                    get mode() {
                        return mode
                    },
                    set mode(type) {
                        removeClass(DOM_reader, 'reader-text--' + anotherMode(type))
                        addClass(DOM_reader, 'reader-text--' + type)
                        setCookie('readerStatusMode', type)
                        readerGuide()
                        init()
                        DOM_mode.innerHTML = '<img class="option__icon" src="' + modeOptions[anotherMode(type)].icon + '"> <span class="option__name">' + modeOptions[anotherMode(type)].name + '</span>'
                        if (type === 'vertical') {
                            readerStatus.transition = false
                        }
                        return mode = type
                    },
                    get menu() {
                        return menu
                    },
                    set menu(value) {
                        if (!value) {
                            DOM_menu.style.display = ''
                        } else {
                            DOM_menu.style.display = 'block'
                        }
                        return menu = value
                    },
                    get nav() {
                        return nav
                    },
                    set nav(value) {
                        if (!value) {
                            DOM_navList.style.display = ''
                        } else {
                            DOM_navList.style.display = 'block'
                        }
                        return nav = value
                    },
                    get night() {
                        return night
                    },
                    set night(value) {
                        if (value) {
                            DOM_reader.style.background = nightStyle.background
                            DOM_reader.style.color = nightStyle.color
                            DOM_night.innerHTML = '<img class="option__icon" src="' + nightOptions.sun.icon + '"> <span class="option__name">' + nightOptions.sun.name + '</span>'
                        } else {
                            DOM_reader.style.background = bgOptions[readerStatus.bg].background
                            DOM_reader.style.color = bgOptions[readerStatus.bg].color
                            DOM_night.innerHTML = '<img class="option__icon" src="' + nightOptions.night.icon + '"> <span class="option__name">' + nightOptions.night.name + '</span>'
                        }
                        setCookie('readerStatusNight', value)
                        return night = value
                    },
                    width: screen.width,
                    height: screen.height,
                    scrollWidth: DOM_wrap.scrollWidth,
                    max: this.scrollWidth - this.width,
                    min: 0
                }
            })()


    addEvent(DOM_reader, 'panstart', function (e) {
        if (readerStatus.mode === 'vertical') return
        readerStatus.transition = false
        prevTranslate = readerStatus.translate
    })

    addEvent(DOM_reader, 'pan', function (e) {
        if (readerStatus.mode === 'vertical') return
        if (readerStatus.menu) readerStatus.menu = false
        readerStatus.translate = edge(prevTranslate + e.detail.deltaX, readerStatus.min, readerStatus.max, readerStatus.width)
    })

    addEvent(DOM_reader, 'panend', function (e) {
        if (readerStatus.mode === 'vertical') return
        readerStatus.transition = true
        if (e.detail.fast) {
            if (e.detail.directionX === 'left') readerStatus.currentPage++
            if (e.detail.directionX === 'right') readerStatus.currentPage--
        } else {
            if (e.detail.deltaX > readerStatus.width * times) readerStatus.currentPage--;
            else if (e.detail.deltaX < -readerStatus.width * times) readerStatus.currentPage++;
            else readerStatus.currentPage = readerStatus.currentPage
        }
    })

    addEvent(DOM_reader, 'tap', function (e) {
        var x1 = readerStatus.width * tapTimes; //x轴左界限
        var x2 = readerStatus.width - x1; //x轴右界限
        var y1 = readerStatus.height * tapTimes; //y轴上界限
        var y2 = readerStatus.height - y1; //y轴下界限
        var x = e.detail.x; //手指X坐标
        var y = e.detail.y; //手指y坐标

        if (readerStatus.menu) {
            readerStatus.menu = false
            readerStatus.nav = false
        } else if (x > x1 && x < x2 && y > y1 && y < y2) {
            //中心区
            readerStatus.menu = true
        } else if (readerStatus.mode === 'horizontal') {
            if (x < x1 || (x < x2 && y < y1)) {
                //左边或者左上
                readerStatus.currentPage--
            }
            if (x > x2 || (x > x1 && y > y2)) {
                //右边或者右上
                readerStatus.currentPage++
            }
        }
    })

    addEvent(DOM_nav, 'tap', function (e) {
        readerStatus.nav = !readerStatus.nav
    })

    addEvent('.nav__item', 'tap', function (e) {
        console.log(e.currentTarget.dataset.href)
        location.href = e.currentTarget.dataset.href;
        console.log(1111111111)
    })
    //
    addEvent('.reader-menu__back', 'tap', function (e) {
        hostory.back()
    })
    addEvent('.option__item-0', 'tap', function (e) {
        var prev_cid ={{$content['prev_cid']}}
        if (parseInt(prev_cid) !== 0) {
            var prev_url = '/reader?bid=' + "{{$content['bid']}}" + '&cid=' + "{{$content['prev_cid']}}"
            location.href=prev_url
        }
    })

    addEvent('.option__item-1', 'tap', function (e) {
        var catalog = '/catalog?bid=' + "{{$content['bid']}}"
        location.href = catalog
    })

    addEvent('.option__item-4', 'tap', function (e) {
        var next_url = '/reader?bid=' + "{{$content['bid']}}" + '&cid=' + "{{$content['next_cid']}}"
        console.log(next_url)
        location.href = next_url
    })

    addEvent('.reader-text__next', 'tap', function (e) {
        var next_url = '/reader?bid=' + "{{$content['bid']}}" + '&cid=' + "{{$content['next_cid']}}"
        console.log(next_url)
        location.href = next_url
    })

    addEvent('.reader-text__prev', 'tap', function (e) {
        var prev_cid ={{$content['prev_cid']}}
            console.log(prev_cid)
        if (parseInt(prev_cid) !== 0) {
            var prev_url = '/reader?bid=' + "{{$content['bid']}}" + '&cid=' + "{{$content['prev_cid']}}"
            console.log(prev_url)
            location.href=prev_url
        }
    })

    addEvent('.reader-text__catalog', 'tap', function (e) {
        var catalog = '/catalog?bid=' + "{{$content['bid']}}"
        location.href = catalog
    })
    //
    addEvent(DOM_night, 'tap', function (e) {
        readerStatus.night = !readerStatus.night
    })

    addEvent('.font__btn', 'tap', function (e) {
        setFont(e.currentTarget.dataset.type)
    })

    addEvent('.font__default', 'tap', function (e) {
        setFont(e.currentTarget.dataset.type)
    })

    addEvent(DOM_mode, 'tap', function (e) {
        readerStatus.mode = anotherMode(readerStatus.mode)
        readerStatus.menu = false
    })

    addEvent('.bg__item', 'tap', function (e, i) {
        readerStatus.bg = i
        readerStatus.night = false
    })

    addEvent(window, 'scroll', function () {
        if (readerStatus.menu) readerStatus.menu = false
    })

    addEvent(window, 'DOMContentLoaded', function () {
        readerStatus.mode = getCookie('readerStatusMode') || 'vertical'
        readerStatus.fontsize = getCookie('readerStatusFontsize') || 19
        readerStatus.bg = getCookie('readerStatusBg') || 3
        readerStatus.night = getCookie('readerStatusNight') || false
    })
</script>
</html>