<%
    if (!request.getServerName().equals("localhost") &&
        !request.getServerName().equals("b1.test") &&
        !request.getServerName().equals("online.b1.org")) {
        response.sendRedirect("http://online.b1.org/online");
        return;
    }
%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<jsp:useBean id="helper" class="org.b1.online.OnlineHelper"/>
<html>
<head>
<title>Zip online, unzip, unrar, rar, extract online, B1, uncompress files, archive</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Description"
      content="Zip, unzip, rar files online. Extract files from archive online, no installation, safe and free. Unzip, unrar decompression in cloud. Uncompress, unzipping tool">
<meta name="Keywords"
      content="zip online, unzip online, extract files, uncompress, rar, unrar online, archive, tool, decompression, unarchiver, zip, .zip file, rar, b1, 7z, tool">
<link rel="canonical" href="http://b1.org/online"/>

<jsp:include page="includes/head-include.jsp"/>
<script type="text/javascript" src="js/underscore-min.js"></script>

<link rel="stylesheet" href="colorbox/colorbox.css"/>
<script type="text/javascript" src="colorbox/jquery.colorbox-fixed.js"></script>

<!--[if lte IE 8]>
<style type="text/css">
    .bgRow {
        background: #f1f5f6;
    }

    .downloadList li.bg, .zebra .item.bg {
        background: #f1f5f6;
    }

    .innerContentOnline table tr:hover {
        background: #e0e8eb;
    }

    .itemIconDownload, .itemIconPlay, .itemIconViewImage, .itemIconPlayAudio {
        background: url(/images/online_archive_icons_sprite_IE.gif) no-repeat;
        background-position: center -112px;
    }

    .itemIconPlay {
        margin-right: 5px;
        background-position: center -128px;
    }

    .itemIconViewImage {
        margin-right: 5px;
        background-position: center -144px;
    }

    .itemIconPlayAudio {
        margin-right: 5px;
        background-position: center -160px;
    }
</style>
<![endif]-->
<script type="text/javascript">
_.templateSettings = {
    evaluate: /\[%([\s\S]+?)%\]/g,
    interpolate: /\[%=([\s\S]+?)%\]/g,
    escape: /\[%-([\s\S]+?)%\]/g,
    variable: "context"
};

