define function(require){

// extend backbone view controller
return ViewController.extend({

var numEventCardsShowingInFeed = 0;
var cardsDisplayedList = [];

  onReady: function () {

        this.listenTo(this.collection, 'add', this.render);
        this._hideElements();
        this._startEventFeed();
    },

    _hideElements: function() {
        $('.observation-card').hide();
    },

    _offsetDisplayedCards: function(passedCardsDisplayList){
        //-----OUTPUT: here the list is not defined------
        console.log("passedCardsDisplayList: "+passedCardsDisplayList);
        // before showing another card,
        // offset down every card already shown
        // for (var i = 0; i < numEventCardsShowingInFeed; i++){
        for (cardDisplayedId in passedCardsDisplayList){
            console.log("thiscarddisplayedid: "+cardDisplayedId);
            var cardHeight = 100;
            if (cardDisplayedId != null){
                var topOffset = $(cardDisplayedId).offset().top;

                console.log("cards showing in feed: "+numEventCardsShowingInFeed);
                // $(cardDisplayedId).offset({top:cardHeight*numEventCardsShowingInFeed*-1});
                console.log("displayedCard's top offset is: "+topOffset);
                $(cardDisplayedId).offset({top: topOffset + cardHeight *-1});
            }
        }
    },

    //add new card
    _addNewCard: function(i, thisCardId, offsetCardsCallback){
        var feedCardSchedule = [1000,2000,3000,4000];

        setTimeout(function(){

        // if (typeof(offsetCardsCallback) === "function"){
        //     console.log("callback");
        //     offsetCardsCallback();
        // }

        // show the new card
        $(thisCardId).show();

        // add this card to the cardsDisplayedList.
        cardsDisplayedList.push(thisCardId);

        //-----OUTPUT: here the list is defined-----
        console.log("cardsDisplayedList: "+cardsDisplayedList);

        // increment event cards showed counter
        numEventCardsShowingInFeed++;

        // call offsetCardsCallback
        if (typeof(offsetCardsCallback) === "function"){
            console.log("callback");
            var passedCardsDisplayList = cardsDisplayedList.slice();
            offsetCardsCallback(passedCardsDisplayList);
        }

        }, feedCardSchedule[i]);

    },

    _startEventFeed: function() {

        // var cardsDisplayedList = [];
        var eventCardFeedQueue = ["#observation-card1", "#observation-card2", "#observation-card3"];

        var numEventCards = eventCardFeedQueue.length;
        console.log("num of event cards in queue: "+numEventCards);

        // while there are still feed item / event cards unshown,
        // progressively show them as per the hardcoded schedule.
        // will eventually depend on JSON data.
        // TODO: replace hardcoded schedule with JSON.

        // while(eventFeedCardQueue.length > 0){

        // loop through card queue
        for (var i = 0; i < numEventCards; i++) {

            // console.log("#"+eventCardFeedQueue[i]);
            var thisCardId = eventCardFeedQueue[i];
            console.log(thisCardId);
            var offsetCardsCallback = this._offsetDisplayedCards();
            console.log(typeof offsetCardsCallback);
            this._addNewCard(i, thisCardId, offsetCardsCallback);
            if($(thisCardId).is(":visible")){
                console.log(thisCardId + " is visible");
            }
        } // end card loop
    }, // end feed function,
  });
});

num of event cards in queue: 3
#observation-card1
passedCardsDisplayList: undefined
undefined
#observation-card2
passedCardsDisplayList: undefined
undefined
#observation-card3
passedCardsDisplayList: undefined
undefined
cardsDisplayedList: #observation-card1
cardsDisplayedList: #observation-card1,#observation-card2
cardsDisplayedList: #observation-card1,#observation-card2,#observation-card3