*: remove crlf line endings

a427fab6 · Őry Máté · a5871282 · a427fab6 · a427fab6 · a427fab6
Commit a427fab6 authored Feb 25, 2013 by Őry Máté
28 changed files
--- a/miscellaneous/temp-design/template-group.html
+++ b/miscellaneous/temp-design/template-group.html
 <!DOCTYPE html>
 <html lang="hu-hu">
 <head>
    <title>IK Cloud</title>
    <link href='http://fonts.googleapis.com/css?family=Metrophobic' rel='stylesheet' type='text/css'>
    <link rel="icon" type="image/png" href="/static/favicon.png" />
    <link rel="icon" type="image/png" href="one/static/favicon.png">
    <link rel="stylesheet/less" href="../../one/static/style.less" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script src="../../one/static/jquery.min.js"></script>
    <script src="../../one/static/less.min.js"></script>
    <script type="text/javascript">
    var toggleDetails1;
    var toggleDetails2;
 $(function(){
    $('.wm .summary').each(function(){
      this.originalHeight=parseInt($(this).next('.details').css('height'));
    })
    toggleDetails1=function(){
      if($(this).next('.details').is(':hidden')){
            $(this).next('.details').slideDown(700);
        } else {
            $(this).next('.details').slideUp(700);
        }
    }
    toggleDetails2=function(){
      if($(this).next('.template-details').is(':hidden')){
            $(this).next('.template-details').slideDown(400);
        } else {
            $(this).next('.template-details').slideUp(400);
        }
    }
    $('.wm .summary').click(toggleDetails1);
    $('#template .wm .summary').click(toggleDetails2);
    $('#load-more-files').click(function(){
        $('.actions', this).show();
        var that=this;
        setTimeout(function(){
            $(that).prev('li').slideDown(500,function(){
                $('.actions', that).hide();
            });
        },2000);
    })
    $('#new-wm-button').click(function(){
        $('#modal').show();
        $('#modal-container').html($('#new-wm').html());
        $('#modal-container .wm .summary').each(function(){
            this.originalHeight=parseInt($(this).next('.details').css('height'));
        })
        $('#modal-container .wm .summary').click(toggleDetails);
        });
    $('#new-template-button').click(function(){
        $('#modal').show();
        $('#modal-container').html($('#new-template').html());
    });
    $('#shadow').click(function(){
        $('#modal').hide();
    })
    $('#new-template-button').click(function(){
        $.get('/ajax/templateWizard', function(data){
            $('#modal-container').html(data);
        })
        $('#modal').show();
    });
 })
        </script>
 </head>
 <body>
    <div id="header">
            <div id="loginblock"><p>
                   Bejelentkezve: cloud.
                   <a href="/logout/">Kijelentkezés</a>.
                   <a href="/admin/">Admin</a>.
               </p>
           </div>
            <h1><a href="/">IK Cloud <span style="font-size: 21px">&beta;</span></a></h1>
    </div>
    <div id="content">
 <div class="boxes">
    <div class="contentblock" id="state">
        <h2>Virtuális gépek</h2>
        <ul class="wm-list">
 <li class="wm">
    <div class="summary">
        <div class="name wm-on">
            cloud test (32)
        </div>
        <div class="status">
            ACTIVE
        </div>
        <div class="actions">
            <a href="rdp:cloud:Q4EUrggGvr:152.66.243.62:3389" title="Csatlakozás"><img src="../../one/static/icons/plug.png" alt="connect" /></a>
            <a href="/vm/suspend/7/" onclick="alert('Hamarosan a mozikban.'); return false" title="Felfüggesztés"><img src="../../one/static/icons/control-pause.png" alt="pause" /></a>
            <a href="/vm/delete/7/" onclick="return confirm('Biztosan törli a gépet?')" title="Törlés"><img src="../../one/static/icons/minus-circle.png" alt="delete" /></a>
            <a href="/vm/reset/7/" onclick="alert('Hamarosan a mozikban.'); return false" title="Újraindítás"><img src="../../one/static/icons/arrow-circle-double.png" alt="↺" /></a>
        </div>
        <div class="clear"></div>
    </div>
    <div class="details">
        <div class="container">
            <ul>
                <li class="name">Gép neve: <span class="value">cloud test (32)</span></li>
                <li class="os-linux">Operációs rendszer: <span class="value">Copy of ttylinux - kvm</span></li>
                <li class="type">Instance típus: <span class="value">small</span></li>
                <li class="date">Létrehozás dátuma: <span class="value">2013. január 30. 14.56.34</span></li>
                <li class="date">Lejáratig: <span class="value"><abbr title="1 nap, 5 óra, 34 perc">1 nap</abbr></span></li>
                <li>&nbsp;<span class="value"><a href="/vm/show/7/" title="cloud test (32)">További részletek</a></span></li>
            </ul>
        </div>
    </div>
 </li>
            <li id="new-wm-button" class="wm new">
                <div class="summary">
                    <div class="name">Új gép indítása</div>
                    <div class="clear"></div>
                </div>
            </li>
            <li id="new-wm" style="display: none">
                <h2>Rendelkezésre álló sablonok</h2>
                <p>
                    Mese, hogy mit is lehet csinálni.
                </p>
                <div class="container">
                    <ul class="wm-list modal">
                        <li class="wm">
                            <form method="POST" action="/vm/new/2/"><div style='display:none'><input type='hidden' name='csrfmiddlewaretoken' value='QQdfjrFaIqdVw8NqhxyPVQIeuiHIzxjJ' /></div>
                                <div class="summary">
                                    <div class="name wm-on">test</div>
                                    <div class="status">
                                        3/10
                                    </div>
                                    <div class="clear"></div>
                                </div>
                                <div class="details">
                                    <h3>
                                        Részletek
                                    </h3>
                                    <ul>
                                        <li class="name">Rendszer: <span class="value">Copy of ttylinux - kvm</span></li>
                                        <li class="type">Instance típus: <span class="value">small</span></li>
                                        <li class="memory">Memória: <span class="value">100 MiB</span></li>
                                        <li class="cpu">CPU magok: <span class="value">1</span></li>
                                        <li>&nbsp;<span class="value"><input type="submit" value="Indítás"/></span></li>
                                    </ul>
                                </div>
                            </form>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
    <div class="contentblock" id="template">
        <h2>Saját sablonok</h2>
        <ul class="wm-list">
            <li class="wm">
                <div class="summary">
                    <div class="quota">
                        <div class="used" style="background-color: rgba(0,255,0,0.2); width: 20%"></div>
                    </div>
                    <div class="name">Win7 Matlab (1$/instance)</div>
                    <div class="status">2$/10$</div>
                    <div class="actions">
                        <a href="#" title="Átnevezés"><img src="../../one/static/icons/pencil.png" alt="rename" /></a>
                        <a href="#" title="Törlés"><img src="../../one/static/icons/minus-circle.png" alt="delete" /></a>
                        <a href="#" title="Megosztás"><img src="../../one/static/icons/user-share.png" alt="share" /></a>
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="template-details">
                    <ul>
                        <li>
                            <div class="quota">
                                <div class="used" style="background-color: rgba(0,255,0,0.2); width: 16%"></div>
                            </div>
                            <div class="group-name">
                                <a href="#">Csoport1 (6 user)</a>
                            </div>
                            <div class="status">
                                1/6 (1 instance/user)
                            </div>
                            <div class="clear"></div>
                        </li>
                        <li>
                            <div class="quota">
                                <div class="used" style="background-color: rgba(0,255,0,0.2); width: 25%"></div>
                            </div>
                            <div class="group-name">
                                <a href="#">Csoport2 (2 user)</a>
                            </div>
                            <div class="status">
                                1/4 (2 instance/user)
                            </div>
                            <div class="clear"></div>
                        </li>
                    </ul>
                </div>
            </li>
            <li class="wm">
                <div class="summary">
                    <div class="quota">
                        <div class="used" style="background-color: rgba(255,128,0,0.2); width: 50%"></div>
                    </div>
                    <div class="name">Linux Java (1$/instance)</div>
                    <div class="status">20$/40$</div>
                    <div class="actions">
                        <a href="#" title="Átnevezés"><img src="../../one/static/icons/pencil.png" alt="rename" /></a>
                        <a href="#" title="Törlés"><img src="../../one/static/icons/minus-circle.png" alt="delete" /></a>
                        <a href="#" title="Megosztás"><img src="../../one/static/icons/user-share.png" alt="share" /></a>
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="template-details">
                    <ul>
                        <li>
                            <div class="quota">
                                <div class="used" style="background-color: rgba(255,0,0,0.2); width: 100%"></div>
                            </div>
                            <div class="group-name">
                                <a href="#">Csoport1 (6 user)</a>
                            </div>
                            <div class="status">
                                6/6 (1 instance/user)
                            </div>
                            <div class="clear"></div>
                        </li>
                        <li>
                            <div class="quota">
                                <div class="used" style="background-color: rgba(255,128,0,0.2); width: 75%"></div>
                            </div>
                            <div class="group-name">
                                <a href="#">Csoport2 (4 user)</a>
                            </div>
                            <div class="status">
                                3/4 (1 instance/user)
                            </div>
                            <div class="clear"></div>
                        </li>
                        <li>
                            <div class="quota">
                                <div class="used" style="background-color: rgba(0,255,0,0.2); width: 10%"></div>
                            </div>
                            <div class="group-name">
                                <a href="#">Csoport3 (5 user)</a>
                            </div>
                            <div class="status">
                                1/10 (2 instance/user)
                            </div>
                            <div class="clear"></div>
                        </li>
                        <li>
                            <div class="quota">
                                <div class="used" style="background-color: rgba(200,200,0,0.2); width: 50%"></div>
                            </div>
                            <div class="group-name">
                                <a href="#">Csoport4 (20 user)</a>
                            </div>
                            <div class="status">
                                10/20 (1 instance/user)
                            </div>
                            <div class="clear"></div>
                        </li>
                    </ul>
                </div>
            </li>
            <li id="new-template-button" class="wm new">
                <div class="summary">
                    <div class="name">Új Sablon</div>
                    <div class="clear"></div>
                </div>
            </li>
            <li class="wm small">
                <div class="summary">
                    <div class="quota">
                        <div class="used" style="background-color: rgba(0,255,0,0.5); width: 19%"></div>
                    </div>
                    <div class="name">Kvóta: 50/100</div>
                    <div class="clear"></div>
                </div>
            </li>
        </ul>
    </div>
 </div>
 <div class="boxes">
    <div class="contentblock">
        <h2>
            Adattár
        </h2>
        <div class="content">
            <ul class="file-list">
                <li class="wm">
                    <div class="summary">
                        <div class="name filetype-c">hello.c</div>
                        <div class="info">1 Kb</div>
                        <div class="actions">
                            <a href="#"><img src="../../one/static/icons/pencil.png" alt="rename" /></a>
                            <a href="#"><img src="../../one/static/icons/minus-circle.png" alt="delete" /></a>
                            <a href="#"><img src="../../one/static/icons/download-cloud.png" alt="download" /></a>
                        </div>
                        <div class="clear"></div>
                    </div>
                    <div class="details">
                        <h3>Részletek</h3>
                        <ul>
                            <li>Létrehozva: <span class="value">2012.12.29. 23:12</span></li>
                            <li>Módosítva: <span class="value">2012.12.29. 23:12</span></li>
                            <li>Hozzáférés: <span class="value">2012.12.29. 23:12</span></li>
                            <li>Típus: <span class="value">text/plain</span></li>
                        </ul>
                    </div>
                </li>
                <li class="wm">
                    <div class="summary">
                        <div class="name filetype-image">suna.jpg</div>
                        <div class="info">1 Kb</div>
                        <div class="actions">
                            <a href="#"><img src="../../one/static/icons/pencil.png" alt="rename" /></a>
                            <a href="#"><img src="../../one/static/icons/minus-circle.png" alt="delete" /></a>
                            <a href="#"><img src="../../one/static/icons/download-cloud.png" alt="download" /></a>
                        </div>
                        <div class="clear"></div>
                    </div>
                    <div class="details">
                        <h3>Részletek</h3>
                        <ul>
                            <li>Létrehozva: <span class="value">2012.12.29. 23:12</span></li>
                            <li>Módosítva: <span class="value">2012.12.29. 23:12</span></li>
                            <li>Hozzáférés: <span class="value">2012.12.29. 23:12</span></li>
                            <li>Típus: <span class="value">image/jpg</span></li>
                        </ul>
                    </div>
                </li>
                <li class="wm">
                    <div class="summary">
                        <div class="name filetype-folder">poresz</div>
                        <div class="info">katalógus</div>
                        <div class="actions">
                            <a href="#"><img src="../../one/static/icons/pencil.png" alt="rename" /></a>
                            <a href="#"><img src="../../one/static/icons/minus-circle.png" alt="delete" /></a>
                        </div>
                        <div class="clear"></div>
                    </div>
                    <div class="details">
                        <h3>Részletek</h3>
                        <ul>
                            <li>Létrehozva: <span class="value">2012.12.29. 23:12</span></li>
                            <li>Módosítva: <span class="value">2012.12.29. 23:12</span></li>
                            <li>Hozzáférés: <span class="value">2012.12.29. 23:12</span></li>
                            <li>Fájlok: <span class="value">666 db</span></li>
                        </ul>
                    </div>
                </li>
                <li class="wm" style="display: none">
                    <div class="summary">
                        <div class="name filetype-text">matlab_serial.txt</div>
                        <div class="info">358 Kb</div>
                        <div class="actions">
                            <a href="#"><img src="../../one/static/icons/pencil.png" alt="rename" /></a>
                            <a href="#"><img src="../../one/static/icons/minus-circle.png" alt="delete" /></a>
                            <a href="#"><img src="../../one/static/icons/download-cloud.png" alt="download" /></a>
                        </div>
                        <div class="clear"></div>
                    </div>
                    <div class="details">
                        <h3>Részletek</h3>
                        <ul>
                            <li>Létrehozva: <span class="value">2012.12.29. 23:12</span></li>
                            <li>Módosítva: <span class="value">2012.12.29. 23:12</span></li>
                            <li>Hozzáférés: <span class="value">2012.12.29. 23:12</span></li>
                            <li>Típus: <span class="value">text/plain</span></li>
                        </ul>
                    </div>
                </li>
                <li class="file-details wm" id="load-more-files">
                    <div class="summary">
                        <div class="name filetype-more">
                            Mutasd a régebbi fájlokat!
                        </div>
                        <div class="actions" style="text-align: right; display: none">
                            <img src="/static/load-4.gif" alt="loading" />
                        </div>
                        <div class="clear"></div>
                    </div>
                </li>
                <li class="file-upload wm">
                    <div class="summary">
                        <div class="name filetype-up">Fájlfeltöltés</div>
                        <div class="clear"></div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
 </div>
        <div class="clear"></div>
    </div>
    <div id="modal" style="display: none">
        <div id="shadow"></div>
        <div id="modal-container">
        </div>
    </div>
 </body>
 </html>
