//
// 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/
// Copyright: 2006
//
function SVGGraphUI() {}

SVGGraphUI.prototype = {
  initialize: function( frame, origin, displayOriginEdges, displayEdges ) {
    this.frame=frame;    // frame dom object
    this.frame_top=parseInt(frame.style.top);
    this.frame_left=parseInt(frame.style.left);
    // switch for displaying origin edges
    this['displayOriginEdges'] = true;
    if ( displayOriginEdges != null ) {
      this['displayOriginEdges'] = displayOriginEdges;
    }

    // switch for displaying non-origin edges
    this['displayEdges'] = true;
    if ( displayEdges != null ) {
      this['displayEdges'] = displayEdges;
    }

    this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    this.svg.setAttribute("version", "1.1");
    this.svg.setAttribute("width", frame.style.width);
    this.svg.setAttribute("height", frame.style.height);

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

    this.origin = document.createElementNS("http://www.w3.org/2000/svg", "circle");
    this.origin.setAttribute('cx', 0 + 'px');
    this.origin.setAttribute('cy', 0 + 'px');
    this.origin.setAttribute('r', 1 + 'px');
    this.origin.setAttribute('stroke', 'black');
    this.origin.setAttribute('stroke-width', '1px');
    this.origin.setAttribute('fill', 'red');
    
    if(this['displayOriginEdges'])
      this.ng.appendChild(this.origin);

    frame.appendChild(this.svg);

    this.nodes = [];
    this.edges = [];
  },

  // draw all nodes
  drawNodes: function() {
    // tsk tsk, graph is in global scope!
    for( var i=0; i<graph['nodes'].length; i++ ) {
      var node = graph['nodes'][i];
      this.setNodePos(this.nodes[node.id], node);
    }
  },

  setNodePos: function(domNode, node) {
    if(domNode.localName == 'circle') {
      domNode.setAttribute('cx', parseInt(node.position.x) + 'px');
      domNode.setAttribute('cy', parseInt(node.position.y) + 'px');
      domNode.setAttribute('r', this.nodeRadius(node) + 'px');

      if (domNode.style.background) {
        domNode.setAttribute('fill', domNode.style.background);
      }
      if (domNode.style.border) {
        var b = domNode.style.border.replace(/\s*\d+px\s*\w+\s*/,'');
        domNode.setAttribute('stroke', b);
        b = domNode.style.border.match(/\d+px/);
        domNode.setAttribute('stroke-width', b);
      }
    }
    else { // text
      domNode.setAttribute('x', parseInt(node.position.x) + 'px');
      domNode.setAttribute('y', parseInt(node.position.y) + 'px');
    }
  },

  drawEdges: function() {
    for( var i=0; i<graph.nodes.length; i++ ) {
      if ( this['displayOriginEdges'] ) {
        if ( graph.originEdges[i] ) {
          var nodeI = graph.getNode(i);
          this.setEdgePos(this.edges[nodeI.id][graph.origin.id],nodeI,graph.origin);
        }
      }

      if ( this['displayEdges'] ) {
        for( var j=0; j<graph.nodes.length; j++ ) {
          if ( graph.edges[i] && graph.edges[i][j] ) {
            var nodeI = graph.getNode(i);
            var nodeJ = graph.getNode(j);
            this.setEdgePos(this.edges[nodeI.id][nodeJ.id],nodeI,nodeJ);
          }
        }
      }
    }
  },

  setEdgePos: function( edge, nodeI, nodeJ ) {
    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');
  },

  setOriginText: function( text ) {
  },

  nodeRadius: function( node ) {
    return( node.mass*4 );
  },
  
  drawFrame: function( frame_width, frame_height ) {
    this['frame_width']=frame_width;
    this['frame_height']=frame_height;
    this.frame.style.width=frame_width;
    this.frame.style.height=frame_height;
  },

  drawOrigin: function( node ) {
    this.setNodePos(this.origin, node);
  },

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

    if(!(nodeI.id in this.edges)) {
      this.edges[nodeI.id] = [];
    }
    this.edges[nodeI.id][nodeJ.id] = edge;
    edge.id = 'edge'+nodeI.id+':'+nodeJ.id;
    this.eg.appendChild(edge);
  },

  addNode: function ( node, text) {
    var domNode;

    if (text) {
      domNode = document.createElementNS("http://www.w3.org/2000/svg", "text");

      domNode.setAttribute('text-anchor', 'middle');
      domNode.appendChild(document.createTextNode(text));
    }
    else {
      domNode = document.createElementNS("http://www.w3.org/2000/svg", "circle");
      domNode.setAttribute('stroke', 'black');
      domNode.setAttribute('stroke-width', '2px');
      domNode.setAttribute('fill', 'blue');
      
    }
    domNode.style.width = 0;
    domNode.style.height = 0;

    this.setNodePos(domNode, node);
    domNode.id = 'node'+node.id;
    this.ng.appendChild(domNode);
    this.nodes[node.id] = domNode;
  },

  getNode: function( nodeId ) {
    if ( nodeId == 'origin' ) {
      return this.origin;
    }
    return this.nodes[nodeId];
  },
  
};