<!DOCTYPE html>

<!--
Copyright © 2020 DWER.KR. All Rights Reserved.

Customized by DWER.KR (marked @TODO at html source file)
Contact : master@dwer.kr


   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.
-->

<!--
Copyright 2014-2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License").

You may not use this file except in compliance with the License. A copy
of the License is located at

https://aws.amazon.com/apache2.0/

or in the "license" file accompanying this file. This file is distributed
on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
either express or implied. See the License for the specific language governing
permissions and limitations under the License.
-->

<html lang="en">

<head>
    <title>DWER Share</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" integrity="sha384-PmY9l28YgO4JwMKbTvgaS7XNZJ30MK9FAZjjzXtlqyZCqBY6X6bXIkM++IkyinN+" crossorigin="anonymous">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap-theme.min.css" integrity="sha384-jzngWsPS6op3fgRCDTESqrEJwRKck+CILhJVO5VvaAZCq8JYf8HsR/HPpBOOPZfR" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css">
    <style type="text/css">
        #wrapper {
            padding-left: 0;
        }

        #page-wrapper {
            width: 100%;
            padding: 5px 15px;
        }

        #tb-s3objects {
            width: 100% !Important;
        }

        a {
            color: #00B7FF;
        }

        body {
            font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
        }

        td {
            font: 12px "Lucida Grande", Helvetica, Arial, sans-serif;
        }

        .title {
            padding: 6px 12px;
        }

        .breadcrumb {
            margin-bottom: 0;
        }

        #navbuttons .btn {
            padding: 3px 6px;
        }
        
/* @TODO */
a{
    text-decoration : none;
}
a:hover{
    font-weight : bold;
    text-decoration : none;
    color : #6195FF;
}
.panel{
    border-top-width : 0px;
}
.panel-primary>.panel-heading{
    background-image : none;
    background-color : #6195FF;

}

th {
    font-weight : normal;
}
th:hover {
    font-weight : bold;
}

h1 > a:hover {
    color : #6195FF;
}
h1 > img{
    width : 42px;
    height : 42px;
    margin-right : 15px;
}
/* @TODO */
    </style>

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-160169989-3"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-160169989-3');
</script>
</head>

<!-- DEBUG: Enable this for red outline on all elements -->
<!-- <style media="screen" type="text/css"> * { outline: 1px red solid; } </style> -->

<body>
<!-- @TODO -->
    <div id="page-wrapper">
        <div class="row">
        <div class="col-md-12">
            <h1><img src="https://cdn.dwicd.com/favicon.ico" /><a href="/main.html" style="font-weight : bold;">DWER Share</a></h1>
        </div>
        </div>
    </div>
<!-- @TODO -->

    <div id="page-wrapper">
        <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-primary">

                    <!-- Panel including title, breadcrumbs, and controls -->
                    <div class="panel-heading clearfix">
                        <!-- Title and breadcrumbs -->
                        <div class="btn-group pull-left">
                            <!-- App title -->
                            <div class="title pull-left">
                                <!--AWS S3 Explorer&nbsp;-->
                            </div>
                            <!-- Bucket breadcrumbs -->
                            <div class="pull-right">
                                <ul id="breadcrumb" class="breadcrumb pull-right">
                                    <li class="active">
                                        <a href="#">&lt;bucket&gt;</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <!-- Controls -->
                        <div id="navbuttons" class="pull-right">
                            <div>
                                <!-- Hide folders checkbox -->
                                <div class="btn-group">
                                    <label class="btn">
                                        <input type="checkbox" id="hidefolders">&nbsp;Hide folders?
                                    </label>
                                </div>
                                <!-- Folder/Bucket radio group -->
                                <div class="btn-group" data-toggle="buttons">
                                    <label class="btn btn-primary active" title="View all objects in folder">
                                        <i class="fa fa-angle-double-up"></i>
                                        <input type="radio" name="optionsdepth" value="folder" id="optionfolder" checked>&nbsp;Folder
                                    </label>
                                    <label class="btn btn-primary" title="View all objects in bucket">
                                        <i class="fa fa-angle-double-down"></i>
                                        <input type="radio" name="optionsdepth" value="bucket" id="optionbucket">&nbsp;Bucket
                                    </label>
                                </div>
                                <!-- Bucket selection -->
