Summary

Defines a class of buttons to dynamically change the 3D Scene and SVG canvas.

/**MathWorx Copyright (c) 2008 Shane Steinert-Threlkeld
Dual-licensed under the MIT and GNU GPL Licenses.
For more information, see LICENSE file */

/**@fileoverview Defines a class of buttons to dynamically change the 3D Scene and SVG canvas. */

var interval;
var active = true;
var defaultClass = "button";
var img_zoomIn = pathToButtons + 'zoomin.gif';
var img_zoomOut = pathToButtons + 'zoomout.gif';
var img_rotateZp = pathToButtons + 'arrow1_e.gif';
var img_rotateZn = pathToButtons + 'arrow1_w.gif';
var img_rotateXYp = pathToButtons + 'arrow1_n.gif';
var img_rotateXYn = pathToButtons + 'arrow1_s.gif';
var img_rotateNW = pathToButtons + 'arrow1_nw.gif';
var img_rotateNE = pathToButtons + 'arrow1_ne.gif';
var img_rotateSW = pathToButtons + 'arrow1_sw.gif';
var img_rotateSE = pathToButtons + 'arrow1_se.gif';

/**The constructor function for a new SceneButton.  Should never be used, but is called by static SceneButton methods.
@class This class defines various buttons (images with javascript actions) to change/rotate the Scene3D and re-draw it.<br />
The icons used are Sanscons from Some Random Dude.  See: http://somerandomdude.net/srd-projects/sanscons<br />
You must have a CSS file (our default is SceneButton.css) and include it in your HTML document with a <link rel='stylesheet' type='text/css' href='SceneButton.css'></link> tag.  
The default class used for buttons is "button", but you may define your own as you see fit and specify them as a parameter in your function calls.<br />
Because this class is interested in re-drawing the SVG canvas, it <strong>requires jQuery SVG</strong> and so the necessary files must be included on the top of the page.<br />
For more info, see the static method documentation below.  An example call of a specific button:
<blockquote><code>
SceneButton.rotateZp(document.getElementById("button"), 'svg', 'scene', Math.PI/8, "[{stroke: 'black', 'stroke-width': .25}, {stroke: 'red', 'stroke-width': .125}, {stroke: 'green', 'stroke-width': .125}, {stroke: 'blue', 'stroke-width': .125}]", true);
</code></blockquote>
To change the images displayed for each button, edit SceneButton.js with the according images (pathToButtons variable is set in easyload.js).  The "button" class is defined in SceneButton.css, bt you can define your own classes however you desire; for usage of the default button set here, see <a href="http://somerandomdude.net/srd-projects/sanscons">Sancsons</a>
<p>For a working demo (with jQuery and jQuery SVG), see: <a href="http://cis.jhu.edu/~shanest/js/mathworx/3D/testbutton.html">http://cis.jhu.edu/~shanest/js/mathworx/3D/testbutton.html</a></p>
@constructor */
function SceneButton(parent, scene, continuous, img, func, class) {

	var node = document.createElement("img");
	node.setAttribute("src",img);
	if(class) {
		node.setAttribute("class",class);
	} else {
		node.setAttribute("class","button");
	}
	if(continuous == true) {
		node.setAttribute("onclick","SceneButton.toggle(\""+func+"\")");
	} else {
		node.setAttribute("onclick",func);
	}
	parent.appendChild(node);

}

/**Toggles animation of the scene.  Called if continuous parameter is set to true.
There is only one animation variable, so each animation happens on its own.
Makes it so that when animation button is clicked, it will start/stop animation.
@param {String} func the string representation of the function to be executed when animated. */
SceneButton.toggle = function(func) {
	if(active == true) {
		interval = setInterval(func,'50');
		active = false;
	} else {
		clearInterval(interval);
		active = true;
	}
}

/**Makes all the buttons and appends them to the parent DOM node. For most parameters, see any of the individual button methods.
@param {Number} zStep the increment to zoom by for the zoomIn/zoomOut buttons
@param {Number} rStep the increment (radians) to use for the rotation methods 
@see #zoomIn 
@see #zoomOut
@see #rotateZp
@see #rotateZn
@see #rotateXYp
@see #rotateXYn
@see #rotateNE
@see #rotateNW
@see #rotateSE
@see #rotateSW */
SceneButton.makeAll = function(parent, svg, scene, zStep, rStep, settings, continuous, class) {
	SceneButton.zoomIn(parent, svg, scene, zStep, settings, continuous, class);
	SceneButton.zoomOut(parent, svg, scene, zStep, settings, continuous, class);
	SceneButton.rotateZp(parent, svg, scene, rStep, settings, continuous, class);
	SceneButton.rotateZn(parent, svg, scene, rStep, settings, continuous, class);
	SceneButton.rotateXYp(parent, svg, scene, rStep, settings, continuous, class);
	SceneButton.rotateXYn(parent, svg, scene, rStep, settings, continuous, class);
	SceneButton.rotateNE(parent, svg, scene, rStep, settings, continuous, class);
	SceneButton.rotateNW(parent, svg, scene, rStep, settings, continuous, class);
	SceneButton.rotateSE(parent, svg, scene, rStep, settings, continuous, class);
	SceneButton.rotateSW(parent, svg, scene, rStep, settings, continuous, class);
}

