function getCoords(element) {
    var el = element
    var res = { x: 0, y: 0 }
    do {
        res.x += el.offsetLeft
        res.y += el.offsetTop
        el = el.offsetParent
    } while(el && el != document.body)
    return res
}

var frame = null
var animation = {
    start:      { x: 0, y: 0, w: 0, h: 0, a: 0.5 },
    stop:       { x: 0, y: 0, w: 0, h: 0, a: 0.1 },
    position:   0,
    timer:      null
}
function commentAnimation(divToShow) {
    var startEl  = document.getElementById("commentTable")
    var endEl    = document.getElementById("subComment")
    if(!frame) {
        frame = document.createElement("DIV")
        frame.className = "aniFrame"
        document.body.appendChild(frame)
    }
    var coords = getCoords(startEl)
    animation.start.x   = coords.x
    animation.start.y   = coords.y
    animation.start.w   = startEl.offsetWidth
    animation.start.h   = startEl.offsetHeight
    coords = getCoords(endEl)
    animation.stop.x   = coords.x
    animation.stop.y   = coords.y
    animation.stop.w   = endEl.offsetWidth
    animation.stop.h   = 30
    animation.position = 0
    if(divToShow) animation.onEnd = function() { divToShow.style.display="block" }
    showAnimationPhase()
    //animation.timer    = window.setTimeout("doAnimation()", 1000)
}

function showAnimationPhase() {
    if(animation.position == 0) frame.style.display = "block"
    frame.style.left   = animation.start.x + (animation.stop.x - animation.start.x) * animation.position
    frame.style.top    = animation.start.y + (animation.stop.y - animation.start.y) * animation.position
    frame.style.width  = animation.start.w + (animation.stop.w - animation.start.w) * animation.position
    frame.style.height = animation.start.h + (animation.stop.h - animation.start.h) * animation.position
    var a = animation.start.a + (animation.stop.a - animation.start.a) * animation.position
    if(frame.filters) {
        frame.filters.item("alpha").Opacity = a*100
    } else {
        frame.style.opacity = a
    }
}
function doAnimation() {
    showAnimationPhase()
    animation.position += 0.1
    if(animation.position > 1) {
        frame.style.display = "none"
        if(animation.onEnd) animation.onEnd()
    } else {
        window.setTimeout("doAnimation()", 20)
    }
}

function sendComment(textField) {
    var form = document.forms["commentform"]
    if(typeof textField == "undefined") textField = "text"
    if(form[textField].value == "") { alert('Форма не заполнена!'); return false; }
    var cl = document.getElementById("commentsList")
    var div = cl.appendChild(document.createElement("DIV"))
    var errorDiv = document.getElementById("errorMessage")
    var statusDiv = document.getElementById("statusMessage")
    div.style.display = "none"
    var fields = {}
    for(var i=0; i<form.elements.length; i++) {
        var obj = form.elements.item(i)
        if(!obj.name) continue
        if(obj.type == "checkbox" && !obj.checked)  continue
        fields[obj.name] = obj.value
    }
    fields["method"] = "xmlhttprequest"
    fields["lastCommentTime"] = lastCommentTime
    errorDiv.style.display = "none"
    var res = serverRequest("/work_post", fields, 
            function(data) {
                if(data.error) {
                    statusDiv.style.display = "none"
                    frame.style.display = "none"
                    errorDiv.innerHTML = data.error
                    errorDiv.style.display = "inline"
                    window.setTimeout(function() { errorDiv.style.display = "none" }, 7000)
                } else {
                    lastCommentTime = data.lastCommentTime
                    //div.innerHTML = data.html
                    $(div).html(data.html).hieroFormat();
                    form[textField].value = ""
                    doAnimation()
                    statusDiv.style.display = "none"
                }
            })
    if(res) {
        div.style.display = "none"
        statusDiv.style.display = "inline"
        commentAnimation(div)
        return true
    }
    return false
}