JavaScript / jQuery GURU required for difficult graphical webpage project - repost

You MUST have high-level skills with JavaScript and/or jQuery to apply for this project. Do NOT apply unless your skill level is EXCELLENT!

The project involves:

* graphics being drawn by JavaScript

* drag-and-drop items on a webpage

You are required to build a user-interface VERY similar to the one described here: [url removed, login to view]

This video shows a web-based facility for placing singers onto "risers", when the singers are standing on stage singing in a choir. "Risers" are steps where singers stand to sing. The larger rows at the back, which contain more singers, are higer up. This way, all singers can be seen by the audience.

I only require the functionality described from 0:43 to 3:00 in that video. I require several minor changes from what is described in the video, but the video summarised quite well what I need.

The page you create will be part of a larger web-application written in PHP, but this project does not include any server-side programming.

Here's what's NOT required from the video:

* The page header and left menu. I only require you to create the functional graphical area in the main part of the page (the "risers") and the controls immediately above and below it.

* The "Filter Setting" drop-down list is not required

* The "Sections" and "Front row: even/odd" controls should be combined into a single control called "Number in Front Row", which will be a drop-down list containing the numbers from 1 to 20. When the user selects a value from the drop-down, the risers area should redraw to show a larger or smaller set of risers. The row behind the front row should contain space for exactly one more person than the front row, and the next row should contain space for one more person, etc etc. The people are always centred on the risers. The risers will always be curved, and the more people in the front row, the more of an arc the risers will become. When there are 20 singers in the front-row, the risers should form a semi-circle.

* The "Display" drop-down doesn't require the "Voice type" option

* The "vertical" lines separating the "sections" of the risers are not required to be drawn, but one line should always be drawn vertically down the middle of the risers.

* The "Save" button at the bottom does not require a name to be specified, and there is no need for a "delete" button. Nor is there any need for a "save a copy" tickbox. Nothing below that tickbox is required either

* The tabs across the top ("View", "Edit", "Outline", etc) are not required (nor is anything above them).

All other functionality and visuals are required.

When the PHP application creates the page, the full list of singers (including URLs of their photos) will be provided within the page itself. If you prefer, this can be provided via an AJAX call (whatever you prefer). The parameters of the risers (number of rows, number of singers in the front row, and the current placement of all singers) will also be provided within the page (or via AJAX). The format that this data is provided in can be any format you want (XML, JSON, a simple array of JavaScript objects embedded in the page, etc).

When the save button is pressed, the riser configuration (placement of each singer) must be submitted to the server. Again, you can send this data any way you prefer.

There will also be an extra parameter passed: Whether the page should be in "Read-only" or "Editable" mode. In "read-only" mode, none of the controls will be displayed, and drag-and-drop will not be enabled.

This needs to work in ALL major browsers, including IE7 and iPad (phones not required).

If you require it, I can give you access to a working version of the page shown in the video, but you must NOT copy the code from that page. All code must be either open-source or created by you.

Please watch this video several times before quoting. There is quite a complex piece of coding.

Graphic Design HTML JavaScript

Project ID: #4140858

About the project