var quoteWidth = 135; //width of a quote div
var numQuoteDivs = 6; //how many quotes per ticker
var tickerWidth = quoteWidth*numQuoteDivs;
var server = ""
var qFlag = 0;

window.onload = initTicker;

function initTicker(){
    $.ajax({
        dataType: "json",
        url: server+'/ticker/recent60/',
        error: function(xhr, error){
            //alert(error);
        },
        success: function(quotes) {
        $('#loader').remove();
        numQuotes = quotes.length;

        //Fill up the quotes array with duplicates if there isn't enough
        //to fill two ticker bars worth.
        for(i=0; quotes.length < numQuoteDivs*2; i=(i+1)%numQuotes){
            quotes[quotes.length] = quotes[i]; 
        }

        //Populate the two ticker bars with quote divs
        i=0;        
        for(i; i < numQuoteDivs; i++){
            $('#ticker').append('<div class="quoteBox"><span class="quote">'+quotes[i][0]+'<span class="price"> : '+quotes[i][1]+'</span></span></div>');
        }
        for(i; i < numQuoteDivs*2; i++){
            $('#ticker2').append('<div class="quoteBox"><span class="quote">'+quotes[i][0]+'<span class="price"> : '+quotes[i][1]+'</span></span></div>');
        }

        //Put the rest of the quotes on the quote stack
        for(i; i < quotes.length; i++){
            newQuotes.push(quotes[i]);
        }

        containers = [];
        containers[0] = document.getElementById('ticker');
        containers[1] = document.getElementById('ticker2');
        //Move tickers to starting positions.
        containers[0].style.left = 0+"px";
        containers[1].style.left = tickerWidth+"px";
    
        //Move the quote divs to their starting positions within tickers.
        offset = 0;
        for (x = 0; x < numQuoteDivs; x++){
            containers[0].childNodes[x].style.left = offset+'px';
            containers[1].childNodes[x].style.left = offset+'px';
            offset += quoteWidth;
        }

        //Start the loop.
        tickerLoop(containers, 0);        
    }
    });
}

var replaceNodeIndex = 0;
var replaceAtWidth = -quoteWidth;
var newQuotes = [];

function tickerLoop(containers, first) {
    firstContainer = containers[first];
    secondContainer = containers[1-first];
    curLeft = parseInt(firstContainer.style.left);
    if (curLeft <= replaceAtWidth){
        if(newQuotes.length > 0){
            replacerNode = newQuotes.pop()
            firstContainer.childNodes[replaceNodeIndex].innerHTML ='<span class="quote">'+replacerNode[0]+'<span class="price"> : '+replacerNode[1]+'</span></span>';
        }
        else{
            getNewQuotes();
        }
    replaceNodeIndex = (replaceNodeIndex+1)%(numQuoteDivs);
    replaceAtWidth -= quoteWidth;
    }
    if (curLeft <= -quoteWidth*(numQuoteDivs)){
        firstContainer.style.left = tickerWidth+'px';
        secondContainer.style.left = 0+'px';
        replaceAtWidth = -quoteWidth;
        replaceNodeIndex = 0;
        first = 1-first;
    }
    else{
        firstContainer.style.left = curLeft-1+"px";
        secondContainer.style.left = parseInt(secondContainer.style.left)-1+"px";
    }

    setTimeout(function(){tickerLoop(containers, first);},25); // call doMove in 20msec
}


function getNewQuotes(){
    if(qFlag == 0){
        qFlag = 1;
        $.getJSON(server+'/ticker/recent60/', function(quotes){
            newQuotes = quotes;
            qFlag = 0;
        });
    }
}