// A HTML widget for showing 3 North pointers, Grid, True and Magnetic


 
function BdccNorthWidget(div, gridColour, magColour, trueColour, backColour) {

	this.gridColour = gridColour || "#000000";
	this.magColour = magColour || "#FF0000";
	this.trueColour = trueColour || "#0000FF";
	this.backColour = backColour || null;
	this.container = div;
}

BdccNorthWidget.prototype.destroy = function() {
  if((this.div != null)&&(this.container != null))
	   this.container.removeChild(this.div);
  
}

BdccNorthWidget.prototype.draw = function(convergence, declination) {

	//origin for all 3 north lines is centre bottom + 10% of height
	
	this.destroy(); 
	this.div = document.createElement("DIV");
    this.container.appendChild(this.div);
	this.div.style.position='absolute';
	this.div.style.width = this.container.offsetWidth + 'px';
	this.div.style.height = this.container.offsetHeight + 'px';
	this.div.style.top = 0 + 'px';
	this.div.style.left = 0 + 'px';
	this.div.style.border = '0px';
	if(!this.backColour)
	    this.div.style.background = 'none';	
	else
	    this.div.style.background = this.backColour;	
		

    
    //draw reference line - grid north
    var title = "Grid North";
	var p1x = this.div.offsetWidth / 2;
	var p1y = this.div.offsetHeight * 0.9;
	var p2y = this.div.offsetHeight * 0.1;
	var l = p1y - p2y;
	var p2x = p1x;
    
    this.buildLine(this.div,p2x,p2y-1,p1x,p1y,this.gridColour,2,0.99,title);
    this.buildLine(this.div,p2x,p2y,p2x-5,p2y+8,this.gridColour,2,0.99,title);
    this.buildLine(this.div,p2x+1,p2y,p2x+6,p2y+8,this.gridColour,2,0.99,title);

    //When convergence is +ve, True north is West of Grid north.
    var label;
    var d;
    var m;
    if(convergence >= 0){
        title = "True North is " + convergence.toFixed(2) + " degrees West of Grid North";
        d = Math.floor(convergence);
        m = Math.round((convergence - d)*60.0); 
        if (m < 10)
            m = '0' + m.toString();
        label = d+ "W" + m + "'";
    }
    else{
        title = "True North is " + (-convergence.toFixed(2)) + " degrees East of Grid North";
        d = Math.floor(-convergence);
        m = Math.round(((-convergence) - d)*60.0); 
        if (m < 10)
            m = '0' + m.toString();
        label = d+ "E" + m + "'";
    }
    var theta = convergence*Math.PI/45.0; // scale x 4
    p2x = Math.round(p1x - (l * 0.9 * Math.sin(theta)));
    p2y = Math.round(p1y - (l * 0.9 * Math.cos(theta)));
    this.buildLine(this.div,p2x,p2y,p1x,p1y,this.trueColour,1,0.99,title);
                
    theta -= Math.PI/6;
    var hdx1 = Math.round(8*Math.sin(theta));
    var hdy1 = Math.round(8*Math.cos(theta));
    theta += Math.PI*2/6;
    var hdx2 = Math.round(8*Math.sin(theta));
    var hdy2 = Math.round(8*Math.cos(theta));
    this.buildLine(this.div,p2x,p2y,p2x+hdx1,p2y+hdy1,this.trueColour,1,0.99,title);
    this.buildLine(this.div,p2x,p2y,p2x+hdx2,p2y+hdy2,this.trueColour,1,0.99,title);
                
                
	var dv = document.createElement("DIV");
	this.div.appendChild(dv);
	dv.style.position = "absolute";
	dv.style.border = "none";
	dv.style.padding = '1px';
	dv.style.color = this.trueColour;
	dv.style.background = "#8F8F8F";
	dv.style.fontFamily='Arial, Helvetica, sans-serif';
	dv.style.fontSize='8pt';
	dv.innerHTML = label;
	dv.style.left = "0px";
	dv.title = title;
	dv.style.top = this.div.offsetHeight - dv.offsetHeight + 'px';    
        
    //When declination is +ve, Magnetic North is East of True North
    var mag2Grid = convergence - declination;
    if(mag2Grid >= 0){
        title = "Magnetic North is " + mag2Grid.toFixed(2) + " degrees West of Grid North";
        label = mag2Grid.toFixed(2) + "W";
        d = Math.floor(mag2Grid);
        m = Math.round((mag2Grid - d)*60.0); 
        if (m < 10)
            m = '0' + m.toString();
        label = d+ "W" + m + "'";
    }
    else{
        title = "Magnetic North is " + (-mag2Grid.toFixed(2)) + " degrees East of Grid North";
        d = Math.floor(-mag2Grid);
        m = Math.round(((-mag2Grid) - d)*60.0); 
        if (m < 10)
            m = '0' + m.toString();
        label = d+ "E" + m + "'";
    }
    theta = mag2Grid*Math.PI/45.0;//scale x 4
    p2x = Math.round(p1x - (l * 0.8 * Math.sin(theta)));
    p2y = Math.round(p1y - (l * 0.8 * Math.cos(theta)));    
    this.buildLine(this.div,p2x,p2y,p1x,p1y,this.magColour,1,0.99,title);    

    theta -= Math.PI/6;
    var hdx1 = Math.round(8*Math.sin(theta));
    var hdy1 = Math.round(8*Math.cos(theta));
    theta += Math.PI*2/6;
    var hdx2 = Math.round(8*Math.sin(theta));
    var hdy2 = Math.round(8*Math.cos(theta));
    this.buildLine(this.div,p2x,p2y,p2x+hdx1,p2y+hdy1,this.magColour,1,0.99,title);
    this.buildLine(this.div,p2x,p2y,p2x+hdx2,p2y+hdy2,this.magColour,1,0.99,title);


	var dv = document.createElement("DIV");
	this.div.appendChild(dv);
	dv.style.position = "absolute";
	dv.style.border = "none";
	dv.style.padding = '1px';
	dv.style.color = this.magColour;
	dv.style.fontFamily='Arial, Helvetica, sans-serif';
	dv.style.fontSize='8pt';
	dv.style.background = "#8F8F8F";
	dv.innerHTML = label;
	dv.style.top = this.div.offsetHeight - dv.offsetHeight + 'px'; 
	dv.style.left = this.div.offsetWidth - dv.offsetWidth + 'px'; 
	dv.title = title;

}




