JavaScript Room Selection on the map

IN PROGRESS
Bids
4
Avg Bid (USD)
$80
Project Budget (USD)
$30 - $100

Project Description:
It should be one Default.apsx (or html) page (there could be also related js files, css and images).
On that page should be:
1. #1 TextBox where user can enter numbers of the rooms separated by comma to disable them on the map for SUITE 100.
2. #2 TextBox where user can enter numbers of the rooms separated by comma to disable them on the map for SUITE 110.
3. Apply button – it disables rooms entered separated by comma into TextBoxes in #1and #2
4. Image map “FLOOR_PLAN.gif”
5. Span html element (id=’spSelectedRoom’) which shows selected room.


Enabled room – it’s area on the map filled with Gold color like on “FLOOR_PLAN.gif” image
Disabled room - it’s area on the map filled with grey color
Selecting room – it’s area on the map under mouse cursor selected in 2px red border color, more intensive background color and some text hint information like ”You are selecting: Suite 100, Room 5 ”
Selected room – it’s area on the map after user clicked on it. Border color changed to Green with intensive background in “Selecting room”

When user clicked on the room (ex #5), spSelectedRoom span element should say message: You have selected: Room 5, Suite 100. "SelectRoom" function should be called to fill that element with the message (see about function below).

More details please see here: http://www.outsharked.com/imagemapster/default.aspx?demos.html selections should work in same way using same plugin (or you can provide me some better solution) and jQuery.

By default when page loads all rooms are enabled but if there are some values in js declared arrays
var DisabledRoomsSuite100Arr = [ “2”, “5”, “7”, ... ]
var DisabledRoomsSuite110Arr = [ “3”, “8”, “12”, ... ]
then these rooms should be disabled by default when page loads.
Also User can disable any room when entered numbers of them into #1 or #2 text box and press button “apply”, it should add values of disabled rooms to declared arrays above.
Requirements for code:
There should be javascript function called
function DisableRoom(SuiteNumber, RoomNumber), SuiteNumber – 100 or 110, RoomNumber – 1-16 or “Break Room”, “It Room”
This function should be called to disable any room on the page.
So, if user entered “2,5,11” string into TextBox #1 and “3,5,12,15” into TextBox #2 then press button “Apply”, “DisableRoom”function should be called 7 times and disable entered rooms on the map.

function SelectRoom(SuiteNumber, RoomNumber) - same parameters, this function should be called to fill message in spSelectedRoom span element

You should provide me with project where you created area html map (ex. http://www.carlosag.net/tools/xmap/)

Skills required:
.NET, ASP, CSS, Javascript, Photoshop
Additional Files: FLOOR_PLAN.gif
About the employer:
Verified
Public Clarification Board
Bids are hidden by the project creator. Log in as the employer to view bids or to bid on this project.
You will not be able to bid on this project if you are not qualified in one of the job categories. To see your qualifications click here.


$ 88
in 3 days
$ 50
in 3 days
$ 80
in 2 days
Hire viniciusfnc
$ 100
in 2 days