--- a/one/static/script/cloud.js
+++ b/one/static/script/cloud.js
 var toggleDetails;
 $(function() {
    toggleDetails = cloud.throttle(function() {
        if($(this).parent('.entry').hasClass('opened')) {
            $(this).parent('.entry').removeClass('opened');
            $(this).next('.details').slideUp(700);
        } else {
            $(this).parent('.entry').addClass('opened');
            $(this).next('.details').slideDown(700);
        }
    })
    $('a').click(function(e){
        e.stopPropagation();
    });
    $('.delete-template').click(function(e) {
        e.preventDefault();
        e.stopPropagation();
        delete_template_confirm($(this).data('id'), $(this).data('name'));
    });
    $('.delete-key').click(function(e) {
        var id = $(this).data('id');
        e.preventDefault();
        e.stopPropagation();
        vm_confirm_popup(gettext('Are you sure deleting key?'), gettext('Delete'), function() {
            $.ajax({
                'type': 'POST',
                'data': 'id=' + id,
                'url': '/ajax/key/delete/',
                'success': function() {
                    $('#key-' + id).slideUp(700);
                }
            });
        });
    });
    $('#reset-key').click(function(e){
        vm_confirm_popup(gettext('Are you sure about reseting store credentials?<br /> You will lose your access to your store account on your existing virtual machines!'), gettext('Reset'), function(){
            $.ajax({
                type: 'POST',
                url: '/ajax/key/reset/',
                success: function(){
                    window.location.reload();
                }
            })
        });
    });
    $('.entry .summary').click(toggleDetails);
    if(window.navigator.userAgent.indexOf('cloud-gui') < 0) {
        $('.connect-vm').click(function(e) {
            e.preventDefault();
            e.stopPropagation();
            get_vm_details($(this).data('id'));
        });
    } else {
        $('.connect-vm').click(function(e) {
            e.stopPropagation();
        });
    }
    $('.rename-vm').click(function(e) {
        e.preventDefault();
        e.stopPropagation();
        var id = $(this).data('id');
        var oldName = $(this).data('name');
        $('#vm-' + id + '-name-details').hide();
        $('#vm-' + id + '-name').html('<input type="text" value="' + oldName + '" />\
 <input type="submit" value="' + gettext('Rename') + '" />');
        $('#vm-' + id + '-name').find('input[type="text"]').click(function(f) {
            f.preventDefault();
            f.stopPropagation();
        }).focus();
        $('#vm-' + id + '-name').find('input[type=submit]').click(function(f) {
            f.preventDefault();
            f.stopPropagation();
            var newName = $(this).prev().val();
            $.ajax({
                type: 'POST',
                data: 'name=' + newName,
                dataType: 'json',
                url: '/ajax/vm/rename/' + id + '/',
                success: function(data) {
                    $('#vm-' + id + '-name-details').removeAttr('style');
                    $('#vm-' + id + '-name').text(data.name);
                }
            });
        })
    });
    $('.try-template').click(function(e) {
        e.preventDefault();
        e.stopPropagation();
        new_vm($(this).data('id'));
    });
    $('.stop-vm').click(function(e) {
        e.preventDefault();
        e.stopPropagation();
        stop_vm($(this).data('id'), $(this).data('name'));
    });
    $('.resume-vm').click(function(e) {
        e.preventDefault();
        e.stopPropagation();
        manage_vm($(this).data('id'), "resume");
    });
    $('.delete-vm').click(function(e) {
        e.preventDefault();
        e.stopPropagation();
        delete_vm($(this).data('id'), $(this).data('name'));
    });
    $('.restart-vm').click(function(e) {
        e.preventDefault();
        e.stopPropagation();
        restart_vm($(this).data('id'), $(this).data('name'));
    });
    $('.renew-suspend-vm').click(function(e) {
        e.preventDefault();
        e.stopPropagation();
        renew_suspend_vm($(this).data('id'))
    });
    $('.renew-delete-vm').click(function(e) {
        e.preventDefault();
        e.stopPropagation();
        renew_delete_vm($(this).data('id'))
    });
    $('#new-vm-button').click(function() {
        $('#modal').show();
        $('#modal-container').html($('#new-vm').html());
        $('#modal-container .entry .summary').click(toggleDetails);
    });
    $('#new-template-button').click(function() {
        $.get('/ajax/templateWizard', function(data) {
            $('#modal-container').html(data);
        })
        $('#modal').show();
    });
    $('#shadow').click(function() {
        $('#modal').hide();
        $('#modal-container').html('');
    })
    $('.template-share').click(function(e) {
        e.preventDefault();
        e.stopPropagation();
        $.get('/ajax/share/' + $(this).data('id') + '/' + $(this).data('gid'), function(data) {
            $('#modal-container').html(data);
        })
        $('#modal').show();
    });
    $('.template-unshare').click(function(e){
        e.stopPropagation();
    });
    $('#old-upload').click(function(e) {
        e.preventDefault();
        $(this).parent().parent().hide().parent().find('#old-upload-form').show();
        return false;
    });
    $('.quota .used').each(function() {
        var s = this;
        $(this).css('backgroundColor', function(w) {
            return 'hsla(' + (120 - parseFloat(w) / 100 * 120).toFixed(0) + ', 100%, 50%, 0.2)';
        }($(this)[0].style.width));
        if(parseInt($(this).css('width')) > 0) $(this).css('borderRight', function(w) {
            return '1px solid hsla(' + (120 - parseFloat(w) / 100 * 120).toFixed(0) + ', 100%, 30%, 0.4)';
        }($(this)[0].style.width));
    });
    $('#new-folder').click(function() {
        $('#new-folder-form input')[0].focus();
    });
    $('#new-group').click(function() {
        var content = $('#new-group-wizard').html();
        $('#new-group-wizard').html('');
        $('#modal').show();
        $('#modal-container').html(content);
        $('#shadow').click(function() {
            $('#new-group-wizard').html(content);
        })
        function updateSummary() {
            $('#new-group-summary-name').html($('#new-group-name').val());
            $('#new-group-summary-count').html(function(text) {
                var m = text.match(/\s*[a-z][0-9a-z]{5}\s*(\r|\n|$)+/gi);
                return m ? m.length : 0;
            }($('#new-group-members').val()));
            $('#new-group-summary-semester').html($('#new-group-semester')[0].options[$('#new-group-semester')[0].selectedIndex].innerHTML)
        }
        $('#new-group-name').change(updateSummary);
        $('#new-group-semester').change(updateSummary);
        $('#new-group-members').change(updateSummary);
    });
    $('.hidden-password').click(function() {
        if($(this).attr('type') == 'password'){
            $(this).attr('type', 'text');
            $(this).addClass('shown');
        } else {
            $(this).attr('type', 'password');
            $(this).removeClass('shown');
        }
    });
    $('.selected-summary').next().show();
    /**
     * Connect button new window
     */
    function get_vm_details(id) {
        $.get('/vm/credentials/' + id, function(data) {
            $('#modal-container').html(data);
            $('#modal-container .hidden-password').click(function() {
                if($(this).attr('type') == 'password'){
                    $(this).attr('type', 'text');
                    $(this).addClass('shown');
                } else {
                    $(this).attr('type', 'password');
                    $(this).removeClass('shown');
                }
            })
        })
        $('#modal').show();
    };
    /**
     * Confirm pop-up window
     */
    function vm_confirm_popup(confirm_message, button_text, success) {
        $('#modal').show();
        $('#modal-container').html(confirm_message + '<br /><input class="ok" type="button" value="' + button_text + '" style="float: left"/><input class="cancel" type="button" value="' + gettext('Cancel') + '" style="float: right" />');
        $('#modal-container .ok').click(function() {
            $('#modal').hide();
            success();
        });
        $('#modal-container .cancel').click(function() {
            $('#modal').hide();
        });
    }
    /**
     * Manage VM State (STOP)
     */
    function stop_vm(id, name) {
        confirm_message = interpolate(gettext("Are you sure stopping %s?"), ["<strong>" + name + "</strong>"])
        vm_confirm_popup(confirm_message, gettext("Stop"), function() {
            manage_vm(id, "stop")
        });
    }
    /**
     * Manage VM State (DELETE)
     */
    function delete_vm(id, name) {
        confirm_message = interpolate(gettext("Are you sure deleting %s?"), ["<strong>" + name + "</strong>"])
        vm_confirm_popup(confirm_message, gettext("Delete"), function() {
            manage_vm(id, "delete")
        })
    }
    /**
     * Manage VM State (RESET)
     */
    function restart_vm(id, name) {
        confirm_message = interpolate(gettext("Are you sure restarting %s?"), ["<strong>" + name + "</strong>"])
        vm_confirm_popup(confirm_message, gettext("Restart"), function() {
            manage_vm(id, "restart")
        })
    }
    /**
     * Manage VM State (RESUME)
     */
    function resume_vm(id, name) {
        manage_vm(id, "resume")
    }
    /**
     * Renew vm suspend time.
     */
    function renew_suspend_vm(id) {
        manage_vm(id, "renew/suspend")
    }
    /**
     * Renew vm deletion time.
     */
    function renew_delete_vm(id) {
        manage_vm(id, "renew/delete")
    }
    /**
     * Manage VM State generic
     */
    function manage_vm(id, state) {
        $.ajax({
            type: 'POST',
            url: '/vm/' + state + '/' + id + '/',
            success: function(data, b, c) {
                if(state == "resume") {
                    window.location.href = '/vm/show/' + id + "/";
                } else {
                    window.location.reload();
                }
            }
        })
    }
    /**
     * New VM
     */
    function new_vm(template_id) {
        $.ajax({
            type: 'POST',
            url: '/ajax/vm/new/' + template_id + '/',
            success: function(data, b, xhrRequest) {
                window.location.href = '/'; //xhrRequest.getResponseHeader("Location");
                //alert(xhrRequest.getResponseHeader("Location"));
                window.location.href = xhrRequest.getResponseHeader("Location");
            }
        })
    }
    /**
     * Template delete
     */
    function delete_template_confirm(id, name) {
        confirm_message = interpolate(gettext("Are you sure deleting this %s template?"), ["<strong>" + name + "</strong>"])
        vm_confirm_popup(confirm_message, gettext("Delete"), function() {
            delete_template(id)
        })
    }
    /**
     * Template delete
     */
    function delete_template(id) {
        $.ajax({
            type: 'POST',
            url: '/ajax/template/delete/',
            data: 'id=' + id,
            dataType: 'json',
            statusCode: {
                404: function(data) {
                    alert(data['responseText']);
                },
                200: function(data) {
                    $("#t" + id).remove()
                },
            }
        })
    }
    function hide_group(id) {
        var hidden_groups = JSON.parse(window.localStorage.getItem('hidden_groups')) || {};
        var hidden_groups_for_user = hidden_groups[current_user] || [];
        for(var i in hidden_groups_for_user) {
            var hide = hidden_groups_for_user[i];
            if(hide == id) return false;
        }
        hidden_groups_for_user.push(id);
        hidden_groups[current_user] = hidden_groups_for_user;
        window.localStorage.setItem('hidden_groups', JSON.stringify(hidden_groups));
        $('#group-' + id).slideUp(700);
    }
    function hide_groups() {
        var hidden_groups = JSON.parse(window.localStorage.getItem('hidden_groups')) || {};
        var hidden_groups_for_user = hidden_groups[current_user] || [];
        for(var i in hidden_groups_for_user) {
            var hide = hidden_groups_for_user[i];
            $('#group-' + hide).hide();
        }
    }
    function show_hidden_groups() {
        var hidden_groups = JSON.parse(window.localStorage.getItem('hidden_groups')) || {};
        hidden_groups[current_user] = [];
        window.localStorage.setItem('hidden_groups', JSON.stringify(hidden_groups));
    }
    hide_groups();
    function hidden_group_count() {
        var hidden_groups = JSON.parse(window.localStorage.getItem('hidden_groups')) || {};
        return(hidden_groups[current_user] || []).length;
    }
    if(hidden_group_count() == 0) {
        $('#show-hidden-groups').hide();
    }
    $('.hide-group').click(function(e) {
        e.preventDefault();
        e.stopPropagation();
        hide_group($(this).data('id'));
        if($('#show-hidden-groups').is(':hidden')) {
            $('#show-hidden-groups').slideDown(700);
        }
        return false;
    });
    $('#show-hidden-groups').click(function(e) {
        e.preventDefault();
        e.stopPropagation();
        show_hidden_groups();
        $('#show-hidden-groups').slideUp(700);
        $('#groups > li').each(function() {
            if($(this).is(':hidden')) {
                $(this).slideDown(700);
            }
        })
    })
    $('#new-member').click(function() {
        $('#new-member-form').toggle();
    });
    $('#new-member-form input').click(function(e) {
        e.stopPropagation();
    });
    $('#new-member-form input[type=submit]').click(function() {
        var neptun = $(this).prev().val();
        $.ajax({
            type: 'POST',
            url: '/ajax/group/' + $(this).data('id') + '/add/',
            data: 'neptun=' + neptun,
            dataType: 'json',
            success: function(data) {
                window.location.reload();
            }
        }).error(function(data) {
            //TODO: fancy modal alert
            alert(JSON.parse(data.responseText).status);
        })
    });
    $('#new-owner').click(function() {
        $('#new-owner-form input[type=text]').focus();
    });
    $('#new-owner-form input').click(function(e) {
        e.stopPropagation();
    });
    $('#new-owner-form input').keyup(function() {
        var timer;
        return function(e){
            var val=$(this).val().split(' ')[0];
            clearTimeout(timer);
            timer=setTimeout(function(){
                if(val.length<1) return;
                $.ajax({
                    type: 'POST',
                    data: 'q='+val,
                    url: '/ajax/group/autocomplete/',
                    dataType: 'json',
                    success: function(data){
                        console.log(data);
                        $('#new-owner-autocomplete')[0].innerHTML='<ul>';
                        var el=$('#new-owner-autocomplete')[0];
                        for(var i in data){
                            var d=data[i];
                            el.innerHTML+='<li>'
                                +d.name+': '
                                +d.neptun
                                +' <input type="button" value="'+gettext('Add owner')+'" data-neptun="'+d.neptun+'" />'
                                +'<div class="clear"></div></li>';
                        }
                        if(data.length == 0){
                            el.innerHTML+='<li>'
                                +gettext('Unknown')+': '
                                +val
                                +' <input type="button" value="'+gettext('Add owner')+'" data-neptun="'+val+'" />'
                                +'<div class="clear"></div></li>';
                        }
                        el.innerHTML+='</ul>';
                        $(el).find('input').each(function(){
                            var self=this;
                            $(this).click(function(e){
                                e.stopPropagation();
                                $.ajax({
                                    type: 'POST',
                                    data: 'neptun='+$(self).data('neptun'),
                                    url: '/ajax/group/'+$('#new-owner').data('gid')+'/addOwner/',
                                    dataType: 'json',
                                    success: function(data){
                                        window.location.reload();
                                    }
                                })
                            })
                        })
                    }
                });
            },1000);
            e.stopPropagation();
        }
    }());
    $('#new-owner-form input[type=submit]').click(function() {
        var neptun = $(this).prev().val();
        $.ajax({
            type: 'POST',
            url: '/ajax/group/' + $(this).data('id') + '/add/',
            data: 'neptun=' + neptun,
            dataType: 'json',
            success: function(data) {
                window.location.reload();
            }
        }).error(function(data) {
            //TODO: fancy modal alert
            alert(JSON.parse(data.responseText).status);
        })
    });
    $('#group-members .remove').click(function(e) {
        e.preventDefault();
        e.stopPropagation();
        var neptun = $(this).data('neptun');
        $.ajax({
            type: 'POST',
            url: '/ajax/group/' + $(this).data('gid') + '/remove/',
            data: 'neptun=' + neptun,
            success: function(data) {
                $('#member-' + neptun).slideUp(700);
            }
        });
    });
    /*$('#group-owners .remove').click(function(e) {
        e.preventDefault();
        e.stopPropagation();
        var neptun = $(this).data('neptun');
        $.ajax({
            type: 'POST',
            url: '/ajax/group/' + $(this).data('gid') + '/remove/',
            data: 'neptun=' + neptun,
            success: function(data) {
                $('#member-' + neptun).slideUp(700);
            }
        });
    });*/
    $('#groups .delete').click(function(e) {
        e.preventDefault();
        e.stopPropagation();
        var gid = $(this).data('id');
        var name = $(this).data('name');
        vm_confirm_popup(
        interpolate(
        gettext('Are you sure deleting <strong>%s</strong>'), [name]), gettext('Delete'), function() {
            $.ajax({
                type: 'POST',
                url: '/ajax/group/delete/',
                data: 'gid=' + gid,
                success: function() {
                    $('#group-' + gid).slideUp(700);
                }
            }).error(function() {
                window.location.reload();
            })
        })
    })
 })
