var shockUrl = "/shock.php";
var statusUrl = "/status.php";

var INACTIVITY_TIME = 600;
var statusCount = 0;
var refreshId = null;
var lastNumClicks = 0;
var onOffStatusShown = false;
var oldJsonObj;

function drawStatus(status) {
	displayOnOff(status);
	displayTopicAndButtons(status);
	displayVolts(status);
	displayVotesToGo(status);
	displayVotesThisRound(status);
    displayShockCounts(status);
    displayShockSparkline(status);
    displayShockIntensity(status);
    displayTemperatureSparkline(status);
    displayBrightnessSparkline(status);
    displayVisitorStats(status);
    if (status.shocking == true) {
        if (status.name == "tom")
            shockee = status.tomName;
        else
            shockee = status.mikeName;
        displayText = "Shocking: " + shockee;
    
        $("#shocking-whom").text(displayText);
        if($("#shocking").is(":hidden")) {
            $("#shocking").modal({});
        }
		var src = $('#khowStudioImage').attr("src");
		$('#khowStudioImage').attr("src", src.replace(/\?.*$/, '') + '?' + Math.random());

        numPieces = Math.floor(Math.random()*28) + 9;
        $("#shocking-inner ul li:last").effect("explode", { pieces: numPieces }, 750, function() { $(this).remove() });
    } else {
        $.modal.close();
        //setBatteryLevel(status.volts, $("#volts"));
        if (status.name == "tom") {
            drawStatusSide(status, $("ul.tom"), $("ul.mike"));
        } else if (status.name == "mike") {
            drawStatusSide(status, $("ul.mike"), $("ul.tom"));
        }
    }
}

function displayTopicAndButtons(status) {
	$("#topicText").text(status.topicText);
	$(".tomName").text(status.tomName);
	$(".mikeName").text(status.mikeName);
}

function displayOnOff(status) {
	if (onOffStatusShown == false) {
		onOffStatusShown = true;
		if (status.onAir == true) {
			$("#onAir").show();
		} else {
			$("#offAir").show();
		}
	}
}

function displayVolts(status) {
    var displayText;
    if (status.volts > 0) {
		if (status.onAir == true) {
	        displayText = "Click away";
	        $("#volts").removeClass("wait");
	        $("#container").removeClass("wait");
		} else {
	        displayText = "OFF AIR";
	        $("#volts").addClass("wait");
	        $("#container").addClass("wait");
		}
    } else {
        displayText = "Wait a bit";
        $("#volts").addClass("wait");
        $("#container").addClass("wait");
    }
    $("#volts").text(displayText);
}

function displayShockCounts(status) {
    var displayText;
    if (status.tomShocked) {
        displayText = " (" + status.tomShocked + ")";
        $("#tomShocked").show().text(displayText);
    }
    if (status.mikeShocked) {
        displayText = " (" + status.mikeShocked + ")";
        $("#mikeShocked").show().text(displayText);
    }
}

function displayVotesToGo(status) {
    var displayText;
    if (status.tomVotesToGo) {
        displayText = addCommas(status.tomVotesToGo) + " to go";
        $("#tomVotesToGoInner").show().text(displayText);
    }
    if (status.mikeVotesToGo) {
        displayText = addCommas(status.mikeVotesToGo) + " to go";
        $("#mikeVotesToGoInner").show().text(displayText);
    }
}

function displayVotesThisRound(status) {
    var displayText;
    if (status.tomVotesThisRound != null) {
        if (status.tomVotesThisRound > 1) {
            displayText = status.tomVotesThisRound + " votes";
        } else if (status.tomVotesThisRound == 1) {
            displayText = status.tomVotesThisRound + " vote";        
        } else if (status.tomVotesThisRound == 0) {
            displayText = "";        
        }
        $("#tomThisRound").text(displayText);
    }
    if (status.mikeVotesThisRound  != null) {
        if (status.mikeVotesThisRound > 1) {
            displayText = status.mikeVotesThisRound + " votes";
        } else if (status.mikeVotesThisRound == 1) {
            displayText = status.mikeVotesThisRound + " vote";        
        } else if (status.mikeVotesThisRound == 0) {
            displayText = "";        
        }
        $("#mikeThisRound").text(displayText);
    }
}


function displayShockSparkline(status) {
    if (status.sparkline) {
        $("#recentShocks .reading").sparkline(status.sparkline, { type:'bar', barColor:'#CB0D15', negBarColor:'black', zeroColor:'white', height:'1em', barSpacing:2, barWidth:4 });
    }
}


function displayShockIntensity(status) {
	if (status.tomLevel) {
		$("#tomLevel .reading").text(status.tomLevel);
	}
	if (status.mikeLevel) {
		$("#mikeLevel .reading").text(status.mikeLevel);
	}	
}

