Videorotasjon

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
// refresh delay in ms
var refreshWait=60;
// rotation
var currentAngle=0.0;
var deltaAngle=20;
var isRotating;
var currentIx;
// 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("controls").style.display="block";
    
    isRotating=false;
    currentIx=0;
    
    // adjust canvases to match video
    VH=V.videoHeight; 
    VW=V.videoWidth;
    // when debugging: dump("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;}
function setClassRule(rule,name,val){
    // we assume the actual stylesheet has index 2
    var stylesheet=document.getElementById("videostyle").sheet;    
    var myrules=stylesheet.cssRules;
    //var myrules=document.styleSheets[0].cssRules;
    for(i=0; i < myrules.length; i++){
        if(myrules[i].selectorText==rule){
            for(p in myrules[i].style){
                if(myrules[i].style[p] == name){
                    myrules[i].style.setProperty(name,val,null);
                }
            }
        }
    }
}
// clear rotations
function clearRotate(){
    // disable rotation for all
    for(var ix=0;ix < CList.length;ix++)
        CList[ix].className="moveme";
    // reset rule for rotation
    setClassRule('.rotateme','transform','rotate(0deg)');
    isRotating=false;
    currentAngle=0;
}
// start rotation of a tile
function startRotate(){
    // clear all rotations
    clearRotate();
    // make it rotatable
    CList[currentIx].className+=" rotateme";
    currentAngle=0;
    isRotating=true;
}
// do a rotation
function rotate(){
    if(currentAngle >= 360){
        // clear all rotations
        clearRotate();
        currentIx++;
        if(currentIx==CList.length)
            currentIx=0;
        else
            startRotate();
        return;
    }
    // modify classrule for rotation
    currentAngle+=deltaAngle;
    var val='rotate('+currentAngle+'deg)';
    setClassRule('.rotateme','transform',val);
}
// this is where we copy from video to canvases
function refresh(){
    // 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(isRotating)
        rotate();
}
function toggleSound(){
    V.muted=!V.muted;
}
// when debugging
function dump(T)
{
     if(T){
        var S=document.getElementById("dump").innerHTML;
        document.getElementById("dump").innerHTML=S+"\n"+T;
    }else
        document.getElementById("dump").innerHTML="";
}    

#canbox{position:relative;border-style:none;left:100px}
.moveme{position:absolute;
    top:10px;left:10px;
    width:1px;height:1px;
    margin:0px;
}
.rotateme{transform:rotate(0deg);
    -ms-transform:rotate(0deg); /* IE 9 */
    -moz-transform:rotate(0deg); /* Firefox */
    -webkit-transform:rotate(0deg); /* Safari and Chrome */
    -o-transform:rotate(0deg); /* Opera */
}