/*********************************************************************************/
/*                  Dojo Functions                                               */
/*********************************************************************************/
/* scriptaculous function for communication with the Ajax server side.
 */
function sendAloeEmail( receiverAddress, subject, messageBody, event, commitMessage ) {
	new Ajax.Request("/AloeView/ajax/sendEmail", {
		method: 'get',
		parameters: {
            receiverAddress: receiverAddress,
            subject: subject,
            message: messageBody
		},
		onSuccess: function( transport ) {
            var theFloat=document.getElementById( 'floatingSendEmail' );
            if ( theFloat != null ) {
                theFloat.parentNode.removeChild(theFloat);
            }
            theFloat=document.getElementById( 'floatingLitfassConfirmation' );
            if ( theFloat != null ) {
                theFloat.parentNode.removeChild(theFloat);
            }
            
            var response = transport.responseText;
            if ( event != null && commitMessage != null ) {
            	if ( response == 'Okay' ) {
                	popupAtMouse( commitMessage, event, 0, -50 );
                }
            	else {
            		// Well, what to do now
            	}
            }
		},
		onFailure: function( transport ) {
			// do nothing
		}
	});
}
                    
                    
/*********************************************************************************/
/*                  Public (non-Ajax) Functions                                  */
/*********************************************************************************/
/* Note: the created message has elements with id 'EmailSubject' and 'EmailBody'. Take care there is
 *       no other element with same id in the surrounding HTML document!!
 */

/*
 Popup a window, where the user can specify and send an email to any receiver, that is: the user
 can specify the receiver address.
 
 Create an HTML subtree like:
    <div id="floatingSendEmail">
        <h2>Send an Email to this User</h2>
        <form accept-charset="utf-8" class="floating_Send_a_Message_to_this_User" action="javascriptDisabled"  method="post">
            <div>
                <label for="EmailTo"><fmt:message key="Content_To" />:</label>
                <input name="EmailTo" id="Recipient" type="text" value="" size="20" class="textfield" />
            </div>
            <div>
                <label for="EmailSubject"><fmt:message key="Content_Subject" />:</label>
                <input name="EmailSubject" id="Subject" type="text" value="" size="20" class="textfield" />
            </div>
            <div>
                <label for="EmailBody"><fmt:message key="Content_Message" />:</label>
                <textarea name="EmailBody" 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>
 
*/
function createEmailForAnyReceiver( optionalRecipient, event, headline, defaultSubjectValue, labelSubject,
		labelOptionalMessagePrefix, optionalMessagePrefix, labelMessage, labelTo, xOffset, yOffset, commitMessage ) {
    
    if ( document.getElementById( 'floatingSendEmail' ) == null ) {
        if ( ! xOffset ) xOffset = 0;
        if ( ! yOffset ) yOffset = 0;
        var geometry = getGeometry();
        var xPos = event.clientX + geometry.getHorizontalScroll() + xOffset;
        var yPos = event.clientY + geometry.getVerticalScroll() + yOffset;
                        
        var floatingMessage = document.createElement( "div" );
        //floatingMessage.appendChild( document.createTextNode( " " ) );
        
        var innerHtml = "<div id=\"floatingSendEmail\" style=\"top:" + yPos + "px;left:" + xPos + "px;\">\n"
          + "<h2>" + headline + "</h2>\n"
          + "<form accept-charset=\"utf-8\" class=\"floatingSendMessage\" action=\"javascriptDisabled\" method=\"post\" >\n"
          + createDivForEmailRecipient( labelTo, optionalRecipient )
          + createDivForEmailSubject( labelSubject, defaultSubjectValue )
          + createDivForEmailOptionalMessagePrefix ( labelOptionalMessagePrefix, optionalMessagePrefix )
          + "<br/><div class=\"clear\"></div>"
          + createDivForEmailBody( labelMessage )
          + createDivForEmailButtonsAnyReceiver( optionalMessagePrefix, commitMessage )
          + "</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;
        
    }
}
/*
 Popup a window, where the user can specify and send an email to the receiver specified in
 parameter 'receiverAddress'.
 
 Create an HTML subtree like:
    <div id="floatingSendEmail">
        <h2>Send an Email to this User</h2>
        <form accept-charset="utf-8" class="floating_Send_a_Message_to_this_User" action="javascriptDisabled"  method="post">
            <div>
                <label for="EmailSubject"><fmt:message key="Content_Subject" />:</label>
                <input name="EmailSubject" id="Subject" type="text" value="" size="20" class="textfield" />
            </div>
            <div>
                <label for="EmailBody"><fmt:message key="Content_Message" />:</label>
                <textarea name="EmailBody" 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>
 
*/
function createEmail( event, headline, labelSubject, optionalMessagePrefix, labelMessage,
		receiverAddress, xOffset, yOffset, commitMessage ) {
    
    if ( document.getElementById( 'floatingSendEmail' ) == null ) {
        if ( ! xOffset ) xOffset = 0;
        if ( ! yOffset ) yOffset = 0;
        var geometry = getGeometry();
        var xPos = event.clientX + geometry.getHorizontalScroll() + xOffset;
        var yPos = event.clientY + geometry.getVerticalScroll() + yOffset;
                        
        var floatingMessage = document.createElement( "div" );
        //floatingMessage.appendChild( document.createTextNode( " " ) );
        
        var innerHtml = "<div id=\"floatingSendEmail\" style=\"top:" + yPos + "px;left:" + xPos + "px;\">\n"
          + "<h2>" + headline + "</h2>\n"
          + "<form accept-charset=\"utf-8\" class=\"floatingSendMessage\" action=\"javascriptDisabled\" method=\"post\" >\n"
          + createDivForEmailSubject( labelSubject, "" ) + createDivForEmailBody( labelMessage )
          + createDivForEmailButtons( receiverAddress, optionalMessagePrefix, commitMessage )
          + "</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;
        
    }
}


