Now, we listen for the Slider's valueChange event. This event is fired when the value of the Slider has changed.

Next we use the StyleSheet utility to dynamically change a style rule to resize the images.
The style rule that we want to change is #yui-main .yui-g ul li. When the Slider's value changes, we will take the value and divide it by 2, then use that as the percentage width of the li.
This will give us the effect we want (resizing images) without touching all the images via the DOM.

Event Delegation

This listener listens for all mouseup events on the document and it will only fire when the target element matches the * selector (which should be all elements).

This way we can remove all the selected CSS classes from all the images in the browser when a mouseup occurs, only if the shift key was not pressed. We can then check to determine if the mouseup came from one of the images. If it has, add the selected class back to it.

This listener, listens for all click events on the album list #photoList li.
First, it stops the click, so the href is not followed. Next, it removes all the selected classes from the list. Then, it adds the selected class to the item that was clicked on.

After that UI setup, it uses Selectors to change the view of the images in the browser.
First, it checks if we are viewing "all" or a "sub album". If all is selected, it removes the hidden class from all the images.
If it was an album, it adds the hidden class to all the images, then selects all the images with the class of its id, then it removes the hidden class from them.

Basically, it hides all the images, then determines the ones it needs to show and removes the hidden class from them.

//Listen for all clicks on the '#photoList li' selector
Y.delegate('click', function(e) {
//Prevent the click
e.halt();
//Remove all the selected items
e.currentTarget.get('parentNode').all('li.selected').removeClass('selected');
//Add the selected class to the one that one clicked
e.currentTarget.addClass('selected');
//The "All Photos" link was clicked
if (e.currentTarget.hasClass('all')) {
//Remove all the hidden classes
wrapper.all('li').removeClass('hidden');
} else {
//Another "album" was clicked, get its id
var c = e.target.get('id');
//Hide all items by adding the hidden class
wrapper.all('li').addClass('hidden');
//Now, find all the items with the class name the same as the album id
//and remove the hidden class
wrapper.all('li.' + c).removeClass('hidden');
}
}, document, '#photoList li');