window.addEvent('domready', function() {
	MORES.setupMores();
	TOGGLES.setupToggles();
	EFFECTS.setupEffects();
	TABS.setupTabs();
	//CSS.randoms();
});

var MORES = {
	showMoreSign: '<div class="button">+</div>', // +
	requestMoreSign: '<div class="button">?</div>', // ?
	loadingMessage: " Looking...",
	nothingToShowMessage: " I havent written anything about this yet. Click the question mark to ask me to write somthing: ",
	requestConfirmedMessage: " Ok, I will write more about this.. as soon as I get the time.",
	requestMoreURL: '/scripts/db/requestMore.php',
	
	setupMores: function() {
		// get all the "request more" spots on the page, and set them up for activity
		var mores = $$('.more'); // place to show loaded info
		var asks = $$('.ask'); // place to show the button to ask for more info
		
		// add all the buttons to show more info
		asks.each( function(ask, i) {
			var more = mores[i];
			
			// add the show more button sign
			ask.innerHTML = MORES.showMoreSign;
			ask['onclick'] = MORES.getShowMore(ask, more);
		});
	},
	
	getShowMore: function(ask, more) {
		// on first click, load any info already in the database
		return function() {
			var requestMore = new Request.JSON({method:'get', url: MORES.requestMoreURL});
			
			requestMore['onSuccess'] = MORES.successShowMore(ask, more);
			requestMore['onFail'] = MORES.failShowMore(ask, more);
			
			more.innerHTML = MORES.loadingMessage;
			ask['onclick'] = null;
			ask.innerHTML = "";
			
			requestMore.send('id=' + more.getProperty('id'));
		}
	},
	
	successShowMore: function(ask, more) {
		
		// loading more info has finished, this is the onSuccess handler
		return function(responseJSON, responseText) {
			if(responseJSON) {
				ask['onclick'] = MORES.setupShowMore(ask, more, responseJSON);
				ask['onclick'](); // show the first level of depth
				ask.innerHTML = MORES.showMoreSign;
			} else {
				// there's no info
				MORES.failShowMore(ask, more);
			}
			
		}
	},
	
	failShowMore: function(ask, more) {

		// loading more info has finished, this is the onFail handler
		return function() {
			more.innerHTML = MORES.nothingToShowMessage;
			ask.innerHTML = MORES.requestMoreSign;
			ask['onclick'] = MORES.postRequestMore(ask, more);
		}
	},
	
	setupShowMore: function(ask, more, response) {
		var terminated = response.terminated == 1; // no more questions
		var contents = response.value; // all the answers
		var maxDepth = contents.length; // how many answers total
		var depth = 0; // how many answers showing
		
		// show progressively more info until we run out
		return function()
		{
			// they want more info
			depth++;
			more.innerHTML = MORES.formatResponse(contents, depth);
			
			if (depth >= maxDepth) {
				
				if (terminated) {
					// there's no more info, and there's not going to be more info
					ask['onclick'] = null;
					ask.innerHTML = "";
				} else {
					// there's no more info, but they can request that I write more here
					ask['onclick'] = MORES.postRequestMore(ask, more);
					ask.innerHTML = MORES.requestMoreSign;
				}
			}
		}
	},
	
	postRequestMore: function(ask, more) {
		// we've run out of info, and they still want more! log a request
		return function() {
			var requestMore = new Request({method:'post', url: MORES.requestMoreURL});
			
			requestMore['onSuccess'] = MORES.successRequestMore(ask, more);
			requestMore['onFail'] = MORES.failRequestMore(ask, more);
			ask['onclick'] = null;
			ask.innerHTML = "";
			
			requestMore.send('id=' + more.getProperty('id'));
		}
	},
	
	successRequestMore: function(ask, more) {
		return function(responseText) {
			ask['onclick'] = null;
			more.innerHTML += MORES.requestConfirmedMessage + " " + responseText;
		}
	},
	
	failRequestMore: function(ask, more) {
		return function() {
			more.innerHTML += " Well.. maybe try later. Having some trouble.";
		}
	},
	
	formatResponse: function(contents, depth) {
		var response = "";
		
		for (var i = 0; i < depth; i++) {
			response += " " + contents[i];
		}
		
		return response;
	}
}

