tag: (el) ->
    document.createElement(el)
text: (s) ->
    document.createTextNode(s)
position: (el) ->
    id: el.id
    if left: GM_getValue("${id}Left", '0px')
        el.style.left: left
    else
        el.style.right: '0px'
    if top: GM_getValue("${id}Top", '0px')
        el.style.top: top
    else
        el.style.bottom: '0px'

move: {}
mousedown: (e) ->
    div: this.parentNode
    move.div: div
    move.divX: div.offsetLeft
    move.divY: div.offsetTop
    move.clientX: e.clientX
    move.clientY: e.clientY
    move.bodyX: document.body.clientWidth
    move.bodyY: document.body.clientHeight
    window.addEventListener('mousemove', mousemove, true)
    window.addEventListener('mouseup', mouseup, true)
mousemove: (e) ->
    div: move.div
    realX: move.divX + (e.clientX - move.clientX)# x + dx
    left: if realX < 20 then 0 else realX
    if move.bodyX - div.offsetWidth - realX < 20
        div.style.left: ''
        div.style.right: '0px'
    else
        div.style.left: left + 'px'
        div.style.right: ''
    realY: move.divY + (e.clientY - move.clientY)# y + dy
    top: if realY < 20 then 0 else realY
    if move.bodyY - div.offsetHeight - realY < 20
        div.style.top: ''
        div.style.bottom: '0px'
    else
        div.style.top: top + 'px'
        div.style.bottom: ''
mouseup: ->
    id: move.div.id
    GM_setValue("${id}Left", move.div.style.left)
    GM_setValue("${id}Top", move.div.style.top)
    window.removeEventListener('mousemove', mousemove, true)
    window.removeEventListener('mouseup', mouseup, true)


GM_addStyle('
    #filter {
        position: fixed;
        text-align: right;
    }
    #filter:hover {
        border: 1px solid;
    }
    #filter:not(:hover) {
        background: rgba(0,0,0,0)
    }
    #filter:not(:hover) > div {
        display: none;
    }
    #filter:not(:hover) > div.top {
        display: block;
        padding: 0;
    }
    #filter > div {
        padding: 0 5px 0 5px;
    }
    #filter > .top {
        padding: 5px 5px 0 5px;
    }
    #filter > .bottom {
    padding: 0 5px 5px 5px;
    }
    .move {
        cursor: move;
    }
    .pointer {
        cursor: pointer;
    }
')

filter: tag('div')
filter.id: 'filter'
filter.className: 'reply'
position(filter)

bar: tag('div')
bar.textContent: '4chon foltor'
bar.className: 'move top'
bar.addEventListener('mousedown', mousedown, true)
filter.appendChild(bar)

fields: [
    'Name',
    'Tripcode',
    'Email',
    'Subject',
    'Comment',
    'File',
]
for field in fields
    div: tag('div')
    label: tag('label')
    label.appendChild(text(field))
    label.appendChild(tag('input'))
    div.appendChild(label)
    filter.appendChild(div)

apply: tag('a')
apply.textContent: 'apply'
apply.className: 'pointer'
reset: tag('a')
reset.textContent: 'reset'
reset.className: 'pointer'
div: tag('div')
div.className: 'bottom'
div.appendChild(apply)
div.appendChild(text(' '))
div.appendChild(reset)
filter.appendChild(div)
document.body.appendChild(filter)