--- a/one/static/script/knockout.min.js
+++ b/one/static/script/knockout.min.js
 // Knockout JavaScript library v2.2.1
 // (c) Steven Sanderson - http://knockoutjs.com/
 // License: MIT (http://www.opensource.org/licenses/mit-license.php)
 (function() {function j(w){throw w;}var m=!0,p=null,r=!1;function u(w){return function(){return w}};var x=window,y=document,ga=navigator,F=window.jQuery,I=void 0;
 function L(w){function ha(a,d,c,e,f){var g=[];a=b.j(function(){var a=d(c,f)||[];0<g.length&&(b.a.Ya(M(g),a),e&&b.r.K(e,p,[c,a,f]));g.splice(0,g.length);b.a.P(g,a)},p,{W:a,Ka:function(){return 0==g.length||!b.a.X(g[0])}});return{M:g,j:a.pa()?a:I}}function M(a){for(;a.length&&!b.a.X(a[0]);)a.splice(0,1);if(1<a.length){for(var d=a[0],c=a[a.length-1],e=[d];d!==c;){d=d.nextSibling;if(!d)return;e.push(d)}Array.prototype.splice.apply(a,[0,a.length].concat(e))}return a}function S(a,b,c,e,f){var g=Math.min,
 h=Math.max,k=[],l,n=a.length,q,s=b.length,v=s-n||1,G=n+s+1,J,A,z;for(l=0;l<=n;l++){A=J;k.push(J=[]);z=g(s,l+v);for(q=h(0,l-1);q<=z;q++)J[q]=q?l?a[l-1]===b[q-1]?A[q-1]:g(A[q]||G,J[q-1]||G)+1:q+1:l+1}g=[];h=[];v=[];l=n;for(q=s;l||q;)s=k[l][q]-1,q&&s===k[l][q-1]?h.push(g[g.length]={status:c,value:b[--q],index:q}):l&&s===k[l-1][q]?v.push(g[g.length]={status:e,value:a[--l],index:l}):(g.push({status:"retained",value:b[--q]}),--l);if(h.length&&v.length){a=10*n;var t;for(b=c=0;(f||b<a)&&(t=h[c]);c++){for(e=
 0;k=v[e];e++)if(t.value===k.value){t.moved=k.index;k.moved=t.index;v.splice(e,1);b=e=0;break}b+=e}}return g.reverse()}function T(a,d,c,e,f){f=f||{};var g=a&&N(a),g=g&&g.ownerDocument,h=f.templateEngine||O;b.za.vb(c,h,g);c=h.renderTemplate(c,e,f,g);("number"!=typeof c.length||0<c.length&&"number"!=typeof c[0].nodeType)&&j(Error("Template engine must return an array of DOM nodes"));g=r;switch(d){case "replaceChildren":b.e.N(a,c);g=m;break;case "replaceNode":b.a.Ya(a,c);g=m;break;case "ignoreTargetNode":break;
 default:j(Error("Unknown renderMode: "+d))}g&&(U(c,e),f.afterRender&&b.r.K(f.afterRender,p,[c,e.$data]));return c}function N(a){return a.nodeType?a:0<a.length?a[0]:p}function U(a,d){if(a.length){var c=a[0],e=a[a.length-1];V(c,e,function(a){b.Da(d,a)});V(c,e,function(a){b.s.ib(a,[d])})}}function V(a,d,c){var e;for(d=b.e.nextSibling(d);a&&(e=a)!==d;)a=b.e.nextSibling(e),(1===e.nodeType||8===e.nodeType)&&c(e)}function W(a,d,c){a=b.g.aa(a);for(var e=b.g.Q,f=0;f<a.length;f++){var g=a[f].key;if(e.hasOwnProperty(g)){var h=
 e[g];"function"===typeof h?(g=h(a[f].value))&&j(Error(g)):h||j(Error("This template engine does not support the '"+g+"' binding within its templates"))}}a="ko.__tr_ambtns(function($context,$element){return(function(){return{ "+b.g.ba(a)+" } })()})";return c.createJavaScriptEvaluatorBlock(a)+d}function X(a,d,c,e){function f(a){return function(){return k[a]}}function g(){return k}var h=0,k,l;b.j(function(){var n=c&&c instanceof b.z?c:new b.z(b.a.d(c)),q=n.$data;e&&b.eb(a,n);if(k=("function"==typeof d?
 d(n,a):d)||b.J.instance.getBindings(a,n)){if(0===h){h=1;for(var s in k){var v=b.c[s];v&&8===a.nodeType&&!b.e.I[s]&&j(Error("The binding '"+s+"' cannot be used with virtual elements"));if(v&&"function"==typeof v.init&&(v=(0,v.init)(a,f(s),g,q,n))&&v.controlsDescendantBindings)l!==I&&j(Error("Multiple bindings ("+l+" and "+s+") are trying to control descendant bindings of the same element. You cannot use these bindings together on the same element.")),l=s}h=2}if(2===h)for(s in k)(v=b.c[s])&&"function"==
 typeof v.update&&(0,v.update)(a,f(s),g,q,n)}},p,{W:a});return{Nb:l===I}}function Y(a,d,c){var e=m,f=1===d.nodeType;f&&b.e.Ta(d);if(f&&c||b.J.instance.nodeHasBindings(d))e=X(d,p,a,c).Nb;e&&Z(a,d,!f)}function Z(a,d,c){for(var e=b.e.firstChild(d);d=e;)e=b.e.nextSibling(d),Y(a,d,c)}function $(a,b){var c=aa(a,b);return c?0<c.length?c[c.length-1].nextSibling:a.nextSibling:p}function aa(a,b){for(var c=a,e=1,f=[];c=c.nextSibling;){if(H(c)&&(e--,0===e))return f;f.push(c);B(c)&&e++}b||j(Error("Cannot find closing comment tag to match: "+
 a.nodeValue));return p}function H(a){return 8==a.nodeType&&(K?a.text:a.nodeValue).match(ia)}function B(a){return 8==a.nodeType&&(K?a.text:a.nodeValue).match(ja)}function P(a,b){for(var c=p;a!=c;)c=a,a=a.replace(ka,function(a,c){return b[c]});return a}function la(){var a=[],d=[];this.save=function(c,e){var f=b.a.i(a,c);0<=f?d[f]=e:(a.push(c),d.push(e))};this.get=function(c){c=b.a.i(a,c);return 0<=c?d[c]:I}}function ba(a,b,c){function e(e){var g=b(a[e]);switch(typeof g){case "boolean":case "number":case "string":case "function":f[e]=
 g;break;case "object":case "undefined":var h=c.get(g);f[e]=h!==I?h:ba(g,b,c)}}c=c||new la;a=b(a);if(!("object"==typeof a&&a!==p&&a!==I&&!(a instanceof Date)))return a;var f=a instanceof Array?[]:{};c.save(a,f);var g=a;if(g instanceof Array){for(var h=0;h<g.length;h++)e(h);"function"==typeof g.toJSON&&e("toJSON")}else for(h in g)e(h);return f}function ca(a,d){if(a)if(8==a.nodeType){var c=b.s.Ua(a.nodeValue);c!=p&&d.push({sb:a,Fb:c})}else if(1==a.nodeType)for(var c=0,e=a.childNodes,f=e.length;c<f;c++)ca(e[c],
 d)}function Q(a,d,c,e){b.c[a]={init:function(a){b.a.f.set(a,da,{});return{controlsDescendantBindings:m}},update:function(a,g,h,k,l){h=b.a.f.get(a,da);g=b.a.d(g());k=!c!==!g;var n=!h.Za;if(n||d||k!==h.qb)n&&(h.Za=b.a.Ia(b.e.childNodes(a),m)),k?(n||b.e.N(a,b.a.Ia(h.Za)),b.Ea(e?e(l,g):l,a)):b.e.Y(a),h.qb=k}};b.g.Q[a]=r;b.e.I[a]=m}function ea(a,d,c){c&&d!==b.k.q(a)&&b.k.T(a,d);d!==b.k.q(a)&&b.r.K(b.a.Ba,p,[a,"change"])}var b="undefined"!==typeof w?w:{};b.b=function(a,d){for(var c=a.split("."),e=b,f=0;f<
 c.length-1;f++)e=e[c[f]];e[c[c.length-1]]=d};b.p=function(a,b,c){a[b]=c};b.version="2.2.1";b.b("version",b.version);b.a=new function(){function a(a,d){if("input"!==b.a.u(a)||!a.type||"click"!=d.toLowerCase())return r;var c=a.type;return"checkbox"==c||"radio"==c}var d=/^(\s|\u00A0)+|(\s|\u00A0)+$/g,c={},e={};c[/Firefox\/2/i.test(ga.userAgent)?"KeyboardEvent":"UIEvents"]=["keyup","keydown","keypress"];c.MouseEvents="click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave".split(" ");
 for(var f in c){var g=c[f];if(g.length)for(var h=0,k=g.length;h<k;h++)e[g[h]]=f}var l={propertychange:m},n,c=3;f=y.createElement("div");for(g=f.getElementsByTagName("i");f.innerHTML="\x3c!--[if gt IE "+ ++c+"]><i></i><![endif]--\x3e",g[0];);n=4<c?c:I;return{Na:["authenticity_token",/^__RequestVerificationToken(_.*)?$/],o:function(a,b){for(var d=0,c=a.length;d<c;d++)b(a[d])},i:function(a,b){if("function"==typeof Array.prototype.indexOf)return Array.prototype.indexOf.call(a,b);for(var d=0,c=a.length;d<
 c;d++)if(a[d]===b)return d;return-1},lb:function(a,b,d){for(var c=0,e=a.length;c<e;c++)if(b.call(d,a[c]))return a[c];return p},ga:function(a,d){var c=b.a.i(a,d);0<=c&&a.splice(c,1)},Ga:function(a){a=a||[];for(var d=[],c=0,e=a.length;c<e;c++)0>b.a.i(d,a[c])&&d.push(a[c]);return d},V:function(a,b){a=a||[];for(var d=[],c=0,e=a.length;c<e;c++)d.push(b(a[c]));return d},fa:function(a,b){a=a||[];for(var d=[],c=0,e=a.length;c<e;c++)b(a[c])&&d.push(a[c]);return d},P:function(a,b){if(b instanceof Array)a.push.apply(a,
 b);else for(var d=0,c=b.length;d<c;d++)a.push(b[d]);return a},extend:function(a,b){if(b)for(var d in b)b.hasOwnProperty(d)&&(a[d]=b[d]);return a},ka:function(a){for(;a.firstChild;)b.removeNode(a.firstChild)},Hb:function(a){a=b.a.L(a);for(var d=y.createElement("div"),c=0,e=a.length;c<e;c++)d.appendChild(b.A(a[c]));return d},Ia:function(a,d){for(var c=0,e=a.length,g=[];c<e;c++){var f=a[c].cloneNode(m);g.push(d?b.A(f):f)}return g},N:function(a,d){b.a.ka(a);if(d)for(var c=0,e=d.length;c<e;c++)a.appendChild(d[c])},
 Ya:function(a,d){var c=a.nodeType?[a]:a;if(0<c.length){for(var e=c[0],g=e.parentNode,f=0,h=d.length;f<h;f++)g.insertBefore(d[f],e);f=0;for(h=c.length;f<h;f++)b.removeNode(c[f])}},bb:function(a,b){7>n?a.setAttribute("selected",b):a.selected=b},D:function(a){return(a||"").replace(d,"")},Rb:function(a,d){for(var c=[],e=(a||"").split(d),f=0,g=e.length;f<g;f++){var h=b.a.D(e[f]);""!==h&&c.push(h)}return c},Ob:function(a,b){a=a||"";return b.length>a.length?r:a.substring(0,b.length)===b},tb:function(a,b){if(b.compareDocumentPosition)return 16==
 (b.compareDocumentPosition(a)&16);for(;a!=p;){if(a==b)return m;a=a.parentNode}return r},X:function(a){return b.a.tb(a,a.ownerDocument)},u:function(a){return a&&a.tagName&&a.tagName.toLowerCase()},n:function(b,d,c){var e=n&&l[d];if(!e&&"undefined"!=typeof F){if(a(b,d)){var f=c;c=function(a,b){var d=this.checked;b&&(this.checked=b.nb!==m);f.call(this,a);this.checked=d}}F(b).bind(d,c)}else!e&&"function"==typeof b.addEventListener?b.addEventListener(d,c,r):"undefined"!=typeof b.attachEvent?b.attachEvent("on"+
 d,function(a){c.call(b,a)}):j(Error("Browser doesn't support addEventListener or attachEvent"))},Ba:function(b,d){(!b||!b.nodeType)&&j(Error("element must be a DOM node when calling triggerEvent"));if("undefined"!=typeof F){var c=[];a(b,d)&&c.push({nb:b.checked});F(b).trigger(d,c)}else"function"==typeof y.createEvent?"function"==typeof b.dispatchEvent?(c=y.createEvent(e[d]||"HTMLEvents"),c.initEvent(d,m,m,x,0,0,0,0,0,r,r,r,r,0,b),b.dispatchEvent(c)):j(Error("The supplied element doesn't support dispatchEvent")):
 "undefined"!=typeof b.fireEvent?(a(b,d)&&(b.checked=b.checked!==m),b.fireEvent("on"+d)):j(Error("Browser doesn't support triggering events"))},d:function(a){return b.$(a)?a():a},ua:function(a){return b.$(a)?a.t():a},da:function(a,d,c){if(d){var e=/[\w-]+/g,f=a.className.match(e)||[];b.a.o(d.match(e),function(a){var d=b.a.i(f,a);0<=d?c||f.splice(d,1):c&&f.push(a)});a.className=f.join(" ")}},cb:function(a,d){var c=b.a.d(d);if(c===p||c===I)c="";if(3===a.nodeType)a.data=c;else{var e=b.e.firstChild(a);
 !e||3!=e.nodeType||b.e.nextSibling(e)?b.e.N(a,[y.createTextNode(c)]):e.data=c;b.a.wb(a)}},ab:function(a,b){a.name=b;if(7>=n)try{a.mergeAttributes(y.createElement("<input name='"+a.name+"'/>"),r)}catch(d){}},wb:function(a){9<=n&&(a=1==a.nodeType?a:a.parentNode,a.style&&(a.style.zoom=a.style.zoom))},ub:function(a){if(9<=n){var b=a.style.width;a.style.width=0;a.style.width=b}},Lb:function(a,d){a=b.a.d(a);d=b.a.d(d);for(var c=[],e=a;e<=d;e++)c.push(e);return c},L:function(a){for(var b=[],d=0,c=a.length;d<
 c;d++)b.push(a[d]);return b},Pb:6===n,Qb:7===n,Z:n,Oa:function(a,d){for(var c=b.a.L(a.getElementsByTagName("input")).concat(b.a.L(a.getElementsByTagName("textarea"))),e="string"==typeof d?function(a){return a.name===d}:function(a){return d.test(a.name)},f=[],g=c.length-1;0<=g;g--)e(c[g])&&f.push(c[g]);return f},Ib:function(a){return"string"==typeof a&&(a=b.a.D(a))?x.JSON&&x.JSON.parse?x.JSON.parse(a):(new Function("return "+a))():p},xa:function(a,d,c){("undefined"==typeof JSON||"undefined"==typeof JSON.stringify)&&
 j(Error("Cannot find JSON.stringify(). Some browsers (e.g., IE < 8) don't support it natively, but you can overcome this by adding a script reference to json2.js, downloadable from http://www.json.org/json2.js"));return JSON.stringify(b.a.d(a),d,c)},Jb:function(a,d,c){c=c||{};var e=c.params||{},f=c.includeFields||this.Na,g=a;if("object"==typeof a&&"form"===b.a.u(a))for(var g=a.action,h=f.length-1;0<=h;h--)for(var k=b.a.Oa(a,f[h]),l=k.length-1;0<=l;l--)e[k[l].name]=k[l].value;d=b.a.d(d);var n=y.createElement("form");
 n.style.display="none";n.action=g;n.method="post";for(var w in d)a=y.createElement("input"),a.name=w,a.value=b.a.xa(b.a.d(d[w])),n.appendChild(a);for(w in e)a=y.createElement("input"),a.name=w,a.value=e[w],n.appendChild(a);y.body.appendChild(n);c.submitter?c.submitter(n):n.submit();setTimeout(function(){n.parentNode.removeChild(n)},0)}}};b.b("utils",b.a);b.b("utils.arrayForEach",b.a.o);b.b("utils.arrayFirst",b.a.lb);b.b("utils.arrayFilter",b.a.fa);b.b("utils.arrayGetDistinctValues",b.a.Ga);b.b("utils.arrayIndexOf",
 b.a.i);b.b("utils.arrayMap",b.a.V);b.b("utils.arrayPushAll",b.a.P);b.b("utils.arrayRemoveItem",b.a.ga);b.b("utils.extend",b.a.extend);b.b("utils.fieldsIncludedWithJsonPost",b.a.Na);b.b("utils.getFormFields",b.a.Oa);b.b("utils.peekObservable",b.a.ua);b.b("utils.postJson",b.a.Jb);b.b("utils.parseJson",b.a.Ib);b.b("utils.registerEventHandler",b.a.n);b.b("utils.stringifyJson",b.a.xa);b.b("utils.range",b.a.Lb);b.b("utils.toggleDomNodeCssClass",b.a.da);b.b("utils.triggerEvent",b.a.Ba);b.b("utils.unwrapObservable",
 b.a.d);Function.prototype.bind||(Function.prototype.bind=function(a){var b=this,c=Array.prototype.slice.call(arguments);a=c.shift();return function(){return b.apply(a,c.concat(Array.prototype.slice.call(arguments)))}});b.a.f=new function(){var a=0,d="__ko__"+(new Date).getTime(),c={};return{get:function(a,d){var c=b.a.f.la(a,r);return c===I?I:c[d]},set:function(a,d,c){c===I&&b.a.f.la(a,r)===I||(b.a.f.la(a,m)[d]=c)},la:function(b,f){var g=b[d];if(!g||!("null"!==g&&c[g])){if(!f)return I;g=b[d]="ko"+
 a++;c[g]={}}return c[g]},clear:function(a){var b=a[d];return b?(delete c[b],a[d]=p,m):r}}};b.b("utils.domData",b.a.f);b.b("utils.domData.clear",b.a.f.clear);b.a.F=new function(){function a(a,d){var e=b.a.f.get(a,c);e===I&&d&&(e=[],b.a.f.set(a,c,e));return e}function d(c){var e=a(c,r);if(e)for(var e=e.slice(0),k=0;k<e.length;k++)e[k](c);b.a.f.clear(c);"function"==typeof F&&"function"==typeof F.cleanData&&F.cleanData([c]);if(f[c.nodeType])for(e=c.firstChild;c=e;)e=c.nextSibling,8===c.nodeType&&d(c)}
 var c="__ko_domNodeDisposal__"+(new Date).getTime(),e={1:m,8:m,9:m},f={1:m,9:m};return{Ca:function(b,d){"function"!=typeof d&&j(Error("Callback must be a function"));a(b,m).push(d)},Xa:function(d,e){var f=a(d,r);f&&(b.a.ga(f,e),0==f.length&&b.a.f.set(d,c,I))},A:function(a){if(e[a.nodeType]&&(d(a),f[a.nodeType])){var c=[];b.a.P(c,a.getElementsByTagName("*"));for(var k=0,l=c.length;k<l;k++)d(c[k])}return a},removeNode:function(a){b.A(a);a.parentNode&&a.parentNode.removeChild(a)}}};b.A=b.a.F.A;b.removeNode=
 b.a.F.removeNode;b.b("cleanNode",b.A);b.b("removeNode",b.removeNode);b.b("utils.domNodeDisposal",b.a.F);b.b("utils.domNodeDisposal.addDisposeCallback",b.a.F.Ca);b.b("utils.domNodeDisposal.removeDisposeCallback",b.a.F.Xa);b.a.ta=function(a){var d;if("undefined"!=typeof F)if(F.parseHTML)d=F.parseHTML(a);else{if((d=F.clean([a]))&&d[0]){for(a=d[0];a.parentNode&&11!==a.parentNode.nodeType;)a=a.parentNode;a.parentNode&&a.parentNode.removeChild(a)}}else{var c=b.a.D(a).toLowerCase();d=y.createElement("div");
 c=c.match(/^<(thead|tbody|tfoot)/)&&[1,"<table>","</table>"]||!c.indexOf("<tr")&&[2,"<table><tbody>","</tbody></table>"]||(!c.indexOf("<td")||!c.indexOf("<th"))&&[3,"<table><tbody><tr>","</tr></tbody></table>"]||[0,"",""];a="ignored<div>"+c[1]+a+c[2]+"</div>";for("function"==typeof x.innerShiv?d.appendChild(x.innerShiv(a)):d.innerHTML=a;c[0]--;)d=d.lastChild;d=b.a.L(d.lastChild.childNodes)}return d};b.a.ca=function(a,d){b.a.ka(a);d=b.a.d(d);if(d!==p&&d!==I)if("string"!=typeof d&&(d=d.toString()),
 "undefined"!=typeof F)F(a).html(d);else for(var c=b.a.ta(d),e=0;e<c.length;e++)a.appendChild(c[e])};b.b("utils.parseHtmlFragment",b.a.ta);b.b("utils.setHtml",b.a.ca);var R={};b.s={ra:function(a){"function"!=typeof a&&j(Error("You can only pass a function to ko.memoization.memoize()"));var b=(4294967296*(1+Math.random())|0).toString(16).substring(1)+(4294967296*(1+Math.random())|0).toString(16).substring(1);R[b]=a;return"\x3c!--[ko_memo:"+b+"]--\x3e"},hb:function(a,b){var c=R[a];c===I&&j(Error("Couldn't find any memo with ID "+
 a+". Perhaps it's already been unmemoized."));try{return c.apply(p,b||[]),m}finally{delete R[a]}},ib:function(a,d){var c=[];ca(a,c);for(var e=0,f=c.length;e<f;e++){var g=c[e].sb,h=[g];d&&b.a.P(h,d);b.s.hb(c[e].Fb,h);g.nodeValue="";g.parentNode&&g.parentNode.removeChild(g)}},Ua:function(a){return(a=a.match(/^\[ko_memo\:(.*?)\]$/))?a[1]:p}};b.b("memoization",b.s);b.b("memoization.memoize",b.s.ra);b.b("memoization.unmemoize",b.s.hb);b.b("memoization.parseMemoText",b.s.Ua);b.b("memoization.unmemoizeDomNodeAndDescendants",
 b.s.ib);b.Ma={throttle:function(a,d){a.throttleEvaluation=d;var c=p;return b.j({read:a,write:function(b){clearTimeout(c);c=setTimeout(function(){a(b)},d)}})},notify:function(a,d){a.equalityComparer="always"==d?u(r):b.m.fn.equalityComparer;return a}};b.b("extenders",b.Ma);b.fb=function(a,d,c){this.target=a;this.ha=d;this.rb=c;b.p(this,"dispose",this.B)};b.fb.prototype.B=function(){this.Cb=m;this.rb()};b.S=function(){this.w={};b.a.extend(this,b.S.fn);b.p(this,"subscribe",this.ya);b.p(this,"extend",
 this.extend);b.p(this,"getSubscriptionsCount",this.yb)};b.S.fn={ya:function(a,d,c){c=c||"change";var e=new b.fb(this,d?a.bind(d):a,function(){b.a.ga(this.w[c],e)}.bind(this));this.w[c]||(this.w[c]=[]);this.w[c].push(e);return e},notifySubscribers:function(a,d){d=d||"change";this.w[d]&&b.r.K(function(){b.a.o(this.w[d].slice(0),function(b){b&&b.Cb!==m&&b.ha(a)})},this)},yb:function(){var a=0,b;for(b in this.w)this.w.hasOwnProperty(b)&&(a+=this.w[b].length);return a},extend:function(a){var d=this;if(a)for(var c in a){var e=
 b.Ma[c];"function"==typeof e&&(d=e(d,a[c]))}return d}};b.Qa=function(a){return"function"==typeof a.ya&&"function"==typeof a.notifySubscribers};b.b("subscribable",b.S);b.b("isSubscribable",b.Qa);var C=[];b.r={mb:function(a){C.push({ha:a,La:[]})},end:function(){C.pop()},Wa:function(a){b.Qa(a)||j(Error("Only subscribable things can act as dependencies"));if(0<C.length){var d=C[C.length-1];d&&!(0<=b.a.i(d.La,a))&&(d.La.push(a),d.ha(a))}},K:function(a,b,c){try{return C.push(p),a.apply(b,c||[])}finally{C.pop()}}};
 var ma={undefined:m,"boolean":m,number:m,string:m};b.m=function(a){function d(){if(0<arguments.length){if(!d.equalityComparer||!d.equalityComparer(c,arguments[0]))d.H(),c=arguments[0],d.G();return this}b.r.Wa(d);return c}var c=a;b.S.call(d);d.t=function(){return c};d.G=function(){d.notifySubscribers(c)};d.H=function(){d.notifySubscribers(c,"beforeChange")};b.a.extend(d,b.m.fn);b.p(d,"peek",d.t);b.p(d,"valueHasMutated",d.G);b.p(d,"valueWillMutate",d.H);return d};b.m.fn={equalityComparer:function(a,
 b){return a===p||typeof a in ma?a===b:r}};var E=b.m.Kb="__ko_proto__";b.m.fn[E]=b.m;b.ma=function(a,d){return a===p||a===I||a[E]===I?r:a[E]===d?m:b.ma(a[E],d)};b.$=function(a){return b.ma(a,b.m)};b.Ra=function(a){return"function"==typeof a&&a[E]===b.m||"function"==typeof a&&a[E]===b.j&&a.zb?m:r};b.b("observable",b.m);b.b("isObservable",b.$);b.b("isWriteableObservable",b.Ra);b.R=function(a){0==arguments.length&&(a=[]);a!==p&&(a!==I&&!("length"in a))&&j(Error("The argument passed when initializing an observable array must be an array, or null, or undefined."));
 var d=b.m(a);b.a.extend(d,b.R.fn);return d};b.R.fn={remove:function(a){for(var b=this.t(),c=[],e="function"==typeof a?a:function(b){return b===a},f=0;f<b.length;f++){var g=b[f];e(g)&&(0===c.length&&this.H(),c.push(g),b.splice(f,1),f--)}c.length&&this.G();return c},removeAll:function(a){if(a===I){var d=this.t(),c=d.slice(0);this.H();d.splice(0,d.length);this.G();return c}return!a?[]:this.remove(function(d){return 0<=b.a.i(a,d)})},destroy:function(a){var b=this.t(),c="function"==typeof a?a:function(b){return b===
 a};this.H();for(var e=b.length-1;0<=e;e--)c(b[e])&&(b[e]._destroy=m);this.G()},destroyAll:function(a){return a===I?this.destroy(u(m)):!a?[]:this.destroy(function(d){return 0<=b.a.i(a,d)})},indexOf:function(a){var d=this();return b.a.i(d,a)},replace:function(a,b){var c=this.indexOf(a);0<=c&&(this.H(),this.t()[c]=b,this.G())}};b.a.o("pop push reverse shift sort splice unshift".split(" "),function(a){b.R.fn[a]=function(){var b=this.t();this.H();b=b[a].apply(b,arguments);this.G();return b}});b.a.o(["slice"],
 function(a){b.R.fn[a]=function(){var b=this();return b[a].apply(b,arguments)}});b.b("observableArray",b.R);b.j=function(a,d,c){function e(){b.a.o(z,function(a){a.B()});z=[]}function f(){var a=h.throttleEvaluation;a&&0<=a?(clearTimeout(t),t=setTimeout(g,a)):g()}function g(){if(!q)if(n&&w())A();else{q=m;try{var a=b.a.V(z,function(a){return a.target});b.r.mb(function(c){var d;0<=(d=b.a.i(a,c))?a[d]=I:z.push(c.ya(f))});for(var c=s.call(d),e=a.length-1;0<=e;e--)a[e]&&z.splice(e,1)[0].B();n=m;h.notifySubscribers(l,
 "beforeChange");l=c}finally{b.r.end()}h.notifySubscribers(l);q=r;z.length||A()}}function h(){if(0<arguments.length)return"function"===typeof v?v.apply(d,arguments):j(Error("Cannot write a value to a ko.computed unless you specify a 'write' option. If you wish to read the current value, don't pass any parameters.")),this;n||g();b.r.Wa(h);return l}function k(){return!n||0<z.length}var l,n=r,q=r,s=a;s&&"object"==typeof s?(c=s,s=c.read):(c=c||{},s||(s=c.read));"function"!=typeof s&&j(Error("Pass a function that returns the value of the ko.computed"));
 var v=c.write,G=c.disposeWhenNodeIsRemoved||c.W||p,w=c.disposeWhen||c.Ka||u(r),A=e,z=[],t=p;d||(d=c.owner);h.t=function(){n||g();return l};h.xb=function(){return z.length};h.zb="function"===typeof c.write;h.B=function(){A()};h.pa=k;b.S.call(h);b.a.extend(h,b.j.fn);b.p(h,"peek",h.t);b.p(h,"dispose",h.B);b.p(h,"isActive",h.pa);b.p(h,"getDependenciesCount",h.xb);c.deferEvaluation!==m&&g();if(G&&k()){A=function(){b.a.F.Xa(G,arguments.callee);e()};b.a.F.Ca(G,A);var D=w,w=function(){return!b.a.X(G)||D()}}return h};
 b.Bb=function(a){return b.ma(a,b.j)};w=b.m.Kb;b.j[w]=b.m;b.j.fn={};b.j.fn[w]=b.j;b.b("dependentObservable",b.j);b.b("computed",b.j);b.b("isComputed",b.Bb);b.gb=function(a){0==arguments.length&&j(Error("When calling ko.toJS, pass the object you want to convert."));return ba(a,function(a){for(var c=0;b.$(a)&&10>c;c++)a=a();return a})};b.toJSON=function(a,d,c){a=b.gb(a);return b.a.xa(a,d,c)};b.b("toJS",b.gb);b.b("toJSON",b.toJSON);b.k={q:function(a){switch(b.a.u(a)){case "option":return a.__ko__hasDomDataOptionValue__===
 m?b.a.f.get(a,b.c.options.sa):7>=b.a.Z?a.getAttributeNode("value").specified?a.value:a.text:a.value;case "select":return 0<=a.selectedIndex?b.k.q(a.options[a.selectedIndex]):I;default:return a.value}},T:function(a,d){switch(b.a.u(a)){case "option":switch(typeof d){case "string":b.a.f.set(a,b.c.options.sa,I);"__ko__hasDomDataOptionValue__"in a&&delete a.__ko__hasDomDataOptionValue__;a.value=d;break;default:b.a.f.set(a,b.c.options.sa,d),a.__ko__hasDomDataOptionValue__=m,a.value="number"===typeof d?
 d:""}break;case "select":for(var c=a.options.length-1;0<=c;c--)if(b.k.q(a.options[c])==d){a.selectedIndex=c;break}break;default:if(d===p||d===I)d="";a.value=d}}};b.b("selectExtensions",b.k);b.b("selectExtensions.readValue",b.k.q);b.b("selectExtensions.writeValue",b.k.T);var ka=/\@ko_token_(\d+)\@/g,na=["true","false"],oa=/^(?:[$_a-z][$\w]*|(.+)(\.\s*[$_a-z][$\w]*|\[.+\]))$/i;b.g={Q:[],aa:function(a){var d=b.a.D(a);if(3>d.length)return[];"{"===d.charAt(0)&&(d=d.substring(1,d.length-1));a=[];for(var c=
 p,e,f=0;f<d.length;f++){var g=d.charAt(f);if(c===p)switch(g){case '"':case "'":case "/":c=f,e=g}else if(g==e&&"\\"!==d.charAt(f-1)){g=d.substring(c,f+1);a.push(g);var h="@ko_token_"+(a.length-1)+"@",d=d.substring(0,c)+h+d.substring(f+1),f=f-(g.length-h.length),c=p}}e=c=p;for(var k=0,l=p,f=0;f<d.length;f++){g=d.charAt(f);if(c===p)switch(g){case "{":c=f;l=g;e="}";break;case "(":c=f;l=g;e=")";break;case "[":c=f,l=g,e="]"}g===l?k++:g===e&&(k--,0===k&&(g=d.substring(c,f+1),a.push(g),h="@ko_token_"+(a.length-
 1)+"@",d=d.substring(0,c)+h+d.substring(f+1),f-=g.length-h.length,c=p))}e=[];d=d.split(",");c=0;for(f=d.length;c<f;c++)k=d[c],l=k.indexOf(":"),0<l&&l<k.length-1?(g=k.substring(l+1),e.push({key:P(k.substring(0,l),a),value:P(g,a)})):e.push({unknown:P(k,a)});return e},ba:function(a){var d="string"===typeof a?b.g.aa(a):a,c=[];a=[];for(var e,f=0;e=d[f];f++)if(0<c.length&&c.push(","),e.key){var g;a:{g=e.key;var h=b.a.D(g);switch(h.length&&h.charAt(0)){case "'":case '"':break a;default:g="'"+h+"'"}}e=e.value;
 c.push(g);c.push(":");c.push(e);e=b.a.D(e);0<=b.a.i(na,b.a.D(e).toLowerCase())?e=r:(h=e.match(oa),e=h===p?r:h[1]?"Object("+h[1]+")"+h[2]:e);e&&(0<a.length&&a.push(", "),a.push(g+" : function(__ko_value) { "+e+" = __ko_value; }"))}else e.unknown&&c.push(e.unknown);d=c.join("");0<a.length&&(d=d+", '_ko_property_writers' : { "+a.join("")+" } ");return d},Eb:function(a,d){for(var c=0;c<a.length;c++)if(b.a.D(a[c].key)==d)return m;return r},ea:function(a,d,c,e,f){if(!a||!b.Ra(a)){if((a=d()._ko_property_writers)&&
 a[c])a[c](e)}else(!f||a.t()!==e)&&a(e)}};b.b("expressionRewriting",b.g);b.b("expressionRewriting.bindingRewriteValidators",b.g.Q);b.b("expressionRewriting.parseObjectLiteral",b.g.aa);b.b("expressionRewriting.preProcessBindings",b.g.ba);b.b("jsonExpressionRewriting",b.g);b.b("jsonExpressionRewriting.insertPropertyAccessorsIntoJson",b.g.ba);var K="\x3c!--test--\x3e"===y.createComment("test").text,ja=K?/^\x3c!--\s*ko(?:\s+(.+\s*\:[\s\S]*))?\s*--\x3e$/:/^\s*ko(?:\s+(.+\s*\:[\s\S]*))?\s*$/,ia=K?/^\x3c!--\s*\/ko\s*--\x3e$/:
 /^\s*\/ko\s*$/,pa={ul:m,ol:m};b.e={I:{},childNodes:function(a){return B(a)?aa(a):a.childNodes},Y:function(a){if(B(a)){a=b.e.childNodes(a);for(var d=0,c=a.length;d<c;d++)b.removeNode(a[d])}else b.a.ka(a)},N:function(a,d){if(B(a)){b.e.Y(a);for(var c=a.nextSibling,e=0,f=d.length;e<f;e++)c.parentNode.insertBefore(d[e],c)}else b.a.N(a,d)},Va:function(a,b){B(a)?a.parentNode.insertBefore(b,a.nextSibling):a.firstChild?a.insertBefore(b,a.firstChild):a.appendChild(b)},Pa:function(a,d,c){c?B(a)?a.parentNode.insertBefore(d,
 c.nextSibling):c.nextSibling?a.insertBefore(d,c.nextSibling):a.appendChild(d):b.e.Va(a,d)},firstChild:function(a){return!B(a)?a.firstChild:!a.nextSibling||H(a.nextSibling)?p:a.nextSibling},nextSibling:function(a){B(a)&&(a=$(a));return a.nextSibling&&H(a.nextSibling)?p:a.nextSibling},jb:function(a){return(a=B(a))?a[1]:p},Ta:function(a){if(pa[b.a.u(a)]){var d=a.firstChild;if(d){do if(1===d.nodeType){var c;c=d.firstChild;var e=p;if(c){do if(e)e.push(c);else if(B(c)){var f=$(c,m);f?c=f:e=[c]}else H(c)&&
 (e=[c]);while(c=c.nextSibling)}if(c=e){e=d.nextSibling;for(f=0;f<c.length;f++)e?a.insertBefore(c[f],e):a.appendChild(c[f])}}while(d=d.nextSibling)}}}};b.b("virtualElements",b.e);b.b("virtualElements.allowedBindings",b.e.I);b.b("virtualElements.emptyNode",b.e.Y);b.b("virtualElements.insertAfter",b.e.Pa);b.b("virtualElements.prepend",b.e.Va);b.b("virtualElements.setDomNodeChildren",b.e.N);b.J=function(){this.Ha={}};b.a.extend(b.J.prototype,{nodeHasBindings:function(a){switch(a.nodeType){case 1:return a.getAttribute("data-bind")!=
 p;case 8:return b.e.jb(a)!=p;default:return r}},getBindings:function(a,b){var c=this.getBindingsString(a,b);return c?this.parseBindingsString(c,b,a):p},getBindingsString:function(a){switch(a.nodeType){case 1:return a.getAttribute("data-bind");case 8:return b.e.jb(a);default:return p}},parseBindingsString:function(a,d,c){try{var e;if(!(e=this.Ha[a])){var f=this.Ha,g,h="with($context){with($data||{}){return{"+b.g.ba(a)+"}}}";g=new Function("$context","$element",h);e=f[a]=g}return e(d,c)}catch(k){j(Error("Unable to parse bindings.\nMessage: "+
 k+";\nBindings value: "+a))}}});b.J.instance=new b.J;b.b("bindingProvider",b.J);b.c={};b.z=function(a,d,c){d?(b.a.extend(this,d),this.$parentContext=d,this.$parent=d.$data,this.$parents=(d.$parents||[]).slice(0),this.$parents.unshift(this.$parent)):(this.$parents=[],this.$root=a,this.ko=b);this.$data=a;c&&(this[c]=a)};b.z.prototype.createChildContext=function(a,d){return new b.z(a,this,d)};b.z.prototype.extend=function(a){var d=b.a.extend(new b.z,this);return b.a.extend(d,a)};b.eb=function(a,d){if(2==
 arguments.length)b.a.f.set(a,"__ko_bindingContext__",d);else return b.a.f.get(a,"__ko_bindingContext__")};b.Fa=function(a,d,c){1===a.nodeType&&b.e.Ta(a);return X(a,d,c,m)};b.Ea=function(a,b){(1===b.nodeType||8===b.nodeType)&&Z(a,b,m)};b.Da=function(a,b){b&&(1!==b.nodeType&&8!==b.nodeType)&&j(Error("ko.applyBindings: first parameter should be your view model; second parameter should be a DOM node"));b=b||x.document.body;Y(a,b,m)};b.ja=function(a){switch(a.nodeType){case 1:case 8:var d=b.eb(a);if(d)return d;
 if(a.parentNode)return b.ja(a.parentNode)}return I};b.pb=function(a){return(a=b.ja(a))?a.$data:I};b.b("bindingHandlers",b.c);b.b("applyBindings",b.Da);b.b("applyBindingsToDescendants",b.Ea);b.b("applyBindingsToNode",b.Fa);b.b("contextFor",b.ja);b.b("dataFor",b.pb);var fa={"class":"className","for":"htmlFor"};b.c.attr={update:function(a,d){var c=b.a.d(d())||{},e;for(e in c)if("string"==typeof e){var f=b.a.d(c[e]),g=f===r||f===p||f===I;g&&a.removeAttribute(e);8>=b.a.Z&&e in fa?(e=fa[e],g?a.removeAttribute(e):
 a[e]=f):g||a.setAttribute(e,f.toString());"name"===e&&b.a.ab(a,g?"":f.toString())}}};b.c.checked={init:function(a,d,c){b.a.n(a,"click",function(){var e;if("checkbox"==a.type)e=a.checked;else if("radio"==a.type&&a.checked)e=a.value;else return;var f=d(),g=b.a.d(f);"checkbox"==a.type&&g instanceof Array?(e=b.a.i(g,a.value),a.checked&&0>e?f.push(a.value):!a.checked&&0<=e&&f.splice(e,1)):b.g.ea(f,c,"checked",e,m)});"radio"==a.type&&!a.name&&b.c.uniqueName.init(a,u(m))},update:function(a,d){var c=b.a.d(d());
 "checkbox"==a.type?a.checked=c instanceof Array?0<=b.a.i(c,a.value):c:"radio"==a.type&&(a.checked=a.value==c)}};b.c.css={update:function(a,d){var c=b.a.d(d());if("object"==typeof c)for(var e in c){var f=b.a.d(c[e]);b.a.da(a,e,f)}else c=String(c||""),b.a.da(a,a.__ko__cssValue,r),a.__ko__cssValue=c,b.a.da(a,c,m)}};b.c.enable={update:function(a,d){var c=b.a.d(d());c&&a.disabled?a.removeAttribute("disabled"):!c&&!a.disabled&&(a.disabled=m)}};b.c.disable={update:function(a,d){b.c.enable.update(a,function(){return!b.a.d(d())})}};
 b.c.event={init:function(a,d,c,e){var f=d()||{},g;for(g in f)(function(){var f=g;"string"==typeof f&&b.a.n(a,f,function(a){var g,n=d()[f];if(n){var q=c();try{var s=b.a.L(arguments);s.unshift(e);g=n.apply(e,s)}finally{g!==m&&(a.preventDefault?a.preventDefault():a.returnValue=r)}q[f+"Bubble"]===r&&(a.cancelBubble=m,a.stopPropagation&&a.stopPropagation())}})})()}};b.c.foreach={Sa:function(a){return function(){var d=a(),c=b.a.ua(d);if(!c||"number"==typeof c.length)return{foreach:d,templateEngine:b.C.oa};
 b.a.d(d);return{foreach:c.data,as:c.as,includeDestroyed:c.includeDestroyed,afterAdd:c.afterAdd,beforeRemove:c.beforeRemove,afterRender:c.afterRender,beforeMove:c.beforeMove,afterMove:c.afterMove,templateEngine:b.C.oa}}},init:function(a,d){return b.c.template.init(a,b.c.foreach.Sa(d))},update:function(a,d,c,e,f){return b.c.template.update(a,b.c.foreach.Sa(d),c,e,f)}};b.g.Q.foreach=r;b.e.I.foreach=m;b.c.hasfocus={init:function(a,d,c){function e(e){a.__ko_hasfocusUpdating=m;var f=a.ownerDocument;"activeElement"in
 f&&(e=f.activeElement===a);f=d();b.g.ea(f,c,"hasfocus",e,m);a.__ko_hasfocusUpdating=r}var f=e.bind(p,m),g=e.bind(p,r);b.a.n(a,"focus",f);b.a.n(a,"focusin",f);b.a.n(a,"blur",g);b.a.n(a,"focusout",g)},update:function(a,d){var c=b.a.d(d());a.__ko_hasfocusUpdating||(c?a.focus():a.blur(),b.r.K(b.a.Ba,p,[a,c?"focusin":"focusout"]))}};b.c.html={init:function(){return{controlsDescendantBindings:m}},update:function(a,d){b.a.ca(a,d())}};var da="__ko_withIfBindingData";Q("if");Q("ifnot",r,m);Q("with",m,r,function(a,
 b){return a.createChildContext(b)});b.c.options={update:function(a,d,c){"select"!==b.a.u(a)&&j(Error("options binding applies only to SELECT elements"));for(var e=0==a.length,f=b.a.V(b.a.fa(a.childNodes,function(a){return a.tagName&&"option"===b.a.u(a)&&a.selected}),function(a){return b.k.q(a)||a.innerText||a.textContent}),g=a.scrollTop,h=b.a.d(d());0<a.length;)b.A(a.options[0]),a.remove(0);if(h){c=c();var k=c.optionsIncludeDestroyed;"number"!=typeof h.length&&(h=[h]);if(c.optionsCaption){var l=y.createElement("option");
 b.a.ca(l,c.optionsCaption);b.k.T(l,I);a.appendChild(l)}d=0;for(var n=h.length;d<n;d++){var q=h[d];if(!q||!q._destroy||k){var l=y.createElement("option"),s=function(a,b,c){var d=typeof b;return"function"==d?b(a):"string"==d?a[b]:c},v=s(q,c.optionsValue,q);b.k.T(l,b.a.d(v));q=s(q,c.optionsText,v);b.a.cb(l,q);a.appendChild(l)}}h=a.getElementsByTagName("option");d=k=0;for(n=h.length;d<n;d++)0<=b.a.i(f,b.k.q(h[d]))&&(b.a.bb(h[d],m),k++);a.scrollTop=g;e&&"value"in c&&ea(a,b.a.ua(c.value),m);b.a.ub(a)}}};
 b.c.options.sa="__ko.optionValueDomData__";b.c.selectedOptions={init:function(a,d,c){b.a.n(a,"change",function(){var e=d(),f=[];b.a.o(a.getElementsByTagName("option"),function(a){a.selected&&f.push(b.k.q(a))});b.g.ea(e,c,"value",f)})},update:function(a,d){"select"!=b.a.u(a)&&j(Error("values binding applies only to SELECT elements"));var c=b.a.d(d());c&&"number"==typeof c.length&&b.a.o(a.getElementsByTagName("option"),function(a){var d=0<=b.a.i(c,b.k.q(a));b.a.bb(a,d)})}};b.c.style={update:function(a,
 d){var c=b.a.d(d()||{}),e;for(e in c)if("string"==typeof e){var f=b.a.d(c[e]);a.style[e]=f||""}}};b.c.submit={init:function(a,d,c,e){"function"!=typeof d()&&j(Error("The value for a submit binding must be a function"));b.a.n(a,"submit",function(b){var c,h=d();try{c=h.call(e,a)}finally{c!==m&&(b.preventDefault?b.preventDefault():b.returnValue=r)}})}};b.c.text={update:function(a,d){b.a.cb(a,d())}};b.e.I.text=m;b.c.uniqueName={init:function(a,d){if(d()){var c="ko_unique_"+ ++b.c.uniqueName.ob;b.a.ab(a,
 c)}}};b.c.uniqueName.ob=0;b.c.value={init:function(a,d,c){function e(){h=r;var e=d(),f=b.k.q(a);b.g.ea(e,c,"value",f)}var f=["change"],g=c().valueUpdate,h=r;g&&("string"==typeof g&&(g=[g]),b.a.P(f,g),f=b.a.Ga(f));if(b.a.Z&&("input"==a.tagName.toLowerCase()&&"text"==a.type&&"off"!=a.autocomplete&&(!a.form||"off"!=a.form.autocomplete))&&-1==b.a.i(f,"propertychange"))b.a.n(a,"propertychange",function(){h=m}),b.a.n(a,"blur",function(){h&&e()});b.a.o(f,function(c){var d=e;b.a.Ob(c,"after")&&(d=function(){setTimeout(e,
 0)},c=c.substring(5));b.a.n(a,c,d)})},update:function(a,d){var c="select"===b.a.u(a),e=b.a.d(d()),f=b.k.q(a),g=e!=f;0===e&&(0!==f&&"0"!==f)&&(g=m);g&&(f=function(){b.k.T(a,e)},f(),c&&setTimeout(f,0));c&&0<a.length&&ea(a,e,r)}};b.c.visible={update:function(a,d){var c=b.a.d(d()),e="none"!=a.style.display;c&&!e?a.style.display="":!c&&e&&(a.style.display="none")}};b.c.click={init:function(a,d,c,e){return b.c.event.init.call(this,a,function(){var a={};a.click=d();return a},c,e)}};b.v=function(){};b.v.prototype.renderTemplateSource=
 function(){j(Error("Override renderTemplateSource"))};b.v.prototype.createJavaScriptEvaluatorBlock=function(){j(Error("Override createJavaScriptEvaluatorBlock"))};b.v.prototype.makeTemplateSource=function(a,d){if("string"==typeof a){d=d||y;var c=d.getElementById(a);c||j(Error("Cannot find template with ID "+a));return new b.l.h(c)}if(1==a.nodeType||8==a.nodeType)return new b.l.O(a);j(Error("Unknown template type: "+a))};b.v.prototype.renderTemplate=function(a,b,c,e){a=this.makeTemplateSource(a,e);
 return this.renderTemplateSource(a,b,c)};b.v.prototype.isTemplateRewritten=function(a,b){return this.allowTemplateRewriting===r?m:this.makeTemplateSource(a,b).data("isRewritten")};b.v.prototype.rewriteTemplate=function(a,b,c){a=this.makeTemplateSource(a,c);b=b(a.text());a.text(b);a.data("isRewritten",m)};b.b("templateEngine",b.v);var qa=/(<[a-z]+\d*(\s+(?!data-bind=)[a-z0-9\-]+(=(\"[^\"]*\"|\'[^\']*\'))?)*\s+)data-bind=(["'])([\s\S]*?)\5/gi,ra=/\x3c!--\s*ko\b\s*([\s\S]*?)\s*--\x3e/g;b.za={vb:function(a,
 d,c){d.isTemplateRewritten(a,c)||d.rewriteTemplate(a,function(a){return b.za.Gb(a,d)},c)},Gb:function(a,b){return a.replace(qa,function(a,e,f,g,h,k,l){return W(l,e,b)}).replace(ra,function(a,e){return W(e,"\x3c!-- ko --\x3e",b)})},kb:function(a){return b.s.ra(function(d,c){d.nextSibling&&b.Fa(d.nextSibling,a,c)})}};b.b("__tr_ambtns",b.za.kb);b.l={};b.l.h=function(a){this.h=a};b.l.h.prototype.text=function(){var a=b.a.u(this.h),a="script"===a?"text":"textarea"===a?"value":"innerHTML";if(0==arguments.length)return this.h[a];
 var d=arguments[0];"innerHTML"===a?b.a.ca(this.h,d):this.h[a]=d};b.l.h.prototype.data=function(a){if(1===arguments.length)return b.a.f.get(this.h,"templateSourceData_"+a);b.a.f.set(this.h,"templateSourceData_"+a,arguments[1])};b.l.O=function(a){this.h=a};b.l.O.prototype=new b.l.h;b.l.O.prototype.text=function(){if(0==arguments.length){var a=b.a.f.get(this.h,"__ko_anon_template__")||{};a.Aa===I&&a.ia&&(a.Aa=a.ia.innerHTML);return a.Aa}b.a.f.set(this.h,"__ko_anon_template__",{Aa:arguments[0]})};b.l.h.prototype.nodes=
 function(){if(0==arguments.length)return(b.a.f.get(this.h,"__ko_anon_template__")||{}).ia;b.a.f.set(this.h,"__ko_anon_template__",{ia:arguments[0]})};b.b("templateSources",b.l);b.b("templateSources.domElement",b.l.h);b.b("templateSources.anonymousTemplate",b.l.O);var O;b.wa=function(a){a!=I&&!(a instanceof b.v)&&j(Error("templateEngine must inherit from ko.templateEngine"));O=a};b.va=function(a,d,c,e,f){c=c||{};(c.templateEngine||O)==I&&j(Error("Set a template engine before calling renderTemplate"));
 f=f||"replaceChildren";if(e){var g=N(e);return b.j(function(){var h=d&&d instanceof b.z?d:new b.z(b.a.d(d)),k="function"==typeof a?a(h.$data,h):a,h=T(e,f,k,h,c);"replaceNode"==f&&(e=h,g=N(e))},p,{Ka:function(){return!g||!b.a.X(g)},W:g&&"replaceNode"==f?g.parentNode:g})}return b.s.ra(function(e){b.va(a,d,c,e,"replaceNode")})};b.Mb=function(a,d,c,e,f){function g(a,b){U(b,k);c.afterRender&&c.afterRender(b,a)}function h(d,e){k=f.createChildContext(b.a.d(d),c.as);k.$index=e;var g="function"==typeof a?
 a(d,k):a;return T(p,"ignoreTargetNode",g,k,c)}var k;return b.j(function(){var a=b.a.d(d)||[];"undefined"==typeof a.length&&(a=[a]);a=b.a.fa(a,function(a){return c.includeDestroyed||a===I||a===p||!b.a.d(a._destroy)});b.r.K(b.a.$a,p,[e,a,h,c,g])},p,{W:e})};b.c.template={init:function(a,d){var c=b.a.d(d());if("string"!=typeof c&&!c.name&&(1==a.nodeType||8==a.nodeType))c=1==a.nodeType?a.childNodes:b.e.childNodes(a),c=b.a.Hb(c),(new b.l.O(a)).nodes(c);return{controlsDescendantBindings:m}},update:function(a,
 d,c,e,f){d=b.a.d(d());c={};e=m;var g,h=p;"string"!=typeof d&&(c=d,d=c.name,"if"in c&&(e=b.a.d(c["if"])),e&&"ifnot"in c&&(e=!b.a.d(c.ifnot)),g=b.a.d(c.data));"foreach"in c?h=b.Mb(d||a,e&&c.foreach||[],c,a,f):e?(f="data"in c?f.createChildContext(g,c.as):f,h=b.va(d||a,f,c,a)):b.e.Y(a);f=h;(g=b.a.f.get(a,"__ko__templateComputedDomDataKey__"))&&"function"==typeof g.B&&g.B();b.a.f.set(a,"__ko__templateComputedDomDataKey__",f&&f.pa()?f:I)}};b.g.Q.template=function(a){a=b.g.aa(a);return 1==a.length&&a[0].unknown||
 b.g.Eb(a,"name")?p:"This template engine does not support anonymous templates nested within its templates"};b.e.I.template=m;b.b("setTemplateEngine",b.wa);b.b("renderTemplate",b.va);b.a.Ja=function(a,b,c){a=a||[];b=b||[];return a.length<=b.length?S(a,b,"added","deleted",c):S(b,a,"deleted","added",c)};b.b("utils.compareArrays",b.a.Ja);b.a.$a=function(a,d,c,e,f){function g(a,b){t=l[b];w!==b&&(z[a]=t);t.na(w++);M(t.M);s.push(t);A.push(t)}function h(a,c){if(a)for(var d=0,e=c.length;d<e;d++)c[d]&&b.a.o(c[d].M,
 function(b){a(b,d,c[d].U)})}d=d||[];e=e||{};var k=b.a.f.get(a,"setDomNodeChildrenFromArrayMapping_lastMappingResult")===I,l=b.a.f.get(a,"setDomNodeChildrenFromArrayMapping_lastMappingResult")||[],n=b.a.V(l,function(a){return a.U}),q=b.a.Ja(n,d),s=[],v=0,w=0,B=[],A=[];d=[];for(var z=[],n=[],t,D=0,C,E;C=q[D];D++)switch(E=C.moved,C.status){case "deleted":E===I&&(t=l[v],t.j&&t.j.B(),B.push.apply(B,M(t.M)),e.beforeRemove&&(d[D]=t,A.push(t)));v++;break;case "retained":g(D,v++);break;case "added":E!==I?
 g(D,E):(t={U:C.value,na:b.m(w++)},s.push(t),A.push(t),k||(n[D]=t))}h(e.beforeMove,z);b.a.o(B,e.beforeRemove?b.A:b.removeNode);for(var D=0,k=b.e.firstChild(a),H;t=A[D];D++){t.M||b.a.extend(t,ha(a,c,t.U,f,t.na));for(v=0;q=t.M[v];k=q.nextSibling,H=q,v++)q!==k&&b.e.Pa(a,q,H);!t.Ab&&f&&(f(t.U,t.M,t.na),t.Ab=m)}h(e.beforeRemove,d);h(e.afterMove,z);h(e.afterAdd,n);b.a.f.set(a,"setDomNodeChildrenFromArrayMapping_lastMappingResult",s)};b.b("utils.setDomNodeChildrenFromArrayMapping",b.a.$a);b.C=function(){this.allowTemplateRewriting=
 r};b.C.prototype=new b.v;b.C.prototype.renderTemplateSource=function(a){var d=!(9>b.a.Z)&&a.nodes?a.nodes():p;if(d)return b.a.L(d.cloneNode(m).childNodes);a=a.text();return b.a.ta(a)};b.C.oa=new b.C;b.wa(b.C.oa);b.b("nativeTemplateEngine",b.C);b.qa=function(){var a=this.Db=function(){if("undefined"==typeof F||!F.tmpl)return 0;try{if(0<=F.tmpl.tag.tmpl.open.toString().indexOf("__"))return 2}catch(a){}return 1}();this.renderTemplateSource=function(b,c,e){e=e||{};2>a&&j(Error("Your version of jQuery.tmpl is too old. Please upgrade to jQuery.tmpl 1.0.0pre or later."));
 var f=b.data("precompiled");f||(f=b.text()||"",f=F.template(p,"{{ko_with $item.koBindingContext}}"+f+"{{/ko_with}}"),b.data("precompiled",f));b=[c.$data];c=F.extend({koBindingContext:c},e.templateOptions);c=F.tmpl(f,b,c);c.appendTo(y.createElement("div"));F.fragments={};return c};this.createJavaScriptEvaluatorBlock=function(a){return"{{ko_code ((function() { return "+a+" })()) }}"};this.addTemplate=function(a,b){y.write("<script type='text/html' id='"+a+"'>"+b+"\x3c/script>")};0<a&&(F.tmpl.tag.ko_code=
 {open:"__.push($1 || '');"},F.tmpl.tag.ko_with={open:"with($1) {",close:"} "})};b.qa.prototype=new b.v;w=new b.qa;0<w.Db&&b.wa(w);b.b("jqueryTmplTemplateEngine",b.qa)}"function"===typeof require&&"object"===typeof exports&&"object"===typeof module?L(module.exports||exports):"function"===typeof define&&define.amd?define(["exports"],L):L(x.ko={});m;
 })();
--- a/one/static/script/less.min.js
+++ b/one/static/script/less.min.js
--- a/one/static/script/store.js
+++ b/one/static/script/store.js
 var cloud = (function(cloud) {
    function Model() {
        //alias for this
        var self = this;
        var uploadURLRequestInProgress = false;
        //currently displayed files
        self.files = ko.observableArray();
        //false, if you are in /
        self.notInRoot = ko.observable(false);
        //defalut path to display
        self.currentPath = ko.observable('/');
        //default upload url (invalid)
        self.uploadURL = ko.observable('/');
        self.newFolderName = ko.observable();
        self.uploadProgress = ko.observable('0%');
        self.quota = {
            rawUsed: ko.observable(0),
            rawSoft: ko.observable(0),
            rawHard: ko.observable(0)
        };
        self.quota.used = ko.computed(function() {
            return cloud.convert(self.quota.rawUsed(), 1);
        });
        self.quota.hard = ko.computed(function() {
            return cloud.convert(self.quota.rawHard(), 1);
        });
        self.quota.soft = ko.computed(function() {
            return cloud.convert(self.quota.rawSoft(), 1);
        });
        self.quota.usedBar = ko.computed(function() {
            return (self.quota.rawUsed() / self.quota.rawHard() * 100).toFixed(0) + '%';
        }, self);
        self.quota.softPos = ko.computed(function() {
            return (self.quota.rawSoft() / self.quota.rawHard() * 100).toFixed(0) + '%';
        }, self);
        self.sortBy = ko.observable('name');
        $('#current-location select').on('change', function() {
            self.sortBy($('#current-location select').val());
            sortFiles();
        })
        /**
         * Loads the parent folder
         */
        self.jumpUp = function() {
            var s = self.currentPath();
            loadFolder(s.substr(0, s.substr(0, s.length - 1).lastIndexOf('/') + 1));
        };
        var sortFiles = (function() {
            self.files.sort({
                name: function(a, b) {
                    if (a.type === b.type) {
                        return a.originalName.localeCompare(b.originalName);
                    }
                    if (a.type === gettext('file')) {
                        return 1;
                    }
                    return -1;
                },
                date: function(a, b) {
                    if (a.type === b.type) {
                        return new Date(b.mTime).getTime() - new Date(a.mTime).getTime();
                    }
                    if (a.type === gettext('file')) {
                        return 1;
                    }
                    return -1;
                },
                size: function(a, b) {
                    if (a.type === b.type) {
                        return b.originalSize - a.originalSize;
                    }
                    if (a.type === gettext('file')) {
                        return 1;
                    }
                    return -1;
                },
            }[self.sortBy()]);
        });
        /**
         * Loads the specified folder
         */
        var loadFolder = cloud.throttle(function(path, fast) {
            self.currentPath(path);
            $.ajax({
                type: 'POST',
                data: 'path=' + path,
                url: '/ajax/store/list',
                dataType: 'json',
                success: function(data) {
                    if (!fast) {
                        $('.file-list .real').css({
                            left: 0,
                            position: 'relative'
                        }).animate({
                            left: '-100%'
                        }, 500).promise().done(function() {
                            loadFolderDone(data);
                            $('.file-list .real').css({
                                left: '-300%',
                                position: 'relative'
                            }).animate({
                                left: 0
                            }, 500);
                        });
                    } else {
                        loadFolderDone(data);
                    }
                },
            })
        });
        self.loadTopList = cloud.throttle(function() {
            self.currentPath('/');
            $.ajax({
                type: 'POST',
                url: '/ajax/store/top/',
                dataType: 'json',
                success: function(data) {
                    $('.file-list .real').css({
                        left: 0,
                        position: 'relative'
                    }).animate({
                        left: '-100%'
                    }, 500).promise().done(function() {
                        loadFolderDone(data);
                        $('.file-list .real').css({
                            left: '-300%',
                            position: 'relative'
                        }).animate({
                            left: 0
                        }, 500);
                    });
                }
            })
        });
        /**
         * After loadFolder completes, this function updates the UI
         */
        function loadFolderDone(data) {
            var viewData = [];
            var added = 0;
            self.notInRoot(self.currentPath().lastIndexOf('/') !== 0);
            self.files([]);
            for (var i in data) {
                addFile(data[i]);
            }
            sortFiles();
        }
        /**
         * Add file to the displayed files list
         */
        function addFile(d) {
            var viewData;
            if (d.TYPE === 'D') {
                viewData = {
                    originalName: d.NAME,
                    originalSize: 0,
                    name: d.NAME.length > 30 ? (d.NAME.substr(0, 27) + '...') : d.NAME,
                    size: 'katalógus',
                    type: 'katalógus',
                    mTime: d.MTIME,
                    getTypeClass: 'name filetype-folder',
                    clickHandler: function(item) {
                        loadFolder(self.currentPath() + item.originalName + '/');
                    }
                };
            } else {
                var type = 'text';
                var ext = {
                    image: /\.(jpg|png|gif|jpeg)$/,
                    pdf: /\.pdf$/,
                    doc: /\.docx?$/,
                    excel: /\.xlsx?$/,
                    csv: /\.csv$/,
                    php: /\.php$/,
                    tex: /\.tex$/,
                    ppt: /\.pptx?/,
                    music: /\.(wav|mp3)$/
                };
                for (var i in ext) {
                    if (d.NAME.match(ext[i])) {
                        type = i;
                        break;
                    }
                }
                var extension;
                try {
                    extension = d.NAME.match(/\.\w+$/)[0].substr(1);
                } catch (ex) {
                    extension = 'N/A';
                }
                viewData = {
                    originalName: d.NAME,
                    originalSize: d.SIZE,
                    name: d.NAME.length > 30 ? (d.NAME.substr(0, 20) + '... (' + extension + ')') : d.NAME,
                    size: cloud.convert(d.SIZE),
                    type: gettext('file'),
                    mTime: d.MTIME,
                    getTypeClass: 'name filetype-' + type,
                    clickHandler: function(item, e) {
                        toggleDetails.call(e.currentTarget);
                    }
                };
            }
            self.files.push(viewData);
        }
        /**
         * After 'addFile', this function animates the new item
         */
        self.fadeIn = function(e) {
            //firefox sucks :S
            try {
                $(e).hide().slideDown(500);
            } catch (ex) {
            }
        }
        self.fadeOutFile = function(e) {
            try {
                $(e).slideUp(500, function() {
                    e.parentNode.removeChild(e);
                });
            } catch (ex) {
                e.parentNode.removeChild(e);
            }
        }
        /**
         * Downloads the specified file (or folder zipped)
         */
        self.download = function(item, ev) {
            ev.stopPropagation();
            ev.preventDefault();
            if (window.navigator.userAgent.indexOf('cloud-gui') > -1) {
                window.location.href = 'cloudfile:' + self.currentPath() + item.originalName;
                return;
            }
            $.ajax({
                type: 'POST',
                data: 'dl=' + self.currentPath() + item.originalName,
                url: '/ajax/store/download',
                dataType: 'json',
                success: function(data) {
                    window.location.href = data.url;
                }
            })
        }
        /**
         * Deletes the specified file (or folder)
         */
        self.delete = function(item, ev) {
            ev.stopPropagation();
            ev.preventDefault();
            $('#modal').show();
            s = "";
            if (item.type == gettext('file')) {
                s = gettext("You are removing the file <strong>%s</strong>.");
            } else {
                s = gettext("You are removing the folder <strong>%s</strong> (and its content).");
            }
            $('#modal-container').html(interpolate(s, [item.originalName]) + " " + gettext("Are you sure?") + '<br /><input class="ok" type="button" value="' + gettext("Delete") + '" style="float: left"/><input class="cancel" type="button" value="' + gettext('Cancel') + '" style="float: right" />');
            $('#modal-container .ok').click(function() {
                $('#modal').hide();
                $.ajax({
                    type: 'POST',
                    data: 'rm=' + self.currentPath() + item.originalName,
                    url: '/ajax/store/delete',
                    dataType: 'json',
                    success: function(data) {
                        self.files.remove(item);
                    }
                })
            });
            $('#modal-container .cancel').click(function() {
                $('#modal').hide();
            });
        }
        /**
         * Renames the specified file
         */
        self.rename = function(item, e) {
            e.stopPropagation();
            e.preventDefault();
            var oldName = $(e.target).parent().parent().parent().find('.name').html();
            $(e.target).parent().unbind('click').click(function(f) {
                f.stopPropagation();
                f.preventDefault();
                $(e.target).parent().parent().parent().find('.name').html(oldName);
                $(e.target).parent().click(function(g) {
                    g.stopPropagation();
                    self.rename(item, g);
                });
            })
            //$(e.target).parent().parent().parent().unbind('click');
            $(e.target).parent().parent().parent().find('.name').html('<input type="text" value="' + item.originalName + '" />\
 <input type="submit" value="' + gettext('Rename') + '" />');
            $(e.target).parent().parent().parent().find('.name input').click(function(f) {
                f.stopPropagation();
            })
            $(e.target).parent().parent().parent().find('.name input[type=submit]').click(function(e) {
                e.preventDefault();
                var newName = $(e.target).parent().parent().parent().find('.name input[type=text]').val();
                $.ajax({
                    type: 'POST',
                    data: 'path=' + self.currentPath() + item.originalName + '&new=' + newName,
                    url: '/ajax/store/rename',
                    dataType: 'json',
                    success: function(data) {
                        loadFolder(self.currentPath(), true);
                    }
                })
                return false;
            })
        }
        /**
         * Requests a new upload link from the store server
         */
        self.getUploadURL = function() {
            uploadURLRequestInProgress = true;
            $.ajax({
                type: 'POST',
                data: 'ul=' + self.currentPath() + '&next=' + encodeURI(window.location.href),
                url: '/ajax/store/upload',
                dataType: 'json',
                success: function(data) {
                    self.uploadURL(data.url);
                    uploadURLRequestInProgress = false;
                }
            })
        }
        /**
         * Creates a new folder (and then reloads the current folder)
         */
        self.newFolder = cloud.throttle(function(i, e) {
            $(e.target).parent().parent().parent().removeClass('opened');
            $.ajax({
                type: 'POST',
                data: 'new=' + self.newFolderName() + '&path=' + self.currentPath(),
                url: '/ajax/store/newFolder',
                dataType: 'json',
                success: function(data) {
                    loadFolder(self.currentPath(), true);
                }
            })
        });
        /**
         * Drag'n'drop tests
         */
        var tests = {
            filereader: typeof FileReader != 'undefined',
            dnd: 'draggable' in document.createElement('span'),
            formdata: !! window.FormData,
            progress: "upload" in new XMLHttpRequest
        };
        /**
         * Uploads the specified file(s)
         */
        var readfiles = cloud.delayUntil(function(file, next) {
            console.log('read', next)
            //1 GB file limit
            if (file.size > 1024 * 1024 * 1024) {
                $('#upload-zone').hide();
                $('#upload-error').show();
                $('#upload-error-size').show();
                setTimeout(function() {
                    $('#upload-zone').show();
                    $('#upload-error').hide();
                    $('#upload-error-size').hide();
                }, 3000);
                return;
            }
            var formData = tests.formdata ? new FormData() : null;
            formData.append('data', file);
            // now post a new XHR request
            if (tests.formdata) {
                var xhr = new XMLHttpRequest();
                var start = new Date().getTime();
                xhr.open('POST', self.uploadURL());
                xhr.onload = xhr.onerror = function() {
                    self.uploadProgress('0%');
                    self.uploadURL('/');
                    if (next) {
                        console.log('complete, next')
                        next();
                    } else {
                        $('.file-upload').removeClass('opened');
                        $('.file-upload .details').slideUp(700);
                        $('#upload-zone').show();
                        $('#upload-progress-text').hide();
                        loadFolder(self.currentPath());
                    }
                }
                if (tests.progress) {
                    $('#upload-zone').hide();
                    $('#upload-progress-text').show();
                    var originalUsedQuota = self.quota.rawUsed();
                    xhr.upload.onprogress = function(event) {
                        if (event.lengthComputable) {
                            self.quota.rawUsed(originalUsedQuota + parseInt(event.loaded / 1024));
                            var complete = (event.loaded / event.total * 100 | 0);
                            //progress.value = progress.innerHTML = complete;
                            self.uploadProgress(complete.toFixed(1) + '%');
                            var suffix = 'B KB MB GB'.split(' ');
                            var l = event.loaded;
                            var t = event.total;
                            for (var i = 0; l > 1024; i++) {
                                l /= 1024;
                            }
                            l = l.toFixed(1) + ' ' + suffix[i];
                            for (var i = 0; t > 1024; i++) {
                                t /= 1024;
                            }
                            t = t.toFixed(1) + ' ' + suffix[i];
                            var diff = new Date().getTime() - start;
                            if (complete < 100) {
                                $('#upload-progress-text').html(gettext('Upload') + ': ' + cloud.convert(event.loaded / diff * 1000) + '/s (' + (event.loaded / event.total * 100).toFixed(2) + '%)');
                            } else {
                                $('#upload-progress-text').html(gettext('Upload') + ': ' + gettext('done, processing...'));
                            }
                        }
                    }
                }
                xhr.send(formData);
            }
        }, function() {
            return self.uploadURL() !== '/';
        }, 200);
        /**
         * Drag'n'drop listeners
         */
        document.addEventListener('drop', function(e) {
            e.stopPropagation();
            e.preventDefault();
            var len=e.dataTransfer.files.length;
            var files=e.dataTransfer.files;
            console.log(files);
            console.log(e.dataTransfer.files);
            var i=1;
            readfiles(e.dataTransfer.files[0], function() {
                console.log('next', i);
                next=arguments.callee;
                return function() {
                    console.log('readnext', i, len);
                    if(i >= len-1) {
                        console.log('end', i, len);
                        self.getUploadURL();
                        readfiles(files[i++], null);
                        return;
                    }
                    self.getUploadURL();
                    readfiles(files[i++], next());
                }
            }());
            return false;
        });
        document.addEventListener('dragover', function(e) {
            if (!uploadURLRequestInProgress && self.uploadURL() == '/') {
                $('.file-upload .summary').click();
            }
            e.stopPropagation();
            e.preventDefault();
            return false;
        });
        /**
         * Fetch quota information
         */
        function refreshQuota() {
            $.ajax({
                'type': 'GET',
                'url': '/ajax/store/quota',
                dataType: 'json',
                success: function(data) {
                    self.quota.rawUsed(parseInt(data.Used));
                    self.quota.rawSoft(parseInt(data.Soft));
                    self.quota.rawHard(parseInt(data.Hard));
                }
            })
        }
        //initialization
        refreshQuota();
        loadFolder(self.currentPath());
    }
    var model = new Model();
    $(function() {
        ko.applyBindings(model);
        $('#keys').click(function(e) {
            $('.key').slideDown(700);
            $('#keys').slideUp(700);
        });
    });
    document.addEventListener('dragenter', function(e) {
        e.stopPropagation();
        e.preventDefault();
        return false;
    });
    document.addEventListener('drag', function(e) {
        e.stopPropagation();
        e.preventDefault();
        return false;
    });
    return cloud;
 })(cloud || {});
--- a/one/static/script/util.js
+++ b/one/static/script/util.js
 var cloud = (function(cloud) {
    function getCookie(name) {
        var cookieValue = null;
        if(document.cookie && document.cookie != '') {
            var cookies = document.cookie.split(';');
            for(var i = 0; i < cookies.length; i++) {
                var cookie = jQuery.trim(cookies[i]);
                if(cookie.substring(0, name.length + 1) == (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
    var csrftoken = getCookie('csrftoken');
    function csrfSafeMethod(method) {
        return(/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
    }
    $.ajaxSetup({
        crossDomain: false,
        beforeSend: function(xhr, settings) {
            if(!csrfSafeMethod(settings.type)) {
                xhr.setRequestHeader("X-CSRFToken", csrftoken);
            }
        }
    });
    /**
     * Convert bytes to human readable format
     */
    cloud.convert = function(n, skip, precision) {
        skip = skip | 0;
        precision = precision | 2;
        var suffix = 'B KB MB GB'.split(' ');
        for(var i = skip; n > 1024; i++) {
            n /= 1024;
        }
        return n.toFixed(precision) + ' ' + suffix[i];
    }
    /**
     * Returns throttled function
     */
    cloud.throttle = function(f) {
        var disabled = false;
        return function() {
            if(disabled) {
                return
            };
            disabled = true;
            setTimeout(function() {
                disabled = false;
            }, 700);
            f.apply(this, arguments);
        }
    }
    /**
     * Delay the function call for `f` until `g` evaluates true
     * Default check interval is 1 sec
     */
    cloud.delayUntil = function(f, g, timeout) {
        var timeout = timeout || 1000;
        function check() {
            var o = arguments;
            if(!g()) {
                setTimeout(function() {
                    check.apply(null, o)
                }, timeout);
                return;
            }
            f.apply(null, o);
        }
        return function() {
            check.apply(null, arguments);
        }
    }
    return cloud;
 })(cloud || {});
--- a/one/static/style/base.less
+++ b/one/static/style/base.less
 body
 {
    min-height:100%;
    font-family: 'Titillium Web', sans-serif;
    font-size:.9em;
    background:#dadada url(/static/image/site_bgr.png) repeat-x;
    background-position:80px 0;
    margin:0;
    padding:0;
    overflow: scroll;
 }
 #content
 {
    width:970px;
    text-align:left;
    margin:0 auto;
 }
 .contentblock
 {
    background-color:#ccc;
    border-radius:4px;
    border:1px solid #aaa;
    box-shadow:0 0 30px rgba(0,0,0,0.3);
    margin:20px;
    p,dl
    {
        margin:0;
        padding:5px;
    }
    h2
    {
        background-color:#000;
        background-image:url(/static/image/hexabar.png);
        background-position:right center;
        background-repeat:no-repeat;
        border-radius:4px;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
        color:#eee;
        font-size:1.5em;
        margin-top:0;
        padding:10px;
        position: relative;
    }
    &.wide {
        margin-right: 30px;
    }
    &.note {
        background-color: #ffc;
    }
    ol {
        margin-left: 2em;
        li.done {
            color: #aaa;
        }
    }
 }
 .big {
    font-size: 2em;
 }
 ul.messagelist
 {
    text-align:left;
    margin:0;
    padding:0 0 5px;
 }
 ul.messagelist li
 {
    font-size:12px;
    display:block;
    border-bottom:1px solid #ddd;
    color:#666;
    background:#ffc url(/static/admin/img/icon_success.gif) 5px .3em no-repeat;
    margin:0 0 3px;
    padding:4px 5px 4px 25px;
 }
 ul.messagelist li.warning
 {
    background-image:url(/static/admin/img/icon_alert.gif);
 }
 ul.messagelist li.error
 {
    background-image:url(/static/admin/img/icon_error.gif);
 }
 input.validated {
    padding-right: 15px;
    background-image: url(/static/admin/img/icon_success.gif);
    background-repeat: no-repeat;
    background-position: right center;
    &.error
    {
        background:#fcc url(/static/admin/img/icon_error.gif) right center no-repeat;
        padding-right: 15px;
    }
 }
 .errornote
 {
    font-size:12px!important;
    display:block;
    border:1px solid red;
    color:red;
    background:#ffc url(/static/admin/img/icon_error.gif) 5px .3em no-repeat;
    margin:0 0 3px;
    padding:4px 5px 4px 25px;
 }
 .errorlist li
 {
    font-size:12px!important;
    display:block;
    border:1px solid red;
    color:#FFF;
    background:red url(/static/admin/img/icon_alert.gif) 5px .3em no-repeat;
    margin:0 0 3px;
    padding:4px 5px 4px 25px;
 }
 .errorlist li a
 {
    color:#FFF;
    text-decoration:underline;
 }
 td ul.errorlist li
 {
    margin:0!important;
 }
 .errors
 {
    background:#ffc;
 }
 .errors input,.errors select,.errors textarea
 {
    border:1px solid red;
 }
 div.system-message
 {
    background:#ffc;
    font-size:.8em;
    margin:10px;
    padding:6px 8px;
 }
 div.system-message p.system-message-title
 {
    color:red;
    background:#ffc url(/static/admin/img/icon_error.gif) 5px .3em no-repeat;
    margin:0;
    padding:4px 5px 4px 25px;
 }
 small {
  font-size: 0.8em;
 }
 input {
    border-radius: 2px;
    border: 1px solid #777;
    padding: 2px;
    margin: 1px 5px;
    background: rgba(0,0,0,0.1);
    font-family: 'Titillium Web', sans-serif;
    outline: none;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.2), 0 0 5px rgba(0,0,0,0.2);
    -webkit-transition: box-shadow 0.5s;
    -moz-transition: box-shadow 0.5s;
    -o-transition: box-shadow 0.5s;
    transition: box-shadow 0.5s;
    &:hover{
        border: 1px solid #666;
        box-shadow: inset 0 0 10px rgba(0,0,0,0.2), 0 0 5px rgba(255,255,0,0.5);
    };
    &:focus{
        border: 1px solid #555;
        box-shadow: inset 0 0 10px rgba(0,0,0,0.2), 0 0 10px rgba(255,255,0,0.8);
    }
 }
 input[type=submit], input[type=button], input[type=reset]{
    border: 1px solid #777;
    cursor: pointer;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
    -webkit-transition: background 0.5s;
    -moz-transition: background 0.5s;
    -o-transition: background 0.5s;
    transition: background 0.5s;
    &:hover{
        background: rgba(0,0,0,0.2);
    };
 }
 input:disabled {
    background-color: rgba(255,0,0,0.2);
    color: #222;
    &:hover {
        background-color: rgba(255,0,0,0.5);
    }
 }
 textarea {
    border-radius: 2px;
    border: 1px solid #777;
    padding: 5px;
    margin: 10px 5px;
    width: 300px;
    height: 100px;
    background: rgba(0,0,0,0.1);
    font-family: 'Titillium Web', sans-serif;
    outline: none;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.2), 0 0 5px rgba(0,0,0,0.2);
    -webkit-transition: box-shadow 0.5s;
    -moz-transition: box-shadow 0.5s;
    -o-transition: box-shadow 0.5s;
    transition: box-shadow 0.5s;
    &:hover{
        border: 1px solid #666;
        box-shadow: inset 0 0 10px rgba(0,0,0,0.2), 0 0 5px rgba(255,255,0,0.5);
    };
    &:focus{
        border: 1px solid #555;
        box-shadow: inset 0 0 10px rgba(0,0,0,0.2), 0 0 10px rgba(255,255,0,0.8);
    }
 }
 .hilight {
    background-color: #ff6;
 }
 .hidden-password {
    padding-right: 25px;
    background-image: url(/static/icons/eye-half.png);
    background-repeat: no-repeat;
    background-position: right center;
    cursor: pointer;
    &.shown {
        background-image: url(/static/icons/eye.png);
    }
 }
 @placeholderColor: #444;
 input::-webkit-input-placeholder{
    color: @placeholderColor;
 }
 input:-moz-placeholder{
    color: @placeholderColor;
 }
 input::-moz-placeholder{
    color: @placeholderColor;
 }
 input:-ms-input-placeholder{
    color: @placeholderColor;
 }
 textarea::-webkit-input-placeholder{
    color: @placeholderColor;
 }
 textarea:-moz-placeholder{
    color: @placeholderColor;
 }
 textarea::-moz-placeholder{
    color: @placeholderColor;
 }
 textarea:-ms-input-placeholder{
    color: @placeholderColor;
 }
--- a/one/static/style/box.less
+++ b/one/static/style/box.less
 .boxes
 {
    width:480px;
    float:left;
 }
 .box
 {
    background-color:#000;
    background-image:url(/static/image/hexa.png);
    background-position:center 30%;
    background-repeat:no-repeat;
    color:#fff;
    font-weight:700;
    line-height:1.5em;
    width:400px;
    border-radius:10px;
    border-top-width:30px;
    margin:10px 420px 10px 10px;
    padding:2px;
    h3
    {
        color:#fff;
        text-align:center;
        margin:0;
        padding:3px;
    }
    .content
    {
        min-height:100px;
        margin:0;
        padding:5px;
    }
 }
 .tooltip{
    position: relative;
    z-index: 1;
    .container{
        margin: 10px 10px 5px 150px;
        border-radius: 4px;
        border: 1px solid #888;
        background: #FFFF66;
        box-shadow: 0 0 20px rgba(0,0,0,0.2);
        p{
            text-align: left;
            font-size: 0.8em;
            word-spacing: 2px;
            padding: 5px;
        }
        .tail{
            position: absolute;
            left: 350px;
            border-width: 17px;
            border-style: solid;
            border-color: #888 transparent transparent transparent;
            &:after{
                content: "";
                position: absolute;
                left: -17px;
                top: -18px;
                border-width: 17px;
                border-style: solid;
                border-color: #FFFF66 transparent transparent transparent;
            }
        }
    }
 }
 .entry-list {
    list-style-type: none;
 }
 .entry{
    &.opened {
        .actions{
            display: block !important;
        }
        .summary .name .details {
            display: inline;
            border: none;
        }
    }
    &.small .summary{
        padding: 5px;
        cursor: default;
        &:hover{
            background-color: #c1c1c1;
        }
        .name{
            background: none !important;
            text-align: center;
            float: none;
        }
    }
    &.small-row .summary{
        padding: 5px;
        &:hover{
            background-color: #b1b1b1;
        }
        .name{
            float: none;
        }
    }
    &.key {
        .name {
            background-image: url(/static/icons/key.png);
        }
        textarea {
            margin: 10px;
            width: 93%;
        }
        #new-key .name {
            background-image: url(/static/icons/key--plus.png);
        }
        #reset-key .name {
            background-image: url(/static/icons/key--exclamation.png);
        }
    }
    .quota{
        left: 0;
        top: 0;
        z-index: 0;
        position: absolute;
        width: 100%;
        height: 100%;
        .used{
            height: 100%;
            position: absolute;
        }
        .softLimit{
            height: 100%;
            position: absolute;
            border-left: 1px solid red;
        }
    }
    .summary{
        padding: 15px 5px;
        line-height: 1.7em;
        border-top: 1px solid #888;
        cursor: pointer;
        background-color: #c1c1c1;
        position: relative;
        -webkit-transition: background-color 0.3s;
        -moz-transition: background-color 0.3s;
        -o-transition: background-color 0.3s;
        transition: background-color 0.3s;
        &.unfinished{
            background-color: rgb(252, 252, 108);
            background-image: url(/static/image/constr.png);
            background-position: right top;
            background-repeat: no-repeat;
            &:hover{
                background-color: rgb(236, 236, 106);
                background-image: url(/static/image/constr.png);
            }
        }
        &.selected-summary{
            background-color: rgb(124, 236, 103);
            &:hover{
                background-color: rgb(135, 211, 120);
            }
        }
        &.public-template{
            background-color: rgb(167, 179, 195);
            &:hover{
                background-color: rgb(157, 169, 185);
            }
        }
        &:hover{
            background-color: #b1b1b1;
            background-image: none;
            .actions{
                display: block;
            }
            .name .details {
                display: inline;
                border: none;
            }
        }
        .id{
            float: right;
            width: 30px;
        }
        .name{
            float: left;
            padding-left: 25px;
            background-repeat: no-repeat;
            background-position: left center;
            z-index: 2;
            position: relative;
            height: 24px;
            &.filetype-new-folder {
                float: left;
            }
            .details {
                display: none;
            }
        }
        .status{
            text-align: right;
            float: right;
            width: 60px;
            z-index: 2;
            position: relative;
        }
        .actions{
            float: right;
            margin-left: 5px;
            display: none;
            z-index: 2;
            position: relative;
            a{
                margin: 2px 0;
                height: 16px;
                width: 16px;
                display: block;
                float: left;
                margin-left: 2px;
                &:hover{
                    box-shadow: 0 0 10px rgba(0,0,0,0.4);
                    background-color: rgba(0,0,0,0.4);
                }
            }
        }
        #new-folder-form {
            float: right;
            margin-left: 5px;
            display: none;
            z-index: 2;
            position: relative;
        }
    }
    &.opened #new-folder-form {
        display: block;
    }
    .details{
        border-top: 1px solid #888;
        display: none;
        .container{
            padding: 5px 5px;
            .upload-zone{
                margin: 10px;
                border-radius: 10px;
                border: 2px dashed #666;
                text-align: center;
                font-size: 0.8em;
                padding: 10px;
                p {
                    padding: 0;
                }
            }
        }
        h3{
            font-weight: normal;
        }
        ul{
            list-style: none;
            margin: 0px 5px;
        }
        li{
            margin: 8px 0px;
            padding: 3px 0px 3px 20px;
            border-bottom: 1px dotted #aaa;
            background-repeat: no-repeat;
            background-position: 0px 4px;
            &:last-child{
                border-bottom: none;
            };
        }
        a{
            text-decoration: underline;
        }
        .name{
            float: none;
            background-image: url(/static/icons/computer.png);
        }
        .os-win{
            background-image: url(/static/icons/windows.png)
        }
        .os-linux{
            background-image: url(/static/icons/animal-penguin.png)
        }
        .template{
            background-image: url(/static/icons/document-template.png)
        }
        .type{
            background-image: url(/static/icons/box-share.png)
        }
        .date{
            background-image: url(/static/icons/calendar-day.png)
        }
        .cpu{
            background-image: url(/static/icons/processor.png)
        }
        .memory{
            background-image: url(/static/icons/memory.png)
        }
        .count{
            background-image: url(/static/icons/documents-stack.png)
        }
        .value{
            float: right;
            width: 200px;
            text-align: right;
        }
        .description{
            font-size: inherit;
            background-image: url(/static/icons/document-snippet.png);
            .value{
                font-size: 0.8em;
                word-spacing: 3px;
                width: 350px;
            }
        }
    }
    &.new .name{
        background-image: url(/static/icons/computer--plus.png);
    }
 }
 #new-share .type-summary, .share-type .value {
    &.type-summary {
        font-size: .8em;
        text-align: right;
    }
    span {
        background-position: left center;
        background-repeat: no-repeat;
        padding-left: 18px;
            &.suspend{
                background-image: url(/static/icons/control-pause.png)
            }
            &.delete{
                background-image: url(/static/icons/minus-circle.png)
            }
    }
 }
 #template-wizard .size-summary, .type .value {
    &.size-summary {
        font-size: .8em;
        text-align: right;
    }
    span {
        background-position: left center;
        background-repeat: no-repeat;
        padding-left: 18px;
            &.cpu{
                background-image: url(/static/icons/processor.png)
            }
            &.memory{
                background-image: url(/static/icons/memory.png)
            }
            &.credit{
                background-image: url(/static/icons/point.png)
            }
    }
 }
 .file-list{
    list-style: none;
    max-height: 400px;
    .name{
        float: left;
    }
    .info{
        float: right;
        width: 65px;
        text-align: right;
        font-size: 0.8em;
    }
    select {
        position: absolute;
        left: 10px;
        top: 5px;
        z-index: 10;
    }
 }
 #file-list {
    overflow-y: scroll;
    li:nth-child(3) .summary{
        border-top: none;
    }
    li:nth-child(2) .summary{
        border-top: none;
    }
    li:nth-child(1) .summary{
        border-top: none;
        border-bottom: 1px solid #888
    }
 }
 #current-location{
    .summary{
        border-bottom: 1px solid #888;
        height: 25px;
        .name {
            position: absolute;
            left: 100px;
            text-align: left;
        }
    }
 }
 .filetype-c {
    background-image: url(/static/icons/document-visual-studio.png);
 }
 .filetype-text {
    background-image: url(/static/icons/document.png);
 }
 .filetype-image {
    background-image: url(/static/icons/document-image.png);
 }
 .filetype-zip {
    background-image: url(/static/icons/folder-zipper.png);
 }
 .filetype-pdf {
    background-image: url(/static/icons/document-pdf.png);
 }
 .filetype-doc {
    background-image: url(/static/icons/document-word.png);
 }
 .filetype-excel {
    background-image: url(/static/icons/document-excel.png);
 }
 .filetype-csv {
    background-image: url(/static/icons/document-excel-csv.png);
 }
 .filetype-php {
    background-image: url(/static/icons/document-php.png);
 }
 .filetype-tex {
    background-image: url(/static/icons/document-tex.png);
 }
 .filetype-ppt {
    background-image: url(/static/icons/document-powerpoint.png);
 }
 .filetype-music {
    background-image: url(/static/icons/document-music.png);
 }
 .filetype-movie {
    background-image: url(/static/icons/document-film.png);
 }
 .filetype-folder {
    background-image: url(/static/icons/folder.png);
 }
 .toplist {
    background-image: url(/static/icons/arrow-circle-double.png);
 }
 .filetype-up {
    background-image: url(/static/icons/upload-cloud.png);
 }
 .filetype-new-folder {
    background-image: url(/static/icons/folder--plus.png);
 }
 .filetype-jump-out {
    background-image: url(/static/icons/arrow-curve-090.png);
 }
 .vm-on{
    background-image: url(/static/icons/computer-cloud.png);
 }
 .vm-off{
    background-image: url(/static/icons/computer-off.png);
 }
 #template .entry .summary .name{
  background-image: url(/static/icons/document-template.png)
 }
 #template .entry .public-template .name{
  background-image: url(/static/icons/blue-document-share.png)
 }
 #new-template-button .name{
  background-image: url(/static/icons/document--plus.png) !important
 }
 .wm-list.modal{
  border-radius: 4px;
  border: 1px solid #666;
 }
 .wm-list.modal input{
  padding: 2px 10px;
 }
 .wm-list.modal .wm:nth-child(1) .summary{
  border-top: none;
 }
 #template{
    .entry {
        .template-details{
            margin: 0;
            padding: 0;
            border-top: 1px solid #888;
            display: none;
            ul{
                list-style-type: none;
            }
            li{
                padding-left: 10px;
                border-top: 1px solid #aaa;
                position: relative;
                &:first-child{
                    border-top: none;
                };
                .status{
                    float: right;
                    padding: 0 5px;
                }
                .group-name{
                    float: left;
                    line-height: 1.5em;
                    z-index: 2;
                    position: relative;
                }
            }
        }
    }
 }
 #vm-credentials, #ports {
    .content {
        padding: 15px;
    }
 }
 table {
    width: 100%;
    border-collapse: collapse;
    tr {
        width: 100%;
        &:hover {
            background-color: rgba(0,0,0,0.1);
        };
        td,th {
            padding: 5px;
        }
        td {
            width: 150px;
        }
    }
 }
 #groups {
    .entry {
        .summary {
            .name {
                background-image: url(/static/icons/users.png);
            }
        }
    }
    #new-group {
        .summary .name {
            background-image: url(/static/icons/user--plus.png);
        }
    }
    #show-hidden-groups .summary .name {
        background-image: url(/static/icons/eye.png);
    }
 }
 #group-members, #group-owners {
    .summary .name {
        background-image: url(/static/icons/user.png);
        float: left;
    }
 }
 #new-member, #new-owner {
    .name {
        background-image: url(/static/icons/user--plus.png) !important;
        float: left;
    }
    #new-member-form, #new-owner-form {
        float: right;
        margin-left: 5px;
        display: none;
        z-index: 2;
        position: relative;
    }
 }
 .shares {
    margin: 5px;
    list-style: none;
    li {
        overflow: hidden;
        border-radius: 2px;
        border: 1px solid #888;
        height: 30px;
        position: relative;
        margin: 5px 0;
        line-height: 30px;
        padding-left: 10px;
        background-color: rgba(0,0,0,0.05);
        -webkit-transition: background-color 0.3s;
        -moz-transition: background-color 0.3s;
        -o-transition: background-color 0.3s;
        transition: background-color 0.3s;
        &:hover{
            background-color: rgba(0,0,0,0.1);
            border: 1px solid #666;
            input {
                border-left: 1px solid #666;
            }
        }
        form {
            position: relative;
        }
        input {
            border: none;
            border-radius: 0;
            border-left: 1px solid #888;
            box-shadow: none;
            position: relative;
            top: -1px;
            height: 30px;
            right: -5px;
        }
    }
 }
 .boxhelp {
    position: relative;
    .boxhelp-box {
        color:#000;
        position: absolute;
        left: -100px;
        width: 500px;
        z-index: 1000000;
        font-size: .7em;
        background-color: #ffc;
        border-radius:4px;
        border:1px solid #aaa;
        box-shadow:0 0 30px rgba(0,0,0,0.3);
        margin:20px;
        display: none;
    }
    &:hover .boxhelp-box {
        display: block;
    }
    .icon {
        display: block;
        float: right;
    }
 }
 #new-owner-autocomplete {
    input[type=button] {
        float: right;
    }
 }
