MediaWiki:Common.js: Unterschied zwischen den Versionen

Aktuelle Version vom 16. Dezember 2023, 18:31 Uhr

/*
Animated Tagcloud -- based on JS-Cumulus - WP-Cumulus in JavaScript (codenamed jscumulus)
Based on Stratus plugin by Dawid Fatyga (fatyga@student.agh.edu.pl)
Based on WP-Cumulus by Roy Tanck (http://www.roytanck.com)
@author Jeroen van Warmerdam (aka jerone or jeronevw) (http://www.jeroenvanwarmerdam.nl)
@date 24-05-2012 02:15
@version 0.2.5
Copyright 2010 - 2012, Jeroen van Warmerdam
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.

This variant by JRJS 2023
*/

(function(_win, _doc, undefined){

        // Activate ECMAScript 5 Strict Mode;
        "use strict";

        /* Defaults */
        var Defaults = {
                ID : "tagCloud",         // String        => Tagcloud id;
                Class : "tagCloud",      // String        => Tagcloud class;
                Width : 400,             // Integer       => Tagcloud width in pixels;
                Heigth : 400,            // Integer       => Tagcloud height in pixels;
                Consistent : true,       // Boolean       => Devide tags evenly;
                Rank : 30,               // Integer 0-100 => Tag importance in procents;
                Url : "#",               // String URL    => Tag url;
                OpenInNewWindow: false,  // Boolean       => Open tag url in new window or tab;
                FontMin : 10,            // Float         => Font size for smallest tag in pixels;
                FontMax : 24,            // Float         => Font size for biggest tag in pixels;
                Depth : 150,             // Integer       => Perspective depth;
                AnimationTime : 1,       // Integer       => Animation time and interval, the less it is, the faster the animation is;
                HoverStop : 15,          // Integer 0-100 => Percent of decrease in animation speed when cursor is removed out of the tagcloud;
                HoverTagStop : 95,       // Integer 0-100 => Percent of decrease in animation speed when tag is hovered;
                OverWrite : false        // Boolean       => Override any existing HTML in the tagcloud element;
        };

        /* Variables */
        var _TagCloud = _win.TagCloud,
                _Tag = _win.Tag,
                _Vector = _win.Vector,
                _Surface = _win.Surface,
                _TagID = 1,
                _obj = Object.prototype.toString,
                _objObj = "[object Object]",
                isObject = function(arg) { return _obj.call(arg) === _objObj; },
                isElement = function(arg) { return !!arg.nodeType; },
                Radian = Math.PI / 180,
                sine = [], cosine = [],
                Sine = (function(){
                        var i = 0, total = 3600;
                        while(i < total){
                                sine[i] = Math.sin(i / 10 * Radian);
                                i++;
                        }
                        return function Sine(angle){
                                while(angle < 0){
                                        angle += 360;
                                }
                                return sine[Math.round(angle * 10) % total];
                        };
                })(),
                Cosine = (function(){
                        var i = 0, total = 3600;
                        while(i < total){
                                cosine[i] = Math.cos(i / 10 * Radian);
                                i++;
                        }
                        return function Cosine(angle){
                                return cosine[Math.round(Math.abs(angle) * 10) % total];
                        };
                })(),
                Event = {
                        Add : (function(){
                                if(_doc.addEventListener){
                                        return function(obj, type, fn){
                                                fn = Event.Fix.call(this, type === "mouseenter" || type === "mouseleave" ? Event.mouseEnter(fn) : fn);
                                                type = type === "mouseenter" && "mouseover" || type === "mouseleave" && "mouseout" || type;
                                                obj.addEventListener(type, fn, false);
                                                return function Add(){
                                                        obj.removeEventListener(type, fn, false);
                                                        return true;
                                                };
                                        };
                                } else if(_doc.attachEvent){
                                        return function(obj, type, fn){
                                                fn = Event.Fix.call(this, fn);
                                                obj.attachEvent("on" + type, fn);
                                                return function Add(){
                                                        obj.detachEvent("on" + type, fn);
                                                        return true;
                                                };
                                        };
                                }
                                return function Add(){
                                };
                        })(),
                        Fix : function(fn){
                                return function(event){
                                        if(!event.target){
                                                event.target = event.srcElement || _doc;
                                        }
                                        if(event.target.nodeType === 3){
                                                event.target = event.target.parentNode;
                                        }
                                        if(!event.relatedTarget && event.fromElement){
                                                event.relatedTarget = event.fromElement === event.target ? event.toElement : event.fromElement;
                                        }
                                        if(event.pageX === null && event.clientX !== null){
                                                var docE = _doc.documentElement, body = _doc.body;
                                                event.pageX = event.clientX + (docE && docE.scrollLeft || body && body.scrollLeft || 0) - (docE && docE.clientLeft || body && body.clientLeft || 0);
                                                event.pageY = event.clientY + (docE && docE.scrollTop || body && body.scrollTop || 0) - (docE && docE.clientTop || body && body.clientTop || 0);
                                        }
                                        fn.call(this, event);
                                };
                        },
                        mouseEnter : function(fn){
                                var isAChildOf = function(parent, child){
                                        if(parent === child){
                                                return false;
                                        }
                                        while(child && child !== parent){
                                                child = child.parentNode;
                                        }
                                        return child === parent;
                                };
                                return function mouseEnter(event){
                                        var relTarget = event.relatedTarget;
                                        if(this === relTarget || isAChildOf(this, relTarget)){
                                                return;
                                        }
                                        fn.call(this, event);
                                };
                        }
                };

        /** Vector Class **/
        var Vector = function(x, y, z){
                this.set = function(x, y, z){
                        this.x = x || 0;
                        this.y = y || 0;
                        this.z = z || 0;
                };

                if(x !== undefined && isObject(x)){
                        this.set(x.x, x.y, x.z);
                } else{
                        this.set(x, y, z);
                }

                this.Multiply = function(factor){
                        this.x *= factor;
                        this.y *= factor;
                        this.z *= factor;
                        return this;
                };

                this.Done = function(){
                        return Math.abs(this.x) > 0.01 || Math.abs(this.y) > 0.01 || Math.abs(this.z) > 0.01;
                };
        };

        /** Surface Class **/
        var Surface = function(width, height){
                this.set = function(width, height){
                        this.width = width || 0;
                        this.height = height || 0;
                };

                if(width !== undefined && isObject(width)){
                        this.set(width.width, width.height);
                } else{
                        this.set(width, height);
                }
        };

        /** Mouse Attractor Class **/
        var Attractor = function(parent, id, className){
                this.id = id;
                this.className = className;

                this.active = false;
                this.activeTag = false;

                this.mouse = new Vector();
                this.position = new Vector();
                this.size = new Surface({
                                width : parent.size.width || Defaults.Width / 2,
                                height : parent.size.height || Defaults.Heigth / 2
                        });

                this.element = _doc.createElement("div");
                this.element.setAttribute("id", this.id);
                this.element.setAttribute("class", this.className);
                this.element.style.width = this.size.width + "px";
                this.element.style.height = this.size.height + "px";
                this.element.style.display = "block";

                this.Activate = function(){
                        var self = this;
                        Event.Add(this.element, "mousemove", function(event){
                                return function(event){
                                        if(!parent.active){
                                                parent.Animate();
                                        }
                                        if(this.active && !this.activeTag){
                                                this.Update();
                                                this.mouse.set(
                                                        ((-event.pageY + this.position.y) * 2 / this.size.height + 1) * 1.8,
                                                        ((event.pageX - this.position.x) * 2 / this.size.width - 1) * 1.8
                                                );
                                        }
                                }.call(self, event);
                        });
                        Event.Add(this.element, "mouseenter", function(){
                                self.active = true;
                        });
                        Event.Add(this.element, "mouseleave", function(){
                                self.active = false;
                        });
                        return this;
                };

                this.Update = function(){ // Attractor's position can be moved, so position needs to be updated;
                        this.position = new Vector({
                                        x : this.element.offsetLeft,
                                        y : this.element.offsetTop
                                });
                        return this;
                };
        };

        /** Tag Class **/
        var Tag = function(title, rank, url, openInNewWindow, styles){
                this.id = _TagID++;
                this.title = title;
                this.rank = ((!isNaN(rank) && rank >= 0 && rank <= 100) ? rank : Defaults.Rank) / 100;
                this.url = url || (isNaN(rank) ? rank : false) || Defaults.Url;
                this.position = new Vector();

                openInNewWindow = arguments[4] && openInNewWindow || (openInNewWindow===true ? true : false) || (arguments[2]===true ? true : false) || Defaults.OpenInNewWindow;
                styles = styles || isObject(arguments[3]) && arguments[3] || isObject(arguments[2]) && arguments[2] || isObject(arguments[1]) && arguments[1] || {};

                var aa = _doc.createElement("a");
                aa.setAttribute("id", "jsCumulus" + this.id);
                aa.setAttribute("href", this.url);
                if(openInNewWindow){
                        aa.setAttribute("target", "_blank");
                }
                aa.innerHTML = this.title;
                for(var style in styles){
                        aa.style[style] = styles[style];
                }

                var li = _doc.createElement("li");
                li.setAttribute("class", "tagClass");
                li.style.position = "absolute";
                li.appendChild(aa);
                this.element = li;

                this.Activate = function(attractor){
                        Event.Add(this.element, "mouseenter", function(){
                                attractor.active = false;
                                attractor.activeTag = true;
                        });
                        Event.Add(this.element, "mouseleave", function(){
                                attractor.active = true;
                                attractor.activeTag = false;
                        });
                        return this;
                };

                this.Update = function(delta, offset, fontMin, fontMax){
                        delta = delta || new Vector();
                        offset = offset || new Vector();

                        var pos = this.position,
                                deltA = delta.x || 0, deltB = delta.y || 0,
                                sinA = Sine(deltA), cosA = Cosine(deltA),
                                sinB = Sine(deltB), cosB = Cosine(deltB),
                                xz = pos.y * sinA + pos.z * cosA,
                                x = pos.x * cosB + xz * sinB,
                                y = pos.y * cosA + pos.z * (-sinA),
                                z = pos.x * (-sinB) + xz * cosB,
                                per = Defaults.Depth / (Defaults.Depth + z),
                                fontRange = fontMax - fontMin;

                        pos.set(x, y, z);

                        aa.style.opacity = Math.max(per - 0.7, 0) / 0.5 + 0.2;
                        aa.style.fontSize = this.rank * per * fontRange + fontMin + "px";
                        li.style.left = (offset.x + x * per) - (li.clientWidth / 2) + "px";
                        li.style.top = (offset.y + y * per) - (li.clientHeight / 2) + "px";

                        pos = deltA = deltB = sinA = cosA = sinB = cosB = xz = x = y = z = per = fontRange = null;

                        return this;
                };
        };

        /** TagCloud Class **/
        var TagCloud = function(/* element, */tags, width, height, options){
                if(isElement(arguments[0])){
                        this.element = arguments[0];
                        tags = arguments[1];
                        width = arguments[2];
                        height = arguments[3];
                        options = arguments[4];
                }

                options = options || isObject(height) && height || isObject(width) && width || { };

                this.fps = {
                        timer : null,
                        elm : null,
                        i : 0
                };

                this.active = false;
                this.delta = new Vector(-2, -2);
                this.size = new Surface({
                                width : parseFloat(!!parseFloat(width) && width || !!parseFloat(options.width) && options.width || Defaults.Width),
                                height : parseFloat(!!parseFloat(height) && height || !!parseFloat(options.height) && options.height || width || Defaults.Height)
                        });
                this.font = {
                        min : parseFloat(options.fontMin) || Defaults.FontMin,
                        max : parseFloat(options.fontMax) || Defaults.FontMax
                };
                this.radius = options.radius || Math.min(this.size.width, this.size.height) / 4;
                this.consistent = options.consistent !== undefined ? !!options.consistent : Defaults.Consistent;
                this.overwrite = options.overwrite !== undefined ? !!options.overwrite : Defaults.OverWrite;
                this.items = tags && tags.length && tags.slice(0) || (function(){ // slice(0) to clone the tags;
                        var i = 50, ii = 0, plusTags = [];
                        for(; i >= ii; --i){
                                plusTags[i] = new plusTags("+", 100);
                        }
                        return plusTags;
                })();

                this.attractor = new Attractor(
                        this,
                        options.id || Defaults.ID + Math.floor(Math.random() * 10000 + 1),
                        options.className || Defaults.Class
                );

                options = null;

                this.Distribute = function(element){
                        element = element || this.element || _doc.body;
                        var container = _doc.createElement("ul"),
                                i = this.items.length - 1, l = 0, item;
                        if(this.overwrite){
                                while(element.firstChild){
                                        element.removeChild(element.firstChild);
                                }
                        }
                        for(; i >= l; --i){
                                item = this.items[i];
                                if(item instanceof Tag && item.title){ // only Tag class allowed with at least titles;
                                        container.appendChild(item.element);
                                        item.Activate(this.attractor); // only activate after appended to DOM;
                                } else{
                                        this.items.splice(i, 1);
                                }
                        }
                        this.attractor.element.appendChild(container);
                        element.appendChild(this.attractor.element);
                        this.attractor.Activate(); // only activate after appended to DOM;

                        container = i = l = null;

                        var p, t,
                                ii = 0, ll = this.items.length,
                                radius = this.radius;
                        for(; ii < ll; ii++){
                                p = this.consistent ? Math.acos(-1 + (2 * ii) / ll) : Math.random() * (Math.PI);
                                t = this.consistent ? Math.sqrt(ll * Math.PI) * p : Math.random() * (2 * Math.PI);
                                this.items[ii].position.set(
                                        radius * Math.sin(p) * Math.cos(t),
                                        radius * Math.sin(p) * Math.sin(t),
                                        radius * Math.cos(p)
                                );
                        }

                        p = t = ii = ll = radius = null;

                        this.fps.elm = _doc.getElementById(this.attractor.id + "_fps");

                        this.Update();

                        return this;
                };

                this.Update = function(delta){
                        this.fps.timer = new Date() * 1;

                        delta = delta || new Vector();

                        var attractor = this.attractor.Update(),
                                i = 0, l = this.items.length;

                        this.position = new Vector({
                                        x : this.size.width / 2 + attractor.position.x,
                                        y : this.size.height / 2 + attractor.position.y
                                });

                        for(; i < l; i++){
                                this.items[i].Update(delta, this.position, this.font.min, this.font.max);
                        }

                        delta = attractor = i = l = null;

                        if(this.fps.elm){
                                this.fps.elm.innerHTML = parseInt(++this.fps.i / ((new Date() * 1) - this.fps.timer), 10) + " fps";
                        }

                        return this;
                };

                this.Pause = function(){
                        if(this.animation){
                                this.active = false;
                                _win.clearInterval(this.animation);
                                this.animation = null;
                                this.fps.timer = null;
                                this.fps.i = 0;
                                if(this.fps.elm){
                                        this.fps.elm.innerHTML = "# fps";
                                }
                        }
                        return this;
                };

                this.Stop = function(){
                        this.delta = new Vector(); // reset the delta to 0, 0;
                        this.Pause(); // same effect;
                        return this;
                };

                this.Animate = function(delta){
                        if(delta){
                                this.Stop();
                        } // if delta exist a new animation is created and the old one should be stopped;
                        this.active = true;
                        this.delta = delta || this.delta || new Vector();
                        var self = this;
                        this.animation = _win.setInterval(function(){
                                return function animation(){
                                        if(this.attractor.active){
                                                this.delta = this.attractor.mouse;
                                        } else{
                                                this.delta.Multiply(((100 - Math.min(this.attractor.activeTag ? Defaults.HoverTagStop : Defaults.HoverStop, 99)) / 10 + 90) / 100);
                                        }
                                        if(this.delta.Done()){
                                                this.Update(this.delta);
                                        } else{
                                                this.Stop();
                                        }
                                }.call(self);
                        }, Defaults.AnimationTime);
                        return this;
                };

                if(this.element){
                        this.Distribute(this.element);
                }
        };

        _win.TagCloud = TagCloud;
        _win.Tag = Tag;
        _win.Vector = Vector;
        _win.Surface = Surface;

        _win.JSCumulus = {
                TagCloud : TagCloud,
                Tag : Tag,
                Vector : Vector,
                Surface : Surface,
                noConflict : function(){
                        _win.TagCloud = _TagCloud;
                        _win.Tag = _Tag;
                        _win.Vector = _Vector;
                        _win.Surface = _Surface;

                        return {
                                TagCloud : TagCloud,
                                Tag : Tag,
                                Vector : Vector,
                                Surface : Surface
                        };
                }
        };

})(window, window.document);


                //JSCumulus.noConflict();

                /* DEBUG */ window.console && console.time && console.time("TagCloud1");
                
                /* TagCloud 1 */
                       var pfad = "./" //für online
                                       //für localhost "../"
                var tags = [
                        new Tag("Bildphilosophie", 100),
                        new Tag("Glossar", 80),
                        new Tag("Bild und Sprache",60, pfad + "index.php?title=Bild und Sprache"),
                        new Tag("Bild und Wahrnehmung", 60, pfad + "index.php?title=Bild und Wahrnehmung"),
                        new Tag("Bilder als Medien", 60, pfad + "index.php?title=Bilder als Medien"),
                        new Tag("Bilder als Zeichen", 60, pfad + "index.php?title=Bilder als Zeichen"),
                        new Tag("<center>Bildlichkeit:<br>Bedingungen und Folgen</center>", 60, pfad + "index.php?title=Bildlichkeit: Bedingungen und Folgen"),
                        new Tag("<center>Bildtheorie<br>Bildwissenschaft<br>Bildkritik</center>", 60, pfad + "index.php?title=Bildtheorie/Bildwissenschaft/Bildkritik"),
                        new Tag("Auswirkungen der Bildlichkeit", 20, pfad + "index.php?title=Auswirkungen der Bildlichkeit"),
                        new Tag("Bild und rhetorische Figur", 20, pfad + "index.php?title=Bild und rhetorische Figur"),
                        new Tag("Bildbewusstsein und Einbildungskraft", 20, pfad + "index.php?title=Bildbewusstsein und Einbildungskraft"),
                        new Tag("Bildmedien", 20, pfad + "index.php?title=Bildmedien"),
                        new Tag("Bildpragmatik", 20, pfad + "index.php?title=Bildpragmatik"),
                        new Tag("Bildsemantik", 20, pfad + "index.php?title=Bildsemantik"),
                        new Tag("Bildsyntax", 20, pfad + "index.php?title=Bildsyntax"),
                        new Tag("Bildtermini anderer Sprachen", 20, pfad + "index.php?title=Bildtermini anderer Sprachen"),
                        new Tag("Bildtheoretische Ansätze", 20, pfad + "index.php?title=Bildtheoretische Ansätze"),
                        new Tag("Bildverwendungstypen", 20, pfad + "index.php?title=Bildverwendungstypen"),
                        new Tag("Bildwahrnehmung", 20, pfad + "index.php?title=Bildwahrnehmung"),
                        new Tag("Bildwissenschaftliche Abgrenzungen", 20, pfad + "index.php?title=Bildwissenschaftliche Abgrenzungen"),
                        new Tag("Grundbegriffe der Bildlichkeit", 20, pfad + "index.php?title=Grundbegriffe der Bildlichkeit"),
                        new Tag("Historische Bildbegriffe", 20, pfad + "index.php?title=Historische Bildbegriffe"),
                        new Tag("Medientheorien: Übersicht", 20, pfad + "index.php?title=Medientheorien: Übersicht"),
                        new Tag("Schriftbildlichkeit", 20, pfad + "index.php?title=Schriftbildlichkeit"),
                        new Tag("Sprach-Bild-Bezüge", 20, pfad + "index.php?title=Sprach-Bild-Bezüge"),
                        new Tag("Sprechen über Bilder", 20, pfad + "index.php?title=Sprechen über Bilder"),
                        new Tag("Wahrnehmungstheorien: Übersicht", 20, pfad + "index.php?title=Wahrnehmungstheorien: Übersicht"),
                        new Tag("Zeichentheorien: Übersicht", 20, pfad + "index.php?title=Zeichentheorien: Übersicht")
                ];
        

                var tags2 =      [
                        new Tag("Bildphilosophie", 100),
                        new Tag("Glossar", 80),
                        new Tag("Bild und Sprache",60, pfad + "index.php?title=Bild und Sprache", {color: "white"}),
                        new Tag("Bild und Wahrnehmung", 60, pfad + "index.php?title=Bild und Wahrnehmung", {color: "white"}),
                        new Tag("Bilder als Medien", 60, pfad + "index.php?title=Bilder als Medien", {color: "white"}),
                        new Tag("Bilder als Zeichen", 60, pfad + "index.php?title=Bilder als Zeichen", {color: "white"}),
                        new Tag("<center>Bildlichkeit:<br>Bedingungen und Folgen</center>", 60, pfad + "index.php?title=Bildlichkeit: Bedingungen und Folgen", {color: "white"}),
                        new Tag("<center>Bildtheorie<br>Bildwissenschaft<br>Bildkritik</center>", 60, pfad + "index.php?title=Bildtheorie/Bildwissenschaft/Bildkritik", {color: "white"}),
                        new Tag("Auswirkungen der Bildlichkeit", 20, pfad + "index.php?title=Auswirkungen der Bildlichkeit", {color: "white"}),
                        new Tag("Bild und rhetorische Figur", 20, pfad + "index.php?title=Bild und rhetorische Figur", {color: "white"}),
                        new Tag("Bildbewusstsein und Einbildungskraft", 20, pfad + "index.php?title=Bildbewusstsein und Einbildungskraft", {color: "white"}),
                        new Tag("Bildmedien", 20, pfad + "index.php?title=Bildmedien", {color: "white"}),
                        new Tag("Bildpragmatik", 20, pfad + "index.php?title=Bildpragmatik", {color: "white"}),
                        new Tag("Bildsemantik", 20, pfad + "index.php?title=Bildsemantik", {color: "white"}),
                        new Tag("Bildsyntax", 20, pfad + "index.php?title=Bildsyntax", {color: "white"}),
                        new Tag("Bildtermini anderer Sprachen", 20, pfad + "index.php?title=Bildtermini anderer Sprachen", {color: "white"}),
                        new Tag("Bildtheoretische Ansätze", 20, pfad + "index.php?title=Bildtheoretische Ansätze", {color: "white"}),
                        new Tag("Bildverwendungstypen", 20, pfad + "index.php?title=Bildverwendungstypen", {color: "white"}),
                        new Tag("Bildwahrnehmung", 20, pfad + "index.php?title=Bildwahrnehmung", {color: "white"}),
                        new Tag("Bildwissenschaftliche Abgrenzungen", 20, pfad + "index.php?title=Bildwissenschaftliche Abgrenzungen"),
                        new Tag("Grundbegriffe der Bildlichkeit", 20, pfad + "index.php?title=Grundbegriffe der Bildlichkeit", {color: "white"}),
                        new Tag("Historische Bildbegriffe", 20, pfad + "index.php?title=Historische Bildbegriffe", {color: "white"}),
                        new Tag("Medientheorien: Übersicht", 20, pfad + "index.php?title=Medientheorien: Übersicht", {color: "white"}),
                        new Tag("Schriftbildlichkeit", 20, pfad + "index.php?title=Schriftbildlichkeit", {color: "white"}),
                        new Tag("Sprach-Bild-Bezüge", 20, pfad + "index.php?title=Sprach-Bild-Bezüge", {color: "white"}),
                        new Tag("Sprechen über Bilder", 20, pfad + "index.php?title=Sprechen über Bilder", {color: "white"}),
                        new Tag("Wahrnehmungstheorien: Übersicht", 20, pfad + "index.php?title=Wahrnehmungstheorien: Übersicht", {color: "white"}),
                        new Tag("Zeichentheorien: Übersicht", 20, pfad + "index.php?title=Zeichentheorien: Übersicht", {color: "white"})
                ];
        

