//
// 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: Kyle Scholz      http://kylescholz.com/
// Copyright: 2006
//

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

	/*
	 * 
	 */
	addNode: function( node, domElement ) {
		var domNode = domElement;
		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;
		document.body.appendChild( domNode );
		
		this['nodes'][node.id]=domNode;
		return domNode;
	},

	/*
	 * 
	 */
	addEdge: function( nodeA, nodeB, visible ) {
      if ( !this['edges'][nodeA.id] ) {
      	this['edges'][nodeA.id]={};
      }
      this['edges'][nodeA.id][nodeB.id]=visible;
	},
	
	/*
	 * 
	 */
	drawNode: function( node ) {
		var domNode = this['nodes'][node.id];

		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';

		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.edges[i], node );
			}
		}
	},
	
	/*
	 *
	 */
	drawEdge: function ( nodeI, nodeJ ) {

		// edges should appear between center of nodes
		var centeri = new Object();
		centeri['x'] = nodeI['position']['x'];
		centeri['y'] = nodeI['position']['y'];

		var centerj = new Object();
		centerj['x'] = nodeJ['position']['x'];
		centerj['y'] = nodeJ['position']['y'];

		// get a distance vector between nodes
		var distance = new Distance( centeri, centerj );

		// draw line
		var l = 8;
		for ( var k=1; k<l; k++ ) {
			var p = (distance['d'] / l) * k;
			var pix;

			try {
				// dom updates are expensive ... recycle where we can
				if ( !document.getElementById( 'edge' + nodeI.id + ':' + nodeJ.id ) ) {
					var edge = document.createElement("div");
					edge.id = 'edge'+nodeI.id+':'+nodeJ.id;
					document.body.appendChild(edge);
				}
			  
				if ( !document.getElementById('edge' + nodeI.id + ':' + nodeJ.id + ':' + k) ) {
					pix = pixTmpl.cloneNode(true);
					pix.id = 'edge' + nodeI.id + ':' + nodeJ.id + ':' + k;
					document.getElementById('edge' + nodeI.id + ':' + nodeJ.id).appendChild(pix);
				} else {
					pix = document.getElementById('edge' + nodeI.id + ':' + nodeJ.id + ':' + k);
				}
				pix.style.left=centeri['x'] +(-1)*p*(distance['dx']/distance['d']) + this.frameLeft + 'px';
				pix.style.top=centeri['y'] +(-1)*p*(distance['dy']/distance['d']) + this.frameTop + 'px';
			} catch ( e ) {

			}
		}
	},
	
	getNode: function( id ) {
		return( nodes[id] );
	}
}
DOMGraphView.extend(GraphView);

// Edge Point Template
var pixTmpl = document.createElement( 'div' );
pixTmpl.style.width = '2px';
pixTmpl.style.height = '2px';
pixTmpl.style.backgroundColor = '#888888';
pixTmpl.style.position = 'absolute';
pixTmpl.innerHTML="<img height=1 width=1/>";