/*
 * JavaScript for the Digital UK Postcode Checker
 * 
 * Overlay hover for channel reception icons
 *
 * Constructed overlay html takes the following form:
 * 
 * <span class="reception_overlay_container right">
 * 		<span class="reception_overlay">
 * 			Lorem ipsum dolor sit amet
 * 			<strong><a href="#">Read more</a></strong>
 * 		</span>
 * 	</span>
 * 	
 */
 
$(document).ready(function(){ 

	/* Local variables */
	var browser = $.browser;	/* Object (jQuery): Browser information. */

	/*
		Image flicker fix for IE6. Browser sniffing is bad - however, this problem is only apparent in IE6
		so it isn't worth telling every other browser to run a Try Catch.
	*/
	if(browser.msie===true && browser.version === '6.0'){
		try{
			document.execCommand('BackgroundImageCache', false, true);
		}catch(e){}
	}
	
	// create a namespace within global scope for all overlay hover data
	overlayHover = this.overlayHover = {};

	// create an array of reception icons that need an overlay
	overlayHover.overlayLinkElements = $(".postcode ul.reception li.overlay");
	
	// array to hold each overlay 
	overlayHover.overlayObject = [];
	
	// array to hold details of whether an area is currently fading - to avoid conflicts
	overlayHover.currentlyFading = [];
	
	// array to hold details of whether an area is currently being hovered over - also to avoid conflicts
	overlayHover.currentlyHovered = [];
	
	// array for each interval listener, for mouse out event
	overlayHover.overlayInterval = [];
	
	// set a listener to for a hover over any overlay link element, for when to create or remove an overlay
	overlayHover.overlayLinkElements.each(function(i){
	
		// explicitly set a z-index on each hover element to get round IE rendering, where 
		// each position:relative element has it's own z-index context independant of others.
		// see: http://verens.com/archives/2005/07/15/ie-z-index-bug/
		$(this).css({zIndex:overlayHover.overlayLinkElements.length-i+5});
		
		// set initial values for the fade
		overlayHover.currentlyFading[i] = false;
		overlayHover.currentlyHovered[i] = false;
		
		// bind hover events
		$(this).hover(
			function(event){
				overlayHover.currentlyHovered[i] = true;
				overlayHover.createOverlay($(this), event, i);
			},
			function(event){
				overlayHover.currentlyHovered[i] = false;
			}
		)
	});
	
	
	/**
	 * Create a new overlay when the mouse hovers over an overlay link element
	 * 
	 * @param element object element that has been hovered over
	 * @param event object the mouse hover event
	 * @param i integer the number of the current overlay in the array of all overlays
	 *
	 * @return void
	 */
	overlayHover.createOverlay = function(element, event, i) {
	
		// condition : if we are not currently fading on this element, continue
		if(overlayHover.currentlyFading[i] === false) {
		
			// about to start overlay fade, stop any conflicts
			overlayHover.currentlyFading[i] = true;

			// condition : if an overlay doesn't currently exist, create one (runs once only per overlay)
			if (typeof overlayHover.overlayObject[i] != "object") {

				// search for an optional child link element, as this will contain title (hover) text if set
				var linkElement = element.find("a");
							
				// get the information to put within the overlay element
				var title = element.attr('title') || linkElement.attr('title');
				
				// condition : if set, get link href
				if (linkElement.length > 0) {
					var link = linkElement.attr('href');
				}
				
				// remove the title attribute, to stop it appearing on hover
				element.attr('title', '');
				linkElement.attr('title', '');
						
				// create the overlay html elements
				var overlayContainer = $("<span class='reception_overlay_container'></span>");
				var overlay = $("<span class='reception_overlay'></span>");
				overlayContainer.append(overlay).css({ opacity:0 });
				
				// add the link, if set
				if (linkElement.length > 0) {
					if (linkElement.hasClass('bubble_type1'))
						overlay.append('<span class="title">'+title+'</span><strong><a href="'+link+'">Click here for help re-tuning</a></strong>');
					else if (linkElement.hasClass('bubble_type2'))
						overlay.append('<span class="title">'+title+'</span><strong><a href="'+link+'">Click here for advice on upgrading</a></strong>');
					else
						overlay.append('<a href="'+link+'"><span class="title"><strong>'+title+'</strong></span></a>');
				} else {
					overlay.append('<span class="title">'+title+'</span>');
				}

				// attach it to the correct place in the html
				element.prepend(overlayContainer);
				
				// set the overlayHover variable for the new overlay
				overlayHover.overlayObject[i] = overlayContainer;
				
			// condition : the overlay already exists, so select it
			} else {
				var overlayContainer = $(overlayHover.overlayObject[i]);
				overlayContainer.css({display:"block"});
			}

			/* 
				REMOVED: due to IE fix for Z-index orders, any side-by-side overlays set to 'right'
				will appear underneath any positioned elements to their left
			*/	
				// check the mouse position, if close to the right-edge, switch side for the overlay
				if (event.pageX > 920) {
					overlayContainer.css({ marginLeft:"-142px" });
					overlayContainer.addClass('right');
				} else {
					overlayContainer.css({ marginLeft:"-32px" });
					overlayContainer.removeClass('right');
				}
			
			
			// display the overlay
			overlayContainer.animate({
				opacity:1
			},500, function(){
				
				// finished fading
				overlayHover.currentlyFading[i] = false;
				
				// set the event listener
				overlayHover.overlayInterval[i] = setInterval("overlayHover.removeOverlay("+i+")", 100);
			});
		}
	}
	
	
	/**
	 * Check whether the mouse has shifted from an overlay, every x milliseconds
	 * 
	 * @param i integer the number of the current overlay in the array of all overlays
	 *
	 * @return void
	 */
	overlayHover.removeOverlay = function(i) {
		
		// condition: if an overlay is currently set, remove it
		if (typeof overlayHover.overlayObject[i] == "object" 
			&& overlayHover.currentlyFading[i] === false 
			&& overlayHover.currentlyHovered[i] === false) {

			// about to start overlay fade, stop any conflicts
			overlayHover.currentlyFading[i] = true;
			
			// retrieve the parent element and overlay
			var element = $(overlayHover.overlayLinkElements[i]);
			var overlayContainer = overlayHover.overlayObject[i];
	
			// remove the overlay
			overlayContainer.animate({
				opacity:0
			},500, function(){
			
				// finished fading
				overlayHover.currentlyFading[i] = false;

				// stop the overlay triggering mouse hover events	
				overlayContainer.css({display:"none"});
				
				// remove the interval
				clearInterval(overlayHover.overlayInterval[i]);
			});
		}
	}
});