/* ---------------- This is code for scrolling table. use the public methods in your code ------------------ */

var showColumns = 4;

/* ---------------- Private Methods ------------------ */


function scrollTOLeft(tableName) {
    var tbl = document.getElementById(tableName);
    var currentShowIndex = 0;
    for (var i = 0; i < tbl.rows[0].cells.length; i++) {
        var cell = tbl.rows[0].cells[i];
        if (cell.style.display != 'none') {
            currentShowIndex = i;
            break;
        }
    }
    var newShowIndex = currentShowIndex - showColumns;
    if (newShowIndex < 0) { newShowIndex = 0; }
    //Hiding the current columns that are being displayed and displaying the new columns.
    if (currentShowIndex != newShowIndex) {
        for (var i = 0; i < showColumns; i++) {
            if (i + currentShowIndex < tbl.rows[0].cells.length)
            { tbl.rows[0].cells[i + currentShowIndex].style.display = 'none'; }
            tbl.rows[0].cells[i + newShowIndex].style.display = '';
        }
    }
    SetArrowImages(tableName, newShowIndex, tbl.rows[0].cells.length);

}

function scrollRight(tableName) {
    var tbl = document.getElementById(tableName);
    var currentShowIndex = 0;
    for (var i = 0; i < tbl.rows[0].cells.length; i++) {
        var cell = tbl.rows[0].cells[i];
        if (cell.style.display != 'none') {
            currentShowIndex = i;
            break;
        }
    }
    var newShowIndex = currentShowIndex + showColumns;
    if (newShowIndex >= tbl.rows[0].cells.length - showColumns) { newShowIndex = tbl.rows[0].cells.length - showColumns; }
    //Hiding the current columns that are being displayed and displaying the new columns.
    if (currentShowIndex != newShowIndex) {
        for (var i = 0; i < showColumns; i++) {
            tbl.rows[0].cells[i + currentShowIndex].style.display = 'none';
            tbl.rows[0].cells[i + newShowIndex].style.display = '';
        }
    }
    SetArrowImages(tableName, newShowIndex, tbl.rows[0].cells.length);
}


function SetArrowImages(tableName, startIndex, totalCol) {
    if (totalCol < showColumns) {
        document.getElementById(tableName + '-leftArrow').style.display = 'none';
        document.getElementById(tableName + '-rightArrow').style.display = 'none';
        return;

    }
    if (startIndex == 0) {
        document.getElementById(tableName + '-leftArrow').style.display = 'none';
    }
    else {
        document.getElementById(tableName + '-leftArrow').style.display = '';

    }
    if (startIndex == totalCol - showColumns - 1) {
        document.getElementById(tableName + '-rightArrow').style.display = 'none';
    }
    else {
        document.getElementById(tableName + '-rightArrow').style.display = '';
    }

}

/* ---------------- Public Methods ------------------ */

function createVideoTable(divId, tableName) {
    var html = ['<table class="TableBorder"><tr><td width="32px" valign="middle"><img onclick="scrollTOLeft(\'', tableName, '\')" style="display: none;" id="', tableName, '-leftArrow" src="http://eveda.tech.officelive.com/Images/left.png" alt="Left Arrow"/></td><td><table id="', tableName, '" width="100%"><tr></tr></table></td><td valign="middle"><img id="', tableName, '-rightArrow" onclick="scrollRight(\'', tableName, '\');" src="http://eveda.tech.officelive.com/Images/Right.png" alt="Right Arrow"/></td> </tr></table>'];
    document.getElementById(divId).innerHTML = html.join('');
}

function addColumn(tableName, text, display) {
    var div = document.createElement('div'); // create DIV element   
    var tbl = document.getElementById(tableName);

    var cell = tbl.rows[0].insertCell(tbl.rows[0].cells.length);
    var cellwidth = 100 / showColumns;
    cell.setAttribute("width", cellwidth + "%");
    cell.setAttribute("valign", "top");
    //  cell.setAttribute('class', classname);        // set DIV class attribute   
    if (display == 'hide')
        cell.style.display = 'none';
    div.innerHTML = text;
    cell.appendChild(div);                   // append DIV to the table cell   

}

/* ---------------- End Scrolling table ------------------ */