<!--
@TODO
                                <div class="btn-group" id="bucket">
                                    <i id="bucket-chooser" style="cursor: pointer;" class="btn fa fa-cog fa-2x" title="Switch to a different S3 Bucket"></i>
                                </div>
-->
                                <!-- Dual purpose: progress spinner and refresh button, plus object count -->
                                <div class="btn-group" id="refresh">
                                    <span id="bucket-loader" style="cursor: pointer;" class="btn fa fa-refresh fa-2x pull-left" title="Refresh"></span>
                                    <span id="badgecount" class="badge pull-right" title="Object count">42</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Panel including S3 object table -->
                    <div class="panel-body">
                        <table class="table table-bordered table-hover table-striped" id="tb-s3objects">
                            <thead>
                                <tr>
                                    <th>Object</th>
                                    <th>Folder</th>
                                    <th>Last Modified</th>
                                    <th>Timestamp</th>
                                    <th>Size</th>
                                </tr>
                            </thead>
                            <tbody id="tbody-s3objects"></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

<!-- @TODO -->
    <div id="page-wrapper">
        <div class="row">
        <div class="col-md-12">
            <div style="font-size : 12pt;">
               <a href="https://www.dwer.kr">WEB</a> | <a href="mailto:master@dwer.kr">E-MAIL</a> | <a href="/NOTICE.txt">LICENSE</a> <br>
            </div>
        </div>
        </div>
    </div>
<!-- @TODO -->

</body>

</html>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js" integrity="sha384-vhJnz1OVIdLktyixHY4Uk3OHEwdQqPppqYR8+5mjsauETgLOcEynD9oPHhhz18Nw" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.207.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.0/moment.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"></script>

<script type="text/javascript">
    var HIDE_INDEX = true;
    var s3exp_config = {
        Region: '',
        Bucket: '',
        Prefix: '',
        Delimiter: '/'
    };
    var s3exp_lister = null;
    var s3exp_columns = {
        key: 1,
        folder: 2,
        date: 3,
        size: 4
    };

    AWS.config.region = 'us-east-1';
//    console.log('Region: ' + AWS.config.region);

    // Initialize S3 SDK and the moment library (for time formatting utilities)
    var s3 = new AWS.S3();
    moment().format();

    function bytesToSize(bytes) {
        var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
        if (bytes === 0) return '0 Bytes';
        var ii = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
        return Math.round(bytes / Math.pow(1024, ii), 2) + ' ' + sizes[ii];
    }

    // Custom startsWith function for String prototype
    if (typeof String.prototype.startsWith != 'function') {
        String.prototype.startsWith = function(str) {
            return this.indexOf(str) == 0;
        };
    }

    // Custom endsWith function for String prototype
    if (typeof String.prototype.endsWith != 'function') {
        String.prototype.endsWith = function(str) {
            return this.slice(-str.length) == str;
        };
    }

    function object2hrefvirt(bucket, key) {
        var enckey = key.split('/').map(function(x) { return encodeURIComponent(x); }).join('/');

// @TODO
        return document.location.protocol + '//share.dwer.kr/' + enckey;
    }

