function get_window_width() {
    return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
}
function get_window_height() {
    return window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
}
var serialiseObject = function(obj) {
    var pairs = [];
    for (var prop in obj) {
        if (!obj.hasOwnProperty(prop)) {
            continue;
        }
        if (Object.prototype.toString.call(obj[prop]) == '[object Object]') {
            pairs.push(serialiseObject(obj[prop]));
            continue;
        }
        pairs.push(prop + '=' + obj[prop]);
    }
    return pairs.join('&');
}
function Ajax(obj){
    if(typeof obj.processData == "undefined") obj.processData = true;
    var request = new XMLHttpRequest();
    request.onreadystatechange = function(){
        if(request.readyState == 1){
            if(obj.contentType != false)
            if(typeof obj.contentType == "undefined"){
                request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            }else{
                if(obj.contentType)request.setRequestHeader('Content-Type', obj.contentType);
            }
        }
        if(request.readyState == 4){
            if(request.status == 200){
                try {
                    if(obj.success){
                        var resp;
                        switch(obj.dataType){
                            case "json":
                                resp = JSON.parse(request.response);
                            break;
                            default:
                                resp = request.response;
                            break;
                        }
                        obj.success(resp);
                    }
                } catch (e){
                    console.error("1MD::AJAX ERROR OCCURED!",e);
                    if(obj.fail)obj.fail(e);
                }
            }else if(obj.fail)obj.fail();
        }
    };
    if(obj.progress){
        request.upload.addEventListener('progress', obj.progress, false);
    }

    request.open(obj.type, obj.url);
    if(obj.processData){
        obj.data = serialiseObject(obj.data);
    }
    request.send(obj.data);
}
function clone(obj) {
    if (obj === null || typeof(obj) !== 'object' || 'isActiveClone' in obj)
        return obj;
    if (obj instanceof Date)
        var temp = new obj.constructor();
        else
        var temp = obj.constructor();
    for (var key in obj) {
        if (Object.prototype.hasOwnProperty.call(obj, key)) {
            obj['isActiveClone'] = null;
            temp[key] = clone(obj[key]);
            delete obj['isActiveClone'];
        }
    }
    return temp;
}
function isMobile() {
    return /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4));
}
function addClass(el,className){
    if (el.classList)
      el.classList.add(className);
    else
      el.className += ' ' + className;
}
function removeClass(el,className){
    if (el.classList)
      el.classList.remove(className);
    else
      el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
}
function toggleClass(el,className) {
    if (el.classList) {
      el.classList.toggle(className);
    } else {
      var classes = el.className.split(' ');
      var existingIndex = classes.indexOf(className);

      if (existingIndex >= 0)
        classes.splice(existingIndex, 1);
      else
        classes.push(className);

      el.className = classes.join(' ');
    }
}
function hasClass(el,className) {
    return new RegExp('(\\s|^)'+className+'(\\s|$)').test(el.className);
}
function getScrollTop() {
    return window.scrollY || document.documentElement.scrollTop;
}
function scrollShouldAjaxLoad(el, offset, preset) {
    offset = offset || 100;
    preset = preset || false;
    if(!el) {
        return false;
    }
    try {
        var windowHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
        var r = el.getBoundingClientRect();
        if(el.offsetHeight + r.top - offset < windowHeight) {
            if(preset) {
                if(el.offsetHeight + r.top + preset > windowHeight) {
                    return true;
                }
                return false;
            }
            return true;
        }
        return false;
    } catch(e) {
        return false;
    }
}

var smoothScroll = {
    documentVerticalScrollPosition: function(){
        if(self.pageYOffset) return self.pageYOffset;
        if(document.documentElement && document.documentElement.scrollTop) return document.documentElement.scrollTop;
        if(document.body.scrollTop) return document.body.scrollTop;
        return 0;
    },
    viewportHeight: function(){
        return (document.compatMode === "CSS1Compat") ? document.documentElement.clientHeight : document.body.clientHeight;
    },
    documentHeight: function(){
        return (document.height !== undefined) ? document.height : document.body.offsetHeight;
    },
    documentMaximumScrollPosition: function(){
        return this.documentHeight() - this.viewportHeight();
    },
    elementVerticalClientPosition: function(element){
        var rectangle = element.getBoundingClientRect();
        return rectangle.top;
    },
    verticalTickToPosition: function(currentPosition, targetPosition){
        var filter = 0.2;
        var fps = 60;
        var difference = parseFloat(targetPosition) - parseFloat(currentPosition);
        var arrived = (Math.abs(difference) <= 0.5);
        if(arrived){
            scrollTo(0.0, targetPosition);
            return;
        }
        currentPosition = (parseFloat(currentPosition) * (1.0 - filter)) + (parseFloat(targetPosition) * filter);
        scrollTo(0.0, Math.round(currentPosition));
        var self = this;
        setTimeout(function(){
            self.verticalTickToPosition(currentPosition, targetPosition);
        }, (1000 / fps));
    },
    toElement: function(element, padding){
        if(!element){
            console.warn("Couldn't find target element.");
            return;
        }
        var targetPosition = this.documentVerticalScrollPosition() + this.elementVerticalClientPosition(element) - padding;
        var currentPosition = this.documentVerticalScrollPosition();
        var maximumScrollPosition = this.documentMaximumScrollPosition();
        if(targetPosition > maximumScrollPosition) targetPosition = maximumScrollPosition;
        this.verticalTickToPosition(currentPosition, targetPosition);
    }
};
function Cookie(name, defaultValue, path) {
    this.name = name;
    this.value = null;
    this.path = path || "/";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i];
        while(c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if(c.indexOf(this.name+"=") === 0) {
            this.value = c.substring((this.name+"=").length, c.length);
            break;
        }
    }
    if(this.value === null) this.value = defaultValue;
    this.set_value = function(value, expire) {
        expire = expire || 315360000;
        expire *= 1000;
        var d = new Date();
        d.setTime(d.getTime()+expire);
        var expires = "expires="+d.toUTCString();
        document.cookie = this.name+"="+value+";"+expires+";path="+this.path;
        this.value = value.toString();
        return true;
    };
    this.destroy = function() {
        document.cookie = this.name+'=;expires=Thu, 01 Jan 1970 00:00:01 GMT;';
    }
}

var body = document.getElementsByTagName("body")[0];

var $navbar = {
    active: false,
    navbar: document.getElementById("navbar"),
    bg: document.getElementById("navbar-background"),
    burger: document.getElementById("navbar-hamburger"),
    items: document.getElementById("navbar-items"),
    open: function() {
        this.active = true;
        addClass(this.navbar, "active");
        removeClass(this.bg, "fading-out");
        addClass(this.bg, "fading-in");
    },
    close: function() {
        this.active = false;
        removeClass(this.navbar, "active");
        removeClass(this.bg, "fading-in");
        addClass(this.bg, "fading-out");
        var si = document.querySelectorAll("[data-subitems]");
        for(var i=0; i<si.length; i++) {
            removeClass(si[i], "active");
        }
    },
    toggle: function() {
        if(this.active) {
            this.close();
        } else {
            this.open();
        }
    }
};

$navbar.burger.onclick = function(){
    $navbar.toggle();
};
$navbar.bg.onclick = function(){
    $navbar.close();
}
$navbar.items.onclick = function(e){
    if(e.target == e.currentTarget) $navbar.close();
}

document.addEventListener("scroll", function(){
    docOnScroll()
});
docOnScroll();

function docOnScroll() {
    if(getScrollTop() > 120) {
        addClass(body, "shrink");
    } else {
        removeClass(body, "shrink");
    }
}



const NavbarSearchItem_Product = props => {
    const {
        data: p,
        active,
        highlightIndex,
        onMouseEnter,
    } = props;

    return <a
        className="navSearch__input__results__product navSearch__result"
        href={p.link}
        data-css-active={active}
        data-js-hlindex={highlightIndex}
        onMouseEnter={onMouseEnter}
    >
        <img
            className="navSearch__input__results__product__image"
            src={p.image}
            alt={p.title}
        />
        <div className="navSearch__input__results__product__content">
            <div className="navSearch__input__results__product__content__title">{p.title}</div>
            <div className="navSearch__input__results__product__content__price">{p.price} Kč</div>
        </div>
    </a>
};

