function buildUI(data){
    var root = document.createElement("div");
    root.setAttribute("class","tab-pane fade");
    root.setAttribute("id",data.market_id);

    var panel = document.createElement("div");
    panel.setAttribute("class","panel panel-default");

    var panelBody = document.createElement("div");
    panelBody.setAttribute("class","panel-body");

    var link = document.createElement("a");
    link.appendChild(document.createTextNode("trade"));
    link.setAttribute("class","btn btn-default pull-right");
    link.setAttribute("href","https://www.mintpal.com/market/"+data.code+"/"+data.exchange);
    link.setAttribute("target","_blanck");
    panelBody.appendChild(link);

    var title = document.createElement("h3");
    title.appendChild(document.createTextNode(data.code));
    var small = document.createElement("small");
    small.appendChild(document.createTextNode(" /"+data.exchange));
    title.appendChild(small);
    panelBody.appendChild(title);

    var p;
    p = document.createElement("p");
    p.innerHTML = "dernier prix : "+data.last_price;
    panelBody.appendChild(p);

    p = document.createElement("p");
    p.innerHTML = "Top bid : "+data["top_bid"];
    panelBody.appendChild(p);

    p = document.createElement("p");
    p.innerHTML = "Top ask : "+data["top_ask"];
    panelBody.appendChild(p);

    p = document.createElement("p");
    p.innerHTML = '24h <span class="glyphicon glyphicon-chevron-up"></span> : '+data["high24"];
    panelBody.appendChild(p);

    p = document.createElement("p");
    p.innerHTML = '24h <span class="glyphicon glyphicon-chevron-down"></span> : '+data["low24"];
    panelBody.appendChild(p);

    p = document.createElement("p");
    p.innerHTML = "24h Volume : "+data["vol24"];
    panelBody.appendChild(p);

    p = document.createElement("p");
    p.innerHTML = 'change : <span class="label autolabel">'+data["change"]+'</span>';
    panelBody.appendChild(p);

    panel.appendChild(panelBody);
    root.appendChild(panel);

    return root;
}

function update(){

    var data = $.ajax({
        type: "GET",
        url: "markets/update",
        async: false
    }).success(function(){
        setTimeout(function(){update();}, 15000);
    }).responseJSON;

    var activePanId = $(".tab-pane.active").attr("id");

    $('#market-content').empty();
    for (var i = data.length - 1; i >= 0; i--) {
        var div = buildUI(data[i]);
        $('#market-content').append(div);
    };
    if(activePanId){
        var str = '#myTab a[href="#'+activePanId+'"]';
        var a =  $(str);
        a.tab('show');
    }

    var str = '#myTab a[href="#4"]';
        var a =  $(str);
        a.tab('show');
};

$("tab")

$(document).ready(function(){
    new update();
});