window.onload = function() { setupScroll(); };
var currentIndex = 0;
var numChildren = 0;

function setupScroll() {

    var children = document.getElementById('scrollItemWrapper').childNodes;

    for (var j = 0; j< children.length; j++) {
        var thisDIV = document.getElementById("ctl00_ContentPlaceHolder1_repStories_ctl0" + j.toString() + "_scrollItem" + j.toString());
        if (thisDIV != null) {
            numChildren = numChildren + 1;
        }
    }

    setItemVisibility();
    setArrowVisibility();
}

function clickRight() {
    currentIndex = currentIndex + 1;
    if ((numChildren - currentIndex) >= 2) {
        var thisWrapper = document.getElementById("scrollItemWrapper");
        var thisLeft = parseInt(thisWrapper.style.left);
        var newLeft = thisLeft - 219;
        thisWrapper.style.left = newLeft.toString() +'px';
        setItemVisibility();
    }

    setArrowVisibility();    
}

function clickLeft() {
    currentIndex = currentIndex - 1;
    if (currentIndex >= 0) {
        var thisWrapper = document.getElementById("scrollItemWrapper");
        var thisLeft = parseInt(thisWrapper.style.left);
        var newLeft = thisLeft + 219;
        thisWrapper.style.left = newLeft.toString() + 'px';
        setItemVisibility();
    }

    setArrowVisibility();
}

function setItemVisibility(){
    for (var i = 0; i < numChildren; i++) {
        var thisDIV = document.getElementById("ctl00_ContentPlaceHolder1_repStories_ctl0" + i.toString() + "_scrollItem" + i.toString());
        if (thisDIV != null) {
            if (i < currentIndex || i > (currentIndex + 2))
                thisDIV.style.display = 'none';
            else {
                thisDIV.style.display = 'block';
            }
        }
    }
}

function setArrowVisibility() {

    var rightArrow = document.getElementById("scrollRightArrow");
    if ((numChildren - currentIndex) <= 3)
        rightArrow.style.display = 'none';
    else
        rightArrow.style.display = 'block';

    var leftArrow = document.getElementById("scrollLeftArrow");
    if (currentIndex == 0)
        leftArrow.style.display = 'none';
    else
        leftArrow.style.display = 'block';
}