// ----------------------------------------------------------------------------------------------------
// OFFER SCRIPTS
// ----------------------------------------------------------------------------------------------------

	var flagOffSrc	= '/templates/splash/default/images/planner_flag_off.png';
	var flagOnSrc	= '/templates/splash/default/images/planner_flag_on.png';
	var flag		= null;
	var zIndex		= 1;
	
	if(window.console == null)
	{
		window.console = {log:function(){}}
	}
	
	function initFlags()
	{
		var offsetX 	= 24;
		var offsetY		= 28;
		var flagHTML	= '<img src="' +flagOffSrc+ '" />';
		
		for(var id in offers)
		{
			var x		= offers[id].x - offsetX;
			var y		= offers[id].y - offsetY;
			var html	= '<div class="flag" id="flag-' +id+ '" style="left:' +x+ 'px; top:'+y+'px; z-index:' +y+ '">' +flagHTML+ '</div>';
			$("#flags").append(html)
		}
		
		$("#flags .flag")
			.bind
			(
			 	'click', 
				function(event)
				{
					highlightOffer(event);
					viewOffer(event);
				}
			);
	}
	
	function initOffers()
	{
		$('#search_results_box a')
			.bind('mouseenter', highlightOffer)
			.bind('click', viewOffer);
	}

	function initMap()
	{
		$('#kentmap')
			.bind('click', hideOffer);
	}
	

	
	function highlightOffer(event)
	{
		event.stopPropagation();
		
		//console.log(event.target)
		var element		= event.currentTarget;
		var tag			= element.nodeName.toLowerCase()
		if(tag == 'a' || element.className == 'flag')
		{
			// hide offer
				if(tag == 'a')
				{
					hideOffer();
				}
			
			// hide old flag
				if(flag)
				{
					flag.src = flagOffSrc;
				}
			
			// show new flag
				var id			= element.id.split('-')[1];
				var container	= $('#flags #flag-' +id)
				flag			= $('img', container)[0];
				
				if(flag)
				{
					flag.src = flagOnSrc;
				}
		}
	}
	
	function viewOffer(event)
	{
		var element		= event.currentTarget;
		
		console.log(element);
		
		if(element.nodeName.toLowerCase() == 'a' || element.className == 'flag')
		{
			// base vars
				var id		= element.id.split('-')[1];
				var offer	= offers[id];//flag	= $('#flags #flag-' + id);
				
			// content
				var text	= '<p><strong>'+offer.title+'</strong></p><table cellspacing="0" cellpadding="0" border="0"><tr><td colspan=2>'+offer.description+'</td></tr>';
				if(offer.temp){
					var	temp    = '<tr><td><strong>Temperature</strong></td><td>'+offer.temp+'</td></tr>';
				}
				if(offer.wind_direction){
					var	wind_direction    = '<tr><td><strong>Wind Direction</sttrong></td><td>'+offer.wind_direction+'</td></tr>';				
				}
				var	text2   = '</table><p><a href="http://news.bbc.co.uk/weather/forecast/'+offer.weather_rss+'" target="_blank">View full BBC weather forecast</a></p>';

				if(offer.tide_url){
					var tide_url	= '<p><a href="' + offer.tide_url + '" target="_blank">View BBC tide information</a></p>';											
				}
				if(link!=''){
					var link	= '<p><a href="' + link + '">View website</a></p>';					
				}
				var link	= '';
				
				$('#info-content')
					.html(text + temp + wind_direction + text2 + tide_url + link)
					
			// position
				var center	= 636 / 2;
				var xOffer	= parseInt(offer.x);
				var x		= xOffer < center ? xOffer + 20: xOffer - 245;
				
				var height	= $('#info').height() + 10;
				var y		= offer.y - (height / 2) - 4;
				
				var css		= {'left':x + 'px', 'top':y + 'px'};
				
			// update the element
				$('#info')
					.css(css)
					.fadeIn(250)
					
			// show the correct arrow
				$('.info-arrow')
					.css('visibility', 'hidden');
					
				$('#info-' + (xOffer < center ? 'left' : 'right'))
					.css('visibility', '');
		}
	}
	
	function hideOffer(event)
	{
		$('#info').fadeOut(250)
	}
	


// ----------------------------------------------------------------------------------------------------
// BUBBLE INFO SCRIPTS
// ----------------------------------------------------------------------------------------------------

	function initBubbleInfo()
	{
				
		$('.bubbleInfo').each
		(
			function ()
			{
				var distance		= 10;
				var bubbleAnimTime	= 250;
				var hideDelay		= 100;
	
				var hideDelayTimer	= null;
	
				var beingShown		= false;
				var shown			= false;
				var trigger			= $('.trigger', this);
				var info			= $('.popup', this).css('opacity', 0);
	
				if (hideDelayTimer)
				{
					clearTimeout(hideDelayTimer);
				}
				if (beingShown || shown)
				{
					// don't trigger the animation again
					return;
				}
				else
				{
					// reset position of info box
					beingShown = true;

					info.css
					(
						{
							top: -90,
							left: -33,
							display: 'block'
						}
					)
					.animate
					(
						{
							top: '-=' + distance + 'px',
							opacity: 1
						},
						bubbleAnimTime, 
						'swing', 
						function()
						{
							beingShown = false;
							shown = true;
						}
					);
				}



				$([trigger.get(0), info.get(0)]).mouseover
				(
					function ()
					{
						if (hideDelayTimer)
						{
							clearTimeout(hideDelayTimer);
						}
						
						hideDelayTimer = setTimeout
						(
							function ()
							{
								hideDelayTimer = null;
								info.animate
								(
									{
										top: '-=' + distance + 'px',
										opacity: 0
									}, 
									bubbleAnimTime, 
									'swing', 
									function ()
									{
										shown = false;
										info.css('display', 'none');
									}
								);
		
							},
							hideDelay
						);
						return false;
					}
				);
			}
		);
	}
	

// ----------------------------------------------------------------------------------------------------
// START
// ----------------------------------------------------------------------------------------------------

	$(document).ready
	(
		function()
		{
			initFlags();
			initOffers();
			initBubbleInfo();
			initMap();
		}
	);
