/*
 * 3dhtml Materials Add-On
 * Version 1.0, 20/11/2001
 * 
 * Copyright (c) 2001 by Netzministerium.de
 * Written by Till Nagel and René Sander.
 * Distributed under the terms of the GNU Lesser General Public. (See licence.txt for details)
 */

 
/*
 * ColorRectMaterial
 * Rectangle with color and size depending on depth (z value)
 *
 */

/*
 * createColorRectMaterial
 * This factory function creates and returns a new instance of the material
 * ColorRectMaterial.
 * 
 * The Builder pattern is used here: Within 3dhtml, models use the Material class.
 * To obtain a concrete instance of a material, you can call new Material() and
 * define your own material attributes.
 * To use more complex materials such as ColorRectMaterial, you don't instantiate
 * the object yourself, instead, ask createColorRectMaterial to create a
 * new one for you - it will define and assign the HTML body and the refresh
 * method.
 *
 * Parameters
 *   Color colorFrom - color to blend from
 *   Color colorTo - color to blend to
 *   String spacerImage - path + filename of spacer image
 *   (recommended to avoid layer errors)
 *
 * Returns 
 *   Material - A new preconfigured Material
 * 
 * Requires 
 *   ColorUtil.js - ColorBlend object
 * 
 */
function createColorRectMaterial(colorFrom, colorTo, spacerImage) {
	// in Netscape the size cannot be changed dynamically, therefore we
	// use a plain 10x10px image. For the other browsers, the size
	// is 1x1px (defining the minimum size of the colored box).
	var matbody = ns ? '<img src="' + spacerImage + '" width="10" height="10" alt="" border="0">' : '<img src="' + spacerImage + '" width="1" height="1" alt="" border="0">';
	
	var m = new Material( (spacerImage ? matbody : ''), colorRectMaterialRefresh);
	// adds colorBlend to this material
	
	m.myColorBlend = new ColorBlend(colorFrom, colorTo);
	return m;
}
 
/*
 * Blends the color of a single Point3D depending on the point's z-value,
 * its depth. This refresh method is called whenever the point is drawn.
 *
 * Parameters
 *   Point3D p - the point to refresh
 */
function colorRectMaterialRefresh(p) {
	with (p.lyr.ref) {
		var col = this.myColorBlend.getColor(normalize(p.z, -100, 100, 0, 1)).getHex();
		backgroundColor = col;
		bgColor = col;
		height = width = normalize(p.z, -100, 100, 1, 20);
	}
}

// ---------------------------------------------------------------------------

/*
 * ClipButtonMaterial
 * A ClipButton which state depends on depth (z value)
 *
 */

/*
 * createClipButtonMaterial
 * This factory function creates and returns a new instance of the material
 * ColorRectMaterial. See createClipRectMaterial above for more information.
 *
 * Parameters
 *   String image - path + filename of image to use as ClipButton
 *   int imageWidth - the width of the image
 *   int imageHeight - the height of the image
 *   int clipWidth - the width of the clipping area
 *   int clipHeight - the height of the clipping area
 *   int maxState - the number of states
 *
 * Returns 
 *   A new preconfigured Material.
 *
 * Requires 
 *   ClipButton.js - ClipButton object
 *
 */
function createClipButtonMaterial(image, imageWidth, imageHeight, clipWidth, clipHeight, maxState) {
	var m = new Material('<img src="' + image + '" width="' + imageWidth + '" height="' + imageHeight + '" alt="" border="0">', clipButtonRefresh);
	m.clipWidth = clipWidth;
	m.clipHeight = clipHeight;
	m.maxState = maxState;
	return m;
}

/*
 * Changes the state of the ClipButton of a single Point3D.
 * This refresh method is called whenever the point is drawn.
 * 
 * Parameters
 *   Point3D p - the point to refresh
 */
function clipButtonRefresh(p) {
	
	if (p.clipButton == null) {
		// creates ClipButton used with the current Point3D
		p.clipButton = new ClipButton(p.lyr.lyrname, this.clipWidth, this.clipHeight, this.maxState);
	} else {
		// updates the ClipButton's position values (it's placed in the point layer which is moved 
		// across the screen when positioning the point), so that the setState method is able
		// to set the state-dependent clipping area and reposition the ClipButton layer.
		p.clipButton.x = p.clipButton.lyr.getPos("left");
		p.clipButton.y = p.clipButton.lyr.getPos("top");
	}
	// shows the right image to simulate 3D depth
	// by making the state of the clipButton depend on the z value (range between 0 and (this.maxState - 1) )
	p.clipButton.setState( Math.abs( (this.maxState - 1) - Math.round(normalize(p.z, -100, 100, 0, (this.maxState - 1))) ) );
}