jQuery.noConflict();
var j$ = jQuery;

j$(document).ready(
    function() {

        var configs = {
            selecter : '#cube-',
            num      : 3,
            duration : 2400,
            easing   : 'easeInCubic',
            interval : 3000,
            wait     : 0
        };

        var current = 0;
        var mytimer = null;
        var targets = [];
        var status  = false;

        for (var i = 1; i <= configs.num; i++)
            targets.push(j$(configs.selecter + i));

        _animationStart();

        function _animationStart(interval) {
            interval = interval == undefined ? configs.interval: interval;
            mytimer = j$.timer(
                interval,
                function() {
                    _displayChange();
                }
            );
        }

        function _displayChange() {
            var opacities = [0.0, 1.0];

            if (!status) {
                opacities = opacities.reverse();
                j$(targets[current]).css('opacity'   , '0.0')
                                    .css('visibility', 'visible');
            }

            mytimer.stop();

            j$(targets[current]).animate(
                {
                    opacity : opacities[0]
                },
                {
                    duration : configs.duration,
                    easing   : configs.easing,
                    complete : function() {
                        status = status ? false: true;

                        var interval = configs.interval;

                        if (!status) {
                            j$(targets[current]).css('visibility', 'hidden');

                            current++;
                            current  = current >= targets.length ? 0: current;

                            interval = configs.wait;
                        }

                        _animationStart(interval);
                    }
                }
            );
        }
    }
);