$(document).ready(function(){
		

		//	preload images
		$.each(['/layout/overlay/black.png', '/layout/overlay/black.png'], function(){
			$('<img>').attr('src',this);
		});


	
		//	tag all a.enlarge elements the proper function
		$('a.enlarge').click(enlarge);



		//	setup any colapsibles
		$('div.collapsable').each( function() {
		
			//	pull the head out (first element)
			var $head = $(this).find(':first').replaceWith('').addClass('toggle');
			
			//	wrap the rest of the guts in a container div (for "sliding")
			$(this).wrapInner(	$(document.createElement('div'))
										.addClass('container')
										.css('display','none')
							);
						
			//	put the head back in
			$(this).prepend($head);

			$a = $(document.createElement('a')).attr('href',$head.text()+'/');

			$head.wrapInner($a);
						
			//	wrap the head in an anchor
			$head.find('a:first').click(function(e){
					e.preventDefault(); //	stop the links click event (don't load page)
					//	find and toggle the sidebar
					$sidebar = $(this).parents('div.collapsable').find('div.container');
					$sidebar.toggle('blind', { direction: 'vertical' }, 250);
					$(this).toggleClass('selected');
				});

		});

		
	});




	function swfRollHandler(e){
		$('#'+e.id)
			.mouseover(function(){ this.rootRollOver(); })
			.mouseout(function(){ this.rootRollOut(); });
	}
	function alignCredit(w){
		$('#video_credit').width(w);
	}


	function enlarge(e){
		
		
		//	get this event's calling anchor tag
		var $a = $(e.target);
		if( ! $a.hasClass('enlarge'))
		{
			$a = $a.parents('a.enlarge');
			if( ! $a.length) return true;
		}	

		e.preventDefault(); //	stop the links click event (don't load page)

		//	get the calling anchor's href
		var href = $a.get(0).href;
		if(href.indexOf('http://')==0){ href = href.substr(href.indexOf('/',8)); }
		
		//	find img element with source matching href
//		var $image = $a.parent().parent().find('img[src="'+href+'"]');
		var $image = $('#cartoon_img');	//	in 1.3, the [src=] selector seems to be broken

		//	enlarge it now...
		var $new_image = $(document.createElement('img')).load(function(){
	
			toggle_overlay();
			
			var $wrap		= $('#wrap'),
				wrap_width	= $wrap.innerWidth(),
				width		= $image.innerWidth(),
				offset		= $image.offset(),
				top			= offset.top+'px',
				left		= offset.left - $('#wrap').offset().left;

	
				if(left > wrap_width/2) {
					position = 'right';
					offset = (wrap_width-(left+width))+'px';
				} else {
					position = 'left';
					offset = left+'px';
				}
			
			
			var $enlarged = $(document.createElement('div'))
								.css({
									'position':		'absolute',
									'top':			top,
									'z-index':		'200',
									'width':		this.width+'px',
									'height':		this.height+'px',
									'line-height':	'0'
								})
								.css(position,offset)
								.attr('id','enlarged_image');
	

			$(this).css({'display':'none', 'border':'1px solid #333'});
			
			$enlarged.append($(this));
			
			$wrap.append($enlarged);
			
			self.setTimeout('$("div#enlarged_image img").fadeIn(250)', 150);
			
			$image.effect("transfer", { to: "div#enlarged_image" }, 200);
			
			
			
			//	image close handling
			$(document).bind('mousedown', function(e){
				var $target = $(e.target);
				var within = $target.attr('id')=='enlarged_image';
				var within = (within || $target.parents('div#enlarged_image').length) > 0 ? true : false;
				if( ! within)
				{
					$(document).unbind('mousedown');
					toggle_overlay();
					$('div#enlarged_image').remove();
				}
			});

		});
		$new_image.attr('src',href);
		
		
		}










	
	function toggle_overlay(type){
		
		//	overlay is too intensive for poor ie.. skip it
		if($.browser.msie) return false;
		
		if($('#overlay').length > 0) {
			$('#overlay').remove();
			return true;
		}
		
		if(!type) type = 'white';
		
		var $wrap	= $('#wrap'),
			width	= $wrap.innerWidth(),
			height	= $wrap.innerHeight(),
			top		= $('#content').offset().top,
			margin	= $('#content').css('margin-top');
				
		//if(margin.endsWith('px'))
		margin = margin.substr(0,margin.length-2);		
		top -= margin;


		var $overlay = $(document.createElement('div'))
							.css({
								'top':		top+'px',
								'position':	'absolute',
								'z-index':	'100',
								'height':	(height-top)+'px',
								'width':	width+'px',
								'display':	'none'
							})
							.attr('class','overlay_'+type)
							.attr('id','overlay');

		$wrap.append($overlay);
	
		$overlay.show();
		
	}