Shadowbox.init();

$(function() {
	// checking feedbackForm
	$('#feedbackForm').submit(function() {
		var haveError = false;
		$(this).find('.inp').each(function() {
			if (haveError) return;
			if ($(this).val() == '') {
				$(this).animate({'backgroundColor': '#ffdcd0'}, 100, function() {
					$(this).animate({'backgroundColor': '#fff'}, 100);
				});
				$(this).get(0).focus();
				haveError = true;

				$(this).css({'background': '#ffdcd0'});
				haveError = true;
			}
			else {
				$(this).css({'background': 'white'});
			}
		});

		return !haveError;
	});


	// move footer to bottom
	var h = document.documentElement.clientHeight - jQuery('#head-v2').outerHeight() -
		jQuery('#content').outerHeight() - jQuery('#foot-v2').outerHeight();
	if (h > 0) {
		jQuery('#foot-v2').css('position', 'absolute').css('bottom', 0).css('width', '100%');
	}
	


	// binding links
	var groups = [
		{block: '.item-cnt', imageLnk: 'a.video', link: 'a.title'},
		{block: '.item-cnt', imageLnk: 'a.logo', link: 'span.comp a'},
		{block: '.item-data', imageLnk: 'div.main-img a', link: 'div.desc a'}
	];
	$(groups).each(function(i, data) {
		$(data.block).each(function() {
			var _this = this;
			$(data.imageLnk, this).hover(
				function() {
					$(data.link, _this).addClass('active');
				},
				function() {
					$(data.link, _this).removeClass('active');
				}
			);
		})
	});




	var h1 = $('#content .container').height(),
		h2 = $('#content .rightrow').height() + 150;
	if (h1 < h2) {
		$('#content .container').height(h2);
	}

	var maxvalue = null;

	$(function() {
		$('#mainbanner .rightArrow').click(function() {
			var $block1 = $('#mainbanner .sliderContainer .active'),
				$block2 = $block1.next('.slide');

			if ($block2.size() == 0) {
				$block2 = $('#mainbanner .sliderContainer .slide:first');
				if ($block2.size() == 0) {
					alert(0);
					return false;
				}
			}

			$block2.css({left: $block1.width()}).show();
			$block1.animate({left: -$block1.width()});
			$block2.animate({left: 0}, function() {
				$block1.removeClass('active');
				$block2.addClass('active');
			});
			$(this).blur();
			return false;
		});

		$('#mainbanner .leftArrow').click(function() {
			var $block1 = $('#mainbanner .sliderContainer .active'),
				$block2 = $block1.prev('.slide');

			if ($block2.size() == 0) {
				$block2 = $('#mainbanner .sliderContainer .slide:last');
				if ($block2.size() == 0) {
					alert(0);
					return false;
				}
			}

			$block2.css({left: -$block2.width()}).show();
			$block1.animate({left: $block1.width()});
			$block2.animate({left: 0}, function() {
				$block1.removeClass('active');
				$block2.addClass('active');
			});
			$(this).blur();
			return false;
		});

		var clientsShift = 0,
			panel = $('#clients .panel').get(0);

		if (panel) {
			$('#clients .rightArrow')
				.mouseover(function() {
					clientsShift = -2;
				})
				.mouseout(function() {
					clientsShift = 0;
				})
				.click(function() {
					return false;
				});
			$('#clients .leftArrow')
				.mouseover(function() {
					clientsShift = 2;
				})
				.mouseout(function() {
					clientsShift = 0;
				})
				.click(function() {
					return false;
				});

			setInterval(function() {
				var r = panel.offsetLeft + clientsShift;
				if (r < 0 && (maxvalue === null || r > -maxvalue)) {
					panel.style.left = r + 'px';
				}
			}, 10);
		}

		// prepare scroll blocks

		$('.scroll-block').each(function() {
			var $block = $(this),
				$items = $block.find('.scroll-item'),
				$content = $block.find('.scroll-content');
				blockWidth = $block.width(),
				itemsWidth = 0;

			// hide outsiding items
			$items.each(function() {
				var $this = $(this);

				itemsWidth += $this.width();
				if (itemsWidth > blockWidth) {
					$this.hide().addClass('hidden');
				}

				if ($content.height() < $this.height()) {
					$content.height($this.height());
				}
			});

			// content styles
			var height = $content.height();
			$content.css({
				'height': height,
				'position': 'absolute',
				'top': 0,
				'left': 0,
				'width': itemsWidth
			});
			$content.parent().css({
				'height': height
			});

			// show all hidden items
			$block.find('.scroll-item').show();

			// disable left arrow
			$block.find('.arrow-left').addClass('arrow-disabled');
		});


		// left arrow binding
		$('.scroll-block .arrow-left').click(function() {
			var $block = $(this).closest('.scroll-block'),
				$content = $block.find('.scroll-content'),
				$visibleItems = $content.find('.scroll-item').not('.hidden'),
				$firstVisibleItem = $visibleItems.filter(':first'),
				$lastVisibleItem = $visibleItems.filter(':last'),
				$prevVisibleItem = $firstVisibleItem.prev();

			if ($block.data('animating')) {
				return false;
			}

			if ($prevVisibleItem.size()) {
				$prevVisibleItem.show().removeClass('hidden');

				var offset = Math.max($prevVisibleItem.width(), $lastVisibleItem.width());

				// !!!!! hardcode
				if (offset > 295) {
					//$prevVisibleItem.prev().show().removeClass('hidden');
				}

				$block.data('animating', true);
				$content.animate({'left': $content.position().left + $prevVisibleItem.width()}, function() {
					$block.data('animating', false);
					$lastVisibleItem.addClass('hidden');

					$block.find('.arrow-right').removeClass('arrow-disabled');
					if ($prevVisibleItem.prev().size() == 0) {
						$block.find('.arrow-left').addClass('arrow-disabled');
					}

					// !!!!! hardcode
					if (offset > 295) {
						$lastVisibleItem.prev().addClass('hidden');
					}
				});

			}

			return false;
		});

		// right arrow binding
		$('.scroll-block .arrow-right').click(function() {
			var $block = $(this).closest('.scroll-block'),
				$content = $block.find('.scroll-content'),
				$visibleItems = $content.find('.scroll-item').not('.hidden'),
				$firstVisibleItem = $visibleItems.filter(':first'),
				$lastVisibleItem = $visibleItems.filter(':last'),
				$nextVisibleItem = $lastVisibleItem.next();

			if ($block.data('animating')) {
				return false;
			}

			if ($nextVisibleItem.size()) {
				$nextVisibleItem.show().removeClass('hidden');
				var offset = Math.max($nextVisibleItem.width(), $firstVisibleItem.width());

				// !!!!! hardcode
				if (offset > 295) {
					$nextVisibleItem.next().show().removeClass('hidden');
				}

				$block.data('animating', true);
				$content.animate({'left': $content.position().left - offset}, function() {
					$block.data('animating', false);
					$firstVisibleItem.addClass('hidden');
					$block.find('.arrow-left').removeClass('arrow-disabled');
					if ($nextVisibleItem.next().size() == 0) {
						$block.find('.arrow-right').addClass('arrow-disabled');
					}
				});
			}



			return false;
		});

	});


	$(window).load(function() {
		maxvalue = $('#clients .panel').width() - $('#clients .content').width();
		checkWidth();
	});

	
	$(window).resize(function() {
		checkWidth();
	});


	function checkWidth() {
		if ($('#mainbanner').size() > 0) {
			var w = $('#mainbanner').width();
			if (w < 940) {
				$('#mainbanner .sliderContainer').width(940);
			}
			else {
				$('#mainbanner .sliderContainer').width(w);
			}
		}
	}

})