--- a/one/static/style/head.less
+++ b/one/static/style/head.less
 #header {
    height:80px;
    background-color:#072c61;
    background-image:url(/static/image/bme_feher2.png);
    background-repeat:no-repeat;
    background-position:20px 18px;
    border-bottom:3px solid #0B4599;
    box-shadow:0 0 30px rgba(0,0,0,0.4);
    margin:0;
    padding:0 0 0 200px;
    h1 {
        font-size:2em;
        line-height:80px;
        float:left;
        margin:0;
        padding:0 1em;
        a {
            color: #fff;
            text-decoration: none;
        }
    }
 }
 #loginblock {
    position:absolute;
    right:0;
    top:0;
    background-color:#000;
    background-image:url(/static/image/hexabar.png);
    background-position:center center;
    border-radius:0 0 0 10px;
    color:#fff;
    font-weight:700;
    margin:0;
    padding:7px;
    a {
        color: #fff;
        text-decoration: underline;
        &:hover {
            color: #aaa;
        }
    }
 }
--- a/one/static/style/style.less
+++ b/one/static/style/style.less
 @import "base";
 @import "head";
 @import "box";
 @import "wizard";
 * {
    margin:0;padding:0;
 }
 .clear {
    clear: both;
 }
 abbr {
    border-bottom: 1px dotted #666;
 }
 a:link,a:visited {
    color:black;
 }
