var socket,keepalive;
var opt = {debug:1,log:1,warning:1,error:1,maxLine:1000};
// var scroll = 1;

function connect(){
    $('.host,.port').attr('disabled','true').addClass('disabled');
    var host = $('.host').val(),port = $('.port').val();
    if(!host) host = '127.0.0.1';
    if(!port) port = 4002;
    socket = io('http://'+host+':'+port);
    socket.on('connect_error',function(){
        alert('Socket connect error!');
        disconnect();
    });
    socket.on('connect', function(){
        keepalive = setInterval(function(){socket.emit('keepalive',true);},1000);
        $('.connect button').text('Disconnect').addClass('disabled');
    });
    socket.on('push', function(data){
        addBox(data);
    });
    socket.on('disconnect', function(){
        disconnect();
    });
}

function disconnect(){
    if(socket){
        socket.destroy();
        socket = null;
    }
    if(keepalive){
        clearInterval(keepalive);
        keepalive = null;
    }
    $('.host,.port').removeAttr('disabled').removeClass('disabled');
    $('.connect button').text('Connect').removeClass('disabled');
}

function addBox(data){
    var levelClass,output=data.data,msg;
    data.level=="0"?levelClass='LOG':data.level=="1"?levelClass='DEBUG':data.level=="2"?levelClass='WARNING':data.level=="3"?levelClass='ERROR':'';
    if((levelClass=='LOG'&&opt.log==0)||(levelClass=='DEBUG'&&opt.debug==0)||(levelClass=='WARNING'&&opt.warning==0)||(levelClass=='ERROR'&&opt.error==0)) return;
    msg = output.msg?output.msg:output.data;
    var pid = parseInt(data.pid);
        pid = pid.toString(36);
    var filterPid = $('.filter .pid').val();
    var dom = $('<div class="box '+levelClass+'" data-pid="'+pid+'"><div class="head"><span class="level">'+levelClass+'</span><h2>'+output.backtrace.file+'</h2><span class="line">'+output.backtrace.line+' 行</span></div><div class="content"><pre>'+msg+'</pre></div><div class="info">PID: '+pid+'<span>'+data._t+'</span></div></div>');
    if($('.list .box').length>=opt.maxLine){$('.list .box:eq(0)').remove();}
    if(filterPid!='' && filterPid!=pid) dom.hide();
    $('.list').append(dom);
}
$(function(){
    $('.connect button').click(function(){
        if(socket){
            disconnect();
        }else{
            connect();
        }
    });
    $('.filter span').click(function(){
        var type = $(this).attr('data-type');
        if(opt[type]){
            opt[type]=0;
            $(this).addClass('disabled');
        }else{
            opt[type]=1;
            $(this).removeClass('disabled');
        }
    });
    $('.filter button').click(function(){
        var pid = $('.filter .pid').val();
        if(pid==''){
            $('.list .box').show();
        }else{
            $('.list .box[data-pid!='+pid+']').hide();
        }
    });
    $('.clearList').click(function(){
        $('.list').empty();
    });
});