//Fx.Lrc , Copyright (c) 2006-2007 Changlong, <http://music.ad.xwall.cn>, MIT Style License.
//r1028
Fx.Lrc    = new Class({
    Extends: Fx,

    options: {
        left: 120,
        hCol: '#f90',
        lCol: '#999',
        advance: 0.88,
        overtime: 0.18,
        lastBlank: 4400,
        fps: 50
    },
   
    initialize: function(dj, options){
        arguments.callee.parent((new Element('div', {'class': 'lrc-dom'}).inject( $(options.container) || document.body)), options);
        this.hCol    = new Color(this.options.hCol);
        this.lCol    = new Color(this.options.lCol);
        this.options.advance2    = 1 - this.options.advance;
        this.options.overtime2    = 1 - this.options.overtime;
        this.wrapper    = new Element('div', {'class':'lrc-box'}).inject(this.element).setStyle('padding-left', this.options.left );
        this.dj        = dj;
        this.isplay    = false;
        this.fx1    = this.fx2    = false;
        dj.addEvents({
            onChange: function(ns, os){
                if( ns == 3 ){
                    this.isplay    = true;
                    this.jump();
                    this.start();
                }else{
                    this.isplay    = false;
                    this.stop();
                }
            }.bind(this)
        });
    },

    play: function(url){
        if ( Fx.Lrc.Pool[url] ) {
            return this.parse(Fx.Lrc.Pool[url]);
        }
        new Ajax(url , {
            method: 'get',
            onComplete: function(txt){
                Fx.Lrc.Pool[url]    = txt;
                this.parse(txt);
            }.bind(this)
        }).request();
        return this;
    },

    parse: function(txt){
        this.stop();
        this.wrapper.empty().adopt(new Element('span')), this.element.scrollLeft    = 0, this.Line = [];
        for(var l = txt.split("\n"), i=0; i<l.length ; i++) {
            var o = l[i].split("\t");
            if( o[1].trim() == '' ) continue;
            var    a    = [parseInt(o[0])];
            a[1]    = this.Line.length ? a[0] - this.Line[this.Line.length-1][0] : a[0];
            this.Line.push( a );
            new Element('span').setText(' '+o[1]+' ').inject(this.wrapper);
        }
        this.Span    = this.wrapper.getElements('span');
        $clear(this.timer0);
        this.timer0    = function(){
            var o = parseInt(this.dj.get().len);
            if( o ) {
                $clear(this.timer0);
                var o    = [o - this.options.lastBlank ];
                o[1]    = o - this.Line[this.Line.length-1][0];
                this.Line.push( o );
            }
        }.periodical(1000, this);
        this.element.scrollLeft    = 0;
        this.i = -1;
        this.reset();
        this.start();
    },

    stop: function(){
        if (!this.timer) return this;
        this.timer = $clear(this.timer);
        return this;
    },

    start: function(){
        $clear(this.timer);
        this.endTime    = 0;
        this.timer = this.step.periodical( Math.round(1000 / this.options.fps) , this);
    },

    step: function(){
        if( ! this.isplay ) return ;
        var time = $time();   
        if( time > this.endTime   ) {
            this.reset();
        }
        this.delta = this.options.transition( ( time - this.time ) / this.duration ); //
        this.setNow();
        this.increase();
    },

    setNow: function(){
        this.now    = this.compute( this.from, this.to ) ;
    },

    jump: function(){
        var now    = parseInt(this.dj.dom.controls ? this.dj.dom.controls.currentPosition * 1000 : 0);
        for(var i = 0; i< this.Line.length ;i++ ){
            if( now < this.Line[i][0] ){
                this.i    = i;
                break;
            }
        }
        if( !this.i ) return ;
        var time    = $time();
        this.duration    = this.Line[this.i][1];
        this.endTime    = time + ( this.Line[this.i][1] - now );
        this.time    = time - ( this.i ? now - this.Line[this.i-1][0] : 0 );
        if( !this.Span[this.i] ){
            return false;
        }
        this.to        = parseInt(this.Span[this.i].offsetWidth) + parseInt(this.Span[this.i].offsetLeft) - this.options.left;
        //----------------
            this.delta = this.options.transition( ( now - this.time ) / this.duration );
            this.from    = parseInt(this.Span[this.i].offsetLeft) - this.options.left;
            this.setNow();
            this.increase();
        //----------------
        this.from    = this.element.scrollLeft;
        this.Span.setStyle('color', this.lCol);
        this.Span[this.i].setStyle('color', this.hCol);

        var percent    = (this.Line[this.i][0] - now) / this.duration;



        if( !this.Span[this.i+1] ) {
            var    delay    = this.duration - this.options.lastBlank;
            var dur        = this.options.lastBlank;
        }else{
            if( percent < this.options.advance ){
                var dur        = this.Line[this.i+1][1] * this.options.overtime + this.options.advance2 * this.duration;
                var delay    = this.options.advance * this.duration - now;
            }else{
                var dur        = this.Line[this.i+1][1] * this.options.overtime + (1 - percent)* this.duration;
                var delay    = 0;
            }
        }

        this.fx1    = new Fx.Morph(this.Span[this.i], {duration: dur });
        (function(){
            this.fx1.start({color: this.options.lCol});
        }).delay( delay , this);

        if( !this.Span[this.i+1] ) {
            return ;
        }

        this.fx2    = new Fx.Morph(this.Span[this.i+1], {duration: dur });
        (function(){
            this.fx2.start({color: this.options.hCol});
        }).delay( delay , this);
    },

    reset: function(){
        var time    = $time();
        var now        = parseInt(this.dj.dom.controls ? this.dj.dom.controls.currentPosition * 1000 : 0);
        for(var i = 0; i< this.Line.length ;i++ ){
            if( now < this.Line[i][0] ){
                if( this.i == i ) return ;
                this.i    = i;
                break;
            }
        }
        this.time    = time - ( this.i ? now - this.Line[this.i-1][0] : 0 );
        this.from    = this.element.scrollLeft;   
        this.to        = parseInt(this.Span[this.i].offsetWidth) + parseInt(this.Span[this.i].offsetLeft) - this.options.left;
        this.duration    = this.Line[this.i][1];
       
        if( !this.Line[this.i+1] ){
            var dur        = this.options.lastBlank;
            var delay    = Math.abs(this.Line[this.i][1] -this.options.lastBlank);
        }else{
            var dur        = this.Line[this.i][1] * this.options.advance2 + this.Line[this.i+1][1] * this.options.overtime;
            var delay    = this.Line[this.i][1] * this.options.advance;
        }
       
            var    fx1    = new Fx.Morph(this.Span[this.i], {duration: dur});
            fx1.color2    = this.options.lCol;
            (function(){
                this.start({color: this.color2 })
            }).delay( delay, fx1 );
       
        if( this.Span[this.i+1] ){
            var dur        = this.Line[this.i][1] * this.options.advance2 + this.Line[this.i+1][1] * this.options.overtime
            var delay    = this.Line[this.i][1] * this.options.advance;
            el            = this.Span[this.i+1];
        }else{
            return ;
        }
        if( this.i<1 ) {    //light    No.1
            var    el        = this.Span[1];
            var    delay    = 0;
            var dur        = this.Line[1][1] *this.options.overtime;
        }
        if( this.fx1.element !=el ){
            var    fx2    = new Fx.Morph(el, {duration: dur});
            fx2.color2    = this.options.hCol;
            (function(){
                this.start({color: this.color2 })
            }).delay( delay, fx2 );
        }
        //this.Span[this.i].setStyle('color', this.hCol);
        //console.log( 'this.i: ' + this.i , 'now:'+ now , this.Span[this.i].getText() )
    },

    increase: function(){
        this.element.scrollTo(this.now, 0);
    }
});

