/// <summary>
/// Loads the section media box
/// </summary>
function SectionMediaBox_load(hideMediaLink, showItemNumber, pageSize, mediaBoxId) {
    SectionMediaBox_databind(0, pageSize, 1, hideMediaLink, showItemNumber, mediaBoxId);
}

/// <summary>
/// Insert data into the section media box
/// </summary>
/// <param name="startIndex">Start index</param>
/// <param name="numberOfRows">Number of rows to insert</param>
function SectionMediaBox_databind(startIndex, numberOfRows, pageNumber, hideMediaLink, showItemNumber, mediaBoxId) {
    var sectionMediaData = eval("sectionMediaData_" + mediaBoxId);
    if (sectionMediaData) {
        var totalRows = sectionMediaData.length;
        if (totalRows > 0) {
            var playlistTable = $$("#" + mediaBoxId + " .playlist-table");
            if (playlistTable.length == 0)
                return;
                
            var playlistTableBody = playlistTable[0].getElementsByTagName('tbody')[0];

            RemoveAllTableRows(playlistTable[0]);
            // Style the paging links
            StylePagingLinks(pageNumber, mediaBoxId);

            // Adjust the start index if bigger than total number of rows in array
            if (startIndex >= totalRows)
                startIndex = totalRows - 1;

            // Set the end index
            var endIndex = startIndex + numberOfRows;

            if (endIndex > totalRows)
                endIndex = totalRows;

            for (var i = startIndex; i < endIndex; i++) {
                var newTR = document.createElement("tr");
                
                var newTD1 = document.createElement("td");
                newTD1.innerHTML = "<div class=\"playButton\" onclick=\"" + sectionMediaData[i].Path + "\" />";
                newTR.appendChild(newTD1);

                var newTD2 = document.createElement("td");

                if (showItemNumber)
                    newTD2.innerHTML = "<div class=\"itemnumber\">#" + (totalRows-i) + "</div>";
                

                newTD2.innerHTML += "<a href=\"#\" style=\"color:#000000;\" onclick=\"" + sectionMediaData[i].Path + "\">" + sectionMediaData[i].Title + "</a>";
                
                newTR.appendChild(newTD2);

                if (!hideMediaLink) {
                    var newTD3 = document.createElement("td");
                    newTD3.innerHTML = "<a href=\"#\" onclick=\"" + sectionMediaData[i].Path + "\">" + sectionMediaData[i].MediaLinkText + "</a>";
                    newTR.appendChild(newTD3);
                }
                
                playlistTableBody.appendChild(newTR);
            }
        }
    }
}

/// <summary>
/// Delete all table rows from a table
/// </summary>
/// <param name="table">The table</param>
function RemoveAllTableRows(table) {
    for (var i = table.rows.length - 1; i > -1; i--) {
        table.deleteRow(i);
    }
}

/// <summary>
/// Set style on the selected page link
/// </summary>
/// <param name="table">The clicked element</param>
function StylePagingLinks(pageNumber, mediaBoxId) {
    var linkList = $$("#" + mediaBoxId + " .section-media-paging-ul");

    if (linkList != null) {
        for (var list = 0; list < linkList.length; list++) {
            var cLI = linkList[list].getElementsByTagName("li");
            pageNumber = String(pageNumber);

            // Compare page number and list item value
            for (var i = 0; i < cLI.length; i++) {
                if (cLI[i].value == pageNumber)
                    cLI[i].className = "selected";
                else
                    cLI[i].className = "";
            }
        }
    }
}