var p; //the processing object
setUpProcessing=function(){
	p = Processing(document.getElementById("processing"));
        d=new Date();
        m=function(){};
        e=[];
	baseTime=0;
        previousDiff=0;
	theseVectors=[];
        url='http://doodle4noodle.appspot.com/';
        // url='http://localhost:8080/';
		var qs = new Querystring()
		if (qs.contains('whiteboard')){
		    whiteboardID=qs.get('whiteboard');
		} else {
    		whiteboardID=0;
		}
		if (qs.contains('theRate')){
		    theRate=qs.get('theRate');
		} else {
    		theRate=20;
		}
		if (qs.contains('timestamp')){
		    timestampID=qs.get('timestamp');
		} else {
    		timestampID=0;
		}

p.setup = function(){
    p.__WIDTH=360;
	p.__HEIGHT=360;
    p.size(p.__WIDTH, p.__HEIGHT);
    p.background(230);
    p.frameRate(30);
}

p.draw= function() {
}
doLine=function() {
    x=p.mouseX;    y=p.mouseY;    px=m.mouseX;    py=m.mouseY;
    p.line(x, y, px, py);
	var dt=(new Date().getTime());
    e.push([dt,x, y, px, py]);
    //~ console.log(dt);
}
goLine=function(points){
    segments=points[0].length;
    //console.log(segments);
    //~ start=points[0][0][0];
    for (var i=0;i<=segments;i++){
        //~ console.log(points[1][i], points[2][i], points[3][i],points[4][i]);
		diff=((points[0][i])-baseTime)/(1000*theRate);
	callLater(diff,p.line,points[1][i], points[2][i], points[3][i],points[4][i]);
    }
}

iterateVectors=function(vectorList){
	//console.log(vectorList);
	theseVectors=vectorList;
	lastUpdate=vectorList[0];
	vectors=vectorList[1];
	baseTime=vectors[0][0][0];
	//for (i=0;i<vectors.length;i++){
	    //goLine(vectors[i]);
	//}
	animateDrawing();
}



animateLine=function(points,previousTimeStamp,previousTimePerformed){
    segments=points[0].length;
    for (var i=0;i<segments;i++){
	thisTimeStamp=points[0][i];
	diff                    = (thisTimeStamp-previousTimeStamp);
	//normalize
	if (diff > 5000) { diff=5000;}
	rateAppliedMilliseconds = diff / theRate;
	timeForwarded           = previousTimePerformed + rateAppliedMilliseconds;
	seconds                 = timeForwarded / 1000.00;
	callLater(seconds,p.line,points[1][i], points[2][i], points[3][i],points[4][i]);
	lineCount		+= 1;
        previousTimePerformed   = timeForwarded;
        previousTimeStamp       = thisTimeStamp;
    }
    return [previousTimeStamp,previousTimePerformed];
}

var lineCount=0;


calculateOverhead=function(vectors){
	linecount=0;
	for (i=0;i<vectors.length;i++){
		aGesture=vectors[i]
		linecount += aGesture[0].length;
	}
	return linecount * 2.5;
}


animateDrawing=function(vectorList){
		errorNumbers=[];
		animating=true;
		p.setup();
		vectorList=theseVectors;
		vectors=vectorList[1];
		estimatedOverhead=calculateOverhead(vectors);
		previousTimeStamp=vectors[0][0][0];
		previousTimePerformed = 0 + estimatedOverhead; // initial delay
		for (i=0;i<vectors.length;i++){
			r=animateLine(vectors[i],previousTimeStamp,previousTimePerformed)
			previousTimeStamp=r[0];
			previousTimePerformed=r[1];
		}
}


initialLoad=function(){
	initLoad=loadJSONDoc(url + 'whiteboardView?whiteboard=' + whiteboardID + '&timestamp=' + timestampID);
	initLoad.addCallback(iterateVectors);	
	//console.log(initLoad);
}
addHistory = function(){
$('history').innerHTML='<a href="/history?whiteboard=' + whiteboardID + '&offset=0">animated history</a>';
}
addEmbed = function(){
$('skibbleembed').value='<iframe src="http://doodle4noodle.appspot.com/static/embed.html?whiteboard=' + whiteboardID + '&timestamp='+ timestampID +'" height="460" width="380" scrolling="auto"></iframe>';
}
updateBookmark =function(){
     $('skibblelink').value=document.location;
}
updateIphoneLink = function() {
     $('iphone').href='/static/iphoneViewer.html?whiteboard=' + whiteboardID + '&timestamp=' + timestampID;
}
updateSVGLink = function() {
     $('svg').href='/svg?whiteboard=' + whiteboardID + '&timestamp=' + timestampID;
}

initialLoad();

p.init();
updateBookmark();
updateIphoneLink();
updateSVGLink();
addHistory();
addEmbed();
}

addLoadEvent(setUpProcessing);