Fx.Lrc.Pool    = {};


/*
var console = {};
console.log    = function(){
    if( !console.dom ) console.dom    = new Element('div').inject(document.body).setStyles({
        'white-space':'pre', 'font-size':'12px'});
    var    s    = console.dom.innerHTML;
    for(var i=0; i < arguments.length;i++){
        var type    = $type(arguments[i]);
        if( type == 'string' || type == 'number' ){
            s    += arguments[i] +", \t";
        }else if( type == 'element' ){
            s    += arguments[i].getText() + ",\t";
        }
    }
    console.dom.setHTML(s +"<br/>");
}
*/
new Asset.css('./iplayer/css/ilrc.css');
--------------------------------------------------------------------------
.lrc\-dom{
    white-space: nowrap;
    width:600px;
    height:3ex;
    overflow:hidden;
    background-color:#000;
}

.lrc\-dom *{
    border:0px; margin:0px; padding:0px;    letter-spacing:0px;
}


.lrc\-box{
    white-space: nowrap;
}

.lrc\-box *{
    letter-spacing:0px;
    word-spacing:0px;
    font-size:14px;
    text-decoration : none ;
    font-weight:100;   
    line-height:3ex;
    color:#999;

    white-space:pre;
    word-break:keep-all;
    word-wrap:normal;
    white-space: nowrap;


}