$(document).ready(function () {
    var ajaxUpload = window.FormData && window.XMLHttpRequest && new XMLHttpRequest()['upload'];
    var videoElement = document.getElementById("video");
    var audioElement = document.getElementById("audio");
    var hiddenIframe = document.getElementById("hiddenIframe");
    var imageTypes = _(['gif', 'jpeg', 'jpg', 'png', 'bmp', 'ico']);
    var imgTypes = _(['gif', 'jpeg', 'jpg', 'png']);
    var textTypes = _(['doc', 'txt', 'rtf', 'docx', 'odt', 'xls', 'xlsx']);
    var debug = document.location.hash == "#debug" && console !== undefined && console.log !== undefined;
    var views = ["#selectView", "#uploadView", "#extractView", "#errorView", "#passwordView", "#listView", "#cleanupView"];
    var digitGroupRegex = /(\d+)(\d{3})/;
    var templates = {};
    var eventCount = {};
    var currentListing;
    var uploadInProgress;
    var bookmarkShortcut;
    var jqueryRequest;
    var xhr;

    function safeEncodeURIComponent(uriComponent) {
        return encodeURIComponent(uriComponent).replace("'", "%27");
    }

    function purge(element) {
        if (element.pause) element.pause();
        element.removeAttribute("src");
        if (element.load) element.load();
    }

    $(document).bind('cbox_purge', function () {
        purge(videoElement);
        purge(audioElement);
    });

    _(views).each(function (view) {
        var script = $(view + " > script[type='text/x-template']");
        templates[view] = _.template(script.html());
        $(view).html("");
    });

    if (window.sidebar && window.sidebar.addPanel) {
        window.addBookmark = function (link) {
            window.sidebar.addPanel(link.title, link.href, "");
        };
    } else if (window.external && typeof window.external.AddFavorite !== 'undefined') {
        window.addBookmark = function (link) {
            window.external.AddFavorite(link.href, link.title);
        };
    } else {
        bookmarkShortcut = navigator.appVersion.indexOf("Mac") != -1 ? "Cmd+" : "Ctrl+";
        bookmarkShortcut += /(konqueror)|(rekonq)/.test(navigator.userAgent.toLowerCase()) ? "B" : "D";
    }

    function trackEvent(label, opt_value, opt_limit) {
        if (opt_limit !== undefined) {
            var key = label + "#" + opt_value;
            var count = eventCount[key] || 0;
            if (count > opt_limit) return;
            eventCount[key] = count + 1;
        }
        var event = ['_trackEvent', 'onlinearch', label];
        if (opt_value !== undefined) event.push(opt_value);
        if (debug) console.log(event);
        window['_gaq'].push(event);
    }

    function showView(view, context) {
        _(views).each(function (view) {
            $(view).hide();
        });
        $(view).html(templates[view](context || {}));
        $(view).show();
    }

    function setType(object, item) {
        if (object.children !== undefined) {
            item.type = "Folder";
            return;
        }
        var mime = object['mime'];
        if (mime && mime.lastIndexOf("audio/", 0) == 0) {
            item.type = "Audio";
            item.audioPreview = audioElement.canPlayType && audioElement.canPlayType(mime);
            return;
        }
        if (mime && mime.lastIndexOf("video/", 0) == 0) {
            item.type = "Video";
            item.videoPreview = videoElement.canPlayType && videoElement.canPlayType(mime);
            return;
        }
        var name = object.name.toLowerCase();
        var dotIndex = name.lastIndexOf('.');
        if (dotIndex >= 0) {
            var ext = name.substring(dotIndex + 1);
            if (imageTypes.contains(ext)) {
                item.type = "Image";
                item.imagePreview = imgTypes.contains(ext);
                return;
            }
            if (textTypes.contains(ext)) {
                item.type = "TextFile";
                return;
            }
            if (ext == 'pdf') {
                item.type = "PDF";
                return;
            }
        }
        item.type = "File";
    }

    function formatSize(size) {
        size += "";
        while (digitGroupRegex.test(size)) {
            size = size.replace(digitGroupRegex, '$1' + ',' + '$2');
        }
        return size;
    }

    function cancelAjax() {
        uploadInProgress = false;
        if (jqueryRequest) {
            jqueryRequest.abort();
            jqueryRequest = undefined;
        }
        if (xhr) {
            xhr.abort();
            xhr = undefined;
        }
        try {
            var contentWindow = hiddenIframe.contentWindow;
            if (contentWindow.stop) {
                contentWindow.stop();
            } else {
                contentWindow.document.execCommand('Stop');
            }
        } catch (e) {
            // ignore errors
        }
        hiddenIframe.src = "javascript:void(0);";
    }

    function submitAjaxForm(form) {
        $(hiddenIframe).replaceWith("<iframe id='hiddenIframe' name='hiddenIframe' width='0' height='0'></iframe>");
        hiddenIframe = document.getElementById("hiddenIframe");
        xhr = new XMLHttpRequest();
        var upload = xhr['upload'];
        upload.onprogress = function (e) {
            if (e['lengthComputable']) {
                var loaded = e['loaded'];
                var total = e['total'];
                if (total - loaded > 65536) {
                    $("#progress").text(Math.round(loaded / total * 90) + "%");
                    return;
                }
            }
            showView('#extractView');
            upload.onprogress = null;
            upload.onload = null;
        };
        upload.onload = function (e) {
            showView('#extractView');
        };
        xhr.onload = function () {
            if (xhr.status == 200) {
                var doc = hiddenIframe.contentWindow.document;
                doc.open();
                doc.write(xhr.responseText);
                doc.close();
            } else {
                window.onIframeLoad();
            }
        };
        xhr.onerror = xhr.onabort = window.onIframeLoad;
        xhr.open('POST', form.action, true);
        xhr.send(new FormData(form));
    }

    window.showSelectView = function () {
        cancelAjax();
        showView('#selectView');
        trackEvent('repeat', 'browse');
    };

    window.onFileDialog = function () {
        cancelAjax();
        trackEvent('start', 'upload');
    };

    window.startUpload = function (fileInput) {
        uploadInProgress = true;
        var files = fileInput.files;
        if (files && files.length) {
            var file = files[0];
            var name = file.name || "";
            var ext = name.substring(name.lastIndexOf(".") + 1);
            if (!/^(b1|zip|jar|xpi|rar|7z|arj|bz2|bzip2|tbz2|tbz|txz|cab|chm|chi|chq|chw|hxs|hxi|hxr|hxq|hxw|lit|cpio|deb|gz|gzip|tgz|tpz|hfs|iso|lzh|lha|lzma|lzma86|rpm|tar|xar|z|taz|xz|dmg|cb7|cbr|cbt|cbz)$/i.test(ext)) {
                showErrorView({
                    message: "Archive type not supported:",
                    fileName: file.name
                });
                trackEvent('error_client', 'extension');
                return;
            }
            <c:if test="${helper.fileSizeMax > 0}">
            if (file.size && file.size > ${helper.fileSizeMax}) {
                showErrorView({
                    message: ${helper.fileToLargeMessageJson}
                });
                trackEvent('error_client', 'size');
                return;
            }
            </c:if>
            trackEvent('filetype', ext);
        }
        if (ajaxUpload) {
            submitAjaxForm(fileInput.form);
            showView('#uploadView');
        } else {
            fileInput.form.submit();
            showView('#extractView');
        }
        trackEvent('progress', 'upload');
    };

    window.onPasswordSent = function (form) {
        uploadInProgress = true;
        showView('#extractView');
    };

    window.uploadComplete = function (result) {
        cancelAjax();
        var passwordPresent = result['passwordPresent'];
        if (!passwordPresent) {
            trackEvent('finished', 'upload');
        }
        uploadInProgress = false;
        currentListing = result['listing'];
        if (currentListing !== undefined) {
            showListView();
            trackEvent('start', 'browse');
        } else if (result['encryptedFileName'] !== undefined) {
            cancelAjax();
            if (passwordPresent) {
                trackEvent('password_wrong', 'upload');
            } else {
                trackEvent('password', 'upload');
            }
            showView('#passwordView', result);
        } else {
            showErrorView(result);
            var suffix = result.message == 'IOException' ? '_io' : result.message == 'SocketTimeoutException' ? '_st' : '';
            trackEvent('error_server' + suffix, result['phase']);
        }
    };

    window.showErrorView = function (context) {
        cancelAjax();
        showView('#errorView', context || {});
    };

    window.onIframeLoad = function () {
        if (uploadInProgress) {
            showErrorView();
            trackEvent('error_client', 'upload');
        }
    };

    window.onVideoMetadataLoad = function (video) {
        $.colorbox.resize({
            innerWidth: video.videoWidth,
            innerHeight: video.videoHeight
        });
    };

    window.showListView = function (path) {
        if (path) {
            trackEvent('progress', 'browse', 50);
        } else {
            path = safeEncodeURIComponent(currentListing.name);
        }
        var names = _(path.split("/")).map(function (name) {
            return decodeURIComponent(name);
        });
        var context = {
            items: [],
            breadcrumbs: []
        };
        var objects = [currentListing];
        _(names).each(function (name) {
            objects = _(objects).find(
                    function (item) {
                        return item.name == name;
                    }).children;
        });
        _(objects).each(function (object) {
            var item = {
                name: object.name,
                path: path + '/' + safeEncodeURIComponent(object.name)
            };
            setType(object, item);
            if (object.children === undefined) {
                item.size = formatSize(object.size);
                item.displaySize = object.displaySize;
            }
            context.items.push(item);
        });
        context.currentBreadcrumbName = names.pop().substring(0, 50);
        path = "";
        _(names).each(function (name) {
            if (path) path += '/';
            path += safeEncodeURIComponent(name);
            context.breadcrumbs.push({
                name: name.substring(0, 50),
                path: path
            });
        });
        showView("#listView", context);
        $(".innerContentOnline table tr").hover(function () {
            $(".rightColumn a", this).stop().animate({"opacity": 1});
        }, function () {
            $(".rightColumn a", this).stop().animate({"opacity": 0.5});
        });
        var colorboxOptions = {
            rel: "gallery",
            current: "",
            title: function () {
                return this.getAttribute("data-title");
            },
            minWidth: 150
        };
        $("a.itemIconViewImage").colorbox(colorboxOptions);
        $("a.itemIconPlay").colorbox($.extend({
            scrolling: false,
            inline: true,
            href: "#video",
            onLoad: function () {
                videoElement.setAttribute("src", this.href);
            }
        }, colorboxOptions));
        $("a.itemIconPlayAudio").colorbox($.extend({
            inline: true,
            href: "#audio",
            onLoad: function () {
                audioElement.setAttribute("src", this.href);
            }
        }, colorboxOptions));
    };

    window.onDownload = function () {
        trackEvent('start', 'download', 50);
    };

    window.onPreview = function (type) {
        trackEvent('start', type, 50);
    };

    window.startDeletion = function () {
        trackEvent('start', 'removefiles');
        cancelAjax();
        showView("#cleanupView", {
            deletionInProgress: true
        });
        jqueryRequest = $['post']("rest/online/cleanup").error(showErrorView).success(function () {
            showView("#cleanupView", {
                deletionComplete: true,
                bookmarkShortcut: bookmarkShortcut
            });
        });
    };

    trackEvent('init');
    showView('#selectView');
});
</script>
</head>
<body class="content_page">
<div style="display: none;">
    <video id="video" controls="controls" onloadedmetadata="onVideoMetadataLoad(this)"></video>
    <audio id="audio" controls="controls" autoplay="autoplay"></audio>
    <iframe id="hiddenIframe" name="hiddenIframe" width="0" height="0"
            onload="if (window.onIframeLoad) onIframeLoad()"></iframe>
