$(document).ready(function(){

$('body').css( {'padding-bottom' : '8em'});

$('div.dsect').hide(); // Hide all the windows until they're ready
	
$('#index').html(' '); // clean the index

  $('div.dsect').children('h1').css({'cursor':'pointer'});
  $('div.dsect').children('h1').attr('title','Click to open');
  $('div.dsect').children('.description-short, .description-long').attr('title','Click the section names to browse.');

  $('div.dsect').children('h1').createTips = new function ()
	{	// A tooltip like that is no trivial thing. Without special structures in the page, it takes a bit to build.
		$(this).nextAll('h4.description-long').wrap('<div></div>');
		$(this).nextAll('div h4.description-long').append('<ul></ul>');
		
		for (var i = 0; i < $(this).nextAll('ul').children('li.awesome').length; i++)
			{ $(this).nextAll('div h4.description-long')
					.children('ul')
					.append($(this).nextAll('ul').children('li.awesome').eq(i)); 
				}
		$(this).nextAll('div h4.description-long').css({'display':'none'});
		// alert('woot');
	};
/*Ok, this part right below is simply atrocious - it staples CSS styles onto the page, overwriting, conflicting and glitching things into submission.
Maybe one of these days I may be persuaded to move this to the stylesheet file, but for now, it's going to stay here. It is quite handy, since it's 
what I work with when I'm editing this file. It's just that it looks so ugly in the debugger.*/
  $('div.dsect').children('h1').click( function()
    {
		var target = $(this).parent() ;
		
       if ( target.css('display') == 'none' )	// Only called ONCE. You cant click h1 when its hidden, can you ?
		{

		/*	I KNOW! I'll do this in an elegant way as soon as someone points this out to me.
			There's no way I'm rewriting this crap with nobody forcing me to do it. */
		
		target.css( { 	'opacity' : '0.75',
					 	'float' : 'none',
					 	'margin' : '8pt',
//					 	'margin-left' : '12em',
					 	'width' : '45%',
					 	'border' : 'none',
						'display' : 'block'} );
						
		target.children('h1').css( {'float' : 'none',
									'font-size':'14pt',
									'margin' : '4pt',
									'margin-left' : '1em',
									'width' : '24em',
									'display' : 'block'} );

		target.children('h2').css( {'float' : 'none',
									'font-size':'12pt',
									'font-weight':'normal',
									'opacity' : '0.75',									
									'margin' : '6pt 1px 0px 2em',
									'width' : 'auto',
									'display' : 'block'} );
						
		target.children('ul').css( { 	'opacity' : '0.7',
									'float' : 'none',
									'margin' : '1pt',
									'width' : 'auto',
									'display' : 'block'} );
		target.children('ul, h4').css( { 	'margin-left' : '2.5em' } );
		target.children('h3').css( { 	'margin-left' : '3em' } );

						
		target.children('h1, h2, h3').css( { 	'background-color' : '#470D0D',
												'font-family':'Verdana,Arial,Helvetica,sans-serif',
												'background-image' : 'none' } );

		target.children('h3.description-short').css( {
									'font-size':'8pt',
									'margin' : '-8pt 4pt 0pt 4em',
									'opacity':'0.7',
									'width' : '38em',
									'background-color' : '#6d2a18',
									'border' : '1px black solid',
									'display' : 'block'
									} );
									
		target.children('h4.description-long').css( {
									'float' : 'right',
									'position':'absolute',
									'font-size':'10pt',
									'right':'4em',
									'margin-bottom' : '-28em',
									'margin-top' : '-4em',
//									'margin' : '-5em 1em -14em 38em',
									'padding' : '4pt',
									'width' : '30em',
//									'height' : 'auto',
									'background' : '#000',
									'border' : '1px #470d0d solid',
									'display' : 'block'
									} );

												
		target.children().not('h1').slideUp('fast');

		//target.children('h1').fadeIn('fast');

		$(this).mouseover( function() 
			{	// Only if ALL h1 tabs are closed do we display the tooltip.
				if ( 	$('.dsect').children('h1')	
						.filter(function (index) {	
								return  this.folded == false; }).length == 0 )					
				{
						$('.dsect').children('h4.description-long').hide(200);	
						$(this).nextAll('h4.description-long').fadeIn(220);
						
				}
				else
				{
						$('.dsect').children('h4.description-long').hide();	
				}

			if (this.folded == true) 
				{
					$(this).nextAll('.description-short').animate({opacity:'1.0'}, 180);
					$(this).animate({'opacity':'1.0'}, 180);
				}
			else
				{
					// buhahahahaaa
				}

			} );

		$(this).mouseout( function() 
			{
			
				if (this.folded == true) 
					{
						$(this).nextAll('.description-short').animate({opacity:'0.6'}, 300);
						$(this).animate({'opacity':'0.8'}, 180);
					}
				else
					{
						// nothing
					}
			
			} );
			
		// Generate the tooltip

		$(this).nextAll('.description-long').append('<p>Recommended items:</p>');
		$(this).nextAll('.description-long').append('<ul></ul>');
		
		for (var i = 0; i < $(this).nextAll('ul').children('li.awesome').length; i++)
			{
				$(this).nextAll('ul').children('li.awesome').eq(i).clone()
					.appendTo( $(this).nextAll('h4.description-long').children('ul') ); 
			}
		
		// finishing, simulate the folded state:
		$(this).nextAll('.description-short').slideDown(280);
		
		this.folded = true;
		
		}
       else	if ( this.folded == false )
		{
		this.folded = true;
		$(this).attr('title','Click to open')
		
		target.css( { 'opacity' : '0.75'} );
//		$(this).css( { 'border-right' : 'none'} );

		if($.browser.msie)
			{
			target.children().not('h1').fadeOut(280);
			$(this).nextAll('.description-short').fadeIn(280);					
			}
		else
			{
			target.children().not('h1, h2').fadeOut(280);

			for (var i = 0; i < target.children('h2').length ; i++)
				{
				target.children('h2').eq(i).hide(240 +(12*i*i)+ 8*i);
				}
			$(this).nextAll('.description-short').slideDown(280);		
			}

//		target.css( opacity = '0.5' );
		//$('html,body')	.animate({scrollTop: 0}, 700);
		}
		else
		{
		this.folded = false;
		$(this).attr('title','Click to close')
		
		target.css( { 'opacity' : '1'} );
//		$(this).css( { 'border-right' : 'thick solid #611'} );

		if($.browser.msie)
		{
		$('.dsect').children('.description-long').fadeOut(360);
		$(this).nextAll('.description-short').fadeOut(360);

		for (var i = 0; i < target.children('h2').length; i++)
			{
			target.children('h2').eq(i).fadeIn(200 +(12*i*i)+ 80*i);
			}		
		}
		else
		{
		$('.dsect').children('h4.description-long').hide(280);
		$(this).nextAll('.description-short').slideUp(280);

		for (var i = 0; i < target.children('h2').length; i++)
			{
			target.children('h2').eq(i).fadeIn(200 + 80*i);
			}
		}

		}
      }
    );

  $('div.dsect').children('h2').css({'cursor':'pointer'});
  $('div.dsect').children('h2').click( function()
    {
		var target = $(this).parent() ;
		
		if ( this.folded == false )
		{
		this.folded = true;
		// checks if any tabs are unfolded. this is how:
		if ( 	$(this).siblings('h2')				// grabs all h2 siblings
				.filter(function (index) {			// runs them through a function
						return  this.folded == false; // that only returns ones with folded = false
										} )
				.length == 0)					// And checks if we got any h2 back. If so - there's at least one unfolded tab.
		{target.css( { 'width' : '45%'} ); }		// Otherwise revert the lost to the smaller size. Maybe do some cool thing in the future.
		
		
		
		$(this).css( { 'opacity' : '0.75'} );
		
		    if ( $(this).nextAll('h2').length > 0 )	// if there are no more h2 headers in this div - unfold all that remains.
			{
				var cunt = 1; // yes, that's cunt, not count. My finger slipped, and of fear it might slip again, i left it alone.
				//	if the n-th element after this one isn't a h2, n++. Or maybe the cunt-th element.
				while ( !$(this).nextAll().eq(cunt).is('h2') )
				{ cunt++; }
				
				$(this).nextAll(":lt("+cunt+")").not('h2').hide(80);
			}
			else
			{
				$(this).nextAll().not('h2').hide(80);
			}

		// target.children('h2').fadeIn('fast');	// Was this ever needed ?
		}
		else
		{
			this.folded = false;
			
			target.css( { 'width' : '60%'} );	
			$(this).css( { 'opacity' : '1'} );

			// Unfolding trick: :D
		    if ( $(this).nextAll('h2').length > 0 )
			{
				var cunt = 0; // yes, that's cunt, not count. My finger slipped, and of fear it might slip again, i left it alone.
				//	if the n-th element after this one isn't a h2, n++. Or maybe the cunt-th element.
				while ( !$(this).nextAll().eq(cunt).is('h2') )
				{ cunt++; }
				
				// show cunt elements
				$(this).nextAll(":lt("+cunt+")").show(80);
			}
			else
			{
				$(this).nextAll().show(80);
			}
		
		}
      }
    );

/*	
  $('div.dindex').children('h1').children('a').click( function()
    {
		var target = $( $(this).attr('href') );
		
       if ( target.css('display') != 'none' )
		{
		target.fadeOut('slow');
		$('html,body')	.animate({scrollTop: (target.offset().top)}, 20)
						.animate({scrollTop: (target.offset().top - 10)}, 200)
						.animate({scrollTop: 0}, 500);
		}
		else
		{
		target.fadeIn('fast');
		$('html,body').animate({scrollTop: (target.offset().top - 10)}, 120);
		}
      }
    );

  
  $('div.dindex').children('ul').children('li').children('a').click( function()
    {
		if ($(this).parent().parent().parent().attr('id') != 'other')
		{
		// 							<a>		<li>		<ul>		<div>		<h1>				<a>
			var target = $( $(this).parent().parent().parent().children('h1').children('a').attr('href') );
			var target2 = $( $(this).attr('href') );

	        if (target.css('opacity') == '0.5') 		
				{
					target.css( { 'opacity' : '1'} );
					target.children().fadeIn('fast');
				}
	        
	        if ( target.css('display') == 'none' ) target.fadeIn('fast');
	        
			$('html,body').animate({scrollTop: (target2.offset().top - 30)}, 480)

			target2.animate( { opacity:"0.5"}, 100 )
	         .animate( { opacity:"1" } , 325 ).animate( { opacity:"0.7"}, 200 )
	         .animate( { opacity:"1" } , 350 ).animate( { opacity:"0.8"}, 300 )
	         .animate( { opacity:"1" } , 400 );
		}
		else
		{
		var target = $( $(this).attr('href') );
        if ( target.css('display') == 'none' ) target.fadeIn('fast'); else target.fadeOut('slow') ;
		$('html,body').animate({scrollTop: (target.offset().top - 10)}, 120)		
		}
      }
	  );
*/
//$('div.dsect').children('h1').createTips();
$('.dsect').children('h1').click();
$('body').css({'height':'120%'});
$('.dsect').eq($('.dsect').length - 1).css({'margin-bottom':'100px', 'padding-bottom':'100px'});

if (window.unfold === undefined)	// unfold a selected section at start
	{
	false;
	}
else
	{
		if (unfold != '')
			{
			$('#'+unfold).children('h1').click();
			//$('#'+unfold).children('h1, h2').click();	<- This can be used to unfold EVERYTHING in the section. Comes out too confusing to be usful.
			}
	}

/*$('#index').html(
	'<h1> Other Stuff </h1>'+
	'<p> [<a href="">Archives</a>] '+
	'[<a href="" title="Alternate download page">The Wall</a>] </p>'
	);
$('#index').fadeIn('slow');*/
});