sprite UI elements

having each UI element in its own image seemed overkill. since
Kinetic.Image has a crop feature it's possible to put all of the UI
elements into one sprite sheet. Maybe there's a hidden function that
will do this without the need to write our own.
clean up UI creation with loops
put the UI elements onto a separate layer

I'm not sure why I thought two layers wouldn't render together.
condense directional function into one slide function

there was too much repetition in the direction slide functions. moving
forward it makes sense to have only one function for each kind of
animation that might be configurable.