//Create a div holding a set of horz and vert line segments making up the line between p1 and p2
//Uses this.sx,sy,ex,ey,steep

BdccNorthWidget.prototype.buildLine = function(cntnr,x0,y0,x1,y1,colour,width,opacity,title) {

 
  //Bresenham algorithm for line drawing see - wikipedia

  this.steep = false;
  if(Math.abs(y1 - y0) > Math.abs(x1 - x0))
	this.steep = true;
    
  if (this.steep){
		 var t = x0;
		 x0 = y0;
		 y0 = t;
		 
		 t = x1;
		 x1 = y1;
		 y1 = t;
  }
  if (x0 > x1){
		 var t = x0;
		 x0 = x1;
		 x1 = t;

		 t = y0;
		 y0 = y1;
		 y1 = t;
  }

  var deltax = x1 - x0;
  var deltay = Math.abs(y1 - y0);
  var error = 0;
  var ystep;
  var y = y0;
  
  if (y0 < y1)
	ystep = 1; 
  else 
	ystep = -1;
	

  //start and end coords of each horz/vertical line segment
  //We want to use the min of divs


  //initial coord of first line segment  
  if (this.steep){ 
     this.sx = y0;
     this.sy = x0;
  } 
  else{ 
     this.sy = y0;
     this.sx = x0;
  }


  var div = null;//a div whose background is a horz or vert line segment
  var last = false;//force last plot 
      
  //main Bresenham loops
  if (this.steep){ 
      for( var x = x0; x <= x1; x++){
    		 
	     if (x == x1)
		    last = true;
			
         div = this.plotLinePoint(y,x,last,colour,width,opacity,title); 

	     if(div != null)
		    cntnr.appendChild(div);
         //else point being held over until horz/vert segment ends 
    
         error = error + deltay;
         if ((2*error) >= deltax){
             y = y + ystep;
             error = error - deltax;
         }
      }  
  }
  else{
      for( var x = x0; x <= x1; x++){
    		 
	     if (x == x1)
		    last = true;
			
         div = this.plotLinePoint(x,y,last,colour,width,opacity,title);

	     if(div != null)
		    cntnr.appendChild(div);
         //else point being held over until horz/vert segment ends 
    
         error = error + deltay;
         if ((2*error) >= deltax){
             y = y + ystep;
             error = error - deltax;
         }        
      }    
   }
}


//Plot a point that is part of a horizontal or vertical line
//only emit a div if a horz or vert segment has been completed.
//Uses this.sx,sy,ex,ey,steep

BdccNorthWidget.prototype.plotLinePoint = function(x,y,last,colour,width,opacity,title) {
	     
		 this.ey = y;//end coords of line segment
		 this.ex = x;
		 var w2 = width / 2;

		 if((x == this.sx)&&(!last))
			return null;//same x coord as last point
		 if((y == this.sy)&&(!last))
			return null;//same y coord as last point

		 		 
		 //swap start and end to get +ve width and height
		 var ox = this.ex;
		 if(this.ex < this.sx){
			var t = this.ex;
			this.ex = this.sx;
			this.sx = t;
		 } 		 

		 var oy = this.ey;
		 if(this.ey < this.sy){
			var t = this.ey;
			this.ey = this.sy;
			this.sy = t;
		 } 	
		 
		 //establish width/height of div
		 var w = this.ex - this.sx;
		 var h = this.ey - this.sy;
		 
		 var x = this.sx;
		 var y = this.sy;
         if(this.steep){
            w = width;
            x -= w2;//centre the line segment according to the line width
            }
         else{
            h = width;
            y -= w2;//centre the line segment according to the line width
            }

	     this.sx = ox;//restore original bresenham coords of segment start
	     this.sy = oy;
		 
         //actually make the div		 		 
		 var div = document.createElement("DIV");
		 div.title = title;
	     var ds = div.style;
	     
	     ds.position = "absolute";
	     ds.overflow = "hidden";
	     ds.backgroundColor = colour;
	     ds.left = x + "px";
	     ds.top = y + "px";
	     ds.width = w + "px";
	     ds.height = h + "px";
	     	     
	     if(opacity != 1.0){
	        ds.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=" + Math.round(opacity * 100) +")";
	        ds.opacity = opacity;
	     }
	     	     
	     return div;
}