$(function(){
 
	// the logic will only apply to div and p elements in this example.  
	// use $("*") for all elements.
	$("div, p").visualizeStack({
 
		// CSS rules to apply.  the percent sign (%) is replaced with 
		// the appropriate color shade.
		properties: {
			background: "%",
			border: "1px solid black"
		},
 
		// the base color of the gradients.  Enter one of the following
		// colors, or a hue number for hsl(). accepted color names: 
		// red, purple, blue, turquoise, green, orange, and yellow.
		color: "red",
 
		// a hex color to apply to very lightly/darkly shaded elements.  
		// the "color" property of these
		// elements will be set to this value.  pass an empty string 
		// to disable.
		lightTextColor: "#fff",
		darkTextColor: "#000"
	});
 
});

$.fn.visualizeStack.colors = {
	red: 360,
	purple: 300,
	blue: 240,
	turquoise: 180,
	green: 120,
	orange: 35,
	yellow: 60
};

(function($){
 
$.fn.visualizeStack = function(options){
	options = $.extend({}, $.fn.visualizeStack.defaults, options);

// We only want to keep elements that have a legitimate z-index.
// If this plugin is called like $("div").visualizeStack(), for 
// example, not all divs in that selection could have a set z-index.
//
// Because the default z-index property value is "auto" we can
// safely assume a z-index was set if the value is numeric
var elems = this.filter(function(){
	return /^-?\d+$/.test( $(this).css("z-index") );
})
 
// Take those filtered elements and return an array of objects.  The 
// "element" key will be a DOM element, and the "stack" key 
// will be the z-index.  
//
// Ultimately we want to create an array sorted in order of 
// z-indexes, from lowest to hightest. But, we also need 
// to remember which element had which z-index; an array of just 
// z-indexes or just elements does not help us. 
.map(function(){
	return { element:this, stack:parseFloat($(this).css("z-index")) };
})
 
// Turn this mapped jQuery object into a pure-javascript array of
// object literals.  If we didn't call get(), we would still be working
// with a jQuery object of object literals.
.get()
 
// Finally, sort the array ascending based on the "stack" property
// of the object.  Returning hierarchal numbers in sort() determines where
// to place the array item.
.sort(function(a,b){
	return a.stack === b.stack ? 0 : (a.stack < b.stack ? -1 : 1);
});

// nothing found?  bail.
if(!this.length || !elems.length){
	return this;
}

var 
 
// the last "lightness" number will be recorded here.  We'll start with 90.
lastColor = 90, 
 
// the last z-index level will be recorded here.  Start with the first
// z-index in our elems array, or the lowest z-index.
lastStack = elems[0]['stack'],
 
// To define the gradient spectrum color, users can either pass in a
// name of a color (like red) OR a starting hue color.  If the user
// passed in a name, lookup it's hue value in $.fn.visualStack.colors.
// otherwise, use the number.  I'm making an assumption users will read
// the docs and don't try to enter the name of an unsupported color.
startHue = /\w/.test(options.color) ? $.fn.visualizeStack.colors[options.color] : options.color;

// figure out how many unique z-index there are
var uniqueStacks = (function(){
 
	// where we'll store the unique z-indexes
	var uniques = [];
 
	$.each(elems, function(i,obj){
		if($.inArray(obj.stack, uniques) === -1){
			uniques.push(obj.stack);
		}
	});
 
	return uniques.length;
})();

// loop through the array of objects
$.each(elems, function(i, obj){
 
	// jQuerify our element
	var $element = $(obj.element),
 
		// determine the lightness value.  if this z-index
		// is the same as the last z-index, use the last lightness
		// value.  otherwise, create a new, darker shade
		color = lastColor = (obj.stack === lastStack)
			? lastColor
			: lastColor-(100/uniqueStacks);
 
	// loop through the CSS properties to add
	$.each(options.properties, function(prop, val){
 
		// replace the percent sign in the property value with the
		// hsl() color.  "background-color: %" will become
		// "background-color: hsl(h, s, l)"
		$element.css(prop, val.replace("%", "hsl("+startHue+",100%,"+color+"%)") );
 
		// change the text color property when the shade becomes 
		// too light or too dark to read
		if(options.lightTextColor.length && lastColor < = 50){
			$element.css("color", options.lightTextColor);
		} else if(options.darkTextColor.length && lastColor >= 50){
			$element.css("color", options.darkTextColor);
		}
	});
 
	// remember what the last z-index value was
	lastStack = obj.stack;
});

return this;
 
// close $.fn.visualizeStack
};
 
// remember how you can pass in a color name as the "color"
// property?  these are the supported colors and their hue
// equivalents for CSS3's hsl()
$.fn.visualizeStack.colors = {
	red: 360,
	purple: 300,
	blue: 240,
	turquoise: 180,
	green: 120,
	orange: 35,
	yellow: 60
};
 
// plugin defaults
$.fn.visualizeStack.defaults = {
	color: "red",
	properties: {
		"background": "%"
	},
	lightTextColor: ""
};
 
// close the wrapping closure, passing in the jQuery object
// so $ can be used inside this plugin without conflict
})(jQuery);