JQUERY COMPLEX FORM & PHOTO SUBMISSION

This project is not really complex per se. The user should upload a photo to a site, add some data, and then click several times on the photo to tag it and add some data in a popup window. Dialogue with the backend is done through web services and everything has to be done using Jquery (and Jquery UI or supported plugins if needed) only. Everything, from photo submission to completion of data transfer has to be done on a single web page. Below there's a longer description. Documentation for web services (Json calls), some pictures to complement the description and a link to a website that should be used as a benchmark will be given to the winning bidder only. If you have any question, don't hesitate to ask. ## Deliverables This application is a webpage that use javascript and JQuery library to communicate with web services hosted on a backend. We'll provide a place where you can upload your files, but of course you can use your own web server to host it if you have one. **MAIN FLOW** The first thing the user should do is to upload a photo. Photo can't be larger than 1Mb and can't have the vertical long edge longer than 2000px; minimum height has to be 800px. We return a link to a photo with long edge of 1000px or less. The picture has to be displayed resized in a box 600x400 pixel. User can edit the photo just uploaded. He can rotate the photo, center it, zoom in, zoom out and move it, panning with the mouse. After the user finished, he can confirm changes which results in a new uploading of the photo: this is the "original" photo we'll work on and the one to be stored in our database. Then you have to display a form with title, description, the photo to be tagged and a section that allows to upload more detail photos. Title is a normal text box, while the description is a text area with very limited formatting options: bold, italic and underline. No links or any HTML tag is allowed. You can't use complex editor like ckeditor. **TAGGING** This is the complex part of the application. When you click on the picture you have to display a number on it (1, then 2, etc.) and show a small popup window where user can add some data: 1) the type of the item the user clicked on (it's a predefined list that appears in a separate window) 2) the title of the item (it's a autocomplete text box) 3) short description (it's a normal text box) 4) the price of the item (it's a text box) 5) the barcode of the item (optional - it's a text box) 6) the color of the item (taken from a color picker - a rounded one is our favourite) All the tagging data have to be kept in javascript arrays and not as html properties, to ease the modification of code. Whenever the user clicks on a number on a picture, the popup window appears again to let him change or delete that tag. In case of deletion of one tag, all the remaining one have to be renumbered. After all data are completed, user can save them to the server: if successful, user should be redirected to his profile page (we'll provide the link), where he can click on any saved Photo and edit all data using the same procedure we have seen here for uploading. So, the same web page should be called with or without a photo ID. If there is a photo ID then it's a edit procedure, if there is not, it's an upload procedure. **PLUGINS** If you want to use a JQuery plugin, please ask us before doing it because we have to check the license and the stability of it. We don't want to make you reinvent the wheel, but at the same time we don't want to have a project with a part of code that we can't use or that doesn't work a in proper way. You are free to use any JQuery UI effect and widget. **CODE** Code should be clean and well commented. Use long variables names: shortness it's not an issue, while understanding how the code works is our goal. It's better if you send us a sample of the code as soon as you write a .js file so that we can review your style and approved it or suggest some changes to it.