// HEAD ROTATOR
var pageItems = ['mobile', 'sites', 'visio'];
if (location.href.match(/.+?web-apps.html$/)) {
	pageItems = ['sites', 'visio', 'mobile'];
}
else if (location.href.match(/.+?info-vis.html$/)) {
	pageItems = ['visio', 'mobile', 'sites'];
}


function checkActiveRollover() {
	var name = pageItems[0];
//	$('#foot-v2 .pages a').each(function() {
//		var $this = $(this);
//		$this.removeClass('active');
//		var ref = $this.data('ref');
//		if (ref) {
//			this.href = ref;
//		}
//	});
//	$('#foot-v2 .pages .' + name).each(function() {
//		var $this = $(this);
//		$this.addClass('active').data('ref', this.href).removeAttr('href');
//	});
//
//	$('#head-v2 .pages .img').each(function() {
//		if ($(this).data('href')) {
//			$(this).attr('href', $(this).data('href'));
//		}
//	});

	var $img = $('#head-v2 .pages .' + name).find('.img');
	$img.data('href', $img.attr('href'))
	if ($img.attr('href')) {
		$img.removeAttr('href');
	}


	// load page content
	switch (name) {
		case 'mobile': $pagename = 'index-en'; break;
		case 'sites': $pagename = 'web-apps'; break;
		case 'visio': $pagename = 'info-vis'; break;
	}

	$.ajax({
		'url': $pagename + '.html',
		'success': function(html) {
			return;
			$('#content').replaceWith($(html).filter('#content'));
			//console.log($(html).filter('#content').html());
			//$('#content').replaceWith($(html).find('#content'));

			//console.log(html);
			//console.log($(html).find('#content').html());
			return;
			$('#content').html(
				$(html).find('#content').html()
			);
			
		}
	});
}

