var svgns = 'http://www.w3.org/2000/svg';
var svgDoc;
var svg_tooltip;
var svg_status;
var svg_statusX;
var svg_statusY;
var svg_DocData;
var svg_width;
var svg_height;

function svg_setStatusLocation(x, y) {
	svg_statusX = x;
	svg_statusY = y;
}
function svg_mainInit(e) {
	svgDoc = window.svgDocument;
	if ( !svgDoc ) {
		svgDoc = e.target.ownerDocument;
	}
}
function svg_drawCorrMatrix(evt, x, y, numRow, numCol, width, height, caDataString) {
	var dataSeparator = ';';
	var valueSeparator = ',';
	var cnt = 0;
	var caDataList = caDataString.split(dataSeparator);	
  	var root = svg_createElement(svgDoc.documentElement, 'g');
	root.addEventListener('mouseout', svg_hideTooltip, false); 	
	for (var i=0; i<numRow; i++) {
		for (var j=0; j<numCol; j++) {
			if ( cnt >= caDataList.length ) {
				return;
			}
			var data = caDataList[cnt].split(valueSeparator);
			svg_makeRect(evt, root, x+j*width, 1*(y+i*height), width, height, data[0], data[1]);
			cnt++;
		}
	}
}

function svg_makeRect(evt, root, x, y, w, h, label, fill) {
    var rect = svgDoc.createElementNS(svgns, 'rect');
    rect.setAttribute('x', x);
    rect.setAttribute('y', y);
    rect.setAttribute('width',  w);
    rect.setAttribute('height', h);
    rect.setAttribute('fill', fill); 
    rect.setAttribute('label', label); 
	rect.setAttribute('stroke', fill);   
 	rect.addEventListener("mouseover", svg_showTooltip, false); 	
    return root.appendChild(rect);
}

function svg_createElement(parent, type) {
	var newElement = svgDoc.createElementNS(svgns, type);
	if ( parent ) {
		parent.appendChild(newElement);
	}
	return newElement;
}

function svg_createCircle(parent, cx, cy, r, fill, stroke, label) {
	var circle = svg_createElement(parent, 'circle');
	circle.setAttribute('cx', cx); 
	circle.setAttribute('cy', cy); 
	circle.setAttribute('r', r); 
	if ( fill ) {
		circle.setAttribute('fill', fill); 	
	}
	if ( stroke ) {
		circle.setAttribute('stroke', stroke); 	
	}	
	if ( label ) {
		circle.setAttribute('label', label); 	
		circle.addEventListener("mouseover", svg_showTooltip, false); 
	}
	return circle;
}

function svg_createArrow(parent, x, y, fill, stroke) {
	var arrow = svg_createElement(parent, 'path');
	arrow.setAttribute('x', x); 
	arrow.setAttribute('y', y); 
	
	var d = 'M';
	d += ' ' + x + ' ' +  y;
	arrow.setAttribute('d', d); 		
	if ( fill ) {
		arrow.setAttribute('fill', fill); 	
	}
	if ( stroke ) {
		arrow.setAttribute('stroke', stroke); 	
	}	
	return arrow;
}


function svg_createText(parent, value, x, y, fill, textAnchor, fontSize) {
	var text = svg_createElement(parent, 'text');	
	text.appendChild(svgDoc.createTextNode(value));	
	text.setAttribute('x', x); 
	text.setAttribute('y', y); 
	if ( fill ) {
		text.setAttribute('fill', fill); 	
	}	
	if ( textAnchor ) {
		text.setAttribute('text-anchor', textAnchor); 
	}
	if ( fontSize ) {
		text.setAttribute('font-size', fontSize); 
	}
	return text;
}

function svg_createLine(parent, x1, y1, x2, y2, stroke, strokeWidth, label) {
	var line = svg_createElement(parent, 'line');
	line.setAttribute('x1', x1);
	line.setAttribute('y1', y1);
	line.setAttribute('x2', x2);
	line.setAttribute("y2", y2);
	if ( stroke ) {
		line.setAttribute('stroke', stroke);	
	}
	if ( strokeWidth ) {
		line.setAttribute('stroke-width', strokeWidth);	
	}
	if ( label ) {
		line.setAttribute('label', label);	
	}		
	return line;
}

function Tooltip(fontSize) {
   this.fontSize = fontSize; 
   
   this.g = svg_createElement(svgDoc.documentElement, 'g'),
   this.g.setAttribute('transform', 'translate(0,0)');
   this.g.setAttribute('visibility', 'hidden');
   
   this.rect = svg_createElement(this.g, 'rect');
   this.rect.setAttribute('y', -0.9*this.fontSize);
   this.rect.setAttribute('x', -0.25*this.fontSize);
   this.rect.setAttribute('width', '1');
   this.rect.setAttribute('height', 1.7*this.fontSize);
   this.rect.setAttribute('stroke-width', '1');
   this.rect.setAttribute('stroke', 'black');
   this.rect.setAttribute('fill', '#FFFFFF');
  
   this.text = svg_createElement(this.g, 'text');
   this.text.setAttribute('font-family', 'Arial');
   this.text.setAttribute('font-size', this.fontSize + '');
   this.text.setAttribute('fill', 'black');
   this.text.setAttribute('text-anchor', 'start');
   this.text.setAttribute('dominant-baseline', 'mathematical');
   this.tip = svgDoc.createTextNode('');
   this.text.appendChild(this.tip);

   svg_updateTooltipData(this);
}

