(function($){  
    jQuery.fn.idle = function(time){  
        var i = $(this);  
        i.queue(function(){  
            setTimeout(function(){  
                i.dequeue();  
            }, time);  
        });  
    };  
})(jQuery); 


$(document).ready(function(){
	
	/*
	 * VARIABLES
	 */
	
	// region is the region hovered/selected
   	var region = '';
   	// overlayed means the region has been clicked
	var overlayed = false;
	// set the transition time for the map elements
	var transitionFadingOutTime = 200;
	var transitionFadingInTime = 400;
	
	/*
	 * VERBOSE
	 */
	
	$('.map .verbose').fadeIn(200);

	$('.map .verbose').hover(function(){
		$('.map .verbose').wait(500).fadeOut( 400, function(){
			$('.map .verbose').hide();
		});
	});
	
	function verboseDisplay() 
	{
		if ( ! overlayed )
		{
			$('.map .verbose').fadeIn(200);
		}
	}
	
	/*
	 * AREA
	 */
	
	// click on a region
	$('area').click(function(){
		$(location).attr( 'href', '/portfolio/' + $(this).attr('class') + '/' );
	})
	
	// when new area id hovered, spotlight appears
	$("area").hoverIntent(function ()
	{
		var newregion = $(this).attr("class");
		
		if ( newregion != region )
		{
			overlayed = true;
			region = newregion;
			$('img.original').fadeOut( transitionFadingOutTime );
			$('#'+newregion+'.spotlight').fadeIn( transitionFadingInTime );
		}
		
	},
	// when new area is hovered out ( and not clicked ), spotlight disappears
	function()
	{
		$('.map .verbose').hide();
		
		if ( overlayed )
		{
			$('.spotlight').fadeOut( transitionFadingOutTime );
			$('img.original').fadeIn( transitionFadingInTime );
			region = '';
			overlayed = false;
		}	
	});
	
});