<link rel="stylesheet" href="styles/default/css/installation.css" />
<script type="text/javascript" src="../includes/js/ajax.js"></script>
<script type="text/javascript" language="javascript">

    var percent = 0;
    var pos = -1;

    function showStatus() {
        pos++;
        makeHttpRequest(
                "index.php?module=installation&event=sqlexec&mode=[% $mode %]&pos=" + pos,
                "updateProgressbar", false);
    }

    function updateProgressbar(xmldoc) {

        percent = xmldoc;
        var bar = document.getElementById("progress");
        var val = document.getElementById("progressvalue");
        var width = 0;

        if (percent != 999) {
            val.innerHTML = percent + "%";
            width = Math.ceil(percent * 1.68);
            bar.style.width = width + "px";

            if (percent < 100) {
                showStatus();
            } else {
                document.getElementById("finalize").style.visibility = "visible";
            }

        } else {
            val.innerHTML = "0%";
            bar.style.background = " url(images/progressbar3.gif) no-repeat center left";
            bar.style.width = "168px";
        }
    }
</script>
<style type="text/css">
    div#progressbar {
        background: url(images/progressbar.gif) no-repeat center left;
        height : 20px;
        width  : 170px;
    }

    div#progress {
        background: url(images/progressbar2.gif) no-repeat center left;
        height : 20px;
        width  : 0px;
    }

    #finalize {
        visibility : hidden;
    }
</style>

<form action="index.php?module=installation&event=finalize" method="post" name="setup_db">


    <table id="maintable">
        <tr>
            <td valign="top" class="mainleft">
                <ul>
                    <li><a href="index.php?module=installation">pre-installation check</a></li>
                    <li><a href="index.php?module=installation&event=db">Step 1</a></li>
                    <li><a href="index.php?module=installation&event=dbselect">Step 2</a></li>
                    <li><a href="index.php?module=installation&event=dbselect&task=store2">Step 3</a></li>
                    <li class="active">Step 4</li>
                    <li>Step 5</li>
                </ul>
            </td>
            <td valign="top" class="mainright">

                <table class="settings">
                    <tr>
                        <td colspan="2">
                            <div style="float:right;">
                                <a href="#" onclick="document.setup_db.submit();
                                        return false;" class="button" id="finalize">next &gt;</a><br />
                            </div>
                            <h1>Step 4</h1>
                        </td>
                    </tr>
                    <tr>
                        <th colspan="2">Creating database structure:</th>
                    </tr>
                    <tr><td colspan="2" class="spacer"></td></tr>
                    <tr>
                        <td valign="top"></td>
                        <td valign="top" class="boxed">

                            <table border="0">
                                <tr>
                                    <td><div id="progressbar"><div id="progress"></div></div></td>
                                    <td>&nbsp;</td>
                                    <td width="75" id="progressvalue">0 %</td>
                                </tr>
                            </table>

                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">&nbsp;
                            <br /><br /><br /><br /><br /><br />
                        </td>
                    </tr>
                </table>

            </td>
        </tr>
    </table>

</form>
<script>
    showStatus();
</script>