Browse Source

Feature #2132 - Development of "asciisvg" plug-in (4).

Ivan Tcholakov 14 years ago
parent
commit
9370040ad7

+ 5 - 5
main/inc/lib/fckeditor/editor/plugins/asciisvg/fck_asciisvg.html

@@ -37,7 +37,7 @@ form p { margin-top: 5px; margin-bottom: 5px; }
     </head>
 <body scroll="no" style="overflow: hidden;">
 
-Equation type: <select id="eqntype" onchange="javascript: AsciisvgDialog.changetype();">
+Equation type: <select id="eqntype" onchange="javascript: UpdateEquationType();">
 <option value="func">y=f(x)</option>
 <option value="polar">r=f(t)</option>
 <option value="param">x=f(t),y=g(t)</option>
@@ -102,10 +102,10 @@ Resize to: <input type="text" id="gwidth" size="5" value="300"/> by <input type=
 <input type="button" value="Update" onclick="javascript: UpdatePreview();"/>
 <hr/>
 
-<input type="button" value="Add Graph" onclick="javascript: AsciisvgDialog.addgraph();"/>
-Graphs: <select id="graphs" onchange="javascript: AsciisvgDialog.loadeqn();"></select>
-<input type="button" value="Replace Selected Graph" onclick="javascript: AsciisvgDialog.replacegraph();"/>
-<input type="button" value="Remove" onclick="javascript: AsciisvgDialog.removegraph();"/>
+<input type="button" value="Add Graph" onclick="javascript: AddGraph();"/>
+Graphs: <select id="graphs" onchange="javascript: LoadEquation();"></select>
+<input type="button" value="Replace Selected Graph" onclick="javascript: ReplaceGraph();"/>
+<input type="button" value="Remove" onclick="javascript: RemoveGraph();"/>
 <select id="alignment" onchange="javascript: UpdatePreview();">
 <option value="text-top">Top</option>
 <option value="middle">Middle</option>

+ 329 - 353
main/inc/lib/fckeditor/editor/plugins/asciisvg/fck_asciisvg.js

@@ -83,420 +83,396 @@ window.onload = function()
     dialog.SetOkButton( true ) ;
 }
 
-function LoadSelection()
-{
-    UpdatePreview() ;
-}
-
 function UpdatePreview()
 {
-    AsciisvgDialog.graphit() ;
-}
+    var commands = '' ;
+
+    initialized = false ;
+
+    var m_xmin = GetE( 'xmin' ).value ;
+    var m_xmax = GetE( 'xmax' ).value ;
+    var m_ymin = GetE( 'ymin' ).value ;
+    var m_ymax = GetE( 'ymax' ).value ;
+    if ( m_ymin == '' ) m_ymin = null ;
+    if ( m_ymax == '' ) m_ymax = null ;
+    commands += m_xmin + ',' + m_xmax + ',' + m_ymin + ',' + m_ymax + ',' ;
+
+    var m_xscl = GetE( 'xscl' ).value ;
+    var m_yscl = GetE( 'yscl' ).value ;
+    if ( m_xscl == '' ) m_xscl = null ;
+    if ( m_yscl == '' ) m_yscl = null ;
+    if ( GetE( 'labels' ).checked )
+    {
+        var m_labels = '1' ;
+    }
+    else
+    {
+        var m_labels = 'null' ;
+    }
+
+    if ( GetE( 'grid' ).checked )
+    {
+        var m_grid = ',' + m_xscl + ',' + m_yscl ;
+    }
+    else
+    {
+        var m_grid = ',null,null' ;
+    }
+    commands += m_xscl + ',' + m_yscl + ',' + m_labels + m_grid ;
 
+    commands += ',' + GetE( 'gwidth' ).value + ',' + GetE( 'gheight' ).value ;
 
 
-//tinyMCEPopup.requireLangPack();
+    var graphs = GetE( 'graphs' ) ;
+    for ( i = 0 ; i < graphs.length ; i++ )
+    {
+        commands += ',' + graphs.options[i].value ;
+    }
 
-var AsciisvgDialog =
-{
-    width: 300 ,
-    height: 200 ,
-    alignm: 'middle' ,
-    //sscr: '' ,
-    sscr: '-7.5,7.5,-5,5,1,1,1,1,1,300,200' ,
-    //isnew: null ,
-    isnew: true ,
+    width = GetE( 'gwidth' ).value ;
+    height = GetE( 'gheight' ).value ;
+    sscr = commands ;
+    alignm = GetE( 'alignment' ).value ;
 
-    init : function()
+    if ( noSVG )
     {
-        //var f = document.forms[ 0 ] ;
+        var pvimg = GetE( 'previewimg' ) ;
+        pvimg.src = AScgiloc + '?sscr=' + encodeURIComponent(commands) ;
+        //var ed = tinyMCEPopup.editor ;
+        //ed.dom.setStyle( pvimg, 'width' , width + 'px' ) ;
+        //ed.dom.setStyle( pvimg, 'height' , height + 'px' ) ;
+    }
+    else
+    {
+        var pvsvg = GetE( 'previewsvg' ) ;
+        parseShortScript( commands , width , height ) ;
+    }
+}
 
