//definitions
var countDigitalPrint = 3;
var countWorkshops = 1;
var countPrototyping = 1;
var currentCount = 1;

var currentContent = null;
var maxCount = 0;
var currentStrip = null;


$(document).ready(function(){
						   
	if($.client.os != "Windows"){
		$('body').css('fontSize', 12);
	} 
					   

	$('a').click(function() {
		  $(this).blur();
	});
	
	$("a[rel='rb']").colorbox({transition:"fade"}); 
	
	
	$('#serviceBackground').height( $(window).height() );
	$('#services').height( ($(window).height() * 0.55 ) + 250);
	

//Main-Navi behavior
	
	$('header>nav>ul>li>a>img').mouseover(function() {
	  ($(this).animate({
	    marginTop: -32
	  }, 200, function() {
	    // Animation complete.
	  }
	  ));
	  
	});  

	$('header>nav>ul>li>a>img').mouseout(function() {
	  ($(this).animate({
	    marginTop:0
	  }, 200, function() {
	    // Animation complete.
	  }
	  ));
	  
	  
	});
	
	
//Services Navi behavior

	var currentService = $('#services>#servicesHeader>nav>ul>li>a>img').first();
	currentService.animate({
	    marginTop: -116
	  }, 200, function() {
	    // Animation complete.
	  }
	);
 
 
	$('#services>#servicesHeader>nav>ul>li>a>img').mouseover(function() {
		var currentMargin = $(this).css("marginTop");
		currentMargin = parseFloat(currentMargin.replace(/px/g, ""));
		
		if ( currentMargin > -116 ) {
			$(this).animate({marginTop: -58}, 200, function() {});
		}
	});  

	$('#services>#servicesHeader>nav>ul>li>a>img').mouseout(function() {
		var currentMargin = $(this).css("marginTop");
		currentMargin = parseFloat(currentMargin.replace(/px/g, ""));
		
		if ( currentMargin > -116 ) {
			$(this).animate({marginTop:0}, 200, function() {});
		}
	});
	
	
	currentContent = $('#serviceDigitalPrint');
	currentStrip = $('#digitalPrintStrip');
	maxCount = countDigitalPrint;
	
	$('#services>#servicesHeader>nav>ul>li>a>img').mouseup(function() {
			
			if (currentService.attr('src') != $(this).attr('src') ) {		
			  $(this).animate({marginTop:-116}, 200, function() {});
			  currentService.animate({marginTop: 0}, 200, function() {});
			  currentService = $(this);
			  
			  
			  
			  $('#serviceDigitalPrint').animate({opacity: '0'}, 100, "linear");
			  $('#serviceWorkshops').animate({opacity: '0'}, 100, "linear");
			  $('#servicePrototyping').animate({opacity: '0'}, 100, "linear");
			  
			  
			  if ( $(this).attr('id') == "digitalPrint" ) {
				currentStrip = $('#digitalPrintStrip');
				maxCount = countDigitalPrint;
				initStrip();  
				  
				$('#serviceDigitalPrint').animate({	marginLeft: '-50'}, 0);
				
				$('#serviceDigitalPrint').delay(100).animate({
				opacity: '1',
				marginLeft: '0',
				}, 600, "easeOutCubic", function() {
					currentContent = $('#serviceDigitalPrint');
					
				});
				
				
			  }
			  
			  if ( $(this).attr('id') == "workshops" ) {
				
				currentStrip = $('#workshopStrip');
				maxCount = countWorkshops;
				initStrip();
				  
				$('#serviceWorkshops').animate({	marginLeft: '-50'}, 0); 
				  
				$('#serviceWorkshops').delay(100).animate({
				opacity: '1',
				marginLeft: '0',
				}, 600, "easeOutCubic", function() {
					currentContent = $('#serviceWorkshops');
					
				});				
				
			  }
			  
			  if ( $(this).attr('id') == "prototyping" ) {
				currentStrip = $('#prototypingStrip');
				maxCount = countPrototyping;
				initStrip();  
				  
				$('#servicePrototyping').animate({	marginLeft: '-50'}, 0);  
				  
				$('#servicePrototyping').delay(100).animate({
				opacity: '1',
				marginLeft: '0',
				}, 600, "easeOutCubic", function() {
					currentContent = $('#servicePrototyping');
					
				});					
				
			  }
			  
	  		}
	});	
	
//Services default state
	$('#serviceWorkshops').animate({	opacity: '0'}, 0);  
	$('#servicePrototyping').animate({	opacity: '0'}, 0);  

//service Stip Arrow Behavior

	$('#arrowRight>a>img').mouseover(function() {		
			$(this).animate({marginLeft: -70}, 0);
	});  
	
	$('#arrowRight>a>img').mouseout(function() {		
			$(this).animate({marginLeft: 0}, 0);
	}); 
	
	$('#arrowLeft>a>img').mouseover(function() {		
			$(this).animate({marginLeft: -70}, 0);
	});  
	
	$('#arrowLeft>a>img').mouseout(function() {		
			$(this).animate({marginLeft: 0}, 0);
	}); 
	
	$('#arrowLeft').css('visibility', 'hidden');
		
	


//Main Scroll-behavior
	
	$.localScroll.hash({
		axis:'x',
		duration:1500,
		reset:true,
	});
	
	$('header').localScroll({
		axis:'x',
		queue:1500,
		duration: 1000,
		hash:true,
		stop:true,
		
		onBefore:function( e, anchor, $target ){	
		//	$('body').css( "overflow", "hidden");
		},
		onAfter:function( anchor, settings ){
		//	$('body').css( "overflow", "scroll");
		}
		   
	});
	
	$('.scrollHorz').localScroll({
		axis:'x',
		queue:1500,
		duration: 1000,
		hash:true,
		stop:true,
		
		
		onBefore:function( e, anchor, $target ){	
		//	$('body').css( "overflow", "hidden");
		},
		onAfter:function( anchor, settings ){
		//	$('body').css( "overflow", "scroll");
		}
		   
	});	

	
	 
 });