const NavbarSearchItem_Generic = props => {
    const {
        data: r,
        active,
        highlightIndex,
        onMouseEnter,
    } = props;
    return <a
        className="navSearch__input__results__row navSearch__result"
        href={r.link}
        data-css-active={active}
        data-js-hlindex={highlightIndex}
        onMouseEnter={onMouseEnter}
    >
        {r.title}
    </a>
};

const NavbarSearchItem_Post = props => {
    const {
        data: p,
        active,
        highlightIndex,
        onMouseEnter,
    } = props;
    return <a
        className="navSearch__input__results__post navSearch__result"
        href={p.link}
        data-css-active={active}
        data-js-hlindex={highlightIndex}
        onMouseEnter={onMouseEnter}
        title={p.title}
    >
        <img
            className="navSearch__input__results__post__image"
            src={p.image}
            alt={p.title}
        />
        <div className="navSearch__input__results__post__title">{p.title}</div>
    </a>
}

class NavbarSearch extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            value: "",
            opened: false,
            nodes: [],
            highlighted: -1,
            preloading: false,
            used: false,
        };
        this.loading = false;
        this.blurTimeout = undefined;
        this.searchTimeout = undefined;
        this.rowTypes = [
            {
                type: "ranking",
                title: __navSearchLang.acZebricky,
                component: NavbarSearchItem_Post,
            },
            {
                type: "review",
                title: __navSearchLang.acRecenze,
                component: NavbarSearchItem_Post,
            },
            {
                type: "blogPost",
                title: __navSearchLang.acClanky,
                component: NavbarSearchItem_Post,
            },
            {
                type: "product",
                title: __navSearchLang.acProdukty,
                component: NavbarSearchItem_Product,
            },
            {
                type: "category",
                title: __navSearchLang.acKategorieProduktu,
                component: NavbarSearchItem_Generic,
            },
            {
                type: "brand",
                title: __navSearchLang.acVyrobci,
                component: NavbarSearchItem_Generic,
            },
        ];

        this._open = this.open.bind(this);
        this._close = this.close.bind(this);
        this._toggleOpen = this.toggleOpen.bind(this);
        this._search = this.search.bind(this);
        this._onChange = this.onChange.bind(this);
        this._onBlur = this.onBlur.bind(this);
        this._onFocus = this.onFocus.bind(this);
        this._onMouseEnter = this.onMouseEnter.bind(this);
        this._onKeyDown = this.onKeyDown.bind(this);
    }
    componentDidUpdate(prevProps, prevState, snapshot) {
        if(!prevState.opened && this.state.opened) {
            const input = this.refs.input;
            input.focus()
            input.select()
        }
    }
    open() {
        this.setState({
            opened: true,
        })
        this.props.onToggle?.(true)
    }
    close() {
        this.setState({
            opened: false,
        })
        this.props.onToggle?.(false)
    }
    toggleOpen() {
        if(this.state.opened) {
            this.close()
        } else {
            this.open()
        }
    }
    async search() {
        if(this.loading) return;
        this.loading = true;
        const nextState = {};
        try {
            const fd = new FormData();
            fd.append("request", "index/search")
            fd.append("query", this.state.value)
            fd.append("all", "1")
            const r = await fetch(`${__httppath}/ajax/`, {
                method: "POST",
                body: fd,
            });
            const e = await r.json();
            if(e.status == "OK") {
                nextState.nodes = e.data.nodes;
                nextState.highlighted = -1;
                nextState.used = true;
            } else {
                console.error(e)
            }
        } catch(err) {
            console.error(err)
        } finally {
            nextState.preloading = false;
            this.setState(nextState)
            this.loading = false;
        }
    }
    onChange(ev) {
        const val = ev.currentTarget.value;
        const isSearchable = val.length >= 3;
        this.setState({
            value: val,
            preloading: isSearchable,
        }, () => {
            if(isSearchable) {
                clearTimeout(this.searchTimeout)
                this.searchTimeout = setTimeout(this._search, 750);
            }
        })
    }
    onBlur() {
        clearTimeout(this.blurTimeout)
        this.blurTimeout = setTimeout(this._close, 300);
    }
    onFocus() {
        clearTimeout(this.blurTimeout)
    }
    onMouseEnter(ev) {
        const hlindex = parseInt(ev.currentTarget.dataset.jsHlindex);
        this.setState({
            highlighted: hlindex,
        })
    }
    onKeyDown(ev) {
        switch(ev.key) {
            case "ArrowDown": {
                ev.preventDefault()
                const nodeCount = this.state.nodes.length;
                let next = this.state.highlighted + 1;
                if(next > nodeCount - 1) next = -1;
                this.setState({
                    highlighted: next,
                })
            }
            break;
            case "ArrowUp": {
                ev.preventDefault()
                const nodeCount = this.state.nodes.length;
                let next = this.state.highlighted - 1;
                if(next < -1) next = nodeCount - 1;
                this.setState({
                    highlighted: next,
                })
            }
            break;
            case "Enter":
                const hl = this.state.highlighted;
                if(hl > -1 && this.state.nodes[hl] !== undefined) {
                    window.location.href = this.state.nodes[hl].link;
                } else {
                    window.location.href = `${__httppath}/hledat/?q=${encodeURIComponent(this.state.value)}`;
                }
            break;
            case "Escape":
                this.refs.input.blur()
            break;
        }
    }
    render() {
        let hlIterator = -1;
        let results;
        const {
            nodes,
            highlighted,
            preloading,
            used,
            opened,
            value,
        } = this.state;

        if(used && opened) {
            const segments = [];
            for(const t of this.rowTypes) {
                const results = nodes.filter(e => e.type == t.type);
                if(results.length == 0) continue;
                segments.push(
                    <div key={t.type}>
                        <div className="navSearch__input__results__header">{t.title}</div>
                        {results.map(r => {
                            hlIterator++;
                            return React.createElement(t.component, {
                                key: r.id,
                                data: r,
                                active: highlighted == hlIterator,
                                highlightIndex: hlIterator,
                                onMouseEnter: this._onMouseEnter,
                            })
                        })}
                    </div>
                )
            }
            results = (
                <div className="navSearch__input__results">
                    <div className="navSearch__input__results__scroll">
                        {segments}
                        <a
                            className="navSearch__input__results__more navSearch__result"
                            href={`${__httppath}/hledat/?q=${encodeURIComponent(value)}`}
                            data-css-active={highlighted == -1}
                            data-js-hlindex={-1}
                            onMouseEnter={this._onMouseEnter}
                        >
                            {nodes.length > 0 ? __navSearchLang.acVsechnyVysledky : __navSearchLang.acZadneVysledky}
                        </a>
                    </div>
                </div>
            );
        }

        return <div className="navSearch">
            <div className="navSearch__input" data-css-opened={opened}>
                <input
                    type="text"
                    className="navSearch__input__field"
                    value={value}
                    onChange={this._onChange}
                    onBlur={this._onBlur}
                    onFocus={this._onFocus}
                    onKeyDown={this._onKeyDown}
                    placeholder={__navSearchLang.searchPlaceholder}
                    aria-label={__navSearchLang.ariaZadejteFrazi}
                    ref="input"
                />
                {preloading &&
                    <div className="navSearch__input__loading">
                        <i className="fas fa-circle-notch fa-spin" />
                    </div>
                }
                {results}
            </div>
            <button
                type="button"
                className="btn navSearch__mg"
                onClick={this._toggleOpen}
            >
                <i className="fas fa-search" />
            </button>
        </div>
    }
}
const onNavbarSearchToggle = opened => {
    if(opened) {
        $navbar.navbar.classList.add("search-active")
    } else {
        $navbar.navbar.classList.remove("search-active")
    }
};
ReactDOM.render(<NavbarSearch onToggle={onNavbarSearchToggle} />, document.getElementById("navbar-search"))



