var AQHeader = new Class({
    Binds: ['moveItem'],
    Implements: [Options,Events],
    options: {
        transition: 'linear',
        duration: 1000,
        stepSize: 20,
        wait: false,
        initialDelay: 0,
        directionVariation: 0.3
    },
    initialize: function (items,container,options) {
        this.items = $$(items);
        this.container = document.getElement(container);
        this.setOptions(options);
        this.initAnimation();

    },
    initAnimation: function () {

        //    this.log('moving items: ' + this.items.length);

        var containerSize = this.container.getSize();

        this.items.each(function (item) {
            var mover,maxX,maxY;
            var direction;

            maxX = containerSize.x - item.getSize().x;
            maxY = containerSize.y - item.getSize().y;

            direction = {
                x: ($random(-10,10) / 10),
                y: ($random(-10,10) / 10)
            }

            item.setPosition(item.getPosition(this.container));

            mover = new Fx.Move(item, {
                relativeTo: this.container,
                position: 'upperLeft',
                edge: 'upperLeft',
                transition: this.options.transition,
                duration: this.options.duration
            });
            // Store values with element
            item.store('mover', mover);
            item.store('maxX',maxX);
            item.store('maxY',maxY);
            item.store('direction',direction);
            // Start moving item
            this.moveItem.delay(this.options.initialDelay,this,item);
        },this);
    },
    moveItem: function (item) {
        var mover = item.retrieve('mover');
        var current = item.getPosition(this.container);
        var direction = item.retrieve('direction');

        // Change direction a bit
        direction.x = ($random(-1,1) * this.options.directionVariation / 1) + direction.x;
        direction.x = direction.x.limit(-1,1);

        direction.y = ($random(-1,1) * this.options.directionVariation / 1) + direction.y;
        direction.y = direction.y.limit(-1,1);

        var newX,newY;

        var stepSize = this.options.stepSize;

        newX = current.x + (stepSize * direction.x);
        // Check for container borders
        if (newX > item.retrieve('maxX')) {
            newX = item.retrieve('maxX').toInt();
            direction.x = -direction.x;
        }

        if (newX < 0) {
            newX = 0;
            direction.x = -direction.x;
        }

        newY = current.y - (stepSize * direction.y);
        if (newY > item.retrieve('maxY')) {
            newY = item.retrieve('maxY').toInt();
            direction.y = -direction.y;
        }
        if (newY < 0) {
            newY = 0;
            direction.y = -direction.y;
        }
        // Move element to new position and chain moveItem for loop
        mover.start({
            offset: {
                x: newX.round(),
                y: newY.round()
            }
        })
        if (this.options.wait) {
            mover.wait($random(0,this.options.duration));
        }
        mover.chain(function() {
            this.moveItem(item)
        }.bind(this));

        item.store('direction',direction);
    }
});

window.addEvent('domready',function(){
    //    alert(Browser.Engine.version);
    // Skip fade if IE7 or less
    if (Browser.Engine.trident && Browser.Engine.version <= 5) {
        return;
    }
    //    new AQHeader('#header .shapes .green','#header .shapes');
    var trans = ['elastic:out','bounce:out','back:out'];
    var shapes = $$('#header .shapes img');
    if (shapes) {
        shapes.each(function(item){
            // Show pointer cursor on mouse over
            item.setStyle('cursor','move');

            // Determine transition properties
            item.set('morph',{
                duration: ['normal','long'].getRandom(),
                transition: trans.getRandom()
            });

            // Slightly move the item on mouseenter
            item.addEvent('mouseover',function(){
                var buzz = new Fx.Tween(item,{
                    link: 'chain',
                    property: 'margin-top',
                    duration: 'long',
                    transition: 'elastic:out'
                });
                //    buzz.start(-5);
                buzz.set(-4);
                buzz.start(0);
            });

            // Make item draggable
            var pos = item.getPosition($('header'));
            item.makeDraggable({
                onDrop: function() {
                    //alert('dropped');
                    //    item.set('morph',{transition: trans.getRandom()});
                    // Let item snap back to original position
                    item.morph({
                        left: pos.x,
                        top: pos.y
                    });
                },
                onSnap: function(el){
                    el.addClass('dragging');
                },
                onComplete: function(el){
                    el.removeClass('dragging');
                }

            });
            if (!item.hasClass('green')) {
            //    return;
            }



            // Periodically fade item in and out
            var fade = new Fx.Tween(item,{
                link: 'chain',
                property: 'opacity',
                duration: 2000
            });
            fade.addEvent('chainComplete',function(){
                //    alert('chain completed');
                fadeChain.delay($random(5000,20000),null);
            });
            
            var fadeChain = function() {
                fade.start(0);
                fade.start(1);
            };

            fadeChain.delay($random(5000,20000),null);


        });


    }

});