issue number one, it seems you completely understand what is going on with the resize, so why would you take it out just because it didn't help with the smaller screens? just leave it in and also call it once when the page first loads. You are trying to do one or the other, but it sounds to me like you want both, so why arent you doing both?
I just took "window resize" off of your function, gave it a name, and then called it once right away and once every resize event.
and to point 3, just because you can learn more here doesn't mean that you shouldn't also google. a quick google of "How do I resize the canvas in Raphael" came up with the right answer on the first link. just put that one line in your decider function one for each slim, or original (or you can put it in the slim/original functions either way...) and that's it
When you don't also google on your own it makes me want to help a little less, because it makes me feel like I'm doing all the work...
That's not a problem if you want to contract me to write it for you :) then you never have to google anything ;)
jsfiddle.net/SJsuJ/32 in this one I made the default color blue so that the circle could be added to the blue gear when it gets created. otherwise if I add a circle to the default gear structure, it fades with the rest of the gears when they move around. I didn't like the way that looked jsfiddle.net/SJsuJ/33
So, solution #32 is likely the one you want, but it really only works well if you want to add a link to one gear. If you want to add a link to more gears, all gears or an arbitrary selection of gears I would need to make it a little more complex. Either drill down on an element to prevent them from changing when the gears reposition, or separate the gears from the animation entirely... either would work fine, but you would need to know what it is you want.
the way i did 33 was that the circles were part of the original gear, but with 0 transparency. but the ghost effect changes the transparancy of all the shapes to .2 which fades the gear out but it fades the circle in. that is where it got a little complicated, but I'm making the circles separate from the gears.
that's what i think we should try first, the other way is to drill down in the gear grouping when we ghost out to prevent the circles from changing... that can be trick sometimes...
under normal circumstances the center circle is transparent, that way you can still place it on top of other elements and it is see through, but when it is ghosting it becomes a solid white circle...it's really not noticable...
I can't reccommend anything that is better than reading lot's and lot's of onine articles and blogs that discuss the problems and finer points of javascript. also remember to read the comments section of the blogs because people discuss what they read and sometimes it helps you understand the article better
there is no way to message a user directly in stack exchange, and once we are done with this room I think it will get closed... so if you want to work on something together again you can reach me at blaze4218@yahoo.com and we can come to this or another chat room and work on other stuff.