$(document).ready(function(){

	$('#who, #what, #worked').css('visibility','hidden');

});
window.onload = function(){

	$().designedbyian();

};



(function($){


	$.fn.designedbyian = function(settings){
	
	
		/*
			Options
		*/
		settings = jQuery.extend({
			sectionIniWidth:200
		}, settings);
		
		
		/*
			Variables
		*/
		var contentSettings = {
			'who':{
				'width':0,
				'innerWidth':0,
				'easing':'easeOutBack'
			},
			'what':{
				'width':0,
				'innerWidth':0,
				'easing':'easeOutBack'
			},
			'worked':{
				'width':0,
				'innerWidth':0,
				'easing':'easeOutExpo'
			}
		};
		var openElCount = 0;
		
		
		/*
			Methods
		*/
		var initialise = function()
		{
			// Set contentSettings for each content div.
			$('#who, #what, #worked').each(function(){

				id = $(this).attr('id');
				contentSettings[id].width = $(this).width()-2;
				contentSettings[id].innerWidth = $('div.inner', this).width();
				
				$(this).css('overflow', 'hidden');
				$('div.inner', this).width(contentSettings[id].width);
			
			});
			// Hide the content.
			$('#who, #what, #worked').css({
				display:'none',
				visibility:''
			});


			// Events for introduction links.
			$('#header .intro a').click(function(){
				expandContent($(this).attr('href'));
			});
			
			
			// Add click event for logo (to close all open panels)
			$('#header h1').click(function(){
				closeContent('#who:visible, #what:visible, #worked:visible');
			}).hover(
				function(){ $(this).css('cursor','pointer'); },
				function(){  }
			);
			
			
			// Add event for window resize.
			window.onresize = function(){ setContentWidths(); }
			
			$('#header p.line, #who h2, #what h2, #worked h2').css('opacity', 0.2);
		}
		
		
		var setContentWidths = function()
		{
			// Reset stored width and inner width for each visible panel.
			$('#who:visible, #what:visible, #worked:visible').each(function(){
			
				id = $(this).attr('id');
				contentSettings[id].width = $(this).width();
				contentSettings[id].innerWidth = $('div.inner', this).width();
			
			});
			
			// Reset stored width and inner width for each hidden panel.
			$('#who:hidden, #what:hidden, #worked:hidden').each(function(){
			
				id = $(this).attr('id');
			
				$(this).css({
					visibility:'hidden',
					display:''
				});
				
				contentSettings[id].width = $(this).width();
				contentSettings[id].innerWidth = contentSettings[id].width;
				
				$(this).css({
					visibility:'',
					display:'none'
				});
			
			});
		}
		
		
		var expandContent = function(el)
		{		
			// If the element isn't hidden, show it...
			if($(el+':visible').length==0){

				el = $(el);
				id = el.attr('id');
				elEasing = (openElCount==2) ? 'easeOutExpo' : 'easeOutBack'; // If there are 2 (of 3) elements open, change the easing to avoid any weird jumping around.

				openElCount++;
				el.width(0);
				$('div.inner', el).width(contentSettings[id].width);
				el.css('visibility','visible');

				el.animate({
						width:contentSettings[id].width
					},{
						easing:elEasing,
						duration:500,
						complete:function(){
							el.css('width', '');
							$('.inner', this).width('');
						}
					}
				);
			
			}
			// ... otherwise, hide it!
			else{
				closeContent(el);
			}
		}
		
		
		var closeContent = function(el)
		{
			// Close each visible content div.
			$(el).each(function(i){

				// Fix the width of the inner div.
				$('div.inner', this).width($('div.inner', this).width());

				$(this).animate({
						width:0
					},{
						easing:'easeOutExpo',
						duration:500,
						complete:function(){
							$(this).hide();
							$(this).width('');
						}
					}
				);
				
				openElCount--;
				
			});
		}
		
		
		initialise();
	
	
	}
	
	
})(jQuery);