function svg_updateTooltipData(tooltip) {
	if ( !svg_DocData ) {		
       svg_DocData = {
            x_trans: 0,
            y_trans: 0,
            zoom   : 1,
            x_scale: 1,
            y_scale: 1
        };
		var SVGRoot = svgDoc.documentElement;
		var trans = SVGRoot.currentTranslate;
		var scale = SVGRoot.currentScale;
		svg_DocData.x_trans = ( 0.0 - trans.x ) / scale;
		svg_DocData.y_trans = ( 0.0 - trans.y ) / scale;
		svg_DocData.zoom = scale;
		svg_DocData.x_scale = 1 / scale;
		svg_DocData.y_scale = 1 / scale;
		var vbox = SVGRoot.getAttributeNS(null, "viewBox");
		if ( vbox ) {
			var params  = vbox.split(/\s+/);
			var h_scale = window.innerWidth  / params[2];
			var v_scale = window.innerHeight / params[3];
			svg_DocData.x_trans = svg_DocData.x_trans / h_scale + parseFloat(params[0]);
			svg_DocData.y_trans = svg_DocData.y_trans / v_scale + parseFloat(params[0]);
			svg_DocData.x_scale = svg_DocData.x_scale / h_scale;
			svg_DocData.y_scale = svg_DocData.y_scale / v_scale;
    	}         
	}
	var trans = "translate(" + svg_DocData.x_trans + "," + svg_DocData.y_trans + ")"
    var scale = "scale(" + 1/svg_DocData.zoom + "," + 1/svg_DocData.zoom + ")";
    tooltip.g.setAttribute("transform", trans + " " + scale);	
	
	return svg_DocData;
}
function svg_showTooltip(evt) {
	var label;
	if ( evt.target ) {
		label = evt.target.getAttribute('label');
	}
	if ( !label ) {
		return;
	}
	
	if ( !svg_tooltip ) {
		svg_tooltip = new Tooltip(12);
	}
	label = ' ' + label;		
	svg_tooltip.tip.nodeValue = label;
	if ( svg_tooltip.text.getComputedTextLength ) {
		var width = svg_tooltip.text.getComputedTextLength() + 0.5*svg_tooltip.fontSize;
		svg_tooltip.rect.setAttribute('width', width + 2); 		          
	}
	 
    var x = evt.clientX * svg_DocData.x_scale + svg_DocData.x_trans + 10;
    var y = evt.clientY * svg_DocData.y_scale + svg_DocData.y_trans;            
    svg_tooltip.rect.setAttribute("x", x);
    svg_tooltip.rect.setAttribute("y", y);   
    svg_tooltip.text.setAttribute("x", x+4);
    svg_tooltip.text.setAttribute("y", y+13);                         
    svg_tooltip.g.setAttribute('visibility', 'visible'); 
	
    svg_showStatus(evt);
}

function svg_hideTooltip(evt) {
	if ( !svg_tooltip ) {
		return;
	}
	svg_tooltip.g.setAttribute('visibility', 'hidden');  
	svg_hideStatus(evt);
}

function svg_showStatus(evt) {
	if ( !svg_status ) {
		svg_status = new Tooltip(18);
		if ( !svg_statusX ) {
			svg_statusX = 5;
		}
		if ( !svg_statusY ) {
			svg_statusY = svg_height - 50;
		}		
		svg_status.rect.setAttribute('height', 2.5*svg_status.fontSize);
	    svg_status.rect.setAttribute("x", svg_statusX);
	    svg_status.rect.setAttribute("y", svg_statusY);  
	    svg_status.rect.setAttribute('fill', '#FFFFCC');  
	    svg_status.text.setAttribute("x", svg_statusX+4);
	    svg_status.text.setAttribute("y", svg_statusY+25);     
	  
	}
	
	var label;
	if ( evt.target ) {
		label = evt.target.getAttribute('label');
	}
	if ( !label ) {
		return;
	}	
	
	label = ' ' + label;		
	svg_status.tip.nodeValue = label;
	if ( svg_status.text.getComputedTextLength ) {
		var width = svg_status.text.getComputedTextLength() + 0.5*svg_status.fontSize;
		svg_status.rect.setAttribute('width', width + 2);                          
	}
    svg_status.g.setAttribute('visibility', 'visible'); 	
}

function svg_setWidthAndHeight(width, height) {
	svg_width = width;
	svg_height = height;
}

function svg_hideStatus(evt) {
	if ( !svg_status ) {
		return;
	}
	svg_status.g.setAttribute('visibility', 'hidden');  
}