function setUpButtons(){
    buttons=$(".Button");
    buttons.unbind();
    buttons.each((i,button)=>{
        if(!button.cricleAnim){
            button.cricleAnim=new Animation(button);
            button.updateSiz=()=>{
                var c=button.canv,w=button.clientWidth,h=button.clientHeight;
                if(c.width!=w||c.height!=h){
                    $(c).css({
                        width:(c.width=w)+"px",
                        height:(c.height=h)+"px"
                    });
                    button.rad=Math.sqrt(w*w+h*h);
                    button.lastTrans=-1;
                }
            };
            button.updateMouse=(e)=>{
                var off=$(button).offset();
                button.mousePos.x=e.pageX-off.left;
                button.mousePos.y=e.pageY-off.top;
            }
            button.mousePos={x:0,y:0};
            button.lastTrans=0;
            button.canv=button.children[0];

            button.canv.ctx=button.canv.getContext("2d");

            var col=$(button).attr("cricCol");

            var id=parseInt(col);
            if((id+"")!="NaN"){
                var bodyStyles = window.getComputedStyle(document.body);
                var name;
                switch(id){
                    case 0:name="main";break;
                    case 1:name="seco";break;
                }
                col=bodyStyles.getPropertyValue("--"+name);
            }
            if(!col)col=$("body").css("background-color");
            button.cricColor=col;
        }
    });
    buttons.click((e1)=>{
        var e=e1||window.event,that=e.currentTarget;

        that.cricleAnim.setDel(0);
        that.updateMouse(e);

    });
    buttons.mousedown((e1)=>{
        var e=e1||window.event,that=e.currentTarget;
        that.cricleAnim.set(1);
        mouseDown=true;
        that.updateMouse(e);
    });
    buttons.mouseup((e1)=>{
        var e=e1||window.event,that=e.currentTarget;
        mouseDown=false;
        that.updateMouse(e);
    });
    buttons.mouseenter((e1)=>{
        var e=e1||window.event,that=e.currentTarget;
        if(mouseDown){
            that.cricleAnim.set(1);
            that.updateMouse(e);
        }else{
            that.cricleAnim.start=0
            that.cricleAnim.end=0
        }
    });
    buttons.mouseleave((e1)=>{
        var e=e1||window.event,that=e.currentTarget;

        if(mouseDown){
            that.cricleAnim.set(0);
            that.updateMouse(e1||window.event);
        }else if(that.cricleAnim.del==-1){
            that.cricleAnim.set(0);
        }

    });

    buttons.on("clsCh",(e1)=>{
        var e=e1||window.event,that=e.currentTarget;
        that.updateSiz();
    });

    buttons.resize((e1)=>{
        e.currentTarget.updateSiz();
    });
}


function draw(){
    var tim=time();
    for(var i=0;i<buttons.length;i++){
        var button=buttons[i];

        var clickTrans;
        if($(button).hasClass("Disabled"))clickTrans=1;
        else{
            clickTrans=button.cricleAnim.get();
            if(clickTrans<0)clickTrans=0;
            if(clickTrans>1)clickTrans=1;
        }

        if(button.lastTrans==clickTrans)continue;
        button.lastTrans=clickTrans;
        drawButtonCricle(button,clickTrans);
    }
}
function drawButtonCricle(button,trans){
    var can=button.canv,ctx=can.ctx,w=can.width,h=can.height;
    ctx.fillStyle=button.cricColor;
    ctx.clearRect(0,0,w,h);
    var rad=trans*trans*1.3*button.rad;

    if(rad<button.rad){
        var x=button.mousePos.x, y=button.mousePos.y;
        x=x/w*2;
        if(x>1)x=Math.sqrt(x-1)+1;
        else x*=x;
        x*=w/2;

        y=y/h*2;
        if(y>1)y=Math.sqrt(y-1)+1;
        else y*=y;
        y*=h/2;

        ctx.beginPath();
        ctx.arc(x,y, rad, 0, 2 * Math.PI, false);
        ctx.fill();
    }else ctx.fillRect(0,0,w,h);
}