window.addEvent('domready', function()
{								
	var x_dir = 'right';
	var y_dir = 'top';
	
	// Add onclick to the confirm links if there are any
	$$('a.tell_a_friend').each(
		function(tellLink)
		{	
			tellLink.addEvent('click', 
				function(e) 
				{
					e = new Event(e).stop();
				 
					var url = tellLink.href + '?ajax=1';
				 	
					var xCoord = e.client.x + window.getScrollLeft();
					var yCoord = e.client.y + window.getScrollTop();
					
					findExpandDirections(e.client.x, e.client.y);
						
					showTellOptions(url, xCoord, yCoord, e.client.x, e.client.y);
				}
			);
		}
	);
	
	
	// Pop up the box giving the user their specific friend options
	function showTellOptions(url, mouseX, mouseY, mX, mY)
	{
		initialiseTellContainer();
	 
		new Ajax(url, 
			{
				method: 'get', 
				onComplete: function(e)
				{
					var myObject = Json.evaluate(this.response.text);

					resizeAuto($('tellHoverDiv'), myObject['width'], myObject['height']);

					populateTellContainer(myObject['body']);
				}
			}
		).request();
		
		calculateTellContainerPosition(mouseX, mouseY, mX, mY);
	}
	
	
	// Handle the inner forms
	function populateTellContainer(content)
	{
		$('tellHoverMain').innerHTML = content;
		
		if($('tellForm'))
		{
			$('tellForm').removeEvent('submit');
			
			$('tellForm').addEvent('submit', 
				function(e)
				{
					e = new Event(e).stop();
					
					$('tellForm').send(
						{
							onComplete: function()
							{
								//alert(this.response.text);
								var myObject = Json.evaluate(this.response.text);
								
								resizeAuto($('tellHoverDiv'), myObject['width'], myObject['height']);
								
								populateTellContainer(myObject['body']);
							}
						}
					);
					
					// JS will render this first - it is down here so there is still a form to submit!
					$('tellHoverContent').innerHTML = '<center><img src="profile_information/spinner.gif" style="margin: 10px 0;" /></center>';
				}
			);
		}
	}
	
	
	// Returns an array containing the x and y coordinates of a block level element
	function getBottomLeftCoordinates(element)
	{
		var top 	= element.getStyle('top').toInt();
		var left 	= element.getStyle('left').toInt();
		var width 	= element.getStyle('width').toInt();
		var height 	= element.getStyle('height').toInt();
		
		var mouse = new Array();
		mouse['x'] = left + width;
		mouse['y'] = top + height;
		
		return mouse;
	}
	
	
	function findExpandDirections(mX, mY)
	{
		//alert("mX: " + mX + ' mY: ' + mY);
		
		// Are we nearest the left or right?
		x_dir = 'right';
		if(mX < window.getSize().size.x / 2)
		{
			x_dir = 'left';
		}
		//alert(window.getSize().size.x + ' so X: ' + x_dir);
		
		y_dir = 'top';
		if(mY < window.getSize().size.y / 2)
		{
			y_dir = 'bottom';
		}
		//alert(window.getSize().size.y + ' so Y: ' + y_dir);
	}
	
	
	// Change the size of the popup container
	function morphSize(element, width, height) 
	{
		var orig_width 	= element.getStyle('width').toInt();
		var orig_height = element.getStyle('min-height').toInt();
		
		var orig_left 	= element.getStyle('left').toInt();
		var orig_top 	= element.getStyle('top').toInt();
		
		// We are morphing the width
		if(width != orig_width)
		{
			var width_diff 	= width - orig_width;

			if(x_dir == 'right')
			{
				var left = orig_left - width_diff;
			}
			else
			{
				var left = orig_left;
			}
		}
		else
		{
			var left = orig_left;
		}
	
		if(height != orig_height)
		{			
			var height_diff = height - orig_height;
			
			if(y_dir == 'bottom')
			{
				var top = orig_top;
			}
			else
			{
				var top = orig_top - height_diff;
			}
		}
		else
		{
			var top = orig_top;
		}
		
		var fx = element.effects(
							{
								duration: 1000, 
								transition: Fx.Transitions.Quart.easeOut
							}
						);
		
		// Alter the size
		fx.start(
			{
				'width': width + 'px', 
				'min-height': height + 'px', 
				'top': top + 'px', 
				'left': left + 'px'
			}
		);
	}
	
	
	// Create the container if required, and make sure it is ready for use
	function initialiseTellContainer()
	{
		if(!$('tellHoverDiv'))
		{
			// Initialise the element
			var tellHoverDiv = new Element('div', 
				{
					id: 'tellHoverDiv', 
					styles: 
						{
							'position': 'absolute', 
							'width': '250px',
							'min-height': '150px' 
						}
				}
			);
		
			// Add it to the page
			document.body.appendChild(tellHoverDiv);
			
			$('tellHoverDiv').innerHTML = '<div id="tellHoverClose"><a href="#" id="tellCloseHoverLink">X</a></div><div id="tellHoverMain"><div id="tellHoverTitle"></div><div id="tellHoverContent"></div></div>';
			
			// If the user clicks the close button
			if($('tellCloseHoverLink'))
			{
				$('tellCloseHoverLink').addEvent('click', 
					function(e) 
					{
						e = new Event(e).stop();
						
						fadeoutToHidden($('tellHoverDiv')); 
					}
				);
			}
		}
		
		changeSize($('tellHoverDiv'), 250, 150);
		
		$('tellHoverTitle').innerHTML 	= '&nbsp;';
		$('tellHoverContent').innerHTML = '<center><img src="profile_information/spinner.gif" style="margin: 10px 0;" /></center>';
	}
	
	
	// Calculate what should happen to this container
	function calculateTellContainerPosition(mouseX, mouseY, mX, mY)
	{
		var width 	= $('tellHoverDiv').getStyle('width').toInt();
		var height 	= $('tellHoverDiv').getStyle('min-height').toInt();
		
		var adjX = -10;
		var adjY = -10;
		
		if(x_dir == 'left')
		{
			adjX = width + 10;
		}
		
		if(y_dir == 'bottom')
		{
			adjY = height + 10;
		}
		
		width 	= mouseX - width + adjX;
		height 	= mouseY - height + adjY;
		
		$('tellHoverDiv').setStyles(
			{
				'left': width,
				'top': height
			}
		);
		
		//if($('tellHoverDiv').style.opacity == 0)
		//{
			//alert(width + ' ' + height);
			fadeinFromHidden($('tellHoverDiv'));
		//}
	}
	
	
	// Make the size of the container change
	function resizeAuto(element, width, height)
	{	
		if(element.style.opacity > 0)
		{
			morphSize(element, width, height);
		}
		else
		{
			changeSize(element, width, height);
		}
	}
	
	
	// Change the size of the container instantly (without transition)
	function changeSize(element, width, height) 
	{
		element.setStyles(
						{
							'width': width,
							'min-height': height
						}
					);
	}
	
	
	// Fade in from hidden
	function fadeinFromHidden(element) 
	{
		var myFadeIn = new Fx.Style(element, 'opacity', {duration: 400});
		myFadeIn.hide();
		element.setStyles(
			{
				'display': 'block',
				'opacity': 0
			}
		);
		myFadeIn.start(0, 1);
	}
	
	
	// Fade out to hidden
	function fadeoutToHidden(element) 
	{
		var myFadeOut = new Fx.Style(element, 'opacity', {duration: 400});
		myFadeOut.start(1, 0);
	}

});