//
// This work is licensed under the Creative Commons Attribution 2.5 License. To 
// view a copy of this license, visit
// http://creativecommons.org/licenses/by/2.5/
// or send a letter to Creative Commons, 543 Howard Street, 5th Floor, San
// Francisco, California, 94105, USA.
//
// All copies and derivatives of this source must contain the license statement 
// above and the following attribution:
//
// Author: Ted Mielczarek	http://ted.mielczarek.org/
// Author: Kyle Scholz		http://kylescholz.com/
// Copyright: 2006
//

/**
 * SVGGraphView:
 * 
 * Represents a view on a GraphModel.
 */
var SVGGraphView = function( model, frameLeft, frameTop ) {
	this.initialize( model, frameLeft, frameTop );
};
SVGGraphView.prototype = {

	/*
	 * 
	 */
	initialize: function( model, frameLeft, frameTop ) {

		this['nodes'] = {};

		// Store properties of edges (ie: visibility)
		this['edges'] = {};
		this['model'] = model;
		this['frameLeft'] = frameLeft;
		this['frameTop'] = frameTop;
		
	    this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
	    this.svg.setAttribute("version", "1.1");
	    this.svg.setAttribute("width", this.model.frameWidth);
	    this.svg.setAttribute("height", this.model.frameHeight);

		this.eg = document.createElementNS("http://www.w3.org/2000/svg", "g");
    	this.svg.appendChild(this.eg);
    	this.ng = document.createElementNS("http://www.w3.org/2000/svg", "g");
    	this.svg.appendChild(this.ng);

		// There's no requirement that a "frame" element already exists on the page. Make one.
		var frame = document.createElement("div");
		frame.style.position = "absolute";
		frame.style.left=frameLeft + 'px';
		frame.style.top=frameTop + 'px';
		frame.style.width=this.model.frameWidth;
		frame.style.height=this.model.frameHeight;
	
		document.body.appendChild( frame );
		frame.appendChild(this.svg);
	},

	/*
	 * 
	 */
	addNode: function( node, domElement ) {
		var domNode = domElement;

//		domNode.style.width = 0;
//		domNode.style.height = 0;

		this.ng.appendChild(domNode);
		this.nodes[node.id] = domNode;

		domNode.style.left = (node['position']['x'] - parseInt(domNode['offsetWidth']/2) + this.frameLeft) + 'px';
		domNode.style.top = (node['position']['y'] - parseInt(domNode['offsetHeight']/2) + this.frameTop) + 'px';
		domNode.style.zIndex = 10;

		return domNode;
	},

	/*
	 * 
	 */
	addEdge: function( nodeI, nodeJ, visible ) {

		if ( !this['edges'][nodeI.id] ) {
			this['edges'][nodeI.id]={};
		}

		var edge = document.createElementNS("http://www.w3.org/2000/svg", "line");
		edge.setAttribute('stroke', 'gray');
		edge.setAttribute('stroke-width', '2px');
		edge.setAttribute('stroke-dasharray', '2,8');

		this.edges[nodeI.id][nodeJ.id] = edge;
		edge.id = 'edge'+nodeI.id+':'+nodeJ.id;
		this.eg.appendChild(edge);

		if ( !this['edges'][nodeI.id][nodeJ.id] ) {
			this['edges'][nodeI.id][nodeJ.id] = {};
			this['edges'][nodeI.id][nodeJ.id]['domEdge'] = edge;
			this['edges'][nodeI.id][nodeJ.id]['visible'] = visible;
		} else {
			this['edges'][nodeI.id][nodeJ.id]['domEdge'] = edge;
				this['edges'][nodeI.id][nodeJ.id]['visible'] = visible;
		}
	},
	
	/*
	 * 
	 */
	drawNode: function( node ) {
 
		var domNode = this['nodes'][node.id];
		if(domNode.localName == 'circle') {
			domNode.setAttribute('cx', node['position']['x'] + 'px');
			domNode.setAttribute('cy', node['position']['y'] + 'px');
		} else {
			var textHeight = 10;
			var textOffset = 0;
			if ( domNode.getAttribute('offsetLeft') ) {
				textOffset = parseInt(domNode.getAttribute('offsetLeft'));
			}
			domNode.setAttribute('x', node['position']['x'] + textOffset + 'px');
			domNode.setAttribute('y', node['position']['y'] + parseInt(textHeight/2) + 'px');
		}
		for ( var i=0; i<node.edges.length; i++ ) {
			if ( this['edges'][node.id] && this['edges'][node.id][node.edges[i].id] ) {
				this.drawEdge( node, node.edges[i] );
			}
		}
	},
	
	/*
	 *
	 */
	drawEdge: function ( nodeI, nodeJ ) {
		if ( this['edges'][nodeI.id][nodeJ.id]['visible'] ) {
			var edge = this.edges[nodeI.id][nodeJ.id]['domEdge'];
			edge.setAttribute('x1', nodeI.position.x + 'px');
			edge.setAttribute('y1', nodeI.position.y + 'px');
			edge.setAttribute('x2', nodeJ.position.x + 'px');
			edge.setAttribute('y2', nodeJ.position.y + 'px');
		}
	}
}
SVGGraphView.extend(GraphView);