/* Cufon */

Cufon.replace('.menu', { hover: true });
Cufon.replace('#home a', { hover: true });
Cufon.replace('h1');
Cufon.replace('h2');
Cufon.replace('h3');
Cufon.replace('.font');

$(document).ready(function() {

function resizer() {

	$('#slides li').css({'height':(($(window).height())-110)+'px'});
	
	$('#slides li.image img').css({'height':(($(window).height())-110)+'px'});
	
	var aspecti = $(window).width();
	
	var aspect = aspecti / 1.777;
	
	var aspectio = (($(window).height())-110);
	
	var aspecto = aspectio * 1.777;
	
	$('.video-wrapper').css('width', aspecto);
	
	$('#slides .vid').css({'width':($(window).width())+'px'});
	
	$('.bg').resizenow();
}

resizer();

$(window).resize(function() {

resizer();

delay(function(){
$("#slides").scrollTo('.sec:in-viewport:first', 500, {axis:'x'});
setTimeout(function(){ resetValue(); }, 600);
}, 500);

});


delay(function(){
$("#slides").scrollTo('.sec:in-viewport:first', 500, {axis:'x'});
setTimeout(function(){ resetValue(); }, 600);
}, 800);


/* Scroll */

if (!!('ontouchstart' in window)) {
	$('#scroll').touchScroll();
}

/* Main Nav */

$(".menu a").hover(
  function () {
    $('.menu a').not(this).stop().fadeTo('180',0.6);
  }, 
  function () {
    $('.menu a').not(this).stop().fadeTo('180',1.0);
  });
  
  
/* Tabs */
  
$('#tab1').show();
$('.tab1').addClass('on');
 
$('.tab1').click(function() {
	$('#tabwrap .tab,.bg-two,.bg-three,.bg-four,.bg-five').hide();
	$('#tab1,.bg-one').fadeIn(200);
	$('.tabnav a').removeClass('on');
	$('.tabnav a.tab1').addClass('on');
	$('.tabnav a').not('.on').stop(true, true).animate({ color: '#666'}, 300);
});
 
$('.tab2').click(function() {
	$('#tabwrap .tab,.bg-one,.bg-three,.bg-four,.bg-five').hide();
	$('#tab2,.bg-two').fadeIn(200);
	$('.tabnav a').removeClass('on');
	$('.tabnav a.tab2').addClass('on');
	$('.tabnav a').not('.on').stop(true, true).animate({ color: '#666'}, 300);
});
 
$('.tab3').click(function() {
	$('#tabwrap .tab,.bg-one,.bg-two,.bg-four,.bg-five').hide();
	$('#tab3,.bg-three').fadeIn(200);
	$('.tabnav a').removeClass('on');
	$('.tabnav a.tab3').addClass('on');
	$('.tabnav a').not('.on').stop(true, true).animate({ color: '#666'}, 300);
});

$('.tab4').click(function() {
	$('#tabwrap .tab,.bg-one,.bg-two,.bg-three,.bg-five').hide();
	$('#tab4,.bg-four').fadeIn(200);
	$('.tabnav a').removeClass('on');
	$('.tabnav a.tab4').addClass('on');
	$('.tabnav a').not('.on').stop(true, true).animate({ color: '#666'}, 300);
});

$('.tab5').click(function() {
	$('#tabwrap .tab,.bg-one,.bg-two,.bg-three,.bg-four').hide();
	$('#tab5,.bg-five').fadeIn(200);
	$('.tabnav a').removeClass('on');
	$('.tabnav a.tab5').addClass('on');
	$('.tabnav a').not('.on').stop(true, true).animate({ color: '#666'}, 300);
});


/* Our work */

$('#all').click(function() {

$('.branding, .comms, .packaging').fadeTo('fast',1.0);

$('.branding, .comms, .packaging').animate({ backgroundColor: "#4a4843" }, "fast");

$('.branding .inner, .comms .inner, .packaging .inner').animate({ backgroundColor: "#000", color: "#fff" }, "fast");

$('#comms, #packaging, #branding').removeClass('on');
$('#all').addClass('on');

$('.submenu a').not('.on').stop(true, true).animate({ color: '#666'}, 300);

});

$('#branding').click(function() {

$('.branding').fadeTo('fast',1.0);
$('.branding').animate({ backgroundColor: "#fe2d67" }, "fast");
$('.branding .inner').animate({ backgroundColor: "#e6e6e6", color: "#000" }, "fast");

$('.comms, .packaging').fadeTo('fast',0.5);
$('.comms, .packaging').animate({ backgroundColor: "#4a4843" }, "fast");
$('.comms .inner, .packaging .inner').animate({ backgroundColor: "#000", color: "#fff" }, "fast");

$('#all, #packaging, #comms').removeClass('on');
$('#branding').addClass('on');

$('.submenu a').not('.on').stop(true, true).animate({ color: '#666'}, 300);

});

$('#packaging').click(function() {

$('.packaging').fadeTo('fast',1.0);
$('.packaging').animate({ backgroundColor: "#fe2d67" }, "fast");
$('.packaging .inner').animate({ backgroundColor: "#e6e6e6", color: "#000" }, "fast");

$('.branding, .comms').fadeTo('fast',0.5);
$('.branding, .comms').animate({ backgroundColor: "#4a4843" }, "fast");
$('.branding .inner, .comms .inner').animate({ backgroundColor: "#000", color: "#fff" }, "fast");

$('#all, #branding, #comms').removeClass('on');
$('#packaging').addClass('on');

$('.submenu a').not('.on').stop(true, true).animate({ color: '#666'}, 300);

});

$('#comms').click(function() {

$('.comms').fadeTo('fast',1.0);
$('.comms').animate({ backgroundColor: "#fe2d67" }, "fast");
$('.comms .inner').animate({ backgroundColor: "#e6e6e6", color: "#000" }, "fast");

$('.branding, .packaging').fadeTo('fast',0.5);
$('.branding, .packaging').animate({ backgroundColor: "#4a4843" }, "fast");
$('.branding .inner, .packaging .inner').animate({ backgroundColor: "#000", color: "#fff" }, "fast");

$('#all, #packaging, #branding').removeClass('on');
$('#comms').addClass('on');

$('.submenu a').not('.on').stop(true, true).animate({ color: '#666'}, 300);

});

$('.project').hover(
  function () {
    $(this).addClass('hover');
  }, 
  function () {
    $(this).removeClass('hover');
  }
);


$('#hidebox a').click(function() {
	$('.box').fadeToggle(500);
	$('#hidebox a').toggleClass('show');
	$(this).text($(this).text() == 'Hide project info' ? 'Show project info' : 'Hide project info');
});

$('#slides').serialScroll({
		items:'li',
		prev:'.prev',
		next:'.next',
		axis:'x',
		navigation:'.slide-controls li a',
		duration:600,
		force:true,
		interval:8000,
		easing:'easeOutQuart',
		onBefore:function( e, elem, $pane, $items, pos ){
			/**
			 * 'this' is the triggered element 
			 * e is the event object
			 * elem is the element we'll be scrolling to
			 * $pane is the element being scrolled
			 * $items is the items collection at this moment
			 * pos is the position of elem in the collection
			 * if it returns false, the event will be ignored
			 */
			 //those arguments with a $ are jqueryfied, elem isn't.

			 
			 
			 
			e.preventDefault();
			if( this.blur )
				this.blur();
		},
		onAfter:function( elem ){
		
		resetValue();
		
		var players;
    players=$('#iframe-video');
    
    if (players.length) {

    $f(players[0]).api('pause');
    
    }
			
			}
			
		

	});
	
	$('#play a').click(function() {
	
		stopAuto();
	
	});

	$('#pause a').click(function() {
	
		startAuto();
	
	});
 
 
 $('#slides').scroll(function () {
  var inview = '#' + $('.sec:in-viewport:first').attr('id'),
      $link = $('.slide-controls li a').filter('[hash=' + inview + ']');
  if ($link.length && !$link.is('.current')) {
    $('.slide-controls li a').removeClass('current');
    $link.addClass('current');
    }
    
    var inview2 = '.' + $('.sec:in-viewport:first').attr('id')
    $link2 = $('.slide-captions li').filter(inview2);
  if ($link2.length && !$link2.is('.current')) {
    $('.slide-captions li').removeClass('current');
    $link2.addClass('current');
     
  }
});

$('.slide-controls li a').click(function () {

	stopAuto();

});
 
 
/* $(".slider").scroll(function(){
    $("#slides").scrollLeft($(".slider").scrollLeft());
     
});
$("#slides").scroll(function(){
    $(".slider").scrollLeft($("#slides").scrollLeft());
}); 
*/

$('.box-inner').jScrollPane();

//scrollpane parts
		var scrollPane = $( "#slides" ),
			scrollContent = $( "#slides .inside" );

		//build slider
		var scrollbar = $( "#slido" ).slider({
			animate: true,
			slide: function( event, ui ) {
				if ( scrollContent.width() > scrollPane.width() ) {
				
		stopAuto();
		
		var widthi = 0;
		$('#slides img').each(function() {
		widthi += $(this).outerWidth( true );
		});


		$( "#slides" ).scrollTo( ui.value * (( widthi - scrollPane.width() ) / 100));

		
				} else {
					scrollContent.css( "margin-left", 0 );
				}
			},
			stop: function( event, ui ) {
				$("#slides").scrollTo('.sec:in-viewport:first', 500, {axis:'x'});
				setTimeout(function(){ resetValue(); }, 600);

			}

		});
		
		
		//change overflow to hidden now that slider handles the scrolling
		scrollPane.css( "overflow", "hidden" );
		
		//size scrollbar and handle proportionally to scroll distance
		function sizeScrollbar() {
		
		var widthi = 0;
		$('#slides img').each(function() {
		widthi += $(this).outerWidth( true );
		});


			var remainder = widthi - scrollPane.width();
			var proportion = remainder / widthi;
			var handleSize = scrollPane.width() - ( proportion * scrollPane.width() );
			scrollbar.find( ".ui-slider-handle" ).css({
				width: handleSize,
				"margin-left": -handleSize / 2
			});
			handleHelper.width( "" ).width( scrollbar.width() - handleSize );
		}
		
		//reset slider value based on scroll content position
		function resetValue() {
		
		var widthi = 0;
		$('#slides img').each(function() {
		widthi += $(this).outerWidth( true );
		});
			var remainder = widthi - scrollPane.width();
			var leftVal = $("#slides").scrollLeft();
			var percentage = Math.round( leftVal / remainder * 100 );
			scrollbar.slider( "value", percentage );
		}
		
		//if the slider is 100% and window gets larger, reveal content
		function reflowContent() {
				var showing = scrollContent.width() + parseInt( scrollContent.css( "margin-left" ), 10 );
				var gap = scrollPane.width() - showing;
				if ( gap > 0 ) {
					scrollContent.css( "margin-left", parseInt( scrollContent.css( "margin-left" ), 10 ) + gap );
				}
		}
		
		//change handle position on window resize
		$( window ).resize(function() {
			resetValue();
			sizeScrollbar();
			reflowContent();
		});
		//init scrollbar size
		setTimeout( sizeScrollbar, 10 );//safari wants a timeout

 
    /* Link fade */
    
/*$('.submenu a, .standard2 .tabnav a').dwFadingLinks({
    color: '#ffffff',
    duration: 300
});

$('.standard2 #tabwrap a, .standard2 .side a, .standard1 a, .our-news a').dwFadingLinks({
    color: '#a1213d',
    duration: 300
});*/

$('.submenu a, .tabnav a, #back a').hover(function(){
  $(this).stop(true, true).animate({ color: '#fff'}, 300);
}, function() {
  $(this).not('.on').stop(true, true).animate({ color: '#666'}, 300);
});

$('.standard2 #tabwrap a, .standard2 .side a, .standard1 a, .our-news a, .our-place a').hover(function(){
  $(this).stop(true, true).animate({ color: '#a1213d'}, 300);
}, function() {
  $(this).not('.on').stop(true, true).animate({ color: '#FE2D67'}, 300);
});

 
/* Video */

 var vimeoPlayer = document.querySelector('iframe');

    $f(vimeoPlayer).addEvent('ready', ready);

    function ready(player_id) {

        froogaloop = $f(player_id);

        function setupEventListeners() {
            function onPlay() {
                froogaloop.addEvent('play',
                function(data) {
                    stopAuto();
                    
                    $('.box').fadeOut(500);
					$('#hidebox a').addClass('show');
					$('#hidebox a').text('Show project info');
                    
                });
            }

            function onFinish() {
                froogaloop.addEvent('finish',
                function(data) {
                    startAuto();
                });
            }
            
            
            onPlay();
            onFinish();
        }
        setupEventListeners();
    }

/* iPad */

$('#slides li').touchwipe({
     wipeLeft: function() { $('#slides').trigger( 'next' ); $('#slides').trigger( 'stop' ); },
     wipeRight: function() { $('#slides').trigger( 'prev' ); $('#slides').trigger( 'stop' ); },
     min_move_x: 20,
     min_move_y: 20,
     preventDefaultEvents: true
});

});


function stopAuto()
{
  $('#slides').trigger( 'stop' );
  $('#play').hide();
  $('#pause').show();
}

function startAuto()
{
  $('#slides').trigger( 'start' );
  $('#pause').hide();
  $('#play').show();
}

var delay = (function(){
  var timer = 0;
  return function(callback, ms){
    clearTimeout (timer);
    timer = setTimeout(callback, ms);
  };
})();