class Timer {
    constructor(frame,Controller){
        this.Controller=Controller
        this.Vessel=φ('#Vessel')
        this.Scale=φ("#timeScale");
        this.TimeLine=φ('#TimeLine')
        this.Wrap=φ('#timer')
        this.Pbox=φ('#PivotBox')
        this.Level=1
        this.Second=69
        this.NowHover=null;
        this.LastPivot=null;
        this.Chosen=null;
        this.Playing=false;
        φ('#timerSlider')[on.Start]=(e) =>{
            e.stopPropagation();
        }
        this.frame=frame
        this.TimeLine[on.Start]=(e)=>{
        this.BindScaleMove(e)
        }
        this.Scale[on.Start]=(e)=>{
        this.BindScaleMove(e)
        }
        this.RollTimeBox()
        this.ConScale(this.Second)
        document.getElementById('TimeLine').onmousewheel=(e)=>{
        if(e.wheelDelta>0){
            this.Level+=1
            this.Level=this.Level>2?2:this.Level
        }else if(e.wheelDelta<0){
            this.Level-=1
            this.Level=this.Level<1?1:this.Level
        }
        // console.log(e.wheelDelta)
        if(e.wheelDelta==0){return}
        this.ConScale(this.Second)
        }
        this.Plist=[]
        this.Vessel.onscroll=(e)=>{
            // console.log(e)   
            console.log('construction')
            φ("#pWrapper").style.width=this.Vessel.scrollLeft+this.Vessel.clientWidth+"px"
            for (let i = 0; i < this.Plist.length; i++) { 
                this.Plist[i].Flag.style.transform=`translate(${this.Vessel.scrollLeft+7}px,3px)`
                // console.log(this.Plist[i].Flag.style) 
            }
        }
        this.Burin=φ('#Burin')
        this.Burin[on.Start]=(e)=>{
        this.Carve()    
        }
        //register proceed hot key 
        document.addEventListener('keyup',(evnt)=>{
            // console.log(evnt)
            if(evnt.keyCode==32){
                console.log('show will begin:)')
                if(this.Playing){this.Pause()}else{this.Play()}
                // this.Proceed();
            }
        })
    }
    Play(){
        this.FpsInterval=1000/30;
        this.Now;
        this.Then=Date.now();
        this.StartTime=this.Then;
        this.elapsed;
        this.Playing=true;
        this.Perform(this)
        console.log(this.Playing)
    }
    Perform(Aim){
            // request another frame
            console.log(Aim.Playing)
        if(!Aim.Playing){return;}
        requestAnimationFrame(()=>{Aim.Perform(Aim)});
        // calc elapsed time since last loop
        Aim.Now = Date.now();
        Aim.elapsed = Aim.Now - Aim.Then;
        // if enough time has elapsed, draw the next frame
        if (Aim.elapsed > Aim.FpsInterval) {
            // Get ready for next frame by setting then=now, but also adjust for your
            // specified fpsInterval not being a multiple of RAF's interval (16.7ms)
            Aim.Then = Aim.Now - (Aim.elapsed % Aim.FpsInterval);
            // Performing
            if(Aim.ScaleL()+2<Aim.TimeLine.clientWidth){
                Aim.PositeScale(Aim.ScaleL()+2,true)
            }else{
                Aim.Playing=false
            }
        }
    }
    Pause(){
        this.Playing=false
    }
    Proceed(){
        console.log(this.Plist)
        for (let i=0;i<this.Plist.length;i++) {
            console.log('Kiss 01')
            console.log(this.Plist[i].ActionFrames.length)
            if(this.Plist[i].ActionFrames.length>1){
                console.log('HereAnimation RUning！');
                this.Plist[i].ActionFrames[0].Next();
            }
        }
    }
    Carve(){
        if(!this.Chosen){alert('请先选择要刻帧的相')}
        new Frame(this.Chosen,this.ScaleL())
    }
    RollTimeBox(){
        this.TimeBox=document.createElement("div")
        this.TimeBox.innerText="00:00:00"
        this.TimeBox.className="TimeBox"
        this.Wrap.appendChild(this.TimeBox)
    }
    ScaleL(){
        return Number(this.Scale.style.left.split("px")[0])
    }
    PositeScale(x,Absolute){
        console.log(x,Absolute)
        if(x<0){
            return
        }

        // console.log((document.documentElement.clientWidth-this.Scale.offsetWidth)); 
        if(Absolute){
            if(x<this.TimeLine.clientWidth){
                this.Scale.style.left=x+'px';
            }else{
                this.Scale.style.left=Offset+x+"px";
            }
            this.ComputeTimeBox()
            this.ComputeFrames()
            return;
        }
        let Offset=this.Vessel.scrollLeft
        if ( x >(this.TimeLine.clientWidth-Offset)) 
        {
            this.Scale.style.left=this.TimeLine.clientWidth+"px";
        }else{
            this.Scale.style.left=Offset+x+"px";
        }
        this.ComputeTimeBox()
        this.ComputeFrames()
    }
    