/**Zooms in on the objects in the Scene3D.  Note: whatever the original "focus" is in your Scene3D, if you zoom in below 0, there will be momentary "noise" and then zooming in will be like zooming out.
@param {Object} parent the DOM node that will be the parent of the button image
@param {String} svg the name of your jQuery SVG root variable
@param {String} scene the name of your Scene3D object variable
@param {Number} step the increment to zoom in by each time
@param {String} settings the string version of a settings object; same as draw method settings, but surround with quotation marks
@param {Boolean} continuous (optional) true if want animation; false by default
@param {String} class (optional) the class name to give your image tags; defaults to "button" as defined in SceneButton.css.  Must specify a boolean for continuous if want to use this parameter
@return {SceneButton} a new SceneButton (an image tag with proper attributes and onclick), by calling SceneButton.zoom
@see #zoom */
SceneButton.zoomIn = function(parent, svg, scene, step, settings, continuous, class) {
	return SceneButton.zoom(parent, svg, scene, step, '-', settings, continuous, class);
}

/**Zooms out on the objects in the Scene3D. 
@param {Object} parent the DOM node that will be the parent of the button image
@param {String} svg the name of your jQuery SVG root variable
@param {String} scene the name of your Scene3D object variable
@param {Number} step the increment to zoom out by each time
@param {String} settings the string version of a settings object; same as draw method settings, but surround with quotation marks
@param {Boolean} continuous (optional) true if want animation; false by default
@param {String} class (optional) the class name to give your image tags; defaults to "button" as defined in SceneButton.css.  Must specify a boolean for continuous if want to use this parameter
@return {SceneButton} a new SceneButton (an image tag with proper attributes and onclick), by calling SceneButton.zoom
@see #zoom */
SceneButton.zoomOut = function(parent, svg, scene, step, settings, continuous, class) {
	return SceneButton.zoom(parent, svg, scene, step, '+', settings, continuous, class);
}

/**For specification of most parameters, see {@link #zoomIn} or {@link #zoomOut}.  
@param {String} sign '+' for zooming out, '-' for zooming in
@return {SceneButton} the specified button */
SceneButton.zoom = function(parent, svg, scene, step, sign, settings, continuous, class) {
	var img;
	if(sign == '-') {
		img = img_zoomIn;
	} else if(sign == '+') {
		img = img_zoomOut;
	}
	var funcString = ''+scene+'.emptySVG('+svg+').setFocus('+scene+'.focus '+sign+' '+step+').draw('+scene+'.objects, svg, '+settings+')';
	var cont = false;
	if(continuous)  {
		cont = continuous;
	}
	var cl = defaultClass;
	if(class) {
		cl = class;
	}
	return new SceneButton(parent, scene, cont, img, funcString, cl);
}

/**Creates a button responsible for positive rotation about the Z-axis.
@param {Object} parent the DOM node that will be the parent of the button image
@param {String} svg the name of your jQuery SVG root variable
@param {String} scene the name of your Scene3D object variable
@param {Number} step the increment to rotate each time
@param {String} settings the string version of a settings object; same as draw method settings, but surround with quotation marks
@param {Boolean} continuous (optional) true if want animation; false by default
@param {String} class (optional) the class name to give your image tags; defaults to "button" as defined in SceneButton.css.  Must specify a boolean for continuous if want to use this parameter
@return {SceneButton} a new SceneButton (an image tag with proper attributes and onclick), by calling SceneButton.rotateZ
@see #rotateZ */
SceneButton.rotateZp = function(parent, svg, scene, step, settings, continuous, class) {
	return SceneButton.rotateZ(parent, svg, scene, step, '-', settings, continuous, class);
}

