$(function(){
	
	// set up backgrounds
	if ($('#main').hasClass('home'))		
		$('html').addClass('home-bg');		
	else if ($('#main').hasClass('about'))
		$('html').addClass('about-bg');
	else if ($('#main').hasClass('service'))
		$('html').addClass('service-bg');
	else if ($('#main').hasClass('work'))
		$('html').addClass('work-bg');
	else if ($('#main').hasClass('contact'))
		$('html').addClass('contact-bg');
	else if ($('#main').hasClass('port'))
		$('html').addClass('port-bg');
	else if ($('#main').hasClass('work-content'))
		$('html').addClass('work-content-bg');			
	
	$('a:not(#submenu a)').each(function(){
		
		var c = $(this).css('color');
		$(this).hover(
			function(){
				$(this).stop(true).animate({'color':'#969696'}, 300);
			},
			function(){
				$(this).stop(true).animate({'color':c}, 500);			
			}
		);		
	})
	
	$('#nav a').each(function(){
		var c = $(this).css('color');
		$(this).hover(
			function(){
				$(this).stop(true).animate({'color':'#00a7eb'}, 300);
			},
			function(){
				$(this).stop(true).animate({'color':c}, 500);			
			}
		);		
	});	
	
	/* submenu */
	if ($('#submenu li.current').length){		
		var arrow = $('<div class="subarrow"></div>');
		
		arrow.css({	
			'position':'absolute',
			'top': $('#submenu li.current').position().top
		});
		$('#submenu').append(arrow);
		
		$('#submenu li').hover(
			function(){
				arrow.stop(true).animate({
					'top' : $(this).position().top
				}, 300, 'easeOutQuad');
			},
			function(){
				arrow.stop(true).animate({
					'top': $('#submenu li.current').position().top
				}, 500);
			}
		);
	}
	
	
	/* banner */
	var next = 1;
	var prev = 0;
	var timer = null;
	var li = [];
	var texts = [];
	var banners = [];	
	var interval = 7;
	var transaction_speed = 1;
	var hover = false;
	
	$('#banner').css('position','relative');
	$('#banner li').css({'display':'block', 'position':'absolute','top':'0px','left':'0px','z-index':0});
	$('#banner li h1').css({'opacity':0});		 
	$('#banner li .banner').css({'opacity':0});
	
	var loading = $('<div class="loading"></div>');
	loading.css({'top':'50%', 'left':'50%','position':'absolute','margin-left':'-16px','margin-top':'-16px'});
	$('#banner').append(loading);
	
		
	// insert nav
	
	
	var nav_left = $('<div class="nav-left"></div>');
	var nav_right = $('<div class="nav-right"></div>');
	nav_left.css({
		'padding':'0px',
		'position':'absolute',
		'top':'220px',
		'z-index':5,
		'left':'0px',
		'cursor':'pointer',
		'display':'none'	
	});
	nav_right.css({
		'padding':'0px',
		'position':'absolute',
		'top':'220px' ,
		'z-index':5,
		'left':'735px',
		'cursor':'pointer',
		'display':'none'
	});	
	$('#banner').append(nav_left);
	$('#banner').append(nav_right);
	
	
	var imgs = [];
	$('#banner img').each(function(){
		imgs.push($(this).attr('src'));
	});	
	
	
	// preload images
	$.loadImages(imgs, function(){
		// animation start
		loading.remove();	
		
		$('#banner li').each(function(){
			li.push($(this));
			texts.push($(this).find('h1').first());
			banners.push($(this).find('.banner').first());				
		});		
				
		// animate first
		texts[0].stop(true).animate({'opacity':1}, transaction_speed*1000);
		banners[0].stop(true).delay(700).animate({'opacity':1}, transaction_speed*1000, function(){
			nav_left.css({'display':'block'});
			nav_right.css({'display':'block'});
		});
		banners[0].parent().css('z-index',1);	
		
		if (!hover) start_banner_loop();		
	});
	
	// start banner loop
	function start_banner_loop(){		
		clearInterval(timer);	
		
		timer = setInterval(function(){
		texts[prev].stop(true).animate({'opacity':0}, transaction_speed*1000);
		texts[next].stop(true).animate({'opacity':1}, transaction_speed*1000);
		banners[prev].stop(true).delay(700).animate({'opacity':0}, transaction_speed*1000);
		banners[prev].parent().css('z-index',0);
		banners[next].stop(true).delay(700).animate({'opacity':1}, transaction_speed*1000);
		banners[next].parent().css('z-index',1);
			
		next = (next==li.length-1)? 0 : next+1;		
		prev = (prev==li.length-1)? 0 : prev+1;			
		}
		,
		interval*1000);
	}
	
		

	//nav hover	
	$('#banner').hover(
		function(){
			hover = true;			
			//pause the anim
			clearInterval(timer);			
		},
		function(){	
			hover = false;			
			// resume the anim
			start_banner_loop();
		}
	);
	
		
	
	nav_left.click(function(){
		clearInterval(timer);
				
		texts[prev].stop(true).animate({'opacity':0}, transaction_speed*1000);
		banners[prev].stop(true).delay(0).animate({'opacity':0}, transaction_speed*1000);
		banners[prev].parent().css('z-index',0);
		
		var prev_back = prev-1;
		if (prev_back==-1) prev_back = li.length-1;
				
		 texts[prev_back].stop(true).animate({'opacity':1}, transaction_speed*1000);
		 banners[prev_back].stop(true).delay(0).animate({'opacity':1}, transaction_speed*1000);
		banners[prev_back].parent().css('z-index',1);
		
		prev = prev_back;
		next = prev_back+1;
		if (prev==li.length) prev = 0;
		if (next==li.length) next = 0;
		
		if (!hover) start_banner_loop();	
	});
	
	nav_right.click(function(){
		clearInterval(timer);
				
		texts[prev].stop(true).animate({'opacity':0}, transaction_speed*1000);
		banners[prev].stop(true).delay(0).animate({'opacity':0}, transaction_speed*1000);
		banners[prev].parent().css('z-index',0);
		
		var nextnext = prev+1;
		if (nextnext == li.length) nextnext = 0;
						
		 texts[nextnext].stop(true).animate({'opacity':1}, transaction_speed*1000);
		 banners[nextnext].stop(true).delay(0).animate({'opacity':1}, transaction_speed*1000);
		banners[nextnext].parent().css('z-index',1);
		
		prev = nextnext;
		next = prev+1;
		if (prev==li.length) prev = 0;
		if (next==li.length) next = 0;
		if (!hover) start_banner_loop();	
	});
	
	
	
	
	
	// work menu mouse over	 
	$('.work li a').each(function(){
		
		$(this).parent().css('position','relative');
		
		var shade = $('<div></div>');
		shade.css({
			width:'200px',
			height:'200px',
			background:'#000',
			opacity:0,
			position:'absolute',
			top:'0px',
			left:'0px'
						
		});
				
		$(this).append(shade); 
		
		$(this).hover(
			function(){
				shade.stop(true).animate({
					'opacity':.5
				}, 100);
			},
			function(){
				shade.stop(true).animate({
					'opacity':0
				}, 400);
		});
		
	});
	
	
	// port folio thumbs mouse over
	$('.port li').each(function(){
		var title = $(this).find('h3');
		var desc = $(this).find('p');
		
		title.css('opacity',0);
		desc.css('opacity',0);
		
		var shade = $('<div></div>');
		shade.css({
			width:'200px',
			height:'200px',
			background:'#000',
			opacity:0,
			position:'absolute',
			top:'0px',
			left:'0px'
		});
		
		$(this).prepend(shade);
		
		$(this).hover(
			function(){
				shade.stop(true).animate({
					'opacity':.7
				}, 200);
				title.stop(true).delay(200).animate({
					'opacity':1
				}, 400, 'easeOutQuad');
				desc.stop(true).delay(200).animate({
					'opacity':1
				}, 400, 'easeOutQuad');
			},
			function(){
				desc.stop(true).animate({
					'opacity':0
				}, 600);
				shade.stop(true).delay(200).animate({
					'opacity':0
				}, 600);
				title.stop(true).delay(200).animate({
					'opacity':0
				}, 600);
				
			}
		);	
		
		
	});
	
	
	
	// work-content page back to the top scroll button
	 var scrolltotop = $('<div>∧ BACK TO TOP</div>');
	 scrolltotop.css({
		 'color' : '#bcbec0',
		 'font-weight':'bold',		 
		 'position' : 'absolute',
		 'bottom' : '25px',
		 'left' : '694px',
		 'width' : '120px',
		 'cursor' : 'pointer',
		 'padding' : '10px'
	 });
	 
	 scrolltotop.hover(function(){
		 $(this).stop(true).animate({'color':'#00a7eb'}, 300);
	 },
	 function(){
		 $(this).stop(true).animate({'color':'#bcbec0'}, 500);	
	 });
	 
	 scrolltotop.click(function(){
		 $('html, body').animate({ scrollTop:0 }, 'slow');
	 });	 
	
	 
	 $('.work-content .content').append(scrolltotop);
	
	
});