// animation object holds numerous properties related to motion
var anime;

// initialize default anime object
function initAnime() {
    anime = {elemID:"", 
             xCurr:0, 
             yCurr:200, 
             xTarg:0, 
             yTarg:200, 
             xStep:0, 
             yStep:0,
             xDelta:0,
             yDelta:0,
             xTravel:0,
             yTravel:0,
             vel:1, 
             pathLen:1, 
             interval:null,
             x0:0,
             x1:0,
	     visible:1,
             count:0,
	     blockline:0
            };
}

// stuff animation object with necessary explicit and calculated values
function initSLAnime(elemID, startX, startY, endX, endY, speed, blockline) {
    initAnime();
    if (blockline>2) blockline=0;
    anime.blockline =blockline;
    anime.elemID = elemID+""+anime.blockline;
    anime.xCurr = startX;
    anime.yCurr = startY;
    anime.x0 = startX;
    anime.x1 = endX;
    anime.xTarg = endX;
    anime.yTarg = endY;
    anime.xDelta = Math.abs(endX - startX);
    anime.yDelta = Math.abs(endY - startY);
    anime.vel = (speed) ? speed : 1;
    anime.count=0;
//    window.alert("initSLAnime vel:"+anime.vel+" speed: "+speed+ " anime.x0 "+ anime.x0+ " anime.x1 "+ anime.x1);
    // set element's start position
    document.getElementById(anime.elemID).style.left = startX + "px";
    document.getElementById(anime.elemID).style.top = startY + "px";
    document.getElementById(anime.elemID).style.visibility = "visible";
    // the length of the line between start and end points
    anime.pathLen = Math.sqrt((Math.pow((startX - endX), 2)) + (Math.pow((startY - endY), 2)));
    // how big the pixel steps are along each axis
    anime.xStep = parseInt(((anime.xTarg - anime.xCurr) / anime.pathLen) * anime.vel);
    anime.yStep = parseInt(((anime.yTarg - anime.yCurr) / anime.pathLen) * anime.vel);
    // start the repeated invocation of the animation
    anime.interval = setInterval("doSLAnimation()", 10);
}

// calculate next steps and assign to style properties
function doSLAnimation() {
    if ((anime.xTravel + anime.xStep) <= anime.xDelta && 
        (anime.yTravel + anime.yStep) <= anime.yDelta) {
        var x = anime.xCurr + anime.xStep;
        var y = anime.yCurr + anime.yStep;
        document.getElementById(anime.elemID).style.left = x + "px";
        document.getElementById(anime.elemID).style.top = y + "px";
        anime.xTravel += Math.abs(anime.xStep);
        anime.yTravel += Math.abs(anime.yStep);
        anime.xCurr = x;
        anime.yCurr = y;
	if ((anime.xCurr == anime.x0 + parseInt(anime.pathLen/2) ||
  	     anime.xCurr == anime.x1 + parseInt(anime.pathLen/2)) 
	   && anime.count==0 ) {	
	    clearInterval(anime.interval);
	    anime.interval = setInterval("doBlinkAnimation()", 200);
	}	
    } else {
        document.getElementById(anime.elemID).style.left = anime.xTarg + "px";
        document.getElementById(anime.elemID).style.top = anime.yTarg + "px";
        clearInterval(anime.interval);
	// und wieder von vorne
        document.getElementById(anime.elemID).style.visibility = "hidden";
        initSLAnime('block', anime.x1, 200, anime.x0, 200, anime.vel, anime.blockline+1);
    }
}

function doBlinkAnimation() {
	if (anime.visible>0) {
		anime.visible=0;
	        document.getElementById(anime.elemID).style.visibility="hidden";
	} else { 
	        document.getElementById(anime.elemID).style.visibility="visible";
		anime.visible=1;
		anime.count++;
	}
	if (anime.count>=10) {
	    clearInterval(anime.interval);
	    anime.interval = setInterval("doSLAnimation()", 10);
	}
}