<%--
    Document   : composition
    Created on : Jul 31, 2013, 1:59:50 PM
    Author     : Joos Kiener <Joos.Kiener@gmail.com>
--%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<jsp:include page="/WEB-INF/jsp/header.jsp"/>
<script type="text/javascript" language="javascript" src="<c:url value="/resources/js/jsme/jsme.nocache.js"/>"></script>
<script type="text/javascript">
function jsmeOnLoad() {
    jsmeApplet = new JSApplet.JSME("structureEditor", {
        //optional parameters
        "options" : "noquery"
    });
    var molfile = $('#molfile').html();
    document.JME = jsmeApplet;
    document.JME.readMolFile(molfile);
}

$(function() {
    $("#composition").submit(function() {
        var smiles = document.JME.smiles();
        document.getElementById('structure').value = smiles;
    });


    $("#delete").submit(function() {
        var answer = confirm("Are you sure you want to delete this composition?")
	if (answer){
            return true;
	}
	else{
            return false;
	}
    });
});


</script>
<!-- Found no simpler way to get molfile (multiline string into a JS variable
    see http://stackoverflow.com/questions/805107/creating-multiline-strings-in-javascript
    Most of those idead just don't work.
-->
<div id="molfile">${composition.getChemicalStructure().getMolfile()}</div>
<!-- Surrounding div required. JSME messes up html...
    Without it the structureEditor div will include the form and the
    editor will be drawn below the search button.
-->
<div>
    <div id="structureEditor"/>
</div>

<form:form commandName="composition" class="cssform" method="post">
    <div>
        <label>Percentage</label>
        <form:input path="percentage" />
    </div>
    <form:input path="id" hidden="true"/>
    <form:input path="version" hidden="true"/>
    <input type="hidden" id="structure" name="structure">
    <div class="buttons"><input id="saveButton" class="save" type="submit" value="Save Changes"/></div>
    </form:form>
<form id="delete" class="cssform" method="post" action="delete">
    <div class="buttons"><input id="deleteButton" class="delete" type="submit" value="Delete Composition"/></div>
</form>
<jsp:include page="/WEB-INF/jsp/footer.jsp"/>