    BindScaleMove(e){
        e=CoordinatE(e)
        let x=e.pageX;
            this.PositeScale(x)
            document[on.Move]=(evnt)=>{
                evnt=CoordinatE(evnt)
                let x=evnt.pageX;
                this.PositeScale(x)
             }
             this.Scale[on.End]=()=>{
              document[on.Move]=null;
             }
    }
    ComputeFrames(){
        this.Plist.forEach(Pl => {
            Pl.RenderByFrame();
        });
    }
    ComputeTimeBox(){
        let TimeArray=this.TimeBox.innerText.split(":")
        switch(this.Level){
            case 0:{
                this.TimeBox.innerText=`${PrefixInteger(Math.floor(this.ScaleL()/37/30/60),2)}:${PrefixInteger(Math.floor(this.ScaleL()/37/30%60),2)}:${PrefixInteger(Math.floor(this.ScaleL()/37%30),2)}`
            }break;
            case 1:{
                this.TimeBox.innerText=`${PrefixInteger(Math.floor(this.ScaleL()/3600),2)}:${PrefixInteger(Math.floor(this.ScaleL()/60%60),2)}:${PrefixInteger(Math.floor(this.ScaleL()/2%30),2)}`
                // console.log(this.ScaleL()/2+'帧')
            }break;
            case 2:{
                this.TimeBox.innerText=`${PrefixInteger(Math.floor(this.ScaleL()/60),2)}:${PrefixInteger(Math.floor(this.ScaleL()%60),2)}:${TimeArray[2]}`
            }break;
        }
    }
    ComputeScale(){
        let TimeArray=this.TimeBox.innerText.split(":")
        switch(this.Level){
            case 0:{
                this.TimeBox.innerText=`${PrefixInteger(Math.floor(this.ScaleL()/37/30/60),2)}:${PrefixInteger(Math.floor(this.ScaleL()/37/30%60),2)}:${PrefixInteger(Math.floor(this.ScaleL()/37%30),2)}`
            }break;
            case 1:{
                // this.TimeBox.innerText=`${PrefixInteger(Math.floor(this.ScaleL()/3600),2)}:${PrefixInteger(Math.floor(this.ScaleL()/60%60),2)}:${PrefixInteger(Math.floor(this.ScaleL()/2%30),2)}`
                console.log(TimeArray)
                this.Scale.style.left=Number(TimeArray[0])*60*60+Number(TimeArray[1])*60+Number(TimeArray[2])+"px"

            }break;
            case 2:{
                console.log(Number(TimeArray[0]),Number(TimeArray[1]))
                this.Scale.style.left=Number(TimeArray[0])*60+Number(TimeArray[1])+"px"
                // this.TimeBox.innerText=`${PrefixInteger(Math.floor(this.ScaleL()/60),2)}:${PrefixInteger(Math.floor(this.ScaleL()%60),2)}:${TimeArray[2]}`
            }break;
        }
        this.Vessel.scrollTo(this.ScaleL()-this.Vessel.clientWidth/2,0)
    }
    ConScale(DefaultLength){//Minit Unit/s 
        let StandW=document.body.clientWidth,Min=0;
        this.TimeLine.innerText=""
        this.TimeLine.appendChild(this.Scale)
        switch(this.Level){
            case 0:{
                this.TimeLine.className="TimeLine";
                for (let i = 0; i <= DefaultLength*this.frame; i++) {
                    let TimerSpan=document.createElement("div"),Line=document.createElement("div"),Dial=document.createElement("div");
                    Line.innerText="|"
                    Line.style.cssText="float:left"
                    TimerSpan.className="times"
                    if(i%30==0&&i!=0){Min++};
                    Dial.innerText+=Min+":"+i%30;
                    TimerSpan.appendChild(Line)
                    TimerSpan.appendChild(Dial)
                    this.TimeLine.appendChild(TimerSpan);
                }
                this.TimeLine.style.width=17*(1+DefaultLength*this.frame)+"px"
            }break;
            case 1:{// 1h=60m;1m=60s;1s=30f
                this.TimeLine.className="Time1Line";
                for (let i = 0; i <= DefaultLength; i++) {
                    let TimerSpan=document.createElement("div"),Dial=document.createElement("div");
                    TimerSpan.className="times1"
                    if(i%60==0&&i!=0){Min++};
                    Dial.innerText+=Min+":"+i%60;
                    TimerSpan.appendChild(Dial)
                    this.TimeLine.appendChild(TimerSpan);
                }
                this.CoordinateW(60*DefaultLength)
            }break;
            case 2:{// 1h=60m;1m=60s;1s=30f
                this.TimeLine.className="Time3Line";
                for (let i = 0; i <= Math.floor(DefaultLength/60); i++) {
                    let TimerSpan=document.createElement("div"),Dial=document.createElement("div");
                    TimerSpan.className="times1"
                    if(i%60==0&&i!=0){Min++};
                    Dial.innerText+=Min+":"+i%60;
                    TimerSpan.appendChild(Dial)
                    this.TimeLine.appendChild(TimerSpan);
                }
                this.CoordinateW((DefaultLength))
            }break;
        }
        this.ComputeScale()
    }
    CoordinateW(w){
        this.TimeLine.style.width=w+"px"
        this.Pbox.style.width=w+36+"px"
    }