--- a/one/static/style/wizard.less
+++ b/one/static/style/wizard.less
 #modal{
    top: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 999;
 }
 #shadow{
    position: fixed;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,0.6);
 }
 #modal-container{
    min-width: 500px;
    position: fixed;
    left:50%;
    top:100px;
    margin-left: -270px;
    margin-top: 0;
    min-height: 50px;
    background-color: #fff;
    border-radius: 4px;
    padding: 20px;
    box-shadow: 0 0 30px rgba(0,0,0,0.4);
    border: 1px solid #333;
    max-height: 60%;
    overflow: auto;
    .container{
        max-height: 400px;
        overflow: auto;
        border-radius: 2px;
        border: 1px solid #888;
        background-color: #ccc;
    }
    ul{
        list-style: none;
        li:first-child .summary {
            border: none;
        }
    }
 }
 .wizard{
    li{
        border-bottom: 1px dotted #999;
    }
    label{
        display: inline-block;
        padding: 3px;
        margin: 10px 5px;
    }
    h2{
        margin: 10px 0;
    }
    .progress{
        text-align: center;
        position: relative;
        width: 100%;
        height: 15px;
        .bar{
            height: 20px;
            background-color: rgb(102, 196, 0);
            border-right: 1px solid rgb(70, 134, 0);
        }
        .bar-container{
            border: 1px solid #666;
            box-shadow: 0 0 20px rgba(0,0,0,0.2);
            border-radius: 4px;
            height: 20px;
            position: absolute;
            width: 500px;
        }
        h3 {
            width: 100%;
            position: absolute;
        }
    }
    input[type=text], input[type=number], select {
        display: block;
        float: right;
        margin-top: 8px;
    }
    input[type=number] {
        width: 4em;
    }
    textarea{
        float: right;
        text-align: right;
    }
    nav{
        margin-top: 15px;
        a{
            text-decoration: underline;
            display: block;
        }
        .prev{
            float: left;
        }
        .next{
            float: right;
        }
    }
    ul.radio{
        float: right;
        label {
            float: left;
            margin: 0;
        }
    }
    .radio{
        li{
            float: left;
            padding: 5px;
            margin: 5px 3px;
            border-bottom: none !important;
        }
    }
    .size-summary {
        margin: 10px;
    }
 }
 #new-template-name {
    input {
        margin: 10px 5px;
    }
 }