-        // Get the selected contents as text and place it in the input.
-        /*
-        this.width = tinyMCEPopup.getWindowArg( 'width' ) ;
-        this.height = tinyMCEPopup.getWindowArg( 'height' ) ;
-        this.isnew = tinyMCEPopup.getWindowArg( 'isnew' ) ;
-        this.sscr = tinyMCEPopup.getWindowArg( 'sscr' ) ;
-        this.AScgiloc = tinyMCEPopup.getWindowArg( 'AScgiloc' ) ;
-        this.alignm = tinyMCEPopup.getWindowArg( 'alignm' ) ;
-        */
+function UpdateText( id , text )
+{
+    var node = GetE( id ) ;
+    node.replaceChild( document.createTextNode( text ) , node.lastChild ) ;
+}
 
-        if ( noSVG )
-        {
-            GetE( 'preview' ).innerHTML = '<img id="previewimg" style="width:' + this.width + 'px; height: ' + this.height + 'px; vertical-align: middle; float: none;" src="' + AScgiloc + '?sscr=' + encodeURIComponent( this.sscr ) + '" script=" " />' ;
-        }
-        else
-        {
-            //GetE( 'preview' ).innerHTML = '<embed id="previewsvg" type="image/svg+xml" src="' + FCKConfig.DrawingASCIISVG + '" style="width: 300px; height: 200px; vertical-align: middle; float: none;" sscr="-7.5,7.5,-5,5,1,1,1,1,1,300,200" />' ;
-            GetE( 'previewsvg' ).setAttribute( 'sscr' , this.sscr );
-        }
-        this.getsscr( this.sscr ) ;
-    } ,
+function UpdateEquationType()
+{
+    var type = GetE( 'eqntype' ).value ;
 
-    insert : function()
+    if ( type == 'func' )
     {
-        ed = tinyMCEPopup.editor ;
-        // Insert the contents from the input into the document.
-        if ( this.isnew )
-        {
-            if ( this.alignm == 'left' || this.alignm == 'right' )
-            {
-                aligntxt = 'vertical-align: middle; float: ' + this.alignm + ';' ;
-            }
-            else
-            {
-                aligntxt = 'vertical-align: ' + this.alignm + '; float: none;' ;
-            }
-            tinyMCEPopup.editor.execCommand( 'mceInsertContent', false, '<img style="width: 300px; height: 200px; ' + aligntxt + '" src="' + AScgiloc + '?sscr=' + encodeURIComponent( this.sscr ) + '" sscr="' + this.sscr + '" script=" " />') ;
-        }
-        else
-        {
-            el = tinyMCEPopup.editor.selection.getNode() ;
-            ed.dom.setAttrib( el , 'sscr' , this.sscr ) ;
-            ed.dom.setAttrib( el , 'src' , AScgiloc + '?sscr=' + encodeURIComponent( this.sscr ) ) ;
-            ed.dom.setAttrib( el , 'width' , this.width ) ;
-            ed.dom.setAttrib( el , 'height' , this.height ) ;
-            ed.dom.setStyle( el , 'width' , this.width + 'px' ) ;
-            ed.dom.setStyle( el , 'height' , this.height + 'px') ;
-            if ( this.alignm == 'left' || this.alignm == 'right' )
-            {
-                ed.dom.setStyle( el , 'float' , this.alignm ) ;
-                ed.dom.setStyle( el , 'vertical-align' , 'middle' ) ;
-            }
-            else
-            {
-                ed.dom.setStyle( el , 'float' , 'none' ) ;
-                ed.dom.setStyle( el , 'vertical-align' , this.alignm ) ;
-            }
-        }
-        tinyMCEPopup.close() ;
-    } ,
+        UpdateText( 'eq1lbl', 'f(x)=' ) ;
+        GetE( 'equation' ).value = 'sin(x)' ;
+        UpdateText( 'eq2lbl' , '' ) ;
+        UpdateText( 'eq2' , '' ) ;
 
-    addgraph : function()
+    }
+    else if ( type == 'polar' )
     {
-        var graphs = GetE( 'graphs' ) ;
-        var newopt = document.createElement( 'option' ) ;
+        UpdateText( 'eq1lbl' , 'r(t)=' ) ;
+        GetE( 'equation' ).value = 't' ;
+        UpdateText( 'eq2lbl' , '' ) ;
+        UpdateText( 'eq2' , '' ) ;
 
-        var type = GetE( 'eqntype' ).value ;
-        var eq1 = GetE( 'equation' ).value ;
-        var eq2 = null ;
-
-        if ( type == 'func' )
-        {
-            newopt.text = 'y=' + eq1 ;
-        }
-        else if ( type == 'polar' )
-        {
-            newopt.text = 'r=' + eq1 ;
-        }
-        else if ( type == 'param' )
-        {
-            eq2= GetE( 'eqn2' ).value ;
-            newopt.text = '[x,y]=[' + eq1 + ','+ eq2 + ']' ;
-        }
-        else if ( type == 'slope' )
-        {
-            newopt.text = 'dy/dx=' + eq1 ;
-            eq2= GetE( 'eqn2' ).value ;
-        }
+    }
+    else if ( type == 'param' )
+    {
+        UpdateText( 'eq1lbl' , 'f(t)=' ) ;
+        UpdateText( 'eq2lbl' , 'g(t)= ' ) ;
+        var newinput = document.createElement( 'input' ) ;
+        newinput.type = 'text' ;
+        newinput.name = 'eqn2' ;
+        newinput.id = 'eqn2' ;
+        newinput.size = '15' ;
+        newinput.value = 'cos(t)' ;
+        var node = GetE( 'eq2' ) ;
+        node.replaceChild( newinput,node.lastChild ) ;
+        GetE( 'equation' ).value = 'sin(t)' ;
 
-        m_gstart = GetE( 'gstart' ).selectedIndex ;
-        m_gend = GetE( 'gend' ).selectedIndex ;
-        m_color = GetE( 'gcolor' ).value ;
-        m_strokewidth = GetE( 'strokewidth' ).value ;
-        m_strokedash = GetE( 'strokedash' ).value ;
-        if ( GetE( 'xstart' ).value.length > 0 )
-        {
-            //newopt.value = 'myplot(' + eqn +',"' + m_gstart+  '","' + m_gend + '",' + GetE( 'xstart' ).value + ',' + GetE( 'xend' ).value  + ');' ;
-            newopt.value = type + ',' + eq1 + ',' + eq2 + ',' + m_gstart + ',' + m_gend + ',' + GetE( 'xstart' ).value + ',' + GetE( 'xend' ).value + ',' + m_color + ',' + m_strokewidth + ',' + m_strokedash ;
-        }
-        else
-        {
-            //newopt.value = 'myplot(' + eqn + ',"' + m_gstart + '","' + m_gend + '");' ;
-            newopt.value = type + ',' + eq1 + ',' + eq2 + ',' + m_gstart + ',' + m_gend + ',,' + ',' + m_color + ',' + m_strokewidth + ',' + m_strokedash ;
-        }
+    }
+    else if ( type == 'slope' )
+    {
+        UpdateText( 'eq1lbl' , 'dy/dx (x,y) = ' ) ;
+        GetE( 'equation' ).value = 'x*y' ;
+        UpdateText( 'eq2lbl' , 'every ' ) ;
+        var newinput = document.createElement( 'input' ) ;
+        newinput.type = 'text' ;
+        newinput.name = 'eqn2' ;
+        newinput.id = 'eqn2' ;
+        newinput.size = '2' ;
+        newinput.value = '1' ;
+        var node = GetE( 'eq2' ) ;
+        node.replaceChild( newinput , node.lastChild ) ;
+    }
+    GetE( 'gstart' ).selectedIndex = 0 ;
+    GetE( 'gend' ).selectedIndex = 0 ;
+    GetE( 'xstart' ).value = '' ;
+    GetE( 'xend' ).value = '' ;
+    GetE( 'gcolor' ).selectedIndex = 0 ;
+    GetE( 'strokewidth' ).selectedIndex = 0 ;
+    GetE( 'strokedash' ).selectedIndex = 0 ;
+}
 
