// JavaScript Document

var invalidEmailText = "Ongeldig e-mailadres";
var emailExistsText = "U bent aangemeld op onze nieuwsbrief";
var successText = "U bent aangemeld op onze nieuwsbrief";

var isIE = ($.browser.msie) ? true : false;

$(window)
	.load(function(){
		fixLayout();
	})
	.resize(function(){
		fixLayout();
	});

$(window)
	.load(function(){
		fixLayout();
			$("#subscribeEmail").keypress(function(event) {
				if (event.keyCode == '13') {
					event.stopPropagation();
					event.preventDefault();
			$('div.newsletter-subscribe-form input.submit-btn').click();
			}
	});
});

function subscribe(inputObj) {
    var email = $("#subscribeEmail").val();
    if (email != "" && email != "Uw e-mailadres") {
        $.post("NewsletterSubscribe.aspx", { email: email },
            function (data) {
                if (data == "success") {
                    $('div.newsletter-subscribe-form').hide();

                    $('div.thank-message ').html('<img alt="" src="/images/thank-check.png">' + successText);

                    $('div.thank-message').show();
                }
                else if (data == "exists") {
                    $('div.newsletter-subscribe-form').hide();

                    $('div.thank-message ').html('<img alt="" src="/images/thank-check.png">' + emailExistsText);

                    $('div.thank-message').show();

                }
                else if (data == "error") {
                    $("#subscribeEmail").val(invalidEmailText);
                    $('#subscribeEmail').addClass('invalid');
                }
            });
    }
}

function onFocus(inputObj, defaultText) {
    if ($.trim($(inputObj).val()) == defaultText || $(inputObj).val().toLowerCase() == invalidEmailText.toLowerCase() || $(inputObj).val().toLowerCase() == emailExistsText.toLowerCase() || $(inputObj).val().toLowerCase() == successText.toLowerCase()) {
		$(inputObj).val("").removeClass("inactive");
	}
}

function onBlur(inputObj, defaultText) {
    if (($.trim($(inputObj).val()) == "") || ($(inputObj).val().toLowerCase() == defaultText.toLowerCase())) {
		$(inputObj).val(defaultText).addClass("inactive");
	}
}

function fixMainNav() {
	var $activeItem = $('ul.main-navigation li.active');
	$activeItem.prepend('<ins class="left"><!--  --></ins><ins class="right"><!--  --></ins>');
	var $activeSpan = $('span', $activeItem);
	var $leftIns = $('ins.left', $activeItem);
	var $rightIns = $('ins.right', $activeItem);
	var spanWidth = $activeSpan.width();
	var lw = 23 + Math.floor(spanWidth / 2);
	$leftIns.width(lw);
	$rightIns.width(spanWidth + 46 - lw);
	$('ul.main-navigation a').focus(function() { $(this).blur(); });
}

function fixLayout() {
	var $pageContent = $('div.page-content');
	$pageContent.css('height', '');
	var docHeight = $('form').height();
	var winHeight = $(window).height();
	if (docHeight < winHeight) {
		$pageContent.height(winHeight - 193);
	}
}

function initCarousel(t) {
	if (!t || t < 5) { t = 5; }
	var $carouselHolder = $('div.carousel-holder');
	var slidesNumber = $('li', $carouselHolder).length;
	var currentSlide = 0;
	$('li', $carouselHolder).hide();
	$('li:first-child', $carouselHolder).fadeIn(0);
	if (slidesNumber > 1) {
		setInterval(nextSlide, t * 1600);
	}
	
	function nextSlide() {
		$('li:eq(' + currentSlide + ')', $carouselHolder).fadeOut(800);
		currentSlide++; 
		if (currentSlide == slidesNumber) { currentSlide = 0; }
		$('li:eq(' + currentSlide + ')', $carouselHolder).fadeIn(800);
	}
}

