Page Visibility API Wrapper with focus\blur failback

page_visibility.js

(function($){
	var prop = 'VisibilityState';
	var evt = 'visibilitychange';
	
	var vendors = ['webkit', 'ms'];
	var vendor;
	
	function set_state(state){
		$(window).trigger('visibilitychange', state);
		
		$.visibilityState = state;
	}
	
	// detect property vendor prefixed property, if available
	for (var i = 0; vendor = vendors[i]; i++){
		if (vendors[i] + prop in document){
			vendor = vendors[i];
			prop = vendor + prop;
			
			break;
		}
	}
	
	// setup event handlers
	if (vendor){
		$(document).on(vendor + evt, function(){
			set_state(document[prop]);	
		});
	} else {
		// not as cool failback -- this is functionally different than the visibilitychange event
		// it's recommended you understand what makes the two different before using this code
		$(window).on('focus', function(){
			set_state('visible');
		}).on('blur', function(){
			set_state('hidden');	
		});
	}
	
	// set initial state
	$.visibilityState = document[prop] || 'visible';
	
}(jQuery));