// string prototype
String.prototype.trim = function() {
	return this.replace(/^\s+|\s+$/g,"");
}
String.prototype.ltrim = function() {
	return this.replace(/^\s+/,"");
}
String.prototype.rtrim = function() {
	return this.replace(/\s+$/,"");
}

// when dom is ready
$(document).ready(function(){
	// hide buttons
	$("div#menu, img#btnNavLeft, img#btnNavRight, div#frame").hide();
	
	// attach mouseover events
	$("img#btnNavLeft, img#btnNavRight").each(function(i) {
		this.onmouseover = function() {
			this.src = this.src.replace('_off', '_on');
		}
		this.onmouseout = function() {
			this.src = this.src.replace('_on', '_off');
		}
	});
	
	// attach inputbox handler
	$("input#hubName").each(function() {
		$(this).val("Choose name...").css("color", "gray");
		$(this).focus(function(){
			if (this.value == "Choose name...") {
				$(this).val("").css("color", "black");
			}
		});
		$(this).blur(function(){
			$("input#hubName").val($("input#hubName").val().trim()); // trim value on blur
			if (this.value == "" || this.value == "Choose name...") { // the reason we also check for "choose..." is that we want the text re-colored gray again if they re-typed it manually
				$(this).val("Choose name...").css("color", "gray");
			}
		});
	});
	
	// subscriber form validation
	$("form#subscribeForm").submit(function(){
		// trim value
		var usrName = $("input#hubName").val().trim();
		$("input#hubName").val(usrName);
		// verify value
		if (usrName == "Choose name..." || usrName == "") {
			alert("Please choose a Hub username.");
			return false;
		} else {
			return true;
		}
	});
});

// when entire page is loaded
$(window).bind('load', function() {
	// fade in buttons
	$("div#menu, img#btnNavLeft, img#btnNavRight, div#frame").each(function(i) {
		$(this).fadeIn("slow");
	});
});

// layer switch function
var inProgress = false;
function SwitchLayer(n,p) {
	if (inProgress == false) {
		// layer set (titles): rules
		if (n == 'rules') {
			var p1Name = "DJCenter Hub Rules";
			var p2Name = "PureHouseMusic Hub Rules";
		}
		// layer set (titles): subscribe
		else if (n == 'subscribe') {
			var p1Name = "Subscription Step One";
			var p2Name = "Step Two";
		}
		// abort if unknown layer set
		else {
			alert("Unknown layer set! Aborting switch...");
			return false;
		}
		// determine which layers to affect
		var lsBox = "div#"+n+"Box";
		var lsPages = "div#"+n+"P1, div#"+n+"P2";
		var lsToggle = "p#"+n+"Toggle";
		// create the html states
		var htmlS1 = "<b>"+p1Name+"</b> / <a href=\"#\" onclick=\"SwitchLayer('"+n+"', 2); return false\">"+p2Name+"</a>";
		var htmlS2 = "<a href=\"#\" onclick=\"SwitchLayer('"+n+"', 1); return false\">"+p1Name+"</a> / <b>"+p2Name+"</b>";
		// swap the layers
		inProgress = true;
		$(lsBox).slideUp("slow",function(){
			$(lsPages).toggle();
			$(lsBox).slideDown("slow",function(){
				// switch menu links
				if (p == 1) {
					$(lsToggle).html(htmlS1);
				} else {
					$(lsToggle).html(htmlS2);
				}
				// ready again
				inProgress = false;
			});
		});
	}
}