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"));
}
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 windowHeight, botherOptimizing, panelTop;
var footerHeight = document.querySelector("footer.footer-main").offsetHeight;
var sticky = document.getElementById("sticky-panel");
var panelTop = sticky.offsetTop;
var prep = document.getElementById("sticky-prep");
var prepHeight;
var TOPOFFSET = 90;
var BOTTOMOFFSET = 30;
var panelHeight = sticky.offsetHeight;
var threshold = typeof __stickyDeviceThreshold != "undefined" ? __stickyDeviceThreshold : 1024;
assignValues();
function assignValues() {
    setTimeout(function(){
        prepHeight = prep.offsetHeight;
        windowHeight = get_window_height();
        botherOptimizing = decideBother();
        sticky.style.width = prep.offsetWidth+"px";
        panelTop = sticky.offsetTop-TOPOFFSET;
        if(!botherOptimizing) {
            sticky.style.position = "static";
            sticky.style.top = "auto";
            sticky.style.bottom = "auto";
        }
    }, 300);
}
function decideBother() {
    return get_window_width() >= threshold && body.offsetHeight > footerHeight+prep.offsetTop+prepHeight+panelHeight+BOTTOMOFFSET+200;
}
window.addEventListener("resize",function(){
    assignValues();
    optimizeSticky();
});
document.addEventListener("scroll",function(){
    optimizeSticky();
});
function optimizeSticky() {
    if(botherOptimizing) {
        var scrollTop = getScrollTop();
        if(scrollTop > panelTop) {
            var offset = body.offsetHeight-footerHeight-scrollTop-windowHeight-BOTTOMOFFSET;
            var maxHeight = windowHeight-TOPOFFSET+offset;
            if(maxHeight < panelHeight) {
                sticky.style.position = "fixed";
                sticky.style.top = "auto";
                sticky.style.bottom = (-offset)+"px";
            } else {
                sticky.style.position = "fixed";
                sticky.style.top = TOPOFFSET+"px";
                sticky.style.bottom = "auto";
            }
        } else {
            sticky.style.position = "static";
            sticky.style.top = "auto";
            sticky.style.bottom = "auto";
        }
    }
}
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 ecl = document.getElementById("eshop-category-list");
var ect = document.getElementById("eshop-category-toggle");
ect.addEventListener("click", function(){
    toggleClass(ecl, "active");
    toggleClass(ect, "active");
});

document.getElementById("brand-select")?.addEventListener("change", ev => {
    const value = ev.currentTarget.value;
    const append = value === "" ? "" : `${value}/`;
    const pathname = `/${__eeshop.page}/${__eeshop.c.seo}/${append}${window.location.search}`;
    window.location.href = pathname;
})
document.getElementById("order-select")?.addEventListener("change", ev => {
    const pathname = `${window.location.pathname}?seradit=${ev.currentTarget.value}`;
    window.location.href = pathname;
})

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

var blazy = new Blazy({
    selector: ".card.g-h .img",
    offset: 500,
});

var ViewCookie = new Cookie("_fw_view", "list");
var ViewToggle = React.createClass({
    getInitialState() {
        return {
            view: ViewCookie.value
        };
    },
    handleAction(type, data) {
        switch(type) {
            case "change-view":
                if(this.state.view == data) return;
                this.setState({
                    view: data
                });
            break;
            case "use-transponation":
                var row = document.querySelector(".row.product-cards");
                var cols = row.querySelectorAll("[class^='col-']");
                var cards = row.querySelectorAll(".card.g-h");
                addClass(row, "transponed");
                for(var i=0; i<cols.length; i++) {
                    cols[i].className = "col-all-12";
                }
                for(var i=0; i<cards.length; i++) {
                    addClass(cards[i], "transponed");
                }
            break;
            case "undo-transponation":
                var row = document.querySelector(".row.product-cards");
                var cols = row.querySelectorAll("[class^='col-']");
                var cards = row.querySelectorAll(".card.g-h");
                removeClass(row, "transponed");
                for(var i=0; i<cols.length; i++) {
                    cols[i].className = "col-all-6 col-md-3";
                }
                for(var i=0; i<cards.length; i++) {
                    removeClass(cards[i], "transponed");
                }
            break;
            case "transpone":
                if(this.state.view == "list") {
                    this.handleAction("use-transponation");
                } else {
                    this.handleAction("undo-transponation");
                }
                ViewCookie.set_value(this.state.view);
                assignValues();
                optimizeSticky();
            break;
        }
    },
    componentDidUpdate(p, s) {
        this.handleAction("transpone");
    },
    render() {
        return (
            <div className="view-toggle">
                <button type="button" className={"btn"+(this.state.view == "list" ? " active" : "")} onClick={this.handleAction.bind(null, "change-view", "list")}>
                    <i className="fas fa-list" />
                </button>
                <button type="button" className={"btn"+(this.state.view == "grid" ? " active" : "")} onClick={this.handleAction.bind(null, "change-view", "grid")}>
                    <i className="fas fa-th" />
                </button>
            </div>
        )
    }
});

var vt = document.getElementById("view-toggle");
if(vt) ReactDOM.render(<ViewToggle />, vt);