Hello

Imagine the need to support a system of skins. Each skin should know
how to render a specific entity. A skin could have the following
abstract functions:
- renderButton
- rednerTable
- renderHeader
and so on.
The output of these functions should be HTML which provides a
concrete implementation based on the skin.
We could have a 'wood' skin which renders its button in a brownish
color, a metal looking skin, and so on.

The complication comes from the requirement that the skin
implementation cannot be browser dependent.
There could be a Firefox implementation for each of the skins and
yet an IE implementation and possibly a few other supported browsers.

This forms two sibling hierarchies with the Browser abstract class
at the top of one and abstract Skin at the top of the other.

My question is, how can I combine these two hierarchies in a smart
way so that I will be able to easily support new skins and new
browsers?

I don't want to end up writing classes like: MetalIESkin,
WoodFirefoxSkin and so on because this solution isn't robust.

I was thinking about having the Skin functions take a Browser object
as a parameter and then user it to render themselves, but I am not
sure how this helps me.

My ultimate solution should have an isolated code that knows how to
render the metal button for IE (for example).
I was thinking about the Abstract factory and Prototype design
patterns but I fail to take them into the next step and using them
to achieve my goal

I would appreciate any help you could offer me
Regards