--- a/one/templates/box/base/box.html
+++ b/one/templates/box/base/box.html
 <div class="contentblock">
    <h2>{% block boxhelp %}{% endblock %}{% block title %}Doboz címe (cseréld le){% endblock title %}</h2>
    <div class="content">
        {% block content %}
        Doboz tartalma (cseréld le)
        {% endblock content %}
    </div>
 </div>
--- a/one/templates/box/base/entry.html
+++ b/one/templates/box/base/entry.html
 {% block content %}
    {% block summary %}{% endblock summary %}
    <div class="details">
        <div class="details-container">
            {% block details %}{% endblock details %}
        </div>
    </div>
 {% endblock content %}
--- a/one/templates/box/base/summary.html
+++ b/one/templates/box/base/summary.html
 {% block content %}
    {% block name %}{% endblock %}
    <div class="status">
        {% block status %}{% endblock status %}
    </div>
    <div class="actions">
        {% block actions %}{% endblock actions %}
    </div>
    <div class="clear"></div>
 {% endblock content %}
--- a/one/templates/box/file/box.html
+++ b/one/templates/box/file/box.html
 {% extends "box/base/box.html" %}
 {% load i18n %}
 {% load l10n %}
 {% get_current_language as LANGUAGE_CODE %}
 {% block title %}
    {% trans "Data store" %}
 {% endblock title %}
 {% block boxhelp %}
 <div class="boxhelp">
    <div class="icon">
        <img src="/static/icons/information-frame.png" alt="{% trans "Help" %}" />
    </div>
    <div class="boxhelp-box">
        <p>{% blocktrans %}This is your global data store.{% endblocktrans %}</p>
        <p>{% blocktrans %}You can access it from all your own virtual machines,
        the lab client, this web interface, or through SFTP protocol.
        {% endblocktrans %}</p>
        <p>{% blocktrans %}This directory is mounted on Windows machines as Z:
        drive, and on Linux ones as ~/sshfs.{% endblocktrans %}</p>
        <p>{% blocktrans %}If you log in on lab machines (currently Ubuntu only),
        you can see this folder also as ~/sshfs.{% endblocktrans %}</p>
        <p>{% blocktrans with serv=storeserv %}You can also use an SFTP client (eg.
        WinSCP) to access your files at {{serv}}. You will need to register a
        public key bellow.{% endblocktrans %}</p>
    </div>
 </div>
 {% endblock %}
 {% block content %}
 <ul class="file-list">
    <li class="entry small" id="current-location">
        <div class="summary">
            <div class="sort">
                <select data-bind="value: sortBy">
                    <option value="name">Név szerint</option>
                    <option value="date">Dátum szerint</option>
                    <option value="size">Méret szerint</option>
                </select>
            </div>
            <div class="name">
                <small>
                    Jelenlegi hely:
                    <span data-bind="text: currentPath"></span>
                </small>
            </div>
            <div class="clear"></div>
        </div>
    </li>
 </ul>
 <ul class="file-list" id="file-list">
    <li class="entry real" data-bind="visible: notInRoot, click: jumpUp">
        <div class="summary">
            <div class="name filetype-jump-out">..</div>
            <div class="clear"></div>
        </div>
    </li>
    <li class="entry small real" data-bind="visible: files().length == 0">
        <div class="summary">
            <div class="name">{% trans "No files." %}</div>
            <div class="clear"></div>
        </div>
    </li>
    <!-- ko foreach: {data:files,afterAdd:fadeIn,beforeRemove:fadeOutFile} -->
    <li class="entry real">
        {% include "box/file/entry.html" %}
    </li>
    <!-- /ko -->
 </ul>
 <ul class="entry-list">
    <li class="entry small-row">
        <div class="summary" id="new-folder">
            <div class="name filetype-new-folder">{% trans "Create folder" %}</div>
            <div id="new-folder-form">
                <input type="text" placeholder="{% trans "Name of new folder" %}" data-bind="value: newFolderName, click: function(m,e){console.log(arguments); e.preventDefault(); e.stopPropagation(); return false;}" />
                <input type="submit" data-bind="click: newFolder, clickBubble: false" value="Létrehozás" />
            </div>
            <div class="clear"></div>
        </div>
    </li>
    <li class="entry small-row">
        <div class="summary" id="new-folder">
            <div class="name toplist" data-bind="click: loadTopList">{% trans "Toplist" %}</div>
            <div class="clear"></div>
        </div>
    </li>
    <li class="entry small-row key">
        <div class="summary" id="keys">
            <div class="name keys">{% trans "Manage keys" %}</div>
            <div class="clear"></div>
        </div>
    </li>
    {% for key in keys %}
        {% include "box/key/entry.html" %}
    {% endfor %}
    <li class="entry small-row key" style="display: none">
        <div class="summary" id="new-key">
            <div class="name">{% trans "Add public key" %}</div>
            <div class="clear"></div>
        </div>
        <div class="details">
            <div class="container">
                <form style="padding-bottom: 10px" action="/key/add/" method="POST">
                    {% csrf_token %}
                    <textarea style="margin-bottom: 5px" name="key" placeholder="{% trans "Public key in OpenSSH format" %}"></textarea><br />
                    <input type="submit" style="margin-left: 10px;" value="{% trans "Save" %}" />
                </form>
            </div>
        </div>
    </li>
    <li class="entry small-row key" style="display: none">
        <div class="summary" id="reset-key">
            <div class="name">{% trans "Reset key" %}</div>
            <div class="clear"></div>
        </div>
    </li>
    <li class="file-upload entry small-row">
        <div class="summary" data-bind="click: getUploadURL">
            <div class="quota">
                <div id="upload-progress" class="used" style="background-color: rgba(0,255,0,0.2);" data-bind="style: {width: uploadProgress}"></div>
            </div>
            <div class="name filetype-up">{% trans "File upload" %}</div>
            <div class="clear"></div>
        </div>
        <div class="details">
            <div class="container">
                <div id="upload-zone" class="upload-zone">
                    <p>{% trans "Drag and drop files here to start uploading." %}</p>
                    <p>
                        {% trans 'You can also use the <a href="#" id="old-upload">the traditional upload form</a>.' %}
                    </p>
                    <p>{% trans 'Upload limit is 1GB per file!' %}</p>
                </div>
                <div style="display: none" id="upload-progress-text" class="upload-zone"></div>
                <div style="display: none" id="upload-error" class="upload-zone">
                    <p id="upload-error-size" style="display: none">{% trans "Error: File is bigger than 1GB!" %}</p>
                    <p id="upload-error-server" style="display: none">{% trans "Error: Upload server is not available!" %}</p>
                    <p id="upload-error-overwrite" style="display: none">{% trans "Error: File already exists!" %}</p>
                    <p id="upload-error-unknown" style="display: none"></p>
                </div>
                <div style="display: none" class="upload-zone" id="old-upload-form">
                    <form action="/" method="POST" data-bind="attr: {action: uploadURL}" enctype="multipart/form-data">
                        <input type="file" name="data" />
                        <input type="submit" value="Feltöltés" />
                    </form>
                </div>
            </div>
        </div>
    </li>
    <li class="entry small">
        <div class="summary">
            <div class="quota">
                <div class="used" style="background-color: rgba(0,255,0,0.2)" data-bind="style: {width: quota.usedBar}"></div>
                <div class="softLimit" data-bind="style: {left: quota.softPos}"></div>
            </div>
            <div class="name">
                {% trans "File quota" %}: <abbr data-bind="text: quota.used" title="{% trans "Used space" %}"></abbr>
                / <abbr data-bind="text: quota.soft" title="{% trans "soft limit" %}"></abbr>
                (
                <abbr title="{% trans "hard limit" %}" data-bind="text: quota.hard"></abbr>
                )
            </div>
            <div class="clear"></div>
        </div>
    </li>
 </ul>
 {% endblock content %}
