if (Prototype.Browser.Opera)
{
	var htmlEl = null;
	var bodyEl = null;
	
	var realOffset = function (el)
	{
		if (! htmlEl) htmlEl = document.getElementsByTagName('html')[0];
		if (! bodyEl) bodyEl = $('body');

		var extraPadding = 0;
		
		if (htmlEl.offsetWidth > bodyEl.offsetWidth)
		{
			extraPadding = Math.round((htmlEl.offsetWidth - bodyEl.offsetWidth) / 2);
		}
	
		
		var legacyPos = el.cumulativeOffset();
		
		var x = legacyPos.left - extraPadding;
	
		var y = legacyPos.top;
		
		var pos = {0: x, 1: y, left: x, top: y};
		
		return pos;
	}
}
else
{
	var realOffset = function (el)
	{
		var bodyPos = $('body').cumulativeOffset();
		
		var legacyPos = el.cumulativeOffset();
		
		var x = legacyPos.left - bodyPos.left;
		// var x = legacyPos.left;
	
		var y = legacyPos.top;
		
		var pos = {0: x, 1: y, left: x, top: y};
		
		return pos;
	}
}


XBControls.Clouds = {};

XBControls.Cloud = function (cloudId, triggerId, inputId, anchor, hideDelay)
{
	var self = this;
	
	
	var cloudId = cloudId;
	var cloud = $(cloudId);
	var trigger = $(triggerId);
	var input = inputId ? $(inputId) : null;
	var hideDelay = hideDelay || 5;
	
	XBControls.Clouds[cloudId] = cloud;

	var hideScheduleId = 0;
	
	var hide = function ()
	{
		cloud.setStyle({ display: 'none' });
	}

	var show = function ()
	{
		if (hideScheduleId)
		{
			window.clearTimeout(hideScheduleId);
			hideScheduleId = 0;
		}
		
		for (var id in XBControls.Clouds)
		{
			if (id != cloudId) XBControls.Clouds[id].hide();
		}
		
		cloud.setStyle({ display: 'block' });
		
		hideScheduleId = hide.delay(hideDelay);
	}
	
	
	var onInputFocus = function (e)
	{
		show();
	}
	
	var onCloudClick = function (e)
	{
		hide();
	}

	var onTriggerClick = function (e)
	{
		show();
	}
	

	var init = function ()
	{
		if (input)
		{
			input.observe('focus', onInputFocus.bindAsEventListener(self));
		}
		
		cloud.observe('click', onCloudClick.bindAsEventListener(self));
		
		trigger.observe('click', onTriggerClick.bindAsEventListener(self));
		
		if (anchor)
		{
			var baseEl = $(anchor.elementId);
			var pos = realOffset(baseEl);
			
			var left = pos.left + anchor.shift.x;
			var top = pos.top + anchor.shift.y;

			cloud.setStyle({left: left + 'px', top: top + 'px'});
		}
	};

	init();
}