// DOMVectorTest.js
//  -----------------------------------------------------
// <p>Title: DOMVectorTest.</p>
// <p>Description: test of an autoscaling DOMGraphic in Javascript creating svg-elements to XHTML</p>
// <p>Copyright: Copyright (c) 2008 - 2010</p>
// <p>Company: SiG Software Integration GmbH</p>
// <p>Author Dr. Horst Walther</p>
// <p>Version 0.5</p>
//  ----------------------------------------------------------------------------

//  ----------------------------------------------------------------------------
function DOMVectorTest() {
  var wordy = false;
  var idText = 'DOMGraphic';
  var CIRCLE = 9;
  var isDown = false;
  var lastX, lastY;
  var downId = '';
  var DOMGraphicNodes = new Array;
  var nodeIndex = new Array;
  var nodeIDs = new Array;

  var RED = '#ff0000';
  this.DOMGraphicText = new Array();
  this.DOMGraphicType = 0;
  this.dateTimeDOMGraphicType = 1;
  this.titleText = '';
  this.headerText = 'DOM vector graphics';
  this.id = 'DOMVectorTest';
  this.DOMGraphs = new Array();

  var circ01;
  var down = false
  var lastX, lastY
  var tx = 0, ty = 0

//  -------------------------------------------------------------------------->
  this.setData = function () {
    return this;
 };

//  -------------------------------------------------------------------------->
  this.init = function (wnd, id, width, height, fill, opacity) {
    this.setData ();
    this.createDialog('dialog', this.headerText);
    this.initForm (0);
    document.g = new jsGraphics().init(wnd, id); 
    this.showFunction();
    document.dragger = new Drag();
    document.dragger.init('header1', 'panelDialog');
    return this;
};

//  -------------------------------------------------------------------------->
  this.add = function (node) {
    return document.g.position.appendChild(document.vectorTest.addDragNdrop(node));
  };

//  -------------------------------------------------------------------------->
  this.getGraphics = function (id) {
//    alert (this.p2d.id);
    return this.p2d.getGraphics().getCanvas(); 
  };

//  ----------------------------------------------------------------------------
  this.createDOMGraphs = function  () {
//    alert (this.id+'.createDOMGraphs ('+p2d.id+', '+DOMGraphicType+', '+text+', '+min+', '+max+', '+DOMGraphicText+', '+textFormatIndex+')');

    document.g.setColor("#ff0000"); // red
    this.add (document.g.fillEllipse(500, 300, 100, 180)); // co-ordinates related to the document
    document.g.setColor("navy"); // red
    var moveNode = this.add (document.g.drawEllipse(500, 300, 100, 180)); // co-ordinates related to the document

    var pathFunction = function (node) {
      this.left = node.style.left ? node.style.left : Math.random() * document.g.width;
      this.top  = node.style.top  ? parseFloat (node.style.top, 10)-1 : document.g.height;
    };
    var speedFunction = function () {return 10}; 
    var startFunction = function () {return 5000};
    var stopFunction  = function () {return parseInt(moveNode.style.top, 10) <= 0};  // -->
    moveNode.move (pathFunction, speedFunction, startFunction, stopFunction)

    document.g.setColor("navy");
    document.g.setStroke(2);
    this.add (document.g.drawPolyline(new Array(700, 700, 750, 800, 850, 900, 950,1000,1000, 700), 
                                      new Array( 75, 100, 125, 100, 125, 100, 125, 100,  75,  75)));

    document.g.setColor("#00ff00"); // green
    document.g.setStroke(5);
    this.add (document.g.drawLine(200, 350, 400, 350)); 

    var rect = this.add (document.g.fillRect(110, 120, 30, 60, '#0000ff', 'red', 1, 0.5));
    rect.className = 'rect';
  
    document.g.setStroke(1);
    document.g.setColor('navy');
    for (var i=0; i< 11; i++) 
      this.add (document.g.drawEllipse(10+10*i*i, 70+10*i, 0+10*i, 100-10*i, 'red', 'blue', 1, 0.5));
    for (var i=0; i< 11; i++) 
      this.add (document.g.drawRect(10+10*i*i, 300-10*i, 0+10*i, 100-10*i, 'yellow', 'navy', 1, 0.5));
    this.add (this.drawLogo(300, 400, 100, 100));
  };

//  ---------------------------------------------------------------------------
  this.drawLogo = function(x0, y0, width, height) {
    document.g.setStroke(1);
    document.g.setColor ('#6699ff');
    var node = new makeDiv(x0, y0, width+document.g.stroke, height+document.g.stroke);
    node.id = 'logoSiG'; 
    node.appendChild (document.g.fillPolygon(new Array(0, 0, width), new Array(0, height, 0), "triangle_blue"));
    document.g.setColor ('#ffbb66');
    node.appendChild (document.g.fillPolygon(new Array(0, width, width), new Array(height, height, 0), "triangle_ocker"));
    node.appendChild (document.g.drawText(width*0.6, height*0.9, 'SiG', null, null, height*0.18, '#ffffff', null, null, 'middle'));
//    node.style.border = '1px solid red';
    return node;
  };

//  ---------------------------------------------------------------------------
  this.updateFunction = function() {
    deleteFunction (); 
    this.showFunction();
  };

//  ---------------------------------------------------------------------------
  this.showFunction = function() {
    this.createDOMGraphs();
  };

//  -------------------------------------------------------------------------->
  this.createDialog = function (containerID, headerText) {

    var dialog = nodeOf (containerID);
    var dialogPanel = new Panel ('Dialog', 'dialog'); dialog.appendChild(dialogPanel);

    var header = new Header ('1', headerText); dialogPanel.appendChild(header); header.ondblclickAction = function () {header.toggleHeight(header)}; 
    var buttonPanel = new Panel ('Button'); dialogPanel.appendChild(buttonPanel); 
    var toDoPanel = new Panel ('toDo'); dialogPanel.appendChild(toDoPanel);  
    var node = document.DOMGraphicNode;

    buttonPanel.appendHeader ('actions:');
    buttonPanel.appendChild (new Button ('drawText', 'draw text', function () {document.vectorTest.add (document.g.drawText(document.g.width*0.5, 50, 'DOM graphic Test', null, null, 28, 'navy', null, null, 'middle'))}));
    buttonPanel.appendChild (new Button ('drawRect', 'draw rect', function () {nodeOf('buttondrawRect').node = document.vectorTest.add (document.g.drawRect(350, 150, 100, 100, '#c3c3c3', 'navy', 1.0))})); 
    buttonPanel.appendChild (new Button ('changeStyle1', 'make red', function () {changeStyle(nodeOf('buttondrawRect'), 'backgroundColor', 'red')}));
    buttonPanel.appendChild (new Button ('changeStyle2', 'make blue', function ()  {changeStyle(nodeOf('buttondrawRect'), 'backgroundColor', 'blue')}));
    buttonPanel.appendChild (new Button ('drawCircle', 'draw circle', function () {nodeOf('buttondrawCircle').node = document.vectorTest.add (document.g.drawCircle(150, 150, 100, 'gray', 1.0)); document.g.setStroke(2);}));
    buttonPanel.appendChild (new Button ('changeStyle4', 'make red', function () {changeStyle(nodeOf('buttondrawCircle'), 'backgroundColor', 'red')}));
    buttonPanel.appendChild (new Button ('changeStyle5', 'make blue', function ()  {changeStyle(nodeOf('buttondrawCircle'), 'backgroundColor', 'blue')}));
    buttonPanel.appendChild (new Button ('changeStyle3', 'relocate circle', function () {document.g.changeCircle (nodeOf('buttondrawCircle').node, Math.random() * (document.g.width-100)+50, Math.random()* (document.g.height-100)+50, 10+Math.random() * 40)}));
    buttonPanel.appendChild (new Button ('letItBubble', 'let it bubble', function () {toggleBubbles (nodeOf('buttonletItBubble'))}));
    buttonPanel.appendChild (new Button ('createLines', 'draw lines', function () {toggleLines(nodeOf('buttoncreateLines'))}));
    buttonPanel.appendChild (new Button ('createRects', 'create rect.', function () {toggleRects (nodeOf('buttoncreateRects'))}));
    buttonPanel.appendChild (new Button ('createCircles', 'create circle', function () {toggleCircles (nodeOf('buttoncreateCircles'))}));
    buttonPanel.appendChild (new Button ('createComb', 'comb. shapes', function () {toggleComb(nodeOf('buttoncreateComb'))}));
    buttonPanel.appendChild (new Button ('showSize', 'window size', function () {showSize()}));
    buttonPanel.appendChild (new Button ("flush", "flush", function () {deleteFunction()})); 
    buttonPanel.appendChild (new Button ("update", "update", function () {document.vectorTest.updateFunction ()})); buttonPanel.appendChild (document.createElement ('br'));

    toDoPanel.appendHeader ('To do list ...');
    toDoPanel.appendListItem ('resize via drag & drop');
    toDoPanel.appendListItem ('prevent bubbling events');
    toDoPanel.appendListItem ('make line2D draggable as well');
    toDoPanel.appendListItem ('introduce 3d DOMGraphic');
  };

//  ---------------------------------------------------------------------------
  changeStyle = function (buttonNode, rule, value) {
    if (!buttonNode) return this;
    var node = buttonNode.node;
    if (!node) node = this.position;
    if (!node) node = buttonNode;
    return document.g.changeStyle (node, rule, value);
  };

//  ---------------------------------------------------------------------------
  toggleButton = function (buttonNode, onText, offText, onFunction, offFunction) {
    buttonNode.isVisible = buttonNode.isVisible==undefined ? false : buttonNode.isVisible;
    buttonNode.node = buttonNode.isVisible ? onFunction() : offFunction();
    buttonNode.firstChild.nodeValue  = buttonNode.isVisible ? offText : onText;
    buttonNode.isVisible = !buttonNode.isVisible;
    return buttonNode.node;
  };

//  ---------------------------------------------------------------------------
  toggleLines = function (buttonNode) {
    return toggleButton (buttonNode, 'delete lines', 'draw lines', function () {return document.vectorTest.remove(buttonNode.node)}, function () {return document.vectorTest.add(createLines(document.g, 100))});
  };

//  ---------------------------------------------------------------------------
  toggleRects = function (buttonNode) {
    return toggleButton (buttonNode, 'delete rects', 'draw rects', function () {return document.vectorTest.remove(buttonNode.node)}, function () {return document.vectorTest.add(createRects(document.g, 100))});
  };

//  ---------------------------------------------------------------------------
  toggleCircles = function (buttonNode) {
    return toggleButton (buttonNode, 'delete circs', 'draw circs', function () {return document.vectorTest.remove(buttonNode.node)}, function () {return document.vectorTest.add(createCircles(document.g, 100))});
  };

//  ---------------------------------------------------------------------------
  toggleBubbles = function (buttonNode) {
    return toggleButton (buttonNode, 'stop bubbles', 'let it bubble', function () {return document.vectorTest.remove(buttonNode.node)}, function () {return document.vectorTest.add(bubbleFunction(document.g, 500))});
  };

//  ---------------------------------------------------------------------------
  toggleComb = function (buttonNode) {
    return toggleButton (buttonNode, 'delete comb', 'draw comb', function () {return document.vectorTest.remove(buttonNode.node)}, function () {return document.vectorTest.add(createComb(document.g))});
  };

//  ---------------------------------------------------------------------------
  deleteFunction = function () {
    return document.vectorTest.remove();
  };

 //  --------------------------------------------------------------------------->
this.initForm = function () {
//  nodeOf('inputIdx').value = i;
//  nodeOf('inputMin').value = this.DOMGraphs[idx].min.toString();
//  nodeOf('inputMax').value = this.DOMGraphs[idx].max.toString();
};

//  ----------------------------------------------------------------------------
  this.drawDOMGraphs = function  () {
//    alert (this.id+'.drawDOMGraphs ()');
	return this;
  };

//  ---------------------------------------------------------------------------->
function show(id, text) {
  return nodeOf(id).firstChild.nodeValue = text == undefined ? '' : id + ': ' + text;
};

//  ----------------------------------------------------------------------------
 this.parsePosition = function(pos) {
  return parseFloat(pos, 10);
};

//  ----------------------------------------------------------------------------
 this.updateDOMGraphic = function(node, i, x1, x2) {
//  alert ('updateDOMGraphic1('+node+', '+i+', '+x1+', '+x2+')');
    show('trace', '### err: could not recale: updateDOMGraphic('+i+', '+x1+', '+x2+') ');
  return DOMGraphic;
};

//  ----------------------------------------------------------------------------
  this.down = function(evt) {
    if(down) return;
    evt = fixEvent(evt);
    document.node = evt.target.id ? evt.target : evt.target.parentNode;
    lastX = evt.clientX;
    lastY = evt.clientY;
    tx = parseInt(document.node.style.left, 10);
    ty = parseInt(document.node.style.top , 10);
    document.onmouseup   = document.vectorTest.up;
    document.onmousemove = document.vectorTest.move;
    show ('trace', 'down on '+document.node.id+' at '+lastX+', '+lastY);
    down = true;
  };

//  ----------------------------------------------------------------------------
  this.move = function (evt){
    if(!down) return;
    evt = fixEvent(evt);
    var x = evt.clientX;
    var y = evt.clientY;
    var dx = x - lastX;
    var dy = y - lastY;
    lastX = x;
    lastY = y;
    tx += dx;
    ty += dy;
    document.node.style.left = Math.max(0, tx) + 'px';
    document.node.style.top  = Math.max(0, ty) + 'px';
    show ('trace', 'move '+document.node.id+' to: '+tx+', '+ty);
  };

//  ----------------------------------------------------------------------------
  this.up = function(evt) {
    if(!down) return;
    evt = fixEvent(evt);
    document.onmouseup   = null;
    document.onmousemove = null;
    show ('trace', 'mouse is up for '+document.node.id);
    down = false;
  };

//  ----------------------------------------------------------------------------
  this.getPoint = function(evt) {
//    alert (this.id+'.getPoint is still faulty!');
    var p = SVGRoot.createSVGPoint();
    p.x = evt.clientX;
    p.y = evt.clientY;
    return p;
  };

//  ----------------------------------------------------------------------------
  this.getTruePoint = function(evt)       {
    alert (this.id+'.getTruePoint is still faulty!');
    var newScale = canvas.currentScale; //  find the current zoom level and pan setting, and adjust the reported mouse position accordingly
    var translation = canvas.currentTranslate;
    var p = canvas.createSVGPoint();
    p.x = (evt.clientX - translation.x)/newScale;
    p.y = (evt.clientY - translation.y)/newScale;
    return p;
  };

//  ---------------------------------------------------------------------------->
  this.show = function(id, text) {
    return document.getElementById(id).firstChild.nodeValue = text == undefined ? '' : id + ': '+text;
  };

//  ----------------------------------------------------------------------------
  this.addDragNdrop = function(node) {
    if (node) {
      node.onmousedown = document.vectorTest.down;
      node.style.cursor = 'pointer';
    } else {
      node = document.g.position;
      if (!node.hasChildNodes()) return node;
      for (var i=0; i < node.childNodes.length; i++) {
        node.childNodes[i].onmousedown = document.vectorTest.down;
        node.childNodes[i].style.cursor = 'pointer';
      }
    }
    return node;
  };

//  ----------------------------------------------------------------------------
  this.remove = function (node) {
    return node = document.g.remove(node);
  };

//  ----------------------------------------------------------------------------
  function bubbleFunction(g, n) {
    var container = document.createElement ('div');
    container.id = "bubbles" + (++g.iShape);
    var pathFunction = function (node) {
      this.left = parseInt (node.style.left, 10);
      this.top  = parseInt (node.style.top , 10)-1;
    };
    var speedFunction = function (node) {return 10}; 
    var startFunction = function (node) {return Math.random() * 500000};
    for (var i=0; i < n; i++) {
      var size = Math.random() * 30;
      var node = g.drawCircle ((g.width-size) * Math.random(), g.height-size, size, g.randomColour (), Math.random());
      node.style.display = 'none';
      var stopFunction  = function (node) {return parseInt(node.style.top, 10) === 0}; 
      node.move (pathFunction, speedFunction, startFunction, stopFunction)
      node.onStart = function (node) {node.style.display =''; return node};
      node.onStop  = function (node) {return document.g.remove(node)};
      container.appendChild(node);
    }
    return container;
  };
	
  //  ----------------------------------------------------------------------------
}
//  --------------------------------------------------------------------------->