Though this function is named after CSS (namely Cascading Style Sheets), it can be lent to other usages not strictly implied with style sheets; the fact the name css entered in the title is that the most obvious usage of this function is when used to grasp layers and change their styles recursively; yet as you will see the function is not inherently limited to this, actually.

Such function, named arpeggios, comes in with two additional functions (all these three functions appear together in the codex section):

• emptyShell
• shellGuest

These two functions are, basically, an emulation of ULMA and a transposition of it outside of its originally strictly layer oriented nature; yet they are much shorter than ULMA (about one tenth), and you do not need to know what ULMA is or how it works in order to use these "versions".

The reason I added these two functions is this: since the arpeggios function relies on javascript timeouts in order to recursively apply a set of modifications (arpeggios), such timeouts could no longer retrieve their arguments after the first run (a well known issue with timeouts), and the only way to make them retrievable would have been to assign such arguments as globally defined variables attached to the window object. But this would have meant taking chances: a name could have overwritten a window object which already got previously assigned the same name.
In order to avoid such potential name conflicts that could have ensued (the arpeggios needs many arguments, so would have needed assigning many variables to the window object), I devised this ULMA-like encapsulation, so that as you'll see you can build arpeggios without having to populate the window object with too many new variables.

The arpeggios function works as follows: it takes in a set of layer names, and will run for a specified number of rounds.
At each round, the arpeggios will scan a specified amount of layers. If at the next round the specified amount would overstep the amount of available layers when scanning them, it is smart enough to assume it has to restart from the beginning of the list of layers until the currently undertaken amount is exhausted.
It is important that you grasp this difference between rounds and amounts: rounds specifies how many times the function will run (each time by a setTimeout), whereas the amounts specifies how many layers are inspected and therefore affected within the current round.