-        graphs.options[ graphs.options.length ] = newopt ;
-        graphs.selectedIndex = graphs.options.length - 1 ;
-        UpdatePreview() ;
-        GetE( 'equation' ).focus() ;
-    } ,
+function LoadEquation()
+{
+    var graphs = GetE( 'graphs' ) ;
+
+    var sa = graphs.options[ graphs.selectedIndex ].value.split( ',' ) ;
+
+    if ( sa[0] == 'func' ) {
+        GetE( 'eqntype' ).selectedIndex = 0 ;
+    } else if ( sa[0] == 'polar' ) {
+        GetE( 'eqntype' ).selectedIndex = 1 ;
+    } else if ( sa[0] == 'param' ) {
+        GetE( 'eqntype' ).selectedIndex = 2 ;
+    } else if ( sa[0] == 'slope' ) {
+        GetE( 'eqntype' ).selectedIndex = 3 ;
+    }
+    UpdateEquationType() ;
+    GetE( 'equation' ).value = sa[1] ;
+    if ( ( sa[0] == 'param' ) || ( sa[0] == 'slope' ) ) {
+        GetE( 'eqn2' ).value = sa[2] ;
+    }
 
-    replacegraph : function()
+    GetE( 'gstart' ).selectedIndex = sa[ 3 ] ;
+    GetE( 'gend' ).selectedIndex = sa[ 4 ] ;
+    GetE( 'xstart' ).value = sa[ 5 ] ;
+    GetE( 'xend' ).value = sa[ 6 ] ;
+    switch ( sa[ 7 ] )
     {
-        var graphs = GetE( 'graphs' ) ;
-        if ( graphs.selectedIndex >= 0 )
-        {
-            graphs.options[ graphs.selectedIndex ] = null ;  //standards compliant
-        }
-        this.addgraph() ;
-    } ,
+        case 'black' : GetE( 'gcolor' ).selectedIndex = 0 ; break ;
+        case 'red' : GetE( 'gcolor' ).selectedIndex = 1 ; break ;
+        case 'orange' : GetE( 'gcolor' ).selectedIndex = 2 ; break ;
+        case 'yellow' : GetE( 'gcolor' ).selectedIndex = 3 ; break ;
+        case 'green' : GetE( 'gcolor' ).selectedIndex = 4 ; break ;
+        case 'blue' : GetE( 'gcolor' ).selectedIndex = 5 ; break ;
+        case 'purple' : GetE( 'gcolor' ).selectedIndex = 6 ; break ;
+    }
+    GetE( 'strokewidth' ).selectedIndex = sa[ 8 ] - 1 ;
+    switch ( sa[ 9 ] )
+    {
+        case '2' : GetE( 'strokedash' ).selectedIndex = 1 ; break ;
+        case '5' : GetE( 'strokedash' ).selectedIndex = 2 ; break ;
+        case '5 2' : GetE( 'strokedash' ).selectedIndex = 3 ; break ;
+        case '7 3 2 3' : GetE( 'strokedash' ).selectedIndex = 4 ; break ;
+        default : GetE( 'strokedash' ).selectedIndex = 0 ;
+    }
+}
 
