function $E(sel){
    return $$(sel)[0];
}


var PageAnimation = new Class({
    
    initialize: function(){
        this.setupStartAnim();
        this.setupStopAnim();
    },
    
    setupStartAnim: function() {
        this.startAnim = new MultiAnimation();
        anim = this.startAnim;
        // anim.delay(0);
        
        anim.tween($E('#header .banner .image'), 'left', 0, {transition: 'pow:out', duration: 800});

        var cog = this.startAnim.parallel();  
        $$('#nav li').each(function(item, idx){
            var serial = cog.serial();
            serial.delay(100*idx);
            serial.tween(item, 'margin-left', 112, {transition: 'expo:out', duration: 500});
            var a = item.getElement('a');
            if(a.hasClass('current')) {
                serial.morph(a, '.current_nav_menu');
            }
            serial.end(); 
        });
        // cog.end();
        // 
        // cog = this.startAnim.parallel();
        
        
        this.bodyStartAnimation(cog);
        
        cog.tween($('center_rail'), 'opacity', [0.0, 1.0], {duration: 1000});
        cog.tween($E('#left_rail .twitter'), 'opacity', [0.0, 1.0], {duration: 1000});
        cog.tween($E('#left_rail .hairline'), 'opacity', [0.0, 1.0], {'duration': 150});
        
        this.bodyStartAnimationLast(cog);
        
        cog.end();

        // var cog = this.startAnim.parallel();  
        // $$('#nav li').each(function(item, idx){
        //     var serial = cog.serial();
        //     serial.delay(50*idx);
        //     serial.end(); 
        // });
        // cog.end();
        
    },
    
    bodyStartAnimation: function(cog){},
    bodyStartAnimationLast: function(cog){},
    
    setupStopAnim: function() {
        this.stopAnim = new MultiAnimation();
        anim = this.stopAnim;

        var cog = anim.parallel();  
        
        cog.tween($E('#header .banner .image'), 'left', -1500, {transition: 'pow:out', duration: 800});
        $$('#nav li').each(function(item, idx){
            cog.tween(item, 'opacity', [1.0, 0.0], {'duration': 150});
        });
        
        this.bodyStopAnimation(cog);    
        
        cog.tween($('center_rail'), 'opacity', [1.0, 0.0], {duration: 150});
        cog.tween($E('#left_rail .twitter'), 'opacity', [1.0, 0.0], {'duration': 150});
        
        cog.tween($E('#left_rail .hairline'), 'opacity', [1.0, 0.0], {'duration': 150});
        cog.end();
        
    },
    
    bodyStopAnimation: function(cog){
        
    },
    
    startPageLoad: function(){
        this.startAnim.start();
    },
    
    startPageUnload: function(){
        this.stopAnim.start();
    }
});

var IndexAnimation = new Class({
    Extends: PageAnimation,
    
    bodyStartAnimation: function(cog){
        this.parent(cog);
        // var cog = this.startAnim.parallel();
        $$('.call_to_page li a').each(function(item, idx){
            var serial = cog.serial();
            serial.delay(100*idx);
            serial.tween(item, 'opacity', [0.0, 1.0], {duration: 500})
        })
    },
    bodyStopAnimation: function(cog){
        this.parent(cog);
        // var cog = this.startAnim.parallel();
        $$('.call_to_page li a').each(function(item, idx){
            cog.tween(item, 'opacity', [1.0, 0.0], {duration: 150})
        })
    }
});

var HistoryAnimation = new Class({
    Extends: IndexAnimation
});



var ProductAnimation = new Class({
    Extends: IndexAnimation,
    
    bodyStartAnimation: function(cog){
        this.parent(cog);
        // var cog = this.startAnim.parallel();
        $$('.merchandise').each(function(item, idx){
            var serial = cog.serial();
            serial.delay(100*idx);
            serial.tween(item, 'opacity', [0.0, 1.0], {duration: 500})
        })
    },
    bodyStopAnimation: function(cog){
        this.parent(cog);
        // var cog = this.startAnim.parallel();
        $$('.merchandise').each(function(item, idx){
            cog.tween(item, 'opacity', [1.0, 0.0], {duration: 150})
        })
    }
});


var GalleryAnimation = new Class({
    Extends: IndexAnimation,
    
    bodyStartAnimationLast: function(cog){
        this.parent(cog);
        // var cog = this.startAnim.parallel();
        $$('.thumbnails .small_thumbnail').each(function(item, idx){
            var serial = cog.serial();
            serial.delay(100*idx);
            serial.tween(item, 'opacity', [0.0, 1.0], {duration: 500})
        })
    },
    bodyStopAnimation: function(cog){
        this.parent(cog);
        // var cog = this.startAnim.parallel();
        $$('.thumbnails .small_thumbnail').each(function(item, idx){
            cog.tween(item, 'opacity', [1.0, 0.0], {duration: 150})
        })
    }
});


//override this in other JS files to setup the actual animation class
AnimClass = PageAnimation;
var anim = false;

window.addEvent('domready', function(){
    
    
    window.anim = new AnimClass();
    
    window.addEvent('load', anim.startPageLoad.bind(anim));
    
    $$('#nav li a, .prev_gallery, .next_gallery').addEvent('click', function(ev){
        ev.stop();
        var href = this.href;
        anim.startPageUnload();
        anim.stopAnim.addEvent('complete', function(){
            window.location = href; 
        });
    });
});