$(window).resize(function() {
  $('#serviceBackground').height( $(window).height() );
  $('#services').height( ($(window).height() * 0.55 ) + 250);
});

function initStrip() {
	currentStrip.animate({marginLeft: 0}, 0);	
	currentCount = 1;
	$('#arrowLeft').animate({	opacity: '0'}, 500, function () {$(this).css('visibility', 'hidden');});  
	if (maxCount > 1) {
	  $('#arrowRight').css('visibility', 'visible');
	  $('#arrowRight').animate({	opacity: '1'}, 500);  
	} else {
	  $('#arrowRight').animate({	opacity: '0'}, 500, function () {$(this).css('visibility', 'hidden');});  
	}	
}


function scrollNext() {
	
	if (currentCount < maxCount) {
		currentCount++;
		currentStrip.animate({marginLeft: ( (currentCount-1) * -1024) }, 1000, "easeInOutQuad");	
		
		if (currentCount == 2) {
			$('#arrowLeft').animate({	opacity: '0'}, 0);  
			$('#arrowLeft').css('visibility', 'visible');
			$('#arrowLeft').animate({	opacity: '1'}, 500);
		}
		
		if (currentCount == maxCount) {
			
			$('#arrowRight').animate({	opacity: '0'}, 500, function () {$(this).css('visibility', 'hidden');});
		}
	}
	
}

function scrollLast() {
	
	if (currentCount > 0) {
		currentCount--;
		currentStrip.animate({marginLeft: ( (currentCount-1) * -1020) }, 1000, "easeInOutQuad");	
		
		if (currentCount < maxCount) {
			$('#arrowRight').animate({	opacity: '0'}, 0);  
			$('#arrowRight').css('visibility', 'visible');
			$('#arrowRight').animate({	opacity: '1'}, 500);
		}
		
		if (currentCount == 1) {
			
			$('#arrowLeft').animate({	opacity: '0'}, 500, function () {$(this).css('visibility', 'hidden');});
		}
	}
	
}