var socket = io.connect();

function startChr() { socket.emit("startChr")}
function clearStopwatch() { socket.emit("clearStopwatch")}
function goStopwatch() { socket.emit("goStopwatch")}
function stopChr() { socket.emit("stopChr")}
function resetChr() { socket.emit("resetChr")}
function stopWatch(state) { socket.emit("stopWatch", state)}

// update the stopwatch value on the client page in line with server
socket.on("chronFromServer", function(chron) {
    $("div#timer").text(chron);
});

var scorewidth = "-10000px"
var scorewidtha = "-20000px"

speed = 300;
console.log("speed = ", speed)
speeda = speed/1.2
speedb = speed/1.4
speedc = speed/1.6
speedd = speed/1.75
console.log("speeda = ", speeda)

////////////////////////////////////////////////////////
// send poistion data to server for retramsmit via OSC
/////////////////////////////////////////////////////////
//TweenLite.ticker.addEventListener("tick", tickHandler);

function tickHandler() {
    var r=Math.floor(Math.random()*11)
    //get score part locations and send data to server
//    var lefta = parseInt(document.getElementById(svga0).style.left);  
    socket.emit("parta", r)
  //  var leftb = $('#scoresvgb').css("left");
    //socket.emit("partb", leftb)
    //var leftc = $('#scoresvgc').css("left");
   // socket.emit("partc", leftc)
    //var leftd = $('#scoresvgd').css("left");
   // socket.emit("partd", leftd)
}

TweenLite.ticker.addEventListener("tick", tickHandler);

var tlx = new TimelineMax();
var tlplaya = new TimelineMax({repeat:100, yoyo:true});

var tla = new TimelineMax({repeat:100});
var tlb = new TimelineMax({repeat:100});
var tlc = new TimelineMax({repeat:100});
var tld = new TimelineMax({repeat:100});

tlx.to(title, 1.5, {css:{left:"40px"}},1.5);
tlx.to(ensemble, 1, {css:{left:"320px"}},-0.5);
tlx.to(robcanning, 1, {css:{left:"420px"}},-0.5);

tlx.to(title, 3, {css:{left:"-1300px"}},2);
tlx.to(ensemble, 3, {css:{top:"-300px"}},-3);
tlx.to(robcanning, 3, {css:{left:"1120px"}},-3);

tlx.to(playa, 0.1, {css:{left:"300px"}});
tlx.to(playb, 0.1, {css:{left:"300px"}});
tlx.to(playc, 0.1, {css:{left:"300px"}});
tlx.to(playd, 0.1, {css:{left:"300px"}});

tlx.to(playzonea, 0.2, {css:{top:"18px"}});
tlx.to(playzoneb, 0.2, {css:{top:"200px"}});
tlx.to(playzonec, 0.2, {css:{top:"378px"}});
tlx.to(playzoned, 0.2, {css:{top:"558px"}});

tlx.to(hitstart, 1, {css:{left:"300px"}},-0.2);

//tla.insert("positiona", 0);
//tlb.insert("positiona", 0);
//tlc.insert("positiona", 0);
//tld.insert("positiona", 0);

var initialwait = 0

tla.to(svga0, speeda, {css:{left:scorewidth},ease:Linear.easeNone});
tla.to(svga1, speeda, {css:{left:"0px"},ease:Linear.easeNone},-speeda);
tla.to(svga1, speedb, {css:{left:scorewidth},ease:Linear.easeNone});
tla.to(svga2, speedb, {css:{left:"0px"},ease:Linear.easeNone},-speedb);
//tla.to(svga2, speedd, {css:{left:scorewidth},ease:Linear.easeNone});
//tla.to(svga3, speedd, {css:{left:"0px"},ease:Linear.easeNone},-speedd);
tla.to(svga2, speedc, {css:{left:scorewidth},ease:Linear.easeNone});

tlb.to(svgb0, speedc, {css:{left:scorewidth},ease:Linear.easeNone});
tlb.to(svgb1, speedc, {css:{left:"0px"},ease:Linear.easeNone},-speedc);
tlb.to(svgb1, speedb, {css:{left:scorewidth},ease:Linear.easeNone});
tlb.to(svgb2, speedb, {css:{left:"0px"},ease:Linear.easeNone},-speedb)
//tlb.to(svga2, speedd, {css:{left:scorewidth},ease:Linear.easeNone});
//tlb.to(svga3, speedd, {css:{left:"0px"},ease:Linear.easeNone},-speedd);
tlb.to(svgb2, speeda, {css:{left:scorewidth},ease:Linear.easeNone});

tlc.to(svgc0, speedb, {css:{left:scorewidth},ease:Linear.easeNone});
tlc.to(svgc1, speedb, {css:{left:"0px"},ease:Linear.easeNone},-speedb);
tlc.to(svgc1, speeda, {css:{left:scorewidth},ease:Linear.easeNone});
tlc.to(svgc2, speeda, {css:{left:"0px"},ease:Linear.easeNone},-speeda);
//tlc.to(svga2, speedd, {css:{left:scorewidth},ease:Linear.easeNone});
//tlc.to(svga3, speedd, {css:{left:"0px"},ease:Linear.easeNone},-speedd);
tlc.to(svgc2, speedc, {css:{left:scorewidth},ease:Linear.easeNone});

