/* Author:  Calvin Choy

*/

$(document).ready(function() {
	
/* ==================================================================================================================== */
/* Fancybox																	   										    */
/* ==================================================================================================================== */
	
	//fancybox - contact form
	$(".contact.fancybox").fancybox({
		'speedIn'		:	600, 
		'speedOut'		:	200, 
		'padding'		:	5,
		'scrolling'		:	'no',	
		'type'			: 	'iframe',	
		'height'		:	600,	
		'overlayShow'	:	true
	});	
	
	//fancybox - project form
	$(".project a").fancybox({
		'speedIn'		:	600, 
		'speedOut'		:	200, 
		'padding'		:	5,
		'scrolling'		:	'no',	
		'overlayShow'	:	true
	});	
	
/* ==================================================================================================================== */
/* Contact pull																	   										*/
/* ==================================================================================================================== */		
	if($(".sticky-contact-pull").length != 0){
		$('.sticky-contact-pull').stickyfloat({duration: 600, delay:150, easing: 'easeOutQuad'});
	}
	
	$('.sticky-contact-pull').click(function(){
	 //hide header panel		
	 $(".login-mini").slideUp();
	 $(".headerPanel").removeClass("active");
	 $(".login-mini").removeClass("visible");	
	 $(".login-mini").addClass("hidden");	
	 //end header panel hide

	 //hide header panel		
	 $(".vacatures-mini").slideUp();
	 $(".headerPanel").removeClass("active");
	 $(".vacatures-mini").removeClass("visible");	
	$(".vacatures-mini").addClass("hidden");		 
	 //end header panel hide

	 $('#overlay').fadeIn('slow', function() {
		 $(".sticky-contact").addClass("sticky-contact-active");
		 $(".sticky-contact").animate({ 
		width: "101%",
		easing: 'ease-in-out'		
	  }, 500, function(){$('#overlay').click(function(){
		 $(".sticky-contact").animate({ 
			width: "0",
			easing: 'ease-in-out'		
	  	}, 500, function() {
			$(".sticky-contact").removeClass("sticky-contact-active");  
     		$("#overlay").fadeOut();    		   		 			 
  		});
	});});
      });
      $('.headerPanel').css("z-index", 10);	
	});
	
	
$('.contact-close').click(function(){
	$(".sticky-contact").animate({ 
		width: "0",
		easing: 'ease-in-out'		
	}, 500, function() {
		$(".sticky-contact").removeClass("sticky-contact-active");  
		$("#overlay").fadeOut();    		   		 			 
	});
});

/* ==================================================================================================================== */
/* vacatures + Login tabs dropdown																	   					*/
/* ==================================================================================================================== */
$('.client-login').click(function(){
	//check if a panel is already active
	if($(".headerPanel.active").length != 0){
		//check which one is active
		//if login is visible
		if($(".login-mini.visible").length != 0){
			//remove visibile class
			$(".login-mini.visible").removeClass("visible");
			$(".login-mini").addClass("hidden");
			//hide login panel
			$(".login-mini").slideUp();
			//remove headerPanel active state
			$(".headerPanel").removeClass("active");

			//hide the overlay
			$("#overlay").fadeOut();
		}
		//if vacatuers is visible
		else if($(".vacatures-mini.visible").length != 0){
			//toggle between views
			//remove classes from vacatures view
			$(".vacatures-mini.visible").removeClass("visible");
			$(".vacatures-mini").addClass("hidden");
			//slide up vacatures
			$(".vacatures-mini").slideUp();

			//bringin login view
			$(".login-mini").removeClass("hidden");
			$(".login-mini").addClass("visible");
			//slide down
			$(".login-mini").slideDown();
		}
	}
	//panelHeader not active yet
	else{	
		$(".headerPanel").addClass("active")	;
		$(".login-mini").removeClass("hidden");
		$(".login-mini").addClass("visible");
		$(".login-mini").slideDown();

		//bring in the overlay
		$('.headerPanel').css("z-index", 300);
		$('#overlay').fadeIn('slow', function(){
			$('#overlay').click(function(){
				$(".headerPanel").removeClass("active");
				$("#overlay").fadeOut();
				
				//clear mini-login
				$(".login-mini.visible").removeClass("visible");
				$(".login-mini").addClass("hidden");
				//hide login panel
				$(".login-mini").slideUp();

				//remove mini-vacatures				
				$(".vacatures-mini.visible").removeClass("visible");
				$(".vacatures-mini").addClass("hidden");
				//hide login panel
				$(".vacatures-mini").slideUp();
				

			});
		});	
	}
});

$('.client-vacatures').click(function(){
	//check if a panel is already active
	if($(".headerPanel.active").length != 0){
		//check which one is active
		//if login is visible
		if($(".vacatures-mini.visible").length != 0){
			//remove visibile class
			$(".vacatures-mini.visible").removeClass("visible");
			$(".vacatures-mini").addClass("hidden");
			//hide login panel
			$(".vacatures-mini").slideUp();
			//remove headerPanel active state
			$(".headerPanel").removeClass("active");

			//hide the overlay
			$("#overlay").fadeOut();
		}
		//if vacatuers is visible
		else if($(".login-mini.visible").length != 0){
			//toggle between views
			//remove classes from vacatures view
			$(".login-mini.visible").removeClass("visible");
			$(".login-mini").addClass("hidden");
			//slide up vacatures
			$(".login-mini").slideUp();

			//bringin login view
			$(".vacatures-mini").removeClass("hidden");
			$(".vacatures-mini").addClass("visible");
			//slide down
			$(".vacatures-mini").slideDown();
		}
	}
	//panelHeader not active yet
	else{
		$(".headerPanel").addClass("active")	;
		$(".vacatures-mini").removeClass("hidden");
		$(".vacatures-mini").addClass("visible");
		$(".vacatures-mini").slideDown();

				//bring in the overlay
		$('.headerPanel').css("z-index", 300);
		$('#overlay').fadeIn('slow', function(){
			$('#overlay').click(function(){
				$(".headerPanel").removeClass("active");
				$("#overlay").fadeOut();
				
				//clear mini-login
				$(".login-mini.visible").removeClass("visible");
				$(".login-mini").addClass("hidden");
				//hide login panel
				$(".login-mini").slideUp();

				//remove mini-vacatures				
				$(".vacatures-mini.visible").removeClass("visible");
				$(".vacatures-mini").addClass("hidden");
				//hide login panel
				$(".vacatures-mini").slideUp();
				

			});
		});	
	}

});

$('.vacatures-wrapper ul li a').click(function(){
	$(this).toggleClass("active");
	$(this).parent().find(".vaca-description").slideToggle();

});
$(".login-mini input").focus(function () {
     $(this).parent().addClass("active");
});

$(".login-mini input").blur(function () {
	 $(".login-mini .active").removeClass("active");  
});	
	
/* ==================================================================================================================== */
/* Slides																											    */
/* ==================================================================================================================== */	
	//slides
	if($("#banner").length != 0){
	$("#banner").slides({
	container: 'slides',		 
    preload: true,
	effect: 'fade',
	generatePagination: false,
	paginationClass: 'slides-pagination-list',
	slideSpeed: 1000,
	slideEasing: "easeInOutQuad",
    play: 5000,
    pause: 2500,
    hoverPause: true
  });
	}


/* ==================================================================================================================== */
/* Featured box																										    */
/* ==================================================================================================================== */
	//featured box hover
	if($(".featured-main").length != 0){
	$(".featured-main").hover(
	  function () {
	   $(this).stop().animate({'top': '-10px'});
	  },
	 
		function(){$(this).stop().animate({'top': '0px'});
	  }
	);
	
	}
	
/* ==================================================================================================================== */
/* Portfolio project																								    */
/* ==================================================================================================================== */	
	
	if($(".project").length != 0){
	//fade project on hover
	$('.project').hover(function() {
					$('.project').not(this).stop().animate({"opacity": .5},50);},
					function() {
						$('.project').stop().animate({"opacity": 1}),50;
	});
	}
	
/* ==================================================================================================================== */
/* Isotope																											    */
/* ==================================================================================================================== */

	//isotop filter
		
	$('.filter-bar a').click(function(){
		$('.filter-bar a').removeClass('active');
		$(this).addClass('active');
	  var selector = $(this).attr('data-filter');
	  $('.projects-wrapper').isotope({ 
		 filter: selector,
		itemSelector : '.project',
		layoutMode : 'fitRows' });
	  return false;
	});
	
	
	
/* ==================================================================================================================== */
/* Thumbhover																										    */
/* ==================================================================================================================== */	
if($(".slides-pagination").length != 0){
	$('.slides-pagination .innerCenter').thumbnailSlider();	
}

});

