<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="EN" lang="EN">
 <head>
  <meta content="text/html; charset=UTF-8" http-equiv="content-type"/>
  <title>ZOO WPS Client example</title>
  <style>
  #map{width:600px;height:600px;}
  </style>
  <link rel="stylesheet" href="/openlayers/theme/default/style.css" type="text/css" />
  <script type="text/javascript" src="/openlayers/lib/OpenLayers.js"></script>
  <script type="text/javascript">
   var map, layer, select, hover, multi, control;

function init(){
  OpenLayers.ProxyHost= "../cgi-bin/proxy.cgi?url=";
  map = new OpenLayers.Map('map', {
    controls: [
      new OpenLayers.Control.PanZoom(),
      new OpenLayers.Control.Permalink(),
      new OpenLayers.Control.Navigation()
    ]
  });
  layer = new OpenLayers.Layer.WMS(
    "States WMS/WFS",
    "http://localhost:8082/geoserver/ows",
    {layers: 'topp:states', format: 'image/png'},
    {transparent: "true"},
    {isBaseLayer: false},
    {buffer:1, singleTile:true}
  );

  select = new OpenLayers.Layer.Vector("Selection", {styleMap: 
                new OpenLayers.Style(OpenLayers.Feature.Vector.style["select"])
            });
hover = new OpenLayers.Layer.Vector("Hover");

multi = new OpenLayers.Layer.Vector("Multi", {styleMap: 
                new OpenLayers.Style({
                  fillColor:"red",
                  fillOpacity:0.4,
                  strokeColor:"red",
                  strokeOpacity:1,
                  strokeWidth:2
                })
            });
map.addLayers([layer, select, hover, multi]);

control = new OpenLayers.Control.GetFeature({
                protocol: OpenLayers.Protocol.WFS.fromWMSLayer(layer)
            });
control.events.register("featureselected", this, function(e) {
                select.addFeatures([e.feature]);
            });
control.events.register("featureunselected", this, function(e) {
                select.removeFeatures([e.feature]);
            });
control.events.register("hoverfeature", this, function(e) {
                hover.addFeatures([e.feature]);
            });
control.events.register("outfeature", this, function(e) {
                hover.removeFeatures([e.feature]);
            });
map.addControl(control);

selectControl = new OpenLayers.Control.SelectFeature(
                //{protocol: OpenLayers.Protocol.WFS.fromWMSLayer(layer)},
                layer,
                {
                    clickout: true, toggle: false,
                    multiple: false, hover: false,
                    toggleKey: "ctrlKey", // ctrl key removes from selection
                    multipleKey: "shiftKey" // shift key adds to selection
                }
            );
map.addControl(selectControl);

map.addControl(new OpenLayers.Control.LayerSwitcher());

control.activate();

  map.zoomToExtent(new OpenLayers.Bounds(-140.444336,25.115234,-44.438477,50.580078));
}
function simpleProcessing(aProcess) {
   if (select.features.length == 0)
    return alert("No feature selected!");
  var url = '/zoo/?request=Execute&service=WPS&version=1.0.0&';
  if (aProcess == 'Buffer') {
    var dist = document.getElementById('bufferDist').value;
    if (isNaN(dist))
      return alert("Distance is not a Number!");
    url+='Identifier=Buffer&DataInputs=BufferDistance='+dist+'@datatype=interger;InputPolygon=Reference@xlink:href=';
  } else 
      url += 'Identifier='+aProcess+'&DataInputs=InputPolygon=Reference@xlink:href=';
  var xlink = control.protocol.url +"?SERVICE=WFS&REQUEST=GetFeature&VERSION=1.0.0";
  xlink += '&typename='+control.protocol.featurePrefix;
  xlink += ':'+control.protocol.featureType;
  xlink += '&SRS='+control.protocol.srsName;
  xlink += '&FeatureID='+select.features[0].fid;
  url += encodeURIComponent(xlink);
  url += '@mimeType=text/xml&RawDataOutput=Result@mimeType=application/json';
  var request = new OpenLayers.Request.XMLHttpRequest();
  request.open('GET',url,true);
  request.onreadystatechange = function() {
   if(request.readyState == OpenLayers.Request.XMLHttpRequest.DONE) {
      var GeoJSON = new OpenLayers.Format.GeoJSON();
      var features = GeoJSON.read(request.responseText);
      hover.removeFeatures(hover.features);
      hover.addFeatures(features);
    }
  }
  request.send();
}
  </script>
 </head>
 <body onload="init()">
<h3>Single geometry processing</h3>
<ul>
  <li>
    <input type="button" onclick="simpleProcessing(this.value);" value="Buffer" />
    <input id="bufferDist" value="1" />
  </li>
  <li>
    <input type="button" onclick="simpleProcessing(this.value);" value="ConvexHull" />
  </li>
  <li>
    <input type="button" onclick="simpleProcessing(this.value);" value="Boundary" />
  </li>
  <li>
    <input type="button" onclick="simpleProcessing(this.value);" value="Centroid" />
  </li>
</ul>
  <div id="map"></div>
 </body>
</html>