/**Creates a button responsible for negative rotation about the Z-axis.
@param {Object} parent the DOM node that will be the parent of the button image
@param {String} svg the name of your jQuery SVG root variable
@param {String} scene the name of your Scene3D object variable
@param {Number} step the increment to rotate each time
@param {String} settings the string version of a settings object; same as draw method settings, but surround with quotation marks
@param {Boolean} continuous (optional) true if want animation; false by default
@param {String} class (optional) the class name to give your image tags; defaults to "button" as defined in SceneButton.css.  Must specify a boolean for continuous if want to use this parameter
@return {SceneButton} a new SceneButton (an image tag with proper attributes and onclick), by calling SceneButton.rotateZ
@see #rotateZ */
SceneButton.rotateZn = function(parent, svg, scene, step, settings, continuous, class) {
	return SceneButton.rotateZ(parent, svg, scene, step, '+', settings, continuous, class);
}

/**For specification of most parameters, see {@link #rotateZp} or {@link #rotateZn}.  
@param {String} sign '+' for negative rotation, '-' for positive rotation
@return {SceneButton} the specified button */
SceneButton.rotateZ = function(parent, svg, scene, step, sign, settings, continuous, class) {
	var img;
	if(sign == '-') {
		img = img_rotateZp;
	} else if(sign == '+') {
		img = img_rotateZn;
	}
	var funcString = ''+scene+'.emptySVG('+svg+').rotateCamera('+scene+'.camera.theta '+sign+' ' +step+ ', '+scene+'.camera.phi).draw('+scene+'.objects, svg, '+settings+')';
	var cont = false;
	if(continuous)  {
		cont = continuous;
	}
	var cl = defaultClass;
	if(class) {
		cl = class;
	}
	return new SceneButton(parent, scene, cont, img, funcString, cl);
}

/**Creates a button responsible for positive rotation about the XY-plane.
@param {Object} parent the DOM node that will be the parent of the button image
@param {String} svg the name of your jQuery SVG root variable
@param {String} scene the name of your Scene3D object variable
@param {Number} step the increment to rotate each time
@param {String} settings the string version of a settings object; same as draw method settings, but surround with quotation marks
@param {Boolean} continuous (optional) true if want animation; false by default
@param {String} class (optional) the class name to give your image tags; defaults to "button" as defined in SceneButton.css.  Must specify a boolean for continuous if want to use this parameter
@return {SceneButton} a new SceneButton (an image tag with proper attributes and onclick), by calling SceneButton.rotateXY
@see #rotateXY */
SceneButton.rotateXYp = function(parent, svg, scene, step, settings, continuous, class) {
	return SceneButton.rotateXY(parent, svg, scene, step, '+', settings, continuous, class);
}

/**Creates a button responsible for negative rotation about the XY-plane.
@param {Object} parent the DOM node that will be the parent of the button image
@param {String} svg the name of your jQuery SVG root variable
@param {String} scene the name of your Scene3D object variable
@param {Number} step the increment to rotate each time
@param {String} settings the string version of a settings object; same as draw method settings, but surround with quotation marks
@param {Boolean} continuous (optional) true if want animation; false by default
@param {String} class (optional) the class name to give your image tags; defaults to "button" as defined in SceneButton.css.  Must specify a boolean for continuous if want to use this parameter
@return {SceneButton} a new SceneButton (an image tag with proper attributes and onclick), by calling SceneButton.rotateXY
@see #rotateXY */
SceneButton.rotateXYn = function(parent, svg, scene, step, settings, continuous, class) {
	return SceneButton.rotateXY(parent, svg, scene, step, '-', settings, continuous, class);
}

/**For specification of most parameters, see {@link #rotateXYp} or {@link #rotateXYn}.  
@param {String} sign '-' for negative rotation, '+' for positive rotation
@return {SceneButton} the specified button */
SceneButton.rotateXY = function(parent, svg, scene, step, sign, settings, continuous, class) {
	var img;
	if(sign == '+') {
		img = img_rotateXYp;
	} else if(sign == '-') {
		img = img_rotateXYn;
	}
	var funcString = ''+scene+'.emptySVG('+svg+').rotateCamera('+scene+'.camera.theta, '+scene+'.camera.phi ' +sign+ ' ' +step+ ').draw('+scene+'.objects, svg, '+settings+')';
	var cont = false;
	if(continuous)  {
		cont = continuous;
	}
	var cl = defaultClass;
	if(class) {
		cl = class;
	}
	return new SceneButton(parent, scene, cont, img, funcString, cl);
}