</div>
<div class="mainContainer">
<div class="topContainer">
<jsp:include page="includes/header.jsp">
    <jsp:param name="active" value="online"/>
</jsp:include>
<jsp:include page="/includes/google-translate-element.jsp"/>
<div class="centered">
<div class="content">
<jsp:include page="includes/counter.jsp"/>
<div class="innerContent">

<div id="selectView" style="display: none;" class="innerContentOnline">
    <script type="text/x-template">
        <form action="rest/online/upload" method="post" enctype="multipart/form-data" target="hiddenIframe"
              class="innerContentOnlineForm">
            <h1>B1 Online Archiver</h1>

            <h2>The simplest way to get files from <span class="notranslate"
                                                         style="display:inline;">.b1 .zip .rar .7z </span>and other archives</h2>

            <p class="descr">Click &quot;select&quot; to choose archive
                from your computer, wait for a few moments,<br>
                then browse through archived files, and download or preview only files you need.<br>
            </p>

            <div class="innerContentOnlineSteps">
                <ul>
                    <li class="currentStep">
                        <a class="selectArchiveButton" href="#">
                            <input name="file" type="file" class="downloadButtonInput2" onchange="startUpload(this)"
                                   onclick="onFileDialog()">
                            Select archive
                        </a>
                    </li>
                    <li class="innerContentOnlineStepsPointer"></li>
                    <li>Extracting...</li>
                    <li class="innerContentOnlineStepsPointer"></li>
                    <li>Your files</li>
                </ul>
            </div>
            <a class="downloadButton grad" href="#">
                <input name="file" type="file" class="downloadButtonInput" onchange="startUpload(this)"
                       onclick="onFileDialog()">
                Click here
                <strong>to select b1, zip, rar or other archive from your computer</strong>
            </a>
            <div style="clear:both;padding-top:10px;">
                <span style="font-weight:bold;">Supported formats:</span>
                <span class="notranslate">
                    b1, zip, jar, xpi, rar, 7z, arj, bz2, bzip2, tbz2, tbz, txz, cab, chm, chi, chq, chw, hxs, hxi, hxr, hxq, hxw, lit,
                    cpio, deb, gz, gzip, tgz, tpz, hfs, iso, lzh, lha, lzma, rpm, tar, xar, z, taz, xz, dmg, cb7, cbr, cbt, cbz
                </span>
            </div>
            <ul class="featuresList">
                <li>Simple<i>Just a few clicks and it's done</i></li>
                <li>Safe<i>Nobody but you will see your files</i></li>
                <li>No extra software<i>No need to download or install anything</i></li>
                <li>Secure<i>All files will be completely deleted a few minutes after you close this page</i></li>
            </ul>
        </form>
    </script>