    appendPivot(Phenomena){
        let Np=new Pivot(Phenomena,this)
        // Np.Sort=this.Plist.length
        // this.Plist[Np.Sort]=Np
        this.Plist.unshift(Np)
        
        Np.Pline.style.width=this.TimeLine.style.width
        // Np.Phover((e)=>{
        //     this.NowHover=Np;
        //     // console.log(Np);
        // })/
        Np.Pwrap[on.Start]=(e)=>{
            console.log("LocalEvent")
            var e=CoordinatE(e)
            let y=e.pageY,In=Np.Sort
            let Offset=e.pageY-y,Scrolled=φ("#pWrapper").scrollTop
            console.log(Scrolled)
            // (Np.Sort>3?3:Np.Sort)+
           
            this.DrawOn(Np)
            Np.Pwrap.style.top=`${Offset+85+In*42-φ("#pWrapper").scrollTop}px`
            Np.Pwrap.style.position="absolute"
            // φ("#pWrapper").scrollTo(0,Scrolled)
            // Np.Phover((e)=>{})
            document[on.Move]=(e)=>{
             e=CoordinatE(e)
             Offset=e.pageY-y
            //  console.log(Offset);
            // console.log(φ("#pWrapper").scrollTop)
             Np.Pwrap.style.top=`${Offset+85+In*42-φ("#pWrapper").scrollTop}px`
            //  console.log(Np.Pwrap.offsetTop)
             this.CollisionCompute(Np.Pwrap.offsetTop,Np)
            }
            document[on.End]=()=>{
                console.log(this.NowHover)
                if(!this.NowHover){
                    this.Pbox.appendChild(Np.Pwrap)
                    this.DrawOff(Np,this.Plist.length+1)
                }else{
                    this.NowHover.Pwrap.style=""
                    this.Pbox.insertBefore(Np.Pwrap,this.NowHover.Pwrap)
                    console.log(this.NowHover.Sort);
                    this.DrawOff(Np,this.NowHover.Sort)
                }
                Np.Pwrap.style=""
                document[on.Move]=null
                this.NowHover=null
                document[on.End]=null;
                if(!this.LastPivot)return;
                this.LastPivot.Pwrap.style='';
                this.LastPivot=null
            }
        }
        this.Pbox.insertBefore(Np.Pwrap,this.Pbox.childNodes[0])
        this.SyncP()
    }
    RemovePivot(Aim){
        this.Plist.splice(Aim.Sort,1);
        this.SyncP();
    }
    ResurgencePivot(Aim){
        if(this.Pbox.childNodes[Aim.Sort]){
            this.Pbox.insertBefore(Aim.Pwrap,this.Pbox.childNodes[Aim.Sort])
        }else{
            this.Pbox.appendChild(Aim.Pwrap)
        }
        this.SyncP()
    }
    CollisionCompute(y,Aim){ 
        y+=φ("#pWrapper").scrollTop
        // console.log("Actually Height"+y)
        for (let i = 0; i < (this.Plist.length); i++) {
            // if(i==Aim.Sort){this.NowHover.style="";continue}
            if(y<=(i*43+37+85)){
                if(this.NowHover&&this.NowHover.Sort==i){return}
                if(this.NowHover){this.NowHover.Pwrap.style="";}
                if(this.Plist[i]){
                    this.Plist[i].Pwrap.style=null;
                    this.Plist[i].Pwrap.style.paddingTop="37px";}else{
                    this.NowHover=false;return;
                }
                // console.log(this.Plist[i].Pwrap)
                this.NowHover=this.Plist[i];
                return;
            }
        }
        console.log('OverFlow')
        if(this.NowHover){this.NowHover.Pwrap.style=""; this.NowHover=false;}
        this.LastPivot.Pwrap.style.paddingBottom="37px";
    }
    Reconstruction(){
        this.DrawOn(this.DrawOff(),"Constraint");
        return "Restraint";
    }
    DrawOn(Aim){
        // Aim.Pwrap.style.zIndex="9";
        this.Plist.splice(Aim.Sort,1)
        let RLoc=Aim.Sort
        Aim.Pwrap.style.transition='0s all'
        this.LastPivot=this.Plist[this.Plist.length-1]
        if((RLoc)<this.Plist.length){
            this.NowHover=this.Plist[RLoc]
            this.NowHover.Pwrap.style.transition="0s all"
            this.NowHover.Pwrap.style.paddingTop="37px";
            // this.Plist[this.Plist.length-1].style.paddingBottom="37px"  
            console.log(this.NowHover.Pwrap)
        }else{
            // console.log("InCounting") 
            if(this.LastPivot)this.LastPivot.Pwrap.style.transition="0s all";
            // if(this.Plist.length>3)this.LastPivot=this.Plist[this.Plist.length-1]
        }
        if(this.LastPivot)this.LastPivot.Pwrap.style.paddingBottom='37px';
        for (let i = 0; i < this.Plist.length; i++) {
            // if(Aim.Pwrap==this.Plist[i].Pwrap){continue}
            // Jefferish
            this.Plist[i].Sort=i;
            this.Plist[i].Pwrap.className="Pwrap";
        }
    }

