var currentPanel = "Empty";
var panelServer = "panelServer.php"
var wordServer = "wordServer.php"
var buttonLock = "unlocked";
var gettingWord = false;

$(function() {
	// Some initial state-setting
	changePanel("Home", "no", {});
	updateOrientation();
	
	// #ajaxLoad functionality
	$("#ajaxLoad").hide().bind("ajaxSend", function() {
		if(!gettingWord) {
			$(".panel").fadeTo("fast", 0.5)
			$(this).height($(document).height());
			$(this).show().fadeTo("fast", 0.75);
		}
	}).bind("ajaxSuccess", function() {
		if(!gettingWord) {
			$(".panel").fadeTo("fast", 1);
			$(this).fadeTo("fast",0);
			$(this).hide();
		}
	}).bind("ajaxError", function() {
		$(this).text("The content could not be loaded. You must first connect to the internet.");
	});
	
});

//--- Misc Functions ---
function changePanel(changeTo, slideDir, requestVars) {
	if(buttonLock == "locked") {
		return false;
	} else {
		buttonLock = "locked";
	}
	var factor = {left:-1, right:1, no:0}
	var containerWidth = $(document).width();
	var slidePixels = containerWidth*factor[slideDir];
	requestVars['panel'] = changeTo;
	//Create new panel, give it class, place it in its starting point, then load it with data.
	$('<div/>').attr("id", changeTo).addClass("panel").css("-webkit-transform", "translate("+(-1*slidePixels)+"px,0px)").load(panelServer, requestVars, function() {
		// Now that everything is loaded, add this new element to the DOM
		$(this).appendTo("body");
		$("#"+currentPanel).attr("id", "");
		// Crown the new panel
		currentPanel = changeTo;
		// Slide all panels (almost) simultaneously
		$(".panel").each(function() {
			window.scrollTo(0,1);
			// Use substring() to pull the number out of "translate(0px,0px)"
			var currentTranslate = $(this).css("-webkit-transform");
			var currentTranslateNum = parseInt(currentTranslate.substring(10, currentTranslate.length-8));
			var newTranslate = currentTranslateNum+slidePixels;
			// jQuery animation is actually faster than CSS transitions on the hardware. It's weird.
			//$(this).animate({left:newLeft}, 1000);
			$(this).css({'-webkit-transform':'translate('+newTranslate+'px,0px)'});
		});
		if($("#"+currentPanel).height() < $("body").height()) {
			$("#"+currentPanel).height("100%");
		}
		panelCallBack();
		// Unlock the buttons
		buttonLock = "unlocked";
	});
}

function updateOrientation() {
	if (window.orientation != undefined) {
		var orient;
		switch(window.orientation) {
			case -90:
				orient = "landscape";
				break;
			case 0:
				orient = "portrait";
				break;
			case 90:
				orient = "landscape";
				break;
			case 180:
				orient = "portrait";
				break;
		}
		$("body").attr("class", orient);
	}
};

function toggleAuxPane() {
	if($(".auxiliaryPane").hasClass("hidden")) {
		$(".auxiliaryPane").height($(document).height()).show().fadeTo("normal", 1);
		$(".navButton-prefs img, .navButton-info img").attr("src", "images/close.png");
		$(".navButton-prefs img, .navButton-info img").attr("alt", "Close");
	} else {
		$(".auxiliaryPane").fadeTo("normal", 0, function() { $(this).hide(); });
		$(".navButton-prefs img").attr("src", "images/prefs.png");
		$(".navButton-prefs img").attr("alt", "Prefs");
		$(".navButton-info img").attr("src", "images/info.png");
		$(".navButton-info img").attr("alt", "Info");

	}
	$(".auxiliaryPane").toggleClass("hidden");
}

function panelCallBack() {
	// Remove the panel after it slides. Gotta do it with a setTimeout because CSS Animations have no callback.
	setTimeout('$(".panel:not(#"+currentPanel+")").remove()', 1500);
	switch(currentPanel) {
		case "Favorites":
			getFavorites();
			break;
		case "Game":
			createFavButton();
			break;
		case "Random":
			getNewWord();
			$("input[type=checkbox]").unbind("click");
			break;
	}
}