Loading the code and some explanations

Before you load the code you should install Firebug in your Mozilla-Firefox-Brower (on Debian the name of that browser is "Iceweasel").

If you load the code (e.g. via  http://localhost/openlayers/index.html) the following image should appear:


Ok, what happens in that code?

If you activate a radio-buttion, eg. for the startpoint

        <input type="radio" name="control" value="start" id="startToggle"
               onclick="toggleControl(this);" />
        <label for="startToggle">set start point</label>

......the function toggleControl is activated.

That actives (or deactivates) an OpenLayers?. Control-Object

            controls = {
           start: new OpenLayers.Control.DrawFeature(start, SinglePoint),
              stop: new OpenLayers.Control.DrawFeature(stop, SinglePoint)
            for (var key in controls) {

        function toggleControl(element) {
            for (key in controls) {
                if (element.value == key && element.checked) {
                } else {

...whereas start and stop are keys in an Object Literal ( https://developer.mozilla.org/En/Sandbox/Javascript_Object_Literals).

The "start" and "stop" symbols are added to the map because of the following code:

       var SinglePoint = OpenLayers.Class.create();
        SinglePoint.prototype = OpenLayers.Class.inherit(OpenLayers.Handler.Point, {
            createFeature: function(evt) {
                OpenLayers.Handler.Point.prototype.createFeature.apply(this, arguments);

      start = new OpenLayers.Layer.Vector("Start point", {style: start_style});
            stop = new OpenLayers.Layer.Vector("End point", {style: stop_style});
   map.addLayers([mapnik, start, stop,result]);

If you can set start- end endpoint and you don`t get a failure in Firebug, everything is all right, but of course you need some more things to do for your routing.