/* collection scroller */
var numberOfCollectieThumbs;
var selectedCollectieThumb;
var firstVisibleCollectieThumbIndex = 0;
var visibleCollectieThumbs 			= 5;
var collectieThumbWidth 			= 108;

/* kaartenscroller */
var numberOfKaarten;
var firstVisibleKaartIndex 			= 0;
var visibleKaarten		 			= 5;
var kaartWidth			 			= 131;

function showAllMoments() {
	$('.hidden-li').css('display','list-item');
	$('#show-more').css('display','none');
}

$(document).ready(function(){	
	
	if($('#collectiescroller').length > 0) {
		initCollectieScroller();
	}
		
	if($('#kaartenscroller').length > 0) {
		initKaartenScroller();
	}
	
	PNGFix();
	$('#qry').attr('placeholder',"Typ trefwoord(en)");
	$('#qry').placeholder();
	
	
	initImageSlide();
});

function initCollectieScroller() {
	var thumbs = $('#collectiescroller-canvas').children();	
	numberOfCollectieThumbs = thumbs.length;
	
	$('#collectiescroller-canvas').css('width', (collectieThumbWidth * numberOfCollectieThumbs));
		
	$('#collectiescroller-left-btn').click(function(){
		
		if(firstVisibleCollectieThumbIndex > 0) {
			firstVisibleCollectieThumbIndex -=1;
			
			if($(selectedCollectieThumb).hasClass('collectiescroller-thumb')) {
				selectedCollectieThumb = thumbs[($(selectedCollectieThumb).index()-1)];
				showNewCollectie();
			}
			collectieScrollerMove();	
			
		}
			
		return false;														
	});
	
	$('#collectiescroller-right-btn').click(function(){
		
		if(firstVisibleCollectieThumbIndex <= (numberOfCollectieThumbs-visibleCollectieThumbs) -1 ) {
			firstVisibleCollectieThumbIndex +=1;
			
			if($(selectedCollectieThumb).hasClass('collectiescroller-thumb')) { 
				selectedCollectieThumb = thumbs[($(selectedCollectieThumb).index()+1)];
				showNewCollectie();
			}
			
			collectieScrollerMove();
			
		}
			
		return false;														
	});
	
	$('.collectie-thumb').click(function(ev){
		ev.preventDefault();
		selectedCollectieThumb = this;			
		moveCollectieScrollerTab();
		showNewCollectie();
		
	}); 
	
}

function collectieScrollerMove() {	
	
	var newX = firstVisibleCollectieThumbIndex * -collectieThumbWidth;	
	$('#collectiescroller-canvas').stop().animate({left:newX});
	
}

function moveCollectieScrollerTab() {	
	if($(selectedCollectieThumb).hasClass('collectiescroller-thumb')) {		
		var newX = 18 + ($(selectedCollectieThumb).index() - firstVisibleCollectieThumbIndex) * collectieThumbWidth;
		
		if($.browser.msie && $.browser.version == '6.0') {
			newX = newX - 674;
		}
		
		$('#collectiescroller-tab').stop().animate({left:newX});		
	} else {
		var newX = 584;
		if($.browser.msie && $.browser.version == '6.0') {
			newX = -108;
		}
		$('#collectiescroller-tab').stop().animate({left:newX},500);
	}
}

function showNewCollectie() {
	var designerId = $(selectedCollectieThumb).find('.designerId').val();
	var categoryId = $(selectedCollectieThumb).find('.categoryId').val();
	
	var data = 'ajax=ajax';
	
	if(designerId > 0) {
		data += '&designerId='+designerId;
	}
	else if(categoryId > 0) {
		data += '&categoryId='+categoryId;
	}
	
	if((designerId != '' && designerId != undefined) || (categoryId != '' && categoryId != undefined)) {
		$('#kaartenscroller-canvas').stop().fadeTo(500,0,function(){			
			$.ajax({
					url: '/home',
					type: 'POST',
					data: data,
					success: function(html) {
						$('#kaartenscroller-canvas').empty();
						$('#kaartenscroller-canvas').append(html);
						
						var kaarten = $('#kaartenscroller-canvas').children();	
						numberOfKaarten = kaarten.length;	
						$('#kaartenscroller-canvas').css('width', (kaartWidth * numberOfKaarten));
						
						firstVisibleKaartIndex = 0;
						$('#kaartenscroller-canvas').css('left',0);
						$('#kaartenscroller-canvas').fadeTo(500,1);
					}
			});			  
		});	
	}
}
function initKaartenScroller() {	
	var kaarten = $('#kaartenscroller-canvas').children();	
	numberOfKaarten = kaarten.length;
	
	$('#kaartenscroller-canvas').css('width', (kaartWidth * numberOfKaarten));	
	
	$('#kaartenscroller-left-btn').click(function(){
		
		if(firstVisibleKaartIndex > 0) {
			firstVisibleKaartIndex -=1;
			kaartenScrollerMove();	
			
		}
			
		return false;														
	});
	
	$('#kaartenscroller-right-btn').click(function(){
		
		if(firstVisibleKaartIndex <= (numberOfKaarten-visibleKaarten) -1 ) {
			firstVisibleKaartIndex +=1;			
			kaartenScrollerMove();			
		}
			
		return false;														
	});	
	
}

function kaartenScrollerMove() {	
	var newX = firstVisibleKaartIndex * -kaartWidth;	
	$('#kaartenscroller-canvas').stop().animate({left:newX});	
}

function PNGFix() {
	if($.browser.msie && $.browser.version == '6.0') {
		/**
		 * Logo
		 */	
		fixPNGImg($('#logo').find('img'));
		
		/**
		 * Scroller
	     */
		$('#collectiescroller-canvas').find('img').each(function() {
			fixPNGImg(this);
		});
		fixPNGImg($('#collectie-highlight').find('img'));
		
		fixPNGImg($('#blok-1').find('img'));
	}
}

function fixPNGImg(element) {
	var img = $(element);
	var src = $(img).attr('src');
	var width = $(img).width();
	var height = $(img).height();		
	$(img).attr('src','/default/img/blank.gif');
	$(img).width(width);
	$(img).height(height);
	$(img).css('filter',"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+src+"', sizingMethod='scale');");
}

function fixPNGBg(element) {
	var bg = $(element);
	var src = $(bg).css('background-image').replace('url("','').replace('")','');	
	alert(src);			
	$(bg).css('background-image','none');	
	$(bg).css('filter',"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+src+"', sizingMethod='scale');");
}

function initImageSlide() {
	if($('#slides').length > 0) {
		$('#slides').each(function () {
			var amount = $(this).find('.slide').length;
			$(this).find('.slidescroller').width(amount*481);		
		});	
	
		setInterval(slideImage,7000);
	}
}

function slideImage() {	
	var scroller = $('#slides').find('.slidescroller');
	var width = $(scroller).width();
	var marginLeft = parseFloat($(scroller).css('left').replace('px',''));
	var newMarginLeft = marginLeft-481;
		
	if(width <= Math.abs(newMarginLeft)) {
		newMarginLeft = 0;	
	}	
	
	var hover = $('#slides').find('.buttons').find('.hover');
	$(hover).removeClass('hover');
	if($(hover).next('.button').length > 0) {
		$(hover).next('.button').addClass('hover');
	}
	else {
		$(hover).parent().find(':first-child').addClass('hover');
	}
	
	$(scroller).animate({left: newMarginLeft+'px'},{duration: 600});
}