</div>

<div id="uploadView" style="display: none;" class="innerContentOnline">
    <script type="text/x-template">
        <h1>B1 Online Archiver</h1>

        <h2>The simplest way to get files from <span class="notranslate"
                                                     style="display:inline;">.b1 .zip .rar .7z </span>and other archives</h2>

        <div class="innerContentOnlineSteps">
            <ul>
                <li>
                    <form action="rest/online/upload" method="post" enctype="multipart/form-data" target="hiddenIframe"
                          class="innerContentOnlineForm">
                        <a class="selectArchiveButtonOtherSteps" href="#">
                            <input name="file" type="file" class="downloadButtonInput2" onchange="startUpload(this)"
                                   onclick="onFileDialog()">
                            Select archive
                        </a>
                    </form>
                </li>
                <li class="innerContentOnlineStepsPointer"></li>
                <li class="currentStep">Extracting...</li>
                <li class="innerContentOnlineStepsPointer"></li>
                <li>Your files</li>
            </ul>
        </div>
        <div class="zebra">
            <div class="item bg">
                <p>Please wait for a few moments... <span id="progress"></span></p>
                <img src="images/paper_small_gif_final.gif" class="extractingLoader"/>
                <!--<img src="images/pb-loader.gif" class="extractingLoaderPB"/>-->
                <ul class="innerContentOnlineStepsLinks">
                    <li class="floatLeft"><a href="#" onclick="showSelectView()">Forget it, let's try another
                        archive</a></li>
                </ul>
            </div>
        </div>
    </script>
