// WHEN DOCUMENT HAS LOADED...
$('document').ready(function(){
	
	// fix png images for IE
	$(document).pngFix();
	
	// if !bg cookie saved, generate a random bg image and save in cookie
	var backgroundImageUrl = $.cookie('backgroundImageUrl') ? $.cookie('backgroundImageUrl') : null;
	var bgTokens = ['earth', 'water', 'wood'];
	if (!backgroundImageUrl) {
		backgroundImageUrl = wp_template_url + '/images/bg-' + bgTokens[Math.floor(Math.random() * bgTokens.length)] + '.jpg';
		$.cookie('backgroundImageUrl', backgroundImageUrl, { path: '/', expires: 0 });
	}
	
	// display the background image
	$('body').css('background-image', 'url('+backgroundImageUrl+')');
	
	// add "del" elements to all glyphs
	$('#logo-toggles li').append('<del>&nbsp;</del>');
	
	// initialize from saved glyph order
	if ($.cookie('visibleGlyphs')) {
		
		// turn everything off
		$('#logo img').hide();
		$('#logo-toggles li').addClass('off');
		
		// find an array of saved visible glyph ids
		visibleGlyphs = $.cookie('visibleGlyphs').split(',');
		
		// turn visible glyphs back on
		$.each(visibleGlyphs, function(){
			$('#'+this).insertAfter($('#'+this).siblings(':last')).show();
			$('#'+this+'-toggle').toggleClass('off');
		});
		
	}
	
	// wire up toggles to logos
	$('#logo-toggles li').css({
		cursor : 'pointer'
	}).click(function(){
		
		// find glyph
		var glyphSelector = '#'+$(this).attr('id').replace('-toggle','');
		
		// if off
		if ($(this).hasClass('off')) {
			$(glyphSelector).insertAfter($(glyphSelector).siblings(':last')).fadeIn('normal', function(){
				saveGlyphs();
			});
		} else {
			$(glyphSelector).fadeOut('normal', function(){
				saveGlyphs();
			});
		}
		
		$(this).toggleClass('off');
	});
	
	// set up the slideshow(s)
	$('.slideshow').cycle({
		height: '300px',
		width: '584px',
		fx: 'fade',
		timeout: 8000,
		speed: 2000,
		slideExpr: 'img'
	});
	
	// create shadows around the main column
	$('#main')
	.append('<div id="shadow-e" class="shadow">&nbsp;</div>')
	.append('<div id="shadow-se" class="shadow">&nbsp;</div>')
	.append('<div id="shadow-s" class="shadow">&nbsp;</div>')
	.append('<div id="shadow-sw" class="shadow">&nbsp;</div>')
	.append('<div id="shadow-w" class="shadow">&nbsp;</div>');
	
});

function saveGlyphs() {
	// find all switches that are turned "on" (not "off")
	visibleGlyphs = [];
	$('#logo img').each(function(){
		var id = $(this).attr('id');
		if (!$('#'+id+'-toggle').hasClass('off')) {
			visibleGlyphs[visibleGlyphs.length] = id;
		}
	});
	
	// save the glyphs that are visible, by id, comma separated
	$.cookie('visibleGlyphs', visibleGlyphs.join(','), { path: '/', expires: 0 });
}