var siTriggers = document.querySelectorAll("[data-subitems-trigger]");
var siCloses = document.querySelectorAll("[data-subitems-close]");
for(var i=0; i<siTriggers.length; i++) {
    (function(i){
        siTriggers[i].addEventListener("click",function(){
            try {
                addClass(document.querySelector("[data-subitems="+siTriggers[i].getAttribute("data-subitems-trigger")+"]"), "active");
            } catch(e) {}
        });
        siCloses[i].addEventListener("click",function(){
            try {
                removeClass(document.querySelector("[data-subitems="+siTriggers[i].getAttribute("data-subitems-trigger")+"]"), "active");
            } catch(e) {}
        })
    })(i);
}
siTriggers.forEach(trigger => {
    if(trigger.hasAttribute("href")) {
        trigger.addEventListener("click", (ev) => {
            if(window.innerWidth < 768) {
                ev.preventDefault()
            }
        })
    }
})

var trackedProducts = document.querySelectorAll("a[data-tr-product]");
for(var i=0; i<trackedProducts.length; i++) {
    (function(i){
        var t = trackedProducts[i];
        t.addEventListener("click",function(){
            if(t.getAttribute("data-tr-from") != "x") {
                gtag("event", "click", {
                    event_category: t.getAttribute("data-tr-from"),
                    event_action: t.getAttribute("data-tr-product"),
                    event_label: t.getAttribute("data-tr-shop")
                })
                //console.log(t.getAttribute("data-tr-product")+"\n"+t.getAttribute("data-tr-shop")+"\n"+t.getAttribute("data-tr-from")+"\n"+"--------");
            }
        });
    })(i);
}

var CookieConfirm = React.createClass({
    getDefaultProps() {
        return {
            lang: {}
        };
    },
    getInitialState() {
        return {
            active: true
        };
    },
    handleAction(type, data) {
        switch(type) {
            case "confirm":
                $SHOWCOOKIECONFIRM.set_value("0");
                this.setState({
                    active: false
                });
            break;
        }
    },
    render() {
        return (
            <section className={"cookie-confirm"+(this.state.active ? " active" : "")}>
                <div dangerouslySetInnerHTML={{__html: this.props.lang.text}} />
                <div>
                    <button type="button" className="btn btn-fancy-green a-little-cuter" onClick={this.handleAction.bind(null, "confirm")}>{this.props.lang.confirm}</button>
                </div>
            </section>
        );
    }
});