tld.to(svgd0, speeda, {css:{left:scorewidth},ease:Linear.easeNone});
tld.to(svgd1, speeda, {css:{left:"0px"},ease:Linear.easeNone},-speeda);
tld.to(svgd1, speedc, {css:{left:scorewidth},ease:Linear.easeNone});
tld.to(svgd2, speedc, {css:{left:"0px"},ease:Linear.easeNone},-speedc);
//tld.to(svga2, speedd, {css:{left:scorewidth},ease:Linear.easeNone});
//tld.to(svga3, speedd, {css:{left:"0px"},ease:Linear.easeNone},-speedd);
tld.to(svgd2, speedb, {css:{left:scorewidth},ease:Linear.easeNone});

tla.pause(); tlb.pause();tlc.pause();tld.pause();

$('#playzonea').toggle(function(){tla.pause();},function(){tla.play(); } );
$('#playzoneb').toggle(function(){tlb.pause();},function(){tlb.play(); } );
$('#playzonec').toggle(function(){tlc.pause();},function(){tlc.play(); } );
$('#playzoned').toggle(function(){tld.pause();},function(){tld.play(); } );

$("#help").mouseover(function() {
    $("#helpcontent").show();
}).mouseout(function() { 
    $("#helpcontent").hide();
});

$(document).keydown(function(e){   
    if (e.keyCode==190 ){
	tla.pause(); tlb.pause();tlc.pause();tld.pause();
    }
});

//h help
$(document).keydown(function(e){   
    if (e.keyCode==72 ){
	toggle('helpText')	
    }
});

//s settings
$(document).keydown(function(e){   
    if (e.keyCode==83 ){
	toggle('controlPanel')	
    }
});


$(document).keydown(function(e){   
    if (e.keyCode==188 ){
	tla.resume(); tlb.resume();tlc.resume();tld.resume();
    }
});
/////////////////
// set starting points here
// and stagger offsets if any
/////////////////

//0

$(document).keydown(function(e){ 
    if (e.keyCode==48 ){ 
	clearStopwatch(); goStopwatch(); 
	document.getElementById('hitstart').style.visibility = 'hidden'; 
	tla.gotoAndStop(0); setTimeout(function(){tla.play()},00000); 
	tlb.gotoAndStop(0); setTimeout(function(){tlb.play()},10000); 
	tlc.gotoAndStop(0); setTimeout(function(){tlc.play()},20000); 
	tld.gotoAndStop(0); setTimeout(function(){tld.play()},30000); 
		       }
});

//SPACEBAR

$(document).keydown(function(e){
    if (e.keyCode==32 ){
	clearStopwatch(); goStopwatch(); 
	document.getElementById('hitstart').style.visibility = 'hidden'; 
	tla.gotoAndStop(0); //tla.play(); 
	tlb.gotoAndStop(0); //tlb.play(); 
	tlc.gotoAndStop(0); //tlc.play(); 
	tld.gotoAndStop(0); //tld.play(); 
	tla.play(); tlb.play();tlc.play();tld.play();
    }

});

$(document).keydown(function(e){   
    if (e.keyCode==49 ){tla.pause();}
    if (e.keyCode==50 ){tlb.pause();}
    if (e.keyCode==51 ){tlc.pause();}
    if (e.keyCode==52 ){tld.pause();}
});

$(document).keyup(function(e){
    if (e.keyCode==49 ){tla.resume();}
    if (e.keyCode==50 ){tlb.resume();}
    if (e.keyCode==51 ){tlc.resume();}
    if (e.keyCode==52 ){tld.resume();}
});

var av = 1;
function aplayspeed(xspeed){
    if (xspeed == 1){ av += 0.1; }
    else if (xspeed == -1){ av -= 0.1; }
    return av;
}

var bv = 1;
function bplayspeed(xspeed){
    if (xspeed == 1){ bv += 0.1; }
    else if (xspeed == -1){ bv -= 0.1; }
    return bv;
}

var cv = 1;
function cplayspeed(xspeed){
    if (xspeed == 1){ cv += 0.1; }
    else if (xspeed == -1){ cv -= 0.1; }
    return cv;
}

var dv = 1;
function dplayspeed(xspeed){
    if (xspeed == 1){ dv += 0.1; }
    else if (xspeed == -1){ dv -= 0.1; }
    return dv;
}


function allSpeed(s){
    tla.timeScale(s)
    tlb.timeScale(s)
    tlc.timeScale(s)
    tld.timeScale(s)
}

function globalSpeed(x){
    console.log("globalSpeed")
    tla.timeScale(aplayspeed(x));
    tlb.timeScale(bplayspeed(x));
    tlc.timeScale(cplayspeed(x));
    tld.timeScale(dplayspeed(x));
}

//=- fasterslower
$(document).keydown(function(e){ 
    console.log("globalSpeed",e.keyCode)
    if (e.keyCode==189 ){ globalSpeed(-1); console.log("boo") }
    if (e.keyCode==187 ){ globalSpeed(1)}
});


//[] preview fwd back
var s = 10; var v = 1;
function cue(direction){
    if (direction == 1){ s += 10; }
    else if (direction == -1){ s -= 10; }
    return s;
}  
$(document).keydown(function(e){
    console.log("globalSpeed",e.keyCode)
    if (e.keyCode==219 ){ localSeek(cue(-1)); }
    if (e.keyCode==221 ){ localSeek(cue(1))}
});


function localSeek(seek){
    tla.seek(seek);tla.pause();
    tlb.seek(seek);tlb.pause();
    tlc.seek(seek);tlc.pause();
    tld.seek(seek);tld.pause();
}


// CLOSE BUTTON FOR DIVS                                                                                                                      
//$(document).on('click','.close_box',function(){
//    $(this).parent().fadeTo(300,0,function(){
 //       $(this).remove();
//    });
//});