Random logo rotator

RandomLogo.class.js

/*
---
script: RandomLogo.class.js

description: Cycles through a collection of available logos in a given container. Obviously there should be more
            available logos than there are logos displayed at only one time

requires:
- Core
- More/Fx.Tween
- More/Class.Binds

author: Eric Harth

future work: update so it changes the alt tags at the same time. The input would need to be changed from an array to an object.

usage: Expects a container ID that wraps the displayed logos and an array of paths to available logos

<div id="logo-container">
    <div class="logo"><img src="/path/source1.jpg"></div>
    <div class="logo"><img src="/path/source2.jpg"></div>
    <div class="logo"><img src="/path/source3.jpg"></div>
    <div class="logo"><img src="/path/source4.jpg"></div>
</div>

<script>
    var availableLogos = ["/path/source1.jpg","/path/source2.jpg","/path/source3.jpg","/path/source4.jpg","/path/source5.jpg","/path/source6.jpg","/path/source7.jpg"];
    var options = {
        interval: 3000,
        logoClass: '.logo'
    }
    var logoRotator = new RandomLogo('logo-container', availableLogos, options);
</script>
 */

var RandomLogo = new Class({

    Implements: [Options, Events],
    Binds: ['change'],
    options: {
        interval: 2500,
        logoClass: '.logo',
        autoStart: true
    },
    initialize: function(container, availableLogos, options) {
        this.setOptions(options);
        this.container = $(container);
        this.availableLogos = availableLogos;                                    
        this.currentLogos = this.container.getElements(this.options.logoClass);
        if (this.options.autoStart) {
            this.intervalId = this.change.periodical(this.options.interval);       
        }
    },

    change: function() {
        newLogoSrc = this.selectRandomLogo();

        targetLogo = Math.floor((Math.random()*this.currentLogos.length));
        targetLogoElement = this.currentLogos[targetLogo];

        //closure
        var f = function(targetLogoElement, newLogoSrc){
            Asset.image(newLogoSrc, {
                onLoad: function() {                                               
                    var imgFx = new Fx.Tween(targetLogoElement, {
                        duration: 750,
                        onComplete: function() {                                                            
                            targetLogoElement.src = newLogoSrc;                                                         
                        },
                        link: 'chain',
                        property: 'opacity'
                    });

                    imgFx.start(1,0);
                    imgFx.start(0,1);
                }.bind(this)
            });
        } 
        f(targetLogoElement, newLogoSrc);
    },

    selectRandomLogo: function() {
        
        do {
            //select a new logo from the available set
            random_number = Math.floor((Math.random()*this.availableLogos.length));
            randomLogoSrc = this.availableLogos[random_number];
            
            //check this logo isn't currently on display
            logoInUse = this.checkLogoNotActive(randomLogoSrc);
        } while (logoInUse);
       
        return randomLogoSrc;
    },

    checkLogoNotActive: function(newSrc) {
        var domain = window.location.protocol + '//' + window.location.hostname;
        for (i = 0; i < this.currentLogos.length; i++) {                                        
            if (newSrc === this.currentLogos[i].src.replace(domain, '')) {
                return true;
            }
        }
        return false;
    },

    stop: function() {
        clearInterval(this.intervalId);
    },

    go: function() {
        this.intervalId = this.change.periodical(this.options.interval);
    }

});