--- a/one/templates/box/file/entry.html
+++ b/one/templates/box/file/entry.html
 {% extends "box/base/entry.html" %}
 {% load i18n %}
 {% get_current_language as LANGUAGE_CODE %}
 {% block summary %}
 <div class="summary" data-bind="click: clickHandler">
    <div class="name" data-bind="text: name, attr: {class: getTypeClass, title: originalName}"></div>
    <div class="info" data-bind="text: size"></div>
    <div class="actions">
        <a href="#" data-bind="click: $parent.rename, clickBubble: false">
            <img src="/static/icons/pencil.png" alt="{% trans "rename" %}" />
        </a>
        <a href="#" data-bind="click: $parent.delete, clickBubble: false">
            <img src="/static/icons/minus-circle.png" alt="{% trans "remove" %}" />
        </a>
        <a href="#" data-bind="click: $parent.download, clickBubble: false">
            <img src="/static/icons/download-cloud.png" alt="{% trans "download" %}" />
        </a>
    </div>
    <div class="clear"></div>
 </div>
 {% endblock summary %}
 {% block details %}
 <ul>
    <li class="date">
        {% trans "Last modification" %}:
        <small class="value" data-bind="text: mTime"></small>
    </li>
    <li class="filetype-text">
        {% trans "Type" %}:
        <span class="value" data-bind="text: type"></span>
    </li>
 </ul>
 {% endblock details %}
--- a/one/templates/box/key/entry.html
+++ b/one/templates/box/key/entry.html
 {% extends "box/base/entry.html" %}
 {% load i18n %}
 {% get_current_language as LANGUAGE_CODE %}
 {% block content %}
 <li class="entry key" id="key-{{key.id}}" style="display: none">
    {{block.super}}
 </li>
 {% endblock content %}
 {% block summary %}
 <div class="summary">
    <div class="name">
        {{key}}
    </div>
    <div class="actions">
        <a href="#" class="remove delete-key" data-id="{{key.id}}">
            <img src="/static/icons/minus-circle.png" alt="{% trans 'Remove' %}" />
        </a>
    </div>
    <div class="clear"></div>
 </div>
 {% endblock summary %}
 {% block details %}
 <textarea>{{key.key}}</textarea>
 {% endblock details %}
--- a/one/templates/box/template/box.html
+++ b/one/templates/box/template/box.html
 {% extends "box/base/box.html" %}
 {% load i18n %}
 {% load l10n %}
 {% get_current_language as LANGUAGE_CODE %}
 {% block title %}
    {% trans "Templates" %}
 {% endblock title %}
 {% block boxhelp %}
 <div class="boxhelp">
    <div class="icon">
        <img src="/static/icons/information-frame.png" alt="{% trans "Help" %}" />
    </div>
    <div class="boxhelp-box">
        <p>{% blocktrans %}This is the list of your own templates.{% endblocktrans %}</p>
        <p>{% blocktrans %}Templates are customized versions of the base images.{% endblocktrans %}</p>
        <p>{% blocktrans %}You can install all the needed software on a master
        machine, and it will be ready to run by your students in minutes.
        {% endblocktrans %}</p>
    </div>
 </div>
 {% endblock %}
 {% block content %}
 <ul class="vm-list entry-list" id="template">
    {% for t in mytemplates %}
        {% include "box/template/entry.html" %}
    {% endfor %}
    {% if not mytemplates and not group %}
    <div class="tooltip">
        <div class="container">
            <p>{% trans "You have no own templates." %}</p>
            <p>
                {% trans "Create a new one, and share it with your students. Or you can also use a common one." %}
            </p>
            <div class="tail"></div>
        </div>
    </div>
    {% endif %}
    {% if not group %}
    <li id="new-template-button" class="entry new small-row">
        <div class="summary">
            <div class="name">Új Sablon</div>
            <div class="clear"></div>
        </div>
    </li>
    {% endif %}
    {% if publictemplates %}
        {% for t in publictemplates %}
            <li class="entry" id="t{{t.id }}">
                <div class="summary public-template">
                    <div class="name">
                        {{t.name}}
                        <img src="/static/icons/lock-small.png" alt="{% trans "locked" %}"
                         title="{% trans "This is a shared template." %}" />
                    </div>
                    <div class="status">{{t.state}}</div>
                    <div class="actions">
                        {% if t.state == 'READY' %}
                        <a href="#" class="try-template-button" data-id="{{t.id}}" title="{% trans "Try"  %}">
                            <img src="/static/icons/control.png" alt="{% trans "Start" %}"/>
                        </a>
                        <a href="#" class="template-share" data-id="{{t.id}}" data-gid="{{group.id}}" title="{% trans "Share" %}">
                            <img src="/static/icons/user-share.png" alt="{% trans "Share" %}" />
                        </a>
                        {% endif %}
                    </div>
                    <div class="clear"></div>
                    {% if t.myshares %}
                    <ul class="shares">
                        {% for i in t.myshares %}
                        <li>
                            <div class="quota">
                                <div class="used" style="width: {{ i.get_instance_pc|unlocalize }}%"></div>
                            </div>
                            <form action="/vm/unshare/{{i.id}}/" method="post">
                                <span title="{{i.name}}">{{i.name|truncatechars:20}}</span>
                                ({{i.get_running}}/{{i.instance_limit}})
                                    {% csrf_token %}
                                <input type="submit" class="template-unshare" value="{% trans "Delete" %}" style="float: right"/>
                            </form>
                            <div class="clear"></div>
                        </li>
                        {% endfor %}
                    </ul>
                    {% endif %}
                </div>
                <div class="details">
                    <ul>
                        <li class="name">
                            {% trans "System" %}:
                            <span class="value">{{t.system}}</span>
                            <div class="clear"></div>
                        </li>
                        <li class="type">
                            {% trans "Size" %}:
                            <span class="value">
                                {{t.instance_type}}:
                                <span class="cpu">{{t.instance_type.CPU}}</span>
                                <span class="memory">{{t.instance_type.RAM}}</span>
                                <span class="credit">{{t.instance_type.credit}}</span>
                            </span>
                        </li>
                        <li class="description">
                            {% trans "Description" %}:
                            <span class="value">{{t.description}}</span>
                            <div class="clear"></div>
                        </li>
                        <li class="date" >
                            {% trans "Created at" %}:
                            <span class="value">{{t.created_at}} ({{t.owner.get_profile}})</span>
                            <div class="clear"></div>
                        </li>
                        <li class="count">
                            {% trans "Running instances" %}:
                            <span class="value">{{t.running_instances}}</span>
                        </li>
                    </ul>
                </div>
            </li>
        {% endfor %}
    {% endif %}
    <li class="entry small">
        <div class="summary">
            <div class="quota">
                <div class="used" style="background-color: rgba(0,255,0,0.2); width: {{userdetails.get_share_pc|unlocalize}}%"></div>
            </div>
            <div class="name">
                {% blocktrans with used=userdetails.get_weighted_share_count all=userdetails.share_quota %}Share quota: {{used}}/{{all}}{% endblocktrans %}
            </div>
            <div class="clear"></div>
        </div>
    </li>
 </ul>
 {% endblock content %}
--- a/one/templates/box/template/entry.html
+++ b/one/templates/box/template/entry.html
 {% extends "box/base/entry.html" %}
 {% load i18n %}
 {% get_current_language as LANGUAGE_CODE %}
 {% block content %}
 <li class="entry" id="t{{t.id }}">
    {{ block.super }}
 </li>
 {% endblock content %}
 {% block summary %}
    {% include "box/template/summary.html" %}
 {% endblock summary %}
 {% block details %}
 <ul>
    <li class="name">
        {% trans "System" %}:
        <span class="value">{{t.system}}</span>
        <div class="clear"></div>
    </li>
    <li class="type">
        {% trans "Size" %}:
        <span class="value">
            {{t.instance_type}}:
            <span class="cpu">{{t.instance_type.CPU}}</span>
            <span class="memory">{{t.instance_type.RAM}}</span>
            <span class="credit">{{t.instance_type.credit}}</span>
        </span>
    </li>
    <li class="description">
        {% trans "Description" %}:
        <span class="value">{{t.description}}</span>
        <div class="clear"></div>
    </li>
    <li class="date" >
        {% trans "Created at" %}:
        <span class="value">{{t.created_at}} ({{t.owner.get_profile}})</span>
        <div class="clear"></div>
    </li>
    <li class="count">
        {% trans "Running instances" %}:
        <span class="value">{{ t.running_instances }}</span>
    </li>
 </ul>
 {% endblock details %}
--- a/one/templates/box/template/summary.html
+++ b/one/templates/box/template/summary.html
 {% extends "box/base/summary.html" %}
 {% load i18n %}
 {% load l10n %}
 {% get_current_language as LANGUAGE_CODE %}
 {% block content %}
 <div class="summary {% if t.state == 'NEW' or t.state == 'SAVING'%}unfinished{% endif %}">
    {{ block.super }}
    {% if t.myshares %}
    <ul class="shares">
        {% for i in t.myshares %}
        <li>
            <div class="quota">
                <div class="used" style="width: {{ i.get_instance_pc|unlocalize }}%"></div>
            </div>
            <form action="/vm/unshare/{{i.id}}/" method="post">
                <span title="{{i.name}}">{{i.name|truncatechars:20}}</span>
                    ({{i.get_running}}/{{i.instance_limit}})
                    {% csrf_token %}
                <input class="template-unshare" type="submit" value="{% trans "Delete" %}" style="float: right"/>
            </form>
            <div class="clear"></div>
        </li>
        {% endfor %}
    </ul>
    {% endif %}
 </div>
 {% endblock content %}
 {% block name %}
 <div class="name">{{t.name}}</div>
 {% endblock %}
 {% block status %}
    {{vm.state}}
 {% endblock status %}
 {% block actions %}
    {% if t.state == 'READY' %}
    <a href="#" class="try-template" data-id="{{t.id}}" title="{% trans "Try"  %}">
        <img src="/static/icons/control.png" alt="{% trans "Start" %}"/>
    </a>
    <!--<a href="#" title="{% trans "Edit" %}">
        <img src="/static/icons/pencil.png" alt="{% trans "Edit" %}" />
    </a>-->
    <a href="#" class="template-share" data-id="{{t.id}}" data-gid="{{group.id}}" title="{% trans "Share" %}">
        <img src="/static/icons/user-share.png" alt="{% trans "Share" %}" />
    </a>
    {% endif %}
    <a href="#" class="delete-template" data-id="{{ t.id }}" data-name="{{ t.name }}" title="{% trans "Remove" %}">
        <img src="/static/icons/minus-circle.png" alt="{% trans "Remove" %}" />
    </a>
    <!--<a href="#" class="edit-template" data-id="{{ t.id }}" title="{% trans "Edit" %}">
        <img src="/static/icons/pencil.png" alt="{% trans "Edit" %}" />
    </a>-->
 {% endblock actions %}
