// JavaScript Document

$(document).ready(function(){
	var $scollpage = $('#collection-holder'); 
	var $main = $('#main'); 
	
	jQuery.easing.def = "easeOutQuad";

	initFilter();
	updatePositions(1);
	//updateMain();
	
	$('#page-count').mousedown(function(){
		alert('scrolltop: '+$scollpage.scrollTop() + '\nmain-height: ' + $main.height() + '\nwindow-height:' + $(window).height() + '\nmain-height-windowheight' + ($main.height() - $(window).height()));
	});
	
	$scollpage.scroll(function(){
		//get this pagenr and ++
		var nextPageNr = $('#page-count').html();
		nextPageNr++;
		
		/*		
		//when to load		
		if  ($scollpage.scrollTop() == $main.height() - $(window).height()){
			//// PLACEHOLDER \\\\
			
			//nieuwe div die de pagina load  (welke url / target to load / callback
			$('<div/>').load('?page=' + nextPageNr + ' #main li.item-ph',function(){ 
				//when page is loaded:
				//strip the last item-closer 'clear-class'
				$('#item-ph-closer').remove();
				//append items to main
				$(this).appendTo('#main');    
				$(this).attr('id','temp-holder');
				//attr('style','position: absolute; left: 0px; top: 0px; -webkit-transform: transl' );			
				//move items from temp-holder to page-holder
				$('#placeholders').append($('#temp-holder li.item-ph'));
				//remove temp-holder
				$(this).remove();
				//add the item-closer back to pageholder
				$('#placeholders').append('<li id="item-ph-closer" class="clear"></li>');
			});
			
			//// ITEMS \\\\
			
			//nieuwe div die de pagina load  (welke url / target to load / callback
			$('<div/>').load('?page=' + nextPageNr + ' #main div.product-filterlist-thumb-holder',function(){ 
				//when page is loaded:
				//strip the last item-closer 'clear-class'
				$('#item-closer').remove();
				//append items to main
				$(this).appendTo('#main');    
				$(this).attr('id','temp-holder');
				//attr('style','position: absolute; left: 0px; top: 0px; -webkit-transform: transl' );			
				//move items from temp-holder to page-holder
				$('#items').append($('#temp-holder div.product-filterlist-thumb-holder'));
				//remove temp-holder
				$(this).remove();
				//add the item-closer back to pageholder
				$('#items').append('<div id="item-closer" class="clear"></div>');
				updatePositions(1);
			});
			
			//update pagecount
			$('#page-count').html(nextPageNr);
			//setTimeout(updateMain,100);
		}*/
	});
	
});


function initFilter(){
	//filter current items
	$('#placeholders li').each(function(){
		var x = $(this).offset().left;
		var y = $(this).offset().top;
		$(this).attr('data-offsetY',y);
		$(this).attr('data-offsetX',x);
	});		
}

function updateMain(){
	var h = $('#placeholders').css('height');
	$('#collection-holder').css('height',h);	
	$('#items').css('height',h);	
}

function updatePositions(first){
	//for each item
	var xmargin = 0;
	var count = 0; 
	
	var $scollpage = $('#wrapper'); 
	
	var aniTime = 500;
	
	var phOffsetX = Array();
	var phOffsetY = Array();
	$('#items div.product-filterlist-thumb-holder').each(function(){
		//get this id
		var id = $(this).attr('id');
		id = id.substring(4);
		phOffsetX[count] = $('#itemph'+id).offset().left;
		if( count == 0 ){ xmargin = phOffsetX[count]  }
		phOffsetX[count]  -= xmargin;
		
		//add the scrollpage top to the li-item top, substract the placeholder top
		phOffsetY[count] = ($('#itemph'+id).offset().top - $('#itemph1').offset().top) ;
	
		//replace later by CSS3 animation
		if($(this).hasClass('hidden') || first == 1){
			$(this).css({ 'top' : phOffsetY[count]+'px', 'left' : phOffsetX[count] +'px'});
		}
		else{
			$(this).animate({ 'top' : phOffsetY[count]+'px', 'left' : phOffsetX[count] +'px'},aniTime); 	
		}
		count++;
	});
}

function updateOffset(obj){
	$(obj).each(function(){
		var x = $(this).offset().left;
		var y = $(this).offset().top;
		$(this).attr('data-offsetX',x);
		$(this).attr('data-offsetY',y);
	});	
}


function filter(obj){
	//get parameters
	var paraArr = Array();
	$('.cbfilter').each(function(){
		var key = $(this).attr('name');
		if( $(this).attr('checked') ){ 
			paraArr[key] = 1;
		}
		else{
			paraArr[key] = 2;
		}
	});
	//filter current items
	$(obj).each(function(){
		if(paraArr[ $(this).attr('data-cat') ] == 1){
			if($(this).hasClass('hidden')){
				$(this).removeClass('hidden');
				//if(obj == '#items .item') { $(this).addClass('animate'); }
			}
		}
		else{
			if($(this).hasClass('clear')){
				//do nothing	
			}
			else{
				if(obj == '#items .product-filterlist-thumb-holder') {  $(this).removeClass('animate'); }
				$(this).addClass('hidden');
			}
		}
	});
	//create parastr
	var paraStr = '';
	for(var k in paraArr)
	{
		//example'red-1|green-0|blue-0'
		paraStr += k+'-'+paraArr[k]+'|';
	}
	
	//update offset
	updateOffset(obj);
	
	updatePositions();
	
	//update sessions for later items.
	$('#jsbox').load('./php/js_updatesession.php?parastr='+paraStr,function(){ /* callback */ });	
}