// Singleton class
function AnimController() {
    this.animationQueue = []
}

AnimController.getInstance = function () {
    if (typeof this._instance == "undefined") {
        this._instance = new AnimController();
    }
    return this._instance;
}

AnimController.prototype._play = function() {
    if (this.animationQueue.length > 1) {
        this.cleanQueue()
    }
    this._doAnimation()
}

AnimController.prototype.cleanQueue = function() {
    var lastObj = this.animationQueue[this.animationQueue.length-1]
    this.animationQueue = [lastObj] // delete all except last one
}

AnimController.prototype.addAnimation = function(anim) {
    this.animationQueue.push(anim)
    this._play()
}

AnimController.prototype._doAnimation = function() {
    if(this.animationQueue.length == 1) {
        var anim = this.animationQueue[0]
        this.animListener = dojo.connect(anim, "onEnd", this, "animationHasStopped" )
        if(typeof this.currentAnimation != "undefined" ) {
            this.currentAnimation.stop()
        }
        this.currentAnimation = anim
        this.currentAnimation.play()
    } else {
        this._play()
    }
}

AnimController.prototype.animationHasStopped = function() {
    dojo.disconnect(this.animListener)
    delete this.currentAnimation
    delete this.animListener
    // There's now still the anim in the queue.. but it will get erased whenever an Animation gets added
}

function showElement(elementId){
    dojo.byId(elementId).style.display = "block";
}

function showContainer(id){
    var nodeToShow = id;

    //Hide the given node
    var hideNode = dojo.animateProperty({
        node       : activeNode,
        duration   : 200,
        properties : {
            opacity  : 0
        },
        onEnd: function(){
            dojo.style(activeNode, "display", "none");
        },
        onStop: function(){
            dojo.style(activeNode, "display", "none");
        }
    });

    //Show the given node
    var showNode = dojo.animateProperty({
        node       : nodeToShow,
        duration   : 200,
        properties : {
            opacity  : 100
        },
        onBegin: function(){
            dojo.style(nodeToShow, "display", "block");
            dojo.style(nodeToShow, "opacity", 0);
        },
        onEnd: function(){
            activeNode = id;
        },
        onStop: function(){
            dojo.style(activeNode, "display", "none");
            dojo.style(nodeToShow, "display", "none");
        }
    });

    if (activeNode == nodeToShow){
        return;
    }
    else {
        // Animation Controller initialisieren
        var ac = AnimController.getInstance();
        var currentAnimation = dojo.fx.chain([hideNode, showNode]);
        ac.addAnimation(currentAnimation);
    }
}

function swapMenuItem(id) {
    if (lastID != 0) {
        resetMenuItem(activeMenuItem);
    }
    if (id != 1) {
        document.images["pipe"+id].src = "hoverGradientLeft.png";
    }
    document.images["pipe"+(id+1)].src = "hoverGradientRight.png";
    activeMenuItem = "menuItem" + id;
    lastID = id;
    dojo.style(activeMenuItem, "backgroundColor", "#fff");
}

function resetMenuItem(activeItem){
    if (lastID != 1) {
        document.images["pipe"+lastID].src = "pipe.png";
    }
    if (lastID == 5) {
        document.images["pipe"+(lastID+1)].src = "spacer.gif";
    }
    else {
        document.images["pipe"+(lastID+1)].src = "pipe.png";
    }
    dojo.style(activeMenuItem, "backgroundColor", "transparent");
}

function activateMenuItem(menuItem){
    if (menuItem == "Personal") {
        swapMenuItem(1);
    }
    else if (menuItem == "Finance") {
        swapMenuItem(2);
    }
    else if (menuItem == "Steuern") {
        swapMenuItem(3);
    }
    else{
        if (menuItem == "") {
            return;
        }
        else {
            swapMenuItem(4);
        }
    }
}