function displayVisitorStats(status) {
	if (status.numVisitors) {
		$("#numVisitors .reading").text(status.numVisitors);
	}
	if (status.numClicks) {
		if (status.numClicks > lastNumClicks) {
			lastNumClicks = status.numClicks;
			$("#numClicks .reading .total").text(addCommas(status.numClicks));
		}
	} else {
		lastNumClicks = 0;
		$("#numClicks .reading .total").text(0);
	}
	$("#numClicks .reading .tom").text(addCommas(status.numTomClicks));	
	$("#numClicks .reading .mike").text(addCommas(status.numMikeClicks));	
}


function displayTemperatureSparkline(status) {
    if (status.studioTempSparkline) {
        $("#studioTemp .sparkline.reading:first").sparkline(status.studioTempSparkline, { lineColor: '#565656', spotColor : '#CB0D15', minSpotColor : false, maxSpotColor : false, fillColor: false, width: '175px', spotRadius: 2.5 });
    }
	if (status.studioTempLatest) {
		$("#studioTemp .latest.reading").html(status.studioTempLatest);
	}
	if (status.startTime) {
		$("#studioTempTimeline .start").text(status.startTime);
		$("#studioTempTimeline .end").text(status.endTime);
	}
}

function displayBrightnessSparkline(status) {
    if (status.studioBrightnessSparkline) {
        $("#studioBrightness .sparkline.reading:first").sparkline(status.studioBrightnessSparkline, { lineColor: '#565656', spotColor : '#CB0D15', minSpotColor : false, maxSpotColor : false, fillColor: false, width: '175px', spotRadius: 2.5 });
    }
	if (status.studioBrightnessLatest) {
		$("#studioBrightness .latest.reading").html(status.studioBrightnessLatest);
	}	
	if (status.startTime) {
		$("#studioBrightnessTimeline .start").text(status.startTime);
		$("#studioBrightnessTimeline .end").text(status.endTime);
	}
}


/*
function setBatteryLevel(volts, batteryElement) {
    if (volts == 0) {
        $(batteryElement).attr("class", "volts0");
    } else if (volts < 17) {
        $(batteryElement).attr("class", "volts16");
    } else if (volts < 34) {
        $(batteryElement).attr("class", "volts33");
    } else if (volts < 51) {
        $(batteryElement).attr("class", "volts50");
    } else if (volts < 68) {
        $(batteryElement).attr("class", "volts67");
    } else if (volts < 68) {
        $(batteryElement).attr("class", "volts67");
    } else if (volts < 85) {
        $(batteryElement).attr("class", "volts84");
    } else {
        $(batteryElement).attr("class", "");
    }    
}
*/

function drawStatusSide(status, ulElement, otherUl) {
    drawValue = Math.abs(status.value);
    var remainder = Math.floor(drawValue % 20);
    $(otherUl).find("li").removeClass("hot");
    for (var i = 1; i < 20; i++) {
        $(otherUl).find("li").removeClass("hot" + i);
    }
    if (drawValue < 20) {
        setHotClass($(ulElement).find("li.first"), "first", "hot" + remainder);
        clearHotClasses($(ulElement).find("li.second"), "second");
        clearHotClasses($(ulElement).find("li.third"), "third");
        clearHotClasses($(ulElement).find("li.fourth"), "fourth");
        clearHotClasses($(ulElement).find("li.fifth"), "fifth");
    }
    if (drawValue < 40 && drawValue >= 20) {
        setHotClass($(ulElement).find("li.first"), "first", "hot");
        setHotClass($(ulElement).find("li.second"), "second", "hot" + remainder);
        clearHotClasses($(ulElement).find("li.third"), "third");
        clearHotClasses($(ulElement).find("li.fourth"), "fourth");
        clearHotClasses($(ulElement).find("li.fifth"), "fifth");
    }
    if (drawValue < 60 && drawValue >= 40) {
        setHotClass($(ulElement).find("li.first"), "first", "hot");
        setHotClass($(ulElement).find("li.second"), "second", "hot");
        setHotClass($(ulElement).find("li.third"), "third", "hot" + remainder);
        clearHotClasses($(ulElement).find("li.fourth"), "fourth");
        clearHotClasses($(ulElement).find("li.fifth"), "fifth");
    }
    if (drawValue < 80 && drawValue >= 60) {
        setHotClass($(ulElement).find("li.first"), "first", "hot");
        setHotClass($(ulElement).find("li.second"), "second", "hot");
        setHotClass($(ulElement).find("li.third"), "third", "hot");
        setHotClass($(ulElement).find("li.fourth"), "fourth", "hot" + remainder);
        clearHotClasses($(ulElement).find("li.fifth"), "fifth");
    }
    if (drawValue < 100 && drawValue >= 80) {
        setHotClass($(ulElement).find("li.first"), "first", "hot");
        setHotClass($(ulElement).find("li.second"), "second", "hot");
        setHotClass($(ulElement).find("li.third"), "third", "hot");
        setHotClass($(ulElement).find("li.fourth"), "fourth", "hot");
        setHotClass($(ulElement).find("li.fifth"), "fifth", "hot" + remainder);
    }
    if (drawValue >= 100) {
        setHotClass($(ulElement).find("li.first"), "first", "hot");
        setHotClass($(ulElement).find("li.second"), "second", "hot");
        setHotClass($(ulElement).find("li.third"), "third", "hot");
        setHotClass($(ulElement).find("li.fourth"), "fourth", "hot");
        setHotClass($(ulElement).find("li.fifth"), "fifth", "hot");
/*
        if (status.name == "tom") {
            $("#tomButton").effect("shake", { direction: "up"}, 100);
        } else {
            $("#mikeButton").effect("shake", { direction: "up"}, 100);
        }
*/
    }
}

