Javascript powered CSS code editor

Client side only javascript application required to overlay a textarea field containing a standard CSS stylesheet. Parse the stylesheet and present a table of elements, attributes and their values Column 1 - element name Column 2 - attribute name Column 3 - attribute value If attribute is known "combination attribute" like "border: black 1px solid" then split it into known attributes, eg "border-color" "border-style" etc If attribute name is "color" provide text field with link to color picker. (We can supply popup, or if you have preferred one use it) If attribute name is "font-family" provide text field with link to font selector. (We can supply popup , or if you have preferred one use it) If attribute name is anything with a limited set of values, eg border-style or align etc, then provide drop down of allowable values. This option for up to 10 different elements If attribute name is anything else, just provide text field for data colection. Provide one extra line for each and every element allowing an extra attribute to be added. Once new attribute is selected, then provide suitable value selector (dynamically) Provide option to delete an attribute or element. Provide an extra line for adding new elements (from dropdown). An additional list of custom element names to be supported can be provided in an Array. Provide ordering capability for the elements. Preferably drag and drop, but be clear when quoting. Order of elements in CSS underlying code must be maintained. Provide getCSSCode() function suitable for saving generated CSS back to the textarea or server side. Happy for you to make use of any open source code. Happy for suggestions on how you might improve this application. The final user interface should be somewhat intuitive to an averagely dumb user.