//////////////////////////////

(function () {
  var myElement = document.getElementById('GlossarCumulusDiv');
  if (myElement != null)
      {var GlossarCumulusNode = new TagCloud(tags, 800, 400);
       GlossarCumulusNode.Distribute(myElement).Animate();
       };

  var myElementKlein = document.getElementById('GlossarCloudKlein');
  if (myElementKlein != null)
      {var GlossarCumulusNode = new TagCloud(tags2, 
                                                parseFloat((myElementKlein.clientWidth) - 20.0),
                                                parseFloat(myElementKlein.clientWidth),
                                                {fontMin: 5, fontMax: 10, 
                                                 id: "TagCloud2X", overwrite: true });
       GlossarCumulusNode.Distribute(myElementKlein).Animate(new Vector(2, -10, 0));

        /* buttons */
                document.getElementById("btn_tagcloud_reset").onclick = function() {
                        GlossarCumulusNode.Distribute(myElementKlein);
                };
                document.getElementById("btn_tagcloud_update").onclick = function() {
                        GlossarCumulusNode.Animate(new Vector(-20, 100, 0));
                };
                var x = 0;
                document.getElementById("btn_tagcloud_pause").onclick = function() {
            var running = x++ % 2;
                        GlossarCumulusNode[running ? "Animate" : "Pause"]();
                        this.value = running ? "Pause" : "Resume";
                };
                document.getElementById("btn_tagcloud_stop").onclick = function() {
                        GlossarCumulusNode.Stop();
                };

       };
}());