React.LS = (function () {
    var Lang = function (defaultLangfile, defaultLang) {
        var self = this;

        if (defaultLangfile) {
            if (defaultLang) {
                self.dLang = defaultLang;
                self.dLangFile = defaultLangfile;
            }
            else {
                self.dLang = defaultLangfile;
                self.dLangFile = null;
            }

            if (self.get_setting('lang', self.dLang) != self.dLang) {
                self.set_load_lang(self.get_setting('lang', defaultLang), self.get_setting('langfile', defaultLangfile));
            }
        }
    };

    Lang.prototype.dLangFile = '';
    Lang.prototype.dLang = '';
    Lang.prototype.pack = [];
    Lang.prototype.loadedfiles = [];

    Array.prototype.contains = function (obj) {
        var i = this.length;
        while (i--) {
            if (this[i] === obj) {
                return true;
            }
        }
        return false;
    };

    Lang.prototype.ready = function (fn) {
        if (document.readyState != 'loading') {
            fn();
        } else {
            document.addEventListener('DOMContentLoaded', fn);
        }
    };

    Lang.prototype.currentLang = function () {
        var self = this;
        return self.get_setting('lang', self.dLang);
    };

    Lang.prototype.loadLangPack = function (callback, myLangFile) {
        var self = this;

        if (!self.loadedfiles.contains(myLangFile)) {
            self.loadJSON(function (response) {
                var result = JSON.parse(response);
                if (self.pack) {
                    for (var i = 0; i < result.length; i++) {
                        self.pack.push(result[i]);
                    }
                } else {
                    self.pack = result;
                }
                self.set_setting('langfile', myLangFile);
                callback();
            }, myLangFile);
        } else {
            self.set_setting('langfile', myLangFile);
            callback();
        }
    };

    Lang.prototype.set_lang = function (myLang) {

        var self = this;
        var num = 0;
        var oldelem;

        for (var i = 0; i < self.pack.length; i++) {
            if (self.pack[i].lang == myLang) {

                var noderesult = document.evaluate(self.pack[i].elem, document, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);

                var thisNode = noderesult.iterateNext();
                if (i != 0) {
                    if (self.pack[i].elem == oldelem) {
                        num++;
                    }
                    if (num != 0) {
                        for (var x = 0; x < num; x++) {
                            thisNode = noderesult.iterateNext();
                        }
                    } else {
                    }

                    /*
                     var child1 = React.SHP.createElement(thisNode.outerHTML, self.pack[i].text, null);
                     React.render(child1, thisNode.parentNode);
                     */

                    try {
                        React.SHP.render(thisNode.outerHTML, self.pack[i].text, self.pack[i].attr, true, thisNode.parentNode);
                    }
                    catch (err) {
                        console.log("Error on elem: " + self.pack[i].elem);
                    }

                    

                } else {

                    /*
                     var child1 = React.SHP.createElement(thisNode.outerHTML, self.pack[i].text, null);
                     React.render(child1, thisNode.parentNode);
                     */
                    try {
                        React.SHP.render(thisNode.outerHTML, self.pack[i].text, self.pack[i].attr, true, thisNode.parentNode);
                    }
                    catch (err) {
                        console.log("Error on elem: " + self.pack[i].elem);
                    }
                    

                }

                oldelem = self.pack[i].elem;
            }
        }

        self.set_setting('lang', myLang);
    };

    Lang.prototype.set_load_lang = function (myLang, myLangFile, isfirst) {
        var self = this;

        self.loadLangPack(function () {
            if (isfirst == true) {
                self.ready(function () {
                    self.set_lang(myLang);
                })
            } else {
                self.set_lang(myLang);
            }
        }, myLangFile, isfirst);

    };

    Lang.prototype.get_setting = function (setKey, defaultval) {
        var temp = null;
        if (typeof(Storage) !== "undefined") {
            temp = localStorage[setKey] || defaultval;
        } else {
            temp = defaultval;
        }
        return temp;
    };

    Lang.prototype.set_setting = function (setKey, setVal) {
        if (typeof(Storage) !== "undefined") {
            localStorage.setItem(setKey, setVal);
        }
    };

    Lang.prototype.loadJSON = function (callback, myfile) {
        var self = this;
        var xmlhttp = new XMLHttpRequest();

        try {
            xmlhttp.open('GET', myfile, true);
            xmlhttp.overrideMimeType("application/json");
            xmlhttp.setRequestHeader('Content-Type', 'application/json');
            xmlhttp.setRequestHeader('Accept-Encoding', 'gzip');
            xmlhttp.send(null);

            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

                    self.loadedfiles.push(myfile);
                    callback(xmlhttp.responseText);
                }
            };
        }
        catch (e) {
            localStorage.clear();
        }

    };

    Lang.prototype.UI = React.createClass({
        displayName: "ReactLanguageSelectorUI",
        propTypes: {
            items: React.PropTypes.array.isRequired,
            openMode: React.PropTypes.string,
            hoverTimeout: React.PropTypes.number,
            gridColumns: React.PropTypes.oneOfType([
                React.PropTypes.number,
                React.PropTypes.func
            ]),
            showFlag: React.PropTypes.bool,
            selectedLang: React.PropTypes.oneOfType([
                React.PropTypes.string,
                React.PropTypes.func
            ]),
            onPopupOpening: React.PropTypes.func,
            onPopupOpened: React.PropTypes.func,
            onPopupClosing: React.PropTypes.func,
            onPopupClosed: React.PropTypes.func,
            onLanguageChanged: React.PropTypes.func
        },
        getDefaultProps: function () {
            return {
                gridColumns: 1,
                showFlag: true,
                openMode: 'click',
                hoverTimeout: 200,
                selectedLang: null,
                onPopupOpening: null,
                onPopupOpened: null,
                onPopupClosing: null,
                onPopupClosed: null,
                onLanguageChanged: null
            };
        },
        getInitialState: function () {
            var itemsProp = this.props.items;
            var selectedLangProp = this.props.selectedLang;
            var selectedLang = null;
            for (var i = 0; i < itemsProp.length; i++) {
                var item = itemsProp[i];
                if (selectedLangProp === item.id) {
                    selectedLang = item;
                }
            }
            return {
                popupOpened: false,
                selectedLang: selectedLang ? selectedLang : itemsProp[0],
                closePopupTimeout: -1
            };
        },
        _documentClickHandler: function (evt) {
            this._processEvent({id: 'onPopupClosing'});
            this.setState({popupOpened: false});
            this._processEvent({id: 'onPopupClosed'});
        },
        _documentKeyHandler: function (evt) {
            if (evt.keyCode === 27) {
                this._processEvent({id: 'onPopupClosing'});
                this.setState({popupOpened: false});
                this._processEvent({id: 'onPopupClosed'});
            }
        },
        _processEvent: function (evt) {
            var onPopupOpeningProp = this.props.onPopupOpening;
            var onPopupOpenedProp = this.props.onPopupOpened;
            var onPopupClosingProp = this.props.onPopupClosing;
            var onPopupClosedProp = this.props.onPopupClosed;
            var onLanguageChangedProp = this.props.onLanguageChanged;

            if (evt.id === 'onPopupOpening') {
                if (onPopupOpeningProp) {
                    onPopupOpeningProp(this);
                }
            } else if (evt.id === 'onPopupOpened') {
                document.addEventListener('click', this._documentClickHandler);
                document.addEventListener('keydown', this._documentKeyHandler);
                if (onPopupOpenedProp) {
                    onPopupOpenedProp(this);
                }
            } else if (evt.id === 'onPopupClosing') {
                document.removeEventListener('click', this._documentClickHandler);
                document.removeEventListener('keydown', this._documentKeyHandler);
                if (onPopupClosingProp) {
                    onPopupClosingProp(this);
                }
            } else if (evt.id === 'onPopupClosed') {
                if (onPopupClosedProp) {
                    onPopupClosedProp(this);
                }
            } else if (evt.id === 'onLanguageChanged') {
                if (onLanguageChangedProp) {
                    onLanguageChangedProp(evt.selectedLang);
                }
            } else if (evt.id === 'clearClosePopupTimeout') {
                if (this.state.closePopupTimeout > -1) {
                    clearTimeout(this.state.closePopupTimeout);
                    this.state.closePopupTimeout = -1;
                }
            }
        },
        _onLanguageSelected: function (lang, evt) {
            evt.stopPropagation();
            this._processEvent({id: 'clearClosePopupTimeout'});
            this._processEvent({id: 'onPopupClosing'});
            this.setState({selectedLang: lang, popupOpened: false});
            this._processEvent({id: 'onPopupClosed'});
            this._processEvent({id: 'onLanguageChanged', selectedLang: lang});
            return false;
        },
        _onClick: function (evt) {
            evt.stopPropagation();
            if (this.state.popupOpened) {
                this._processEvent({id: 'onPopupClosing'});
                this.setState({popupOpened: false});
                this._processEvent({id: 'onPopupClosed'});
            } else {
                this._processEvent({id: 'onPopupOpening'});
                this.setState({popupOpened: true});
                this._processEvent({id: 'onPopupOpened'});
            }
            return false;
        },
        _onHover: function (enter, evt) {
            var _this = this;
            var hoverTimeoutProp = this.props.hoverTimeout;
            evt.stopPropagation();
            if (enter) {
                this._processEvent({id: 'clearClosePopupTimeout'});
                if (!this.state.popupOpened) {
                    this._processEvent({id: 'onPopupOpening'});
                    this.setState({popupOpened: true});
                    this._processEvent({id: 'onPopupOpened'});
                }
            } else {
                if (this.state.closePopupTimeout < 0) {
                    this.state.closePopupTimeout = setTimeout(function () {
                        _this._processEvent({id: 'onPopupClosing'});
                        _this.setState({popupOpened: false});
                        _this._processEvent({id: 'onPopupClosed'});
                    }, hoverTimeoutProp);
                }
            }
            return false;
        },
        render: function () {
            var _this = this;
            var itemsProp = this.props.items;
            var openMode = this.props.openMode;
            var gridColumnsProp = this.props.gridColumns;
            var showFlagsProp = this.props.showFlag;
            var langPerColumn = Math.round(itemsProp.length / gridColumnsProp);
            var selectedLang = this.state.selectedLang;
            var popupOpened = this.state.popupOpened;
            var liElements = [];

            var getTableColumns = function () {
                var myStyles = {};
                myStyles.cursor = 'pointer';
                var tableColumns = [];
                for (var i = 0; i < itemsProp.length; i++) {
                    var item = itemsProp[i];
                    var selectedItemClass = '';
                    if (item.id === selectedLang.id) {
                        selectedItemClass = 'rlsui-selected-locale';
                    }
                    if (showFlagsProp) {
                        liElements.push(React.createElement("li", {role: "presentation"},
                            React.createElement("a", {
                                    className: selectedItemClass,
                                    title: item.title,
                                    onClick: _this._onLanguageSelected.bind(_this, item),
                                    style: myStyles,
                                    role: "menuitem"
                                },
                                React.createElement("img", {src: item.flagImg, alt: item.flagTitle}), " ", item.name)
                        ));
                    } else {
                        liElements.push(React.createElement("li", {role: "presentation"},
                            React.createElement("a", {
                                className: selectedItemClass,
                                title: item.title,
                                onClick: _this._onLanguageSelected.bind(_this, item),
                                style: myStyles,
                                role: "menuitem"
                            }, " ", item.name)
                        ));
                    }
                    if (((i + 1) % langPerColumn) === 0) {
                        tableColumns.push(liElements);
                        liElements = [];
                    }
                }

                if (liElements.length > 0) {
                    tableColumns.push(liElements);
                    liElements = [];
                }

                return tableColumns;
            };

            var getSelectedLanguage = function () {
                var myStyles = {};
                myStyles.cursor = 'pointer';
                var flagEl = '';
                var caretEl = '';
                caretEl = React.createElement("div", { className: 'expand_caret' });
                if (showFlagsProp) {
                    flagEl = React.createElement("img", {src: selectedLang.flagImg, alt: selectedLang.flagTitle});
                }
                if (openMode === 'hover') {
                    return React.createElement("a", {
                        className: "rlsui-selected-locale dropdown-toggle",
                        onMouseEnter: _this._onHover.bind(_this, true),
                        onMouseLeave: _this._onHover.bind(_this, false),
                        style: myStyles,
                        id: "drop_rls",
                        'data-toggle': "dropdown",
                        'aria-haspopup': "true",
                        role: "button",
                        'aria-expanded': "false"
                    }, flagEl, " ", selectedLang.name, caretEl);
                } else {

                    if (popupOpened) {
                        return React.createElement("a", {
                            className: "rlsui-selected-locale dropdown-toggle nav-link navbar-textsmall",
                            onClick: _this._onClick,
                            style: myStyles,
                            id: "drop_rls",
                            'data-toggle': "dropdown",
                            'aria-haspopup': "true",
                            role: "button",
                            'aria-expanded': "true"
                        }, flagEl, " ", selectedLang.name, caretEl);
                    }
                    else {
                        return React.createElement("a", {
                            className: "rlsui-selected-locale dropdown-toggle nav-link navbar-textsmall",
                            onClick: _this._onClick,
                            style: myStyles,
                            id: "drop_rls",
                            'data-toggle': "dropdown",
                            'aria-haspopup': "true",
                            role: "button",
                            'aria-expanded': "false"
                        }, flagEl, " ", selectedLang.name, caretEl);
                    }
                   
                }
            };

            var getPopup = function () {
                var popupStyles = {};
                if (!popupOpened) {
                    popupStyles.display = 'none';
                }
                if (openMode === 'hover') {
                    return React.createElement("ul", {
                        className: "rlsui-language-container-scrollable dropdown-menu navbar-lang pull-right",

                            onMouseEnter: _this._onHover.bind(_this, true),
                            onMouseLeave: _this._onHover.bind(_this, false),
                            'aria-labelledby': "drop_rls",
                            role: "menu"
                        },

                        getTableColumns()
                    );
                } else {
                    if (popupOpened) {
                        return React.createElement("ul", {
                            className: "rlsui-language-container-scrollable dropdown-menu navbar-lang show pull-right",'aria-labelledby': "drop_rls",
                            role: "menu"
                        },

                            getTableColumns()
                        );
                    }
                    else {
return React.createElement("ul", {
    className: "rlsui-language-container-scrollable navbar-lang dropdown-menu pull-right",

                            'aria-labelledby': "drop_rls",
                            role: "menu"
                        },

                        getTableColumns()
                    );
                    }
                    
                }
            };

            if (popupOpened) {
                return React.createElement("li", {className: "react-language-selector-ui nav-item dropdown show"}, getSelectedLanguage(), " ", getPopup());
            }
            else {
                return React.createElement("li", { className: "react-language-selector-ui nav-item dropdown"}, getSelectedLanguage(), " ", getPopup());
            }
        }
    });

    return Lang;
})();