jQuery(document).ready(function(){
	(function whipUpSomeHomePageActionSon($){
		
		$('ul#home').each(function(){
			var dropInTitle = function(){			
				$('li h3').each(function(z,el){
					$(el)
						.css({'text-indent':'-9999em','line-height':'1px'})
						.closest('li').each(function(y,parent){
							$(parent)
								// images for the LI > h2 are in /img/ directory, name format like h2_[ID].jpg
								.css('background','url(/static/images/h2_' + $(parent).attr('id') + '.jpg) no-repeat 8px 0');
						});
				});
			}();
			
			var dropInImages = function(){
				$('.inner li a').each(function(z,el){
					var $el = $(el);
					var title = $el.text(); // we need to store this right now, we destroy it later but still need it
					var $el_parent_li = $el.closest('li');
					
					var $el_img, $el_hoverbox, top_zero, // 2 elements we'll be making, and the top_zero corrdinate for our hover box
						makePositionCSS, hoverIn, hoverOut, assembleEl; // and 3 functions we'll be making.
					
					// set up the icon img element
					$el_img = $('<img/>')
						// images are in /img/ directory, and match up to a pattern like: [ID].png
						.attr({
							src:'/static/images/' + $el.closest('li').attr('id') + '.png',
							alt: title//,
							//title: title
						});
						
					// set up our hover box
					top_zero = $el_parent_li.outerHeight()+8; 	// 8 is kinda arbitrary, got us where supposed to be.
																	 // need to turn it into a formula though, setting a value 
																	 // is kinda weak :)
					makePositionCSS = function(state){
						var x = 10, y = top_zero; // this is final coordinates for the hover box
						
						if(state === 'out'){ // this sets up the starting point that the hover box animates FROM
							x = 50 + (Math.floor(Math.random()*11) * 3.5);
							y = top_zero + 10 + (Math.floor(Math.random()*11) * 1.5);
						}
						return {'left':x,'top':y};
					};
					
					$el_hoverbox = $('<div class="hover-box">' + title + '</div>')
						.css(makePositionCSS('out'))
						.hide();
						
					hoverIn = function(){
						$('.hover-box').hide(); // kill any existing hover-boxes
						$el_parent_li.addClass('active') // throw an active class onto our parent LI
						$el_hoverbox
							.show(0, function(){$el_hoverbox.animate(makePositionCSS('in'), 400)});
					};
					
					hoverOut = function(){
						// hoverOutCallback allows us to delay hoverOut action using setTimout
						var hoverOutCallback = function(){
							$el_hoverbox.fadeOut('',function(){$el_hoverbox.css(makePositionCSS('out'))});
							$el_parent_li.removeClass('active');						
						}
						setTimeout(function(){hoverOutCallback()}, 800);
					};
					
					// this assembles the new anchor el and assigns hover behaviors
					assembleEl = function(){
						$el
							.empty()
							.append($el_img)
							.append($el_hoverbox)
							.hover(function(){hoverIn();},function(){hoverOut();});					
					}
					assembleEl();					
				});
			}();
		
		
		});		
		
	}(jQuery));
	
	(function doSomeSitewidePageEnhancementsJerkie($){
		$('#main a.lightbox, #main a[rel=lightbox]').colorbox();
	}(jQuery));
});