JQuery mobile builder prototype

We are looking for an experienced JavaScript/jQuery programmer with basic
knowledge of jQuery mobile, php and MySql.

Project scope:

Develop a jQuery mobile builder prototype. This job is to establish the
basic structure of the builder and will be a reference to choose a candidate
to continue the project. We will be looking at the coding practice,
efficiency and creativity in applying solutions.


Requirements:

- The builder will need to be compatible with the latest version of Chrome,
Firefox, Safari and IE9+
- use the latest jQuery mobile version (1.4.+ beta version)

A model to help describing the project can be found at this location:
epsilonweb.fr/proto/drag-and-drop/

* Please note that this model is not a reference of good coding
practice. It is just a quick mockup put together for purpose of describing this
job.

Existing mobile builder reference:
appery.io and codiqa.com (You can open free accounts to test them)

Project description:

- The builder will need 3 main sections: The elements library, the mobile
website preview (iframe) and the elements properties editor.
- Elements can be dragged from library to the mobile website preview. Once
dropped in the website preview, they should be converted to the jQuery
mobile element.
- The scroll bar in the mobile preview div should only appear on hover (like on the codiqa.com builder)
- Left clicks on the mobile preview should behave like the mobile website.
(i.e. if a drop down, it will open, if a button, it will click, ...)
- Edit the properties of the website preview (The changes should update live as on the appery.io builder)
- Generate the jQuery mobile website on another address (example:
epsilonweb.fr/proto/mobilewebsite1
- Update the jQuery mobile website located on another page on each change
(asynchronously in order not to slow down the builder). At any time the user
could look at the latest version of the website on his mobile phone.
- When hovering elements in the mobile preview div, the div limits should be
highlighted with a border and a menu should be display below the div. If the
bottom of the div is hidden, the menu should appear at the top (see preview
images on the page of the model).
- Elements can be dragged within the website preview using the handle from
the menu (it should behave like the appery.io builder)
- The element can be deleted (cross icon).
- The element properties can be edited.
- The Header, Footer and Content div can only be edited (they can't be
dragged or deleted).
- The footer within the mobile website always remains at the bottom of the
body div and can either scroll if the page is longer or be fixed at the
bottom of the screen.
- For this prototype we need the following elements in the library: a text
field, a button and a listviews.
- The following properties should be editable to prove the concept
- text field: text
- Content: background colour
- Button: label and corner radius
- Listviews: labels and number of items

To keep in mind for the future:
- There will be multiple pages to the mobile website.
- The builder will need to be localised (multi language).
- The data will be stored in a user account.
- The website will be using the Laravel Framework.

Do not hesitate to ask for any clarifications.

This is one of many projects on our list. If we are satisfied with your
work, you will have a significant advantage over other candidates in the
future.

Best Regards