var TOGGLES = {	
	setupToggles: function() {
		var toggles = $$('.toggle');
		var reveals = $$('.reveal');
		var i, toggle, reveal, length = toggles.length;

		for (i = 0; i < length; i += 1) {
			toggle = toggles[i];
			reveal = reveals[i];
			
			// make the toggle appear clickable
			toggle.innerHTML = '<div class="button">' + toggle.innerHTML + "</div>";
			
			toggle['onclick'] = function(section) {

				// always start off invisible
				var visible = false;
				TOGGLES.setVisibility(section, visible);
				
				return function() {
					this.visible = !this.visible;
					TOGGLES.setVisibility(section, this.visible);
				}
			}(reveal);
		}
	},
	
	setVisibility: function(section, visible) {
		if (visible) {
			section.style.display = "inline";
		} else {
			section.style.display = "none";
		}
	}
}

var EFFECTS = {
	toggleColorURL: "/scripts/includes/toggleColor.php",
	
	setupEffects: function() {
		EFFECTS.setupToggleColor();
		//EFFECTS.setupHideNSeek();
		document.styleSheets[2].disabled = sessvars.colorStyleOff;
	},
	
	/* TOGGLES */
	setupToggleColor: function() {
		var toggleColors = $$('.toggleColor');
		
		toggleColors.each( function(toggle, i) {
			toggle['onclick'] = EFFECTS.toggleColor;
		});
	},
	
	toggleColor: function() {
		document.styleSheets[2].disabled = !document.styleSheets[2].disabled;
		sessvars.colorStyleOff = document.styleSheets[2].disabled;
	},
	
	/* HIDE N SEEK */
	setupHideNSeek: function() {
		var hiddenContent = $$('.jsHide');
		var seekers = $$('.jsGoSeek');
		hiddenContent[0].style.display = "none";
		
		seekers.each( function(seeker, i) {

			seeker['onclick'] = function() {
				seekers[i] = false;
				var done = false;
				
				for (s in seekers) {
					//alert(s);
					done = s && done;
				}
				
				if (done) {
					//alert("done");
				} else {
					//alert("not done");
				}
			};
		});
	},
	
	seek: function() {
	}
}

/*
var CSS = {
	// randomize other stuff
	RyPositions: $$('.thumb'), // randomize y-position
	selections: [CSS.RyPositions], // all properties to be randomized
	
	randoms: function() {
		alert("gone");
		selections.each( function(selected, i) {
		});
	}
	
}
*/

var TABS = {
	stuff: '/scripts/db/requestMore.php',
	
	setupTabs: function() {
		TABS.tabs = $$('.tab');
		TABS.tabSections = $$('.tabSection');

		TABS.tabs.each( function(tab, i) {
			tab.inactive = tab.innerHTML;
			tab.active = '<span class="disabled">' + tab.inactive + "</div>";
			
			tab.section = TABS.tabSections[i];
			tab.section.style.display = "none";
			tab.isActive = false;
			tab.innerHTML = tab.active;
			
			if(!TABS.currentTab) {
				TABS.currentTab = tab;
				tab.isActive = true;
				tab.innerHTML = tab.inactive;
				tab.section.style.display = "block";
			}
			
			tab['onclick'] = TABS.getToggleFunction(tab);
		});
	},
	
	getToggleFunction: function(tab) {
		return function() {
			
			if (!tab.isActive) {
				tab.isActive = true;
				tab.innerHTML = tab.inactive;
				tab.section.style.display = "block";
				
				var c = TABS.currentTab;
				c.isActive = false;
				c.innerHTML = c.active;
				c.section.style.display = "none";
				
				TABS.currentTab = tab;
			}
		}
	}
}
