Videopussel

    var V=null;              // the video element
    var CList=null;          // the canvas elements
    var DList=new Array();    // the dragables encosing canvas
    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();
    
    // (re)init the page
    function doIt(){
           //no sound
        V.muted=true;
        //turn off waiter
        document.getElementById("waiter").style.display="none";
        // show shuffler
        document.getElementById("shuffler").style.display="block";
        // all draggables
        DList=document.getElementsByClassName("dragme");
        
        // adjust canvases to match video
        VH=V.videoHeight; 
        VW=V.videoWidth;
        // when debugging: dump("Video: "+VW+","+VH);
        TILE_WIDTH=Math.round(1.0*VW/3);
        TILE_HEIGHT=Math.round(1.0*VH/2);
        
        BOX.style.width=""+(VW+50)+"px";
        BOX.style.height=""+(VH+50)+"px";
        setDragBox([-4,-4,VW-TILE_WIDTH/2+4,VH-TILE_HEIGHT/2+4]);
        try{
            for(var ix=0;ix < CList.length;ix++)
            {
                CList[ix].style.width=""+TILE_WIDTH+"px";
                CList[ix].style.height=""+TILE_HEIGHT+"px";
                
                DList[ix].style.width=""+TILE_WIDTH+"px";
                DList[ix].style.height=""+TILE_HEIGHT+"px";
                
                contextList[ix]=CList[ix].getContext('2d');
            }
            shuffle();                
            setInterval("refresh()", 33);
        }
        catch(e){
            alert("no good");
        }
    }
    
    //check the tiles with some tolerance
    function check(){
        // refpoint is top-left
        var L=parseInt(DList[0].style.left);
        var T=parseInt(DList[0].style.top);
        var ix;
        // wile debugging
        /*dump();
        for(ix=1;ix < DList.length;ix++)
        {
          var ld=Math.abs(parseInt(DList[ix].style.left)-L);
          var td=Math.abs(parseInt(DList[ix].style.top)-T);
          dump("offset tile "+ix+" left: "+ld+" top: "+td);
        }*/
        
        // horizontal offset match
        for(ix=1;ix < 3;ix++){
            var ldiff=Math.abs(parseInt(DList[ix].style.left)-L);
            if( (ldiff > ix*(TILE_WIDTH+10))  || 
               (ldiff < ix*(TILE_WIDTH-10))){
                V.muted=true;
                return false;
            }
        }
        
        for(ix=3;ix < CList.length;ix++){
            var ldiff=Math.abs(parseInt(DList[ix].style.left)-L);
            if( (ldiff > (ix-3)*(TILE_WIDTH+10)+10)  || 
                (ldiff < (ix-3)*(TILE_WIDTH-10)-10)){
                V.muted=true;
                return false;
            }
        }
        
        
        //vertical match
        for(ix=3;ix < CList.length;ix++){
            var tdiff=Math.abs(parseInt(DList[ix].style.top)-T);
            if( (tdiff > (TILE_HEIGHT+10)) || 
               (tdiff < (TILE_HEIGHT-10))){
                V.muted=true;
                return false;
            }    
        }
        // turn on sound
        V.muted=false;
        return true;
    }
    
    // shuffle the pieces
    function shuffle(){
        var bw=parseInt(BOX.style.width);
        var bh=parseInt(BOX.style.height);
        
        for(var ix=0;ix < DList.length; ix++){
            var l=Math.floor(Math.random()*(bw-TILE_WIDTH));
            var t=Math.floor(Math.random()*(bh-TILE_HEIGHT));
            // while debugging:dump(""+l+" / "+t);            
            DList[ix].style.left=""+l+"px";
            DList[ix].style.top=""+t+"px";
            DList[ix].zIndex=ix;
        }
    }
    
    // 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
        
        contextList[0].drawImage(V,    0,   0,    TW,TH, 0,0,w,h);
        contextList[1].drawImage(V,    TW,  0,    TW,TH, 0,0,w,h);
        contextList[2].drawImage(V,    2*TW,0,    TW,TH, 0,0,w,h);
        contextList[3].drawImage(V,    0,   TH,   TW,TH, 0,0,w,h);
        contextList[4].drawImage(V,    TW,  TH,   TW,TH, 0,0,w,h);
        contextList[5].drawImage(V,    2*TW,TH,   TW,TH, 0,0,w,h);
        
    }
    // when debugging
    // 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="";
}    

/*
Modified from: http://elouai.com/javascript-drag-and-drop.php
*/
var ie=document.all;
var nn6=document.getElementById&&!document.all;
var isdrag=false;
var x,y;
var tx=0;
var ty=0;
var draggedObj;
//-- bs --
var MAXZ=1;
var DRAGBOX=[minx=0,0,100,100];
function setStartMaxZ(z){
    MAXZ=z;
}
function setDragBox(b){
    DRAGBOX=b;
}
//---- bs ---
function dragMouse(e)
{
  var evt = e || window.event;      
  if (isdrag)
  {  
    var px=tx + evt.clientX - x;
    var py=ty + evt.clientY - y;
    // --- bs
    if((px < DRAGBOX[0]) ||(py < DRAGBOX[1]) ||
       (px > DRAGBOX[2]) || py > DRAGBOX[3])
            drop();
    else
    {
        draggedObj.style.left =''+px+'px';
        draggedObj.style.top  =''+py+'px';    
    }
    //-- bs
    
    return false;
  }
}
function selectmouse(e)
{
  
  var evt = e || window.event;     
  var fobj       = evt.target;
  var topelement = "HTML";
  while (fobj.tagName != topelement && fobj.className != "dragme")
    fobj = fobj.parentElement;
  if (fobj.className=="dragme")
  {
    isdrag = true;
    draggedObj = fobj;
    
    //--- bs  --
    draggedObj.style.cursor="move";
    draggedObj.style.zIndex=MAXZ+1;
    MAXZ+=1;
    //--- bs --
    
    tx=0;
    ty=0;
    
    if(draggedObj.style.left)
        tx = parseInt(draggedObj.style.left);
    if(draggedObj.style.top)
        ty = parseInt(draggedObj.style.top);
    
    x = evt.clientX;
    y = evt.clientY;         
    document.onmousemove=dragMouse;
    return false;
  }
}
function drop()
{
    isdrag=false;
    //--- bs
    if(draggedObj)
        draggedObj.style.cursor="default";
    check();
    //-- bs
    draggedObj=null;    
}
function initDND()
{
    document.onmousedown=selectmouse;
    document.onmouseup=drop;
}

.dragme{position:absolute;
        top:10px;left:10px;
        width:1px;height:1px;
        margin:0px}
#canbox{position:relative;border-style:solid;border-width:thin}

.was-dragme{position:absolute;
        top:10px;left:10px;
        width:1px;height:1px;
        border-style:solid;border-width:thin;border-color:red;
        margin:0px}