/* 
@description		JQuery configuration file
@author				pvetch
@created			080314@1503	
*/

$(document).ready(function(){
    /* add class to html element to show JS is active.  Can be used as a handle in CSS for conditional styling. */
	$('html').addClass('j'); 
	/* 
		Global variables must be prepended by pack number to avoid conflicts: myvar = p17_myvar
	*/
	
	/* tabs for the maps */
    $('.tb ul.s1').tabs({navClass: 'g3',panelClass: 'g1',hideClass: 'g2',selectedClass: 'g4'});	
		
	/*
		Image classes are in the format: m01a01 - first 'm' is to make class valid; 
		chars 2-3 select map; char4 selects sub map (for example, Wales, England; 
		Northern Ireland, Eire etc).  The final two chars select imge number 
	*/			
		
	/* blank image.  This is a transparent tiling png overlaying the main map.  Replacing this dynamically allows us to create a highlighting effect */
	var p17_imgBlank = "../i/maps/mapBlank.png"; 
	/* path to the folder containing the map images and hover state images */
	var p17_imgPath = "../i/maps/";   
	/* default label */
	var p17_labelBlank = "Select a County";
    /* Bug in JQuery - hover() doesn't work on area element in IE.  Have to use separate 
	 * mouseover / mouseout events.
	 * See http://groups.google.com/group/jquery-en/browse_thread/thread/8fefc900532f7727
	 */
	/* 
	$('.b2 ul a').hover(  
						
    function(){	
			var p17_href = $(this).attr("href");
			if (p17_href) {
			  var p17_labelImg = $(this).attr("title");
			  var p17_imgSet = $(this).attr("class").substring(1,3); 
			  var p17_imgSubSet = $(this).attr("class").substring(3,4); 
			  var p17_imgVal = $(this).attr("class").substring(4); 
			  var p17_imgSrc = p17_imgPath + p17_imgSet + "/" + p17_imgSubSet + "/" + p17_imgVal + ".png";	
			  $('.b1 img').attr("src",p17_imgSrc);
			  $('.b1 label').text(p17_labelImg); 
			}
    	},
		function(){	
			var imgVal = $(this).attr("class");	
			$('map area').siblings("img").attr("src",p17_imgBlank);
			$(this).removeClass('this');	
		}
	);	 
	*/
	 
	$('map area').mouseover( 	
		function(){
			/* throw away first character, since it's only there to make the class valid. chars 1 - 3 sets the map number. */
			var p17_imgSet = $(this).attr("class").substring(1,3); 
			/* char 4 is the 'sub map' - just done this way to keep the images for wales and england separate.  Not really needed. */
			var p17_imgSubSet = $(this).attr("class").substring(3,4); 
			/* char 4 till the end of the class attribute is the number of the image. */
			var p17_imgVal = $(this).attr("class").substring(4); 
			/* combine variables together to form path to the image for the img element */
			var p17_imgSrc = p17_imgPath + p17_imgSet + "/" + p17_imgSubSet + "/" + p17_imgVal + ".png";
			/* harvest the title attribute from the current area element */
			var p17_labelImg = $(this).attr("title");
	    	/* swap image src to the generated one */
			$(this).parent("map").siblings("img").attr("src",p17_imgSrc);  
			/* swap label text to show title attribute text (name of county) if it exists */
			$(this).parent("map").siblings("label").text(p17_labelImg); 
		}
	);		
	$('map area').mouseout( 		
		function(){	
		    /* reset image source to default value */
			$(this).parent("map").siblings("img").attr("src",p17_imgBlank); 
			/* reset label text to default value */
			$(this).parent("map").siblings("label").text(p17_labelBlank); 
		}
	);
	
	
var profiles =
{
//height:600, // sets the height in pixels of the window.
//width:600, // sets the width in pixels of the window.
//toolbar:0, // determines whether a toolbar (includes the forward and back buttons) is displayed {1 (YES) or 0 (NO)}.
//scrollbars:0, // determines whether scrollbars appear on the window {1 (YES) or 0 (NO)}.
//status:0, // whether a status line appears at the bottom of the window {1 (YES) or 0 (NO)}.
//resizable:1, // whether the window can be resized {1 (YES) or 0 (NO)}. Can also be overloaded using resizable.
//left:0, // left position when the window appears.
//top:0, // top position when the window appears.
//center:0, // should we center the window? {1 (YES) or 0 (NO)}. overrides top and left
//createnew:1 // should we create a new window for each occurance {1 (YES) or 0 (NO)}.
	popupImgCaption:
	{
		height:600,
		width:788,
		createnew:1,
		resizable:1,
		scrollbars:1
	},
	popupImg:
	{
		height:600,
		width:600,
		createnew:1,
		resizable:1,
		scrollbars:1
	}	
};
$(function()
{
	$(".x88").popupwindow(profiles);
});	
	
	
	
});