rc@74: /////////////////////////////////////////////////
rc@74: // connect to websocket
rc@74: 
rc@74: var socket = io.connect();
rc@74: 
rob@83: function initPage() { socket.emit("initPage");  
rob@83: 		      console.log("init.client.log")
rob@83: 		    }
rob@83: 
rc@74: //socket.on("metroPulse", metronomeTick);
rc@74: /////////////////////////////////////////////////
rc@74: socket.on("metroPulse", pulseInClient);
rc@74: function pulseInClient(pulse,groupID,metrobeat){
rc@74:     var groupPage=document.getElementById('group').value
rc@74:     if (groupID == groupPage) {
rc@74: 	metronomeTick(1000, groupID, metrobeat);
rc@74:     }
rc@74: }
rob@83: 
rc@74: /////////////////////////////////////////////////
rc@74: function  metroCss(beat, beatcolor,text){
rc@74:     var color = beatcolor;
rc@74:     $(".metrocase > div").each(function(){$(this).stop()});
rc@74:     $(".metrocase > div").each(function(){$(this).css('background-color', beatcolor)});
rc@74:     $(".metrocase > div").each(function(){$(this).text(" ")});
rob@84: }
rc@74: 
rc@74: function metronomeTick(pulse, voice,metrobeat) {
rc@74:     var color = "gray"
rob@83:     metroCss(0, "red", "4")
rob@83:     setTimeout(function(){metroCss(0, "black", "4")},150);
rc@74: };
rc@74: 
rc@74: /////////////////////////////////////////////////
rc@74: // update the stopwatch value on the client page in line with server
rob@83: socket.on("chronFromServer", function(chron) { $("div#client_chronometer").text(chron); });
rc@74: 
rc@74: // server time
rc@74:     socket.on("dateTime", function(datetime) {
rob@83: 	$("div#datetime").text("" +datetime);
rc@74:     });
rc@74: 
rc@74: /////////////////////////////////////////////////
rc@74: // countdown to change
rob@84: 
rc@74: socket.on("countinFromServer", countinClient);
rob@83: function countinClient(groupID, currentseconds,mm,text,colour,background,unit){
rc@74:     var groupPage=document.getElementById('group').value
rc@74:     if (groupID == groupPage) {
rob@83: 	$("#counttitle").css('color','black');
rc@74: 	$("#counttitle").text(text);
rc@74: 	$("#count").text(currentseconds);
rc@74: 	document.getElementById("count").style.color=colour;
rob@83:  }}
rc@74: 
rc@74: /////////////////////////////////////////////////
rc@74: // countdown to change
rc@74: socket.on("counterText", cText);
rc@74: function cText(groupID, currentseconds,text){
rob@83:     $("#totalcountdown"+groupID).text(text);	
rc@74:     var groupPage=document.getElementById('group').value
rc@74:     if (groupID == groupPage) {
rob@83: 	//console.log(text)
rc@74: 	$("#totalcountdown").text(text);	
rc@74:     }}
rc@74: 
rc@74: ///////////////////////////////////////
rob@83: //function pageFlip(unit) { $('#sections').trigger('goto', [parseFloat(unit)]); }
rc@74: 
rc@74: /////////////////////////////////////////////////
rc@74: // call the fancy jquery functions
rob@84: 
rob@84: //function slideTo (target) { $('#sections').trigger('goto', [target]); }
rob@84: //function pad2(number) { return (number < 10 ? '0' : '') + number }       
rc@74: 
rc@74: /////////////////////////////////////////////////
rob@84: 
rob@83: //var testSound = new buzz.sound( 'audio/testfile', { formats: [ 'ogg', 'mp3' ] } );
rob@84: /*socket.on("pageFlipfromserver", pageTurn);
rob@83: function pageTurn (group,unit,time,mm,seqcounter,nextunit) {
rc@74:     var groupPage=document.getElementById('group').value;
rc@74:     if (group == groupPage) {
rob@83: 	console.log(unit + " ---> " + nextunit)
rob@84: 
rob@83: 	//$("#preview").html("<h3 style='background:transparent; position: relative; font-size:1.5em;top:14px; left:10px;';> n e x t : </h3><img src='svg/"+ (nextunit) + ".svg" + "' width='305'>")
rob@83: 	//$("#previewbox-"+group).html("<img src='svg/"+(unit) + ".svg" + "' width='515'>")
rob@83:     }
rc@74:     else { 
rc@74: 	console.log("not for this group... ignoring... for group:" + group );
rc@74:     }
rc@74: }
rc@74: 
rob@84: */
rob@84: 
rob@83: socket.on("pageIni", pageIni);
rob@87: //  some if logic to check if file is already displayed
rob@87: // if not load it - client doesnt need to be present at start
rob@83: function pageIni (group,unit,time,mm,seqcounter,nextunit) { 
rob@83:     console.log(unit + " ---> " + nextunit)
rob@87:     
rob@87:     if (group==1){
rob@87:     var n1 = $("#previewbox-1").html().indexOf("svg"); 
rob@87:     if (n1 == -1){ $("#previewbox-1").html("<img src='svg/"+(unit) + ".svg" + "' width='100%'>")}
rob@87:     }
rob@90: 
rob@87:     if (group==2){
rob@87:     var n2 = $("#previewbox-2").html().indexOf("svg"); 
rob@87:     if (n2 == -1){ $("#previewbox-2").html("<img src='svg/"+(unit) + ".svg" + "' width='100%'>")}
rob@87:     }
rob@83: 
rob@87:     if (group==3){
rob@87:     var n3 = $("#previewbox-3").html().indexOf("svg"); 
rob@87:     if (n3 == -1){ $("#previewbox-3").html("<img src='svg/"+(unit) + ".svg" + "' width='100%'>")}
rob@87:     }
rob@87: 
rob@87:     if (group==4){
rob@87:     var n4 = $("#previewbox-4").html().indexOf("svg"); 
rob@87:     if (n4 == -1){ $("#previewbox-4").html("<img src='svg/"+(unit) + ".svg" + "' width='100%'>")}
rob@87:     }
rob@88:     
rob@88:     var n = $("#previewbox-solo").html().indexOf("svg"); 
rob@88:     if (n == -1){ 
rob@87:         $("#previewbox-solo").html("<img src='svg/"+(unit) + ".svg" + "' width='100%'>")
rob@87: 	$("#previewbox-solo-next").html("<img src='svg/"+(nextunit) + ".svg" + "' width='100%'>")
rob@88: }
rob@88: 
rob@88: 
rob@87:     //}
rob@87:     
rc@74: }
rc@74: 
rc@74: ////////////////////////////////////////////////
rc@74: 
rc@74: /* commented out for now as interferes with chat
rc@74: need to introduce metakey...manyana... not so usefull anyway really... 
rc@74: 
rc@74: keyboard controls 
rc@74: +++++++++++++++++++++++++
rc@74: 
rc@74: SPACE to toggle visibilty of preview
rc@74: m to toggle visibilty of metronome
rc@74: s to toggle visibilty of stopwatch
rc@74: h to hide all above
rc@74: 
rc@74: 
rob@83: */
rc@74: function toggle_visibility(id) {
rc@74:     var e = document.getElementById(id);
rc@74:     if(e.style.display == 'block')
rc@74:         e.style.display = 'none';
rc@74:        else
rc@74:            e.style.display = 'block';
rc@74: }
rc@74: 
rc@74: $(document).keypress(function(e){
rc@74: //    console.log(e.which);
rob@90:   // "0" button for hide chat
rob@90:     var hcheckWebkitandIE=(e.which==48 ? 1 : 0);
rob@90:     var hcheckMoz=(e.which==48 ? 1 : 0);
rc@74:     if (hcheckWebkitandIE || hcheckMoz) { 
rob@90: 	toggle_visibility('comms') 
rc@74: }
rc@74:     });
rc@74: 
rob@83: //*/
rc@74: 
rc@74: ////////////////////////////////////////////////
rc@74: // this needs to have a variable to define the websocket
rc@74: // otherwise we will pings from all sockets connected
rc@74: // no! the server broadcasts the ping and the clients emit the pong!
rc@74: // ah but then the time reported back from the server needs to be targeted
rc@74: // to specific client..
rc@74: //////////////////////////////////////////////
rc@74: // Latency "Pong"
rob@90: 
rob@83: socket.on("timeFromServer", function(n) { 
rob@83:     socket.emit("clientTimeResponse",n); });
rc@74: 
rc@74: socket.on("latencyFromServer", function(latency) {
rc@74:     $("#client_latency").text("Latency: "+latency+"ms.")
rc@74: });
rc@74: 
rc@74: function getLatencies(x) { socket.emit("getLatencies", x); }
rc@74: 
rc@74: //////////////////////////////////////////////
rc@74: 
rc@74: 
rc@74: socket.on('connect', function () {
rc@74:     $('#chat').addClass('connected');
rc@74: });
rc@74: 
rc@74: socket.on('announcement', function (msg) {
rob@90:     $('#Lines').append($('<p>').append($('<em>').text(msg)));
rc@74: });
rc@74: 
rob@90: Socket.on('nicknames', function (nicknames) {
rc@74:     $('#nicknames').empty().append($('<span>Online: </span>'));
rc@74:     for (var i in nicknames) {
rc@74: 	$('#nicknames').append($('<b>').text(nicknames[i]));
rc@74:     }
rc@74: });
rc@74: 
rc@74: socket.on('user message', message);
rc@74: socket.on('reconnect', function () {
rc@74:     $('#lines').remove();
rc@74:     message('System', 'Reconnected to the server');
rc@74: });
rc@74: 
rc@74: socket.on('reconnecting', function () {
rc@74:     message('System', 'Attempting to re-connect to the server');
rc@74: });
rc@74: 
rc@74: socket.on('error', function (e) {
rc@74:     message('System', e ? e : 'A unknown error occurred');
rc@74: });
rc@74: 
rc@74: function message (from, msg) {
rob@83:     $('#lines').prepend($('<p>').prepend($('<b>').text(from), msg));
rc@74: }
rc@74: 
rc@74: // dom manipulation
rc@74: $(function () {
rc@74:     $('#set-nickname').submit(function (ev) {
rc@74: 	socket.emit('nickname', $('#nick').val(), function (set) {
rc@74: 	    if (!set) {
rc@74: 		clear();
rc@74: 		return $('#chat').addClass('nickname-set');
rc@74: 	    }
rc@74: 	    $('#nickname-err').css('visibility', 'visible');
rc@74: 	});
rc@74: 	return false;
rc@74:     });
rc@74: 
rc@74:     $('#send-message').submit(function () {
rc@74: 	message('me', $('#message').val());
rc@74: 	socket.emit('user message', $('#message').val());
rc@74: 	clear();
rc@74: 	$('#lines').get(0).scrollTop = 10000000;
rc@74: 	return false;
rc@74:     });
rc@74: 
rc@74:     function clear () {
rc@74: 	$('#message').val('').focus();
rc@74:     };
rob@79: });