$(document).ready(function () {

	/**
	 * Deze file zorgt voor de foto slider onder
	 **/

	var popUpDiv = $('div.imagePopup');
	
	// Init photo scroller
	// Sneller: autoScrollStep:20
	$("div#photo-scroller").smoothDivScroll();
	
	// Naar rechts scrollen
	
	//$("#test").swipe( swipeOptions );

	var swipeScroller = function(event,direction) {
		
		//autoScrollStep: 1 and autoScrollInterval: 15)
		
		//$("div#photo-scroller").smoothDivScroll("option","autoScrollInterval",null);
		
		if(direction == "right")
		{
			$("div#photo-scroller").smoothDivScroll("option","autoScrollDirection","endlessloopleft");
			$("div#photo-scroller").smoothDivScroll("startAutoScroll");
		}
		else if(direction == "left")
		{
			$("div#photo-scroller").smoothDivScroll("option","autoScrollDirection","endlessloopright");
			$("div#photo-scroller").smoothDivScroll("startAutoScroll");
		}
		
		setTimeout(function(){ 
			$("div#photo-scroller").smoothDivScroll("stopAutoScroll");
		}, 500);
	}

	// add listeners
	if (isIos()) {
		// Sneller scrollen ivm iPad
		$("div#photo-scroller").smoothDivScroll("option","autoScrollStep",50);
		
		var swipeOptions =
		{
			swipe:swipeScroller,
			threshold: 75
		}
		
		$('div#photo-scroller-wrapper').swipe(swipeOptions);
		
		$('#scrollRight').click(function () {
			$("div#photo-scroller").smoothDivScroll("option","autoScrollDirection","endlessloopright");
			$("div#photo-scroller").smoothDivScroll("startAutoScroll");
			
			setTimeout(function(){ 
				$("div#photo-scroller").smoothDivScroll("stopAutoScroll");
			}, 500);
		});
	
		// Naar links scrollen
		$('#scrollLeft').click(function () {
			$("div#photo-scroller").smoothDivScroll("option","autoScrollDirection","endlessloopleft");
			$("div#photo-scroller").smoothDivScroll("startAutoScroll");
			
			setTimeout(function(){ 
				$("div#photo-scroller").smoothDivScroll("stopAutoScroll");
			}, 500);
		});
	}
	else
	{
		$('#scrollRight').hover(function () {
			$("div#photo-scroller").smoothDivScroll("option","autoScrollDirection","endlessloopright");
			$("div#photo-scroller").smoothDivScroll("startAutoScroll");
			popUpDiv.hide();
		},function () {
			// Stop scroll
			$("div#photo-scroller").smoothDivScroll("stopAutoScroll");
		});
	
		// Naar links scrollen
		$('#scrollLeft').hover(function () {
			$("div#photo-scroller").smoothDivScroll("option","autoScrollDirection","endlessloopleft");
			$("div#photo-scroller").smoothDivScroll("startAutoScroll");
			popUpDiv.hide();
		},function () {
			// Stop scroll
			$("div#photo-scroller").smoothDivScroll("stopAutoScroll");
		});

		// Popup activeren over image in slider
		attachPhotoHover();
	}
	
		
	// scroll little onLoad
	$("div#photo-scroller").smoothDivScroll("option","autoScrollStep",1);
	$("div#photo-scroller").smoothDivScroll("option","autoScrollDirection","endlessloopright");
	$("div#photo-scroller").smoothDivScroll("startAutoScroll");
	setTimeout(function(){ 
		if (isIos()) $("div#photo-scroller").smoothDivScroll("option","autoScrollStep",50);
		else $("div#photo-scroller").smoothDivScroll("option","autoScrollStep",5);
		$("div#photo-scroller").smoothDivScroll("stopAutoScroll"); 
	}, 2000);
	
});

function attachPhotoHover() {
	
	//alert('aaa');
	var popUpDiv = $('div.imagePopup');
	
	if(!popUpDiv.length)
	{	
		// POPUP image div
		popUpDiv = $('<div/>');
		
		popUpDiv.hide().addClass('imagePopup').hover(function () {

		},function () {
			$(this).hide();
		});
		
		$('div#photo-scroller').prepend(popUpDiv);
	}
	
	$("div#photo-scroller img").hover(function () {
		
		var parentLink = $(this).parent();
		var imgElm = $(this);
		
		// Hover delay
		hover_intent = setTimeout(function(){
			
			$("div#photo-scroller").smoothDivScroll("stopAutoScroll"); 

			var hoverHtml = '';

			// Type product
			if(parentLink.attr('rel') == "recipe")
			{
				var productType = 'Recept';
			}
			else if(parentLink.attr('rel') == "tip")
			{
				var productType = 'Tip';
			}

			hoverHtml += '<div class="type">' + productType + '</div>';

			// Foto
			hoverHtml += '<div class="photo"><a href="' + parentLink.attr('href') + '"><img src="' + imgElm.attr('src') + '" /></a></div>';

			// Korte omschrijving

			var productTitle = parentLink.attr('title');

			if(productTitle) {
				hoverHtml += '<div class="description">' + productTitle + '</div>';
			}

			var position = imgElm.offset();

			popUpDiv.css('left',position.left).html(hoverHtml).show();
			
		},400);
		
		
	},function () {
		
		try{
			clearTimeout(hover_intent);
		}
		catch(e){};
		
	});
}