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 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;
}
var NewSlider = React.createClass({
    getInitialState() {
        return {
            elementCount: 0,
            totalWidth: 0,
            page: 1,
            maxPages: 0
        };
    },
    html: "",
    rowClass: "",
    touch: {
        active: false,
        initialX: null,
        reactionLimit: 80
    },
    setTransform(px) {
        return {
            WebkitTransform: "translateX("+px+"px)",
            MozTransform: "translateX("+px+"px)",
            msTransform: "translateX("+px+"px)",
            OTransform: "translateX("+px+"px)",
            transform: "translateX("+px+"px)"
        };
    },
    getDimensions() {
        const el = document.querySelector("#"+this.props.elementID+" .row div[class^='col-']")
        var elw = el === null ? 1 : el.offsetWidth - 3;
        var elc = document.querySelectorAll("#"+this.props.elementID+" .row div[class^='col-']").length;
        var ttw = ReactDOM.findDOMNode(this.refs.overhaul).offsetWidth;
        this.setState({
            elementCount: elc,
            totalWidth: ttw,
            page: 1,
            maxPages: Math.ceil(elc*elw/ttw),
            showArrows: Math.round(ttw/elw) < elc
        });
    },
    componentWillMount() {
        this.html = document.querySelector("#"+this.props.elementID+" .row").innerHTML;
        this.rowClass = document.querySelector("#"+this.props.elementID+" .row").className;
    },
    componentDidMount() {
        var self = this;
        window.addEventListener("resize", function(){
            self.getDimensions();
        });
        this.getDimensions();
    },
    handleAction(type, data) {
        switch(type) {
            case "prev":
                var a = this.state.page == 1 ? this.state.maxPages : this.state.page-1;
                this.setState({
                    page: a
                });
                this.handleAction("refreshBLazy");
            break;
            case "next":
                var a = this.state.page == this.state.maxPages ? 1 : this.state.page+1;
                this.setState({
                    page: a
                });
                this.handleAction("refreshBLazy");
            break;
            case "touch-start":
                this.touch.active = true;
                this.touch.initialX = data.touches[0].pageX;
            break;
            case "touch-move":
                if(this.touch.active) {
                    var diff = this.touch.initialX - data.touches[0].pageX;
                    if(diff > this.touch.reactionLimit) {
                        this.handleAction("next");
                    } else if(diff < -this.touch.reactionLimit) {
                        this.handleAction("prev");
                    }
                    if(Math.abs(diff) > this.touch.reactionLimit) {
                        this.touch.active = false;
                    }
                }
            break;
            case "touch-end":
                this.touch.active = false;
            break;
            case "refreshBLazy":
                if(typeof blazy != "undefined") {
                    setTimeout(function(){
                        blazy.revalidate();
                    }, 350);
                }
            break;
        }
    },
    render() {
        var arrows = [];
        if(this.state.showArrows) {
            arrows.push(
                <div key={0} className="arrow left" onClick={this.handleAction.bind(null, "prev")}>
                    <i className="fas fa-chevron-left" />
                </div>
            );
            arrows.push(
                <div key={1} className="arrow right" onClick={this.handleAction.bind(null, "next")}>
                    <i className="fas fa-chevron-right" />
                </div>
            );
        }
        return (
            <div
                className="slider g-a"
                onTouchStart={this.handleAction.bind(this, "touch-start")}
                onTouchMove={this.handleAction.bind(this, "touch-move")}
                onTouchEnd={this.handleAction.bind(this, "touch-end")}
                onTouchCancel={this.handleAction.bind(this, "touch-end")}
            >
                <div className="overhaul" ref="overhaul" style={this.setTransform(-this.state.totalWidth*(this.state.page-1))}>
                    <div className={this.rowClass} dangerouslySetInnerHTML={{__html: this.html}} />
                </div>
                {arrows}
            </div>
        );
    }
});

var ns = document.getElementById("new-slider");
if(ns) ReactDOM.render(<NewSlider elementID={"new-slider"} />, ns);