/*
        if (AWS.config.region === "us-east-1") {
            return document.location.protocol + '//' + bucket + '.s3.amazonaws.com/' + enckey;
        } else {
            return document.location.protocol + '//' + bucket + '.s3-' + AWS.config.region + '.amazonaws.com/' + enckey;
        }
*/
/*
    function object2hrefpath(bucket, key) {
        var enckey = key.split('/').map(function(x) { return encodeURIComponent(x); }).join('/');

        if (AWS.config.region === "us-east-1") {
            return document.location.protocol + "//s3.amazonaws.com/" + bucket + "/" + enckey;
        } else {
            return document.location.protocol + "//s3-' + AWS.config.region + '.amazonaws.com/" + bucket + "/" + enckey;
        }

    }
*/

    function htmlEscape(str) {
        return str
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#39;')
            .replace(/\//g, '&#x2F;')
            .replace(/`/g, '&#x60;')
            .replace(/=/g, '&#x3D;');
    }

    function isthisdocument(bucket, key) {
        return key === "main.html";
    }

    function isfolder(path) {
        return path.endsWith('/');
    }

    // Convert cars/vw/golf.png to golf.png
    function fullpath2filename(path) {
        return htmlEscape(path.replace(/^.*[\\\/]/, ''));
    }

    // Convert cars/vw/golf.png to cars/vw
    function fullpath2pathname(path) {
        return htmlEscape(path.substring(0, path.lastIndexOf('/')));
    }

    // Convert cars/vw/ to vw/
    function prefix2folder(prefix) {
        var parts = prefix.split('/');
        return htmlEscape(parts[parts.length - 2] + '/');
    }

    // Remove hash from document URL
    function removeHash() {
        history.pushState("", document.title, window.location.pathname + window.location.search);
    }

    // We are going to generate bucket/folder breadcrumbs. The resulting HTML will
    // look something like this:
    //
    // <li>Home</li>
    // <li>Library</li>
    // <li class="active">Samples</li>
    //
    // Note: this code is a little complex right now so it would be good to find
    // a simpler way to create the breadcrumbs.
    function folder2breadcrumbs(data) {
//        console.log('Bucket: ' + data.params.Bucket);
//        console.log('Prefix: ' + data.params.Prefix);

        if (data.params.Prefix && data.params.Prefix.length > 0) {
//            console.log('Set hash: ' + data.params.Prefix);
            window.location.hash = data.params.Prefix;
        } else {
//            console.log('Remove hash');
            removeHash();
        }

        // The parts array will contain the bucket name followed by all the
        // segments of the prefix, exploded out as separate strings.
        var parts = [data.params.Bucket];

        if (data.params.Prefix) {
            parts.push.apply(parts,
                data.params.Prefix.endsWith('/') ?
                data.params.Prefix.slice(0, -1).split('/') :
                data.params.Prefix.split('/'));
        }

//        console.log('Parts: ' + parts + ' (length=' + parts.length + ')');

        // Empty the current breadcrumb list
        $('#breadcrumb li').remove();

        // Now build the new breadcrumb list
        var buildprefix = '';
        $.each(parts, function(ii, part) {
            var ipart;

            // Add the bucket (the bucket is always first)
            if (ii === 0) {
                var a1 = $('<a>').attr('href', '#').text(part);
                ipart = $('<li>').append(a1);
                a1.click(function(e) {
                    e.preventDefault();
//                    console.log('Breadcrumb click bucket: ' + data.params.Bucket);
                    s3exp_config = {
                        Bucket: data.params.Bucket,
                        Prefix: '',
                        Delimiter: data.params.Delimiter
                    };
                    (s3exp_lister = s3list(s3exp_config, s3draw)).go();
                });
                // Else add the folders within the bucket
            } else {
                buildprefix += part + '/';

                if (ii == parts.length - 1) {
                    ipart = $('<li>').addClass('active').text(part);
                } else {
                    var a2 = $('<a>').attr('href', '#').append(part);
                    ipart = $('<li>').append(a2);

                    // Closure needed to enclose the saved S3 prefix
                    (function() {
                        var saveprefix = buildprefix;
                        // console.log('Part: ' + part + ' has buildprefix: ' + saveprefix);
                        a2.click(function(e) {
                            e.preventDefault();
//                            console.log('Breadcrumb click object prefix: ' + saveprefix);
                            s3exp_config = {
                                Bucket: data.params.Bucket,
                                Prefix: saveprefix,
                                Delimiter: data.params.Delimiter
                            };
                            (s3exp_lister = s3list(s3exp_config, s3draw)).go();
                        });
                    })();
                }
            }
            $('#breadcrumb').append(ipart);
        });
    }

    function s3draw(data, complete) {
        $('li.li-bucket').remove();
        folder2breadcrumbs(data);

        // Add each part of current path (S3 bucket plus folder hierarchy) into the breadcrumbs
        $.each(data.CommonPrefixes, function(i, prefix) {
            $('#tb-s3objects').DataTable().rows.add([{
                Key: prefix.Prefix
            }]);
        });

        // Add S3 objects to DataTable
        $('#tb-s3objects').DataTable().rows.add(data.Contents).draw();
    }

    function s3list(config, completecb) {
//        console.log('s3list config: ' + JSON.stringify(config));
        var params = {
            Bucket: config.Bucket,
            Prefix: config.Prefix,
            Delimiter: config.Delimiter
        };
        var scope = {
            Contents: [],
            CommonPrefixes: [],
            params: params,
            stop: false,
            completecb: completecb
        };

        return {
            // This is the callback that the S3 API makes when an S3 listObjectsV2
            // request completes (successfully or in error). Note that a single call
            // to listObjectsV2 may not be enough to get all objects so we need to
            // check if the returned data is truncated and, if so, make additional
            // requests with a 'next marker' until we have all the objects.
            cb: function(err, data) {
                if (err) {
//                    console.log('Error: ' + JSON.stringify(err));
//                    console.log('Error: ' + err.stack);
                    scope.stop = true;
                    $('#bucket-loader').removeClass('fa-spin');
                    bootbox.alert("Error accessing S3 bucket " + scope.params.Bucket + ". Error: " + err);
                } else {
                    // console.log('Data: ' + JSON.stringify(data));
//                    console.log("Options: " + $("input[name='optionsdepth']:checked").val());

                    // Store marker before filtering data
                    if (data.IsTruncated) {
                        if (data.NextContinuationToken) {
                            scope.params.ContinuationToken = data.NextContinuationToken;
                        }
                    }

                    // Filter the folders out of the listed S3 objects
                    // (could probably be done more efficiently)
//                    console.log("Filter: remove folders");
                    data.Contents = data.Contents.filter(function(el) {
                        return el.Key !== scope.params.Prefix;
                    });

                    // Optionally, filter the root main.html out of the listed S3 objects
                    if (HIDE_INDEX) {
//                        console.log("Filter: remove main.html");
                        data.Contents = data.Contents.filter(function(el) {
                            return el.Key !== "main.html";
                        });
                    }

                    // Accumulate the S3 objects and common prefixes
                    scope.Contents.push.apply(scope.Contents, data.Contents);
                    scope.CommonPrefixes.push.apply(scope.CommonPrefixes, data.CommonPrefixes);

                    // Update badge count to show number of objects read
                    $('#badgecount').text(scope.Contents.length + scope.CommonPrefixes.length);

                    if (scope.stop) {
//                        console.log('Bucket ' + scope.params.Bucket + ' stopped');
                    } else if (data.IsTruncated) {
//                        console.log('Bucket ' + scope.params.Bucket + ' truncated');
                        s3.makeUnauthenticatedRequest('listObjectsV2', scope.params, scope.cb);
                    } else {
//                        console.log('Bucket ' + scope.params.Bucket + ' has ' + scope.Contents.length + ' objects, including ' + scope.CommonPrefixes.length + ' prefixes');
                        delete scope.params.ContinuationToken;
                        if (scope.completecb) {
                            scope.completecb(scope, true);
                        }
                        $('#bucket-loader').removeClass('fa-spin');
                    }
                }
            },

            // Start the spinner, clear the table, make an S3 listObjectsV2 request
            go: function() {
                scope.cb = this.cb;
                $('#bucket-loader').addClass('fa-spin');
                $('#tb-s3objects').DataTable().clear();
                s3.makeUnauthenticatedRequest('listObjectsV2', scope.params, this.cb);
            },

            stop: function() {
                scope.stop = true;
                delete scope.params.ContinuationToken;
                if (scope.completecb) {
                    scope.completecb(scope, false);
                }
                $('#bucket-loader').removeClass('fa-spin');
            }
        };
    }

    function promptForBucketInput() {
        bootbox.prompt("Please enter the S3 bucket name", function(result) {
            if (result !== null) {
                resetDepth();
                s3exp_config = {
                    Bucket: result,
                    Delimiter: '/'
                };
                (s3exp_lister = s3list(s3exp_config, s3draw)).go();
            }
        });
    }

    function resetDepth() {
        $('#tb-s3objects').DataTable().column(1).visible(false);
        $('input[name="optionsdepth"]').val(['folder']);
        $('input[name="optionsdepth"][value="bucket"]').parent().removeClass('active');
        $('input[name="optionsdepth"][value="folder"]').parent().addClass('active');
    }

    $(document).ready(function() {
//        console.log('ready');

        // Click handler for refresh button (to invoke manual refresh)
        $('#bucket-loader').click(function(e) {
            if ($('#bucket-loader').hasClass('fa-spin')) {
                // To do: We need to stop the S3 list that's going on
                // bootbox.alert("Stop is not yet supported.");
                s3exp_lister.stop();
            } else {
                delete s3exp_config.ContinuationToken;
                (s3exp_lister = s3list(s3exp_config, s3draw)).go();
            }
        });

        // Click handler for bucket button (to allow user to change bucket)
        $('#bucket-chooser').click(function(e) {
            promptForBucketInput();
        });

        $('#hidefolders').click(function(e) {
            $('#tb-s3objects').DataTable().draw();
        });

        // Folder/Bucket radio button handler
        $("input:radio[name='optionsdepth']").change(function() {
//            console.log("Folder/Bucket option change to " + $(this).val());
//            console.log("Change options: " + $("input[name='optionsdepth']:checked").val());

            // If user selected deep then we do need to do a full list
            if ($(this).val() == 'bucket') {
//                console.log("Switch to bucket");
                var choice = $(this).val();
                $('#tb-s3objects').DataTable().column(1).visible(choice === 'bucket');
                delete s3exp_config.ContinuationToken;
                delete s3exp_config.Prefix;
                s3exp_config.Delimiter = '';
                (s3exp_lister = s3list(s3exp_config, s3draw)).go();
                // Else user selected folder then can do a delimiter list
            } else {
//                console.log("Switch to folder");
                $('#tb-s3objects').DataTable().column(1).visible(false);
                delete s3exp_config.ContinuationToken;
                delete s3exp_config.Prefix;
                s3exp_config.Delimiter = '/';
                (s3exp_lister = s3list(s3exp_config, s3draw)).go();
            }
        });

        function renderObject(data, type, full) {
            if (isthisdocument(s3exp_config.Bucket, data)) {
//                console.log("is this document: " + data);
                return fullpath2filename(data);
            } else if (isfolder(data)) {
//                console.log("is folder: " + data);
                return '<a data-s3="folder" data-prefix="' + htmlEscape(data) + '" href="' + object2hrefvirt(s3exp_config.Bucket, data) + '">' + prefix2folder(data) + '</a>';
            } else {
//                console.log("not folder/this document: " + data);
                return '<a data-s3="object" href="' + object2hrefvirt(s3exp_config.Bucket, data) + '"download="' + fullpath2filename(data) + '">' + fullpath2filename(data) + '</a>';
            }
        }

        function renderFolder(data, type, full) {
            return isfolder(data) ? "" : fullpath2pathname(data);
        }

        // Initial DataTable settings
        $('#tb-s3objects').DataTable({
            iDisplayLength: 50,
            order: [
                [1, 'asc'],
                [0, 'asc']
            ],
            aoColumnDefs: [{
                "aTargets": [0],
                "mData": "Key",
                "mRender": function(data, type, full) {
                    return (type == 'display') ? renderObject(data, type, full) : data;
                },
                "sType": "key"
            }, {
                "aTargets": [1],
                "mData": "Key",
                "mRender": function(data, type, full) {
                    return renderFolder(data, type, full);
                }
            }, {
                "aTargets": [2],
                "mData": "LastModified",
                "mRender": function(data, type, full) {
                    return data ? moment(data).fromNow() : "";
                }
            }, {
                "aTargets": [3],
                "mData": "LastModified",
                "mRender": function(data, type, full) {
                    return data ? moment(data).local().format('YYYY-MM-DD HH:mm:ss') : "";
                }
            }, {
                "aTargets": [4],
                "mData": function(source, type, val) {
                    return source.Size ? ((type == 'display') ? bytesToSize(source.Size) : source.Size) : "";
                }
            }, ]
        });

        $('#tb-s3objects').DataTable().column(s3exp_columns.key).visible(false);
//        console.log("jQuery version=" + $.fn.jquery);

        // Custom sort for the Key column so that folders appear before objects
        $.fn.dataTableExt.oSort['key-asc'] = function(a, b) {
            var x = (isfolder(a) ? "0-" + a : "1-" + a).toLowerCase();
            var y = (isfolder(b) ? "0-" + b : "1-" + b).toLowerCase();
            return ((x < y) ? -1 : ((x > y) ? 1 : 0));
        };

        $.fn.dataTableExt.oSort['key-desc'] = function(a, b) {
            var x = (isfolder(a) ? "1-" + a : "0-" + a).toLowerCase();
            var y = (isfolder(b) ? "1-" + b : "0-" + b).toLowerCase();
            return ((x < y) ? 1 : ((x > y) ? -1 : 0));
        };

        // Allow user to hide folders
        $.fn.dataTableExt.afnFiltering.push(function(oSettings, aData, iDataIndex) {
//            console.log("hide folders");
            return $('#hidefolders').is(':checked') ? !isfolder(aData[0]) : true;
        });

        // Delegated event handler for S3 object/folder clicks. This is delegated
        // because the object/folder rows are added dynamically and we do not want
        // to have to assign click handlers to each and every row.
        $('#tb-s3objects').on('click', 'a', function(event) {
            event.preventDefault();
            var target = event.target;
//            console.log("target href=" + target.href);
//            console.log("target dataset=" + JSON.stringify(target.dataset));

            // If the user has clicked on a folder then navigate into that folder
            if (target.dataset.s3 === "folder") {
                resetDepth();
                delete s3exp_config.ContinuationToken;
                s3exp_config.Prefix = target.dataset.prefix;
                s3exp_config.Delimiter = $("input[name='optionsdepth']:checked").val() == "folder" ? "/" : "";
                (s3exp_lister = s3list(s3exp_config, s3draw)).go();
                // Else user has clicked on an object so download it in new window/tab
            } else {
                window.open(target.href, '_blank');
            }
            return false;
        });

        // Document URL typically looks like this for path-style URLs:
        // - https://s3.amazonaws.com/mybucket1/main.html
        // - https://s3-us-west-2.amazonaws.com/mybucket2/main.html
        //
        // Document URL typically looks like this for virtual-hosted-style URLs:
        // - https://mybucket1.s3.amazonaws.com/main.html
        // - https://mybucket2.s3-us-west-2.amazonaws.com/main.html
        //
        // Document URL typically looks like this for S3 website hosting:
        // - http://mybucket3.s3-website-us-east-1.amazonaws.com/
        // - http://mybucket4.s3-website.eu-central-1.amazonaws.com/

        // TODO: need to support S3 website hosting option
        //
        // If we're launched from a bucket then let's try to determine the bucket
        // name so we can query it immediately, without requiring the user to
        // supply the bucket name.
        //
        // If the region was anything other than US Standard then we will also need
        // to infer the region so that we can initialize the S3 SDK properly.

//        console.log("Document URL: " + document.URL);
        var urls = document.URL.split('/');
//        console.log("URL split: " + urls);

        // Using technique from https://gist.github.com/jlong/2428561
        // to parse the document URL.
        var parser = document.createElement('a');
        parser.href = document.URL;

        // URL format is scheme://[user:password@]domain:port/path?query_string#fragment_id
        // For example: http://example.com:3000/path/?name=abc#topic
//        console.log("protocol: " + parser.protocol); // => "http:"
//        console.log("hostname: " + parser.hostname); // => "example.com"
//        console.log("port    : " + parser.port); // => "3000"
//        console.log("pathname: " + parser.pathname); // => "/path/"
//        console.log("search  : " + parser.search); // => "?name=abc"
//        console.log("hash    : " + parser.hash); // => "#topic"
//        console.log("host    : " + parser.host); // => "example.com:3000"

/* @TODO */
/*
        // If initial bucket has been hard-coded above then use it, else try to
        // derive the initial bucket from the document URL (useful if main.html was
        // launched directly from within a bucket), else prompt the user.
        if (s3exp_config.Bucket) {
            (s3exp_lister = s3list(s3exp_config, s3draw)).go();
        } else if (parser.hostname.endsWith('amazonaws.com')) {
            // Hostname is likely to be in one of the following forms:
            // - s3.amazonaws.com
            // - bucket1.s3.amazonaws.com
            // - s3-us-west-2.amazonaws.com
            // - bucket2.s3-us-west-2.amazonaws.com

            // If using static website hosting, the hostname will be of the form:
            // - bucket.s3-website.eu-central-1.amazonaws.com/

            // The following is also a legal form, but we do not support it, so
            // you should use s3-eu-central-1 rather than s3.eu-central-1:
            // - bucket3.s3.eu-central-1.amazonaws.com

            var bucket;
            var region;
            var hostnames = parser.hostname.split('.');
            var pathnames = parser.pathname.split('/');

            console.log("count of words in hostname=" + hostnames.length);
            console.log("count of words in pathname=" + pathnames.length);

            console.log("hostnames=" + hostnames);
            console.log("pathnames=" + pathnames);


            // If bucket prefix not included in hostname
            if (hostnames[0].match(/^s3-/) || hostnames[0].match(/^s3$/)) {
                bucket = pathnames[1];
                region = hostnames[0];
                console.log("path bucket=" + bucket);
                console.log("path region=" + region);
            } else {
                bucket = hostnames[0];
                region = hostnames[hostnames.length - 3];
                console.log("host bucket=" + bucket);
                console.log("host region=" + region);
            }

            // If we found statically-hosted website prefix or explicit region, for
            // example s3-us-west-2, then get region else use the default of US Standard
            if (region !== 's3') {
                if (region.startsWith('s3-website-')) {
                    AWS.config.region = region.substring(11);
                } else if (region.startsWith('s3-') || region.startsWith('s3.')) {
                    AWS.config.region = region.substring(3);
                } else {
                    AWS.config.region = region;
                }
            }
*/
/* @TODO */
// @TODO
            var bucket = 'dwer.web.share';
            var region = 'us-east-1';
            AWS.config.region = region;

//            console.log("AWS region=" + AWS.config.region);
//            console.log("S3 bucket=" + bucket);

            // Create and initialize S3 object
            s3 = new AWS.S3();
            s3exp_config = {
                Bucket: bucket,
                Delimiter: '/'
            };

            if (window.location.hash) {
//                console.log("Location hash=" + window.location.hash);
                s3exp_config.Prefix = window.location.hash.substring(1);
            }

            // Do initial bucket list
            (s3exp_lister = s3list(s3exp_config, s3draw)).go();
/*
        } else {
            promptForBucketInput();
        }
*/
    });
</script>