var overlayApi;

$(function() {		

	
	// BIND THE OVERLAY TO THE APPROPRIATE LINKS WITHIN THE PAGE
	$(".launchOverlay a[rel]").each(function(i) {
		overlayApi = $(this).overlay(
		{
			// common configuration for each overlay
			oneInstance: true, 
			closeOnClick: true,
			top: 'center',
			expose: '#003540'
			
		});
	});
	
	// SET UP TRIGGERS TO LAUNCH THE OVERLAY WHEN CLICKED
	$(".launchOverlay a[rel]").bind('click', {}, function() {

		// grab wrapper element inside content 
        var wrap = $("#overlay .wrap"); 
        
        // load only for the first time it is opened (changed to allow login to pop up in overlay on same page as map) 
		
        	wrap.html('<div class="loadingImageWrapper"><img class="loadingImage" src="template/images/ajax-loader.gif"/></div>');
       	var url = $(this).attr('href');
        	setTimeout(function(){
        		wrap.load(url + ' #overlayWrapper');
        	}, 1000);
             

        
    	return false;
	});
	
	
	// CODE FOR HANDLING THE SEARCH BOX
	$("#searchContainer .searchField").focus(function() 
		    { 
				if ( 'Enter a placename or coordinates' == $("#searchContainer .searchField").attr('value'))
					$("#searchContainer .searchField").attr('value','');
		    }); 
	$("#searchContainer .searchField").blur(function() 
		    { 
				if ( '' == $("#searchContainer .searchField").attr('value'))
					$("#searchContainer .searchField").attr('value','Enter a placename or coordinates');
		    }); 
	
	// CODE FOR HANDLING RENAME
	 
	$("#renameForm .renameName").focus(function() { 
		if ('enter name' == $("#renameForm .renameName").attr('value'))
			$("#renameForm .renameName").attr('value','');
	});
	
	$("#renameForm .renameName").blur(function()
			{ 
				if ( '' != $("#renameForm .renameName").attr('value'))
			document.rename.submit();
			});

	//Get document title so we can tell if we need to initialise map / carousel
	var title=document.title;

	if (title=='ScotlandsPlaces Map Search'){
	// INITIALIZE OPENLAYERS
	//init(javacentrex,javacentrey,zoomextent,maptype);
		initialise_map();
	}

	var title2=title.substring(0,27);
	if(title2=='ScotlandsPlaces Record Page'){
	// SET UP ANY CAROUSELS
	$('#mycarousel').jcarousel();
	}
	
	

	
});
//use to capitalise first letter of name cannot use css as Internet exploder will capitalise after hyphens
function capitalizeMe(obj) {
		val = obj;
		newVal = '';
		val = val.split(' ');
		for(var c=0; c < val.length; c++) {
		newVal += val[c].substring(0,1).toUpperCase() +
		val[c].substring(1,val[c].length) + ' ';
		}
		return newVal;
		}



var highlightImagePath;

// The following two functions are used to highlight the maps
// Highlighting works by setting the appropriate highlight as the background
// to a div that contains the image map.
// When hovering over an area, the base image (ie. unhighlighted image) fades out
// to reveal the highlighted background.
// When moving quickly across different highlighted areas, the effects queue is cleared
// so that we avoid "highlight lag"
function mouseover(highlightArea){

	if (!highlightImagePath) {
		highlightImagePath = $('#highlightImagePath').html();
	}
	
	//format name and display on map
	var highlightAreaName = capitalizeMe(highlightArea.replace(/_/g," "));
	var highlight2AreaName =highlightAreaName.replace("And","and ");
	$('#highlightAreaName').html(highlight2AreaName);

	// Clear the effects queue of any fadeIn/fadeOut effects
//	$((".highlightmap")).queue( [ ] ).stop();
	$((".highlightmap")).stop(true, true);

	// Set the opacity to opacque
	$((".highlightmap")).css('opacity', 1);

	// Preload the image before switching the background
	var img = new Image();
	  
	// wrap our new image in jQuery, then:
	$(img)
		// once the image has loaded, execute this code
		.load(function () {
		  // set the image hidden by default    
		  $(this).hide();

			//reveal highlight
			$('#map_container').css('background-image', 'url(' + highlightImagePath + highlightArea + '.png)');
				$((".highlightmap")).css('opacity', 0.9).animate( {'opacity':0.001}); // fade out

		})
		// if there was an error loading the image, react accordingly
		.error(function () {
		  // notify the user that the image could not be loaded
		})
		// *finally*, set the src attribute of the new image to our image
		.attr('src', highlightImagePath + highlightArea + '.png');
	delete img;

	// Set menu hover state
	$('#' + highlightArea + '_name').addClass('hover');

}
function mouseout(highlightArea){
	
	// Clear the effects queue of any fadeIn/fadeOut effects
//	$((".highlightmap")).queue( [ ] ).stop();
	$((".highlightmap")).stop(true, true);

	//disappear county
	$((".highlightmap")).animate( {'opacity':1}, function() {
		$(this).removeAttr('style')
	}); // fade in
	
	// clear display of name of county
	$('#highlightAreaName').html('');
	
	// clear menu hover
	$('#' + highlightArea + '_name').removeClass('hover');
}