<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>reader</title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=1.5, user-scalable=yes" />
    <!-- <meta name="apple-mobile-web-app-capable" content="yes"> -->
    <script type="text/javascript" src="{{ url_for('static', filename='jquery.min.js') }}"></script>
    <link rel="stylesheet" href="{{ url_for('static', filename='bootstrap.min.css') }}">
    <script type="text/javascript" src="{{ url_for('static', filename='bootstrap.min.js') }}"></script>
    <script type="text/javascript">
    	"use strict";

    var isMobile = false;

    var staticPath = '/reader/';
    var ncxItemMaxLength = 25;

    var tocMenuDisplayed = false;
    var htmlList = [];
    var ncxList = [];
    var curPage = -1;
    var htmlHead = '';
    var iframeSrcHtml = 'init';
    document.onreadystatechange = function () {
        function getArgs() {
            var args = {};
            var query = location.search.substring(1);
            var pairs = query.split("&");
            for (var i = 0; i < pairs.length; i++) {
                var pos = pairs[i].indexOf('=');
                if (pos == -1) {
                    continue;
                }
                var argname = pairs[i].substring(0, pos).toLowerCase();
                var value = pairs[i].substring(pos + 1);
                value = decodeURIComponent(value);
                args[argname] = value;
            }
            return args;
        }

        function keydown(evt) {
            evt = (evt) ? evt : ((window.event) ? window.event : "");
            if (evt !== "") {
                var keyCode = evt.keyCode ? evt.keyCode : (evt.which ? evt.which : evt.charCode);
                if (keyCode == 37) {
                    // LEFT
                    displayPage(curPage - 1);
                } else if (keyCode == 39) {
                    // RIGHT
                    displayPage(curPage + 1);
                }
            }
        }

        function fixHeight() {
            if (iframeSrcHtml != getiFrameHTMLFileName()) {
                iframeSrcHtml = getiFrameHTMLFileName();
                $("#contentdiv").css("height", (window.frames["htmlcontent"].document.body.scrollHeight + 60 + 40 * 2).toString() + "px");
            }

        }
        function getiFrameHTMLFileName() {
            var urlpage = $('#htmlcontent').attr("src");
            urlpage = urlpage.substring(urlpage.lastIndexOf('/') + 1);
            if (urlpage.indexOf('?') > 0) {
                urlpage = urlpage.substring(0, urlpage.indexOf('?'));
            } else if (urlpage.indexOf('#') > 0) { urlpage = urlpage.substring(0, urlpage.indexOf('#')); }
            return urlpage;
        }
        function adjustAttr() {
            var tDocument = window.frames["htmlcontent"].document;

            var tHtmlName = tDocument.location.pathname;
            tHtmlName = tHtmlName.substring(tHtmlName.lastIndexOf('/') + 1);



            for (var i = 0; i < htmlList.length; i++) {
                if (tHtmlName == htmlList[i]) {
                    curPage = i;
                    break;
                }
            }

            if (isMobile) {
                // 移动端自适应
                $("img", tDocument).attr("style", "max-width:100%");
            } else {
                $("img", tDocument).attr("width", "");
            }

            $("img", tDocument).attr("height", "");
            document.onkeydown = keydown;
            tDocument.onkeydown = keydown;

            if (curPage === 0) {
                $("#prev").addClass("disabled");
            } else {
                $("#prev").removeClass("disabled");
            }
            if (curPage === (htmlList.length - 1)) {
                $("#next").addClass("disabled");
            } else {
                $("#next").removeClass("disabled");
            }


            fixHeight();
        }

        function displayPage(index) {
            if ((index >= 0) && (index < htmlList.length)) {
                curPage = index;

                //$('#contentdiv').css("height", "0px");

                $('#htmlcontent').attr("src", htmlHead + htmlList[index]);

                $('#htmlcontent').on("load", function () {
                    adjustAttr();

                    window.scrollTo(0, 0);
                })

                if (tocMenuDisplayed) {
                    $("#tocmenu").hide();
                    tocMenuDisplayed = false;
                }
            }
        }

        function displayNcx(index) {
            if ((index >= 0) && (index < ncxList.length)) {
                $('#htmlcontent').attr("src", htmlHead + ncxList[index][1]);
                $('#htmlcontent').on("load", function () {
                    adjustAttr();
                })
                if (tocMenuDisplayed) {
                    $("#tocmenu").hide();
                    tocMenuDisplayed = false;
                }
            }
        }

        if (document.readyState == "complete") {
            var tArgs = getArgs();
            var tBookName = tArgs['book'] || "";
            var tChs = tArgs['chs'] || "";
            var tPageStr1 = 'Page ', tPageStr2 = '';

            if (tChs) {
                $("#toc").text('目录');
                $("#prev").text('上一页');
                $("#first").text('首页');
                $("#next").text('下一页');
                $("#buy").text('购买');
                tPageStr1 = '第';
                tPageStr2 = '页';

                ncxItemMaxLength = 15;
            }

            var buyurl = $("#buyurl").text();

            if (buyurl) {
                $(".xtoolbar2").show();
            } else {
                $(".xtoolbar2").hide();
                $(".xtoolbar1").attr("style", "width:100%");
            }

            if (tBookName === "") {
                // alert("请输入book路径!");
                return;
            }

            $.get(staticPath + tBookName + '/' + tBookName + ".json", function (data, status) {
                if (status !== 'success') {
                    console.log("error");
                    return;
                }

                if (typeof data === "string") {
                    data = JSON.parse(data);
                }

                if (typeof data !== "object") {
                    return;
                }


                // typeof data === "object"
                htmlList = data['HtmlList'];
                htmlHead = staticPath + tBookName + '/';

                ncxList = data['Ncx'];

                // console.log(typeof(data), htmlList, ncxList);
                if (ncxList.length > 0) {
                    var tTocMenuHtml = '<select style="opacity:0;position:absolute;top:0px;left:1px;z-index:0;-webkit-appearance:none;-moz-appearance:none">';

                    for (var i = 0; i < ncxList.length; i++) {
                        tTocMenuHtml += '<option id="tocitem' + i.toString() + '" value="tocitem' + i.toString() + '">'
                                + ncxList[i][0].substr(0, ncxItemMaxLength) + '</option>';
                    }
                    tTocMenuHtml += '</select>';

                    $("#tocmenu").html(tTocMenuHtml);

                    $('select').change(function () {
                        var id = this.value.substring("tocitem".length);
                        displayNcx(parseInt(id));
                    });

                    $("#tocdiv").show();
                }

                if (htmlList.length > 1) {
                    $("#htmldiv").show();
                }

                if ((htmlList.length > 1) || (ncxList.length > 1)) {
                    $(".xtoolbar1").show();

                    $("select").css("width", $("#toc").css("width"));
                    $("select").css("height", $("#toc").css("height"));
                    $("select").css("line-height", $("#toc").css("height"));
                } else {
                    $(".xtoolbar1").hide();
                }

                displayPage(0);
            });

            $("#prev").click(function (event) {
                displayPage(curPage - 1);
            });
            $("#first").click(function (event) {
                displayPage(0);
            });
            $("#next").click(function (event) {
                displayPage(curPage + 1);
            });

            $("#toc").click(function () {
                $("#tocmenu").toggle();
                tocMenuDisplayed = !tocMenuDisplayed;
            });

            $("#buy").click(function () {
                if (buyurl) {
                    window.open(buyurl);
                }
            });

            window.onresize = function () {
                fixHeight();
            };
        }
    };
    </script>
    <style type="text/css">
    .xtoolbar0 {
        position: fixed;
        text-align: center;
        width: 100%;
    }
     .xtoolbar1 {
        position: fixed;
        text-align: center;
        width: 90%;
    }
     .xtoolbar2 {
        float: right;
        text-align: center;
        width: 10%;
    }

    .xbtn {
        margin: 0 2px;
        max-width: 100px;
        height: 36px;
        border-radius: 2px;
    }

    @media screen and (max-width: 768px){
        #contentdiv {
            padding: 40px 10px;
        }
    }
    @media screen and (min-width: 769px){
        #contentdiv {
            padding: 40px 20px;
        }
    }
    </style>
</head>

<body>
    <div class="container-fluid">
        <div class="row">
            <div class="xtoolbar0">
                <div class="xtoolbar1" style="display:none">
                    <div id="tocdiv" style="display:none">
                        <button id="toc" type="button" class="btn btn-primary xbtn" style="float:left;z-index:999">TOC</button>
                        <div id="tocmenu"></div>
                    </div>
                    <div id="htmldiv" style="display:none">
                        <button id="prev" type="button" class="btn btn-primary xbtn">PREV</button>
                        <button id="first" type="button" class="btn btn-primary xbtn">HOME</button>
                        <button id="next" type="button" class="btn btn-primary xbtn">NEXT</button>
                    </div>
                </div>
                <div class="xtoolbar2" style="display:none">
                    <button id="buy" type="button" class="btn btn-danger xbtn">BUY</button>
                    <div id="buyurl" style="display:none">{{ buyurl }}</div>
                </div>
            </div>
        </div>
        <div class="row" id="contentdiv">
            <iframe id="htmlcontent" name="htmlcontent" frameborder="0" scrolling="no" style="border:none;width:100%;" />
        </div>
    </div>
</body>

</html>
