/*
 *  rwmSwivelImage
 *  
 *  v1.0 23 Mar 2009
 *  
 *  My previous usage of this technique was hard-coded into the rwmCoverFlow script.
 *  Now that I want to rewrite that code to be more flexible I decided to separate this aspect.
 *  This class wraps an IMG element so that it can be swivelled around it's vertical axis.
 *  The slanted top/bottom effect is achieved with a solid top/bottom border with a full width transparent left/right border.
 *  
 *  There is an issue with hyperlinked images. I originally intended to add an absolutely positioned, display:block, anchor element
 *  in front of the border div, but that does not work reliably in IE. So I have left the image linked instead. Unfortunately, the
 *  botder div was in the way, shielding the anchor from mouse clicks. My workaround is to split the border into 2 separate divs, one
 *  each for the top and bottom. The visible image in between these is clickable but not the portion under the transparent borders.
 *
 *
 *
 *
 *
 */

function rwmSwivelImage (ImgElement, HeightOffset)
{

	if (typeof(ImgElement) == "string") ImgElement = document.getElementById(ImgElement);
	this.img = ImgElement;

	this.outerdiv = document.createElement("div");
	this.bordertopdiv = document.createElement("div");
	this.borderbotdiv = document.createElement("div");
	this.img.parentNode.insertBefore(this.outerdiv, this.img);

	this.anchor = null;
	if (this.img.tagName == "A")
	{
		this.anchor = this.img;
		for (acheck = 0; acheck < this.anchor.childNodes.length; acheck++)
		{
			if (this.anchor.childNodes[acheck].tagName == "IMG") { this.img = this.anchor.childNodes[acheck]; break; }
		}
	}

	this.pi = Math.PI;
	this.pi2 = 2 * this.pi;
	this.w = this.img.width;
	this.h = this.img.height;
	this.w2 = this.w / 2;
	this.h2 = this.h / 2;
	this.x = 0;
	this.y = 0;
	this.angrad = 0;
	this.HeightOffset = Math.max(0, Math.min(HeightOffset, 1));
	this.scale = 1;

	this.outerdiv.style.position = "absolute";

	for (b = 0; b <=1; b++)
	{
		var bdiv = (b == 0) ? this.bordertopdiv : this.borderbotdiv;
		bdiv.style.position = "absolute";
		bdiv.style.width = "1px";
		bdiv.style.height = "1px";
		bdiv.style.left = "0";
		if (b == 0) bdiv.style.top = "0px"; // top border is aligned to top of outerdiv
		if (b == 1) bdiv.style.bottom = "0px"; // bottom botder is aligned to bottom of outerdiv
		bdiv.style.borderTopStyle = (b == 0) ? "solid" : "none";
		bdiv.style.borderBottomStyle = (b == 1) ? "solid" : "none";
		if (b == 1) bdiv.style.bottom = "0px";
		bdiv.style.borderLeftStyle = "solid";
		bdiv.style.borderRightStyle = "solid";
		bdiv.style.borderLeftColor = "transparent";
		bdiv.style.borderRightColor = "transparent";
		bdiv.className = "rwmSwivelImageBorders"; // include in css: .rwmSwivelImageBorders { border-color: white; }
	}

	this.img.style.position = "absolute";
	this.img.style.padding = "0";
	this.img.style.margin = "0";
	this.img.style.borderWidth = "0";
	this.img.style.top = "0";
	this.img.style.left = "0";
	this.img.style.width = "100%";
	this.img.style.height = "100%";

	this.outerdiv.appendChild(this.anchor ? this.anchor : this.img);
	this.outerdiv.appendChild(this.bordertopdiv);
	this.outerdiv.appendChild(this.borderbotdiv);

	this.SwivelTo = function (newangrad)
	{
		this.angrad = newangrad;
	}

	this.test = "";

	this.Update = function ()
	{
		var angcos = Math.cos(this.angrad);
		var angsin = Math.sin(this.angrad);

		var scalewidth = this.w * this.scale;
		var scaleheight = this.h * this.scale;

		var w = Math.max(1, Math.round(Math.abs(scalewidth * angcos)));
		
		var z = Math.abs(angsin * 0.20);
		var FarHeight = Math.round(scaleheight * (1 - z));
		var NearHeight = Math.round(scaleheight * (1 + z));
		var HeightDifference = NearHeight - FarHeight;

		var BelowHeight = Math.round(NearHeight * this.HeightOffset);
		var AboveHeight = NearHeight - BelowHeight;
		var BelowSlantHeight = Math.round(HeightDifference * this.HeightOffset);
		var AboveSlantHeight = HeightDifference - BelowSlantHeight;

		this.outerdiv.style.left = this.x + "px";
		this.outerdiv.style.top = this.y + "px";
		this.outerdiv.style.marginLeft = -(w * 0.5) + "px";
		this.outerdiv.style.marginTop = -AboveHeight + "px";
		this.outerdiv.style.width = w + "px";
		this.outerdiv.style.height = NearHeight + "px";

		/*
		var bordh = Math.ceil(NearHeight) - Math.floor(AboveSlantHeight) - Math.floor(BelowSlantHeight);
		this.borderdiv.style.height = bordh + "px";
		this.borderdiv.style.borderTopWidth = AboveSlantHeight + "px";
		this.borderdiv.style.borderBottomWidth = BelowSlantHeight + "px";
		if ((angsin > 0 && angcos > 0) || (angsin < 0 && angcos < 0))
		{
			this.borderdiv.style.borderLeftWidth =  "0px";
			this.borderdiv.style.borderRightWidth = w + "px";
		}
		else
		{
			this.borderdiv.style.borderRightWidth = "0px";
			this.borderdiv.style.borderLeftWidth =  w + "px";
		}
		*/

		this.bordertopdiv.style.borderTopWidth = AboveSlantHeight + "px";
		this.borderbotdiv.style.borderBottomWidth = BelowSlantHeight + "px";
		if ((angsin > 0 && angcos > 0) || (angsin < 0 && angcos < 0))
		{
			this.bordertopdiv.style.borderLeftWidth =  "0px";
			this.bordertopdiv.style.borderRightWidth = w + "px";
			this.borderbotdiv.style.borderLeftWidth =  "0px";
			this.borderbotdiv.style.borderRightWidth = w + "px";
		}
		else
		{
			this.bordertopdiv.style.borderRightWidth = "0px";
			this.bordertopdiv.style.borderLeftWidth =  w + "px";
			this.borderbotdiv.style.borderRightWidth = "0px";
			this.borderbotdiv.style.borderLeftWidth =  w + "px";
		}


	}

	this.Update();

}