/*
function setHotRemainder(ulElement, liElement, remainder) {
    if (remainder > 0) {
        $(ulElement).find(liElement).addClass("hot" + remainder);
    }
    for (var i = 1; i < 20; i++) {
        if (i != remainder) {
            $(ulElement).find(liElement).removeClass("hot" + i);
        }
    }
}
*/

function clearHotClasses(liElement, baseClass) {
    $(liElement).attr("class", baseClass);
}

function setHotClass(liElement, baseClass, hotClass) {
    $(liElement).attr("class", baseClass + " " + hotClass);
}

function sendShock(name) {
	if ($("#volts").hasClass("wait") == false) {

	    if (name == "tom") {
	    	oldJsonObj.value--;
	    } else {
	    	oldJsonObj.value++;	    
	    }

		if (oldJsonObj.value < 0) {
	        drawStatusSide(oldJsonObj, $("ul.tom"), $("ul.mike"));
	    } else {
	        drawStatusSide(oldJsonObj, $("ul.mike"), $("ul.tom"));
	    }



	    $.ajax({
	        url: shockUrl,
	        type: "POST",
	        data: {"name" : name},
	        cache: false,
	        dataType: "json",
	        success: function(jsonObj) {
	        	oldJsonObj = jsonObj;
	//            console.log("sendShock success");
	            drawStatus(jsonObj);
	            statusCount = 0;
	            oneStatusRequest();
	        },
	        error: function() {
	//            console.log("sendShock error");
	        }
	    });
	}
}


function getStatus() {

    var connectedText = $("#PPMConnected").text();
    if ("Disconnected" == connectedText) {
    	$("#neutral li").addClass("disconnected");
    }


    $.ajax({
        url: statusUrl,
        type: "GET",
        cache: false,
        dataType: "json",
        success: function(jsonObj) {
        	oldJsonObj = jsonObj;
            drawStatus(jsonObj);
            oneStatusRequest();
        },
        error: function(jsonObj) {
        }
    });    
}

function oneStatusRequest() {
    if (refreshId != null) {
        clearTimeout(refreshId);
    }
    refreshId = setTimeout(function() {
        statusCount++;
        if (statusCount < INACTIVITY_TIME) {
            getStatus();           
        } else {
            refreshId = null;
        }
    }, 1000);
    
}


// Thanks: http://www.mredkj.com/javascript/nfbasic.html
function addCommas(nStr)
{
	nStr += '';
	x = nStr.split('.');
	x1 = x[0];
	x2 = x.length > 1 ? '.' + x[1] : '';
	var rgx = /(\d+)(\d{3})/;
	while (rgx.test(x1)) {
		x1 = x1.replace(rgx, '$1' + ',' + '$2');
	}
	return x1 + x2;
}

$(document).ready(function(){
    $(".buttons a.negative").click(function() {
       var name = $(this).attr("name");
       sendShock(name);
       $(this).blur();
       return false;
    });
    $("#inner").click(function() {
        //console.log("clicked");
        location.reload(true);
    });    
    $("#onAir").click(function() {
        $(this).hide();
    });    
    $("#offAir").click(function() {
        $("#offAirClose").hide();
        $(".offAirText").hide();
        $(this).height(29);
        $(".onAirStatus").css("background-position", "50% -13px");
        $(this).css("cursor", "default");
    });
    $("#studioTemp").hover(
		function () {
			$("#studioTempTimeline").show();
			//$("#studioTempTimeline").prev().css("border-left", "1px solid gray");
		}, 
		function () {
			$("#studioTempTimeline").hide();
			//$("#studioTempTimeline").prev().css("border-left", "1px solid transparent");
		}
    );
    $("#studioBrightness").hover(
		function () {
			$("#studioBrightnessTimeline").show();
			//$("#studioBrightnessTimeline").prev().css("border-left", "1px solid gray");
		}, 
		function () {
			$("#studioBrightnessTimeline").hide();
			//$("#studioBrightnessTimeline").prev().css("border-left", "1px solid transparent");
		}
    );
        
   getStatus();
});