Online diagram editor +/- user sign-in ability

I am medical student (on a tight budget) I really want to get all the cost under budget so that it will all work out well for both of us.

In order get the final pricing right I would like to illustrate the full vision of the website I am trying to make.

From the user point of view:

I am expecting the user to be able to create flow diagrams and allow other loged-in users to contribute after the author has enabled them to do so. -->as you can see this will allow user to be able to collaborate and make contribution to the flow diagram.

Any users either the author of the flow diagram or just a passer by who just bumped into that diagram can access to see who has changed what on the diagram.

I want users can have discussion with other users or even the author of that flow diagram on the 'social tags (mentioned below)'.

From the technical point of view:

I am trying to create a website where loged-in users can create flow charts that uses connectors from something like jsplumb (or something even better that you might think to be suitable to link boxes within the flow chart) to joint the boxes within the flow chart.

A variation in terms of the colour (fill and line) for the boxes and connectors is an optional (optional)

these boxes must be resize-able (both vertical and horizontal) on so that user can change the dimension of the box--> this might be achievable with just the textarea-resize 'yes' option from css. I hope the box edge to have a radius of 15 curvature (if you think another radius size is better feel free to improvise). I would love to have the boxes to have 4 source-endpoints and 4 target-endpoints which are situated on each line of the box.

(textarea: arial-helvetica, 10pt, large)

In jsplumb there are a few connectors that are pre-made and i think they are sufficient for what i am looking for as long as they have an arrow that points from the source-endpoint to the target endpoint

I understand have played with jquery's draggable and it is also used in jsplumb. here I hope to set the snap to grid function to be 10x10 or 20x20. (optional)

I know that we can zoom in and out using the web browser however due to the fact that it zooms from the upper left corner of the browser it forces the user to reposition their viewbox every time they zoom in and zoom out when they are building their flow diagram. I found two or three API that can be used to solve this problem one is RaphaelJS (there is an older version of raphealJS that i played with currently only available thru stackflow ) or its original spinoff svgpan. both uses the mouse scroll to cause zooming depending on the position of the pointer and on top of that the older version of raphealjs allows you to limit the zooming in and out limit which is extremely nice. (if see that you have used something even better in the past just use what you are comfortable with) (optional)

I want to create different layers over the flow diagram that i just mentioned above.

These layers are to be named:

1. treatment

2. investigation

3. signs and symptoms

4. references

5. notes-personal use (only the user who wrote it can see it)-position and text is editable by the user only

6. social tags (The user who post it can show it to anyone who views that diagram)-position of the box is editable by only the author of the flow diagram however text can be added by any signed in user

buttons to access these layers are to be contained within a box that is places at the bottom of the screen, they must be hidden when not in use but when you mouse over the box they pop up and you are allowed to select any one of the 6 layers to be overlayed (simple jquery's animate mouseover works well with me but again its to your own liking).

the sort of rules of display of these different layers are as follow:

A) for layers 1 to 4, only one of them can be overlayed over the flow diagram at any one time for example: if i started of with the flow diagram, when i click the treatment button the treatmen

AJAX JavaScript jQuery / Prototype PHP Webdesign

Projektazonosító: #1634065

A projektről