</div>

<div id="extractView" style="display: none;" class="innerContentOnline">
    <script type="text/x-template">
        <h1>B1 Online Archiver</h1>

        <h2>The simplest way to get files from <span class="notranslate">.b1 .zip .rar .7z </span>and other archives</h2>

        <div class="innerContentOnlineSteps">
            <ul>
                <li>
                    <form action="rest/online/upload" method="post" enctype="multipart/form-data" target="hiddenIframe"
                          class="innerContentOnlineForm">
                        <a class="selectArchiveButtonOtherSteps" href="#">
                            <input name="file" type="file" class="downloadButtonInput2" onchange="startUpload(this)"
                                   onclick="onFileDialog()">
                            Select archive
                        </a>
                    </form>
                </li>
                <li class="innerContentOnlineStepsPointer"></li>
                <li class="currentStep">Extracting...</li>
                <li class="innerContentOnlineStepsPointer"></li>
                <li>Your files</li>
            </ul>
        </div>
        <div class="zebra">
            <div class="item bg">
                <p>Please wait for a few moments...</p>
                <img src="images/paper_small_gif_final.gif" class="extractingLoader"/>
                <ul class="innerContentOnlineStepsLinks">
                    <li class="floatLeft"><a href="#" onclick="showSelectView()">Forget it, let's try another
                        archive</a></li>
                </ul>
            </div>
        </div>
    </script>
</div>