-    removegraph : function()
+function LoadGraphScript( text )
+{
+    var alignment = 'middle' ;
+    var sa = text.split( ',' ) ;
+    GetE( 'xmin' ).value = sa[ 0 ] ;
+    GetE( 'xmax' ).value = sa[ 1 ] ;
+    GetE( 'ymin' ).value = sa[ 2 ] ;
+    GetE( 'ymax' ).value = sa[ 3 ] ;
+    GetE( 'xscl' ).value = sa[ 4 ] ;
+    GetE( 'yscl' ).value = sa[ 5 ] ;
+
+    if ( sa[ 6 ] != 'null' )
     {
-        var graphs = GetE( 'graphs' ) ;
-        if ( graphs.selectedIndex >= 0 ) {
-            graphs.options[ graphs.selectedIndex ] = null ;
-            if ( graphs.options.length > 0 ) { this.loadeqn() ; }
-        }
-        UpdatePreview() ;
-        GetE( 'equation' ).focus() ;
-    } ,
+        GetE( 'labels' ).checked = true ;
+    }
+    else
+    {
+        GetE( 'labels' ).checked = false ;
+    }
+    if ( typeof eval( sa[ 7 ] ) == 'number' )
+    {
+        GetE( 'grid' ).checked = true ;
+    }
+    else
+    {
+        GetE( 'grid' ).checked = false ;
+    }
+
+    GetE( 'gwidth' ).value = sa[ 9 ] ;
+    GetE( 'gheight' ).value = sa[ 10 ] ;
 
