two Basecamp-style popups

Basecamp is a project management system, which has rich web-interface. We are interested in extracting and preparing for our reuse two components. You can get free account at basecamp here [login to view URL](direct)|utmccn=(direct)|utmcmd=(none)&__utmv=-&__utmk=56548011 Once you have one, you receive an access to the web interface, where you can see popups and extract them from their javascript/css files. The complete description of which popups we need and how you can see them(in case you are new to basecamp) are in the detailed bid request description. ## Deliverables We need to extract two popup controls. To see them you need at least one project at basecamp with to-dos and file sharing enabled (you can register a 30 days trial account to test these features). Assuming you have project, take some preparation steps 1. Go To To-Dos section: ![][1] 2. Create new To-Do list: ![][2] 3. Add To-Do Item to the list: ![][3] 4. Now you should have something like this: ![][4] Actually, we need to import two controls: Calendar and image preview. First, lets handle with **Calendar**, to see it, you should do the following steps: 1. Mouse over created To-Do, spot Edit button at the left of the checkbox: ![][5] 2. Click it, you`ll see edit To-Do item form: ![][6] 3. Click into textbox under "When it is due" label, you`ll see **Calendar Popup:** ![][7] 4. Notice the animation and behavior of this popup control: 1. It is closing when we click or tap outside of it 2. It is closing when we click or tap at the X button(![][8]) 3. All transitions are nice, smooth and slow 4. Current component is working nice on all required browsers (see browser section in this bid request), so there is no need to make a copy of this control, we just need to extract it and make it easy to use in our applications. Now let`s look at image preview dialog, assuming you are already have at least one To-Do item, perform following steps: 1. Mouse over created To-Do, spot Comment button(![][9]) at the left of the checkbox: ![][5] 2. Click it, you`ll see add comment page with comment field and attach files control below: ![][10] 3. Fill comment textfield with some text and attach 2-3 images to the comment: ![][11] 4. Post the comment, as page reloads you`ll see your comment created with images thumbnails: ![][12] 5. Click on the thumbnail, you`ll see **Image Preview popup**: ![][13] 6. Notice the animation and behavior of this popup control: 1. It is closing when we click or tap outside of it 2. It is closing when we click or tap at the X button(![][14]) 3. All transitions are nice, smooth and slow 4. Current component is working nice on all required browsers (see browser section in this bid request), so there is no need to make a copy of this control, we just need to extract it and make it easy to use in our applications. What we`ll threat as ready product: Common requirements for both popus: 1. Package, which consists of 1. HTML page with test form, demonstrating control functionality 2. images folder with only images required for this control appearance, functionality and animation 3. css folder with single style sheet (.css file), which contains only styles? required for this control appearance, functionality and animation. 4. javascript folder with signle javascript (.js file), which contains only objects and/or functions? required for this control appearance, functionality and animation. 5. So, no additional data should be supplied within package, except required objects. 6. All code (HTML, javascript, css) should has english comments, describing every element`s (javascript object, function, css style) function. 2. Example form(in HTML page test form), which demonstrate using of this control (according to control`s supply requirements). Calendar popup test form requirements: 1. Test form should have just one textfield 2. Click/tap on the textfield makes control appear 3. Once date is selected, control disappears and selected date is filled in the textfield 4. Direct textfield edit should not be possible. 5. When pressed No Due Date on the popup, contol disappears, and textfield value clears. 6. When user clicks or taps outside the control or on X button, control disappears and textfield value not changes. Image preview popup test form requirements: 1. Test form should have textfield labeled as "image url", button "show", and two textfields labeled "width" and height" 2. Click/tap on the button makes control appear. If "image url" was set, then control size is determined with image size and it shows with image inside (no link "View full size in another window"). If "image url" was not set, and width and height was set, then control size is determined by those values and it shows just white place, without any content. 3. Once user clicks or taps outside the control or on X button, control disappears.