<%@ Page Title="Overall Progress" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxUploader" Namespace="AjaxUploader.Controls" TagPrefix="au" %>

<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Overall Progress - AjaxUploader v5.0 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Overall Progress</asp:Content>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">

<div class="demo-card">
    <div class="demo-card-header">Aggregate Overall Progress</div>
    <div class="demo-card-body">
        <p class="demo-description">
            Show a single progress bar representing aggregate progress across all
            files in the queue. Useful for batch uploads with many files.
        </p>

        <style>
            #overallWrap {
                margin-top: 1rem; display: none;
            }
            #overallBar {
                width: 100%; height: 20px;
                background: #e5e7eb; border-radius: 0.5rem; overflow: hidden;
            }
            #overallFill {
                height: 100%; width: 0%;
                background: linear-gradient(90deg, #6366f1, #8b5cf6);
                border-radius: 0.5rem; transition: width 0.25s;
            }
            #overallLabel {
                margin-top: 0.35rem; font-size: 0.8rem; color: #6b7280;
            }
        </style>

        <div id="overallUploader"></div>
        <div id="overallWrap">
            <div id="overallBar"><div id="overallFill"></div></div>
            <div id="overallLabel">0 of 0 files (0%)</div>
        </div>

        <div class="code-panel">
            <pre><code>var taskProgress = {};

onTaskProgress: function(task, pct) {
  taskProgress[task.id] = pct;
  var sum = 0, count = 0;
  for (var k in taskProgress) { sum += taskProgress[k]; count++; }
  var avg = count &gt; 0 ? sum / count : 0;
  fill.style.width = avg + '%';
  label.textContent = completed + ' of ' + total + ' (' + Math.round(avg) + '%)';
}</code></pre>
        </div>
    </div>
</div>

</asp:Content>

<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script>
    (function () {
        var wrap = document.getElementById('overallWrap');
        var fill = document.getElementById('overallFill');
        var label = document.getElementById('overallLabel');
        var totalFiles = 0, completedFiles = 0, taskProgress = {};

        AjaxUploader.create(document.getElementById('overallUploader'), {
            uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
            multiple: true,
            autoUpload: true,
            onSelect: function (files) {
                totalFiles += files.length;
                completedFiles = 0;
                taskProgress = {};
                wrap.style.display = 'block';
            },
            onTaskProgress: function (task, pct) {
                taskProgress[task.id] = pct;
                updateOverall();
            },
            onTaskComplete: function (task) {
                taskProgress[task.id] = 100;
                completedFiles++;
                updateOverall();
            }
        });

        function updateOverall() {
            var sum = 0, count = 0;
            for (var k in taskProgress) { sum += taskProgress[k]; count++; }
            var avg = count > 0 ? sum / count : 0;
            fill.style.width = avg + '%';
            label.textContent = completedFiles + ' of ' + totalFiles
                + ' files (' + Math.round(avg) + '%)';
        }
    })();
</script>
</asp:Content>