-    graphit : function()
+    GetE( 'graphs' ).length = 0 ;
+
+    var inx = 11 ;
+    while ( sa.length > inx + 9 )
     {
-        //ed = tinyMCEPopup.editor ;
-        var commands ;
-        commands = '' ;
-
-        initialized = false ;
-
-        //commands = 'setBorder(5);' ;
-
-        m_xmin = GetE( 'xmin' ).value ;
-        m_xmax = GetE( 'xmax' ).value ;
-        m_ymin = GetE( 'ymin' ).value ;
-        m_ymax = GetE( 'ymax' ).value ;
-        if ( m_ymin == '' ) m_ymin = null ;
-        if ( m_ymax == '' ) m_ymax = null ;
-        commands += m_xmin + ',' + m_xmax + ',' + m_ymin + ',' + m_ymax + ',' ;
-
-        m_xscl = GetE( 'xscl' ).value ;
-        m_yscl = GetE( 'yscl' ).value ;
-        if ( m_xscl == '' ) m_xscl = null ;
-        if ( m_yscl == '' ) m_yscl = null ;
-        if ( GetE( 'labels' ).checked )
+        var newopt = document.createElement( 'option' ) ;
+
+        if ( sa[ inx ] == 'func' )
         {
-            m_labels = '1' ;
+            newopt.text = 'y=' + sa[ inx + 1 ] ;
         }
-        else
+        else if ( sa[ inx ] == 'polar' )
         {
-            m_labels = 'null' ;
+            newopt.text = 'r=' + sa[ inx + 1 ] ;
         }
-
-        if ( GetE( 'grid' ).checked )
+        else if ( sa[inx] == 'param' )
         {
-            m_grid = ',' + m_xscl + ',' + m_yscl ;
+            newopt.text = '[x,y]=[' + sa[ inx + 1 ] + ',' + sa[ inx + 2 ] + ']' ;
         }
-        else
+        else if ( sa[inx] == 'slope' )
         {
-            m_grid = ',null,null' ;
+            newopt.text = 'dy/dx=' + sa[ inx + 1 ] ;
         }
-        commands += m_xscl + ',' + m_yscl + ',' + m_labels + m_grid ;
+        newopt.value = sa[inx] + ',' + sa[ inx + 1 ] + ',' + sa[ inx + 2 ] + ',' + sa[ inx + 3 ] + ',' + sa[ inx + 4 ] + ',' + sa[ inx + 5 ] + ',' + sa[ inx + 6 ] + ',' + sa[ inx + 7 ] + ',' + sa[ inx + 8] + ',' + sa[ inx + 9 ] ;
+        var graphs = GetE( 'graphs' ) ;
+        graphs.options[ graphs.options.length ] = newopt ;
+        //GetE( 'graphs' ).add( newopt ) ;
+        inx += 10 ;
+    }
+    if ( inx > 11 ) {
+        LoadEquation() ;
+    }
 
-        commands += ',' + GetE( 'gwidth' ).value + ',' + GetE( 'gheight' ).value ;
+    switch ( alignment.toLowerCase() )
+    {
+        case 'text-top' : GetE( 'alignment' ).selectedIndex = 0 ; break ;
+        case 'middle' : GetE( 'alignment' ).selectedIndex = 1 ; break ;
+        case 'text-bottom' : GetE( 'alignment' ).selectedIndex = 2 ; break ;
+        case 'left' : GetE( 'alignment' ).selectedIndex = 3 ; break ;
+        case 'right' : GetE( 'alignment' ).selectedIndex = 4 ; break ;
+        default: GetE( 'alignment' ).selectedIndex = 0 ; break ;
+    }
 
+    //UpdatePreview() ;
+}
 
-        graphs = GetE( 'graphs' ) ;
-        for ( i = 0 ; i < graphs.length ; i++ )
-        {
-            commands += ',' + graphs.options[i].value ;
-        }
+function AddGraph()
+{
+    var graphs = GetE( 'graphs' ) ;
+    var newopt = document.createElement( 'option' ) ;
 
-        this.width = GetE( 'gwidth' ).value ;
-        this.height = GetE( 'gheight' ).value ;
-        this.sscr = commands ;
-        this.alignm = GetE( 'alignment' ).value ;
-
-        //if ( noSVG )
-        //{
-        //    pvimg = GetE( 'previewimg' ) ;
-        //    pvimg.src = AScgiloc + '?sscr=' + encodeURIComponent(commands) ;
-        //    //ed.dom.setStyle( pvimg, 'width' , this.width + 'px' ) ;
-        //    //ed.dom.setStyle( pvimg, 'height' , this.height + 'px' ) ;
-        //}
-        //else
-        //{
-            pvsvg = GetE( 'previewsvg' ) ;
-            parseShortScript( commands , this.width , this.height ) ;
-        //}
-    } ,
+    var type = GetE( 'eqntype' ).value ;
+    var eq1 = GetE( 'equation' ).value ;
+    var eq2 = null ;
 
-    changetype : function()
+    if ( type == 'func' )
+    {
+        newopt.text = 'y=' + eq1 ;
+    }
+    else if ( type == 'polar' )
     {
-        var type = GetE( 'eqntype' ).value ;
+        newopt.text = 'r=' + eq1 ;
+    }
+    else if ( type == 'param' )
+    {
+        eq2 = GetE( 'eqn2' ).value ;
+        newopt.text = '[x,y]=[' + eq1 + ','+ eq2 + ']' ;
+    }
+    else if ( type == 'slope' )
+    {
+        newopt.text = 'dy/dx=' + eq1 ;
+        eq2 = GetE( 'eqn2' ).value ;
+    }
 
