Upgrade TinyMCE to v3.4.5
[citadel.git] / webcit / tiny_mce / plugins / fullpage / js / fullpage.js
index a1bb719a383e61708aaccd6a9e237bfbc55a870c..3f672ad3ba334b2aa62b991ca31164e5e44b5bfa 100644 (file)
  * Contributing: http://tinymce.moxiecode.com/contributing\r
  */\r
 \r
-tinyMCEPopup.requireLangPack();\r
-\r
-var doc;\r
-\r
-var defaultDocTypes = \r
-       'XHTML 1.0 Transitional=<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">,' +\r
-       'XHTML 1.0 Frameset=<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">,' +\r
-       'XHTML 1.0 Strict=<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">,' +\r
-       'XHTML 1.1=<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">,' +\r
-       'HTML 4.01 Transitional=<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">,' +\r
-       'HTML 4.01 Strict=<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">,' +\r
-       'HTML 4.01 Frameset=<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">';\r
-\r
-var defaultEncodings = \r
-       'Western european (iso-8859-1)=iso-8859-1,' +\r
-       'Central European (iso-8859-2)=iso-8859-2,' +\r
-       'Unicode (UTF-8)=utf-8,' +\r
-       'Chinese traditional (Big5)=big5,' +\r
-       'Cyrillic (iso-8859-5)=iso-8859-5,' +\r
-       'Japanese (iso-2022-jp)=iso-2022-jp,' +\r
-       'Greek (iso-8859-7)=iso-8859-7,' +\r
-       'Korean (iso-2022-kr)=iso-2022-kr,' +\r
-       'ASCII (us-ascii)=us-ascii';\r
-\r
-var defaultMediaTypes = \r
-       'all=all,' +\r
-       'screen=screen,' +\r
-       'print=print,' +\r
-       'tty=tty,' +\r
-       'tv=tv,' +\r
-       'projection=projection,' +\r
-       'handheld=handheld,' +\r
-       'braille=braille,' +\r
-       'aural=aural';\r
-\r
-var defaultFontNames = 'Arial=arial,helvetica,sans-serif;Courier New=courier new,courier,monospace;Georgia=georgia,times new roman,times,serif;Tahoma=tahoma,arial,helvetica,sans-serif;Times New Roman=times new roman,times,serif;Verdana=verdana,arial,helvetica,sans-serif;Impact=impact;WingDings=wingdings';\r
-var defaultFontSizes = '10px,11px,12px,13px,14px,15px,16px';\r
-\r
-function init() {\r
-       var f = document.forms['fullpage'], el = f.elements, e, i, p, doctypes, encodings, mediaTypes, fonts, ed = tinyMCEPopup.editor, dom = tinyMCEPopup.dom, style;\r
-\r
-       // Setup doctype select box\r
-       doctypes = ed.getParam("fullpage_doctypes", defaultDocTypes).split(',');\r
-       for (i=0; i<doctypes.length; i++) {\r
-               p = doctypes[i].split('=');\r
-\r
-               if (p.length > 1)\r
-                       addSelectValue(f, 'doctypes', p[0], p[1]);\r
-       }\r
-\r
-       // Setup fonts select box\r
-       fonts = ed.getParam("fullpage_fonts", defaultFontNames).split(';');\r
-       for (i=0; i<fonts.length; i++) {\r
-               p = fonts[i].split('=');\r
-\r
-               if (p.length > 1)\r
-                       addSelectValue(f, 'fontface', p[0], p[1]);\r
-       }\r
-\r
-       // Setup fontsize select box\r
-       fonts = ed.getParam("fullpage_fontsizes", defaultFontSizes).split(',');\r
-       for (i=0; i<fonts.length; i++)\r
-               addSelectValue(f, 'fontsize', fonts[i], fonts[i]);\r
-\r
-       // Setup mediatype select boxs\r
-       mediaTypes = ed.getParam("fullpage_media_types", defaultMediaTypes).split(',');\r
-       for (i=0; i<mediaTypes.length; i++) {\r
-               p = mediaTypes[i].split('=');\r
-\r
-               if (p.length > 1) {\r
-                       addSelectValue(f, 'element_style_media', p[0], p[1]);\r
-                       addSelectValue(f, 'element_link_media', p[0], p[1]);\r
-               }\r
-       }\r
-\r
-       // Setup encodings select box\r
-       encodings = ed.getParam("fullpage_encodings", defaultEncodings).split(',');\r
-       for (i=0; i<encodings.length; i++) {\r
-               p = encodings[i].split('=');\r
-\r
-               if (p.length > 1) {\r
-                       addSelectValue(f, 'docencoding', p[0], p[1]);\r
-                       addSelectValue(f, 'element_script_charset', p[0], p[1]);\r
-                       addSelectValue(f, 'element_link_charset', p[0], p[1]);\r
-               }\r
-       }\r
-\r
-       document.getElementById('bgcolor_pickcontainer').innerHTML = getColorPickerHTML('bgcolor_pick','bgcolor');\r
-       document.getElementById('link_color_pickcontainer').innerHTML = getColorPickerHTML('link_color_pick','link_color');\r
-       //document.getElementById('hover_color_pickcontainer').innerHTML = getColorPickerHTML('hover_color_pick','hover_color');\r
-       document.getElementById('visited_color_pickcontainer').innerHTML = getColorPickerHTML('visited_color_pick','visited_color');\r
-       document.getElementById('active_color_pickcontainer').innerHTML = getColorPickerHTML('active_color_pick','active_color');\r
-       document.getElementById('textcolor_pickcontainer').innerHTML = getColorPickerHTML('textcolor_pick','textcolor');\r
-       document.getElementById('stylesheet_browsercontainer').innerHTML = getBrowserHTML('stylesheetbrowser','stylesheet','file','fullpage');\r
-       document.getElementById('link_href_pickcontainer').innerHTML = getBrowserHTML('link_href_browser','element_link_href','file','fullpage');\r
-       document.getElementById('script_src_pickcontainer').innerHTML = getBrowserHTML('script_src_browser','element_script_src','file','fullpage');\r
-       document.getElementById('bgimage_pickcontainer').innerHTML = getBrowserHTML('bgimage_browser','bgimage','image','fullpage');\r
-\r
-       // Resize some elements\r
-       if (isVisible('stylesheetbrowser'))\r
-               document.getElementById('stylesheet').style.width = '220px';\r
-\r
-       if (isVisible('link_href_browser'))\r
-               document.getElementById('element_link_href').style.width = '230px';\r
-\r
-       if (isVisible('bgimage_browser'))\r
-               document.getElementById('bgimage').style.width = '210px';\r
-\r
-       // Add iframe\r
-       dom.add(document.body, 'iframe', {id : 'documentIframe', src : 'javascript:""', style : {display : 'none'}});\r
-       doc = dom.get('documentIframe').contentWindow.document;\r
-       h = tinyMCEPopup.getWindowArg('head_html');\r
-\r
-       // Preprocess the HTML disable scripts and urls\r
-       h = h.replace(/<script>/gi, '<script type="text/javascript">');\r
-       h = h.replace(/type=([\"\'])?/gi, 'type=$1-mce-');\r
-       h = h.replace(/(src=|href=)/g, '_mce_$1');\r
-\r
-       // Write in the content in the iframe\r
-       doc.write(h + '</body></html>');\r
-       doc.close();\r
-\r
-       // Parse xml and doctype\r
-       xmlVer = getReItem(/<\?\s*?xml.*?version\s*?=\s*?"(.*?)".*?\?>/gi, h, 1);\r
-       xmlEnc = getReItem(/<\?\s*?xml.*?encoding\s*?=\s*?"(.*?)".*?\?>/gi, h, 1);\r
-       docType = getReItem(/<\!DOCTYPE.*?>/gi, h.replace(/\n/g, ''), 0).replace(/ +/g, ' ');\r
-       f.langcode.value = getReItem(/lang="(.*?)"/gi, h, 1);\r
-\r
-       // Parse title\r
-       if (e = doc.getElementsByTagName('title')[0])\r
-               el.metatitle.value = e.textContent || e.text;\r
-\r
-       // Parse meta\r
-       tinymce.each(doc.getElementsByTagName('meta'), function(n) {\r
-               var na = (n.getAttribute('name', 2) || '').toLowerCase(), va = n.getAttribute('content', 2), eq = n.getAttribute('httpEquiv', 2) || '';\r
-\r
-               e = el['meta' + na];\r
-\r
-               if (na == 'robots') {\r
-                       selectByValue(f, 'metarobots', tinymce.trim(va), true, true);\r
-                       return;\r
-               }\r
-\r
-               switch (eq.toLowerCase()) {\r
-                       case "content-type":\r
-                               tmp = getReItem(/charset\s*=\s*(.*)\s*/gi, va, 1);\r
-\r
-                               // Override XML encoding\r
-                               if (tmp != "")\r
-                                       xmlEnc = tmp;\r
-\r
-                               return;\r
-               }\r
-\r
-               if (e)\r
-                       e.value = va;\r
-       });\r
-\r
-       selectByValue(f, 'doctypes', docType, true, true);\r
-       selectByValue(f, 'docencoding', xmlEnc, true, true);\r
-       selectByValue(f, 'langdir', doc.body.getAttribute('dir', 2) || '', true, true);\r
-\r
-       if (xmlVer != '')\r
-               el.xml_pi.checked = true;\r
-\r
-       // Parse appearance\r
-\r
-       // Parse primary stylesheet\r
-       tinymce.each(doc.getElementsByTagName("link"), function(l) {\r
-               var m = l.getAttribute('media', 2) || '', t = l.getAttribute('type', 2) || '';\r
-\r
-               if (t == "-mce-text/css" && (m == "" || m == "screen" || m == "all") && (l.getAttribute('rel', 2) || '') == "stylesheet") {\r
-                       f.stylesheet.value = l.getAttribute('_mce_href', 2) || '';\r
-                       return false;\r
-               }\r
-       });\r
-\r
-       // Get from style elements\r
-       tinymce.each(doc.getElementsByTagName("style"), function(st) {\r
-               var tmp = parseStyleElement(st);\r
-\r
-               for (x=0; x<tmp.length; x++) {\r
-                       if (tmp[x].rule.indexOf('a:visited') != -1 && tmp[x].data['color'])\r
-                               f.visited_color.value = tmp[x].data['color'];\r
-\r
-                       if (tmp[x].rule.indexOf('a:link') != -1 && tmp[x].data['color'])\r
-                               f.link_color.value = tmp[x].data['color'];\r
-\r
-                       if (tmp[x].rule.indexOf('a:active') != -1 && tmp[x].data['color'])\r
-                               f.active_color.value = tmp[x].data['color'];\r
-               }\r
-       });\r
-\r
-       f.textcolor.value = tinyMCEPopup.dom.getAttrib(doc.body, "text");\r
-       f.active_color.value = tinyMCEPopup.dom.getAttrib(doc.body, "alink");\r
-       f.link_color.value = tinyMCEPopup.dom.getAttrib(doc.body, "link");\r
-       f.visited_color.value = tinyMCEPopup.dom.getAttrib(doc.body, "vlink");\r
-       f.bgcolor.value = tinyMCEPopup.dom.getAttrib(doc.body, "bgcolor");\r
-       f.bgimage.value = tinyMCEPopup.dom.getAttrib(doc.body, "background");\r
-\r
-       // Get from style info\r
-       style = tinyMCEPopup.dom.parseStyle(tinyMCEPopup.dom.getAttrib(doc.body, 'style'));\r
-\r
-       if (style['font-family'])\r
-               selectByValue(f, 'fontface', style['font-family'], true, true);\r
-       else\r
-               selectByValue(f, 'fontface', ed.getParam("fullpage_default_fontface", ""), true, true);\r
-\r
-       if (style['font-size'])\r
-               selectByValue(f, 'fontsize', style['font-size'], true, true);\r
-       else\r
-               selectByValue(f, 'fontsize', ed.getParam("fullpage_default_fontsize", ""), true, true);\r
-\r
-       if (style['color'])\r
-               f.textcolor.value = convertRGBToHex(style['color']);\r
-\r
-       if (style['background-image'])\r
-               f.bgimage.value = style['background-image'].replace(new RegExp("url\\('?([^']*)'?\\)", 'gi'), "$1");\r
-\r
-       if (style['background-color'])\r
-               f.bgcolor.value = style['background-color'];\r
-\r
-       if (style['margin']) {\r
-               tmp = style['margin'].replace(/[^0-9 ]/g, '');\r
-               tmp = tmp.split(/ +/);\r
-               f.topmargin.value = tmp.length > 0 ? tmp[0] : '';\r
-               f.rightmargin.value = tmp.length > 1 ? tmp[1] : tmp[0];\r
-               f.bottommargin.value = tmp.length > 2 ? tmp[2] : tmp[0];\r
-               f.leftmargin.value = tmp.length > 3 ? tmp[3] : tmp[0];\r
-       }\r
-\r
-       if (style['margin-left'])\r
-               f.leftmargin.value = style['margin-left'].replace(/[^0-9]/g, '');\r
-\r
-       if (style['margin-right'])\r
-               f.rightmargin.value = style['margin-right'].replace(/[^0-9]/g, '');\r
-\r
-       if (style['margin-top'])\r
-               f.topmargin.value = style['margin-top'].replace(/[^0-9]/g, '');\r
-\r
-       if (style['margin-bottom'])\r
-               f.bottommargin.value = style['margin-bottom'].replace(/[^0-9]/g, '');\r
-\r
-       f.style.value = tinyMCEPopup.dom.serializeStyle(style);\r
-\r
-       // Update colors\r
-       updateColor('textcolor_pick', 'textcolor');\r
-       updateColor('bgcolor_pick', 'bgcolor');\r
-       updateColor('visited_color_pick', 'visited_color');\r
-       updateColor('active_color_pick', 'active_color');\r
-       updateColor('link_color_pick', 'link_color');\r
-}\r
-\r
-function getReItem(r, s, i) {\r
-       var c = r.exec(s);\r
-\r
-       if (c && c.length > i)\r
-               return c[i];\r
-\r
-       return '';\r
-}\r
-\r
-function updateAction() {\r
-       var f = document.forms[0], nl, i, h, v, s, head, html, l, tmp, addlink = true, ser;\r
-\r
-       head = doc.getElementsByTagName('head')[0];\r
-\r
-       // Fix scripts without a type\r
-       nl = doc.getElementsByTagName('script');\r
-       for (i=0; i<nl.length; i++) {\r
-               if (tinyMCEPopup.dom.getAttrib(nl[i], '_mce_type') == '')\r
-                       nl[i].setAttribute('_mce_type', 'text/javascript');\r
-       }\r
-\r
-       // Get primary stylesheet\r
-       nl = doc.getElementsByTagName("link");\r
-       for (i=0; i<nl.length; i++) {\r
-               l = nl[i];\r
-\r
-               tmp = tinyMCEPopup.dom.getAttrib(l, 'media');\r
-\r
-               if (tinyMCEPopup.dom.getAttrib(l, '_mce_type') == "text/css" && (tmp == "" || tmp == "screen" || tmp == "all") && tinyMCEPopup.dom.getAttrib(l, 'rel') == "stylesheet") {\r
-                       addlink = false;\r
-\r
-                       if (f.stylesheet.value == '')\r
-                               l.parentNode.removeChild(l);\r
+(function() {\r
+       tinyMCEPopup.requireLangPack();\r
+\r
+       var defaultDocTypes = \r
+               'XHTML 1.0 Transitional=<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">,' +\r
+               'XHTML 1.0 Frameset=<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">,' +\r
+               'XHTML 1.0 Strict=<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">,' +\r
+               'XHTML 1.1=<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">,' +\r
+               'HTML 4.01 Transitional=<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">,' +\r
+               'HTML 4.01 Strict=<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">,' +\r
+               'HTML 4.01 Frameset=<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">';\r
+\r
+       var defaultEncodings = \r
+               'Western european (iso-8859-1)=iso-8859-1,' +\r
+               'Central European (iso-8859-2)=iso-8859-2,' +\r
+               'Unicode (UTF-8)=utf-8,' +\r
+               'Chinese traditional (Big5)=big5,' +\r
+               'Cyrillic (iso-8859-5)=iso-8859-5,' +\r
+               'Japanese (iso-2022-jp)=iso-2022-jp,' +\r
+               'Greek (iso-8859-7)=iso-8859-7,' +\r
+               'Korean (iso-2022-kr)=iso-2022-kr,' +\r
+               'ASCII (us-ascii)=us-ascii';\r
+\r
+       var defaultFontNames = 'Arial=arial,helvetica,sans-serif;Courier New=courier new,courier,monospace;Georgia=georgia,times new roman,times,serif;Tahoma=tahoma,arial,helvetica,sans-serif;Times New Roman=times new roman,times,serif;Verdana=verdana,arial,helvetica,sans-serif;Impact=impact;WingDings=wingdings';\r
+       var defaultFontSizes = '10px,11px,12px,13px,14px,15px,16px';\r
+\r
+       function setVal(id, value) {\r
+               var elm = document.getElementById(id);\r
+\r
+               if (elm) {\r
+                       value = value || '';\r
+\r
+                       if (elm.nodeName == "SELECT")\r
+                               selectByValue(document.forms[0], id, value);\r
+                       else if (elm.type == "checkbox")\r
+                               elm.checked = !!value;\r
                        else\r
-                               l.setAttribute('_mce_href', f.stylesheet.value);\r
-\r
-                       break;\r
+                               elm.value = value;\r
                }\r
-       }\r
-\r
-       // Add new link\r
-       if (f.stylesheet.value != '') {\r
-               l = doc.createElement('link');\r
-\r
-               l.setAttribute('type', 'text/css');\r
-               l.setAttribute('_mce_href', f.stylesheet.value);\r
-               l.setAttribute('rel', 'stylesheet');\r
-\r
-               head.appendChild(l);\r
-       }\r
-\r
-       setMeta(head, 'keywords', f.metakeywords.value);\r
-       setMeta(head, 'description', f.metadescription.value);\r
-       setMeta(head, 'author', f.metaauthor.value);\r
-       setMeta(head, 'copyright', f.metacopyright.value);\r
-       setMeta(head, 'robots', getSelectValue(f, 'metarobots'));\r
-       setMeta(head, 'Content-Type', getSelectValue(f, 'docencoding'));\r
-\r
-       doc.body.dir = getSelectValue(f, 'langdir');\r
-       doc.body.style.cssText = f.style.value;\r
-\r
-       doc.body.setAttribute('vLink', f.visited_color.value);\r
-       doc.body.setAttribute('link', f.link_color.value);\r
-       doc.body.setAttribute('text', f.textcolor.value);\r
-       doc.body.setAttribute('aLink', f.active_color.value);\r
+       };\r
 \r
-       doc.body.style.fontFamily = getSelectValue(f, 'fontface');\r
-       doc.body.style.fontSize = getSelectValue(f, 'fontsize');\r
-       doc.body.style.backgroundColor = f.bgcolor.value;\r
+       function getVal(id) {\r
+               var elm = document.getElementById(id);\r
 \r
-       if (f.leftmargin.value != '')\r
-               doc.body.style.marginLeft = f.leftmargin.value + 'px';\r
+               if (elm.nodeName == "SELECT")\r
+                       return elm.options[elm.selectedIndex].value;\r
 \r
-       if (f.rightmargin.value != '')\r
-               doc.body.style.marginRight = f.rightmargin.value + 'px';\r
+               if (elm.type == "checkbox")\r
+                       return elm.checked;\r
 \r
-       if (f.bottommargin.value != '')\r
-               doc.body.style.marginBottom = f.bottommargin.value + 'px';\r
+               return elm.value;\r
+       };\r
 \r
-       if (f.topmargin.value != '')\r
-               doc.body.style.marginTop = f.topmargin.value + 'px';\r
+       window.FullPageDialog = {\r
+               changedStyle : function() {\r
+                       var val, styles = tinyMCEPopup.editor.dom.parseStyle(getVal('style'));\r
 \r
-       html = doc.getElementsByTagName('html')[0];\r
-       html.setAttribute('lang', f.langcode.value);\r
-       html.setAttribute('xml:lang', f.langcode.value);\r
+                       setVal('fontface', styles['font-face']);\r
+                       setVal('fontsize', styles['font-size']);\r
+                       setVal('textcolor', styles['color']);\r
 \r
-       if (f.bgimage.value != '')\r
-               doc.body.style.backgroundImage = "url('" + f.bgimage.value + "')";\r
-       else\r
-               doc.body.style.backgroundImage = '';\r
-\r
-       ser = tinyMCEPopup.editor.plugins.fullpage._createSerializer();\r
-       ser.setRules('-title,meta[http-equiv|name|content],base[href|target],link[href|rel|type|title|media],style[type],script[type|language|src],html[lang|xml::lang|xmlns],body[style|dir|vlink|link|text|alink],head');\r
-\r
-       h = ser.serialize(doc.documentElement);\r
-       h = h.substring(0, h.lastIndexOf('</body>'));\r
-\r
-       if (h.indexOf('<title>') == -1)\r
-               h = h.replace(/<head.*?>/, '$&\n' + '<title>' + tinyMCEPopup.dom.encode(f.metatitle.value) + '</title>');\r
-       else\r
-               h = h.replace(/<title>(.*?)<\/title>/, '<title>' + tinyMCEPopup.dom.encode(f.metatitle.value) + '</title>');\r
-\r
-       if ((v = getSelectValue(f, 'doctypes')) != '')\r
-               h = v + '\n' + h;\r
-\r
-       if (f.xml_pi.checked) {\r
-               s = '<?xml version="1.0"';\r
-\r
-               if ((v = getSelectValue(f, 'docencoding')) != '')\r
-                       s += ' encoding="' + v + '"';\r
-\r
-               s += '?>\n';\r
-               h = s + h;\r
-       }\r
-\r
-       h = h.replace(/type=\"\-mce\-/gi, 'type="');\r
-\r
-       tinyMCEPopup.editor.plugins.fullpage.head = h;\r
-       tinyMCEPopup.editor.plugins.fullpage._setBodyAttribs(tinyMCEPopup.editor, {});\r
-       tinyMCEPopup.close();\r
-}\r
+                       if (val = styles['background-image'])\r
+                               setVal('bgimage', val.replace(new RegExp("url\\('?([^']*)'?\\)", 'gi'), "$1"));\r
+                       else\r
+                               setVal('bgimage', '');\r
+\r
+                       setVal('bgcolor', styles['background-color']);\r
+\r
+                       // Reset margin form elements\r
+                       setVal('topmargin', '');\r
+                       setVal('rightmargin', '');\r
+                       setVal('bottommargin', '');\r
+                       setVal('leftmargin', '');\r
+\r
+                       // Expand margin\r
+                       if (val = styles['margin']) {\r
+                               val = val.split(' ');\r
+                               styles['margin-top'] = val[0] || '';\r
+                               styles['margin-right'] = val[1] || val[0] || '';\r
+                               styles['margin-bottom'] = val[2] || val[0] || '';\r
+                               styles['margin-left'] = val[3] || val[0] || '';\r
+                       }\r
+\r
+                       if (val = styles['margin-top'])\r
+                               setVal('topmargin', val.replace(/px/, ''));\r
+\r
+                       if (val = styles['margin-right'])\r
+                               setVal('rightmargin', val.replace(/px/, ''));\r
+\r
+                       if (val = styles['margin-bottom'])\r
+                               setVal('bottommargin', val.replace(/px/, ''));\r
+\r
+                       if (val = styles['margin-left'])\r
+                               setVal('leftmargin', val.replace(/px/, ''));\r
+\r
+                       updateColor('bgcolor_pick', 'bgcolor');\r
+                       updateColor('textcolor_pick', 'textcolor');\r
+               },\r
+\r
+               changedStyleProp : function() {\r
+                       var val, dom = tinyMCEPopup.editor.dom, styles = dom.parseStyle(getVal('style'));\r
+       \r
+                       styles['font-face'] = getVal('fontface');\r
+                       styles['font-size'] = getVal('fontsize');\r
+                       styles['color'] = getVal('textcolor');\r
+                       styles['background-color'] = getVal('bgcolor');\r
+\r
+                       if (val = getVal('bgimage'))\r
+                               styles['background-image'] = "url('" + val + "')";\r
+                       else\r
+                               styles['background-image'] = '';\r
 \r
-function changedStyleField(field) {\r
-}\r
+                       delete styles['margin'];\r
 \r
-function setMeta(he, k, v) {\r
-       var nl, i, m;\r
+                       if (val = getVal('topmargin'))\r
+                               styles['margin-top'] = val + "px";\r
+                       else\r
+                               styles['margin-top'] = '';\r
 \r
-       nl = he.getElementsByTagName('meta');\r
-       for (i=0; i<nl.length; i++) {\r
-               if (k == 'Content-Type' && tinyMCEPopup.dom.getAttrib(nl[i], 'http-equiv') == k) {\r
-                       if (v == '')\r
-                               nl[i].parentNode.removeChild(nl[i]);\r
+                       if (val = getVal('rightmargin'))\r
+                               styles['margin-right'] = val + "px";\r
                        else\r
-                               nl[i].setAttribute('content', "text/html; charset=" + v);\r
+                               styles['margin-right'] = '';\r
 \r
-                       return;\r
-               }\r
+                       if (val = getVal('bottommargin'))\r
+                               styles['margin-bottom'] = val + "px";\r
+                       else\r
+                               styles['margin-bottom'] = '';\r
 \r
-               if (tinyMCEPopup.dom.getAttrib(nl[i], 'name') == k) {\r
-                       if (v == '')\r
-                               nl[i].parentNode.removeChild(nl[i]);\r
+                       if (val = getVal('leftmargin'))\r
+                               styles['margin-left'] = val + "px";\r
                        else\r
-                               nl[i].setAttribute('content', v);\r
-                       return;\r
+                               styles['margin-left'] = '';\r
+\r
+                       // Serialize, parse and reserialize this will compress redundant styles\r
+                       setVal('style', dom.serializeStyle(dom.parseStyle(dom.serializeStyle(styles))));\r
+                       this.changedStyle();\r
+               },\r
+               \r
+               update : function() {\r
+                       var data = {};\r
+\r
+                       tinymce.each(tinyMCEPopup.dom.select('select,input,textarea'), function(node) {\r
+                               data[node.id] = getVal(node.id);\r
+                       });\r
+\r
+                       tinyMCEPopup.editor.plugins.fullpage._dataToHtml(data);\r
+                       tinyMCEPopup.close();\r
+               }\r
+       };\r
+       \r
+       function init() {\r
+               var form = document.forms[0], i, item, list, editor = tinyMCEPopup.editor;\r
+\r
+               // Setup doctype select box\r
+               list = editor.getParam("fullpage_doctypes", defaultDocTypes).split(',');\r
+               for (i = 0; i < list.length; i++) {\r
+                       item = list[i].split('=');\r
+\r
+                       if (item.length > 1)\r
+                               addSelectValue(form, 'doctype', item[0], item[1]);\r
                }\r
-       }\r
-\r
-       if (v == '')\r
-               return;\r
-\r
-       m = doc.createElement('meta');\r
-\r
-       if (k == 'Content-Type')\r
-               m.httpEquiv = k;\r
-       else\r
-               m.setAttribute('name', k);\r
-\r
-       m.setAttribute('content', v);\r
-       he.appendChild(m);\r
-}\r
-\r
-function parseStyleElement(e) {\r
-       var v = e.innerHTML;\r
-       var p, i, r;\r
-\r
-       v = v.replace(/<!--/gi, '');\r
-       v = v.replace(/-->/gi, '');\r
-       v = v.replace(/[\n\r]/gi, '');\r
-       v = v.replace(/\s+/gi, ' ');\r
-\r
-       r = [];\r
-       p = v.split(/{|}/);\r
-\r
-       for (i=0; i<p.length; i+=2) {\r
-               if (p[i] != "")\r
-                       r[r.length] = {rule : tinymce.trim(p[i]), data : tinyMCEPopup.dom.parseStyle(p[i+1])};\r
-       }\r
-\r
-       return r;\r
-}\r
-\r
-function serializeStyleElement(d) {\r
-       var i, s, st;\r
-\r
-       s = '<!--\n';\r
-\r
-       for (i=0; i<d.length; i++) {\r
-               s += d[i].rule + ' {\n';\r
-\r
-               st = tinyMCE.serializeStyle(d[i].data);\r
 \r
-               if (st != '')\r
-                       st += ';';\r
+               // Setup fonts select box\r
+               list = editor.getParam("fullpage_fonts", defaultFontNames).split(';');\r
+               for (i = 0; i < list.length; i++) {\r
+                       item = list[i].split('=');\r
 \r
-               s += st.replace(/;/g, ';\n');\r
-               s += '}\n';\r
+                       if (item.length > 1)\r
+                               addSelectValue(form, 'fontface', item[0], item[1]);\r
+               }\r
 \r
-               if (i != d.length - 1)\r
-                       s += '\n';\r
-       }\r
+               // Setup fontsize select box\r
+               list = editor.getParam("fullpage_fontsizes", defaultFontSizes).split(',');\r
+               for (i = 0; i < list.length; i++)\r
+                       addSelectValue(form, 'fontsize', list[i], list[i]);\r
 \r
-       s += '\n-->';\r
+               // Setup encodings select box\r
+               list = editor.getParam("fullpage_encodings", defaultEncodings).split(',');\r
+               for (i = 0; i < list.length; i++) {\r
+                       item = list[i].split('=');\r
 \r
-       return s;\r
-}\r
+                       if (item.length > 1)\r
+                               addSelectValue(form, 'docencoding', item[0], item[1]);\r
+               }\r
 \r
-tinyMCEPopup.onInit.add(init);\r
+               // Setup color pickers\r
+               document.getElementById('bgcolor_pickcontainer').innerHTML = getColorPickerHTML('bgcolor_pick','bgcolor');\r
+               document.getElementById('link_color_pickcontainer').innerHTML = getColorPickerHTML('link_color_pick','link_color');\r
+               document.getElementById('visited_color_pickcontainer').innerHTML = getColorPickerHTML('visited_color_pick','visited_color');\r
+               document.getElementById('active_color_pickcontainer').innerHTML = getColorPickerHTML('active_color_pick','active_color');\r
+               document.getElementById('textcolor_pickcontainer').innerHTML = getColorPickerHTML('textcolor_pick','textcolor');\r
+               document.getElementById('stylesheet_browsercontainer').innerHTML = getBrowserHTML('stylesheetbrowser','stylesheet','file','fullpage');\r
+               document.getElementById('bgimage_pickcontainer').innerHTML = getBrowserHTML('bgimage_browser','bgimage','image','fullpage');\r
+\r
+               // Resize some elements\r
+               if (isVisible('stylesheetbrowser'))\r
+                       document.getElementById('stylesheet').style.width = '220px';\r
+\r
+               if (isVisible('link_href_browser'))\r
+                       document.getElementById('element_link_href').style.width = '230px';\r
+\r
+               if (isVisible('bgimage_browser'))\r
+                       document.getElementById('bgimage').style.width = '210px';\r
+\r
+               // Update form\r
+               tinymce.each(tinyMCEPopup.getWindowArg('data'), function(value, key) {\r
+                       setVal(key, value);\r
+               });\r
+\r
+               FullPageDialog.changedStyle();\r
+\r
+               // Update colors\r
+               updateColor('textcolor_pick', 'textcolor');\r
+               updateColor('bgcolor_pick', 'bgcolor');\r
+               updateColor('visited_color_pick', 'visited_color');\r
+               updateColor('active_color_pick', 'active_color');\r
+               updateColor('link_color_pick', 'link_color');\r
+       };\r
+\r
+       tinyMCEPopup.onInit.add(init);\r
+})();\r