/*********************************************************************************/
/*                             Private Functions                                 */
/*********************************************************************************/

/* Function to be called from the 'send'-button of a floating email element.
 * Subject and body are taken from the HTML-elements with the given ids, the
 * receiver is to be specified directly as a parameter.
 */
function sendEmailFromFloat( receiverAddress, optionalMessagePrefix, subjectHtmlId, messageHtmlId, anEvent, commitMessage ) {
    var subject = document.getElementById(subjectHtmlId).value;
    var body = document.getElementById(messageHtmlId).value;
    sendAloeEmail( receiverAddress, subject, createMessageBody( optionalMessagePrefix, body ), anEvent, commitMessage );
}

/* Function to be called from the 'send'-button of a floating email element.
 * To-field, subject and body are taken from the HTML-elements with the given ids
 */
function sendEmailFromFloatAnyReceiver( receiverId, optionalMessagePrefix, subjectHtmlId, messageHtmlId, anEvent, commitMessage ) {
    var receiver = document.getElementById(receiverId).value;
    if ( receiver != null && receiver.length > 0 ) {
        sendEmailFromFloat( receiver, unescape(optionalMessagePrefix), subjectHtmlId, messageHtmlId, anEvent, commitMessage );
    }
}

function removeLinksFromText( text )
{
	return( text.replace( /<a\s.*?>([^<]*)<\/a>/ig, "$1" ) );
}

function createMessageBody( optionalPrefix, body )
{
    var message = "";
    if ( optionalPrefix != null ) {
        message = optionalPrefix; 
	if (body != "") {
	    message += "<br/><br/>The user also sent the following message to you:<br/>" + body;
	}
    }
    else {
        message = body;
    }
    return( cutToSafeLength( message ) ); 
}

function cutToSafeLength( toCut )
{
    // This is the max value that can be handled by javascript?/dojo? on Firefox
	// To be verified, if the value is the same when using scriptaculous
	var maxValue = 5568;
	if ( toCut.length <= maxValue ) {
	    return( toCut );
	}
	else {
	    return( toCut.substring( 0, maxValue ) );
	}
}

/*
 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 createDivForEmailButtons( receiverAddress, optionalMessagePrefix, commitMessage ) {
	var responseParameters = "";
	if ( commitMessage != null ) {
		responseParameters = ", event, '" + commitMessage + "'";
	}
    
	var toReturn = "\n<div style=\"margin-left:6em;padding-left:10px;\">\n"
		+ "<a class=\"flexible_button\" href=\"javascriptDisabled\" "
		+ "onclick=\"sendEmailFromFloat('" + receiverAddress + "','" + optionalMessagePrefix
		+ "','EmailSubject','EmailBody'"
		+ responseParameters
		+ ");return(false);\">\n"
		+ "<span>" + global_aloeTranslations.sendButtonValue + "</span>\n" 
		+ " </a>\n"
		+ "<a class=\"flexible_button\" href=\"javascriptDisabled\" "
		+ "onclick=\"document.body.removeChild(document.getElementById('floatingSendEmail').parentNode);return(false);\">\n"
		+ "<span>" + global_aloeTranslations.cancelButtonValue + "</span>\n" 
		+ " </a>\n"
		+ "</div>";
     
    return( toReturn );
}

/*
 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 createDivForEmailButtonsAnyReceiver( optionalMessagePrefix, commitMessage ) {
	var responseParameters = "";
	if ( commitMessage != null ) {
		responseParameters = ", event, '" + commitMessage + "'";
	}
    
    var toReturn = "\n<div class=\"emailButtonWrapper\">\n"
        + "<a class=\"flexible_button\" href=\"javascriptDisabled\" "
        + "onclick=\"sendEmailFromFloatAnyReceiver('EmailTo','" + escape(optionalMessagePrefix)
        + "','EmailSubject','EmailBody'" + responseParameters
        + ");return(false);\">\n"
        + "<span>" + global_aloeTranslations.sendButtonValue + "</span>\n" 
        + " </a>\n"
        + "<a class=\"flexible_button\" href=\"javascriptDisabled\" "
        + "onclick=\"document.body.removeChild(document.getElementById('floatingSendEmail').parentNode);return(false);\">\n"
        + "<span>" + global_aloeTranslations.cancelButtonValue + "</span>\n" 
        + " </a>\n"
         + "</div>";
        
    return( toReturn );
}

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


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

/*
 Create an HTML subtree like:
    <div>
        <label for="EmailOptionalMessagePrefix"><fmt:message key="Content_OptionalMessagePrefix" />:</label>
    </div>
    <div>
       <textarea name="EmailBody" id="EmailBody" class="textfield" rows="8" style="height:150px;"></textarea>
    </div>
 
*/