//isotope initialize
$(window).load(function(){
	if($(".projects-wrapper").length != 0){
		$('.projects-wrapper').isotope({
		  // options
		  itemSelector : '.project',
		  layoutMode : 'fitRows'
		});
	}

//initialize thumb	
if($(".slides-pagination").length != 0){
	$('.slides-pagination .innerCenter').thumbnailSlider();	
}

});

/* ==================================================================================================================== */
/* customers slides																											    */
/* ==================================================================================================================== */	
		//slides
	if($("#customers-slider").length != 0){
		//prevent double ini
		if($(".slides_control").length == 0){
		$("#customers-slider").slides({
		container: 'slides',		 
	    preload: true,
		effect: 'fade',
		generatePagination: false,
		//paginationClass: 'slides-pagination-list',
		slideSpeed: 1000,
		slideEasing: "easeInOutQuad",
		prev: 'previous',
	    next: 'next',
	    play: 3000,
	    pause: 2500,
	    hoverPause: true
		});

	//hover effect previons/next
	
	// $("#customers-slider").hover(
	//   function () {
	//    $("#customers-slider .previous").addClass("isVisible");
	//    $("#customers-slider .next").addClass("isVisible");
	//   },
	 
	// 	function(){
	// 	$("#customers-slider .previous").removeClass("isVisible");
	//    	$("#customers-slider .next").removeClass("isVisible");
	//   }
	// );

	
	//hover effect customers
	
	$("img.greyscale").hover(
	  function () {
	   $(this).stop(true,true).animate({ opacity: 0 }, 500);   
	  },
	 
		function(){
		$(this).stop(true,true).animate({ opacity: 1 }, 1000);
	  }
	);

	}
}



