/* Note: the created message has elements with id 'Subject' and 'Message'. Take care there is
         no other element with same id in the surrounding HTML document!!
*/

function createMessage( event, headline, labelSubject, optionalDefaultSubject, labelMessage, receiverId, xOffset, yOffset, responseText ) {
    _createMessageOrGroupMessage( event, headline, labelSubject, optionalDefaultSubject, labelMessage, receiverId, xOffset, yOffset, false, responseText );
}

function createGroupMessage( event, headline, labelSubject, optionalDefaultSubject, labelMessage, groupId, xOffset, yOffset, responseText ) {
    _createMessageOrGroupMessage( event, headline, labelSubject, optionalDefaultSubject, labelMessage, groupId, xOffset, yOffset, true, responseText );
}

/*
 Create an HTML subtree like:
    <div id="floating_Send_a_Message_to_this_User">
        <h2>Send a Message to this User</h2>
        <form accept-charset="utf-8" class="floating_Send_a_Message_to_this_User" action="javascriptDisabled"  method="post">
            <div>
                <label for="Subject"><fmt:message key="Content_Subject" />:</label>
                <input name="Subject" id="Subject" type="text" value="" size="20" class="textfield" />
            </div>
            <div>
                <label for="Message"><fmt:message key="Content_Message" />:</label>
                <textarea name="Message" id="Message" class="textfield" rows="8" style="height:150px;"></textarea>
            </div>
            <div style="margin-left:6em;padding-left:10px;">
                <input class="button" name="button" type="submit" value="Send" />
                <input class="button" name="button" type="submit" value="Cancel" />
            </div>
        </form>
    </div>
 
    receiver can represent the id of an aloe user or a group name
*/
function _createMessageOrGroupMessage( event, headline, labelSubject, optionalDefaultSubject, labelMessage, receiver, xOffset, yOffset, groupFlag, responseText ) {
    
    if ( document.getElementById( 'floatingSendMessage' ) == null ) {
        
        var geometry = getGeometry();
        var xPos = event.clientX + geometry.getHorizontalScroll() + xOffset;
        var yPos = event.clientY + geometry.getVerticalScroll() + yOffset;
        
        //alert( "x position: " + xPos + ", y position: " + yPos );
                        
        var floatingMessage = document.createElement( "div" );
        //floatingMessage.appendChild( document.createTextNode( " " ) );
        
        var buttons = groupFlag ? _createDivForGroupButtons( receiver, responseText ) : _createDivForButtons( receiver, responseText );
        
        var innerHtml = "<div class=\"containerOfJavascriptGeneratedMessageForm floatingForm\" id=\"floatingSendMessage\" style=\"top:"
          + yPos + "px;left:" + xPos + "px;\">\n"
          + "<h2>" + headline + "</h2>\n"
          + "<form accept-charset=\"utf-8\" class=\"floatingSendMessage\" action=\"javascriptDisabled\" method=\"post\" >\n"
          + createDivForSubject( labelSubject, optionalDefaultSubject ) + createDivForMessage( labelMessage )
          + buttons
          + "</form>\n"
          + "</div>\n";
        
        /* Workaround for IE: add empty div as first child of body tag, then
             replace inner HTML of this newly inserted div by our floating
             element, which is positioned by css style specifications */
        var replaceHere = document.body.insertBefore( floatingMessage, document.body.firstChild );
        replaceHere.innerHTML = innerHtml;
    }
}

/*
 Create an HTML subtree like:
    <div style="margin-left:6em;padding-left:10px;">
        <input class="button" type="submit" value="Send" />
        <input class="button" type="submit" value="Cancel" />
    </div>
 
*/
function _createDivForButtons( receiverId, responseText ) {
	
	var responseParameters = "";
	if ( responseText != null ) {
		responseParameters = ", event, '" + responseText + "'";
	}
    
    var toReturn = "\n<div class=\"buttonContainerInJavascriptGeneratedMessageForm\">\n"
    	+ "<a href=\"javascriptDisabled\" class=\"flexible_button\" "
        + "onclick=\"sendAloeMessage('" + receiverId + "','Subject','Message'"
        + responseParameters
        + ");return(false);\">\n"
        + "<span>"
        + global_aloeTranslations.sendButtonValue
        + "</span>\n"
        + "</a>\n"
        + "<a href=\"javascriptDisabled\" class=\"flexible_button\" "
        + "onclick=\"document.body.removeChild(document.body.firstChild);return(false);\">\n"
        + "<span>"
        + global_aloeTranslations.cancelButtonValue
        + "</span>\n"
        + "</a>\n"
        + "</div>";
      
    return( toReturn );
}

/*
 * Note: groupName is expected to be a string where all URL(!) special characters are escaped!!
 */
function _createDivForGroupButtons( groupId, responseText ) {
	
	var responseParameters = "";
	if ( responseText != null ) {
		responseParameters = ", event, '" + responseText + "'";
	}
	

    var toReturn = "\n<div class=\"buttonContainerInJavascriptGeneratedMessageForm\">\n"
    	+ "<a href=\"javascriptDisabled\" class=\"flexible_button\" "
        + "onclick=\"sendAloeGroupMessage('" + groupId + "','Subject','Message'"
        + responseParameters
        + ");return(false);\">\n"
        + "<span>"
        + global_aloeTranslations.sendButtonValue
        + "</span>\n"
        + "</a>\n"
        + "<a href=\"javascriptDisabled\" class=\"flexible_button\" "
        + "onclick=\"document.body.removeChild(document.body.firstChild);return(false);\">\n"
        + "<span>"
        + global_aloeTranslations.cancelButtonValue
        + "</span>\n"
        + "</a>\n"
        + "</div>";
      
    return( toReturn );
}

/*
 Create an HTML subtree like:
    <div>
        <label for="Message"><fmt:message key="Content_Message" />:</label>
        <textarea name="Message" id="Message" class="textfield" rows="8" style="height:150px;"></textarea>
    </div>
 
*/
function createDivForMessage( labelMessage ) {
    
    var toReturn = "\n<div>"
      + "<label class=\"labelInJavascriptGeneratedMessageForm\" for=\"Message\">" + labelMessage + ":</label>"
      + "<textarea id=\"Message\" name=\"Message\" class=\"textfield formElementInJavascriptGeneratedMessageForm\" rows=\"8\"></textarea>"
      + "</div>\n";
      
    return( toReturn );
}


/*
 Create an HTML subtree like:
    <div>
        <label for="Subject"><fmt:message key="Content_Subject" />:</label>
        <input id="Subject" type="text" value="" size="20" class="textfield" />
    </div>
 
*/
function createDivForSubject( labelSubject, optionalDefaultSubject ) {
    
    var toReturn = "\n<div>"
      + "<label class=\"labelInJavascriptGeneratedMessageForm\" for=\"Subject\">" + labelSubject + ":</label>"
      + "<input id=\"Subject\" type=\"text\" class=\"textfield formElementInJavascriptGeneratedMessageForm\" value=\"" + optionalDefaultSubject + "\" size=\"20\" />"
      + "</div>\n";
      
    return( toReturn );

}