<?xml-stylesheet href="xsltforms/xsltforms.xsl" type="text/xsl"?>
<?xsltforms-options debug="no"?>
<html xmlns="http://www.w3.org/1999/xhtml"
	    xmlns:h="http://www.w3.org/1999/xhtml"
            xmlns:xf="http://www.w3.org/2002/xforms"
	    xmlns:ev="http://www.w3.org/2001/xml-events">
    <head>
        <title>Mouse</title>

        <style type="text/css"> 
        body { margin: 2em; } 
      
        label {font-weight: bold; width: 7em; display: inline-block; text-align: right; padding-right: 0.5em } 
        .xforms-value { width: 10em} 
        .xforms-select1 { width: 20em; display: inline-block;  margin: 0; padding: 0}
        .xforms-input, .xforms-secret { width: 20em; display: inline-block; margin: 0; padding: 0}
        .xforms-select1 .xforms-value { width: 10.5em } 
        .xforms-submit { margin-left: 1em } 
        .xforms-invalid .xforms-alert-value { display: block; color: red }
	span.xforms-alert-value {background-color: rgba(255, 238, 238, 0.5); margin-top: 3em; margin-left: 5em}

	.crop {
		height: 30em; width: 30em;
		float:left;
		margin:.5em 10px .5em 0;
		border:1px solid #ccc;
		overflow: scroll;
	}

        </style>

        <model xmlns="http://www.w3.org/2002/xforms">
            <instance id="style">
                <data xmlns="">
			<x>0</x><y>0</y><z/>
			<events><event>Events:</event></events>
                </data>
            </instance>
        </model>
    </head>

    <body>
	<group class="crop" xmlns="http://www.w3.org/2002/xforms">
	<label>Please click here</label> 
		<action ev:event="dblclick">
			<insert nodeset="events" position="after" at="count(events)"/>
			<setvalue ref="events[last()]">dblclick</setvalue>
		</action>
		<action ev:event="click">
			<insert nodeset="events" position="after" at="count(events)"/>
			<setvalue ref="events[last()]">click</setvalue>
		</action>
		<action ev:event="mousedown">
			<insert nodeset="events" position="after" at="count(events)"/>
			<setvalue ref="events[last()]" value="concat('mousedown: pageX/Y: ', event('pageX'), ',', event('pageY'), ' screenX/Y:', event('screenX'), ',', event('screenY'), ' clientX/Y:', event('clientX'), ',', event('clientY'), '/ ctrl:', event('ctrlKey'), ' shift:', event('shiftKey'), ' alt:', event('altKey'), ' meta:', event('metaKey'))"/>
			<setvalue ref="x" value="event('clientX')"/>
			<setvalue ref="y" value="event('clientY')"/>
		</action>
<!--		<action ev:event="mousemove">
			<insert nodeset="events" position="after" at="count(events)"/>
			<setvalue ref="events[last()]">mousemove</setvalue>
		</action> -->
		<action ev:event="mouseup">
			<insert nodeset="events" position="after" at="count(events)"/>
			<setvalue ref="events[last()]">mouseup</setvalue>
		</action>
		<action ev:event="mousewheel">
			<insert nodeset="events" position="after" at="count(events)"/>
			<setvalue ref="events[last()]" value="concat('mousewheel: deltaX/Y: ', event('deltaX'), ',', event('deltaY'))"/>
		</action>
		<action ev:event="contextmenu">
			<insert nodeset="events" position="after" at="count(events)"/>
			<setvalue ref="events[last()]">contextmenu</setvalue>
		</action>
		<action ev:event="keydown">
			<insert nodeset="events" position="after" at="count(events)"/>
			<setvalue ref="events[last()]">keydown</setvalue>
		</action>
		<action ev:event="keyup">
			<insert nodeset="events" position="after" at="count(events)"/>
			<setvalue ref="events[last()]">keyup</setvalue>
		</action>
		<action ev:event="keypress">
			<insert nodeset="events" position="after" at="count(events)"/>
			<setvalue ref="events[last()]">keypress</setvalue>
		</action>
	</group>
	<group class="crop" xmlns="http://www.w3.org/2002/xforms">
	<label>Hello</label> 
		(<output ref="x"/>, <output ref="y"/>)
		<repeat nodeset="events">
			<output ref="."/>
		</repeat>
	</group>
    </body>
</html>

