document.observe("dom:loaded", init);

function init(){
    [$('mainmenu_wrapper'), $('content')].invoke('hide'); //Hauptmenu wird erst später eingeblendet
    meters = [new Musicbox('meter', {
        background: 'transparent',
        color: '#fff220'
    }), new Musicbox('meter2', {
        background: 'transparent',
        color: '#ffaa3d'
    }), new Musicbox('meter3', {
        background: 'transparent',
        color: '#ff5e3c'
    }), new Musicbox('meter4', {
        background: 'transparent',
        color: '#ff2020'
    }), new Musicbox('meter5', {
        background: 'transparent',
        color: '#ff5e3c'
    }), new Musicbox('meter6', {
        background: 'transparent',
        color: '#ffaa3d'
    }), new Musicbox('meter7', {
        background: 'transparent',
        color: '#fff220'
    })];
    window.setTimeout(nachUnten, 3000); //3000
    //Menüpunkte mit Funktionen ausstatten, die die Regler hoch schieben und anschließend ein entsprechend großes Inhaltsfenster öffnen
    $$('#laufband .regler').invoke('observe', 'click', driveup.bindAsEventListener(this,'d')); //Funktionen für Regler
    $$('#mainmenu li').invoke('observe', 'click', driveup); //Funktionen für Menüpunkte
    $$('#mainmenu li a').invoke('setAttribute', 'onclick', 'return false'); //onclick auf return false setzen
	$$('#content > div').each(function(el){makeRound(el); $(el).hide(); });
	
	setInterval(function(){
		var r= document.viewport.getHeight()/2 - 200;
		$('display').setStyle({top:r+'px'});
		$('menu').setStyle({top:r+10+'px'});
		$$('.infobox').invoke('setStyle',{top:r+20+'px'});
		
	},500);
}

/*
function popup(url) {
  ok = window.open(url,...)
  if (ok) return false;
  else return true;
}
*/

function makeRound(el) {
	//Content Bereich mit den Tabellen ausstatten
	var inhalt = $(el).innerHTML;
	$(el).update('');
	$(el).insert({top: '<table border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td class="box_ne"></td><td class="box_n"></td><td class="box_nw"></td></tr><tr><td class="box_e"></td><td class="box_content">'+inhalt+'</td><td class="box_w"></td></tr><tr><td class="box_se"></td><td class="box_s"></td><td class="box_sw"></td></tr></table>'});
}

function driveup(e, z){

	var el = Event.element(e);
	var menupunkt = (parseInt($(el).getStyle('left'))-27)/100;
	if (z != "d") {
		var menupunkt = $(el).up().previousSiblings().length; //Findet heraus welcher Menüpunkt gedrückt wurde
		var el = $$('.regler')[menupunkt]; //Reglerelement finden
	}
    if (parseInt($(el).getStyle('top'))<755) var nurrunter = 1; //Sollte der Regler schon oben sein, dann Aktion abbrechen
    new Effect.Fade('content', {
        to: 0.0,
        from: 1.0,
        queue: {
            position: 'front',
            scope: 'regler'
        },
        duration: 0.5,
        afterFinish: function(){ //Breite der Inhaltsbox anpassen in Abhängigkeit welcher Regler angewählt wurde
        	$$('#content > div').invoke('hide');
        	$$('#content > div')[menupunkt].show(); //Inhalts DIV austauschen
        	if (menupunkt == 3) $$('#content > div')[7].show();
            if (menupunkt > 2) {
                $('content').setStyle('left: 23px; width: ' + (parseInt($(el).getStyle('left')) - 37) + 'px');
            }
            else {
                $('content').setStyle('left: ' + (parseInt($(el).getStyle('left')) + 60) + 'px; width: ' + (607 - parseInt($(el).getStyle('left')) + 'px'));
            }
        }
    });
    //Zu Beginn alle Regler wieder auf ihren Ausgangspunkt fahren
    //Regler suchen    
    Effect.multiple($$('.regler').collect(function(n){
        if (parseInt($(n).getStyle('top')) < 755) 
            return n;
    }).compact(), Effect.Move, {
        y: 755,
        mode: 'absolute',
        queue: {
            scope: 'regler'
        },
        duration: 0.8
    });
    
	if (nurrunter != 1) {
		var anzahl = parseInt($(el).getStyle('left'));
		new Effect.Move(el, {
			y: 565, //755 zum runterfahren
			x: $(el).getStyle('left'),
			mode: 'absolute',
			duration: 0.8,
			queue: {
				scope: 'regler',
				limit: 11
			}
		});
		new Effect.Parallel([new Effect.Appear('content', {
			sync: true,
			to: 1.0,
			from: 0.0,
		})], {
			duration: 0.5,
			queue: {
				position: 'end',
				scope: 'regler',
				limit: 11
			}
		});
	}
}

function nachUnten(){
    new Effect.Move('laufband', {
        y: -500,
        duration: 4, //6
        transition: Effect.Transitions.sebispring,
        afterFinish: function(){
            meters.invoke('remove');
            $('mainmenu_wrapper').slideDown();
            $$('#menu > img')[0].morph('width:349px; margin-left:170px;margin-top:20px;opacity:0.5');
            $('socialcontainer').appear({to:0.7});
        }
    });
}

var Musicbox = function(id, options){
    this.id = id;
    this.count = options.count || 5;
    this.background = options.background || 'black';
    this.color = options.color || 'red';
    this.marginY = options.marginY || -40;
    
    var wrapperDiv = document.createElement('div');
    $(this.id).wrap(wrapperDiv);
    
    var top = parseInt($(this.id).getStyle('top'));
    for (a = 0; a <= this.count; a++) {
        var neuTop = top + (this.marginY * a) + 'px';
        $(this.id).cloneNode(true).writeAttribute({
            'id': false
        }).setStyle('top:' + neuTop + ';background:' + this.background).wrap(wrapperDiv);
    }
    var temp = $(this.id).up();
    $(this.id).remove();
    this.id = temp;
    window.setInterval(this.animation.bind(this), 400);
    this.erleuchtet = 0;
    this.draw();
}

Musicbox.prototype = {
    animation: function(){
        var addition = (Math.random() > 0.5) ? 1 : -1;
        addition = (this.erleuchtet == 0) ? 1 : addition;
        addition = (this.erleuchtet == this.count) ? -1 : addition;
        this.erleuchtet += addition;
        this.draw();
    },
    draw: function(){
        var temp = this.erleuchtet;
        var array = $(this.id).descendants().partition(janein.bind(this));
        function janein(n, a){
            return a > this.erleuchtet;
        }
        array[0].invoke('setStyle', 'background:' + this.background);
        array[1].invoke('setStyle', 'background:' + this.color);
    },
    remove: function(){
        $(this.id).remove();
    }
}