<div id="errorView" style="display: none;" class="innerContentOnline">
    <script type="text/x-template">
        <h1>B1 Online Archiver</h1>

        <h2>The simplest way to get files from <span class="notranslate">.b1 .zip .rar .7z </span>and other archives</h2>

        <div class="innerContentOnlineSteps">
            <ul>
                <li>
                    <form action="rest/online/upload" method="post" enctype="multipart/form-data" target="hiddenIframe"
                          class="innerContentOnlineForm">
                        <a class="selectArchiveButtonOtherSteps" href="#">
                            <input name="file" type="file" class="downloadButtonInput2" onchange="startUpload(this)"
                                   onclick="onFileDialog()">
                            Select archive
                        </a>
                    </form>
                </li>
                <li class="innerContentOnlineStepsPointer"></li>
                <li class="currentStep">Extracting...</li>
                <li class="innerContentOnlineStepsPointer"></li>
                <li>Your files</li>
            </ul>
        </div>
        <div class="zebra">
            <div class="item bg">
                <p style="margin: 65px 0 10px 0;">There was some error, files cannot be extracted :(</p>
                [% if (context.message) { %]
                <span>[%- context.message %]</span>
                [% } %]
                [% if (context.fileName) { %]
                <br/><span>[%- context.fileName %]</span>
                [% } %]
                <ul class="innerContentOnlineStepsLinks" style="margin-top: 80px;">
                    <li class="floatLeft"><a href="#" onclick="showSelectView()">Forget it, let's try another
                        archive</a></li>
                </ul>
            </div>
        </div>
    </script>
</div>

<div id="passwordView" style="display: none;" class="innerContentOnline">
    <script type="text/x-template">
        <h1>B1 Online Archiver</h1>

        <h2>The simplest way to get files from <span class="notranslate">.b1 .zip .rar .7z </span>and other archives</h2>

        <div class="innerContentOnlineSteps">
            <ul>
                <li>
                    <form action="rest/online/upload" method="post" enctype="multipart/form-data" target="hiddenIframe"
                          class="innerContentOnlineForm">
                        <a class="selectArchiveButtonOtherSteps" href="#">
                            <input name="file2" type="file" class="downloadButtonInput2" onchange="startUpload(this)"
                                   onclick="onFileDialog()">
                            Select archive
                        </a>
                    </form>
                </li>
                <li class="innerContentOnlineStepsPointer"></li>
                <li class="currentStep">Extracting...</li>
                <li class="innerContentOnlineStepsPointer"></li>
                <li>Your files</li>
            </ul>
        </div>
        <div class="zebra">
            <div class="item bg">
                <p style="margin:50px 0 10px 0; line-height: 22px;">This archive is password protected.<br/>
                    You need to know password to open it.
                </p>
                <span>If you don't know the password, please ask archive's author. <a
                        href="http://b1.org/help/Where-can-I-get-the-password-to-the-archive.jsp" target="_blank">Where
                    can I get it?</a></span>
                [% if (context.message) { %]
                <span class="incorrectPassword">[%- context.message %]</span>
                [% } %]
                <br/>

                <form action="rest/online/extract" method="post" target="hiddenIframe"
                      class="innerContentOnlineForm passwordAreaForm" onsubmit="window.onPasswordSent(); return true;">
                    <input type="hidden" name="fileName" value="[%- context.encryptedFileName %]"/>
                    <input type="password" class="passwordArea" name="password" placeholder="Enter password here..."/>
                    <input class="continueButton grad" type="submit" value="Continue"/>
                </form>
                <ul class="innerContentOnlineStepsLinks">
                    <li class="floatLeft"><a href="#" onclick="showSelectView()">Forget it, let's try another
                        archive</a></li>
                </ul>
            </div>
        </div>
    </script>
</div>

<div id="listView" style="display: none;" class="innerContentOnline">
    <script type="text/x-template">
        <h1>B1 Online Archiver</h1>

        <h2>The simplest way to get files from <span class="notranslate">.b1 .zip .rar .7z </span>and other archives</h2>

        <div class="innerContentOnlineSteps">
            <ul>
                <li>
                    <form action="rest/online/upload" method="post" enctype="multipart/form-data" target="hiddenIframe"
                          class="innerContentOnlineForm">
                        <a class="selectArchiveButtonOtherSteps" href="#">
                            <input name="file" type="file" class="downloadButtonInput2" onchange="startUpload(this)"
                                   onclick="onFileDialog()">
                            Select archive
                        </a>
                    </form>
                </li>
                <li class="innerContentOnlineStepsPointer"></li>
                <li>Extracting...</li>
                <li class="innerContentOnlineStepsPointer"></li>
                <li class="currentStep">Your files</li>
            </ul>
        </div>
        <div class="breadcrumbs notranslate">
            <ul>
                [% _(context.breadcrumbs).each(function(breadcrumb) { %]
                <li>
                    <a href="#" onclick="showListView('[%= breadcrumb.path %]')">[%- breadcrumb.name %]</a>
                    <img src="images/online_breadcrumbs_pointer.png" class="breadcrumbsPointer"/>
                </li>
                [% }); %]
                <li>
                    <a href="#" class="currentBreadcrumb">[%- context.currentBreadcrumbName %]</a>
                </li>
            </ul>
        </div>
        <table cellpadding="0" cellspacing="0" class="notranslate">
            [% _(context.items).each(function(item, index) { %]
            <tr class="[% if (index % 2 == 0) {%]bgRow[% } %]">
                <td class="leftColumn">
                    [% if (item.type == 'Folder') { %]
                    <div onclick="showListView('[%= item.path %]')">
                        <span class="itemIcon[%-item.type%]"></span>
                        <a href="#" class="archiveListItemName">[%- item.name %]</a>
                    </div>
                    [% } else { %]
                    <span class="itemIcon[%-item.type%]"></span>
                    <a href="rest/online/download/[%= item.path %]" class="archiveListItemName" target="hiddenIframe"
                       onclick="onDownload()">[%- item.name %]</a>
                    [% } %]
                </td>
                <td class="rightColumn">
                    [% if (item.type != 'Folder') { %]
                    <a class="itemIconDownload" href="rest/online/download/[%= item.path %]" target="hiddenIframe"
                       onclick="onDownload()"></a>
                    [% if (item.imagePreview) { %]
                    <a class="itemIconViewImage" rel="gallery" href="rest/online/preview/[%= item.path %]"
                       target="_blank" title="View Image" data-title="[%- item.name %]"
                       onclick="onPreview('previewimg')"></a>
                    [% } %]
                    [% if (item.videoPreview) { %]
                    <a class="itemIconPlay" rel="gallery" href="rest/online/preview/[%= item.path %]"
                       target="_blank" title="Play" data-title="[%- item.name %]"
                       onclick="onPreview('previewvideo')"></a>
                    [% } %]
                    [% if (item.audioPreview) { %]
                    <a class="itemIconPlayAudio" href="rest/online/preview/[%= item.path %]"
                       target="_blank" title="Play" data-title="[%- item.name %]"
                       onclick="onPreview('previewaudio')"></a>
                    [% } %]
                    [% } %]
                </td>
                <td class="rightColumn">
                    [% if (item.type != 'Folder') { %]
                    <span title="[%- item.size %] bytes">[%- item.displaySize %]</span>
                    [% } %]
                </td>
            </tr>
            [% }); %]
        </table>
        <ul class="innerContentOnlineStepsLinks">
            <li class="floatLeft"><a href="#" onclick="showSelectView()" class="listViewBackLink">Let's try another
                archive</a></li>
            <li class="floatRight deleteFiles">All your files will be automatically deleted<br/>
                in a few minutes after you close this page.<br/>
                To remove them right now please <a href="#" onclick="startDeletion()">click here</a>
            </li>
        </ul>
    </script>
</div>

<div id="cleanupView" style="display: none;" class="innerContentOnline">
    <script type="text/x-template">
        <h1>B1 Online Archiver</h1>

        <h2>The simplest way to get files from <span class="notranslate">.b1 .zip .rar .7z </span>and other archives</h2>

        <div class="innerContentOnlineSteps">
            <ul>
                <li>
                    <form action="rest/online/upload" method="post" enctype="multipart/form-data" target="hiddenIframe"
                          class="innerContentOnlineForm">
                        <a class="selectArchiveButtonOtherSteps" href="#">
                            <input name="file" type="file" class="downloadButtonInput2" onchange="startUpload(this)"
                                   onclick="onFileDialog()">
                            Select archive
                        </a>
                    </form>
                </li>
                <li class="innerContentOnlineStepsPointer"></li>
                <li>Extracting...</li>
                <li class="innerContentOnlineStepsPointer"></li>
                <li class="currentStep">Your files</li>
            </ul>
        </div>
        <div class="zebra">
            <div class="item bg">
                [% if (context.deletionInProgress) { %]
                <span class="removingFilesMessage">Removing the files you uploaded...</span><br/><br/><br/><br/>
                [% } else if (context.deletionComplete) { %]
                <p style="margin: 65px 0 10px 0;">All your files have been permanently deleted.</p>
                [% if (context.bookmarkShortcut) { %]
                <span>It's easy to find us next time if you add bookmark ([%- context.bookmarkShortcut %]). </span>
                [% } else { %]
                <span>It's easy to find us next time if you <a href="#" title="B1 Online Archiver"
                                                               onclick="addBookmark(this)">add bookmark</a>.</span>
                [% } %]
                [% } %]
                <ul class="innerContentOnlineStepsLinks" style="margin-top:98px;">
                    <li class="floatLeft"><a href="#" onclick="showSelectView()">Let's try another archive</a></li>
                    [% if (!context.deletionComplete) { %]
                    <li class="floatRight deleteFiles">All your files will be automatically deleted<br/>
                        in a few minutes after you close this page.<br/>
                        To remove them right now please <a href="#" onclick="startDeletion()">click here</a>
                    </li>
                    [% } %]
                </ul>
            </div>
        </div>
    </script>
</div>
</div>
</div>
</div>
</div>
<jsp:include page="includes/footer.jsp">
    <jsp:param name="active" value="online"/>
</jsp:include>
</div>
</body>
</html>
