Dynamic framing of images using Jquery and PHP

[willothewisp]

I'm completely stuck and I need help. I've been trying to create a picture framing utility (for photos etc). where the user can specify the size of their photo, then choose a coloured cardboard mount and a frame type to go around it. The site my client chose for me to create something similar to is this: http://www.ezeframe.co.uk/picture-frames

You can see that the user can specify their picture size, frame and mount, and see it taking shape on screen. Where I've come unstuck is the scaling. You can see in the above example that if someone changes their mount size or frame type, they change so that they remain in proportion to the picture size. I've been trying to make my system do the same and I'm failing! I'm sure it's my maths that's wrong but can't work out where.

What I've done so far (without scaling) can be seen on the clients live site here: www.vivarti.co.uk/bespoke-frames

I've done it mostly using CSS, Jquery and AJAX.

 

The way it works is that I have a fixed pixel area to work within. When the user alters the size of frame moulding, or the cardboard mount, it needs to scale the 'image area', mount and frame in proportion.

I've tried doing it using fixed pixel width, percentage width and every other way I can think of, but I still can't get it to work properly.

 

Is there a better way to do this kind of thing than using Jquery, or can anyone help me work out the maths to make my version scale? A tall order I know but I'm just hoping someone can help me!

Thanks in advance.