Basically, the rounds are meant to establish how many times an action must be repeated (like painting a layer, for instance), the amounts are meant to specify on how many layers (or other objects, this function is flexible because, as you'll see, it "just" repeatedly applies a second custom function invented by yourself) are concerned with the same action performed in the round: instance, should you paint at this round with this action one layer alone, or an x amount of layers listed in the array argument named ids?

Pay attention: as just said above you then/also have to craft one custom function (or more, for that matter: but let's imagine just one, which is by far the most common case and the case after which the function arpeggios has been conceived): at each round the arpeggios will apply such custom function to each layer currently affected by the amount scan in the round. In case of multiple functions, at each round will apply a subsequent one in the array of the passed custom functions.
When this (these) function(s) is passed to affect such layers, three arguments are assigned to it, drawing such arguments from the arpeggios function arguments itself: the affected ids, the properties to affect onto them, and the values to assign to such property(ies).
These arguments can also be instructed to be arrays: you pass, for instance, the properties argument to the arpeggios and it has to be an array, then this very same argument which is an array is, entry by entry, passed to the custom function: now, if each entry was an array itself, your custom function can be tailored/meant to disaggregate the argument. It's your decision depending on what you want to do.
Thus, in order to summarize: at each round happens what follows:

• A round starts:
• An amount set of layers is inspected in the list of those passed in the ids argument (you pass say 10 layers in the ids argument, and the amounts argument is say 2? each round affects two layers then), starting each round from the ids entry after the last ids visited/affected entry.
  If the end of any argument array is reached and yet there are amounts left, they are exhausted restarting from the beginning of the passed layers. Instance: 6 rounds, 10 ids, and amounts is 2:

  ---

  ROUND 1 : handle ids1, ids2 (for amounts is 2)
  ROUND 2 : handle ids3, ids4
  ROUND 3 : handle ids5, ids6
  ROUND 4 : handle ids7, ids8
  ROUND 5 : handle ids9, ids10 (ids over, restart:)
  ROUND 6 : handle ids1, ids2 (end of rounds, exit timeouts and arpeggios)

  ---

  You can then truly arrange a variety of different behaviours.
• Is invoked your custom function(s) upon each ids (arguably layer ids)
• To this custom function, upon invoking it from within the arpeggios function, are passed 3 arguments:
  0. A layer ID, taken as one entry by one, from the ids array argument passed to the arpeggios.
  1. A property, taken as one entry by one, drawn from the argument in arpeggios named properties, which must be an array.
  2. A value, taken as one entry by one, drawn from the argument in arpeggios named values, which must be an array.
• Thus, depending on what your custom function will do with such arguments, the layer will be handled, and the properties and values will be manipulated accordingly to your custom function inner proceedings.
• A new round starts (if any left)

As you may intuitively guess, in a custom function the ideal settings are that each layer will find, in the custom function, the properties set as equal the passed values as your custom function says.
The arpeggios function thus will go on "harping" and "combing" the layers and applying repeatedly the custom function thus painting and repainting them or affecting them with the action imposed by your custom function, until the end of the established rounds is eventually attained.

Now, in order to actually use the arpeggios, you need to proceed as follows. Remember that there are two other functions named emptyShell and shellGuest whose purpose is to be called in so to avoid that all those arguments outlined above will be assigned to the window object, thus jeopardizing the window and the functionality of the timeouts both.
Now, since the procedure is similar to ULMA, I won't detail the whys and whereofs here: just trust me and follow me.

Firstly, initialize a variable with whatever name you prefer; let's say you choose as name foo:
var foo;
Now set:
foo=new emptyShell('foo');
Note that you have to pass one argument to this constructor, and such argument must be the very same name of your chosen variable name in between quotes.
Then write:
foo.enable('arpeggios');
You have assigned to foo the method named arpeggios.
Now to set the properties of this arpeggio, you have to do something rather unusual in javascript (though rather common in Java!): you have to assign the arguments by a built in method named setAttributes:

foo.arpeggios.setAttributes(
"ids", [array of ids],
"speeds", [array of speeds],
"functions", [array of functions],
"properties", [array of properties],
"values", [array of values],
"amounts", [array of amounts],
"rounds", Number,
"jumps", [Array of numbers],
"gen5browsers", 0 /*last; no ending comma*/
);

Note that in red are listed the name of the arguments themselves, and they

• Are in between quotes
• Are all lowercase

Be sure they are such also in your instance of invocation.
After each argument names is listed, as you see, its value (mostly arrays).
It is not strictly necessary they are passed in such order too, as long as the pairs argument/value are alternated matching with your intentions, and the names of the arguments match the ones outlined above and are lowercase and in between quotes. gen5browsers is entirely optional.
Now, to actually start your arpeggios, write:
foo.arpeggios.execute();

So, a global example: after you have included the 3 functions arpeggios, emptyShell, shellGuest, and created your custom function(s), you write:

---

var foo;
foo=new emptyShell('foo');
foo.enable('arpeggios');

foo.arpeggios.setAttributes(
"ids", [array of ids],
"speeds", [array of speeds],
"functions", [array of functions],
"properties", [array of properties],
"values", [array of values],
"amounts", [array of amounts],
"rounds", Number,
"jumps", [Array],
"gen5browsers", 0 /*last; no ending comma*/
);

foo.arpeggios.execute();

---

The arpeggios just featured, though not linked strictly to layers, are none the less linked to timeouts.
I provide here a, say, depleted version of the arpeggios which is not linked to timeouts any longer, and whose purpose is to make a mere computation thus returning only numerical indexes and affecting no layers.
Please note that this is truly a standalone function which requires nothing else but itself, namely does not resort to emptyShell and to shellGuest in the least.

You feed it with at most 4 arguments, passed exactly in the following order:

1. ids: in this case still an array. Could even be an array of numbers from zero onward, if you want the output to be of arrays populated with subsequent numbers only.
2. amounts
: an array. All that has been exposed for this argument in the non computational arpeggios' argument overview fully applies to the computationalArpeggios too.
3. rounds
: a Number. All that has been exposed for this argument in the non computational arpeggios' argument overview fully applies to the computationalArpeggios too.
4. jumps
: an array. All that has been exposed for this argument in the non computational arpeggios' argument overview fully applies to the computationalArpeggios too.

No external custom function is required, because this is a computational only version and needs not to affect external objects but only to return numerical results: in this case the output is an array of arrays: each entry of the backbone (mother, first) array is a rounds argument cycle, and being each such cycle returning a second array, this latter array is an array whose each entry is an argument ids entry as it was picked at each amounts argument cycle.

So, example:
var output=computationalArpeggios(['a','b','c','d','e'], [2], 5, [1]);
means that on a simple array like the one listed as first argument, are performed 5 rounds whose amounts (namely the ids entries picked at each round) is 2 (could have been 1, or 3...).
I specified also the last argument, named jumps, though as said it is not truly necessary.
The output is thus:
output[0]=[a,b]
output[1]=[c,d]
output[2]=[e,a]
output[3]=[b,c]
output[4]=[d,e]
So, for instance:
output[2][1]
is equal to 'a'.

a Joan Miro painting: Blue 1, (1961)
THE COMPUTATIONAL ARPEGGIOS CODEX
	The model on the left is Adriana Lima ADRIANA LIMA ON THE NET
TEST IT
(whitespace separated array arguments) IDS: AMOUNTS: ROUNDS: JUMPS: [ in deafult example: jumps are an Array! The output will reflect this ]
Output prints here:
A Joan Miro painting: Silence, (1961)