<!--
    * Licensed to the Apache Software Foundation (ASF) under one
    * or more contributor license agreements.  See the NOTICE file
    * distributed with this work for additional information
    * regarding copyright ownership.  The ASF licenses this file
    * to you under the Apache License, Version 2.0 (the
    * "License"); you may not use this file except in compliance
    * with the License.  You may obtain a copy of the License at
    * 
    *   http://www.apache.org/licenses/LICENSE-2.0
    * 
    * Unless required by applicable law or agreed to in writing,
    * software distributed under the License is distributed on an
    * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
    * KIND, either express or implied.  See the License for the
    * specific language governing permissions and limitations
    * under the License.    
-->
<html>
<head>  
<link rel="stylesheet" type="text/css" href="/ui.css">
<script type="text/javascript" src="/util.js"></script>
<script type="text/javascript" src="/elemutil.js"></script>
<script type="text/javascript" src="/xmlutil.js"></script>
<script type="text/javascript" src="/atomutil.js"></script>
<script type="text/javascript" src="/scdl.js"></script>
<script type="text/javascript" src="/ui.js"></script>
<script type="text/javascript" src="/component.js"></script>
<script type="text/javascript" src="graph.js"></script>
</head>  
<body>

<div style="position: absolute; top: 0px; left: 0px; right: 0px;">

<table width="100%">
<tr><th style="width: 338px;">Components</th><th style="padding-top: 0px; padding-bottom: 0px;"><span id="appname"></span><span style="position: absolute; top: 2px; right: 8px;"><input type="button" id="saveButton" style="font-weight: bold;" Value="Save"/></span></th></tr>
</table>

</div>

<script type="text/javascript">
var editWidget = sca.component("EditWidget");
var palettes = sca.reference(editWidget, "palettes");
var apps = sca.reference(editWidget, "apps");

// Setup remote log
//rconsole = sca.defun(sca.reference(editWidget, "log"), "log");

/**
 * The current app name.
 */
var appname = ui.queryParams()['app'];
$('appname').innerHTML = 'Composition: ' + appname;

/**
 * The current app composite.
 */
var composite;

/**
 * Return the composite in an ATOM entry.
 */
function atomcomposite(doc) {
    var entry = atom.readATOMEntryDocument(doc);
    var item = caddr(entry);
    return cddr(item);
}

/**
 * Get and display an app.
 */
function getapp(name, g) {
    if (isNil(name))
        return;
    apps.get(name, function(doc) {
        composite = atomcomposite(doc);
        graph.edit(composite, graph.composite(composite, graph.mkpath().move(350,0)), g);
    });
}

/**
 * Get and display a palette of components.
 */
function getpalette(name, g, bg, palette, gpalettes) {
    if (isNil(name))
        return;
    palettes.get(name, function(doc) {
        gpalettes[name] = graph.composite(atomcomposite(doc), graph.mkpath().move(150,0));
        graph.display(gpalettes[name], name == spalette? g : bg);
    });
}

/**
 * Install a palette, including a button to select the palette, and
 * the palette content.
 */
function installpalette(name, pos, g, bg, palette, gpalettes) {
    var b = graph.mkbutton(name, pos);
    graph.display(mklist(b), g);
    b.onclick = function() {

        // Display the selected palette
        spalette = name;
        for (var pn in gpalettes)
            graph.display(gpalettes[pn], pn == spalette? g : bg);
    }
    getpalette(name, g, bg, palette, gpalettes);
}

/**
 * Save the current edited page.
 */
$('saveButton').onclick = function(e) {

    // Update the page ATOM entry
    var compxml = writeXML(composite, false);
    var entry = '<entry xmlns="http://www.w3.org/2005/Atom">' +
        '<title type="text">' + appname + '</title><id>' + appname + '</id><content type="application/xml"><item>' +
        compxml + '</item></content></entry>';
    apps.put(appname, entry, function() {
    });
};

// Create editor graph area
var g = graph.mkgraph(graph.mkpath().move(0,50));
var bg = graph.mkgroup(graph.mkpath());

// Install the palettes.
var gpalettes = new Array();
var spalette = 'variables';
installpalette('variables', graph.mkpath().move(0,10), g, bg, spalette, gpalettes);
installpalette('control', graph.mkpath().move(0,80), g, bg, spalette, gpalettes);
installpalette('operators', graph.mkpath().move(0,150), g, bg, spalette, gpalettes);
installpalette('social', graph.mkpath().move(0,220), g, bg, spalette, gpalettes);
installpalette('sensors', graph.mkpath().move(0,290), g, bg, spalette, gpalettes);

// Get and display the current app
getapp(appname, g);

</script>
</body>
</html>