    DrawOff(Aim,Loc){
        let loc=this.Plist.length-Loc+1
        console.log(loc,Loc)
        // console.log( Sherif
            // might conversion compare system vector in our system completed;this.Controller.PhenomenaObj.length) 
        if(loc==this.Controller.PhenomenaObj.length){
            console.log("Lastest")
            φ("#Scene").appendChild(Aim.From.Div)
        }else{
            // console.log(Aim.From.Div) 
            console.log(Aim.Sort)
            if(Loc==1&&Aim.Sort==0){
                loc-=1;
            }
            console.log(φ("#Scene").childNodes[loc])
            φ("#Scene").insertBefore(Aim.From.Div,φ("#Scene").childNodes[loc])
        }
        this.Plist.splice(Loc,0,Aim)
        // console.log(this.Plist)
        this.SyncP()
    }
    SyncP(){
        for (let i = 0; i < this.Plist.length; i++) {
            this.Plist[i].Pwrap.classList="";
            this.Plist[i].Sort=i;
        }
    }
}


class Pivot{
    constructor(Phenomena,timer){
        this.Ignores=['Timer']
        this.Timer=timer
        this.Pline=document.createElement("div")
        this.Pwrap=document.createElement("div")
        this.Flag=document.createElement("div");
        this.Pline.className="Pivot"
        this.Pline.style.backgroundColor=Phenomena.Div.BgColor
        this.ActionFrames=[];
        switch(Phenomena.constructor){
            case Texter:{
                this.Flag.innerText="文"
            }break;
            case Voicer:{
                this.Flag.innerText="音"
            }break;
            case Vision:{
                this.Flag.innerText="视"
            }break;
        }
        this.Pline.append(this.Flag)
        this.Pwrap.className=""
        this.Pwrap.append(this.Pline)
        this.From=Phenomena
        Phenomena.Pivot=this
        this.Pwrap.addEventListener(on.start,(e)=>{
            this.OnSelected(e)
        })
    }
    OnSelected(e){
        console.log('G233')
        if(this.Timer.Chosen&&this.Timer.Chosen.From.Id==this.From.Id){
            this.Pline.style.border='';
            this.Timer.Chosen=null
        }else{
            this.Pline.style.border='3px solid #fffede';
            if(this.Timer.Chosen){
                this.Timer.Chosen.Pline.style.border='';
            }
            this.Timer.Chosen=this
        }
    }
    Phover(f){
        this.Pwrap[on.Hover]=(e)=>{
            f(e)
        }
    }
    Remove(){
        this.Timer.RemovePivot(this)
        removeElement(this.Pwrap)
    }
    Resurgence(){
        if(this.Sort==0){
            φ("#Scene").appendChild(this.From.Div)
        }else{
            let Cs=φ("#Scene").childNodes
            console.log(this.Sort)
            console.log(Cs.length)
            φ("#Scene").insertBefore(this.From.Div,Cs[Cs.length-this.Sort])
        }
        this.Timer.ResurgencePivot(this)
    }
    RenderByFrame(){//Render pivot scence by Scale time Frame:)
        if(this.ActionFrames.length>1){
            let NowT=Math.floor(this.Timer.ScaleL()/2);
            if(NowT>=this.ActionFrames[this.ActionFrames.length-1].Time){
                    this.ActionFrames[this.ActionFrames.length-1].Coordinated()
                return;}
            if(NowT<this.ActionFrames[0].Time){
                    // console.log('Frist!!!')
                    this.ActionFrames[0].Coordinated()
                return;}
            for (let i =0; i<this.ActionFrames.length-1; i++) {
                if(NowT>this.ActionFrames[i].Time){
                    let Crate=(NowT-this.ActionFrames[i].Time)/this.ActionFrames[i].Duration();
                    this.ActionFrames[i].Coordinated(Crate);
                }
            }
        }
    }
}

