MediaWiki:Skin/Kamel:WiMu/Musik.js

var anz_bilder  = 20;
var anim_bilder = new Array();
var bild_info = [
    { "src": "../images/0/08/Herzschlag.gif",      "width": 120, "height": 80 },
    /* ich wüsste gerade nicht, wie ich das sonst gewichten sollte */
    { "src": "../images/0/08/Herzschlag.gif",      "width": 120, "height": 80 },
    { "src": "../images/0/08/Herzschlag.gif",      "width": 120, "height": 80 },
    { "src": "../images/0/08/Herzschlag.gif",      "width": 120, "height": 80 },
    { "src": "../images/0/08/Herzschlag.gif",      "width": 120, "height": 80 },
    { "src": "../images/0/08/Herzschlag.gif",      "width": 120, "height": 80 },
    { "src": "../images/0/08/Herzschlag.gif",      "width": 120, "height": 80 },      
    { "src": "../images/3/39/Blume.gif",           "width": 48,  "height": 48 },
    { "src": "../images/3/39/Blume.gif",           "width": 48,  "height": 48 },    
    { "src": "../images/e/e3/Animalibr%C3%AD.gif", "width": 100, "height": 96 },
    { "src": "../images/6/6c/BunchieViola.gif",    "width": 53,  "height": 66 },      
]

for ( var i = 0; i < anz_bilder; i++ ){
    var size              = Math.random() * 2;
    var src               = Math.floor(Math.random() * bild_info.length);
    anim_bilder[i]        = new Image;
    anim_bilder[i].src    = bild_info[src].src;
    anim_bilder[i].width  = bild_info[src].width * size;
    anim_bilder[i].height = bild_info[src].height * size;    
}

$(function() {
    for ( var i = 0; i < anz_bilder; i++ ){
        $('div.wimu').append(anim_bilder[i]);
        $('div.wimu img').last().addClass('anim');
        var bottom = Math.round( ( ( $('div.wimu').outerHeight() + anim_bilder[i].height ) * Math.random() ) - anim_bilder[i].height );
        var left   = Math.round( ( ( $('div.wimu').outerWidth() + anim_bilder[i].width ) * Math.random() ) - anim_bilder[i].width );
        $('div.wimu img').last().css('bottom', bottom + 'px');
        $('div.wimu img').last().css('left', left + 'px');
        $('div.wimu img').last().animate(
            { bottom: '+' + $('div.wimu').outerHeight() }, {
            duration: Math.round(7000 * Math.random() + 7000) - bottom * 15,
            easing: 'linear',
            complete: function(){ resetimage($(this)); },
            queue: false }
        );
        swing($('div.wimu img').last(), 
            $('div.wimu img').last().width() / 8 + ($('div.wimu img').last().width() / 8 * Math.random()),
            400 * Math.random() + 250);
    }
});

function resetimage(anim_bild) {
    // WiMu, du Honk! Da darfst du nicht das Container-Div (bzw. dessen Größe) nehmen,
    // sondern den browser-viewport! Das ist sonst ressourcen-Verschwendung, wenn de was animierst,
    // was u.U. gar nicht zu sehen ist (weil außerhalb des sichtbaren Bereichs).
    // Mussu mal machen ... demnächst ... irgendwann ... wenn du das mit der [[Prokrastination]]
    // in den Griff gekriegt hast ...
    var left   = ( ( $('div.wimu').outerWidth() + anim_bilder[i].width ) * Math.random() ) - anim_bilder[i].width;
    anim_bild.css('left', left + 'px');   
    anim_bild.css('bottom', '-' + anim_bild.height() + 'px');
    anim_bild.animate(
        { bottom: '+' + $('div.wimu').outerHeight() }, {
        duration: Math.round(7000 * Math.random() + 7000),
        easing: 'linear',
        complete: function(){ resetimage($(this)); },
        queue: false }
    );
}

function swing(anim_bild, amount,  duration) {
    anim_bild.animate(
        { marginLeft: amount }, {
        duration: duration,
        queue: false,
            complete: function(){ 
                $(this).animate(
                    { marginLeft: 0 }, {
                    duration: duration,
                    queue: false,
                    complete: function(){ swing($(this), amount, duration) }
                    }
                )
            }
        }
    );
}