var Tableau = {
    row: 0,
    column: 0,
    cell: 0,
    widthColumn: 0,
    pxPadding: 0,
    init: function (nom, columns, rows){
        this.nom = nom;
        var columns = new Array('LEO');
        var rows = new Array('SC');
        this.row = rows.length;
        this.column = columns.length;
        this.cell = this.row * this.column;
        this.pxPadding = '15px';
        this.pxPaddingTotal = '30px';
        this.widthColumn = 100 / (this.column + 1);
        this.widthCell = 100 / (this.column);
        this.WidthListCell = 100 - this.widthColumn;
        this.calcWidthColumn = 'calc('+this.widthColumn+'% - '+this.pxPaddingTotal+')';
        this.calcWidthCell = 'calc('+this.widthCell+'% - '+this.pxPaddingTotal+')';
        
        //jQuery('div id="'+this.nom+'">').html('').appendTo('body');
        
        for(var idOrbit in columns)
        {
            jQuery('<div id="'+columns[idOrbit]+'" class="listOrbit">').html(columns[idOrbit]).appendTo('#listOrbit');
            jQuery('.listOrbit').css('width', this.calcWidthColumn).css('padding', this.pxPadding);
        }
        for(var idEffect in rows)
        {
            jQuery('<div id="'+rows[idEffect]+'" class="listEffect">').html(rows[idEffect]).appendTo('#listEffect');
            jQuery('.listEffect').css('padding', this.pxPadding);
            
            for(var idCell in columns)
            {
                jQuery('<div id="'+columns[idCell]+'_'+rows[idEffect]+'" class="listCell">').html('').appendTo('#listCell');
                jQuery('.listCell').css('width', this.calcWidthCell).css('padding', this.pxPadding);
                jQuery('#listEffect').css('width', this.calcWidthColumn);
                jQuery('#listCell').css('width', this.WidthListCell+'%');
            }      
        }
    }
}
                
Tableau.init();
function recupJSONLEO_SC(){
    
    var dataJSON = '["20170820;26200;2"]';
    var arrayJSON = dataJSON.split(";");
    var dateJSON = arrayJSON[0].replace('["', '');
    var timeJSON = parseInt(arrayJSON[1]);      
    var indiceJSON = arrayJSON[2].replace('"]', '');
                
    var anneeJSON = dateJSON.substring(0, 4);
    var moisJSON = dateJSON.substring(4, 6);
    var jourJSON = dateJSON.substring(6, 8);
    var dateJSON = jourJSON+'/'+moisJSON+'/'+anneeJSON;
    var hourJSON = Math.floor(timeJSON / 3600);
    timeJSON %= 3600;
    var minuteJSON = Math.floor(timeJSON / 60);
    var secondJSON = timeJSON % 60;
    
    var niceDate = new Date(anneeJSON, moisJSON - 1, jourJSON, hourJSON, minuteJSON, secondJSON);
    var dateFormat = niceDate.toLocaleString();
    console.log(dateFormat);
                
    if(indiceJSON == '1')
    var color = 'green';
    if(indiceJSON == '2')
    var color = 'yellow';
    if(indiceJSON == '3')
    var color = 'orange';
    if(indiceJSON == '4')
    var color = 'red';
    
    jQuery('<div id="indiceLEO_SC" class="trafficLight '+color+'">').html('').appendTo('#LEO_SC');
    
    jQuery('<div class="infoPanel">').html(dateFormat).appendTo('#LEO_SC');
}
recupJSONLEO_SC();

jQuery('body').on('mouseover', '.trafficLight', function e(){
    var id = this.id.replace('indice', '');
    jQuery('#'+id+' .infoPanel').css('opacity', '0.7')
});

jQuery('body').on('mouseout', '.trafficLight', function e(){
    var id = this.id.replace('indice', '');
    jQuery('#'+id+' .infoPanel').css('opacity', '')
});
                
jQuery('body').on('click', '.trafficLight', function e(){
    var id = this.id.replace('indice', '');
    window.location = 'historic.php?explore='+id;
});