-        if ( type == 'func' )
-        {
-            this.chgtext( 'eq1lbl', 'f(x)=' ) ;
-            GetE( 'equation' ).value = 'sin(x)' ;
-            this.chgtext( 'eq2lbl' , '' ) ;
-            this.chgtext( 'eq2' , '' ) ;
+    var m_gstart = GetE( 'gstart' ).selectedIndex ;
+    var m_gend = GetE( 'gend' ).selectedIndex ;
+    var m_color = GetE( 'gcolor' ).value ;
+    var m_strokewidth = GetE( 'strokewidth' ).value ;
+    var m_strokedash = GetE( 'strokedash' ).value ;
+    if ( GetE( 'xstart' ).value.length > 0 )
+    {
+        //newopt.value = 'myplot(' + eqn +',"' + m_gstart+  '","' + m_gend + '",' + GetE( 'xstart' ).value + ',' + GetE( 'xend' ).value  + ');' ;
+        newopt.value = type + ',' + eq1 + ',' + eq2 + ',' + m_gstart + ',' + m_gend + ',' + GetE( 'xstart' ).value + ',' + GetE( 'xend' ).value + ',' + m_color + ',' + m_strokewidth + ',' + m_strokedash ;
+    }
+    else
+    {
+        //newopt.value = 'myplot(' + eqn + ',"' + m_gstart + '","' + m_gend + '");' ;
+        newopt.value = type + ',' + eq1 + ',' + eq2 + ',' + m_gstart + ',' + m_gend + ',,' + ',' + m_color + ',' + m_strokewidth + ',' + m_strokedash ;
+    }
 
-        }
-        else if ( type == 'polar' )
-        {
-            this.chgtext( 'eq1lbl' , 'r(t)=' ) ;
-            GetE( 'equation' ).value = 't' ;
-            this.chgtext( 'eq2lbl' , '' ) ;
-            this.chgtext( 'eq2' , '' ) ;
+    graphs.options[ graphs.options.length ] = newopt ;
+    graphs.selectedIndex = graphs.options.length - 1 ;
+    UpdatePreview() ;
+    GetE( 'equation' ).focus() ;
+}
 
-        }
-        else if ( type == 'param' )
-        {
-            this.chgtext( 'eq1lbl' , 'f(t)=' ) ;
-            this.chgtext( 'eq2lbl' , 'g(t)= ' ) ;
-            var newinput = document.createElement( 'input' ) ;
-            newinput.type = 'text' ;
-            newinput.name = 'eqn2' ;
-            newinput.id = 'eqn2' ;
-            newinput.size = '15' ;
-            newinput.value = 'cos(t)' ;
-            var cnode = GetE( 'eq2' ) ;
-            cnode.replaceChild( newinput,cnode.lastChild ) ;
-            GetE( 'equation' ).value = 'sin(t)' ;
+function ReplaceGraph()
+{
+    var graphs = GetE( 'graphs' ) ;
+    if ( graphs.selectedIndex >= 0 )
+    {
+        graphs.options[ graphs.selectedIndex ] = null ;  // Standards compliant.
+    }
+    AddGraph() ;
+}
 
-        }
-        else if ( type == 'slope' )
-        {
-            this.chgtext( 'eq1lbl' , 'dy/dx (x,y) = ' ) ;
-            GetE( 'equation' ).value = 'x*y' ;
-            this.chgtext( 'eq2lbl' , 'every ' ) ;
-            var newinput = document.createElement( 'input' ) ;
-            newinput.type = 'text' ;
-            newinput.name = 'eqn2' ;
-            newinput.id = 'eqn2' ;
-            newinput.size = '2' ;
-            newinput.value = '1' ;
-            var cnode = GetE( 'eq2' ) ;
-            cnode.replaceChild( newinput , cnode.lastChild ) ;
-        }
-        GetE( 'gstart' ).selectedIndex = 0 ;
-        GetE( 'gend' ).selectedIndex = 0 ;
-        GetE( 'xstart' ).value = '' ;
-        GetE( 'xend' ).value = '' ;
-        GetE( 'gcolor' ).selectedIndex = 0 ;
-        GetE( 'strokewidth' ).selectedIndex = 0 ;
-        GetE( 'strokedash' ).selectedIndex = 0 ;
-    } ,
+function RemoveGraph()
+{
+    var graphs = GetE( 'graphs' ) ;
+    if ( graphs.selectedIndex >= 0 )
+    {
+        graphs.options[ graphs.selectedIndex ] = null ;
+        if ( graphs.options.length > 0 ) { LoadEquation() ; }
+    }
+    UpdatePreview() ;
+    GetE( 'equation' ).focus() ;
+}
 