/**Creates a button responsible for "North-east" (positive around Z and XY) rotation. 
@param {Object} parent the DOM node that will be the parent of the button image
@param {String} svg the name of your jQuery SVG root variable
@param {String} scene the name of your Scene3D object variable
@param {Number} step the increment to rotate each time
@param {String} settings the string version of a settings object; same as draw method settings, but surround with quotation marks
@param {Boolean} continuous (optional) true if want animation; false by default
@param {String} class (optional) the class name to give your image tags; defaults to "button" as defined in SceneButton.css.  Must specify a boolean for continuous if want to use this parameter
@return {SceneButton} a new SceneButton (an image tag with proper attributes and onclick), by calling SceneButton.rotate
@see #rotate */
SceneButton.rotateNE = function(parent, svg, scene, step, settings, continuous, class) {
	return SceneButton.rotate(parent, svg, scene, step, '+', '-', settings, continuous, class);
}

/**Creates a button responsible for "North-west" (positive around Z, negative around XY) rotation. 
@param {Object} parent the DOM node that will be the parent of the button image
@param {String} svg the name of your jQuery SVG root variable
@param {String} scene the name of your Scene3D object variable
@param {Number} step the increment to rotate each time
@param {String} settings the string version of a settings object; same as draw method settings, but surround with quotation marks
@param {Boolean} continuous (optional) true if want animation; false by default
@param {String} class (optional) the class name to give your image tags; defaults to "button" as defined in SceneButton.css.  Must specify a boolean for continuous if want to use this parameter
@return {SceneButton} a new SceneButton (an image tag with proper attributes and onclick), by calling SceneButton.rotate
@see #rotate */
SceneButton.rotateNW = function(parent, svg, scene, step, settings, continuous, class) {
	return SceneButton.rotate(parent, svg, scene, step, '-', '-', settings, continuous, class);
}

/**Creates a button responsible for "South-east" (negative around Z, positive around XY) rotation. 
@param {Object} parent the DOM node that will be the parent of the button image
@param {String} svg the name of your jQuery SVG root variable
@param {String} scene the name of your Scene3D object variable
@param {Number} step the increment to rotate each time
@param {String} settings the string version of a settings object; same as draw method settings, but surround with quotation marks
@param {Boolean} continuous (optional) true if want animation; false by default
@param {String} class (optional) the class name to give your image tags; defaults to "button" as defined in SceneButton.css.  Must specify a boolean for continuous if want to use this parameter
@return {SceneButton} a new SceneButton (an image tag with proper attributes and onclick), by calling SceneButton.rotate
@see #rotate */
SceneButton.rotateSE = function(parent, svg, scene, step, settings, continuous, class) {
	return SceneButton.rotate(parent, svg, scene, step, '+', '+', settings, continuous, class);
}

/**Creates a button responsible for "South-west" (negative around Z and XY) rotation. 
@param {Object} parent the DOM node that will be the parent of the button image
@param {String} svg the name of your jQuery SVG root variable
@param {String} scene the name of your Scene3D object variable
@param {Number} step the increment to rotate each time
@param {String} settings the string version of a settings object; same as draw method settings, but surround with quotation marks
@param {Boolean} continuous (optional) true if want animation; false by default
@param {String} class (optional) the class name to give your image tags; defaults to "button" as defined in SceneButton.css.  Must specify a boolean for continuous if want to use this parameter
@return {SceneButton} a new SceneButton (an image tag with proper attributes and onclick), by calling SceneButton.rotate
@see #rotate */
SceneButton.rotateSW = function(parent, svg, scene, step, settings, continuous, class) {
	return SceneButton.rotate(parent, svg, scene, step, '-', '+', settings, continuous, class);
}

/**For specification of most parameters, see {@link #rotateNW}, {@link #rotateNE}, {@link #rotateSW} or {@link #rotateSE}.  
@param {String} xySign '+' or '-' for the direction of the rotation about XY plane ({@link #rotateXY})
@param {String} zSign '+' or '-' for the direction of the rotation about Z axis ({@link #rotateZ})
@return {SceneButton} the specified button */
SceneButton.rotate = function(parent, svg, scene, step, xySign, zSign, settings, continuous, class) {
	var img;
	switch(xySign) {
		case "+":
			switch(zSign) {
				case "-":
					img = img_rotateNE;
					break;
				case "+":
					img = img_rotateSE;
					break;
			}
			break;
		case "-":
			switch(zSign) {
				case "-":
					img = img_rotateNW;
					break;
				case "+":
					img = img_rotateSW;
					break;
			}
			break;
	}
	var funcString = ''+scene+'.emptySVG('+svg+').rotateCamera('+scene+'.camera.theta ' +xySign+ ' ' +step+ ', '+scene+'.camera.phi ' +zSign+ ' ' +step+ ').draw('+scene+'.objects, svg, '+settings+')';
	var cont = false;
	if(continuous)  {
		cont = continuous;
	}
	var cl = defaultClass;
	if(class) {
		cl = class;
	}
	return new SceneButton(parent, scene, cont, img, funcString, cl);
}