$(document).ready(function() {

	$('#works .continue').css('opacity', '0');

	$('.timeline li a').click(function(e){
		e.preventDefault();
		var topic = $(this).parent('li').index()+1;
		$(this).addClass('active');
		$(this).parent('li').siblings().children('a').removeClass('active');		
		var p = $("#timeline_"+topic);
		var offset = p.offset();
		movePage((offset.top)-140);
	});
	
	function movePage(el){
		$('html,body').animate({
			scrollTop: el
		}, 400);
	}

	// $(window).scrollTop($('#timeline_1').position().top)
	
	$(window).scroll(function(e){ 
		$el = $('.timeline'); 
		if ($(this).scrollTop() > 508 && $el.css('position') != 'fixed'){
			$('.timeline').css({'position': 'fixed', 'top': '-60px', 'opacity': '0.9'}); 
		} else if ($(this).scrollTop() < 508){
			$('.timeline').css({'position': 'static', 'opacity': '1'}); 
		}
	});
	
	$(".select").customStyle();

	$("input[type=file]").filestyle({ 
	     image: "images/file.gif",
	     imageheight : 40,
	     imagewidth : 60,
	     width : 200
	 });
	
	$("#contactForm").validate({
		rules: {
			name: "required",
			surname: "required",
			email: {
				required: true,
				email: true
			},
            phone: {
				required: true,
				number: true
			}, 
			privacyfield: "required"
		}
	});
	
	var $works = $("#works");
	var speed = 500;
	var $works2 = $("#secondNav");
	var $works3 = $("#work .images");
	
	$('#portfolio-filter a').click(function(e){
		e.preventDefault();
		if ($(this).parent().attr('class') != 'active') {
			var workType = '.' + $(this).attr('class');
			if(workType=='.all') {
				$works2.children('.hidden').toggleClass('hidden').fadeIn(0);
				$('#work .images ul li').css('opacity', '0');
				$('#work .images ul').cycle('destroy').cycle({
					fx: 'fade', 
					pager: '#slide-controls',
					before: onBefore,
					after: onAfter
				});
			} else { 
				$works2.children().not(workType).not('.hidden').toggleClass('hidden').fadeOut(0);
				$works2.children(workType+'.hidden').toggleClass('hidden').fadeIn(0);
				$('#work .images ul li').css('opacity', '0');
				$('#work .images ul').cycle('destroy').cycle({
					fx: 'fade', 
					pager: '#slide-controls',
					before: onBefore,
					after: onAfter,
					slideExpr: workType
				});
			}
			$(this).parent().siblings('li').removeClass('active');
			$(this).parent().siblings().children('a').removeClass('active');
			$(this).addClass('active');
			$(this).parent('li').addClass('active');
		};
	});
	 
	if ($('#work .images li').size() > 1) {
		/*
		$('#work .images ul').cycle({ 
			fx:     'fade', 
			pager:  '#slide-controls',
			before: onBefore,
			after: onAfter
		});
		*/
	};

	function onBefore(curr, next, opts, fwd) {
		var index = opts.currSlide;
		$('#prev,#prev2,#prev3,#prev4,#prev5')[index == 0 ? 'hide' : 'show']();
		$('#next,#next2,#next3,#next4,#next5')[index == opts.slideCount - 1 ? 'hide' : 'show']();
		//get the height of the current slide
		var $ht = $(this).height();
		var $ht1 = $(curr).height();
		var $ht2 = $(next).height();
		if ($ht1 < $ht2) {
			$(this).parent().animate({height: $ht});
		} else if ($ht1 == $ht2) {
			$(this).parent().css('height', $ht);
		};
	}
	
	function onAfter(curr, next, opts, fwd) {
		var index = opts.currSlide;
		$('#prev,#prev2,#prev3,#prev4,#prev5')[index == 0 ? 'hide' : 'show']();
		$('#next,#next2,#next3,#next4,#next5')[index == opts.slideCount - 1 ? 'hide' : 'show']();
		//get the height of the current slide
		var $ht = $(this).height();
		var $ht1 = $(curr).height();
		var $ht2 = $(next).height();
		if ($ht1 > $ht2) {
			$(this).parent().animate({height: $ht});
		};
	}
	
	$works.imagesLoaded(function(){
		$works.masonry({
			itemSelector: '.work:not(.hidden)',
			isAnimated: true
		});
	});

	
	$('#works-filter a').click(function(e){
		e.preventDefault();
		var workType = '.' + $(this).attr('class');
		if(workType=='.all') {
			$works.children('.hidden').toggleClass('hidden').fadeIn(speed);
		} else { 
			$works.children().not(workType).not('.hidden').toggleClass('hidden').fadeOut(speed);
			$works.children(workType+'.hidden').toggleClass('hidden').fadeIn(speed);
		}
		$works.masonry('reload');
		$(this).parent().siblings().removeClass('active');
		$(this).parent().addClass('active');
	});
	
	var resizeTimer;
	
	var delay = (function(){
		var timer = 0;
		return function(callback, ms){
			clearTimeout (timer);
			timer = setTimeout(callback, ms);
		};
	})();
	
	$("#work .images li img").each(function(){
		var imgw = $(this).height()+'';
		$(this).attr('rel', imgw);
	});
	
	$("#works img").each(function(){
		var imgw = $(this).height()+'';
		$(this).attr('rel', imgw);
	});
	
	$(window).resize(function() {
		delay(function(){
			var h = $(window).height();
			var w = $(window).width();
			var imgw = 729;
			var imgwa = 334;
			if (w >= 1230) {
				$("#works img").each(function(){
					if ($(this).hasClass ('resized3')) {
						$(this).removeClass('resized1');
						$(this).removeClass('resized2');
					} else {
						$(this).addClass('resized3');
						var imgw2 = 334;
						var imgh2 = $(this).attr('rel');
						$(this).height(imgh2);
						$(this).width(imgw2);
					};
				});
				var j = $(".images li img").size()-1;
				$(".images li img").each(function(i){					
					if ($(this).hasClass ('resized3')) {
						$(this).removeClass('resized1');
						$(this).removeClass('resized2');
					} else {
						$(this).addClass('resized3');
						var imgw2 = 729;
						var imgh2 = $(this).attr('rel');
						$(this).height(imgh2);
						$(this).width(imgw2);
					};
					if (i == j) {
						var workType = ""+$('#portfolio-filter li.active a').attr('class');
						workType2 = "."+workType.split(" ", 1);
						if (workType2 == '.web' || workType2 == '.brand') {
							$('#work .images ul').cycle('destroy').cycle({
								fx: 'fade', 
								pager:  '#slide-controls',
								before: onBefore,
								after: onAfter,
								slideExpr: workType2								
							});
						} else {
							$('#work .images ul').cycle('destroy');
							//$('#work .images ul').cycle('destroy').cycle({
							$('#work .images ul').cycle({
								fx: 'fade', 
								pager:  '#slide-controls',
								before: onBefore,
								after: onAfter
							});
						};
					};
				});
			} else if (w < 1230 && w >= 980) {
				$works.masonry('reload'), 200;
				$("#works img").each(function(){
					if ($(this).hasClass ('resized1')) {
						$(this).removeClass('resized2');
						$(this).removeClass('resized3');
					} else {
						$(this).addClass('resized1');
						var imgw2 = 404;
						var imgh = $(this).attr('rel');
						imgh2 = (404 * imgh) / imgwa;
						$(this).height(imgh2);
						$(this).width(imgw2);
					};
				});
				var j = $(".images li img").size()-1;
				$(".images li img").each(function(i){
					if ($(this).hasClass ('resized1')) {
						$(this).removeClass('resized2');
						$(this).removeClass('resized3');
					} else {
						$(this).addClass('resized1');
						var imgw2 = 545;
						var imgh = $(this).attr('rel');
						imgh2 = (545 * imgh) / imgw;
						$(this).height(imgh2);
						$(this).width(imgw2);
					};
					if (i == j) {
						var workType = ""+$('#portfolio-filter li.active a').attr('class');
						workType2 = "."+workType.split(" ", 1);
						if (workType2 == '.web' || workType2 == '.brand') {
							$('#work .images ul').cycle('destroy').cycle({
								fx: 'fade', 
								pager:  '#slide-controls',
								before: onBefore,
								after: onAfter,
								slideExpr: workType2								
							});
						} else {
							$('#work .images ul').cycle('destroy');
							$('#work .images ul').cycle({
							//$('#work .images ul').cycle('destroy').cycle({
								fx: 'fade', 
								pager:  '#slide-controls',
								before: onBefore,
								after: onAfter
							});
						};
					};
				});
			} else if (w < 980) {
				$works.masonry('reload'), 200;
				$("#works img").each(function(){
					if ($(this).hasClass ('resized2')) {
						$(this).removeClass('resized1');
						$(this).removeClass('resized3');
					} else {
						$(this).addClass('resized2');
						var imgw2 = 334;
						var imgh2 = $(this).attr('rel');
						$(this).height(imgh2);
						$(this).width(imgw2);
					};
				});
				var j = $(".images li img").size()-1;
				$(".images li img").each(function(i){
					if ($(this).hasClass ('resized2')) {
						$(this).removeClass('resized1');
						$(this).removeClass('resized3');
					} else {
						$(this).addClass('resized2');
						var imgw2 = 405;
						var imgh = $(this).attr('rel');
						imgh2 = (405 * imgh) / imgw;
						$(this).height(imgh2);
						$(this).width(imgw2);
					};
					if (i == j) {
						var workType = ""+$('#portfolio-filter li.active a').attr('class');
						workType2 = "."+workType.split(" ", 1);
						if (workType2 == '.web' || workType2 == '.brand') {
							$('#work .images ul').cycle('destroy').cycle({
								fx: 'fade', 
								pager:  '#slide-controls',
								before: onBefore,
								after: onAfter,
								slideExpr: workType2								
							});
						} else {
							//$('#work .images ul').cycle('destroy').cycle({
							$('#work .images ul').cycle('destroy');
							$('#work .images ul').cycle({
								fx: 'fade', 
								pager:  '#slide-controls',
								before: onBefore,
								after: onAfter
							});
						};
					};
				});
			};
		}, 0);
	});
	
	$('#works a')
	 	.mouseover(function(){
		 	$(this).children('.continue').css('opacity', '1');
	 		$(this).siblings('.bg_2').stop().animate({
	 			opacity: 1
	 		}, 300);
	 		$(this).children('.bg, .content').stop().animate({
	 			opacity: 0
	 		}, 300);
	 	})
	 	.mouseout(function(){
			var	opacityValue = $(this).attr('class');
		 	$(this).children('.continue').css('opacity', '0');
	 		$(this).siblings('.bg_2').stop().animate({
	 			opacity: 0
	 		}, 300);
	 		$(this).children('.bg').stop().animate({
	 			opacity: opacityValue
	 		}, 300);
	 		$(this).children('.content').stop().animate({
	 			opacity: 1
	 		}, 300);
		})
		
	var h = $(window).height();
	var w = $(window).width();
	var imgw = 729;
	var imgwa = 334;
	if (w >= 1230) {
		$("#works img").each(function(){
			if ($(this).hasClass ('resized3')) {
				$(this).removeClass('resized1');
				$(this).removeClass('resized2');
			} else {
				$(this).addClass('resized3');
				var imgw2 = 334;
				var imgh2 = $(this).attr('rel');
				$(this).height(imgh2);
				$(this).width(imgw2);
			};
		});
		var j = $(".images li img").size()-1;
		$(".images li img").each(function(i){					
			if ($(this).hasClass ('resized3')) {
				$(this).removeClass('resized1');
				$(this).removeClass('resized2');
			} else {
				$(this).addClass('resized3');
				var imgw2 = 729;
				var imgh2 = $(this).attr('rel');
				$(this).height(imgh2);
				$(this).width(imgw2);
			};
			if (i == j) {
				var workType = ""+$('#portfolio-filter li.active a').attr('class');
				workType2 = "."+workType.split(" ", 1);
				if (workType2 == '.web' || workType2 == '.brand') {
					$('#work .images ul').cycle('destroy').cycle({
						fx: 'fade', 
						pager:  '#slide-controls',
						before: onBefore,
						after: onAfter,
						slideExpr: workType2								
					});
				} else {
					//$('#work .images ul').cycle('destroy').cycle({
					$('#work .images ul').cycle('destroy');
					$('#work .images ul').cycle({
						fx: 'fade', 
						pager:  '#slide-controls',
						before: onBefore,
						after: onAfter
					});
					
				};
			};
		});
	} else if (w < 1230 && w >= 980) {
		$works.masonry('reload'), 200;
		$("#works img").each(function(){
			if ($(this).hasClass ('resized1')) {
				$(this).removeClass('resized2');
				$(this).removeClass('resized3');
			} else {
				$(this).addClass('resized1');
				var imgw2 = 404;
				var imgh = $(this).attr('rel');
				imgh2 = (404 * imgh) / imgwa;
				$(this).height(imgh2);
				$(this).width(imgw2);
			};
		});
		var j = $(".images li img").size()-1;
		$(".images li img").each(function(i){
			if ($(this).hasClass ('resized1')) {
				$(this).removeClass('resized2');
				$(this).removeClass('resized3');
			} else {
				$(this).addClass('resized1');
				var imgw2 = 545;
				var imgh = $(this).attr('rel');
				imgh2 = (545 * imgh) / imgw;
				$(this).height(imgh2);
				$(this).width(imgw2);
			};
			if (i == j) {
				var workType = ""+$('#portfolio-filter li.active a').attr('class');
				workType2 = "."+workType.split(" ", 1);
				if (workType2 == '.web' || workType2 == '.brand') {
					$('#work .images ul').cycle('destroy').cycle({
						fx: 'fade', 
						pager:  '#slide-controls',
						before: onBefore,
						after: onAfter,
						slideExpr: workType2								
					});
				} else {
					//$('#work .images ul').cycle('destroy').cycle({
					$('#work .images ul').cycle('destroy');
					$('#work .images ul').cycle({
						fx: 'fade', 
						pager:  '#slide-controls',
						before: onBefore,
						after: onAfter
					});
				};
			};
		});
	} else if (w < 980) {
		$works.masonry('reload'), 200;
		$("#works img").each(function(){
			if ($(this).hasClass ('resized2')) {
				$(this).removeClass('resized1');
				$(this).removeClass('resized3');
			} else {
				$(this).addClass('resized2');
				var imgw2 = 334;
				var imgh2 = $(this).attr('rel');
				$(this).height(imgh2);
				$(this).width(imgw2);
			};
		});
		var j = $(".images li img").size()-1;
		$(".images li img").each(function(i){
			if ($(this).hasClass ('resized2')) {
				$(this).removeClass('resized1');
				$(this).removeClass('resized3');
			} else {
				$(this).addClass('resized2');
				var imgw2 = 405;
				var imgh = $(this).attr('rel');
				imgh2 = (405 * imgh) / imgw;
				$(this).height(imgh2);
				$(this).width(imgw2);
			};
			if (i == j) {
				var workType = ""+$('#portfolio-filter li.active a').attr('class');
				workType2 = "."+workType.split(" ", 1);
				if (workType2 == '.web' || workType2 == '.brand') {
					$('#work .images ul').cycle('destroy').cycle({
						fx: 'fade', 
						pager:  '#slide-controls',
						before: onBefore,
						after: onAfter,
						slideExpr: workType2								
					});
				} else {
					//$('#work .images ul').cycle('destroy').cycle({
				    $('#work .images ul').cycle('destroy');
					$('#work .images ul').cycle({
						fx: 'fade', 
						pager:  '#slide-controls',
						before: onBefore,
						after: onAfter
					});
				};
			};
		});
	};
		
});