var IndexAutocompleter = React.createClass({
    getInitialState() {
        return {
            nodes: [],
            highlighted: -1,
            loading: false,
            preloading: false,
            open: false,
            used: false
        };
    },
    ajaxTimer: null,
    openTimer: null,
    value: "",
    handleAction(type, data) {
        switch(type) {
            case "key-up":
                switch(data.keyCode) {
                    case 38: // nahoru
                        var a;
                        if(this.state.highlighted == -1 || this.state.highlighted == 0) a = this.state.nodes.length-1;
                        else a = this.state.highlighted-1;
                        this.setState({
                            highlighted: a
                        });
                    break;
                    case 40: // dolu
                        var a;
                        if(this.state.highlighted == this.state.nodes.length-1) a = 0;
                        else a = this.state.highlighted+1;
                        this.setState({
                            highlighted: a
                        });
                    break;
                    case 13: // enter
                        if(this.state.highlighted > -1 && !this.state.loading && !this.state.preloading) {
                            window.location.href = this.state.nodes[this.state.highlighted].link;
                        } else {
                            window.location.href = "hledat/?q="+this.value;
                        }
                    break;
                    default:
                        var q = data.currentTarget.value;
                        this.value = q;
                        clearTimeout(this.ajaxTimer);
                        if(q.length >= 3) {
                            var self = this;
                            this.setState({
                                preloading: true
                            });
                            this.ajaxTimer = setTimeout(function(){
                                self.handleAction("fetch", q);
                            }, 750);
                        }
                    break;
                }
            break;
            case "fetch":
                var self = this;
                if(data.length < 3) return false;
                if(this.state.loading) return false;
                this.setState({
                    loading: true,
                    preloading: false
                });
                Ajax({
                    url: "/ajax/",
                    type: "POST",
                    dataType: "json",
                    data: {
                        request: "index/search",
                        query: data
                    },
                    success(e){
                        switch(e.status){
                            case "OK":
                                self.setState({
                                    nodes: e.data.nodes,
                                    loading: false,
                                    highlighted: -1,
                                    used: true
                                });
                            break;
                        }
                    },
                    fail(e) {
                        self.setState({
                            loading: false
                        });
                    }
                });
            break;
            case "manual-search":
                this.handleAction("fetch", this.value);
                ReactDOM.findDOMNode(this.refs.input).focus();
            break;
            case "highlight":
                this.setState({
                    highlighted: parseInt(data)
                });
            break;
            case "open":
                clearTimeout(this.openTimer);
                this.setState({
                    open: true
                });
            break;
            case "close":
                clearTimeout(this.openTimer);
                var self = this;
                this.openTimer = setTimeout(function(){
                    self.setState({
                        open: false
                    });
                }, 300);
            break;
        }
    },
    render() {
        var loading, categories = [], brands = [], products = [], ck = 0, bk = 0, pk = 0, ch, bh, ph, showMore;
        if(this.state.nodes.length > 0) {
            for(let i=0; i<this.state.nodes.length; i++) {
                const index = i;
                const node = this.state.nodes[index];
                switch(node.type) {
                    case "product":
                        var class_ = "node";
                        if(this.state.highlighted == index) class_ += " highlighted";
                        products.push(
                            <a
                                key={pk}
                                className={class_}
                                onMouseEnter={this.handleAction.bind(null, "highlight", index)}
                                href={node.link}
                            >
                                <div className="preview" style={{backgroundImage: "url("+node.image+")"}} />
                                <div className="states">
                                    <div className="title">{node.title}</div>
                                    <div className="price">
                                        <span className="new">{node.price} Kč</span>
                                    </div>
                                </div>
                            </a>
                        );
                        pk++;
                    break;
                    case "category":
                        var class_ = "node simple";
                        if(this.state.highlighted == index) class_ += " highlighted";
                        categories.push(
                            <a
                                key={ck}
                                className={class_}
                                onMouseEnter={this.handleAction.bind(null, "highlight", index)}
                                href={node.link}
                            >
                                <div className="states">
                                    <div className="title">{node.title}</div>
                                </div>
                            </a>
                        );
                        ck++;
                    break;
                    case "brand":
                        var class_ = "node simple";
                        if(this.state.highlighted == index) class_ += " highlighted";
                        brands.push(
                            <a
                                key={bk}
                                className={class_}
                                onMouseEnter={this.handleAction.bind(null, "highlight", index)}
                                href={node.link}
                            >
                                <div className="states">
                                    <div className="title">{node.title}</div>
                                </div>
                            </a>
                        );
                        bk++;
                    break;
                }
            }
            showMore = (
                <div className="show-more" onMouseEnter={this.handleAction.bind(null, "highlight", -1)}>
                    <a href={"hledat/?q="+this.value}>{__lang.acVsechnyVysledky}</a>
                </div>
            );
            if(ck > 0) ch = <div className="header"><div className="title">{__lang.acKategorieProduktu}</div></div>;
            if(bk > 0) bh = <div className="header"><div className="title">{__lang.acZnacky}</div></div>;
            if(pk > 0) ph = <div className="header"><div className="title">{__lang.acProdukty}</div></div>;
        } else if(this.state.used) {
            showMore = (
                <div className="show-more">
                    <a href={"hledat/?q="+this.value}>{__lang.acZadneVysledky}</a>
                </div>
            );
        }
        var class_ = "results";
        if(!this.state.open) class_ += " hide";
        var results = (
            <div className={class_}>
                {ph}
                {products}
                {ch}
                {categories}
                {bh}
                {brands}
                {showMore}
            </div>
        );
        if(this.state.loading || this.state.preloading) {
            loading = <div className="loading"><i className="fas fa-circle-notch fa-spin" /></div>;
        }
        return (
            <div className="autocompleter g-a">
                <div className="input-group">
                    <input
                        type="text"
                        placeholder={this.props.lang.napr}
                        aria-label={this.props.lang.ariaNapr}
                        autoFocus={false}
                        onKeyUp={this.handleAction.bind(this, "key-up")}
                        onFocus={this.handleAction.bind(null, "open")}
                        onBlur={this.handleAction.bind(null, "close")}
                        ref="input"
                    />
                    <a href={"hledat/?q="+this.value}>
                        <button className="btn" type="button" title={__lang.acHledat}><i className="fas fa-search" /></button>
                    </a>
                    {loading}
                </div>
                {results}
            </div>
        );
    }
});

ReactDOM.render(<IndexAutocompleter lang={__lang} />, document.getElementById("index-autocompleter"));