<html>
<body style="margin: 0">
    <script type="text/javascript" src="{{ url_for('static', filename='js/jquery-2.1.1.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='js/jquery-ui-1.10.4.min.js') }}"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="{{ url_for('static', filename='elfinder/css/elfinder.min.css') }}">
    <link rel="stylesheet" type="text/css" media="screen" href="{{ url_for('static', filename='elfinder/css/theme-gray.css') }}">
    <script type="text/javascript" src="{{ url_for('static', filename='elfinder/elfinder.full.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='elfinder/i18n/elfinder.pl.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='js/socket.io.js') }}"></script>
    <script type="text/javascript" charset="utf-8">
        var socket = io.connect('/elfinder');
        socket.on('connect', function () {
            console.log("Connect")
        });
        socket.on('data', function (msg) {
            var sid = msg.sid;
            init_elfinder(sid);
        });

        function init_elfinder(sid) {
            var elf;
            var opts = {
	    		uiOptions : {
	    			toolbar: [
                        ['back', 'forward'],
                        ['mkdir', 'mkfile'],
                        ['copy', 'cut', 'paste'],
                        ['rm'],
                        ['rename'],
                        ['view']
                    ]
	    		},
                customData: {'sid': sid},
                height: $(window).height(),
	    		url: '{{ url_for("sftp_host_connector_view", host=host) }}',
                resizable: false,
                lang: 'pl',
                requestType: 'get',
                contextmenu: {
                    navbar: [
                        'rm'
                    ],
                    cwd: [
                        'reload', 'back', '|', 'mkdir', 'mkfile', '|',
                        'upload'
                    ],
                    files: [
                        'rm', 'rename', 'download'
                    ]
                },
                rememberLastDir: false,
                placesFirst: false,
                reloadClearHistory: true
	    	};
	    	var start = function(lng) {
	    		$(function() {
	    			// Make elFinder (REQUIRED)
                    opts.lang = lng;
	    			elf = $('#elfinder').elfinder(opts).elfinder('instance');
	    		});
	    	};
	    	var load = function () {
                var loct = window.location.search;
		        var full_lng, locm, lng;
     		    if (loct && (locm = loct.match(/lang=([a-zA-Z_-]+)/))) {
          		    full_lng = locm[1];
          	    } else {
          	    	full_lng = (navigator.browserLanguage || navigator.language || navigator.userLanguage);
          	    }
          	    lng = full_lng.substr(0,2);
          	    if (lng === 'ja') {
                    lng = 'jp';
                }
          	    else if (lng === 'pt') {
          	        lng = 'pt_BR';
                }
          	    else if (lng === 'zh') {
          	        lng = (full_lng.substr(0,5) == 'zh-tw')? 'zh_TW' : 'zh_CN';
                }
                if (lng !== 'en') {
        		    $.ajax({
        		    	url : "{{ url_for('static', filename='elfinder/i18n/') }}"+'/elfinder.'+lng+'.js',
        		    	cache : true,
        		    	dataType : 'script'
        		    })
        		    .done(function() {
        		    	start(lng);
        		    })
        		    .fail(function() {
        		    	start('en');
        		    });
	           } else {
	           	    start(lng);
	           }


            };
	    	load();
            var resizeTimer;
            $(window).resize(function () {
                resizeTimer && clearTimeout(resizeTimer);
                if (!$('#elfinder').hasClass('elfinder-fullscreen')) {
                    resizeTimer = setTimeout(function () {
                        var h = parseInt($(window).height());
                        if (h != parseInt($('#elfinder').height())) {
                            elf.resize('100%', h);
                        }
                    }, 200);
                }
            });
        }

    </script>
<div id="elfinder"></div>
</body>
</html>
