var trainTimes = [];
var time = [];
var outBoundTrain = [];
var inBoundTrain = [];
var completed;
var inBoundClean = [];
var outBoundClean = [];

//- JSON collection area -//
function callAjax(strUrl) {
    var url = strUrl;
    $.ajax({
        url: url,
        async: false,
        data: "Trains",
        dataType: "json",
        success: function(data) {
            parseJSONData(data);
        },
        complete: function() { showStatus(); }
    });
}
function parseJSONData(data) {
    $.each(data.Trains, function(i, item) {
        //- outBound
        if (data.Trains[i].Group == "2") {
            //- Oubound
            if (data.Trains[i].Min != "")
            { outBoundTrain[i] = data.Trains[i].Min; }
        }
    });
}
function showStatus() {
    BuildResult();
    completed = true;
}

//- Build Here -//
function BuildResult() {
    cleanParams(outBoundTrain, 'outBound');
    $('#dcMetroNeighborhood').find('#wmata').remove();

    var wmata   = $.create('div', { 'id': 'wmata' });
    var stName = $.create('b', { 'id': 'station' }, ['Metro Rail']);
    var orgRail1 = $.create('img', { 'src':'../MetroRail/1x1.gif', 'class': 'orgRail1', 'border':'0' });
    var orgRail2 = $.create('img', { 'src': '../MetroRail/1x1.gif', 'class': 'orgRail2', 'border': '0' });
    var rail    = $.create('div', { 'id': 'rail' });
    var outBound = $.create('div', { 'id': 'outBound' });
    var imgLogo = $.create('img', { 'src': 'MetroRail/metro.png', 'class': 'logo', 'border': '0' });
    var title   = $.create('b', {'class':'stationName'}, ['Arriving Vienna/Fairfax']);
    var imgTime = $.create('img', { 'src': 'MetroRail/icn.time.png', 'border': '0', 'class': 'time' });

    var smallO  = $.create('small', {}, ['Next Train']);
    var ulOUT   = $.create('ul', {}, []);

    //- next train after above next train -// 
    var liOUT2 = $.create('li', {}, [' dynamic ']);
    var spanOUT = $.create('span', { 'id': 'min' }, ['min']);

    var status;
    if (outBoundClean[0] == "ARR") {
        status = "Arriving";
    } else if (outBoundClean[0] == "BRD") {
        status = "Boarding";
    } else {
        status = outBoundClean[0] + ' min';
    }
    var fTrain = $.create('span', {'class':'TrainOne'}, ['' + status + '']);
    
    $('#dcMetroNeighborhood').append($(wmata));
    $('#wmata').append($(rail));
    //$('#dcMetroNeighborhood').find('#rail').append($(imgLogo));
    $('#dcMetroNeighborhood').find('#rail').append($(stName));
    $('#dcMetroNeighborhood').find('#rail').append($(orgRail1));
    
    $('#dcMetroNeighborhood').find('#rail').append($(title));
    //$('#dcMetroNeighborhood').find('#rail').append($(imgTime));
    $('#dcMetroNeighborhood').find('#rail').append($(fTrain));
    $('#dcMetroNeighborhood').find('#rail').append($(orgRail2));
    $('#dcMetroNeighborhood').find('#rail').append($(smallO));
    $('#dcMetroNeighborhood').find('#rail').append($(outBound));

    TrainBound(outBoundClean, 'outBound');
}

function RemoveElementsFromArray(array, filter) {
    var newArray = [];
    for (var i = 0; i < array.length; i++) {
        if (filter(array[i]) == false) {
            newArray.push(array[i]);
        }
    }
    return newArray;
}

function isNullOrUndefined(item) {
    return (item == null || typeof (item) == "undefined");
}

function cleanParams(params, type) {
    // loop through train times times
    for (i = 0; i < params.length; i++) {
        if (params.length > 0) {
            time[i] = params[i];
        }
    }
    if (type == 'inBound') {
        //inBoundClean = 	RemoveElementsFromArray(time, isNullOrUndefined);
    } else if (type == 'outBound') {
        outBoundClean = RemoveElementsFromArray(time, isNullOrUndefined);
    }
}

function TrainBound(params, div) {
    var ul = document.createElement('ul');
    li = [];
    span = [];

    // create two ul tags and add in each time	
    for (i = 1; i < params.length; i++) {
        if (i < 3) {
            li[i] = document.createElement('li');
            span[i] = document.createElement('span');
            span[i].innerHTML = 'min';
            li[i].innerHTML = params[i];
            li[i].appendChild(span[i]);
            ul.appendChild(li[i]);
        }
    }

    $('#dcMetroNeighborhood').find('#' + div + '').append(ul);
}