Ease    = potato.fx.Ease;
Tween   = potato.fx.Tween;
Tracker = potato.modules.Tracker;

var app = null;

window.onload = function(){ app = new Application(); };

var Application = function(){
    var tv = new TV(),
        info = new Info();
    
    tv.animate();
    tv.interference();
    
    var tracker = new Tracker('UA-3730889-1');
};

var TV = function(){
    var self = this,
        i = 0,
        colorIndex = 0,
        colorData = ['fff', 'f7d207', '2eb4bd', '02a468', '875296', 'c8034a', '494f99'];
    
    this.createElements = function(){
        var ul = document.createElement('ul');
        document.body.appendChild(ul);
        
        for(i = 0; i < 21; i++){
            var li = document.createElement('li');
            ul.appendChild(li);
        }
        
        if(document.getElementsByTagName('ul').length < 2) this.createElements();
    }
    
    this.createElements();
    
    this.ul = document.getElementsByTagName('ul');
    
    for(i = 0; i < this.ul[0].children.length; i++){
        if (i > 0 && i % colorData.length == 0) colorIndex = i;
        this.ul[0].children[i].style.backgroundColor =
        this.ul[1].children[i].style.backgroundColor = '#' + colorData[i - colorIndex];
    }
    
    this.animate = function(){
        this.tween = new Tween(50000, {
            onUpdate: function(tw){
                self.ul[0].style.marginLeft = 3150 * tw.ratio + 'px';
                self.ul[1].style.marginLeft = -3150 + 3150 * tw.ratio + 'px';
            },
            onComplete: function(){
                self.animate();
            }
        });
        this.tween.start();
    }
    
    this.interference = function(){
        var self = this,
            el,
            interval,
            tween;
        
        el = document.createElement('div');
        el.style.top = '1440px';
        document.body.appendChild(el);
        
        this.loop = function(){
            tween = new Tween(2500, {
                curve: Ease.inQuint,
                onUpdate: function(tw){
                    el.style.top = 1440 + -2090 * tw.ratio + 'px';
                },
                onComplete: function(){
                    setTimeout(self.loop, 10000);
                }
            });
            tween.start();
        }
        
        this.loop();
    }
}

var Info = function(){
    var self = this,
        box = document.getElementById('infoBg'),
        info = document.getElementById('info'),
        tween = new Tween(1500, {
            curve:Ease.outElastic,
            onUpdate: function(tw){
                box.style.width = 400 * tw.ratio + 'px';
                box.style.height = 350 * tw.ratio + 'px';
            },
            onComplete: function(){
                self.showContent();
            }
        });
    setTimeout(tween.start, 1000);
    
    this.showContent = function(){
        var tween = new Tween(1000, {
            onUpdate: function(tw){
                info.style.opacity = .8 * tw.ratio;
            }
        });
        tween.start();
    }
}