var al = 12;		// Arrow length
var aw = 20;		// Arrow width
var haw = aw/2;	// Half arrow width
var xValues = new Array();
var yValues = new Array();

function joinWithArrow(id1, id2)
{
var el1=document.getElementById(id1);
var el2=document.getElementById(id2);

// Sometimes we call this function without a valid element.  In that case,
// just return out without an error

if ( !el1 || !el2) return;

var pos1 = Position.cumulativeOffset(el1);
var x1 = pos1[0];
var y1 = pos1[1];

var pos2 = Position.cumulativeOffset(el2);
var x2 = pos2[0];
var y2 = pos2[1];

y2 -= 5; //margin;
y1 += 5;

var d1 = $(id1).getDimensions();
var width1 = d1.width;

var height1 = d1.height;
var d2 = $(id2).getDimensions();
var width2 = d2.width;

x1 = x1 + (width1/2);
y1 = y1 + height1;

x2 = x2 + (width2/2);

// note: for internet explorer, needed a "canvas" div and everything worked fine.
document.write('<DIV id="canvas" style="position:absolute;top:0px;left:0px;width=10px;height=10px">');

document.write('</DIV>');
var jg = new jsGraphics("canvas");

jg.setColor("#ff0000");

calcValues(x1,y1,x2,y2);
jg.fillPolygon(xValues,yValues);

x1 = Math.round(x1);
y1 = Math.round(y1);
x2 = Math.round(x2);
y2 = Math.round(y2);

//alert("x1=" + x1.toString() + " y1=" + y1.toString() + "x2=" + x2.toString() + " y2=" + y2.toString() );
jg.setStroke(2);
jg.drawLine(x1, y1, x2, y2);

jg.paint();


    /* CALC VALUES: Calculate x-y values. */

    function calcValues( x1,  y1,  x2,  y2) {
	// North or south	
	if (x1 == x2) { 
	    // North
	    if (y2 < y1) arrowCoords(x2,y2,x2-haw,y2+al,x2+haw,y2+al);
	    // South
	    else arrowCoords(x2,y2,x2-haw,y2-al,x2+haw,y2-al);
	    return;
	    }	
	// East or West	
	if (y1 == y2) {
	    // East
	    if (x2 > x1) arrowCoords(x2,y2,x2-al,y2-haw,x2-al,y2+haw);
	    // West
	    else arrowCoords(x2,y2,x2+al,y2-haw,x2+al,y2+haw);
	    return;
	    }
	// Calculate quadrant
	
	calcValuesQuad(x1,y1,x2,y2);
	}

    /* CALCULATE VALUES QUADRANTS: Calculate x-y values where direction is not
    parallel to eith x or y axis. */
    
   function calcValuesQuad( x1,  y1,  x2, y2) { 

	arrowAng = 180.0 / Math.PI * (Math.atan( haw/ al));
	dist = Math.sqrt(al*al + aw);
	lineAng = 180.0 /Math.PI *(Math.atan((Math.abs(x1-x2))/
                            ( Math.abs(y1-y2))));
				
	// Adjust line angle for quadrant
	if (x1 > x2) {
	    // South East
	    if (y1 > y2) lineAng = 180.0-lineAng;
	    }
	else {
	    // South West
	    if (y1 > y2) lineAng = 180.0+lineAng;
	    // North West
	    else lineAng = 360.0-lineAng;
	    }
	
	// Calculate coords
	
	xValues[0] = x2;
	yValues[0] = y2;	
	calcCoords(1,x2,y2,dist,lineAng-arrowAng);
	calcCoords(2,x2,y2,dist,lineAng+arrowAng);
	}
    
    /* CALCULATE COORDINATES: Determine new x-y coords given a start x-y and
    a distance and direction */
    
    function calcCoords( index,  x, y,  dist, 
    		 dirn) {
	
	while(dirn < 0.0)   dirn = 360.0+dirn;
	while(dirn > 360.0) dirn = dirn-360.0;
	
		
	// North-East
	if (dirn <= 90.0) {
	    xValues[index] = x +  (Math.sin(toRadians(dirn))*dist);
	    yValues[index] = y -  (Math.cos(toRadians(dirn))*dist);
	    return;
	    }
	// South-East
	if (dirn <= 180.0) {
	    xValues[index] = x +  (Math.cos(toRadians(dirn-90))*dist);
	    yValues[index] = y +  (Math.sin(toRadians(dirn-90))*dist);
	    return;
	    }
	// South-West
	if (dirn <= 90.0) {
	    xValues[index] = x -  (Math.sin(toRadians(dirn-180))*dist);
	    yValues[index] = y +  (Math.cos(toRadians(dirn-180))*dist);
	    }
	// Nort-West    
	else {
	    xValues[index] = x -  (Math.cos(toRadians(dirn-270))*dist);
	    yValues[index] = y -  (Math.sin(toRadians(dirn-270))*dist);
	    }
	}      
    
    // ARROW COORDS: Load x-y value arrays */
    
    function arrowCoords( x1, y1, x2, y2, x3, y3) {
        xValues[0] = x1;
	yValues[0] = y1;
	xValues[1] = x2;
	yValues[1] = y2;
	xValues[2] = x3;
	yValues[2] = y3;
	}
     function toRadians(deg) {
	return Math.PI / 180.0 * deg;
     }

}<!--vicweb01-->