function initBrandsPaging(t) {
	if (!t || t < 5) { t = 5; }
	var $carouselHolder = $('ul.brands-carousel');
	var $pagerHolder = $('div.brands-carousel-holder div.pager');
	var itemsNumber = $('li', $carouselHolder).length;
	var pagesNumber = Math.ceil(itemsNumber / 6);
	var lastPageItemsNumber = itemsNumber - (pagesNumber - 1) * 6;
	var currentPage = 0;
	var timer = 0
	
	$('li:lt(6)', $carouselHolder).css('display', 'inline');
	$carouselHolder.fadeIn(0);
	
	if (pagesNumber > 1) {
		$pagerHolder.hide();
		for (var i = 0; i < pagesNumber;i ++) {
			$pagerHolder.append('<span><!--  --></span>');
		}
		$('span:eq(' + currentPage + ')', $pagerHolder).addClass('active');
		$pagerHolder.fadeIn(0);
		timer = setInterval(nextPage, t * 1600);
	}
	
	function nextPage() {
		$carouselHolder.fadeOut(200, function() {
			$('li', this).hide();
			$('span', $pagerHolder).removeClass('active');
			currentPage++;
			var endLoop = 6;
			if (currentPage == pagesNumber) { currentPage = 0; }
			if (currentPage == pagesNumber - 1) { endLoop = lastPageItemsNumber; }
			for (i = currentPage * 6; i < currentPage * 6 + 6; i++) {
				$('li:eq(' + i + ')', $carouselHolder).css('display', 'inline');
			}
			$('span:eq(' + currentPage + ')', $pagerHolder).addClass('active');
			$(this).fadeIn(0);
		});
	}
}

function initBrands(t) {
	if (!t || t < 5) { t = 5; }
	var $brandsHolder = $('ul.brands-list');
	var $brandImage = $('div.brands-image img.brand-image');
	$brandImage.load(function() {
		$(this).stop(true, true);
		$(this).fadeIn(200);
	});
	var brandsNumber = $('li', $brandsHolder).length;
	var i;
	var cuurentItem = 0;
	var timer;
	var isFading = false;
	var newItem = null;
	
	var currentItem = 0;
	$('li', $brandsHolder).each(function(i) {
		var logoPath = $('img', this).attr('src');
		$('a', this)
			.append('<ins style="background-image:url(' + logoPath + ')"><!--  --></ins>')
			.click(function() {
				if ($(this).parent().hasClass('active')) { return; }
				if (isFading) { return; }
				clearInterval(timer);
				newItem = i;
				nextItem();
				timer = setInterval(nextItem, t * 1600);
			});
	});
	
	$('li:eq(' + currentItem + ') ins', $brandsHolder).fadeIn(0);
	$('li:eq(' + currentItem + ')', $brandsHolder).addClass('active');
	
	if (brandsNumber > 1) {
		timer = setInterval(nextItem, t * 1600);
	}
	
	function nextItem() {
		if (isFading) { return; }
		isFading = true;
		$('li:eq(' + currentItem + ') ins', $brandsHolder).fadeOut(0);
		$('li:eq(' + currentItem + ')', $brandsHolder).removeClass('active');
		currentItem = (newItem == null) ? currentItem + 1 : newItem;
		newItem = null;
		if (currentItem == brandsNumber) { currentItem = 0; }
		var imgPath = $('li:eq(' + currentItem + ') a', $brandsHolder).attr('data-img');
		$brandImage.fadeOut(200, function() {
			$(this).attr('src', imgPath);
		});
		$('li:eq(' + currentItem + ') ins', $brandsHolder).fadeIn(0, function() { isFading = false; });
		$('li:eq(' + currentItem + ')', $brandsHolder).addClass('active');
	}
}