function doPage(type) {
	switch ($.inArray(type, pageItems)) {
		case 0: break;
		case 1: rotateL(); break;
		case 2: rotateR(); break;
	}
}

$(function() {
	checkActiveRollover();

//	$('#foot-v2 .pages .sites').click(function() { doPage('sites'); return false; } );
//	$('#foot-v2 .pages .mobile').click(function() { doPage('mobile'); return false; } );
//	$('#foot-v2 .pages .visio').click(function() { doPage('visio'); return false; } );

//	$('#head-v2 .pages a').hover(
//		function() {
//			var $link = $(this).closest('.link');
//			//console.log(pageItems[0], $link.get(0).className);
//			if ($link.hasClass(pageItems[0])) {
//				$link.addClass('hover-white');
//			}
//			$link.addClass('hover');
//		},
//		function() { $(this).closest('.link').removeClass('hover hover-white'); }
//	);

	$('#head-v2 .pages .caption-clone').each(function() {
		return;
		var $caption = $(this),
			$clone = $caption.clone().hide();

		$clone
			.addClass('caption-clone')
			.css({
				'opacity': 0
			})
			.hide()
			.appendTo($caption.parent());
	});

	$('#head-v2 .left, #head-v2 .right').each(function() {
		$(this).find('.caption').css({opacity: 0})//.hide();
		//$(this).find('.caption-clone').css({opacity: 1}).show();
	});
	$('#head-v2 .active').each(function() {
//		$(this).find('.caption').css({opacity: 1}).show();
		$(this).find('.caption-clone').css({opacity: 0}).hide();
	});

	for (var k in pageItems) {
		if (k == 'indexOf') continue;
		(function(type) {
			$(' .' + type + ' a').click(function() {
				if ($(this).hasClass('caption')) return true;

				$('#head-v2 .pages .link').removeClass('hover hover-white');
				if ($.inArray(type, pageItems) == 1) {
					rotateL();
				}
				else if ($.inArray(type, pageItems) == 2) {
					rotateR();
				}
				return false;
			});
		})(pageItems[k]);
	}

	// counter hover effect
	$('#foot-v2 .counters a').each(function() {
		var $a = $(this);

		$a.css({
			'display': 'inline-block',
			'position': 'relative'
		});

		$('<span></span>').css({
			'cursor': 'pointer',
			'display': 'block',
			'position': 'absolute',
			'top': 0,
			'left': 0,
			'width': $a.width(),
			'height': $a.height(),
			'background': 'black',
			'opacity': 0.65
		})
		.hover(
			function() { $(this).animate({'opacity': 0}, 250); },
			function() { $(this).animate({'opacity': 0.65}, 250); }
		)
		.appendTo($a);
	});

});


function rotateL() {
	var $active = $('#head-v2 .pages .' + pageItems[0]),
		x =  $active.position().left,
		newX = 0,
		dX = Math.abs(newX - x)
		
	$active.animate({'left': newX, 'top': 220}, {
		'step': function() {
			var pos = Math.abs($active.position().left - x),
				proc = 100 - Math.round((dX - pos) / dX * 100),
				fontSize = 24 - 12 / 100 * proc;

			$active.find('.caption').css({
				'font-size': fontSize,
				'opacity': 1 - proc / 100
			});
			$active.find('.link-items').css({
				'opacity': 1 - proc / 100
			});
			$active.find('.caption-clone').show().css({
				'font-size': fontSize,
				'opacity': proc / 100
			});
			$active.find('.img').css({
				'height': 600 - 500 * proc / 100,
				'width': (600 - 500 * proc / 100) /  2.247191,
				'top': -240 + 130 * proc / 100,
				'right': 410 - 105 * proc / 100
			});

//			console.log(600 - 500 * proc / 100);
		},
		'complete': function() {
		}
	});

	var $active1 = $('#head-v2 .pages .' + pageItems[1]),
		x1 =  $active1.position().left,
		newX1 = 484,
		dX1 = Math.abs(newX1 - x1)

	$active1.animate({'left': newX1, 'top': 295}, {
		'step': function() {
			var pos = Math.abs($active1.position().left - x1),
				proc = 100 - Math.round((dX1 - pos) / dX1 * 100),
				fontSize = 12 + 12 / 100 * proc;

			$active1.find('.caption').show().css({
					'font-size': fontSize,
					'opacity': proc / 100
				});
			$active1.find('.link-items').show().css({
				'opacity': proc / 100
			});
			$active1.find('.caption-clone').css({
					'font-size': fontSize,
					'opacity': 1 - proc / 100
				});
			$active1.find('.img').css({
				'height': 100 + 500 * proc / 100,
				'width': (100 + 500 * proc / 100) /  2.247191,
				'top': -110 - 130 * proc / 100,
				'right': 305 + 105 * proc / 100
			});

			//console.log(fontSize);
		},
		'complete': function() {
		}
	});

	var $active2 = $('#head-v2 .pages .' + pageItems[2]),
		x2 =  $active2.position().left,
		newX2 = 738,
		y2 =  $active2.position().top,
		dX2 = Math.abs(newX2 - x2)

	$active2.animate({'left': newX2}, {
		'step': function() {
			var left = $active2.position().left,
				pos = Math.abs(left - x2),
				proc = 100 - Math.round((dX2 - pos) / dX2 * 100)

			$active2
				//.css({'top': y2 - 100 * proc / 100})
				.css({'top': y2 - 65*Math.sin(left/234)});


			//console.log(100 * proc / 100, '-', 125*Math.sin(left/240) + 95);
		},
		'complete': function() {
			$('#head-v2 .pages .' + pageItems[0]).find('.caption-clone').hide();
			checkActiveRollover();
		}
	});


	var tmp = pageItems[2];
	pageItems[2] = pageItems[0];
	pageItems[0] = pageItems[1];
	pageItems[1] = tmp;
}