function createDivForEmailOptionalMessagePrefix( labelOptionalMessagePrefix, optionalMessagePrefix ) {
    
    var toReturn = "\n<div>"
      + "<label for=\"EmailOptionalMessagePrefix\">" + labelOptionalMessagePrefix + ":</label>"
      + "<div class=\"emailMessagePrefixText\">" + removeLinksFromText( optionalMessagePrefix ) + "</div>"
      + "</div>\n";
      
    return( toReturn );
}


/*
 Create an HTML subtree like:
   <div>
       <label for="EmailTo"><fmt:message key="Content_To" />:</label>
       <input name="EmailTo" id="Recipient" type="text" value="" size="20" class="textfield" />
   </div>
*/
function createDivForEmailRecipient( labelTo, optionalRecipient ) {
    
	var disabled = "";
	var openGreyDiv = "";
	var closeGreyDiv = "";
	var textfieldClass = "textfield";
	
	if(optionalRecipient != null && optionalRecipient != ""){
		disabled="disabled=\"disabled\" ";
		openGreyDiv = "\n<div class=\"element grey\">";
		closeGreyDiv = "</div>\n";
		textfieldClass = "textfield grey";
	}
	else{
		optionalRecipient = "";
	}
	
	
	
    var toReturn = "\n<div>"
      + openGreyDiv
      + "<label for=\"EmailTo\">" + labelTo + ":</label>"
      + "<input id=\"EmailTo\" type=\"text\" class=\""
      + textfieldClass
      +	 "\" value=\""
      + optionalRecipient
      + "\" "
      + disabled		
      + "size=\"20\" />"
      + closeGreyDiv
      + "</div>\n";
      
    return( toReturn );
}

/******************************************************************/
/* Code for the sendToLitfass functionality offered in ALOE@KM */
/******************************************************************/

/*
 Create an HTML subtree like:
    <div id="floatingLitfassConfirmation">
        <h2>Send to Litfass</h2>
        <form accept-charset="utf-8" action="javascriptDisabled"  method="post">
            <div>
                You are about to put this resource into Litfass system...
            </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>
 
*/
function createConfirmationForLitfassEmail( event, headline, informationText, resourceUrl, xOffset, yOffset ) {
    
    if ( document.getElementById( 'floatingLitfassConfirmation' ) == null ) {
        if ( ! xOffset ) xOffset = 0;
        if ( ! yOffset ) yOffset = 0;
        var geometry = getGeometry();
        var xPos = event.clientX + geometry.getHorizontalScroll() + xOffset;
        var yPos = event.clientY + geometry.getVerticalScroll() + yOffset;
                        
        var floatingMessage = document.createElement( "div" );
        //floatingMessage.appendChild( document.createTextNode( " " ) );
        
        var innerHtml = "<div id=\"floatingLitfassConfirmation\" style=\"top:" + yPos + "px;left:" + xPos + "px;\">\n"
          + "<h2>" + headline + "</h2>\n"
          + "<p>" + informationText + "</p>"
          + "<form accept-charset=\"utf-8\" class=\"floatingLitfassConfirmation\" action=\"javascriptDisabled\" method=\"post\" >\n"
          + createDivForLitfassButtons( "litfass@dfki.uni-kl.de", resourceUrl )
          + "</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 createDivForLitfassButtons( receiverAddress, resourceUrl ) {
    
    var toReturn = "\n<div style=\"margin-left:6em;padding-left:10px;\">\n"
      + "<input class=\"button\" type=\"submit\" value=\"Send\" "
      + "onclick=\"sendAloeEmail('" + receiverAddress
      + "','ALOE resource','" + resourceUrl + "');return(false);\" />\n"
      + "<input class=\"button\" type=\"submit\" value=\"Cancel\" "
      + "onclick=\"document.body.removeChild(document.getElementById('floatingLitfassConfirmation').parentNode);return(false);\" />\n"
      + "</div>";
      
    return( toReturn );
}