Videoeksplosjon

var V=null;              // the video element
var CList=null;          // the canvas elements
var VW;                 // Video width
var VH;                 // Video height
var TILE_WIDTH;         // all tiles same width
var TILE_HEIGHT;        // all tiles same height
var contextList=new Array(); // canvas contexts
// when exploding we set a target position and go for it
var targetX=new Array();
var targetY=new Array();
// stepping down to zero when we explode
var explodeCounter=-100;
var explodeSteps=100;

// refresh delay in ms
var refreshWait=50;
// init the page when video starts
function doIt(){
    //no sound
    V.muted=true;
    //turn off waiter
    document.getElementById("waiter").style.display="none";
    // show exploder button and sound toggler
    document.getElementById("buttons").style.display="block";
    
    // adjust canvases to match video
    VH=V.videoHeight; 
    VW=V.videoWidth;
    // when debugging: console.log("Video: "+VW+","+VH);
    TILE_WIDTH=Math.floor(1.0*VW/(DIVIDER));
    TILE_HEIGHT=Math.floor(1.0*VH/(DIVIDER));
    // set up a box that holds the  video when not exploded
    BOX.style.width=""+(VW+20)+"px";
    BOX.style.height=""+(VH+20)+"px";
    try{
        for(var ix=0;ix < CList.length;ix++)
        {
            CList[ix].style.width=""+TILE_WIDTH+"px";
            CList[ix].style.height=""+TILE_HEIGHT+"px";
            
            contextList[ix]=CList[ix].getContext('2d');
            
            CList[ix].style.left=""+getPosHomeX(ix)+"px";
            CList[ix].style.top=""+getPosHomeY(ix)+"px";
            CList[ix].zIndex=ix;
        }
        setInterval("refresh()",refreshWait);
    }
    catch(e){
        alert("no good");
    }
}
// where does the videotiles belong
function getPosHomeX(canvasix){    return (canvasix % DIVIDER)*TILE_WIDTH;    }
function getPosHomeY(canvasix){    return Math.floor((canvasix / DIVIDER))*TILE_HEIGHT;}
// coming back from an explotion
function moveTowardsHome(){
    for(var ix=0;ix < CList.length; ix++)
    {
        var cvas=CList[ix];
        
        var homeX=getPosHomeX(ix);
        var homeY=getPosHomeY(ix);
        
        var Xnow=parseInt(cvas.style.left);
        var Ynow=parseInt(cvas.style.top);
        var dx=homeX-Xnow;
        var dy=homeY-Ynow;
        
        // if we are close we go all home
        if(Math.abs(dx) <20)
            cvas.style.left=homeX+"px"
        else
            cvas.style.left=Xnow+dx/20+"px";
        if(Math.abs(dy) <20)
            cvas.style.top=homeY+"px";
        else
            cvas.style.top=Ynow+dy/20+"px";
    }
}
// exploding, moving twds target
function moveAway(){
    for(var ix=0;ix < CList.length; ix++){
        var cvas=CList[ix];
        var Xnow=parseInt(cvas.style.left);
        var Ynow=parseInt(cvas.style.top);
        var dx=targetX[ix]-Xnow;
        var dy=targetY[ix]-Ynow;
        
        var incrX=Math.round(dx/20);
        var incrY=Math.round(dy/20);
        //alert(Xnow);
        
        CList[ix].style.left=Xnow+incrX+"px";
        CList[ix].style.top=Ynow+incrY+"px";
    }
}
// explode the pieces, that is set up targets and go
function explode(){
    // hide video and show canvases
    document.getElementById("canbox").style.display="block";
    document.getElementById("vidhead").style.display="none";
    
    // play sound
    document.getElementById('audiotag1').play();
    // counting down from this value
    // must be seen in connection with refreshWait
    explodeCounter=explodeSteps;
    // numbers limiting the ekplotion (-100,800)are more or less arbitrary
    for(var ix=0;ix < CList.length; ix++){
        targetX[ix]=-100+Math.round(Math.random()*(800));
        targetY[ix]=-100+Math.round(Math.random()*(800));
    }
}
// this is where we copy from video to canvases
function refresh(){
    explodeCounter=explodeCounter-1;
    if(explodeCounter >= -explodeSteps){
        // startclipX, startclipY,clipWidth,clipHeigth,placeX,placeY,W,H
        var TW=TILE_WIDTH;
        var TH=TILE_HEIGHT;
        var w=CList[0].width;
        var h=CList[0].height
        for(var ix=0;ix <contextList.length;ix++){
            var homeX=getPosHomeX(ix);
            var homeY=getPosHomeY(ix);
            contextList[ix].drawImage(V,   homeX,   homeY,    TW,TH,      0,0,w,h);
        }
        if(explodeCounter<=0)
            moveTowardsHome();
        else
            moveAway();
    }
    else{
        // hide canvases and show video
        document.getElementById("vidhead").style.display="block";
        document.getElementById("canbox").style.display="none";
    }
}
function toggleSound(){
    V.muted=!V.muted;
}

#canbox{position:relative;border-style:none;left:100px}
.moveme{position:absolute;
        top:10px;left:10px;
        width:1px;height:1px;
        margin:0px}