function rotateR() {
	var $active = $('#head-v2 .pages .' + pageItems[0]),
		x =  $active.position().left,
		newX = 738,
		dX = Math.abs(newX - x)

	$active.animate({'left': newX, 'top': 220}, {
		'step': function() {
			var pos = Math.abs($active.position().left - x),
				proc = 100 - Math.round((dX - pos) / dX * 100),
				fontSize = 24 - 12 / 100 * proc;

			$active.find('.caption').css({
				'font-size': fontSize,
				'opacity': 1 - proc / 100
			});
			$active.find('.link-items').css({
				'opacity': 1 - proc / 100
			});
			$active.find('.caption-clone').show().css({
				'font-size': fontSize,
				'opacity': proc / 100
			});
			$active.find('.img').css({
				'height': 600 - 500 * proc / 100,
				'width': (600 - 500 * proc / 100) /  2.247191,
				'top': -240 + 130 * proc / 100,
				'right': 410 - 105 * proc / 100
			});

//			console.log(600 - 500 * proc / 100);
		},
		'complete': function() {
		}
	});

	var $active1 = $('#head-v2 .pages .' + pageItems[2]),
		x1 =  $active1.position().left,
		newX1 = 484,
		dX1 = Math.abs(newX1 - x1)

	$active1.animate({'left': newX1, 'top': 295}, {
		'step': function() {
			var pos = Math.abs($active1.position().left - x1),
				proc = 100 - Math.round((dX1 - pos) / dX1 * 100),
				fontSize = 12 + 12 / 100 * proc;

			$active1.find('.caption').show().css({
					'font-size': fontSize,
					'opacity': proc / 100
				});
			$active1.find('.link-items').show().css({
					'opacity': proc / 100
				});
			$active1.find('.caption-clone').css({
					'font-size': fontSize,
					'opacity': 1 - proc / 100
				});
			$active1.find('.img').css({
				'height': 100 + 500 * proc / 100,
				'width': (100 + 500 * proc / 100) /  2.247191,
				'top': -110 - 130 * proc / 100,
				'right': 305 + 105 * proc / 100
			});

			//console.log(fontSize);
		},
		'complete': function() {
		}
	});

	var $active2 = $('#head-v2 .pages .' + pageItems[1]),
		x2 =  $active2.position().left,
		newX2 = 0,
		y2 =  $active2.position().top,
		dX2 = Math.abs(newX2 - x2)

	$active2.animate({'left': newX2}, {
		'step': function() {
			var left = $active2.position().left,
				pos = Math.abs(left - x2),
				proc = 100 - Math.round((dX2 - pos) / dX2 * 100)

			$active2
				//.css({'top': y2 - 100 * proc / 100})
				.css({'top': y2 - 65*Math.sin(left/234)})

			//console.log(100 * proc / 100, '-', 125*Math.sin(left/240) + 95);
		},
		'complete': function() {
			$('#head-v2 .pages .' + pageItems[0]).find('.caption-clone').hide();
			checkActiveRollover();
		}
	});


	var tmp = pageItems[0];
	pageItems[0] = pageItems[2];
	pageItems[2] = pageItems[1];
	pageItems[1] = tmp;
}