'use strict';

var BuoyAnalysisUiDom = {
    /**
     *
     */
    populateMonths: function() {
        var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

        var div;
        var bottom = document.querySelector('.container-bottom');

        for (var i = 0; i < 12; i++) {
            div = document.createElement('div');
            div.className = 'month';
            div.innerHTML = months[i];
            bottom.appendChild(div);
        }
    },

    /**
     *
     */
    populateStationDetail: function() {
        var div, name, lat, lon;
        var center = document.querySelector('.container-center');
        var arr = [];

        for (var prop in BuoyAnalysisData.stationJson) {
            arr.push({
                id: prop,
                lat: BuoyAnalysisData.stationJson[prop].lat,
                lon: BuoyAnalysisData.stationJson[prop].lon,
                name: BuoyAnalysisData.stationJson[prop].name
            });
        }

        arr.sort(function(a, b) {
            return a.lon < b.lon;
        });

        arr.forEach(function(obj) {
            name = document.createElement('span');
            name.className = 'station-name';
            name.innerHTML = obj.name;

            lat = document.createElement('span');
            lat.className = 'station-lat';
            lat.innerHTML = obj.lat;

            lon = document.createElement('span');
            lon.className = 'station-lon';
            lon.innerHTML = obj.lon;

            div = document.createElement('div');
            div.className = 'detail';
            div.id = 'detail-' + obj.id;
            div.style.border = '1px solid red'

            div.appendChild(name);
            div.appendChild(lat);
            div.appendChild(lon);

            center.appendChild(div);
        });
    }
};