// JavaScript Document

(function($){

$(document).ready(function() {
	var link = $("<link>");
	link.attr({
			type: 'text/css',
			rel: 'stylesheet',
			href: 'http://www.makro.nl/public/site/makro-nl/get/documents/mcc_nl/mcc_nl/sliderscripts/makroslider.css'
	});
	$("head").append( link );
	
	
	$('div.Row.yellow.dividerTop .Box a img').addClass('sliderpic');
	//$(slider) = '<ul class="leaflet_slider" />';
	var $slider_ul = $('<div class="leaflet_slider Row"><ul class="slider_tabs" /></div>');
	$('div.Row.yellow.dividerTop').first().before($slider_ul);
	
	var $tabCount = $('div.Row.yellow.dividerTop').length;
	var $tabs_i = 0;
	while($tabs_i < $tabCount){
		var $tab_name = $('div.Row.yellow.dividerTop').eq($tabs_i).find('h2').text();
		var $tab_content = '<li class="slider_tab tab' + $tabs_i + '">'+
						   '<span class="tabname">' + $tab_name + '</span>' +
						   '<ul class="slider_cats">';
		var $cat_i = 0;
		$('div.Row.yellow.dividerTop').eq($tabs_i).find('h3').each(function(){
			var $catname = $(this).text();
			$tab_content += '<li class="slider_cat cat' + $cat_i + '"><span class="cat_name">' + $catname + '</span><div class="leaflets_wrap"><ul class="cat_leaflets">';
			$(this).parent().find('.Image').each(function(){
				$tab_content += '<li class="leaflet">' + $(this).html() + '</li>';
			});
			$tab_content += '</ul></div></li>';
			$cat_i ++;
		});
		
		
		$tab_content += '</ul></li>';
		$('.leaflet_slider .slider_tabs').append($tab_content);
		
		$tabs_i ++;
	}
	
	$('.slider_tab').eq(0).addClass('active_tab');
	$('.slider_tab .tabname').click(function(){
		$('.slider_tab').removeClass('active_tab');
		$(this).parent().addClass('active_tab');
		$(this).parent().find('.slider_cat').removeClass('show');
		$(this).parent().find('.slider_cat').eq(0).addClass('show');
		$(this).parent().find('.slider_cat.show ul.cat_leaflets').setCatWidth();
	});
	$('.slider_cat').eq(0).addClass('show');
	$('.slider_cat .cat_name').click(function(){
		$('.slider_cat').removeClass('show');
		$(this).parent().addClass('show');
		$(this).parent().find('ul.cat_leaflets').setCatWidth();
	});
	$('div.Row.yellow.dividerTop').remove();
	
	$(window).bind("load", function() {
		$('.active_tab .show ul.cat_leaflets').setCatWidth();
	});
	$(window).bind("resize", function(){
		$('.active_tab .show ul.cat_leaflets').setCatWidth();
	});
	
});
$.fn.setCatWidth = function(){
	var $catWidth = 0;
	$(this).find('li.leaflet').each(function(){
		$catWidth += $(this).find('img').width() + Math.round(parseFloat($(this).find('img').css('borderWidth')) + 0.5) + Math.round(parseFloat($(this).css('marginRight')) + 0.5 );
		//alert($(this).width() + parseFloat($(this).css('marginRight')));
	});
	$(this).width($catWidth);
	if($catWidth > $(this).parent().width()){
		//$(this).slideCat($catWidth);
		$(this).leafletSlideBtns();
	}
}
$.fn.slideCat = function(catWidth){
	// deze functie wordt nu niet meer gebruikt. "Te ingewikkeld" voor het bejaarde publiek van Makro.
	$(this).parent().mousemove(function(event){
		var $containerWidth = $(this).width();
		var offset = $(this).offset();
		xMargin = -1 * ((event.pageX - offset.left)/$(this).width()) * (catWidth - $containerWidth);
		$(this).children('.cat_leaflets').css('marginLeft', xMargin);
	});
}
$.fn.leafletSlideBtns = function(){
	if($(this).parent().find('.slideBtn').length){
	}else{
		var $btnLeft = $('<div class="leftBtn slideBtn">');
		var $btnRight = $('<div class="rightBtn slideBtn">');
		$(this).parent().before($btnLeft);
		$(this).parent().after($btnRight);
	}
	$('.leftBtn').click(function(){
		var $scrollValue = $(this).parent().find('.leaflets_wrap').scrollLeft();
		var $newScrollVallue = $scrollValue - (4 * $(this).parent().find('ul.cat_leaflets li').width());
		$(this).parent().find('.leaflets_wrap').animate({scrollLeft: $newScrollVallue}, 'slow');
	});
	$('.rightBtn').click(function(){
		var $scrollValue = $(this).parent().find('.leaflets_wrap').scrollLeft();
		var $newScrollVallue = $scrollValue + (4 * $(this).parent().find('ul.cat_leaflets li').width());
		$(this).parent().find('.leaflets_wrap').animate({scrollLeft: $newScrollVallue}, 'slow');
	});
}

})(jQuery);