<?xml version="1.0" encoding="Shift_JIS" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
         "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1"
     onload='init()'
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>SVG Calculator</title>
  <desc>
    何の変哲もないただの電卓です。
  </desc>
  <!-- script type="text/ecmascript" xlink:href="prototype.js"></script -->
  <script type="text/ecmascript"><![CDATA[
    var svgNS = "http://www.w3.org/2000/svg";
    var currentValue = null;
    var storedOperator = null;
    
    function $(id){
        return document.getElementById(id);
    }
    
    function setAttribute(elm, obj){
        for (var i in obj) {
            elm.setAttribute(i, obj[i]);
        }
    }

    function contains(item, array){
        for (var i = 0; i < array.length; i++) {
            if (item == array[i]) {
                return true;
            }
        }
        return false;
    }

    function getDispValue(){
        var v = $('input_nums').childNodes[0].nodeValue;
        if (v.match(/[0-9]+\.[0-9]+/)) {
            return parseFloat(v);
        }
        else {
            return parseInt(v);
        }
    }

    function clearDisp(){
        $('input_nums').childNodes[0].nodeValue = '';
    }

    function calc(){
        switch (storedOperator) {
            case '+':
                currentValue += getDispValue();
                break;
            case '-':
                currentValue -= getDispValue();
                break;
            case '*':
                currentValue *= getDispValue();
                break;
            case '/':
                currentValue /= getDispValue();
                break;
        }
    }

    function store(c){
        if (currentValue != null) {
            calc();
            clearDisp();
            storedOperator = c;
        }
        else {
            currentValue = getDispValue();
            storedOperator = c;
            clearDisp();
        }
    }

    function execOperator(c){
        var OPECHARS = ['+', '-', '*', '/'];
        if (contains(c, OPECHARS)) {
            store(c);
            return true;
        }
        return false;
    }

    function pushButton(c){
        if (c == '=') {
            doCalc();
            return;
        }
        else 
            if (!execOperator(c)) {
                len = $('input_nums').childNodes.length;
                if (len > 0) {
                    $('input_nums').childNodes[0].nodeValue += c;
                }
                else {
                    var n = document.createTextNode(c);
                    $('input_nums').appendChild(n);
                }
            }
    }

    function createSvgElement(name, properties){
        var elm = document.createElementNS(svgNS, name);
        setAttribute(elm, properties);
        return elm;
    }

    function makeButton(translate, text, action){
        var g = createSvgElement('g', {
            'transform': translate,
            'onclick': action,
            'style': 'cursor:default;'
        });
        var r = createSvgElement('rect', {
            'width': '1.5em',
            'height': '1.5em',
            'rx': 5,
            'ry': 5,
            'fill': 'white'
        });
        var t = createSvgElement('text', {
            'x': 5,
            'y': 20
        });
        t.appendChild(document.createTextNode(text));
        g.appendChild(r);
        g.appendChild(t);
        $('button_panel').appendChild(g);
    }

    function doCalc(){
        calc();
        var n = $('input_nums').childNodes[0];
        n.nodeValue = currentValue;
        storedOperator = currentValue = null;
    }

    function init(){
        var X_STEP = 40;
        var Y_STEP = 40;
        var buttons = [['7', '8', '9', '+'], ['4', '5', '6', '-'], ['1', '2', '3', '*'], ['0', '.', '=', '/']];
        for (var i = 0; i < buttons.length; i++) {
            for (var j = 0; j < buttons[i].length; j++) {
                var b = buttons[i][j];
                var x = 10 + j * X_STEP;
                var y = 10 + i * Y_STEP;
                makeButton('translate(' + x + ',' + y + ') scale(1.5)', b, 'pushButton("' + b + '")');
            }
        }
    }

  ]]></script>
  <rect x="0" y="0" width="200" height="300" rx="10" ry="40" fill="blue"/>
  <g transform="translate(10,40)">
    <rect width="180" height="2em" rx="5" ry="5" fill="white"/>
    <text id="input_nums" x="1em" y="1.2em"></text>
  </g>
  <g id='button_panel' transform='translate(10,80)'></g>
</svg>
