<!--
/*!
 **************************************************
 * Copyright 2010 - Danny Carmical
 * http://luckykind.com
 **************************************************/

var $j = jQuery.noConflict();

$j(document).ready(function() {	

/**************************************************
 * Setup Initial Variables
 **************************************************/	
	
	var navBarHeight = $j(document).height() / 2;
	var navBG = $j('#nav-bg');
	var mainSec = $j('#main');
	var contentSec = $j('#content');
	var navItems = $j('#nav-items');
	var focusPad = 180;
	var focusSec = 'about';
	var focusWidth = navItems.width() - focusPad;
	var docWidth = $j(document).width();
	var portNav = $j('#slider');
	var portNavHelp = $j('#slider-container span');
	var portList = $j('#portfolio-images ul');
	var portImages = portList.children().size();
	

/**************************************************
 * Initial Setup
 **************************************************/	

	
	mainSec.height(navBarHeight);
	
	var sections = new Array();
	sections['about'] = ([$j('#about-nav'), $j('#about-icon'), $j('#about-nav a'), $j('#about-nav a span'), $j('#about-content')]);
	sections['portfolio'] = ([$j('#portfolio-nav'), $j('#portfolio-icon'), $j('#portfolio-nav a'), $j('#portfolio-nav a span'), $j('#portfolio-content')]);
	sections['services'] = ([$j('#services-nav'), $j('#services-icon'), $j('#services-nav a'), $j('#services-nav a span'), $j('#services-content')]);
	sections['contact'] = ([$j('#contact-nav'), $j('#contact-icon'), $j('#contact-nav a'), $j('#contact-nav a span'), $j('#contact-content')]);

	sections['about'][1].addClass('about-tab-on');			
	sections['portfolio'][1].addClass('portfolio-tab-off');			
	sections['services'][1].addClass('services-tab-off');			
	sections['contact'][1].addClass('contact-tab-off');				
	
	navBG.addClass('about-color-light');
	mainSec.addClass('about-color');
	
	adjustEdge();

	$j(window).bind("smartresize", function( event ) {
		adjustEdge();
		newSlider();
		contentSec.css('min-height', '450px');
	});
	
	// Add nav hover effect
	sections['about'][1].hover(
		function(){
			if(focusSec!='about') {
				$j(this).removeClass().addClass('about-tab-hover');			
			}
		},
		function(){
			if(focusSec!='about') {
				$j(this).removeClass().addClass('about-tab-off');			
			}
		}
	);

	sections['portfolio'][1].hover(
		function(){
			if(focusSec!='portfolio') {
				$j(this).removeClass().addClass('portfolio-tab-hover');			
			}
		},
		function(){
			if(focusSec!='portfolio') {
				$j(this).removeClass().addClass('portfolio-tab-off');			
			}
		}
	);

	sections['services'][1].hover(
		function(){
			if(focusSec!='services') {
				$j(this).removeClass().addClass('services-tab-hover');			
			}
		},
		function(){
			if(focusSec!='services') {
				$j(this).removeClass().addClass('services-tab-off');			
			}
		}
	);

	sections['contact'][1].hover(
		function(){
			if(focusSec!='contact') {
				$j(this).removeClass().addClass('contact-tab-hover');			
			}
		},
		function(){
			if(focusSec!='contact') {
				$j(this).removeClass().addClass('contact-tab-off');			
			}
		}
	);


/**************************************************
 * Section Change
 **************************************************/			
	sections['about'][1].click( function() {
		changeSection(focusSec, 'about');
	});
	sections['portfolio'][1].click( function() {
		changeSection(focusSec, 'portfolio');
	});
	sections['services'][1].click( function() {
		changeSection(focusSec, 'services');
	});
	sections['contact'][1].click( function() {
		changeSection(focusSec, 'contact');
	});


	function changeSection(current, focus){
		if(current!=focus) {
			sections[current][2].fadeOut(100, function(){
				sections[current][4].fadeOut(100, function(){
					if(focus=='portfolio'){
						$j(contentSec).css({'overflow' : 'hidden'});
					} else {
						$j(contentSec).css({'width' : '800px', 'overflow' : 'visible'});				
					}
				});			
			});
			
			
			sections[current][1].removeClass().addClass(current + '-tab-off');			
			sections[current][0].stop().animate({
				width : '60px'
			}, 400, function(){
				sections[focus][0].stop().animate({
					width : focusWidth
				}, 400);
				sections[focus][1].removeClass().addClass(focus + '-tab-on');			
				mainSec.fadeOut(100, function(){
					$j(this).removeClass().addClass(focus + '-color');
				}).fadeIn(500);
				sections[focus][2].fadeIn(200, function(){
					sections[focus][4].fadeIn(200);
				});
				sections[focus][3].hide();
				focusSec = focus;					
			});
			
			navBG.fadeOut(600, function() {
					$j(this).removeClass().addClass(focus + '-color-light');
				}).fadeIn(600);			
		}
	}

/**************************************************
 * Fix edge on window resize and show section
 **************************************************/			

	function adjustEdge(){
		focusWidth = navItems.width() - focusPad;
		if(focusWidth%2 == 0) {
			sections[focusSec][0].width(focusWidth);			
		} else {
			focusWidth -= 1;
			sections[focusSec][0].width(focusWidth);
		}
		sections[focusSec][2].fadeIn(500, function(){
			sections[focusSec][4].fadeIn(500);			
		});
		sections[focusSec][3].hide();
	}

/**************************************************
 * Portfolio slider
 **************************************************/
	makeSlider(docWidth);
	
	function makeSlider(dw) {
		// Get total size of all Portfolio Images/Padding
		var imageSizes = portImages * 300;
		var imagePad = portImages * 4;
		var portTotal = (imageSizes + imagePad) - dw;
				
		portNav.slider({
			min: 0,
			max: portTotal,
			step: 1,
			slide: function(event, ui) {		
				portNavHelp.hide();
				portList.stop().animate({
					right : ui.value
				}, 400);
			} 
		}); 		
	}
	
// Called on Browser Resize	
	function newSlider() {
		var newDocWidth = $j(document).width();
		portNav.slider( 'destroy' );		
		portList.stop().animate({
			right : 0
		}, 200);
		makeSlider(newDocWidth);
	}
	
	$j('#portfolio-images > ul > li > a').each(function(){
		$j(this).prepend('<span class="clicker-block"></span>');
	});
	
	$j('embed').attr('wmode', 'transparent');
	
	$j('#portfolio-images > ul > li > a').fancybox({'overlayColor'  : 'black',
												    'overlayOpacity': '0.7',
													'showCloseButton' : false,
													'hideOnContentClick': false,
													'overlayShow' : true
							  					   });
	
});
-->