function newDiv(classname){
	var e = document.createElement('div')
	e.className = classname
	return e
	}
	
function newInput(ty, na, va, cl){
	var e = document.createElement('input')
	e.className = cl
	e.type = ty
	e.name = na
	e.value = va
	return e
	}

function commentElement(){
    
    this.htmlElement = newDiv('balloon');    
    this.title = '<b>Answer</b>'
    this.approveButtonName = 'Commit'
    this.rejectButtonName = 'Abweisen'
    this.cancelButtonName = 'Cancel'
    this.question_id = ''
    
	var e_inside1 = newDiv('balloon-head')
	var e_inside2 = newDiv('balloon-body')

    this.remove = function(someEvent){
	var db = document.body; var e = this.htmlElement
        e.style.display = 'none'
        db.removeChild(e)
        db.onclick = this.bodyoldonclick
        }

    this.show = function(someEvent){
        if(document.getElementById('##comment##'))
            return;
		var db = document.body
		var e = this.htmlElement
		var e_area = document.createElement('textarea')
		with(e_area){
	   	    name = this.action
		    style.width = '100%'
	    	disabled = true
		    }
	
		e_form = document.createElement('form')
		var ajaxaction = ''
		with(e_form){
	    	if(this.action == 'answer'){
				action = 'question/ajaxsaveanswer'
				ajaxaction = '/question/ajaxanswer/id/'+this.question_id
				}
    		else if(this.action == 'comment'){
    			action = 'question/ajaxsavecomment'
				ajaxaction = '/question/ajaxcomment/id/'+this.question_id
				}
			var bbar = document.createElement('div')
			
			method = 'post'
			appendChild(newInput('hidden', 'id', this.question_id, ''))
			appendChild(e_area)
			appendChild(newInput('submit', 'submit', this.cancelButtonName, 'cancel-button'))
			appendChild(newInput('submit', 'submit', this.rejectButtonName, 'reject-button'))
			appendChild(newInput('submit', 'submit', this.approveButtonName, 'submit-button'))
    		}

		e_inside1.className = 'balloon-head'

		with(e_inside2){
	    	innerHTML = '<div class="title">'+this.title+'</div>'
		    appendChild(e_form); 
		    }

		with(this.htmlElement){
		    appendChild(e_inside1); 
		    appendChild(e_inside2)
		    style.display = 'none'; 
		    style.position = 'absolute'; 
		    setAttribute('id', '##comment##')
		    }
    
		AjaxRequest.get({ 
	    	'url': ajaxaction,
	    	'onSuccess':function (req) { 
				with(e_area){
				    value = req.responseText; 
				    disabled = false; 
			    	focus() 
		    		}
				},
	    	'onError':function (req) { 
				var ed = document.createElement('div'); 
				with (ed.style) {
		   			fontSize='105%'; 
				    fontWeight = 'bold'; 
				    backgroundColor='#f00'; 
				    color='#fff'; 
				    }
				ed.innerHTML='Could not retrieve current value ('+ajaxaction+', '+req.statusText+')!'; 
				this.htmlElement.appendChild(ed)
				}
	    
			});
	
        db.appendChild(e)
		with(e){
    	    style.top = someEvent.pageY+'px'
    	    style.left = someEvent.pageX+'px'
    	    style.display = 'block'
    	    e_area.focus()
	    	onclick = function(event){ 
				event.cancelBubble = true; 
				event.stopPropagation() 
				}
	    	}
        someEvent.cancelBubble = true
        }        

    }