(function() {
    'use strict';

    var data = d3.range(0, 11); // [0, 1, 2, 3, 4 etc]
    console.log('number of items in array: ' + data.length);
    
    // variables for convenience
    var ulID = 'ul-items',
        liPrefix = 'li-';

    // use a variable to keep count
    var i = 0; 

    // create a list and populate with the data array
    function addList() {
        var indexValue = function(d, i) { return liPrefix + i; };

        var ul = d3.select('#container').append('ul').attr('id', ulID);

        ul
            .selectAll('li')
            .data(data)
            .enter()
            .append('li')
                .attr('id', indexValue)
                .text(indexValue);
    }

    // controls to navigate back and forward
    function controlsNav(index) {

        var nextBtn = d3.select('#legendNext');
        var prevBtn = d3.select('#legendPrev');
        
        nextBtn.on('click', function() {
            // ensure buttons can't be clicked where there are no items
            if (i < data.length-1) {
                // ensure buttons are 'visually' active
                nextBtn.style('opacity', 1);
                prevBtn.style('opacity', 1);
                // update value of counter  
                i++;
                // set index to the value of i
                index = i;
                console.log('value of i NEXT: ' + i);
                // move forward one
                moveList(liPrefix + index);
            } else { 
                // fade button out for user feedback
                nextBtn.style('opacity', 0.2);
            }
        });

        prevBtn.on('click', function() {
            if (i >= 1) {
                prevBtn.style('opacity', 1);
                nextBtn.style('opacity', 1);
                i--;
                index = i;
                console.log('value of i PREV: ' + i);
                // move back one
                moveList(liPrefix + index);
            } else { 
                prevBtn.style('opacity', 0.2);
            }
        });

    }

    // offset items in list via their id // http://stackoverflow.com/a/24361041/1711570
    function moveList(reference) {

        var list = document.getElementById(ulID),
            targetLi = document.getElementById(reference); // id tag of the <li> element

        list.scrollLeft = (targetLi.offsetLeft -28);

        console.log('offset value: ' + targetLi.offsetLeft);
    }

    // call the function(s)
    addList();
    controlsNav(i); 

})();