rc-web@12: /////////////////////////////////////////////////
rc-web@12: // connect to websocket
rc-web@12: 
rc-web@12: var socket = io.connect();
rc-web@12: 
rc-web@12: //socket.on("metroPulse", metronomeTick);
rc-web@12: /////////////////////////////////////////////////
rc-web@12: socket.on("metroPulse", pulseInClient);
rc-web@12: function pulseInClient(pulse,groupID,metrobeat){
rc-web@12:     var groupPage=document.getElementById('group').value
rc-web@12:     if (groupID == groupPage) {
rc-web@12: 	metronomeTick(1000, groupID, metrobeat);
rc-web@12:     }
rc-web@12: }
rc-web@12: /////////////////////////////////////////////////
rc-web@12: function  metroCss(beat, beatcolor,text){
rc-web@12:     var color = beatcolor;
rc-web@12:     
rc-web@12:     $(".metrocase > div").each(function(){$(this).stop()});
rc-web@12:     $(".metrocase > div").each(function(){$(this).css('background-color', beatcolor)});
rc-web@12:     $(".metrocase > div").each(function(){$(this).text(" ")});
rc-web@12:     $(".metrocase > div").each(function(){$(this).animate({opacity: 0.5},
rc-web@12: 							  50,
rc-web@12: 							  function() { $(this).animate({opacity:0.0}); }
rc-web@12: 							 );
rc-web@12: 					 })  
rc-web@12: 	}
rc-web@12: 
rc-web@12: function metronomeTick(pulse, voice,metrobeat) {
rc-web@12:     var color = "gray"
rc-web@12:     metroCss(0, "red", "4")    
rc-web@12: };
rc-web@12: 
rc-web@12: /////////////////////////////////////////////////
rc-web@12: 
rc-web@12: // update the stopwatch value on the client page in line with server
rc-web@12: socket.on("chronFromServer", function(chron) {
rc-web@12:     $("div#client_chronometer").text(chron);
rc-web@12: });
rc-web@12: 
rc-web@20: 
rc-web@20: 
rc-web@20: 
rc-web@20: /////////////////////////////////////////////////
rc-web@20: // countdown to change
rc-web@20: 
rc-web@20: socket.on("countinFromServer", countinClient);
rc-web@20: function countinClient(groupID, currentseconds,mm,text,colour,background){
rc-web@20:     var groupPage=document.getElementById('group').value
rc-web@20:     if (groupID == groupPage) {
rc-web@20: 	console.log(currentseconds);
rc-web@20: 	document.getElementById("countinnumber").style.visibility="visible";
rc-web@20: 	document.getElementById("countinnumber").style.visibility="visible";
rc-web@20: 	//$("#countin").text(text);
rc-web@20: 	$("#countinnumber").text(currentseconds);
rc-web@20: 	$("#countinnumber").css('background-color', background);
rc-web@20: 	
rc-web@20: 	document.getElementById("countinnumber").style.color=colour;
rc-web@20: 
rc-web@20: 	if ( currentseconds == 0) {
rc-web@20: 	    document.getElementById("countinnumber").style.visibility='hidden';
rc-web@20: //	    document.getElementById("countin").style.visibility='hidden';
rc-web@20: 	}
rc-web@20:     }}
rc-web@20: 
rc-web@12: /////////////////////////////////////////////////
rc-web@12: 
rc-web@12: function pageFlip(unit) {
rc-web@12:     console.log("flipping page:"+ unit);
rc-web@12:     $('#sections').trigger('goto', [parseFloat(unit)]); 
rc-web@16: //    $('#sections-preview').trigger('goto', [parseFloat(unit+1)]); 
rc-web@12:     //metroStart(1000); 
rc-web@12:     //document.getElementById("countdowncase").style.visibility="hidden";
rc-web@12: }
rc-web@12: 
rc-web@16: 
rc-web@16: 
rc-web@12: /////////////////////////////////////////////////
rc-web@16: 
rc-web@12: // call the fancy jquery functions
rc-web@12: 
rc-web@12: function slideTo (target) { $('#sections').trigger('goto', [target]); }
rc-web@12: function pad2(number) { return (number < 10 ? '0' : '') + number }       
rc-web@12: 
rc-web@12: /////////////////////////////////////////////////
rc-web@12: 
rc-web@12: socket.on("pageFlipfromserver", pageTurn);
rc-web@12: function pageTurn (group,unit,time,mm) {
rc-web@12:     var groupPage=document.getElementById('group').value;
rc-web@16:     //console.log("fromservercommand has been executed on client");
rc-web@12:     if (group == groupPage) {
rc-web@12: 	var g= pad2(group); 
rc-web@12: 	var p= pad2(unit);
rc-web@16: //	pageFlip(unit); 
rc-web@20: 	pageTurnB(unit)
rc-web@16:  
rc-web@16:    }
rc-web@12:     else { 
rc-web@12: 	console.log("not for this group... ignoring... for group:" + group );
rc-web@12:     }
rc-web@12: }
rc-web@12: 
rc-web@16: function pageTurnB(unit) {
rc-web@21:     var units=6;
rc-web@21:     var section = "seta/"
rc-web@20:     var next=(((unit+1)%units)+units)%units
rc-web@20:     console.log("HOP TURN" + unit+ "next:" + next);
rc-web@20: //    $("#live").html($("#unit"+unit).html());
rc-web@21:     $("#live").load(section+"music.html #"+unit +" *");
rc-web@20:  
rc-web@21:     $("#preview").html('<img src=' + section+"img/thumbs/"+next + ".png" + '>');
rc-web@16: }
rc-web@16: 
rc-web@18: ////////////////////////////////////////////////
rc-web@20: 
rc-web@20: /* 
rc-web@20: 
rc-web@20: keyboard controls 
rc-web@20: +++++++++++++++++++++++++
rc-web@20: 
rc-web@20: SPACE to toggle visibilty of preview
rc-web@20: m to toggle visibilty of metronome
rc-web@20: s to toggle visibilty of stopwatch
rc-web@20: h to hide all above
rc-web@20: 
rc-web@20: */
rc-web@20: 
rc-web@18: function toggle_visibility(id) {
rc-web@18:     var e = document.getElementById(id);
rc-web@18:     if(e.style.display == 'block')
rc-web@18:         e.style.display = 'none';
rc-web@18:        else
rc-web@18:            e.style.display = 'block';
rc-web@18: }
rc-web@18: 
rc-web@18: $(document).keypress(function(e){
rc-web@19:     // "space  bar" for next unit preview
rc-web@18:     var checkWebkitandIE=(e.which==32 ? 1 : 0);
rc-web@18:     var checkMoz=(e.which==32 ? 1 : 0);
rc-web@19:     // "m" button for metronome
rc-web@19:     var mcheckWebkitandIE=(e.which==109 ? 1 : 0);
rc-web@19:     var mcheckMoz=(e.which==109 ? 1 : 0);
rc-web@19:     // "s" button for stopwatch/chronometer
rc-web@19:     var ccheckWebkitandIE=(e.which==115 ? 1 : 0);
rc-web@19:     var ccheckMoz=(e.which==115 ? 1 : 0);
rc-web@19: 
rc-web@19:   // "h" button for hideall
rc-web@19:     var hcheckWebkitandIE=(e.which==104 ? 1 : 0);
rc-web@19:     var hcheckMoz=(e.which==104 ? 1 : 0);
rc-web@19: 
rc-web@19:     console.log(e.which);
rc-web@19:     if (checkWebkitandIE || checkMoz) { toggle_visibility('preview') }   
rc-web@19:     if (mcheckWebkitandIE || mcheckMoz) { toggle_visibility('metro') }   
rc-web@19:     if (ccheckWebkitandIE || ccheckMoz) { toggle_visibility('client_chronometer') }   
rc-web@19:     if (hcheckWebkitandIE || hcheckMoz) { 
rc-web@19: 	toggle_visibility('client_chronometer') 
rc-web@19: 	toggle_visibility('metro') 
rc-web@19: 	toggle_visibility('preview') 
rc-web@19: }
rc-web@18:     });
rc-web@18: 
rc-web@18: ////////////////////////////////////////////////