/* ==================================================================================================================== */
/* jquery fracs																   										    */
/* ==================================================================================================================== */

// [xiao] alle fracs code kan weg, alleen compensateFracsFade(currentOpacity) is nodig.
//$.each(['.section-box-open', '.service-box', '.section-box.small'], function(index, value) { 
$.each(['.fracs'], function(index, value) { 
	$(value).each(
		function(index, element){
			var fracs = $(element).fracs();
			$(element).stop(true, true).fadeTo('fast', compensateFracsFade(fracs.visible));
			$(element).fracs(function(fracs, previousFracs){
				$(element).stop(true, true).fadeTo('fast', compensateFracsFade(fracs.visible));
			});
			$(element).stop(true, true).fadeTo('fast', compensateFracsFade(fracs.visible));
		}
	);  
});

/* ==================================================================================================================== */
/* Functions																										    */
/* ==================================================================================================================== */	
//Thumb hover plugin - http://tympanus.net/codrops/2011/01/27/thumbnails-preview-slider/
(function($) {
				$.fn.thumbnailSlider = function(options) {
					var opts = $.extend({}, $.fn.thumbnailSlider.defaults, options);
					return this.each(function() {
						var $this 				= $(this),
							o 					= $.meta ? $.extend({}, opts, $pxs_container.data()) : opts;
						
						var $ts_container		= $this.children('.slides-pagination-list'),
							$ts_thumbnails		= $ts_container.children('.ts_thumbnails'),
							$nav_elems			= $ts_container.children('li').not($ts_thumbnails),
							total_elems			= $nav_elems.length,
							$ts_preview_wrapper	= $ts_thumbnails.children('.ts_preview_wrapper'),
							$arrow				= $ts_thumbnails.children('span'),
							$ts_preview			= $ts_preview_wrapper.children('.ts_preview');
							
						
						/*
						calculate sizes for $ts_thumbnails:
						width 	-> width thumbnail + border (2*5)
						height 	-> height thumbnail + border + triangle height(6)
						top		-> -(height plus margin of 5)
						left	-> leftDot - 0.5*width + 0.5*widthNavDot 
							this will be set when hovering the nav,
							and the default value will correspond to the first nav dot	
						*/
						var w_ts_thumbnails	= o.thumb_width + 2*5,
							h_ts_thumbnails	= o.thumb_height + 2*5 + 0,
							t_ts_thumbnails	= -(h_ts_thumbnails + 0),
							$first_nav		= $nav_elems.eq(0),
							l_ts_thumbnails	= $first_nav.position().left - 0.5*w_ts_thumbnails + 0.5*$first_nav.width();
						
						$ts_thumbnails.css({
							width	: w_ts_thumbnails + 'px',
							height	: h_ts_thumbnails + 'px',
							top		: t_ts_thumbnails + 'px',
							left	: l_ts_thumbnails + 'px'
						});
						
						/*
						calculate the top and left for the arrow of the tooltip
						top		-> thumb height + border(2*5)
						left	-> (thumb width + border)/2 -width/2
						*/
						var t_arrow	= o.thumb_height + 2*5,
							l_arrow	= (o.thumb_width + 2*5) / 2 - $arrow.width() / 2;
						$arrow.css({
							left	: l_arrow + 'px',
							top		: t_arrow + 'px'
						});
						
						/*
						calculate the $ts_preview width -> thumb width times number of thumbs
						*/
						$ts_preview.css('width' , total_elems*o.thumb_width + 'px');
						
						/*
						set the $ts_preview_wrapper width and height -> thumb width / thumb height
						*/
						$ts_preview_wrapper.css({
							width	: o.thumb_width + 'px',
							height	: o.thumb_height + 'px'
						});
						
						//hover the nav elems
						$nav_elems.bind('mouseenter',function(){
							var $nav_elem	= $(this),
								idx			= $nav_elem.index();
								
							/*
							calculate the new left
							for $ts_thumbnails
							*/
							var new_left	= $nav_elem.position().left - 0.5*w_ts_thumbnails + 0.5*$nav_elem.width();
							
							$ts_thumbnails.stop(true)
										  .show()	
										  .animate({
											left	: new_left + 'px'
										  },o.speed,o.easing);				  
							
							/*
							animate the left of the $ts_preview to show the right thumb 
							*/
							$ts_preview.stop(true)
									   .animate({
											left	: -idx*o.thumb_width + 'px'
									   },o.speed,o.easing);
							
							//zoom in the thumb image if zoom is true
							if(o.zoom && o.zoomratio > 1){
								var new_width	= o.zoomratio * o.thumb_width,
									new_height	= o.zoomratio * o.thumb_height;
								
								//increase the $ts_preview width in order to fit the zoomed image
								var ts_preview_w	= $ts_preview.width();
								$ts_preview.css('width' , (ts_preview_w - o.thumb_width + new_width)  + 'px');
								
								$ts_preview.children().eq(idx).find('img').stop().animate({
									width		: new_width + 'px',
									height		: new_height + 'px'
								},o.zoomspeed);
							}		
							
						}).bind('mouseleave',function(){
							
							//if zoom set the width and height to defaults
							if(o.zoom && o.zoomratio > 1){
								var $nav_elem	= $(this),
									idx			= $nav_elem.index();
								$ts_preview.children().eq(idx).find('img').stop().css({
									width	: o.thumb_width + 'px',
									height	: o.thumb_height + 'px'	
								});	
							}
							
							$ts_thumbnails.stop(true)
										  .hide();
										  
						}).bind('click',function(){
							var $nav_elem	= $(this),
								idx			= $nav_elem.index();
							
							o.onClick(idx);
						});
						
					});
				};
				$.fn.thumbnailSlider.defaults = {
					speed		: 100,//speed of each slide animation
					easing		: 'jswing',//easing effect for the slide animation
					thumb_width	: 100,//your photos width
					thumb_height: 65,//your photos height
					zoom		: false,//zoom animation for the thumbs
					zoomratio	: 1,//multiplicator for zoom (must be > 1)
					zoomspeed	: 15000,//speed of zoom animation
					onClick		: function(){return false;}//click callback
				};
			})(jQuery);

function compensateFracsFade(currentOpacity){
	var finalOpacity;
	var compensate = 0.10;
	if(currentOpacity < 1){
		finalOpacity = currentOpacity - compensate;
	}
	else{
		finalOpacity = currentOpacity;
	}
	
	return finalOpacity;
}