class Frame{
    constructor(aim,time){
        this.Aim=aim;
        this.Cpy=JsonClone(aim);
        this.Time=Math.floor(time/2);
        this.Sculpture=document.createElement('div');
        this.Sculpture.innerText='¡';
        this.Sculpture.style='font-size:39px;position:absolute;transform:translate(-50%,-43px);border:none;box-shadow:none';
        this.Sculpture.style.left=time+'px';
        console.log(this.Aim)
        this.Aim.Pline.append(this.Sculpture)
        this.Index=this.Aim.ActionFrames.push(this)-1
        console.log(this.Index)
        console.log(this.Aim.ActionFrames)
    }
    Next(){
        if(this.Index+1<this.Aim.ActionFrames.length){
            this.Aim.ActionFrames[this.Index+1].Run()
        }
    }
    Run(){
        let LastFrame=this.Aim.ActionFrames[this.Index-1],Transition=(this.Time-LastFrame.Time)*(100/3)
        $(this.Aim.From.Div).animate({
            height:this.Cpy.From.WH.H+'px',
            width:this.Cpy.From.WH.W+'px',
            left:this.Cpy.From.XY.X+'px',
            top:this.Cpy.From.XY.Y+'px',},
            Transition,'linear',
            ()=>{
                this.Next();
            }
        )
    }
    Coordinated(Percent){
        let Pc=Percent?Percent:1,NP=this.Cpy.From
        console.log(this.Aim.From,1111111111111)

        if(Pc!=1&&this.Aim.ActionFrames[this.Index+1]){
            let Fp= this.Aim.ActionFrames[this.Index+1].Cpy.From
            $(this.Aim.From.Div).css({
                height:NP.WH.H+(Fp.WH.H-NP.WH.H)*Pc+'px',
                width:NP.WH.W+(Fp.WH.W-NP.WH.W)*Pc+'px',
                left:NP.XY.X+(Fp.XY.X-NP.XY.X)*Pc+'px',
                top:NP.XY.Y+(Fp.XY.Y-NP.XY.Y)*Pc+'px',})
                this.Aim.From.XY.X=NP.XY.X+(Fp.XY.X-NP.XY.X)*Pc
                this.Aim.From.XY.Y=NP.XY.Y+(Fp.XY.Y-NP.XY.Y)*Pc
        }else{
            console.log(NP)
            $(this.Aim.From.Div).css({
                height:NP.WH.H+'px',
                width:NP.WH.W+'px',
                left:NP.XY.X+'px',
                top:NP.XY.Y+'px',})
                this.Aim.From.XY.X=NP.XY.X
                this.Aim.From.XY.Y=NP.XY.Y
        }
    }
    Duration(){
        if(this.Index+1<this.Aim.ActionFrames.length){
            return this.Aim.ActionFrames[this.Index+1].Time-this.Time
        }
        // 氦气盘
        return 0
    }
}






// vi /etc/ssh/sshd_config 




// 时间动画转换Function，→重点 时间帧→动画帧，百分比转换
// renaissance 























// 最近打算去焦作看望下姥爷，就问一下

// 时有天裳，不以人俱。
// 质布弥，量化敛。

























































































// 对错只存在于人们对于世界有限而又可爱的认知。














