1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145

mathtran_templates = {}
mathtran_templates.display = 
'<div class=mathtran>\
<span class=mathtran-tex></span>\
<img class=mathtran-img />\
</div>'

mathtran_templates.inline = mathtran_templates.display.replace(/div/g, "span")

// Similar to the html method.
$.fn.tex = function (tex) {

    if (typeof tex == "undefined")
        return $(this.children()[0]).text()

    if (typeof tex == "string"){

        $(this.children()[0]).text(tex)

        // What about the magnification?
        $(this.children()[1])
        .attr("alt", "tex:" + tex)
        .attr("src", "http://www.mathtran.org/cgi-bin/toy/?tex=" + 
              encodeURIComponent(tex));
    
        return this
    }
    this_should_not_happen
}

// Factory function for creating mathtran objects.
$.mathtran = function (style, tex) {

    var template = mathtran_templates[style]

    if (typeof tex == "string")
        return $(template).tex(tex)

    // What about when tex is an img?

    // What if the img has a parent?

    // Want one-step process for replacing img by div.mathtran.

    this_should_not_happen    
}


function cycle(array, callback){
    var state = 0
    function f() {
        state ++
        state %= array.length
        // console.log(state)
        callback.apply(this, array[state])
        return state
    }
    return f
}

mathtran_display_states = [
    // text, applied classes, removed classes
    ['TeX', 'mathtran-img-hide', 'mathtran-tex-hide'], 
    ['img', 'mathtran-tex-hide', 'mathtran-img-hide'], 
    ['both', '', 'mathtran-tex-hide mathtran-img-hide'], 
]

// To reload run $.getScript('jquery.mathtran.js')
$(function(){
    $('body')
    .empty()
    .prepend($.mathtran('inline', '\\int_0^1 x^5 dx'))
    .prepend($.mathtran('display', '\\int_0^1 g^3 dx'))

    $('<p id="mathtran-toggle-tex">unTeX</p>')
    .prependTo('body')
    .click(cycle(mathtran_display_states, function(text, add, remove){
        // console.log(this)
        // console.log(arguments)
        $(this).text(text)
        $(document.body)
        .addClass(add)
        .removeClass(remove)
    })
          )
    .click()
    .click()

})



/*

(function($) {

    $.XXXXmathtran = {

    initXXX: function(){

        document.mathtran = {
            server: "http://www.mathtran.org/cgi-bin/toy/",
        }

        // What if init is run several times?


        // This is a function that creates an inline mathtran object.
        $('img[@alt^=tex:]').each(function(){
            $(this).wrap('<span class=mathtran></span>')
            .addClass('mathtran-img')
            .before('<span class=mathtran-tex>x^2</span>')
            .after('<span class=mathtran-log></span>')
            .attr('src', 
                         'http://www.mathtran.org/cgi-bin/toy/?tex='
                         + encodeURIComponent('x^2')
                         )
        })

        $('<p id="mathtran-toggle-tex">unTeX</p>')
        .prependTo('body')
        .toggle(
                // This is a function for manipulating a mathtran control.
                function(){
                    $(this).text('TeX')
                    $('body')
                    .addClass('mathtran-img-hide')
                    .removeClass('mathtran-tex-hide')
                        },
                function(){
                    $(this).text('UnTeX')
                    $('body')
                    .addClass('mathtran-tex-hide')
                    .removeClass('mathtran-img-hide')
                        }
                )
            }

    }

})(jQuery)

*/