       from: url.query.id
       active: false
       visible: true
-    flushWorkers(url.query.id,jobInfo.workers[url.query.id])
+    jobInfo.flushDom url.query.id
 
   socket = socketio "#{window.location.protocol}//#{window.location.host}"
   socket.on 'connect', ->

$ ->
  jobInfo = 
    workers: {}

  flushWorkers =  (from,w) ->
    if $(".workers-list li##{from} .twinkle").length > 0
      if w.active
        $(".workers-list li##{from} .twinkle").addClass('twinkle-on')
      else
        $(".workers-list li##{from} .twinkle").removeClass('twinkle-on')
      $(".workers-list li##{from} input.worker-visible").prop "checked", w.visible 
    else
      style = if w.active then 'twinkle-on' else ''
      workerVisible = if w.visible then 'checked' else ''
      $(".workers-list").append "<li id='#{from}'>
      <div class='twinkle #{style}'></div>
      <input type='checkbox' name='#{from}' class='worker-visible' #{workerVisible}>
      <a href='#' class='worker-detail'>#{from}</a>
      </li>"
    if $(".terminals .term-#{from}").length == 0 and w.visible
      htmlStr = "<div class='row term-#{from}'>
        <div class='col-lg-12'>
          <div class='shell-wrap'>
            <div class='titlebar'>
              <div class='buttons'>
                <div class='close'>
                  <a class='closebutton' href='#' id='#{from}'><span><strong>x</strong></span></a>
                </div>
              </div>
              node: #{from}
            </div>
            <ul class='shell-body'>
              <li class='cursor'>loading output......</li>
            </ul>
          </div>
        </div>
      </div><br/>"
      $('.terminals').append htmlStr
    act = if w.visible then 'show' else 'hide'
    $(".terminals .term-#{from}")[act]('fast')

    $('a.worker-detail').off('click').on 'click', ->
      workerId = $(this).text()
      task = jobInfo.workers[workerId].task
      $('.modal-cmd').text task?.cmd or '[node not connected]'
      $('.modal-title').text "node: #{workerId}"
      $('#myModal').modal 'show'
    $('a.closebutton').off('click').on 'click', ->
      id = $(this).attr('id')
      if id and jobInfo.workers[id]
        jobInfo.workers[id].visible = false
        flushWorkers(id,jobInfo.workers[id])
        if jobInfo.socket
          jobInfo.socket.emit 'detach',from: [id]        
    $('input.worker-visible').off('change').on 'change', ->
      id = $(this).attr('name')
      if id and jobInfo.workers[id]
        jobInfo.workers[id].visible = $(this).is(':checked')
        flushWorkers(id,jobInfo.workers[id])
        if jobInfo.socket
          if w.visible
            jobInfo.socket.emit 'attach',from: [id]
          else
            jobInfo.socket.emit 'detach',from: [id]


  url = urlPrase window.location.href,true


  socket.on 'workerIn', (data) ->
    console.log "worker in",data
    if jobInfo.workers[data.from]
      jobInfo.workers[data.from].active = true
      jobInfo.workers[data.from].doms.light.getElementsByClassName('twinkle')[0].classList.add 'twinkle-on'
    else
      jobInfo.workers[data.from] = 
        from: data.from
        active: true
        visible: false
      jobInfo.flushDom data.from

    nodeCnt = (w for w,x of jobInfo.workers when x.active).length
    document.getElementsByClassName("tsourceNum")[0].innerHTML = nodeCnt
    activeCnt = (w for w,x of jobInfo.workers when x.active).length
    if activeCnt > 0
      document.getElementsByClassName("tstate")[0].innerHTML = 'running...'
    else
      document.getElementsByClassName("tstate")[0].innerHTML = 'task finished'    

  socket.on 'workerOut', (data) ->
    console.log "worker lost",data
    return unless jobInfo.workers[data.from]
    jobInfo.workers[data.from].active = false
    jobInfo.workers[data.from].doms.light.getElementsByClassName('twinkle')[0].classList.remove 'twinkle-on'

    nodeCnt = (w for w,x of jobInfo.workers when x.active).length
    document.getElementsByClassName("tsourceNum")[0].innerHTML = nodeCnt
    activeCnt = (w for w,x of jobInfo.workers when x.active).length
    if activeCnt > 0
      document.getElementsByClassName("tstate")[0].innerHTML = 'running...'
    else
      document.getElementsByClassName("tstate")[0].innerHTML = 'task finished'


