$(document).ready(function() {

    $("img.on").live({
        mouseenter:
            function() {
            $(this).stop().animate({"opacity": "0"}, "slow");
            },
        mouseleave:
            function() {
            $(this).stop().animate({"opacity": "1"}, "slow");
            }
        }
    );
    $("img.over").live({
        mouseenter:
            function() {
            $(this).stop().animate({"opacity": "1"}, "slow");
            },
        mouseleave:
            function() {
            $(this).stop().animate({"opacity": "0"}, "slow");
            }
        }
    );

	// if we're on a portfolio page, dim the things
	
	// name
	if($(".contact-form #input_1_7").length > 0){

		$(".contact-form #input_1_7").focus(function(){
			if($(".contact-form #input_1_7").val() == 'Name *'){
				$(".contact-form #input_1_7").val('');
			}
		});
		
		$(".contact-form #input_1_7").blur(function(){
			if($(".contact-form #input_1_7").val() == ''){
				$(".contact-form #input_1_7").val('Name *');
			}
		});

	}
	
	// email
	if($(".contact-form #input_1_3").length > 0){

		$(".contact-form #input_1_3").focus(function(){
			if($(".contact-form #input_1_3").val() == 'Email *'){
				$(".contact-form #input_1_3").val('');
			}
		});
		
		$(".contact-form #input_1_3").blur(function(){
			if($(".contact-form #input_1_3").val() == ''){
				$(".contact-form #input_1_3").val('Email *');
			}
		});

	}
	
	// telephone
	if($(".contact-form #input_1_4").length > 0){

		$(".contact-form #input_1_4").focus(function(){
			if($(".contact-form #input_1_4").val() == 'Telephone *'){
				$(".contact-form #input_1_4").val('');
			}
		});
		
		$(".contact-form #input_1_4").blur(function(){
			if($(".contact-form #input_1_4").val() == ''){
				$(".contact-form #input_1_4").val('Telephone *');
			}
		});

	}
	
	//message
	if($(".contact-form #input_1_8").length > 0){

		$(".contact-form #input_1_8").focus(function(){
			if($(".contact-form #input_1_8").val() == 'Message *'){
				$(".contact-form #input_1_8").val('');
			}
		});
		
		$(".contact-form #input_1_8").blur(function(){
			if($(".contact-form #input_1_8").val() == ''){
				$(".contact-form #input_1_8").val('Message *');
			}
		});

	}

	var backgrounds = Array('strategy', 'ux', 'design', 'development' , 'search', 'social', 'digital');


	function mycarousel_itemVisibleInCallback(carousel, li, position, state){
		//alert(position);
		$("#carousel #background #innerbackground").fadeOut('slow', function(){
			$("#carousel #background #innerbackground").attr('class', backgrounds[position-1]);
			$("#carousel #background #innerbackground").fadeIn('slow');
		});
		

		$(".jcarousel-control a").each(function(){

			if($(this).parent().attr('class').indexOf('last') > -1){
				var extra = ' last';
			}else{
				var extra = '';
			}

			if($(this).parent().attr('class').indexOf(' ') > -1){
				var className = $(this).parent().attr('class').split(' ');
				className = className[0];
			}else{
				var className = $(this).parent().attr('class');
			}

			if(className.indexOf('-sel') > -1){
				$(this).parent().attr('class', className.replace('-sel', ''));
			}

			if($(this).attr('rel') == position){
				$(this).parent().attr('class', className+'-sel'+extra);
			}
		});

	}

	/**
	 * We use the initCallback callback
	 * to assign functionality to the controls
	 */
	function mycarousel_initCallback(carousel) {
		 jQuery('.jcarousel-control a').bind('click', function() {
			carousel.scroll(jQuery.jcarousel.intval(jQuery(this).attr('rel')));
			return false;
		});
	
	};
	
	// Ride the carousel...
	$("#carousel").jcarousel({
		scroll: 1,
		//initCallback: mycarousel_initCallback,
		// This tells jCarousel NOT to autobuild prev/next buttons
		auto: 9,
        wrap: 'both',
		animation: 'slow',
		itemVisibleInCallback: {onBeforeAnimation: mycarousel_itemVisibleInCallback}
	});
	
	
	// clients filter scripps
	
	$clientsHolder = $('ul.clients'); // get original list
	$clientsClone = $clientsHolder.clone(); // clone it so it can be reverted back to
	
	$('.filterClients a').click(function(e) {
		e.preventDefault(); // stop anchor tags from doing anything
		
		$filterClass = $(this).attr('class'); // gets class from clicked anchor
		
		$('.filterClients li').removeClass('active'); // remove active class from all filter links
		$(this).parent().addClass('active'); // add active class to clicked link
		
		if($filterClass == 'all'){
			$filters = $clientsClone.find('li'); // get all li's from original cloned list and assign them to variable
		} else {
			$filters = $clientsClone.find('li[data-type~='+ $filterClass +']'); // get li's from ul.source with data-type containing $filterclass
		}
		
		$clientsHolder.quicksand($filters, {
			duration: 1000,
			easing: 'easeInOutQuint',
			adjustHeight: 'dynamic'
		}); // initiate quicksand fn
	});
	
	
	function resetStage() {
		var r = setTimeout(function() {
			dmBanner();
		}, 10000);
	}
	
	function dmBannerInit() {
		
		function bokeh() {
			$(".bokeh").animate({
				opacity: 1
			}, 7000);				
		}		
		
		function slideText() {
			$(".where").animate({
				opacity: 1,
				left: 320
			}, 1000, 'easeInOutQuad');
			
			$(".where").animate({
				left: 370
			}, 4000, 'linear');
			
			$(".where").animate({
				left: 970,
				opacity: 0
			}, 500, 'easeOutQuad');
			
			$(".meets").delay(500).animate({
				opacity: 1,
				left: 350
			}, 1000, 'easeInOutQuad');
			
			$(".meets").animate({
				left: 220
			}, 3500, 'linear');
			
			$(".meets").animate({
				left: -300,
				opacity: 0
			}, 500, 'easeOutQuad', function() {
				showLogo();
			});
		}
			
		function showLogo() {
			$(".dmlogo").animate({
				opacity: 1	
			}, 1000, 'easeInOutQuint');
			
			$(".digitalmill").delay(200).animate({
				opacity: 1	
			}, 1000, 'easeInOutQuint', function() {
				resetStage();
			});
		}
		
		bokeh();	
		slideText();	
	}
	
	function dmBanner() {
		
		$(".dmlogo, .digitalmill").animate({
			opacity: 0
		}, 500);
		
		$(".where").css({ left: -259 });
		$(".meets").css({ left: 961 });	
		
		dmBannerInit();
	}
	
	dmBanner();
	
});