jQuery Dialog example

this dialog example should replace the Prototype ModalBox (okonet.ru) which is used along our customers pages.

by Steve Palmateer

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/ui-lightness/jquery-ui.css">
<script src="http://www.outsharked.com/scripts/jquery.imagemapster.js"></script>
<input type="submit" id="submit-howmany" value="How many devices on sw03-000?"/>
<br/>
<br/>
MAC Address: <input type="text" id="address" name"address"/>
<input type="submit" id="submit-address" value="Find Cube"/>

<img id="floorplan" src="http://berniesumption.com/software/files/2011/04/big-map.jpg" usemap="#waterloo"/>
<map id="waterloo_map" name="waterloo">
        <area shape="poly" id="cube2" coords="450,1920, 515,2000, 600,1935, 535,1850" href='#'/>
        <area shape="poly" id="cube3" coords="520,2005, 585,2090, 670,2025, 605,1940" href='#'/>
        <area shape="poly" id="cube4" coords="585,2095, 650,2180, 735,2115, 670,2030" href='#'/>
        <area shape="poly" id="cube5" coords="655,2185, 720,2270, 810,2200, 740,2115" href='#'/>
        <area shape="poly" id="cube6" coords="705,2350, 780,2445, 915,2340, 840,2240" href='#'/>
        <area shape="poly" id="cube7" coords="840,2240, 915,2345, 1040,2250, 965,2150" href='#'/>
        <area shape="poly" id="cube8" coords="965,2150, 1040,2250, 1165,2160, 1085,2050" href='#'/>
        <area shape="poly" id="cube9" coords="1085,2050, 1165,2160, 1290,2060, 1215,1960" href='#'/>
        <area shape="poly" id="cube10" coords="875,2005, 950,2100, 1020,2050, 945,1950" href='#'/>
        <area shape="poly" id="cube11" coords="745,2120, 815,2205, 900,2135, 830,2050" href='#'/>
        <area shape="poly" id="cube12" coords="780,1880, 860,1990, 930,1935, 850,1825" href='#'/>
        <area shape="poly" id="cube13" coords="675,2030, 745,2115, 830,2045, 760,1960" href='#'/>
        <area shape="poly" id="cube14" coords="605,1940, 675,2030, 760,1955, 690,1875" href='#'/>
        <area shape="poly" id="cube15" coords="540,1850, 605,1935, 695,1865, 625,1780" href='#'/>
        <area shape="poly" id="cube16" coords="665,1605,...

JavaScript

var cubes = {
        cube2: "ge-0/0/26.0 ge-0/0/27.0",
        cube3: "ge-0/0/22.0 ge-0/0/23.0",
        cube4: "ge-0/0/18.0 ge-0/0/19.0",
        cube5: "ge-0/0/14.0 ge-0/0/15.0",
        cube6: "ge-0/0/6.0 ge-0/0/7.0",
        cube7: "ge-0/0/4.0 ge-0/0/5.0",
        cube8: "ge-0/0/2.0 ge-0/0/3.0",
        cube9: "ge-0/0/0.0 ge-0/0/1.0",
        cube10: "ge-0/0/36.0 ge-0/0/37.0",
        cube11: "ge-0/0/12.0 ge-0/0/13.0",
        cube12: "ge-0/0/38.0 ge-0/0/39.0",
        cube13: "ge-0/0/16.0 ge-0/0/17.0",
        cube14: "ge-0/0/20.0 ge-0/0/21.0",
        cube15: "ge-0/0/24.0 ge-0/0/25.0",
        cube16: "ge-0/0/34.0 ge-0/0/35.0",
        cube17: "ge-0/0/28.0 ge-0/0/29.0",
        cube18: "ge-0/0/30.0 ge-0/0/31.0",
        cube19: "ge-0/0/32.0 ge-0/0/33.0",
        cube20: "ge-1/0/5.0 ge-1/0/10.0",
        cube21: "ge-1/0/6.0 ge-1/0/11.0",
        cube22: "ge-1/0/0.0 ge-1/0/9.0",
        cube23: "ge-1/0/3.0 ge-1/0/8.0",
        cube24: "ge-1/0/2.0 ge-1/0/7.0",
        cube25: "ge-1/0/1.0 ge-1/0/4.0",
        cube26: "ge-1/0/15.0 ge-1/0/16.0",
        cube27: "ge-1/0/19.0 ge-1/0/20.0",
        cube29: "ge-1/0/13.0 ge-1/0/14.0",
        cube30: "ge-1/0/17.0 ge-1/0/18.0",
        cube31: "ge-1/0/21.0 ge-1/0/22.0",
        cube32: "ge-1/0/43.0 ge-1/0/44.0",
        cube33: "ge-1/0/41.0 ge-1/0/42.0",
        cube34: "ge-1/0/45.0 ge-1/0/46.0",
        cube37: "ge-1/0/39.0 ge-1/0/40.0",
        cube38: "ge-1/0/35.0 ge-1/0/36.0",
        cube39: "ge-2/0/7.0 ge-2/0/8.0",
        cube40: "ge-2/0/3.0 ge-2/0/4.0",
        cube41: "ge-2/0/5.0 ge-2/0/6.0",
        cube42: "ge-2/0/1.0 ge-2/0/2.0",
        cube43: "ge-1/0/47.0 ge-2/0/0.0",
        cube44: "ge-1/0/29.0 ge-1/0/30.0",
        cube45: "ge-1/0/31.0 ge-1/0/32.0",
        cube46: "ge-1/0/27.0 ge-1/0/28.0",
        cube47: "ge-1/0/25.0 ge-1/0/26.0",
        cube48: "ge-2/0/9.0 ge-2/0/10.0",
        cube49: "ge-2/0/15.0 ge-2/0/16.0",
        cube50: "ge-2/0/11.0 ge-2/0/12.0",
        cube51: "ge-2/0/17.0...