/* Clase para los popups de tarifas opcionales */

var Bubble = Class.create();

document.observe('dom:loaded', function()
{
	if ($$('a[rel^=bubble]'))
	{
		/* Precarga de la imagen de fondo */
		var preload = new Element('div', {'class':'bubble-topleft', id:'bubble-topleft-preload', style:'visibility:hidden'});
		$(document.body).insert(preload);
		(function(){preload.remove();}).delay();
	
		/* Inicialización */
		$$('a[rel^=bubble]').each(function(anchor)
		{
			var roomId = anchor.readAttribute('rel').match(/bubble_(\d+)_(\d+)/)[1];
			var roomPosition = anchor.readAttribute('rel').match(/bubble_(\d+)_(\d+)/)[2];

			anchor.bubble = new Bubble(roomId, roomPosition);

			anchor.onmouseover = function ()
			{
				if (anchor.bubble.active() && !anchor.bubble.visible() && !anchor.bubble.fixed)
				{
					anchor.bubble.open(anchor, 'hover');
				}
			}
			anchor.onmouseout = function()
			{
				if (anchor.bubble && anchor.bubble.active() && !anchor.bubble.fixed)
				{
					anchor.bubble.close();
				}
			}
			anchor.onclick = function ()
			{
				if (anchor.bubble.active())
				{
					if (!anchor.bubble.visible() || !anchor.bubble.fixed)
					{
						anchor.bubble.open(anchor, 'options');
					}

					document.observe('click', function(event)
					{
						if (!event.findElement('a[rel^=bubble]') && !event.findElement('div.bubble'))
						{
							anchor.bubble.close();
							document.stopObserving('click');
						}
					});
				}

				return false;
			}
		});
	}
});

Bubble.prototype =
{
	initialize: function(roomId, roomPosition)
	{
		this.offsetRight = 95;
		this.offsetTop = 0;

		this.roomId = roomId;
		this.roomPosition = roomPosition;
	},

	active: function()
	{
		var numOptions = $('rates_'+this.roomId+'_'+this.roomPosition).select('.bubble-options ul li').size();
		return numOptions > 1;
	},

	open: function(anchor, content)
	{
		if (!this.bubbleObj)
		{
			this.bubbleObj = new Element("div", {'id':'bubble_'+this.roomId+'_'+this.roomPosition, 'class':'bubble'}).hide();
			this.bubbleObj.insert(new Element("div", {'class':'bubble-topleft'}));
			this.bubbleObj.insert(new Element("div", {'class':'bubble-topright'}));
			this.bubbleObj.insert(new Element("div", {'class':'bubble-bottomleft'}));
			this.bubbleObj.insert(new Element("div", {'class':'bubble-content'}));
			$('content').insert(this.bubbleObj);
		}

		var roomId = this.roomId;
		var roomPosition = this.roomPosition;

		var bubbleContent = $('rates_'+roomId+'_'+roomPosition).clone(true);

		this.bubbleObj.down('.bubble-content').update(bubbleContent.show());

		if (content == 'options')
		{
			bubbleContent.down('.bubble-options').show();
			bubbleContent.down('.bubble-hover').hide();

			this.fixed = true;

			bubbleContent.select('input[type=radio]').each(function(element)
			{
				element.onclick = function(){this.changeRate(element.value)}.bind(this);
			}.bind(this));
		}
		else if (content == 'hover')
		{
			bubbleContent.down('.bubble-options').hide();
			bubbleContent.down('.bubble-hover').show();

			this.fixed = false;

			var checkedInput = bubbleContent.select('input').find(function(el){return el.checked});
			if (checkedInput)
			{
				bubbleContent.down('.bubble-hover .name').update(checkedInput.next('.name').innerHTML);
			}
		}

		this.bubbleObj.clonePosition(anchor, {
			setWidth:false,
			setHeight:false,
			offsetLeft:anchor.getWidth() / 2 -this.bubbleObj.getWidth() + this.offsetRight,
			offsetTop:-this.bubbleObj.getHeight() + this.offsetTop
		});

		this.bubbleObj.show();

		/*
		this.bubbleObj.setStyle({
			right: this.bubbleObj.getStyle('right'),
			bottom: this.bubbleObj.getStyle('bottom'),
			left:'auto',
			top:'auto'
		});
		*/

	},

	close: function()
	{
		if (this.bubbleObj)
		{
			this.bubbleObj.hide();
		}
		this.fixed = false;
	},

	visible: function()
	{
		return this.bubbleObj && this.bubbleObj.visible();
	},

	changeRate: function(value)
	{
		$('rates_'+this.roomId+'_'+this.roomPosition).down('input[value='+value+']').checked = true;

		updatePrices(this.roomId, this.roomPosition);
	}
}