extends ../layouts/basic

block extra_head
    title Examples - Apache ECharts
    script.
        var chartId = location.hash.slice(1);
        window.location ='./examples/editor.html?c=' + chartId;
    link(rel="stylesheet", href="#{cdnThirdParty.perfectScrollbarCSS}")

block content
    nav(class='navbar navbar-default navbar-fixed-top')
        include ../components/nav

    #left-chart-nav
        ul

    #nav-mask
    #nav-layer
        ul.chart-list

    #chart-demo

block extra_js
    script(type='text/javascript', src='#{cdnThirdParty.lodash}')

    script(type='text/javascript', src='#{cdnThirdParty.perfectScrollbarJS}')

    script(type='text/javascript').
        var GALLERY_PATH = '#{galleryPath}';
        var GALLERY_EDITOR_PATH = GALLERY_PATH + 'editor.html?c=';
        var GALLERY_VIEW_PATH = GALLERY_PATH + 'view.html?c=';
        var GALLERY_THUMB_PATH = GALLERY_PATH + 'data/thumb/';

    script(type='text/javascript', src="#{getAssetUrl(cdnPayRoot, ecWWWLang + '/js/config.js')}")
    script(type='text/javascript', src="#{getAssetUrl(cdnPayRoot, ecWWWLang + '/js/examples-nav.js')}")

    script(type='text/javascript').
        document.getElementById('nav-examples').className = 'active';
        function encodeHTML(source) {
            return String(source)
                .replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/"/g, '&quot;')
                .replace(/'/g, '&#39;');
        }
        function loadDemo() {
            var chartId = location.hash.slice(1);
            $('#chart-demo').html('<iframe src="' + GALLERY_EDITOR_PATH + encodeHTML(chartId) + '"></iframe>');
        }

        $(window).on('hashchange', function () {
            loadDemo();
        });
        loadDemo();