var LastCloud = null;
var TopZ = 1000;
	var LastOver = null;
	var LastPointer = null;
	var LastOpacity = 0;
	var LastZ = 0;
// A "cloud" of elements. The first is in the center, the others in one circle around them.
// In: object parent: Find the cloud as div elements inside this element
// In: string className: the class name of the cloud elements
function Cloud(parent, className)
{
	var Update = function(o)
	{
//		o.style.left = (100 * o.offsetLeft / document.body.offsetWidth)  + "%";
//		o.style.top = (100 * o.offsetTop / Browser.InnerHeight())  + "%";
		if (LastCloud && (LastCloud != _this))
		{
			LastCloud.Drops.Apply(_this.Styling(1.0, 0.4));
			LastCloud.Drops.Nodes[0].style.cursor = "pointer";
		}
		LastCloud = _this;
		TopZ = TopZ + 2;
		_this.Drops.Apply(_this.Styling(1.0, 0.6));
		o.style.cursor = "default";
		LastOver = null;
	}
	var Over = function(o)
	{
		if (LastOver)
		{
			Browser.SetOpacity(LastOver, LastOpacity);
			LastOver.style.cursor = LastPointer;
			LastOver.style.zIndex = LastZ;
		}
		LastOpacity = o.style.opacity;
		LastPointer = o.style.cursor;
		LastZ = o.style.zIndex;
		LastOver = o;		
		TopZ += 2;
		o.style.zIndex = TopZ;
		Browser.SetOpacity(o, 1);
	}
	var _this = this;
	_this.Drops = new Queue().Fill(parent, className);
	var draggable = new Draggable(_this.Drops, Update, Over, className);
	Update(_this.Drops.Nodes[0]);
	_this.Drops.Apply(function(o,i,l){ o.style.cursor = "pointer";});
		
}

// Style this element in the cloud
// In: double opacity0: Opacity of 0th element
// In: double opacityN: Opacity of nth element
// Out: function(o,i,l) where:
// In: object o: Element to style
// In: int i: Index of object in cloud
// In: int l: Length of cloud (number of elements)
Cloud.prototype.Styling = function(opacity0, opacityN)
{
	return function(o,i,l)
		{
			if (i == 0)
			{
				Browser.SetOpacity(o, opacity0);
				o.style.zIndex = TopZ+1;
			}
			else
			{
				Browser.SetOpacity(o, opacityN);
				o.style.zIndex = TopZ;
			}
		}
}

// Arrange the cloud 
// In: int percentX: Center horizontally
// In: int percentY: Center vertically
// In: int radius: Radius from cloud center to circle element centers
// In: double stretch: Amount to elongate horizontally
Cloud.prototype.Arrange = function(percentX, percentY, radius, stretch, yOffset)
	{
		var width = Browser.InnerWidth();
		var height = Browser.InnerHeight();
		var x = width * percentX / 100;
		var y = height * percentY / 100;
//alert("y" + y + "h" + height);
		var index = 0;
		var circle = 0;
		var len = this.Drops.Length;
		var circles = [1, len-1];
		var offsety = 0;
		var offset0 = this.Drops.Nodes[0].offsetHeight*0.2;
		while (index < len)
		{
			var n = circles[circle];
			var dv = 2 * Math.PI / n;
			var start = 1.25 * Math.PI; 
			for (var i = 0; i < n && i + index < len; i++)
			{
				var dx = circle * radius * Math.cos(start + dv * i)*stretch; 
				var dy = circle * radius * Math.sin(start + dv * i); 
				var o = this.Drops.Nodes[i+index];
				if (index > 0)
				{
					offsety = offset0 + yOffset;
				}
				// position the object
				o.style.float = "none";
				o.style.position = "absolute";
				
//				o.style.left = (100 * (x + dx - o.offsetWidth/2) / width)  + "%";
//				o.style.top = (100 * (y + dy - o.offsetHeight/2) / height) + "%";
				o.style.left = x + dx - o.offsetWidth/2 + "px";
				o.style.top = y + dy - o.offsetHeight/2 + offsety + "px";
//				this.Styling(o, i+index, len);
			}
			index += n;
			circle += 1;
		}
		
	}