--- a/one/templates/box/vm/box.html
+++ b/one/templates/box/vm/box.html
 {% extends "box/base/box.html" %}
 {% load i18n %}
 {% load l10n %}
 {% get_current_language as LANGUAGE_CODE %}
 {% block title %}
    {% trans "Virtual machines" %}
 {% endblock title %}
 {% block boxhelp %}
 <div class="boxhelp">
    <div class="icon">
        <img src="/static/icons/information-frame.png" alt="{% trans "Help" %}" />
    </div>
    <div class="boxhelp-box">
        <p>{% blocktrans %}This is the list of your running virtual machines.{% endblocktrans %}</p>
        <p>{% blocktrans %}You can launch a new VM instance if it is shared by
        a teacher for one of your groups.{% endblocktrans %}</p>
        <p>{% blocktrans %}Please note, that users and shares both have a limit
        of launchable instances.{% endblocktrans %}</p>
    </div>
 </div>
 {% endblock %}
 {% block content %}
 <ul class="vm-list entry-list">
    {% if instances %}
        {% for vm in instances %}
            {% include "box/vm/entry.html" %}
        {% endfor %}
    {% elif not just_list_vms %}
    <div class="tooltip">
        <div class="container">
            <p>{% trans "You have not started any machines yet." %}</p>
            <p>
                {% trans "Choose a template, and you can use the system in a minute." %}
            </p>
            <div class="tail"></div>
        </div>
    </div>
    {% endif %}
    {% if not just_list_vms %}
    <li id="new-vm-button" class="entry new small-row">
        <div class="summary">
            <div class="name">{% trans "Start new machine" %}</div>
            <div class="clear"></div>
        </div>
    </li>
    <li id="new-vm" style="display: none">
        <h2>{% trans "Available shares" %}</h2>
        <p>
            {% trans "Choose one of the following shared templates to launch." %}
        </p>
        <div class="container">
            <ul class="vm-list entry-list">
                {% for s in shares %}
                <li class="entry">
                    <div class="summary">
                        <div class="quota">
                            <div class="used" style="width:{% if s.running_shared >=  s.per_user_limit %}100%{% else %}{{ s.get_instance_pc|unlocalize }}%{% endif %}"/>
                            </div>
                        </div>
                        <div class="name wm-on">
                            {{s.name}} - {{ s.group.name }}   ({{ s.running_shared }}/{{ s.per_user_limit }})
                        </div>
                        <div class="status">{{s.get_running}}/{{s.instance_limit}}</div>
                        <div class="clear"></div>
                    </div>
                    <div class="details">
                        <div class="details-container">
                            <ul>
                                <li class="os-{{s.template.os_type}}">
                                    {% trans "System" %}:
                                    <span class="value">{{s.template.system}}</span>
                                    <div class="clear"></div>
                                </li>
                                <li class="type">
                                    {% trans "Size" %}:
                                    <span class="value">
                                        {{s.template.instance_type.name}}
                                        <span class="cpu">{{s.template.instance_type.CPU}}</span>
                                        <span class="memory">{{s.template.instance_type.RAM}}</span>
                                        <span class="credit">{{s.template.instance_type.credit}}</span>
                                    </span>
                                </li>
                                <li class="share-type">
                                    {% trans "Type" %}:
                                    <span class="value">{{s.type }}</span>
                                    ({% if s.get_type.suspend %}
                                    <span class="suspend"
                                        title="{% blocktrans with time=s.get_type.suspend %}Suspend after {{time}}.{%endblocktrans%}">
                                        {{s.get_type.suspendx|timeuntil}}
                                    </span>
                                    {%endif%}{% if s.get_type.delete %}<span class="delete"
                                        title="{% blocktrans with time=s.get_type.delete %}Delete after {{time}}.{%endblocktrans%}">
                                        {{s.get_type.deletex|timeuntil}}</span>{%endif%})
                                </li>
                                <li class="description">
                                    {% trans "Description" %}:
                                    <span class="value">{{s.description}}</span>
                                    <div class="clear"></div>
                                </li>
                                <li>
                                    &nbsp;
                                    <span class="value">
                                        <form method="POST" action="/vm/new/s{{s.pk}}/">
                                            {% csrf_token %}
                                            <input {% if  s.running_shared >= s.per_user_limit  or s.get_running >= s.instance_limit%}disabled="disabled" value="{% trans "Quota reached" %}" {%else%}value="{% trans "Launch" %}"{% endif %} type="submit" />
                                        </form>
                                    </span>
                                    <div class="clear"></div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
                {% endfor %}
            </ul>
        </div>
    </li>
    {% endif %}
    <li class="entry small">
        <div class="summary">
            <div class="quota">
                <div class="used" style="background-color: rgba(0,255,0,0.2); width: {{userdetails.get_instance_pc|unlocalize}}%"></div>
            </div>
            <div class="name">
                {% blocktrans with used=userdetails.get_weighted_instance_count all=userdetails.instance_quota %}Personal quota: {{used}}/{{all}}{% endblocktrans %}
            </div>
            <div class="clear"></div>
        </div>
    </li>
 </ul>
 {% endblock content %}
--- a/one/templates/box/vm/entry.html
+++ b/one/templates/box/vm/entry.html
 {% extends "box/base/entry.html" %}
 {% load i18n %}
 {% get_current_language as LANGUAGE_CODE %}
 {% block content %}
 <li class="entry {% if id == vm.id %}opened{% endif %}">
    {{block.super }}
 </li>
 {% endblock content %}
 {% block summary %}
    {% include "box/vm/summary.html" %}
 {% endblock summary %}
 {% block details %}
 <ul>
    <li class="name">
        {% trans "Hostname" %}:
        <span class="value">{{vm.name}}</span>
        <div class="clear"></div>
    </li>
    <li class="os-{{vm.template.os_type}}">
        {% trans "System" %}:
        <span class="value">{{vm.template.system}}</span>
        <div class="clear"></div>
    </li>
    <li class="template">
        {% trans "Type" %}:
        <span class="value">{{vm.share.type}}</span>
        <div class="clear"></div>
    </li>
    <li class="template">
        {% trans "Share" %}:
        <span class="value">{{vm.share.name}}</span>
        <div class="clear"></div>
    </li>
    <li class="template">
        {% trans "Template" %}:
        <span class="value">{{vm.template.name}}</span>
        <div class="clear"></div>
    </li>
    <li class="type">
        {% trans "Size" %}:
        <span class="value">
            {{vm.template.instance_type.name}}:
            <span class="cpu">{{vm.template.instance_type.CPU}}</span>
            <span class="memory">{{vm.template.instance_type.RAM}}</span>
            <span class="credit">{{vm.template.instance_type.credit}}</span>
        </span>
    </li>
    <li class="date">
        {% trans "Created at" %}:
        <span class="value">{{vm.created_at}}</span>
    </li>
    {% if vm.time_of_suspend %}
    <li class="date">
        {% trans "time of suspend"|capfirst %}:
        <span class="value"> <abbr title="{{vm.time_of_suspend}}">{{vm.time_of_suspend|timeuntil}}</abbr>
            <a href="#"  class="renew-vm renew-suspend-vm" data-id="{{ vm.id }}" title="{% trans "Renew suspend time" %}">
                <img src="/static/icons/control-double.png" alt="{% trans "Renew suspend time" %}" />
            </a>
        </span>
    </li>
    {% endif %}
        {% if vm.time_of_delete %}
    <li class="date">
        {% trans "time of delete"|capfirst %}:
        <span class="value"> <abbr title="{{vm.time_of_delete}}">{{vm.time_of_delete|timeuntil}}</abbr>
            <a href="#"  class="renew-vm renew-delete-vm" data-id="{{ vm.id }}" title="{% trans "Renew deletion time" %}">
                <img src="/static/icons/control-double.png" alt="{% trans "Renew deletion time" %}" />
            </a>
        </span>
    </li>
    {% endif %}
    <li>
        &nbsp;
        <span class="value">
            <a href="/vm/show/{{vm.id}}/" title="{{vm.name}}">{% trans "More details" %}</a>
        </span>
    </li>
 </ul>
 {% endblock details %}
--- a/one/templates/box/vm/summary.html
+++ b/one/templates/box/vm/summary.html
 {% extends "box/base/summary.html" %}
 {% load i18n %}
 {% get_current_language as LANGUAGE_CODE %}
 {% block content %}
 <div class="summary {% if id == vm.id %}selected-summary{% endif %} {% if vm.template.state == "NEW" %}unfinished{% endif %}">
    {{ block.super }}
 </div>
 {% endblock content %}
 {% block name %}
 <div class="name {% if vm.state == 'ACTIVE' %}vm-on{% else %}vm-off{% endif %}">
    <span id="vm-{{vm.id}}-name">{{vm.name|truncatechars:20}}</span>
    <small id="vm-{{vm.id}}-name-details" class="details">
        (<a href="/vm/show/{{vm.id}}/" title="{{vm.name}}">{% trans "More details" %}</a>)
    </small>
 </div>
 {% endblock %}
 {% block status %}
    {{vm.state}}
 {% endblock status %}
 {% block actions %}
        <a href="#" class="rename-vm" data-name="{{ vm.name }}" data-id="{{ vm.id }}" title="{% trans "Edit name" %}">
            <img src="/static/icons/pencil.png" alt="{% trans "Edit name" %}" />
        </a>
    {% if vm.waiting %}
        <a href="#">
            <img src="/static/image/load.gif" />
        </a>
    {% elif vm.state == 'ACTIVE' %}
        <a href="{{vm.get_connect_uri}}" data-id="{{ vm.id  }}" class="connect-vm" title="{% trans "Connect" %}">
            <img src="/static/icons/plug.png" alt="{% trans "Connect" %}" />
        </a>
        <a href="#" class="stop-vm" data-name="{{ vm.name }}" data-id="{{ vm.id }}" title="{% trans "Pause" %}">
            <img src="/static/icons/control-pause.png" alt="{% trans "Pause" %}" />
        </a>
        <a href="#" class="delete-vm" data-name="{{ vm.name }}" data-id="{{ vm.id }}" title="{% trans "Delete" %}">
            <img src="/static/icons/minus-circle.png" alt="{% trans "Delete" %}" />
        </a>
        <a href="#"  class="restart-vm" data-name="{{ vm.name }}" data-id="{{ vm.id }}" title="{% trans "Restart" %}">
            <img src="/static/icons/arrow-circle-double.png" alt="↺" />
        </a>
    {% elif vm.state == 'PENDING' %}
        <a href="#">
            <img src="/static/image/load.gif" />
        </a>
        <a style="float: right" href="#" class="delete-vm" data-name="{{ vm.name }}" data-id="{{ vm.id }}" title="{% trans "Delete" %}">
            <img src="/static/icons/minus-circle.png" alt="{% trans "Delete" %}" />
        </a>
    {% elif vm.state == 'STOPPED' %}
        <a href="#" class="resume-vm" data-name="{{ vm.name }}" data-id="{{ vm.id }}" title="{% trans "Resume" %}">
            <img src="/static/icons/control.png" alt="{% trans "Resume" %}" />
        </a>
        <a href="#" class="delete-vm" data-name="{{ vm.name }}" data-id="{{ vm.id }}" title="{% trans "Delete" %}">
            <img src="/static/icons/minus-circle.png" alt="{% trans "Delete" %}" />
        </a>
    {% elif vm.state == 'FAILED' %}
        <a href="#" class="delete-vm" data-name="{{ vm.name }}" data-id="{{ vm.id }}" title="{% trans "Delete" %}">
            <img src="/static/icons/minus-circle.png" alt="{% trans "Delete" %}" />
        </a>
    {% endif %}
 {% endblock actions %}
--- a/school/templates/box/group/box.html
+++ b/school/templates/box/group/box.html
 {% extends "box/base/box.html" %}
 {% load i18n %}
 {% load l10n %}
 {% get_current_language as LANGUAGE_CODE %}
 {% block title %}
    {% trans "My Groups" %}
 {% endblock title %}
 {% block content %}
 <ul class="vm-list entry-list" id="groups">
    {% if groups %}
    {% for group in groups %}
        {% include "box/group/entry.html" %}
    {% endfor %}
    {% else %}
    <div class="tooltip">
        <div class="container">
            <p>{% trans "You have no groups." %}</p>
            <p>
                {% trans "Create a new one, and add your students to the new group." %}
            </p>
            <div class="tail"></div>
        </div>
    </div>
    {% endif %}
    <li id="show-hidden-groups" class="entry small-row">
        <div class="summary">
            <div class="name">{% trans "Show hidden groups" %}</div>
            <div class="clear"></div>
        </div>
    </li>
    <li class="entry small-row" id="new-group">
        <div class="summary">
            <div class="name">{% trans "Create new group" %}</div>
            <div class="clear"></div>
        </div>
        <div id="new-group-wizard" style="display: none">
            <form action="/group/new/" method="POST" class="wizard">
                {% csrf_token %}
                <h3>{% trans "Create new group" %}</h3>
                <ul>
                    <li>
                        <label for="new-group-name">{% trans "Group name" %}</label>
                        <input type="text" name="name" id="new-group-name" />
                    </li>
                    <li>
                        <label for="new-group-semester">{% trans "Semester" %}</label>
                        <select name="semester" id="new-group-semester">
                            {% for semester in semesters %}
                            <option value="{{semester.id}}">{{semester.name}}</option>
                            {% endfor %}
                        </select>
                    </li>
                    <li>
                        <label for="new-group-members">{% trans "Members" %}</label>
                        <textarea name="members" placeholder="{% trans 'Student NEPTUN codes, one per line' %}" id="new-group-members"></textarea>
                        <div class="clear"></div>
                    </li>
                </ul>
                <nav>
                    <input type="reset" class="prev" value="{% trans "Cancel" %}" />
                    <input type="submit" class="next" value="{% trans "Done" %}" />
                    <div class="clear"></div>
                </nav>
            </form>
        </div>
    </li>
 </ul>
 {% endblock content %}
--- a/school/templates/box/group/entry.html
+++ b/school/templates/box/group/entry.html
 {% extends "box/base/entry.html" %}
 {% load i18n %}
 {% get_current_language as LANGUAGE_CODE %}
 {% block content %}
 <li class="entry" id="group-{{group.id}}">
    {{ block.super }}
 </li>
 {% endblock content %}
 {% block summary %}
 <div class="summary">
    <div class="name">
        {{ group.name }}
        <small class="details">(<a href="/group/show/{{group.id}}">{% trans "More details" %}</a>)</small>
    </div>
    <div class="actions">
        <a href="#" class="delete" data-id="{{group.id}}" data-name="{{group.name}}">
            <img src="/static/icons/minus-circle.png" alt="{% trans "Delete" %}" title="{% trans "Delete" %}" />
        </a>
        <a href="#" class="hide-group" data-id="{{group.id}}">
            <img src="/static/icons/eye-half.png" alt="{% trans "Hide" %}" title="{% trans "Hide" %}" />
        </a>
    </div>
    <div class="clear"></div>
 </div>
 {% endblock summary %}
 {% block details %}
 <ul>
    <li>
        {% trans "Course" %}:
        <span class="value">
            {% if group.course %}
            {{group.course.name}}
            {% else %}
            {% trans "Not assigned" %}
            {% endif %}
        </span>
    </li>
    <li>
        {% trans "Semester" %}:
        <span class="value">{{group.semester.name}}</span>
    </li>
    <li>
        {% trans "Owner(s)" %}:
        <span class="value">{{group.owner_list}}</span>
    </li>
    <li>
        {% trans "Member count" %}:
        <span class="value">{{group.member_count}}</span>
    </li>
    <li>
        &nbsp;
        <span class="value">
            <a href="/group/show/{{group.id}}">{% trans "More details" %}</a>
        </span>
    </li>
 </ul>
 {% endblock details %}
--- a/school/templates/box/person/box.html
+++ b/school/templates/box/person/box.html
 {% extends "box/base/box.html" %}
 {% load i18n %}
 {% load l10n %}
 {% get_current_language as LANGUAGE_CODE %}
 {% block title %}
    {% trans "Members of" %}: {{group.name}}
 {% endblock title %}
 {% block content %}
 <ul class="entry-list" id="group-members">
    {% for member in members %}
        {% include "box/person/entry.html" %}
    {% endfor %}
    <li class="entry small-row">
        <div class="summary" id="new-member">
            <div class="name">{% trans "Add user" %}</div>
            <div id="new-member-form">
                <input type="text" placeholder="{% trans "User NEPTUN code" %}" />
                <input type="submit" value="{% trans "Add user" %}" data-id="{{group.id}}"/>
            </div>
            <div class="clear"></div>
        </div>
    </li>
 </ul>
 {% endblock content %}
--- a/school/templates/box/person/entry.html
+++ b/school/templates/box/person/entry.html
 {% extends "box/base/entry.html" %}
 {% load i18n %}
 {% get_current_language as LANGUAGE_CODE %}
 {% block content %}
 <li class="entry small-row" id="member-{{member.code}}">
    {{block.super}}
 </li>
 {% endblock content %}
 {% block summary %}
 <div class="summary">
    <div class="name">
        {% if not member.user %}
        {{member.code}}
        {% else %}
        {{member}} ({{member.code}})
        {% endif %}
    </div>
    <div class="actions">
        <a href="#" class="remove" data-gid="{{group.id}}" data-neptun="{{member.code}}">
            <img src="/static/icons/minus-circle.png" alt="{% trans 'Remove' %}" />
        </a>
    </div>
    <div class="clear"></div>
 </div>
 {% endblock summary %}
 {% block details %}
 {% if not member.user %}
    {% trans "This user never logged in, no data available" %}
    {% else %}
    <ul>
        <li>
            {% trans "Name" %}<span class="value">{{member}}</span>
        </li>
        <li>
            {% trans "NEPTUN" %}<span class="value">{{member.code}}</span>
        </li>
        <li>
            E-mail:<span class="value"><a href="mailto:{{member.user.email}}">{{member.user.email}}</a></span>
        </li>
    </ul>
    {% endif %}
 {% endblock details %}
--- a/school/templates/show-group.html
+++ b/school/templates/show-group.html
 {% extends "base.html" %}
 {% load i18n %}
 {% get_current_language as LANGUAGE_CODE %}
 {% block content %}
 <div class="boxes">
    {% include "box/person/box.html" %}
    <div class="contentblock" id="group-owners">
        <h2>{% trans "Owners of" %}: {{group.name}}</h2>
        <ul class="entry-list">
            {% for owner in owners %}
            <li class="entry small-row">
                <div class="summary">
                    <div class="name">
                        {% if not owner.user %}
                        {{owner.code}}
                        {% else %}
                        {{owner}} ({{owner.code}})
                        {% endif %}
                    </div>
                    <!--<div class="actions">
                        <a href="#" class="remove" data-gid="{{group.id}}" data-neptun="{{owner.code}}">
                            <img src="/static/icons/minus-circle.png" alt="{% trans 'Remove' %}" />
                        </a>
                    </div>-->
                    <div class="clear"></div>
                </div>
                <div class="details">
                    <div class="container">
                        {% if not owner.user %}
                        {% trans "This user never logged in, no data available" %}
                        {% else %}
                        <ul>
                            <li>
                                {% trans "Name" %}<span class="value">{{owner}}</span>
                            </li>
                            <li>
                                {% trans "NEPTUN" %}<span class="value">{{owner.code}}</span>
                            </li>
                            <li>
                                E-mail:<span class="value"><a href="mailto:{{owner.user.email}}">{{owner.user.email}}</a></span>
                            </li>
                        </ul>
                        {% endif %}
                    </div>
                </div>
            </li>
            {% endfor %}
            <li class="entry small-row">
                <div class="summary" id="new-owner" data-gid="{{group.id}}">
                    <div class="name">{% trans "Add owner" %}</div>
                    <div class="clear"></div>
                </div>
                <div class="details" id="new-owner-form">
                    <div class="container">
                        <input type="text" placeholder="{% trans "Owner name/NEPTUN" %}" />
                        <div id="new-owner-autocomplete"></div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
 </div>
 <div class="boxes">
    {% if noshare %}
        <div class="tooltip" style="position:absolute">
            <div class="container">
                <p>
                    {% trans "This group has no shared templates." %}
                </p>
                <p>
                    {% trans "Share one, and the group members can start their own virtual machine." %}
                </p>
                <div class="tail"></div>
            </div>
        </div>
    {% endif %}
    {% include "box/template/box.html" %}
 </div>
 {% endblock %}