-    loadeqn : function()
+// TODO: To be removed ...
+var AsciisvgDialog =
+{
+    init : function()
     {
-        graphs = GetE( 'graphs' ) ;
-
-        var sa = graphs.options[ graphs.selectedIndex ].value.split( ',' ) ;
-
-        if ( sa[0] == 'func' ) {
-            GetE( 'eqntype' ).selectedIndex = 0 ;
-        } else if ( sa[0] == 'polar' ) {
-            GetE( 'eqntype' ).selectedIndex = 1 ;
-        } else if ( sa[0] == 'param' ) {
-            GetE( 'eqntype' ).selectedIndex = 2 ;
-        } else if ( sa[0] == 'slope' ) {
-            GetE( 'eqntype' ).selectedIndex = 3 ;
-        }
-        this.changetype() ;
-        GetE( 'equation' ).value = sa[1] ;
-        if ( ( sa[0] == 'param' ) || ( sa[0] == 'slope' ) ) {
-            GetE( 'eqn2' ).value = sa[2] ;
-        }
+        //var f = document.forms[ 0 ] ;
 
-        GetE( 'gstart' ).selectedIndex = sa[ 3 ] ;
-        GetE( 'gend' ).selectedIndex = sa[ 4 ] ;
-        GetE( 'xstart' ).value = sa[ 5 ] ;
-        GetE( 'xend' ).value = sa[ 6 ] ;
-        switch ( sa[ 7 ] )
-        {
-            case 'black' : GetE( 'gcolor' ).selectedIndex = 0 ; break ;
-            case 'red' : GetE( 'gcolor' ).selectedIndex = 1 ; break ;
-            case 'orange' : GetE( 'gcolor' ).selectedIndex = 2 ; break ;
-            case 'yellow' : GetE( 'gcolor' ).selectedIndex = 3 ; break ;
-            case 'green' : GetE( 'gcolor' ).selectedIndex = 4 ; break ;
-            case 'blue' : GetE( 'gcolor' ).selectedIndex = 5 ; break ;
-            case 'purple' : GetE( 'gcolor' ).selectedIndex = 6 ; break ;
-        }
-        GetE( 'strokewidth' ).selectedIndex = sa[ 8 ] - 1 ;
-        switch ( sa[ 9 ] )
-        {
-            case '2' : GetE( 'strokedash' ).selectedIndex = 1 ; break ;
-            case '5' : GetE( 'strokedash' ).selectedIndex = 2 ; break ;
-            case '5 2' : GetE( 'strokedash' ).selectedIndex = 3 ; break ;
-            case '7 3 2 3' : GetE( 'strokedash' ).selectedIndex = 4 ; break ;
-            default : GetE( 'strokedash' ).selectedIndex = 0 ;
-        }
-    } ,
+        // Get the selected contents as text and place it in the input.
+        /*
+        width = tinyMCEPopup.getWindowArg( 'width' ) ;
+        height = tinyMCEPopup.getWindowArg( 'height' ) ;
+        isnew = tinyMCEPopup.getWindowArg( 'isnew' ) ;
+        sscr = tinyMCEPopup.getWindowArg( 'sscr' ) ;
+        alignm = tinyMCEPopup.getWindowArg( 'alignm' ) ;
+        */
 
-    getsscr : function( text , alignment )
-    {
-        alignment = 'middle' ;
-        sa = text.split( ',' ) ;
-        GetE( 'xmin' ).value = sa[ 0 ] ;
-        GetE( 'xmax' ).value = sa[ 1 ] ;
-        GetE( 'ymin' ).value = sa[ 2 ] ;
-        GetE( 'ymax' ).value = sa[ 3 ] ;
-        GetE( 'xscl' ).value = sa[ 4 ] ;
-        GetE( 'yscl' ).value = sa[ 5 ] ;
-
-        if ( sa[ 6 ] != 'null' )
-        {
-            GetE( 'labels' ).checked = true ;
-        }
-        else
-        {
-            GetE( 'labels' ).checked = false ;
-        }
-        if ( typeof eval( sa[ 7 ] ) == 'number' )
+        if ( noSVG )
         {
-            GetE( 'grid' ).checked = true ;
+            GetE( 'preview' ).innerHTML = '<img id="previewimg" style="width:' + width + 'px; height: ' + height + 'px; vertical-align: middle; float: none;" src="' + AScgiloc + '?sscr=' + encodeURIComponent( sscr ) + '" script=" " />' ;
         }
         else
         {
-            GetE( 'grid' ).checked = false ;
+            //GetE( 'preview' ).innerHTML = '<embed id="previewsvg" type="image/svg+xml" src="' + FCKConfig.DrawingASCIISVG + '" style="width: 300px; height: 200px; vertical-align: middle; float: none;" sscr="-7.5,7.5,-5,5,1,1,1,1,1,300,200" />' ;
+            GetE( 'previewsvg' ).setAttribute( 'sscr' , sscr );
         }
+        LoadGraphScript( sscr ) ;
+    } ,
 
-        GetE( 'gwidth' ).value = sa[ 9 ] ;
-        GetE( 'gheight' ).value = sa[ 10 ] ;
-
-        GetE( 'graphs' ).length = 0 ;
-
-        var inx = 11 ;
-        while ( sa.length > inx + 9 )
+    insert : function()
+    {
+        var ed = tinyMCEPopup.editor ;
+        // Insert the contents from the input into the document.
+        if ( isnew )
         {
-            var newopt = document.createElement( 'option' ) ;
-
-            if ( sa[ inx ] == 'func' )
+            if ( alignm == 'left' || alignm == 'right' )
             {
-                newopt.text = 'y=' + sa[ inx + 1 ] ;
+                aligntxt = 'vertical-align: middle; float: ' + alignm + ';' ;
             }
-            else if ( sa[ inx ] == 'polar' )
+            else
             {
-                newopt.text = 'r=' + sa[ inx + 1 ] ;
+                aligntxt = 'vertical-align: ' + alignm + '; float: none;' ;
             }
-            else if ( sa[inx] == 'param' )
+            tinyMCEPopup.editor.execCommand( 'mceInsertContent', false, '<img style="width: 300px; height: 200px; ' + aligntxt + '" src="' + AScgiloc + '?sscr=' + encodeURIComponent( sscr ) + '" sscr="' + sscr + '" script=" " />') ;
+        }
+        else
+        {
+            el = tinyMCEPopup.editor.selection.getNode() ;
+            ed.dom.setAttrib( el , 'sscr' , sscr ) ;
+            ed.dom.setAttrib( el , 'src' , AScgiloc + '?sscr=' + encodeURIComponent( sscr ) ) ;
+            ed.dom.setAttrib( el , 'width' , width ) ;
+            ed.dom.setAttrib( el , 'height' , height ) ;
+            ed.dom.setStyle( el , 'width' , width + 'px' ) ;
+            ed.dom.setStyle( el , 'height' , height + 'px') ;
+            if ( alignm == 'left' || alignm == 'right' )
             {
-                newopt.text = '[x,y]=[' + sa[ inx + 1 ] + ',' + sa[ inx + 2 ] + ']' ;
+                ed.dom.setStyle( el , 'float' , alignm ) ;
+                ed.dom.setStyle( el , 'vertical-align' , 'middle' ) ;
             }
-            else if ( sa[inx] == 'slope' )
+            else
             {
-                newopt.text = 'dy/dx=' + sa[ inx + 1 ] ;
+                ed.dom.setStyle( el , 'float' , 'none' ) ;
+                ed.dom.setStyle( el , 'vertical-align' , alignm ) ;
             }
-            newopt.value = sa[inx] + ',' + sa[ inx + 1 ] + ',' + sa[ inx + 2 ] + ',' + sa[ inx + 3 ] + ',' + sa[ inx + 4 ] + ',' + sa[ inx + 5 ] + ',' + sa[ inx + 6 ] + ',' + sa[ inx + 7 ] + ',' + sa[ inx + 8] + ',' + sa[ inx + 9 ] ;
-            graphs = GetE( 'graphs' ) ;
-            graphs.options[ graphs.options.length ] = newopt ;
-            //GetE( 'graphs' ).add( newopt ) ;
-            inx += 10 ;
-        }
-        if ( inx > 11 ) {
-            this.loadeqn() ;
-        }
-
-        switch ( alignment.toLowerCase() )
-        {
-            case 'text-top' : GetE( 'alignment' ).selectedIndex = 0 ; break ;
-            case 'middle' : GetE( 'alignment' ).selectedIndex = 1 ; break ;
-            case 'text-bottom' : GetE( 'alignment' ).selectedIndex = 2 ; break ;
-            case 'left' : GetE( 'alignment' ).selectedIndex = 3 ; break ;
-            case 'right' : GetE( 'alignment' ).selectedIndex = 4 ; break ;
-            default: GetE( 'alignment' ).selectedIndex = 0 ; break ;
         }
-
-        //UpdatePreview() ;
-    } ,
-
-    chgtext : function( tag , text )
-    {
-        var cnode = GetE( tag ) ;
-        cnode.replaceChild( document.createTextNode( text ) , cnode.lastChild ) ;
+        tinyMCEPopup.close() ;
     }
 
 } ;