var $SHOWCOOKIECONFIRM = new Cookie("_ccf", "1");
if($SHOWCOOKIECONFIRM.value === "1") {
    ReactDOM.render(<CookieConfirm lang={__cookieConfirm.lang} />, document.getElementById("cookie-confirm"));
}
var ArticleGallery = React.createClass({
    getDefaultProps() {
        return {
            /*
                selector všech obrázků, který se mají wrapnout do figure elementu
                nebo zobrazovat v galerii
            */
            imageSelector: "img",

            /*
                selector obrázků, který nebudou wrapnutý do figure elementu,
                pouze se budou zobrazovat v galerii
            */
            imageSelectorGalleryOnly: undefined,
        };
    },
    getInitialState() {
        return {
            open: false,
            active: -1,
            loading: false,
            zoomed: false,
            zoomLevel: 1
        };
    },
    zoomMin: 1,
    zoomMax: 10,
    images: [],
    componentWillMount() {
        const galleryOnlyImages = this.props.imageSelectorGalleryOnly ? Array.from(document.querySelectorAll(this.props.imageSelectorGalleryOnly)) : [];
        const allImages = [];
        for(const img of Array.from(document.querySelectorAll(this.props.imageSelector))) {
            const src = img.getAttribute("data-src");
            if(src === null) continue;
            allImages.push(img)
        }
        for(let i=0; i<allImages.length; i++) {
            const img = allImages[i];
            this.images.push({
                src: img.getAttribute("data-src").replace(/\/(sm|md)-/, "/"),
            })
            if(galleryOnlyImages.includes(img)) {
                if(img.parentNode.tagName.toLowerCase() !== "a") {
                    img.addEventListener("click", () => {
                        this.setState({
                            open: true,
                            active: i,
                        })
                    })
                    img.style.setProperty("cursor", "pointer", "important")
                }
            } else {
                const maxWidth = img.getAttribute("width") || 620;

                const isDirectlyInFigure = img.parentNode.tagName.toLowerCase() === "figure";
                const isDirectlyInAnchor = img.parentNode.tagName.toLowerCase() === "a";
                const isInFigure = isDirectlyInFigure || (isDirectlyInAnchor && img.parentNode.parentNode.tagName.toLowerCase() === "figure");

                // ujištění, že figure existuje
                let figure;
                if(isDirectlyInFigure) {
                    figure = img.parentNode;
                } else if(isInFigure) {
                    figure = img.parentNode.parentNode;
                } else {
                    figure = document.createElement("figure");
                    const elementToAppend = isDirectlyInAnchor ? img.parentNode : img;
                    elementToAppend.parentNode.insertBefore(figure, elementToAppend)
                    figure.appendChild(elementToAppend)
                }
                figure.className = "imageFigure";
                figure.style.setProperty("--js-max-width", `${maxWidth}px`)

                // případné obalení obrázku do odkazu
                const href = img.getAttribute("data-custom-link");
                if(href && !isDirectlyInAnchor) {
                    let isExternal, to;
                    const hasProtocol = href.match(/^(https?:)?\/\//) !== null;
                    if(hasProtocol) {
                        const url = new URL(href);
                        isExternal = !url.hostname.endsWith(__domain);
                        to = href;
                    } else {
                        isExternal = false;
                        to = __httppath + href;
                    }
                    const a = document.createElement("a");
                    a.setAttribute("href", to)
                    if(isExternal) {
                        a.setAttribute("target", "_blank")
                        a.setAttribute("rel", "nofollow noopener")
                    }
                    img.parentNode.insertBefore(a, img)
                    a.appendChild(img)
                }

                // ujištění, že figure je v odstavci (odstavce mají padding)
                if(figure.parentNode.tagName.toLowerCase() !== "p") {
                    const p = document.createElement("p");
                    figure.parentNode.insertBefore(p, figure)
                    p.appendChild(figure)
                }

                const figcaption = figure.querySelector(":scope > figcaption");
                if(figcaption !== null) {
                    figcaption.className = "imageFigure__caption";
                }

                if(img.parentNode.tagName.toLowerCase() !== "a") {
                    img.addEventListener("click", () => {
                        this.setState({
                            open: true,
                            active: i,
                        })
                    })
                }

                // vhození obrázku do wrapperu pro lazy loading
                const cage = document.createElement("div");
                cage.className = "imageFigure__cage";
                cage.style.setProperty("--js-ratio", `${parseFloat(img.getAttribute("data-ratio"))}%`)
                img.parentNode.insertBefore(cage, img)
                cage.appendChild(img)

                // vytvoření loadingu pro lazy loading
                const cover = document.createElement("div");
                cover.className = "imageFigure__cage__cover";
                cage.appendChild(cover)
            }
            img.removeAttribute("data-ratio")
        }
    },
    componentDidMount() {
        let b = new Blazy({
            selector: "[data-article-image]",
            offset: 500,
            success: el => {
                if(el.nextSibling?.classList.contains("imageFigure__cage__cover")) {
                    el.nextSibling.setAttribute("data-js-css-loaded", "true")
                }
            }
        });
    },
    handleAction(type, data) {
        switch(type) {
            case "next":
                var a = this.state.active+1;
                if(a > this.images.length-1) a = 0;
                this.setState({
                    active: a,
                    zoomed: false
                });
            break;
            case "prev":
                var a = this.state.active-1;
                if(a < 0) a = this.images.length-1;
                this.setState({
                    active: a,
                    zoomed: false
                });
            break;
            case "close":
                if(this.state.zoomed) {
                    this.setState({
                        zoomed: false,
                        zoomLevel: 1
                    });
                    removeClass(document.body, "no-scroll");
                } else {
                    this.setState({
                        open: false
                    });
                }
            break;
            case "loaded":
                this.setState({
                    loading: false
                });
            break;
            case "next-or-zoom":
                this.handleAction(get_window_width() < 768 ? "zoom" : "next");
            break;
            case "zoom":
                this.setState({
                    zoomed: true
                });
                addClass(document.body, "no-scroll");
            break;
            case "zoom-add":
                var a = this.state.zoomLevel+1 > this.zoomMax ? this.zoomMax : this.state.zoomLevel+1;
                this.setState({
                    zoomLevel: a
                });
            break;
            case "zoom-sub":
                var a = this.state.zoomLevel-1 < this.zoomMin ? this.zoomMin : this.state.zoomLevel-1;
                this.setState({
                    zoomLevel: a
                });
            break;
        }
    },
    render() {
        if(this.images.length < 1 || this.state.active < 0) return <span />;
        var arrowLeft, arrowRight;
        var class_ = "article-gallery";
        if(this.state.open) class_ += " active";
        if(this.images.length > 1) {
            arrowLeft = (
                <div className="arrow left" onClick={this.handleAction.bind(null, "prev")}>
                    <i className="fas fa-chevron-left" />
                </div>
            );
            arrowRight = (
                <div className="arrow right" onClick={this.handleAction.bind(null, "next")}>
                    <i className="fas fa-chevron-right" />
                </div>
            );
        }
        var loading;
        /*if(this.state.loading) {
            loading = <div className="loading">loading</div>;
        }*/
        var zoomStuff = [];
        if(this.state.zoomed) {
            zoomStuff.push(
                <div key={0} className="zoomed">
                    <img src={this.images[this.state.active].src} style={{width: (500+this.state.zoomLevel*100)+"px"}} alt="Image" />
                </div>
            );
            zoomStuff.push(<div key={3} className="zoom-remote-bg" />);
            zoomStuff.push(<div key={1} className={"remote zoom-add"+(this.state.zoomLevel >= this.zoomMax ? " blocked" : "")} onClick={this.handleAction.bind(null, "zoom-add")} />);
            zoomStuff.push(<div key={2} className={"remote zoom-sub"+(this.state.zoomLevel <= this.zoomMin ? " blocked" : "")} onClick={this.handleAction.bind(null, "zoom-sub")} />);
        }
        return (
            <section className={class_}>
                <div className="background" onClick={this.handleAction.bind(null, "close")} />
                <div className="inner">
                    <img
                        src={this.images[this.state.active].src}
                        onLoad={this.handleAction.bind(null, "loaded")}
                        onClick={this.handleAction.bind(null, "next-or-zoom")}
                        alt="Image"
                    />
                </div>
                {loading}
                {arrowLeft}
                {arrowRight}
                <div className={"remote close"+(this.state.zoomed ? " in-zoom" : "")} onClick={this.handleAction.bind(null, "close")} />
                <div className={"remote zoom"+(this.state.zoomed ? " blocked" : "")} onClick={this.handleAction.bind(null, "zoom")} />
                {zoomStuff}
            </section>
        );
    }
});
function remoteUnwrapper(uw) {
    var content = uw.querySelector(".content");
    var inner = content.querySelector(".inner");
    var isOpened = hasClass(uw, "opened");
    if(!isOpened) {
        content.style.height = "0px";
        setTimeout(function(){
            content.style.height = inner.offsetHeight+"px";
            addClass(uw, "opened");
        }, 50)
    } else {
        content.style.height = inner.offsetHeight+"px";
        setTimeout(function(){
            content.style.height = "0px";
            removeClass(uw, "opened");
        }, 50)
    }
}

function getUnwrappersReady() {
    var unwrappers = document.getElementsByClassName("unwrapper");
    for(var i=0; i<unwrappers.length; i++) {
        (function(i){
            var header = unwrappers[i].querySelector("header");
            if(header) {
                header.addEventListener("click", function(){
                    remoteUnwrapper(unwrappers[i]);
                });
            }
        })(i);
    }
}
getUnwrappersReady()
var CommentAdder = React.createClass({
    getInitialState() {
        return {
            window: 0,
            open: false,
            loading: false,
            respondTo: null,
            securityQuestion: {
                a: null,
                b: null,
                operant: null
            },
            rnType: "none",
        };
    },
    getDefaultProps() {
        return {
            type: "kz",
            parent: 0,
            fund: 0,
            variant: "static"
        };
    },
    parent: 0,
    operants: ["+", "*"],
    operantsDisplay: [" + ", " × "],
    componentWillMount() {
        this.parent = this.props.parent;
        this.setState({
            securityQuestion: this.handleAction("generate-security-question")
        });
    },
    handleAction(type, data) {
        switch(type) {
            case "get-random-int":
                return Math.floor(Math.random() * (data.max - data.min + 1)) + data.min;
            break;
            case "generate-security-question":
                return {
                    a: this.handleAction("get-random-int", {min: 2, max: 10}),
                    b: this.handleAction("get-random-int", {min: 2, max: 10}),
                    operant: this.handleAction("get-random-int", {min: 0, max: this.operants.length-1})
                };
            break;
            case "get-security-result":
                switch(this.operants[this.state.securityQuestion.operant]) {
                    case "+":
                        return this.state.securityQuestion.a + this.state.securityQuestion.b;
                    break;
                    case "*":
                        return this.state.securityQuestion.a * this.state.securityQuestion.b;
                    break;
                }
            break;
            case "validate":
                data.preventDefault();
                var sr = ReactDOM.findDOMNode(this.refs.securityResult);
                if(parseInt(sr.value) != this.handleAction("get-security-result")) {
                    alert(this.props.lang.spatnaOdpoved);
                    this.setState({
                        securityQuestion: this.handleAction("generate-security-question")
                    });
                    sr.value = "";
                    sr.focus();
                } else {
                    this.handleAction("send");
                }
            break;
            case "onRnTypeChange":
                this.setState({
                    rnType: data.currentTarget.value,
                })
            break;
            case "send":
                var self = this;
                if(this.state.loading) return false;
                this.setState({
                    loading: true
                });
                var iName = ReactDOM.findDOMNode(self.refs.name);
                var iText = ReactDOM.findDOMNode(self.refs.comment);
                const iRnEmail = ReactDOM.findDOMNode(self.refs.rnEmail);
                const rnEmail = iRnEmail === null ? "" : iRnEmail.value;
                Ajax({
                    url: "/ajax/",
                    type: "POST",
                    dataType: "json",
                    data: {
                        request: "comment/add",
                        name: encodeURIComponent(iName.value),
                        text: encodeURIComponent(iText.value),
                        rnType: self.state.rnType,
                        rnEmail: encodeURIComponent(rnEmail),
                        recommends: self.refs.recommends ? self.refs.recommends.value : null,
                        rating: self.refs.stars ? self.refs.stars.value : null,
                        type: self.props.type,
                        fund: self.props.fund,
                        parent: self.parent,
                        url: __comment.url,
                        parentTitle: encodeURIComponent(__comment.parentTitle)
                    },
                    success(e){
                        switch(e.status){
                            case "OK":
                                switch(e.data.status) {
                                    case "OK":
                                        var recommends = "", rating = "";
                                        if(self.props.ratable) {
                                            if(e.data.recommends != null) {
                                                recommends = "<div class='recommendation "+(e.data.recommends ? "yes" : "no")+"'>"
                                                        +"<img src='"+__httppath+"/static/images/icons/thumbs-"+(e.data.recommends ? "up" : "down")+".png' alt='Thumbs "+(e.data.recommends ? "up" : "down")+"'>"
                                                        +"<span>"+self.props.lang["recommends"+(e.data.recommends ? 1 : 0)+"_"+self.props.type]+"</span>"
                                                    +"</div>";
                                            }
                                            if(e.data.rating != null) {
                                                rating = "<div class='rating'>"
                                                        +"<span class='label'>"+self.props.lang.hodnoceniCelkem+":</span>"
                                                        +"<div class='star-rating g-a "+(e.data.recommends == null || e.data.recommends ? "green" : "gold")+"'>"
                                                            +"<div class='back'>"
                                                                +"<div class='progress' style='width: "+Math.round(e.data.rating*20)+"%;'></div>"
                                                            +"</div>"
                                                            +"<img src='"+__httppath+"/static/images/icons/star-mask-lightgray.png' class='img-star-mask' alt='Star mask'>"
                                                        +"</div>"
                                                    +"</div>";
                                            }
                                        }
                                        var appendedComment = document.createElement("div");
                                        appendedComment.className = "comment";
                                        appendedComment.innerHTML = "<div class='header'>"
                                                +"<div class='avatar' style='background-image: url("+__httppath+"/static/images/"+(e.data.wa ? "temp/verified-member.png" : "icons/member.svg")+")'></div>"
                                                +"<div class='states'>"
                                                    +"<div class='title-and-date'>"
                                                        +"<div class='title'>"+e.data.name+(e.data.wa ? "<i class='fas fa-check-circle'></i>" : "")+"</div>"
                                                        +"<div class='date'>"+self.props.months["m"+e.data.month]+" "+e.data.day+", "+e.data.year+"</div>"
                                                    +"</div>"
                                                    +recommends
                                                    +rating
                                                +"</div>"
                                            +"</div>"
                                            +"<div class='text'>"+e.data.text+"</div>"
                                            +"<div class='remotes'>"
                                                +"<div class='row'>"
                                                    +"<div class='col-sm-8' data-dynamic-comment-voter='"+e.data.added+"'></div>"
                                                    +"<div class='col-sm-4'>"
                                                        +"<button type='button' class='btn btn-black-rounded' data-dynamic-comment-button='"+e.data.added+"'>"+self.props.lang.odpovedet+"</button>"
                                                    +"</div>"
                                                +"</div>"
                                            +"</div>"
                                            +"<div class='subcomments' data-subcomments='"+e.data.added+"'></div>";

                                        document.querySelector("[data-subcomments='"+self.parent+"']").appendChild(appendedComment);
                                        var v = document.querySelector("[data-dynamic-comment-voter='"+e.data.added+"']");
                                        ReactDOM.render(<CommentRater
                                                            vote={2}
                                                            type={self.props.type}
                                                            comment={e.data.added}
                                                            yes={0}
                                                            no={0}
                                                            lang={self.props.lang}
                                                        />, v);
                                        var t = document.getElementById("total-comment-count");
                                        if(t) t.innerHTML = parseInt(t.innerHTML)+1;
                                        document.querySelector("[data-dynamic-comment-button='"+e.data.added+"']").addEventListener("click", function(){
                                            if(typeof FloatingCommentAdder_ != "undefined") {
                                                FloatingCommentAdder_.handleAction("set-and-open", {
                                                    parent: e.data.added,
                                                    respondTo: e.data.name
                                                });
                                            }
                                        });

                                        iName.value = "";
                                        iText.value = "";
                                        if(iRnEmail !== null) iRnEmail.value = "";
                                        ReactDOM.findDOMNode(self.refs.securityResult).value = "";
                                        if(self.props.ratable) {
                                            self.refs.stars.handleAction("vote", 0);
                                            self.refs.recommends.handleAction("vote", 2);
                                        }

                                        var noComments = document.getElementById("comments-none");
                                        if(noComments) {
                                            noComments.innerHTML = "";
                                            noComments.className = "m-b-lg p-b-xs";
                                        }

                                        if(self.props.ratable && e.data.rating != null) {
                                            var crCount = document.getElementById("comment-rating-count");
                                            var crAverage = document.getElementById("comment-rating-average");
                                            var crProgress = document.getElementById("comment-rating-progress");
                                            var crStars = document.getElementById("comment-rating-stars");
                                            if(crCount && crProgress && crAverage) {
                                                var count = parseInt(crCount.innerHTML);
                                                var average = parseFloat(crAverage.innerHTML);
                                                var newAverage = Math.round(((count*average+e.data.rating)/(count+1))*100)/100;
                                                crAverage.innerHTML = newAverage;
                                                crCount.innerHTML = count+1;
                                                crProgress.style.width = (newAverage*20)+"%";
                                                crStars.className = "star-rating g-b rated-"+(Math.round(newAverage*2)*10);
                                            }
                                        }

                                        self.setState({
                                            window: 1,
                                            open: true,
                                            loading: false,
                                            securityQuestion: self.handleAction("generate-security-question"),
                                            rnType: "none",
                                        });

                                        Ajax({
                                            url: "/ajax/",
                                            type: "POST",
                                            data: {
                                                request: "comment/rn",
                                                id: e.data.added,
                                                type: self.props.type,
                                            },
                                        })
                                    break;
                                    default:
                                        self.setState({
                                            loading: false
                                        });
                                        alert(self.props.lang.generalError);
                                    break;
                                }
                            break;
                        }
                    },
                    fail(e) {
                        self.setState({
                            loading: false
                        });
                        alert(self.props.lang.serverError);
                    }
                });
            break;
            case "close":
                this.setState({
                    open: false,
                    window: 0
                });
            break;
            case "set-and-open":
                this.parent = data.parent;
                this.setState({
                    open: true,
                    window: 0,
                    respondTo: data.respondTo
                });
                if(this.props.variant == "floating") ReactDOM.findDOMNode(this.refs.name).focus();
            break;
            case "focus":
                ReactDOM.findDOMNode(this.refs.name).focus();
            break;
        }
    },
    render() {
        var finishWindow, heading = [], content;
        if(this.props.variant == "static") {
            heading.push(<h4 key={0}>{this.props.lang[this.props.ratable ? "pridatRecenzi" : (this.props.type == "kr" ? "pridatKomentar_kr" : "pridatKomentar")]}</h4>);
        } else if(this.props.variant == "floating") {
            heading.push(<h4 key={0}>{this.props.lang.pridatReakci}</h4>);
            heading.push(<span key={1}>{this.props.lang[this.props.ratable ? "naRecenziOd" : (this.props.type == "kr" ? "naKomentarOd_kr" : "naKomentarOd")]+" "+this.state.respondTo}</span>);
        }
        if(this.state.window == 1 && this.state.open) {
            finishWindow = (
                <section className="floating-review-adder active">
                    <div className="bg" onClick={this.handleAction.bind(null, "close")} />
                    <div className="window">
                        <div className="heading">
                            {heading}
                            <img src={__httppath+"/static/images/icons/review-close.png"} className="close" alt={this.props.lang.zavrit} title={this.props.lang.zavrit} onClick={this.handleAction.bind(null, "close")} />
                        </div>
                        <div className="content">
                            <div className="donzo">
                                <div>
                                    <i className="fas fa-check-circle" />
                                </div>
                                <div className="title">{this.props.lang.odeslano}</div>
                                <div className="addition">{this.props.lang.text1}<br />{this.props.lang.dekujeme}</div>
                                <a onClick={this.handleAction.bind(null, "close")}>{this.props.lang.odejit}</a>
                            </div>
                        </div>
                    </div>
                </section>
            );
        }
        if(this.props.variant == "static" || (this.props.variant == "floating" && this.state.window == 0)) {
            var rating, radio;
            if(this.props.ratable) {
                rating = (
                    <div>
                        <mark><span>{this.props.lang["doporucujes_"+this.props.type]}</span></mark>
                        <CommentAdderRadioVoter ref="recommends" lang={this.props.lang} />
                    </div>
                );
                radio = (
                    <div>
                        <mark><span>{this.props.lang.celkoveHodnoceni}</span></mark>
                        <CommentAdderStars ref="stars" starBackground={this.props.variant == "static" ? "lightgray" : "white"} lang={this.props.lang} />
                    </div>
                );
            }
            content = (
                <div className="content">
                    <form onSubmit={this.handleAction.bind(this, "validate")}>
                        <label>
                            <mark className="required m-t-0"><span>{this.props.lang.jmeno}:</span></mark>
                            <input type="text" ref="name" maxLength={40} required={true} placeholder={this.props.lang.namePlaceholder} />
                        </label>
                        <label>
                            <mark className="required"><span>{this.props.lang[this.props.type == "kr" ? "komentar_kr" : "komentar"]}:</span></mark>
                            <textarea ref="comment" required={true} minLength={5} placeholder={this.props.lang.textPlaceholder} />
                        </label>
                        <div>
                            <mark>{this.props.lang.crnTitle}</mark>
                            <div className="resnot">
                                <select onChange={this.handleAction.bind(this, "onRnTypeChange")} value={this.state.rnType}>
                                    <option value="none">{this.props.lang.crnOptionNone}</option>
                                    <option value="children">{this.props.lang[this.props.type == "kr" ? "crnOptionChildren_kr" : "crnOptionChildren"]}</option>
                                    <option value="article">{this.props.lang[this.props.type == "kr" ? "crnOptionArticle_kr" : "crnOptionArticle"]}</option>
                                </select>
                                {this.state.rnType != "none" &&
                                    <input type="email" ref="rnEmail" maxLength={60} required placeholder={this.props.lang.crnYourEmailAddress} />
                                }
                            </div>
                        </div>
                        {radio}
                        {rating}
                        <label className="p-t-sm">
                            <mark className="inline required">
                                <span className="p-r-sm">{this.props.lang.kontrolniOtazka}:</span>
                                {this.state.securityQuestion.a+this.operantsDisplay[this.state.securityQuestion.operant]+this.state.securityQuestion.b+" ="}</mark>
                            <input type="number" className="inline" ref="securityResult" required={true} />
                        </label>
                        <div className="remotes p-t-xs">
                            <div className="in text-left">
                                <CommentAdderFormatInfo lang={this.props.lang} />
                            </div>
                            <div className="in text-right">
                                <button type="submit" className="btn btn-black-rounded">{this.props.lang.odeslat}</button>
                            </div>
                        </div>
                    </form>
                </div>
            );
        }
        if(this.props.variant == "static") {
            return (
                <div>
                    <section className="floating-review-adder actually-not-so-floating">
                        <div className="window">
                            <div className="heading">{heading}</div>
                            {content}
                        </div>
                    </section>
                    {finishWindow}
                </div>
            );
        } else if(this.props.variant == "floating") {
            var class_ = "floating-review-adder";
            if(this.state.open) class_ += " active";
            if(this.state.window == 0) {
                return (
                    <section className={class_}>
                        <div className="bg" onClick={this.handleAction.bind(null, "close")} />
                        <div className="window">
                            <div className="heading">
                                <h4>{this.props.lang.pridatReakci}</h4>
                                <span>{this.props.lang[this.props.ratable ? "naRecenziOd" : (this.props.type == "kr" ? "naKomentarOd_kr" : "naKomentarOd")]+" "+this.state.respondTo}</span>
                                <img src={__httppath+"/static/images/icons/review-close.png"} className="close" alt={this.props.lang.zavrit} title={this.props.lang.zavrit} onClick={this.handleAction.bind(null, "close")} />
                            </div>
                            {content}
                        </div>
                    </section>
                );
            } else {
                return finishWindow;
            }
        }
    }
});

var CommentAdderFormatInfo = React.createClass({
    getInitialState() {
        return {
            activated: false,
            open: false
        };
    },
    handleAction(type, data) {
        switch(type) {
            case "open":
                this.setState({
                    activated: true,
                    open: true
                });
            break;
            case "close":
                this.setState({
                    open: false
                });
            break;
        }
    },
    render() {
        var class_ = "bubble";
        if(this.state.activated) {
            class_ += " "+(this.state.open ? "fading-in" : "fading-out");
        }
        return (
            <div className="format-info" aria-hidden="true" onMouseEnter={this.handleAction.bind(null, "open")} onMouseLeave={this.handleAction.bind(null, "close")}>
                <i className="fas fa-question-circle" />
                <span>{this.props.lang.napovedaProFormatovani}</span>
                <div className={class_}>
                    <table className="b-table">
                        <thead>
                            <tr>
                                <th>{this.props.lang.napises}</th>
                                <th>{this.props.lang.dostanes}</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>*{this.props.lang.tucnyText}*</td>
                                <td><strong>{this.props.lang.tucnyText}</strong></td>
                            </tr>
                            <tr>
                                <td>[{this.props.lang.odkaz}](https://www.vybavenadilna.cz/)</td>
                                <td><a href="https://www.vybavenadilna.cz/" target="_blank" rel="nofollow noopener">{this.props.lang.odkaz}</a></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        );
    }
});

var CommentAdderRadioVoter = React.createClass({
    getInitialState() {
        return {
            vote: 2
        };
    },
    value: 2,
    handleAction(type, data) {
        switch(type) {
            case "vote":
                var a = parseInt(data);
                this.setState({
                    vote: a
                });
                this.value = a;
            break;
        }
    },
    render() {
        return (
            <div className="decisioner g-a" role="radiogroup">
                <div className={"decision yes"+(this.state.vote == 1 ? " active" : "")} onClick={this.handleAction.bind(null, "vote", 1)} role="radio" aria-checked={this.state.vote == 1} tabIndex={this.state.vote == 1 ? 0 : -1}>
                    <img src={__httppath+"/static/images/icons/thumbs-up.png"} className="thumb" alt={this.props.lang.ano} aria-hidden="true" />
                    <img src={__httppath+"/static/images/icons/thumbs-up-gray.png"} className="thumb" alt={this.props.lang.ano} aria-hidden="true" />
                    <span>{this.props.lang.ano}</span>
                </div>
                <div className={"decision no"+(this.state.vote == 0 ? " active" : "")} onClick={this.handleAction.bind(null, "vote", 0)} role="radio" aria-checked={this.state.vote == 0} tabIndex={this.state.vote == 0 ? 0 : -1}>
                    <img src={__httppath+"/static/images/icons/thumbs-down.png"} className="thumb" alt={this.props.lang.ne} aria-hidden="true" />
                    <img src={__httppath+"/static/images/icons/thumbs-down-gray.png"} className="thumb" alt={this.props.lang.ne} aria-hidden="true" />
                    <span>{this.props.lang.ne}</span>
                </div>
            </div>
        );
    }
});

var CommentAdderStars = React.createClass({
    getDefaultProps() {
        return {
            starBackground: "white"
        };
    },
    getInitialState() {
        return {
            value: 0,
            mouseValue: 0
        };
    },
    value: 0,
    handleAction(type, data) {
        switch(type) {
            case "vote":
                this.setState({
                    value: parseInt(data)
                });
                this.value = parseFloat(data)/2;
            break;
            case "mouse-vote":
                this.setState({
                    mouseValue: parseInt(data)
                });
            break;
        }
    },
    render() {
        var hoverings = [];
        for(var i=1; i<=10; i++) {
            hoverings.push(<div
                key={i}
                className="voter"
                onClick={this.handleAction.bind(null, "vote", i)}
                onMouseOver={this.handleAction.bind(null, "mouse-vote", i)}
            />);
        }
        var class_ = "stars g-b";
        var optval = this.state.mouseValue ? this.state.mouseValue : this.state.value;
        class_ += " voted"+optval;
        var infotext;
        if(optval) {
            var lang = "rating_"+optval;
            infotext = <span className="info-text">{optval/2}/5<span />{this.props.lang[lang]}</span>;
        }
        var img;
        switch(this.props.starBackground) {
            case "lightgray":
                img = "star-mask-lightgray.png";
            break;
            case "white":
            default:
                img = "star-mask.png";
            break;
        }
        return (
            <div className={class_}>
                <div className="rating-block" onMouseOut={this.handleAction.bind(null, "mouse-vote", 0)}>
                    <div className="back">
                        <div className="progress" style={{width: optval*10+"%"}} />
                    </div>
                    <img src={__httppath+"/static/images/icons/"+img} className="star-mask" alt={"Star mask"} />
                    <div className="front">
                        {hoverings}
                    </div>
                </div>
                {infotext}
            </div>
        )
    }
});

var CommentRater = React.createClass({
    getDefaultProps() {
        return {
            vote: 2,
            yes: 0,
            no: 0,
            type: "kz",
            comment: 0
        };
    },
    getInitialState() {
        return {
            vote: this.props.vote,
            yes: this.props.yes,
            no: this.props.no,
            loading: false
        };
    },
    hasVoted() {
        return [0, 1].indexOf(this.state.vote) > -1;
    },
    vote(vote) {
        var self = this;
        if(this.hasVoted()) return;
        if(this.state.loading) return;
        this.setState({
            loading: true
        });
        Ajax({
            url: "/ajax/",
            type: "POST",
            dataType: "json",
            data: {
                request: "eshop/review-vote",
                review: self.props.comment,
                vote: vote,
                type: self.props.type
            },
            success(e){
                switch(e.status){
                    case "OK":
                        switch(e.data.status) {
                            case "OK":
                                self.setState({
                                    vote: e.data.voted,
                                    yes: e.data.votes.yes,
                                    no: e.data.votes.no,
                                    loading: false
                                });
                            break;
                            case "PRIVATE_IP":
                                alert(self.props.lang.neverejnaIP);
                                self.setState({
                                    loading: false
                                });
                            break;
                        }
                    break;
                }
            },
            fail(e) {
                self.setState({
                    loading: false
                });
            }
        });
    },
    render() {
        var buttons = [];
        let aria = {
            yes: {},
            no: {},
            parent: {}
        };
        if(!this.hasVoted()) {
            aria.parent.role = "radiogroup";

            aria.yes.role = "radio";
            aria.yes["aria-checked"] = this.state.vote == 1;
            aria.yes.tabIndex = this.state.vote == 1 ? 0 : -1;

            aria.no.role = "radio";
            aria.no["aria-checked"] = this.state.vote == 0;
            aria.no.tabIndex = this.state.vote == 0 ? 0 : -1;
        }
        buttons.push(
            <div key={0} className="voter yes" {...aria.yes}>
                <span onClick={this.vote.bind(null, 1)}>{this.props.lang.souhlasim}</span><mark>({(this.state.yes > 0 ? "+" : "")+this.state.yes})</mark>
            </div>
        );
        buttons.push(
            <div key={1} className="voter no" {...aria.no}>
                <span onClick={this.vote.bind(null, 0)}>{this.props.lang.nesouhlasim}</span><mark>({(this.state.no > 0 ? "-" : "")+this.state.no})</mark>
            </div>
        );
        /*if(this.state.loading) {
            buttons.push(<i key={2} className="fas fa-circle-notch fa-spin" />);
        }*/
        return (
            <div className={"voters"+(this.hasVoted() ? " is-voted" : "")} {...aria.parent}>{buttons}</div>
        );
    }
});

var sca = document.getElementById("static-comment-adder");
if(sca) {
    var SCA = ReactDOM.render(<CommentAdder
                                    fund={__comment.fund}
                                    type={__comment.type}
                                    lang={__comment.lang}
                                    months={__comment.months}
                                    ratable={__comment.ratable}
                                    parent={0}
                                    variant={"static"}
                                />, sca);
    try {
        document.getElementById("scroll-to-add-comment").addEventListener("click", function(){
            smoothScroll.toElement(document.getElementById("target-add-comment"), 90);
            if(SCA) {
                setTimeout(function(){
                    SCA.handleAction("focus");
                }, 500);
            }
        });
    } catch(e) {}
}

var fca = document.getElementById("floating-comment-adder");
if(fca) {
    var FloatingCommentAdder_ = ReactDOM.render(<CommentAdder
                                                    fund={__comment.fund}
                                                    type={__comment.type}
                                                    lang={__comment.lang}
                                                    months={__comment.months}
                                                    ratable={__comment.ratable}
                                                    parent={0}
                                                    variant={"floating"}
                                                />, fca);
    var btns = document.querySelectorAll("[data-comment-respond]");
    for(var i=0; i<btns.length; i++) {
        (function(i){
            btns[i].addEventListener("click", function(){
                FloatingCommentAdder_.handleAction("set-and-open", {
                    parent: parseInt(btns[i].getAttribute("data-comment-respond")),
                    respondTo: btns[i].getAttribute("data-comment-respond-to")
                });
            });
        })(i);
    }
}

var interacts = document.querySelectorAll("[data-comment-voter]");
for(var i=0; i<interacts.length; i++) {
    var intr = interacts[i];
    ReactDOM.render(<CommentRater
                        vote={parseInt(intr.getAttribute("data-vote"))}
                        type={__comment.type}
                        comment={parseInt(intr.getAttribute("data-comment-voter"))}
                        yes={parseInt(intr.getAttribute("data-yes"))}
                        no={parseInt(intr.getAttribute("data-no"))}
                        lang={__comment.lang}
                    />, intr);
}
var videos = document.querySelectorAll("iframe[data-iframe-src]");
var loaders = [];
for(var i=0; i<videos.length; i++) {
    var v = videos[i];
    var src = v.getAttribute("data-iframe-src");
    var div = document.createElement("div");
    v.parentNode.insertBefore(div, v);
    v.parentNode.removeChild(v);
    loaders.push({
        src: src,
        el: div
    });
}

for(var i=0; i<loaders.length; i++) {
    (function(i){
        var l = loaders[i];
        l.el.className = "youtube-video-overhaul";
        var code = (/\/embed\/(.{11})/g).exec(l.src);
        if(typeof code[1] == "undefined") return;
        if(get_window_width() > 500) {
            let img = document.createElement("img");
            img.addEventListener("load", e => {
                if(img.offsetWidth == 120 && img.offsetHeight == 90) {
                    l.el.setAttribute("data-src", "//img.youtube.com/vi/"+code[1]+"/hqdefault.jpg");
                } else {
                    l.el.setAttribute("data-src", "//img.youtube.com/vi/"+code[1]+"/maxresdefault.jpg");
                }
                blazy.revalidate();
                document.body.removeChild(img);
            });
            img.style.position = "fixed";
            img.style.top = "-10000px";
            img.style.left = "-10000px";
            document.body.appendChild(img);
            img.src = "//img.youtube.com/vi/"+code[1]+"/maxresdefault.jpg";
        } else {
            l.el.setAttribute("data-src", "//img.youtube.com/vi/"+code[1]+"/hqdefault.jpg");
        }
        l.el.setAttribute("data-code", code[1]);
        var btn = document.createElement("div");
        btn.className = "button";
        l.el.appendChild(btn);
        btn.innerHTML = '<svg version="1.1" viewBox="0 0 68 48"><path d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"></path><path d="M 45,24 27,14 27,34"></path></svg>';
        l.el.addEventListener("click", function(){
            addClass(this, "played");
            var ifr = document.createElement("iframe");
            ifr.setAttribute("allowfullscreen", "");
            ifr.setAttribute("frameborder", "0");
            ifr.setAttribute("gesture", "media");
            ifr.setAttribute("allow", "encrypted-media");
            ifr.setAttribute("src", l.src+(l.src.indexOf("?") > -1 ? "&" : "?")+"rel=0&autoplay=1");
            this.appendChild(ifr);
        });
    })(i);
}

var blazy = new Blazy({
    selector: ".youtube-video-overhaul",
    offset: 500,
});
var singleProducts = document.querySelectorAll(".single-product");
for(var i=0; i<singleProducts.length; i++) {
    (function(i){
        var s = singleProducts[i];
        try {
            s.querySelector(".right .btn").addEventListener("click", function(){
                trackSingleProduct(i);
            });
        } catch(e) {

        }
        try {
            s.querySelector(".right .top a").addEventListener("click", function(){
                trackSingleProduct(i);
            });
        } catch(e) {

        }
    })(i);
}

function trackSingleProduct(i) {
    var s = singleProducts[i];
    try {
        var image = s.querySelector(".left .image");
        var product = image.getAttribute("data-title");
        if(!product) product = s.querySelector(".right .top").innerHTML.split(" ").slice(0, 3).join(" ");
        var shop = s.querySelector(".right .btn").getAttribute("href");
        var http = shop.match(/https?:\/\/([a-z]+\.[a-z0-9-]+\.[a-z]+)/g);
        if(http.length > 1) {
            shop = http[http.length-1].split("//")[1];
        } else {
            shop = http[0].split("//")[1];
        }
        gtag("event", "click", {
            event_category: "produktovy-banner",
            event_action: product,
            event_label: shop,
        })
        //console.log(product+"\n"+shop+"\n"+"produktovy-banner"+"\n"+"--------");
    } catch(e) {

    }
}
var contents = document.querySelectorAll(".contents");
for(var i=0; i<contents.length; i++) {
    (function(i){
        contents[i].querySelector(".remote.r1").addEventListener("click",function(){
            openContents(contents[i]);
        });
        contents[i].querySelector(".remote.r2").addEventListener("click",function(){
            closeContents(contents[i]);
        });
        //if(!isMobile()) {
            openContents(contents[i]);
        //}
    })(i);
}

function openContents(c) {
    var clone = c.cloneNode(true);
    clone.style.position = "fixed";
    clone.style.top = "-10000px";
    clone.style.left = "-10000px";
    clone.style.maxWidth = "unset";
    document.body.appendChild(clone);
    var w = clone.querySelector(".contents-i-i").offsetWidth+30;
    document.body.removeChild(clone);
    addClass(c, "opened");
    c.style.maxWidth = Math.min(document.getElementById("article").offsetWidth-30, w)+"px";
    setTimeout(function(){
        c.querySelector(".contents-i").style.height = c.querySelector(".contents-i-i").offsetHeight+"px";
    }, 120);
}

function closeContents(c) {
    removeClass(c, "opened");
    c.querySelector(".contents-i").style.height = "0px";
    setTimeout(function(){
        c.style.maxWidth = "250px";
    }, 120);
}
var TableFixer = function(selector) {
    var tables = document.querySelectorAll(selector);
    for(var i=0; i<tables.length; i++) {
        var d = document.createElement("div");
        d.className = "table-overflow";
        tables[i].parentNode.insertBefore(d, tables[i].nextSibling);
        d.appendChild(tables[i]);
        addClass(tables[i], "scrollable");
    }
}
var ListFixer = function(selector) {
    var self = this;
    var lists = document.querySelectorAll(selector);
    var limit = 36;
    var timer = null;
    this.run = function() {
        for(var i=0; i<lists.length; i++) {
            var lis = lists[i].querySelectorAll(":scope > li");
            var add = false;
            for(var j=0; j<lis.length; j++) {
                if(parseInt(window.getComputedStyle(lis[j]).getPropertyValue("height")) > limit) {
                    add = true;
                    break;
                }
            }
            for(var j=0; j<lis.length-1; j++) {
                lis[j].style.marginBottom = (add ? 14 : 0)+"px";
            }
        }
    }
    window.addEventListener("resize",function(){
        clearTimeout(timer);
        timer = setTimeout(function(){
            self.run();
        }, 200);
    });
    self.run()
}

const createAdminPanel = ({
    cmsTo = undefined,
    cacheControl = false,
}) => {
    const cookie = new Cookie("admin-panel", "0");
    if(cookie.value === "1") {
        const parent = document.createElement("div");
        parent.setAttribute("class", "adminPanel")
        document.body.appendChild(parent)

        if(cacheControl) {
            const usp = new URLSearchParams(window.location.search);
            if(usp.get("dc") !== null) {
                const link = document.createElement("link");
                link.setAttribute("class", "adminPanel__minor")
                link.setAttribute("title", "Zobrazen necachovaný obsah")
                link.innerHTML = "💚";
                parent.appendChild(link)
            } else {
                usp.set("dc", "")
                const { pathname, hash } = window.location;
                const to = pathname + "?" + usp + hash;
                const link = document.createElement("a");
                link.setAttribute("class", "adminPanel__minor")
                link.setAttribute("href", to)
                link.setAttribute("title", "Zobrazit necachovaný obsah")
                link.innerHTML = "✨";
                parent.appendChild(link)
            }
        }

        if(cmsTo !== undefined) {
            const link = document.createElement("a");
            link.setAttribute("class", "adminPanel__main")
            link.setAttribute("href", cmsTo)
            link.setAttribute("target", "_blank")
            link.setAttribute("title", "Otevřít v CMS")
            link.innerHTML = "🖊️";
            parent.appendChild(link)
        }
    }
};
/*
detekuje, zda bylo kliknuto mimo element
*/
const clickPrevention = (
    onClose, // () => void
) => {
    const ii = clickPrevention.iterator++;

    const onDocumentClick = ev => {
        let close = true;
        let node = ev.target;
        while(true) {
            if(parseInt(node.getAttribute("data-js-click-prevention")) === ii) {
                close = false;
                break;
            }
            if(node === document.documentElement) {
                break;
            }
            node = node.parentElement;
        }
        if(close) onClose()
    };

    document.addEventListener("mousedown", onDocumentClick)

    const unbind = () => {
        document.removeEventListener("mousedown", onDocumentClick)
    };

    return {
        ii,
        unbind,
    };
};
clickPrevention.iterator = 0;

const initContributorCards = () => {
    const groups = document.querySelectorAll("[data-js-contributor]");
    for(let i=0; i<groups.length; i++) {
        const group = groups[i];
        const card = group.querySelector("[data-js-contributor-card]");
        const trigger = group.querySelector("[data-js-contributor-trigger]");
        const closeBtn = group.querySelector("[data-js-contributor-card-close]");
        const open = () => {
            card.setAttribute("data-js-css-visible", "true")
        };
        const close = () => {
            card.setAttribute("data-js-css-visible", "false")
        };
        const { ii } = clickPrevention(close);
        trigger.addEventListener("click", open)
        closeBtn.addEventListener("click", close)
        card.setAttribute("data-js-click-prevention", ""+ii)
    }
};
initContributorCards()
// https://stackoverflow.com/questions/27078285/simple-throttle-in-js

// Returns a function, that, when invoked, will only be triggered at most once
// during a given window of time. Normally, the throttled function will run
// as much as it can, without ever going more than once per `wait` duration;
// but if you'd like to disable the execution on the leading edge, pass
// `{leading: false}`. To disable execution on the trailing edge, ditto.

function throttle(func, wait, options) {
    var context, args, result;
    var timeout = null;
    var previous = 0;
    if (!options) options = {};
    var later = function() {
      previous = options.leading === false ? 0 : Date.now();
      timeout = null;
      result = func.apply(context, args);
      if (!timeout) context = args = null;
    };
    return function() {
      var now = Date.now();
      if (!previous && options.leading === false) previous = now;
      var remaining = wait - (now - previous);
      context = this;
      args = arguments;
      if (remaining <= 0 || remaining > wait) {
        if (timeout) {
          clearTimeout(timeout);
          timeout = null;
        }
        previous = now;
        result = func.apply(context, args);
        if (!timeout) context = args = null;
      } else if (!timeout && options.trailing !== false) {
        timeout = setTimeout(later, remaining);
      }
      return result;
    };
  };
  
const createScrollToTopButton = () => {

    const btn = document.createElement("button");
    btn.className = "btn scrollToTop";
    btn.dataset.jsCssVisible = false;

    const icon = document.createElement("i");
    icon.className = "fa fa-chevron-up";
    btn.appendChild(icon)

    document.body.appendChild(btn)

    btn.addEventListener("click", () => {
        document.scrollingElement.scrollTo(0, 0)
    })

    const onScroll = () => {
        const show = document.scrollingElement.scrollTop > 2000;
        btn.dataset.jsCssVisible = show;
    };

    const _onScroll = throttle(onScroll, 500);

    window.addEventListener("scroll", _onScroll)
};

if(__isCustomPost) {
    ReactDOM.render(<ArticleGallery imageSelector={"#article img:not(.image-banner-img)"} imageSelectorGalleryOnly={"#article img.bp-img"} />, document.getElementById("article-gallery"));
} else {
    ReactDOM.render(<ArticleGallery imageSelector={"#article img:not(.bp-img):not(.image-banner-img)"} imageSelectorGalleryOnly={"#article .pcc-image"} />, document.getElementById("article-gallery"));
}

var t = new TableFixer("article table");
var l = new ListFixer("article ul:not(.contents-i-i)");

let b = new Blazy({
    selector: "[data-similar-post]",
    offset: 500,
});

const initCoursesBanner = () => {
    const container = document.getElementById("kurzyBannerVContainer");
    const wrapper = document.getElementById("kurzyBannerVWrapper");
    const el = document.getElementById("kurzyBannerV");

    if(!container || !wrapper || !el) return;

    const onScroll = () => {
        const r = wrapper.getBoundingClientRect();
        const topThreshold = $navbar.navbar.offsetHeight + 24;
        if(document.scrollingElement.scrollTop + topThreshold + el.offsetHeight > container.offsetTop + wrapper.offsetTop + wrapper.offsetHeight) {
            el.style.position = "absolute";
            el.style.left = "0";
            el.style.top = `calc(100% - ${el.offsetHeight}px)`;
        } else if(r.top < topThreshold) {
            el.style.position = "fixed";
            el.style.left = `${r.left}px`;
            el.style.top = `${topThreshold}px`;
        } else {
            el.style.position = "static";
        }
    };
    window.addEventListener("scroll", onScroll)
};
initCoursesBanner()

createAdminPanel({
    cmsTo: `/cms/blog/posts/edit/${__comment.fund}/`,
    cacheControl: true,
})

createScrollToTopButton()