function initProductsCarousel() {
	var $carouselHolder = $('div.products-carousel-holder');
	var $productsList = $('ul.products-list', $carouselHolder);
	
	var itemsNumber = $('li', $productsList).length;
	var currentItem = 0;
	var isMoving = false;
	var objectParams = new Array();
	
	if (itemsNumber < 6) {
		$productsList.width(itemsNumber * 188).css('left', (940 - itemsNumber * 188) / 2);
		
		$('li.item', $productsList)
			.each(function(i) {
				var obj = new Object();
				obj.width = 0;
				obj.height = 0;
				objectParams.push(obj);
				$('img.product', this).load(function() {
					objectParams[i].width = $(this).width();
					objectParams[i].height = $(this).height();
					
					$(this).width(objectParams[i].width / 2.5).height(objectParams[i].height / 2.5).css({'margin-top' : - objectParams[i].height / 5, 'margin-left' : - objectParams[i].width / 5, 'visibility' : 'visible'}).fadeTo(0, 0.5);
					
					if (i == currentItem) {
						$(this).width(objectParams[i].width).height(objectParams[i].height).css({'margin-top' : - objectParams[i].height / 2, 'margin-left' : - objectParams[i].width / 2, 'top' : 165}).fadeTo(0, 1).parent().addClass('active');
					}
				});
				$(this).click(function() {
					showItem(i);
				});
			})
			.hover(
				function() {
					if ($(this).hasClass('active')) { return; }
					$('img.product', this).stop(true, true);
					$('img.product', this).fadeTo(200, 0.8);
				},
				function() {
					if ($(this).hasClass('active')) { return; }
					$('img.product', this).fadeTo(200, 0.5);
				}
			);
		
		$('li.item:eq(1) img.product', $productsList).css('left', 124);
		$('li.item:eq(0) div.text', $productsList).show();
		
		function showItem(i) {
			$('li.item:eq(' + currentItem + ') img.product', $productsList).animate({'width': objectParams[currentItem].width / 2.5, 
																			'height' : objectParams[currentItem].height / 2.5,
																			'margin-top' : - objectParams[currentItem].height / 5,
																			'margin-left' : - objectParams[currentItem].width / 5,
																			'opacity': 0.5,
																			'top' : 200}, 300).parent().removeClass('active').find('div.text').fadeOut(100);
			if (currentItem > 1) { $('li.item:eq(' + (currentItem - 1) + ') img.product', $productsList).animate({'left' : 94}, 300); }
			if (currentItem < itemsNumber - 1) { $('li.item:eq(' + (currentItem + 1) + ') img.product', $productsList).animate({'left' : 94}, 300); }
			currentItem = i;
			$('li.item:eq(' + currentItem + ') img.product', $productsList).animate({'width': objectParams[currentItem].width, 
																					'height' : objectParams[currentItem].height,
																					'margin-top' : - objectParams[currentItem].height / 2,
																					'margin-left' : - objectParams[currentItem].width / 2,
																					'opacity' : 1,
																					'top' : 165}, {duration : 300, queue : false})
																			.parent().addClass('active').find('div.text').delay(300).fadeIn(600);
			if (currentItem > 1) { $('li.item:eq(' + (currentItem - 1) + ') img.product', $productsList).animate({'left' : 64}, {duration : 300, queue : false}); }
			if (currentItem < itemsNumber - 1) { $('li.item:eq(' + (currentItem + 1) + ') img.product', $productsList).animate({'left' : 124}, {duration : 300, queue : false}); }
		}
		
		return;
	}
	
	var $firstThree = $('li.item:lt(5)', $productsList).clone();
	var $lastThree = $('li.item:gt(' + (itemsNumber - 6) + ')', $productsList).clone();
	$firstThree.appendTo($productsList);
	$lastThree.prependTo($productsList);
	
	currentItem = 5;
	itemsNumber = $('li', $productsList).length;
	$productsList.width(itemsNumber * 188).css('left', - 188 * 3);
	
	$('li.item', $productsList)
		.each(function(i) {
			var obj = new Object();
			obj.width = 0;
			obj.height = 0;
			objectParams.push(obj);
			$('img.product', this).load(function() {
				objectParams[i].width = $(this).width();
				objectParams[i].height = $(this).height();
				
				$(this).width(objectParams[i].width / 2.5).height(objectParams[i].height / 2.5).css({'margin-top' : - objectParams[i].height / 5, 'margin-left' : - objectParams[i].width / 5, 'visibility' : 'visible'}).fadeTo(0, 0.5);
				
				if (i == currentItem) {
					$(this).width(objectParams[i].width).height(objectParams[i].height).css({'margin-top' : - objectParams[i].height / 2, 'margin-left' : - objectParams[i].width / 2, 'top' : 165}).fadeTo(0, 1).parent().addClass('active');
				}
			});
			$(this).click(function() {
				nextItem(i - currentItem);
			});
		})
		.hover(
			function() {
				if ($(this).hasClass('active')) { return; }
				$('img.product', this).stop(true, true);
				$('img.product', this).fadeTo(200, 0.8);
			},
			function() {
				if ($(this).hasClass('active')) { return; }
				$('img.product', this).fadeTo(200, 0.5);
			}
		);
	
	$('li.item:eq(4) img.product', $productsList).css('left', 64);
	$('li.item:eq(6) img.product', $productsList).css('left', 124);
	$('li.item:eq(5) div.text', $productsList).show();
	
	function nextItem(dir) {
		if (isMoving || dir == 0) { return; }
		
		isMoving = true;
		
		if (currentItem < 4 && dir < 0) {
			tuneHolder(itemsNumber - 10);
		}
		
		if (currentItem > itemsNumber - 5 && dir > 0) {
			tuneHolder(- itemsNumber + 10);
		}
		
		$('li.item:eq(' + currentItem + ') img.product', $productsList).animate({'width': objectParams[currentItem].width / 2.5, 
																				'height' : objectParams[currentItem].height / 2.5,
																				'margin-top' : - objectParams[currentItem].height / 5,
																				'margin-left' : - objectParams[currentItem].width / 5,
																				'opacity': 0.5,
																				'top' : 200}, 500).parent().removeClass('active').find('div.text').fadeOut(100);
		$('li.item:eq(' + (currentItem - 1) + ') img.product', $productsList).animate({'left' : 94}, 500);
		$('li.item:eq(' + (currentItem + 1) + ') img.product', $productsList).animate({'left' : 94}, 500);
		
		currentItem += dir;
		
		$productsList.animate({'left': - 188 * (currentItem - 2)}, 500, function() { isMoving = false; });
		
		$('li.item:eq(' + currentItem + ') img.product', $productsList).animate({'width': objectParams[currentItem].width, 
																				'height' : objectParams[currentItem].height,
																				'margin-top' : - objectParams[currentItem].height / 2,
																				'margin-left' : - objectParams[currentItem].width / 2,
																				'opacity' : 1,
																				'top' : 165}, {duration : 500, queue : false})
																		.parent().addClass('active').find('div.text').delay(300).fadeIn(600);
		$('li.item:eq(' + (currentItem - 1) + ') img.product', $productsList).animate({'left' : 64}, {duration : 500, queue : false});
		$('li.item:eq(' + (currentItem + 1) + ') img.product', $productsList).animate({'left' : 124}, {duration : 500, queue : false});
	}
	
	function tuneHolder(delta) {
		$('li.item:eq(' + currentItem + ') img.product', $productsList).css({'width': objectParams[currentItem].width / 2.5, 
																			'height' : objectParams[currentItem].height / 2.5,
																			'margin-top' : - objectParams[currentItem].height / 5,
																			'margin-left' : - objectParams[currentItem].width / 5,
																			'opacity': 0.5,
																			'top' : 200}).parent().removeClass('active').find('div.text').hide();
		$('li.item:eq(' + (currentItem - 1) + ') img.product', $productsList).css({'left' : 94});
		$('li.item:eq(' + (currentItem + 1) + ') img.product', $productsList).css({'left' : 94});
		
		currentItem += delta;
		
		$productsList.css({'left': - 188 * (currentItem - 2)});
		
		$('li.item:eq(' + currentItem + ') img.product', $productsList).css({'width': objectParams[currentItem].width, 
																			'height' : objectParams[currentItem].height,
																			'margin-top' : - objectParams[currentItem].height / 2,
																			'margin-left' : - objectParams[currentItem].width / 2,
																			'opacity': 1,
																			'top' : 165}).parent().addClass('active').find('div.text').show();
		$('li.item:eq(' + (currentItem - 1) + ') img.product', $productsList).css({'left' : 64});
		$('li.item:eq(' + (currentItem + 1) + ') img.product', $productsList).css({'left' : 124});
	}
	
	$(document)
	.jkey('left' , function(){
		nextItem(-1);
	})
	.jkey('right' , function(){
		nextItem(1);
	});
}