var stripItemWidth = 82;

function makeSmall(stripItem){
	var myEffect = new Fx.Morph(stripItem, {duration: 'normal'});
	 
	myEffect.start({
		'height': [180], 
		'width': [77] 
	});		
	//large pics
	stripItem.getChildren()[0].getChildren()[1].fade('out'); 
	stripItem.getChildren()[0].getChildren()[1].setStyle('visibility', 'hidden');
	//thumbs
	stripItem.getChildren()[0].getChildren()[0].setStyle('visibility', 'visible');
	stripItem.getChildren()[0].getChildren()[0].fade('in'); 
	//infohok
	stripItem.getChildren()[1].setStyle('opacity', 0);
	stripItem.getChildren()[1].setStyle('visibility', 'visible');
	stripItem.getChildren()[1].fade('in'); 
}

function showNewItem(stripItem){
	//thumb
	stripItem.getChildren()[0].getChildren()[0].setStyle('visibility', 'visible');
	//info
	stripItem.getChildren()[1].setStyle('visibility', 'visible');
	
	stripItem.setStyle('visibility', 'visible');
}

function hideLastItem(stripItem){
	stripItem.setStyle('visibility', 'hidden');
	//thumb
	stripItem.getChildren()[0].getChildren()[0].setStyle('visibility', 'hidden');
	//info
	stripItem.getChildren()[1].setStyle('visibility', 'hidden');
}

function makeLarge(stripItem){
	var myEffect = new Fx.Morph(stripItem, {duration: 'normal'});
	 
	myEffect.start({
		'height': [200], 
		'width': [202] 
	});	
	
	//large pics
	stripItem.getChildren()[0].getChildren()[1].setStyle('opacity', 0);
	stripItem.getChildren()[0].getChildren()[1].setStyle('visibility', 'visible');
	stripItem.getChildren()[0].getChildren()[1].fade('in'); 
	//thumbs
	stripItem.getChildren()[0].getChildren()[0].fade('out'); 
	stripItem.getChildren()[0].getChildren()[0].setStyle('visibility', 'hidden');
	//infohok
	stripItem.getChildren()[1].fade('out'); 
	stripItem.getChildren()[1].setStyle('visibility', 'hidden');
	var id = stripItem.getChildren('div.techdetails').getChildren('div.id')[0].get('text');
	var title = stripItem.getChildren('div.techdetails').getChildren('div.title')[0].get('text');
	$j('#addtobasket').removeAttr('onclick').unbind('click').click(function(){addToBasket(id, title);});
}

function removeLink(linker){
	$(linker).fade('out');
	$(linker).setStyle('visibility', 'hidden');	
}
function showLink(linker){
	$(linker).setStyle('visibility', 'visible');	
	$(linker).fade('in');	
}

function showText(numb){
	makeAllTextInvisible();

	var el = $('info_viewport').getChildren()[numb];
	el.setStyle('position', 'relative');
	el.setStyle('left', '0px');	
	el.setStyle('opacity', 0);
	el.setStyle('visibility','visible');

	if(!Browser.Engine.trident4){
		var myEffect = new Fx.Morph(el, {duration: 2000, transition: Fx.Transitions.Sine.easeOut});
		myEffect.start({
			'opacity': [1]
		});
		
	} else {
		el.setStyle('opacity', 1);	
	}
}

function makeAllTextInvisible(){
	$('info_viewport').getChildren().each(function(item){
		//item.setStyle('display', 'none');	
		item.setStyle('position', 'absolute');
		item.setStyle('left', '-10000px');	
		item.setStyle('visibility','hidden');						   
	});
}

//function that gives very child of 'viewport' a link that makes it display in the middle of the strip
function makeIndividualLinks(){
	$('strip').getChildren().each(function(item,index){
		item.getChildren()[0].addEvent('click', function(e){
			e.stop();
			putInTheMiddle(index);
		});
		item.getChildren()[1].addEvent('click', function(e){
			e.stop();
			putInTheMiddle(index);
		});
	});
}

//item is een stripitem
function putInTheMiddle(indexer){
	
	var stripItem = $('strip').getChildren()[indexer];
	var aantalItems = $('strip').getChildren().length;
	
	
	if(stripItem.getStyle('width').toInt() < 202){
		
		var largeItem = $('strip').getChildren().filter(function(item,index){
			return (item.getStyle('width').toInt() == 202);
		})[0];

		//afstand tussen stripItem en largeItem
		var offset = stripItem.getPosition(largeItem).x;
		//var leftPosStrip = $('strip').getStyle('left').toInt();	
		var leftPosStrip = $('strip').getStyle('left').toInt();
		
		if(largeItem) {
			makeSmall(largeItem);
		}
		makeLarge(stripItem);			
		
		switch(indexer){
			case 0:
				removeLink('zoek_links');
				$('zoek_rechts').getChildren()[0].tween('width',323);
				$('zoek_rechts').setStyle('width',323);				
				break;    
			case 1:
				if(leftPosStrip == -82){				
					hideLastItem($('strip').getChildren()[5]);	
					newPos = 0;
					$('strip').setStyle('left',newPos);	
				}
				$('zoek_links').getChildren()[0].tween('width',77);
				$('zoek_links').setStyle('width',77);
				$('zoek_rechts').getChildren()[0].tween('width',241);
				$('zoek_rechts').setStyle('width',241);
				if(isGroot(0)){	
					showLink('zoek_links');
				}
				break;  
			case 2:
				if (leftPosStrip == 0){
					//staat in het midden dus niks doen
				} else if (leftPosStrip == -82){
					hideLastItem($('strip').getChildren()[5]);	
					newPos = 0;
					$('strip').setStyle('left',newPos);	
				} if (leftPosStrip == -164){
					hideLastItem($('strip').getChildren()[5]);	
					hideLastItem($('strip').getChildren()[6]);	
					newPos = 0;
					$('strip').setStyle('left',newPos);						
				}
				$('zoek_links').getChildren()[0].tween('width',159);
				$('zoek_links').setStyle('width',159);
				$('zoek_rechts').getChildren()[0].tween('width',159);
				$('zoek_rechts').setStyle('width',159);
				showLink('zoek_links');
				showLink('zoek_rechts');
				break;
			case 3:
				if (leftPosStrip == 0){
					showNewItem($('strip').getChildren()[5]);					
				} else if (leftPosStrip == -82){
					//niks
				} else if (leftPosStrip == -164){
					hideLastItem($('strip').getChildren()[6]);	
				} else if (leftPosStrip == -246){
					hideLastItem($('strip').getChildren()[6]);	
					hideLastItem($('strip').getChildren()[7]);						
				} else if (leftPosStrip == -328){
					hideLastItem($('strip').getChildren()[6]);	
					hideLastItem($('strip').getChildren()[7]);		
					hideLastItem($('strip').getChildren()[8]);		
				}
				$('zoek_links').getChildren()[0].tween('width',159);
				$('zoek_links').setStyle('width',159);
				$('zoek_rechts').getChildren()[0].tween('width',159);
				$('zoek_rechts').setStyle('width',159);
				showLink('zoek_links');
				showLink('zoek_rechts');				
				newPos = -82;
				$('strip').setStyle('left',newPos);					
				break;
			case (aantalItems - 4):
				if((leftPosStrip * (-1)) / 82 == aantalItems - 5){
					hideLastItem($('strip').getChildren()[indexer + 3]);	
					newPos = leftPosStrip + 82;
					$('strip').setStyle('left',newPos);	
				} else if((leftPosStrip * (-1)) / 82 == aantalItems - 6){
					//niks
				} else if((leftPosStrip * (-1)) / 82 == aantalItems - 7){
					showNewItem($('strip').getChildren()[indexer + 2]);
					newPos = leftPosStrip - 82;
					$('strip').setStyle('left',newPos);	
				} else if((leftPosStrip * (-1)) / 82 == aantalItems - 8){
					showNewItem($('strip').getChildren()[indexer + 1]);
					showNewItem($('strip').getChildren()[indexer + 2]);
					newPos = leftPosStrip - 164;
					$('strip').setStyle('left',newPos);	
				}
				
				showLink('zoek_rechts');
				$('zoek_rechts').getChildren()[0].tween('width',159);
				$('zoek_rechts').setStyle('width',159);		
				$('zoek_links').getChildren()[0].tween('width',159);
				$('zoek_links').setStyle('width',159);					
				break;				
			case (aantalItems - 3):
				if((leftPosStrip * (-1)) / 82 == aantalItems - 5){
					//niks
				} else if((leftPosStrip * (-1)) / 82 == aantalItems - 6){
					showNewItem($('strip').getChildren()[indexer + 2]);
					newPos = leftPosStrip -82;
					$('strip').setStyle('left',newPos);	
				} else if((leftPosStrip * (-1)) / 82 == aantalItems - 7){
					showNewItem($('strip').getChildren()[indexer + 1]);
					showNewItem($('strip').getChildren()[indexer + 2]);
					newPos = leftPosStrip - 164;
					$('strip').setStyle('left',newPos);	
				}
				
				showLink('zoek_rechts');
				$('zoek_rechts').getChildren()[0].tween('width',159);
				$('zoek_rechts').setStyle('width',159);		
				$('zoek_links').getChildren()[0].tween('width',159);
				$('zoek_links').setStyle('width',159);					
				break;	
			case (aantalItems - 2):
				
				if((leftPosStrip * (-1)) / 82 == aantalItems - 5){

				} else if((leftPosStrip * (-1)) / 82 == aantalItems - 6){
					showNewItem($('strip').getChildren()[indexer + 1]);
					newPos = leftPosStrip -82;
					$('strip').setStyle('left',newPos);		
				}
				showLink('zoek_rechts');
				$('zoek_rechts').getChildren()[0].tween('width',77);
				$('zoek_rechts').setStyle('width',77);		
				$('zoek_links').getChildren()[0].tween('width',241);
				$('zoek_links').setStyle('width',241);					
				break;    
			case (aantalItems - 1):
				removeLink('zoek_rechts');
				$('zoek_links').getChildren()[0].tween('width',323);
				$('zoek_links').setStyle('width',323);			
				break;			  
			default:
				var offset = stripItem.getPosition(largeItem).x;
				
				if (offset == -164){
					hideLastItem($('strip').getChildren()[indexer + 3]);	
					hideLastItem($('strip').getChildren()[indexer + 4]);	
					newPos = leftPosStrip + 164;
					$('strip').setStyle('left',newPos);						
				} else if (offset == -82){
					hideLastItem($('strip').getChildren()[indexer + 4]);	
					newPos = leftPosStrip + 82;
					$('strip').setStyle('left',newPos);	
				} else if (offset == 207){
					showNewItem($('strip').getChildren()[indexer + 2]);	
					newPos = leftPosStrip - 82;
					$('strip').setStyle('left',newPos);				
				} else if (offset == 289){
					showNewItem($('strip').getChildren()[indexer + 1]);
					showNewItem($('strip').getChildren()[indexer + 2]);
					newPos = leftPosStrip -164;
					$('strip').setStyle('left',newPos);							
				} else if (offset == 453){
					showNewItem($('strip').getChildren()[indexer + 1]);
					showNewItem($('strip').getChildren()[indexer + 2]);
					newPos = leftPosStrip -164;
					$('strip').setStyle('left',newPos);		
					
					showLink('zoek_links');
					showLink('zoek_rechts');
					$('zoek_rechts').getChildren()[0].tween('width',159);
					$('zoek_rechts').setStyle('width',159);		
					$('zoek_links').getChildren()[0].tween('width',159);
					$('zoek_links').setStyle('width',159);						
				}  else if (offset == -328){
					hideLastItem($('strip').getChildren()[indexer + 4]);
					hideLastItem($('strip').getChildren()[indexer + 3]);
					newPos = leftPosStrip + 164;
					$('strip').setStyle('left',newPos);		
					
					showLink('zoek_links');
					showLink('zoek_rechts');
					$('zoek_rechts').getChildren()[0].tween('width',159);
					$('zoek_rechts').setStyle('width',159);		
					$('zoek_links').getChildren()[0].tween('width',159);
					$('zoek_links').setStyle('width',159);						
				} else if (offset == 371){
					showNewItem($('strip').getChildren()[indexer + 1]);
					showNewItem($('strip').getChildren()[indexer + 2]);
					newPos = leftPosStrip -164;
					$('strip').setStyle('left',newPos);		
					
					showLink('zoek_links');
					showLink('zoek_rechts');
					$('zoek_rechts').getChildren()[0].tween('width',159);
					$('zoek_rechts').setStyle('width',159);		
					$('zoek_links').getChildren()[0].tween('width',159);
					$('zoek_links').setStyle('width',159);						
				} else if (offset == -246){
					hideLastItem($('strip').getChildren()[indexer + 3]);	
					hideLastItem($('strip').getChildren()[indexer + 4]);	
					newPos = leftPosStrip + 164;
					$('strip').setStyle('left',newPos);	
					
					showLink('zoek_links');
					showLink('zoek_rechts');
					$('zoek_rechts').getChildren()[0].tween('width',159);
					$('zoek_rechts').setStyle('width',159);		
					$('zoek_links').getChildren()[0].tween('width',159);
					$('zoek_links').setStyle('width',159);						
				} else {
					//alert(offset);	
				}
		}	
		showText(indexer);
	} else {
		//niks doen
	}
}

function isGroot(numberke){
	return ($('strip').getChildren()[numberke].getStyle('width').toInt() == 202);
}

function inTheMiddle(stripItem){
	return (stripItem.getPosition().x - $('strip').getStyle('left').toInt());
}

function go_rechts(){
	var aantalPics = $('strip').getChildren().length;
	var leftPos = $('strip').getStyle('left').toInt();
	//starts with 0
	var idNr = (leftPos / stripItemWidth) * (-1);		
	//eerste is groot
	if(idNr == 0 &&  $('strip').getChildren()[0].getStyle('width').toInt() == 202){
		var firstItem = $('strip').getChildren()[0];
		var secondItem = $('strip').getChildren()[1];			
		makeSmall(firstItem);
		makeLarge(secondItem);
		showLink('zoek_links');
		$('zoek_rechts').getChildren()[0].tween('width',241);
		$('zoek_rechts').setStyle('width',241);
		showText(1);			
	//tweede is groot	
	} else if(idNr == 0 &&  $('strip').getChildren()[1].getStyle('width').toInt() == 202){
		var secondItem = $('strip').getChildren()[1];			
		var thirdItem = $('strip').getChildren()[2];			
		makeSmall(secondItem);
		makeLarge(thirdItem);		
		
		$('zoek_links').getChildren()[0].tween('width',159);
		$('zoek_links').setStyle('width',159);
		$('zoek_rechts').getChildren()[0].tween('width',159);
		$('zoek_rechts').setStyle('width',159);
		showText(2);						
	//derde is groot	
	} else if(idNr < (aantalPics - 5)){
		var thirdItem = $('strip').getChildren()[idNr + 2];
		var fourthItem = $('strip').getChildren()[idNr + 3];
		var fifthItem = $('strip').getChildren()[idNr + 4];
		var newItem = $('strip').getChildren()[idNr + 5];
		
		makeSmall(thirdItem);
			
		makeLarge(fourthItem);

		//move strip
		var newLeftPos = leftPos - stripItemWidth;		
		//$('strip').tween('left', newLeftPos);
		$('strip').setStyle('left', newLeftPos);	
		showNewItem(newItem);
		
		showText(idNr + 3);
	//vierde is groot
	} else if($('strip').getChildren()[idNr + 3].getStyle('width').toInt() == 77 && $('strip').getChildren()[idNr + 4].getStyle('width').toInt() == 77){			
		var thirdItem = $('strip').getChildren()[idNr + 2];
		var fourthItem = $('strip').getChildren()[idNr + 3];			
		makeSmall(thirdItem);
		makeLarge(fourthItem);
		showText(idNr + 3);
		$('zoek_rechts').getChildren()[0].tween('width',77);
		$('zoek_rechts').setStyle('width',77);
		$('zoek_links').getChildren()[0].tween('width',241);
		$('zoek_links').setStyle('width',241);
	//vijfde is groot	
	} else if($('strip').getChildren()[idNr + 4].getStyle('width').toInt() == 77){
		var fourthItem = $('strip').getChildren()[idNr + 3];			
		var fifthItem = $('strip').getChildren()[idNr + 4];			
		makeSmall(fourthItem);
		makeLarge(fifthItem);	
		
		removeLink('zoek_rechts')
		$('zoek_links').getChildren()[0].tween('width',323);
		$('zoek_links').setStyle('width',323);
		showText(idNr + 4);
	}
			
	if($('events_links').getStyle('visibility') == 'hidden'){
		showLink('events_links');
	}
}

function go_links(){
	var aantalPics = $('strip').getChildren().length;
	var leftPos = $('strip').getStyle('left').toInt();
	//starts with 0
	var idNr = (leftPos / stripItemWidth) * (-1);		


	//vijfde is groot
	if(idNr == aantalPics - 5 &&  $('strip').getChildren()[$('strip').getChildren().length - 1].getStyle('width').toInt() == 202){
		var lastItem = $('strip').getChildren()[$('strip').getChildren().length - 1];
		var forlastItem = $('strip').getChildren()[$('strip').getChildren().length - 2];
		makeSmall(lastItem);
		makeLarge(forlastItem);
		showLink('zoek_rechts');
		$('zoek_links').getChildren()[0].tween('width',241);	
		$('zoek_links').setStyle('width',241);	
		showText($('strip').getChildren().length - 2);
	//vierde is groot	
	} else if(idNr == aantalPics - 5 &&  $('strip').getChildren()[$('strip').getChildren().length - 2].getStyle('width').toInt() == 202){
		var forlastItem = $('strip').getChildren()[$('strip').getChildren().length - 2];
		var forforlastItem = $('strip').getChildren()[$('strip').getChildren().length - 3];
		makeSmall(forlastItem);
		makeLarge(forforlastItem);
		$('zoek_rechts').getChildren()[0].tween('width',159);
		$('zoek_rechts').setStyle('width',159);
		$('zoek_links').getChildren()[0].tween('width',159);
		$('zoek_links').setStyle('width',159);
		showText($('strip').getChildren().length - 3);
	//derde is groot --> moven
	} else if(idNr > 0){
		var thirdItem = $('strip').getChildren()[idNr + 1];
		var fourthItem = $('strip').getChildren()[idNr + 2];
		var fifthItem = $('strip').getChildren()[idNr + 3];
		var lastItem = $('strip').getChildren()[idNr + 4];
		
		hideLastItem(lastItem);
		
		makeLarge(thirdItem);
		makeSmall(fourthItem);
		showText(idNr + 1);

		//move strip
		var newLeftPos = leftPos + stripItemWidth;
		//$('strip').tween('left', newLeftPos);
		$('strip').setStyle('left', newLeftPos);
	//tweede is groot			
	} else if($('strip').getChildren()[0].getStyle('width').toInt() == 77 && $('strip').getChildren()[1].getStyle('width').toInt() == 77){			
		var firstItem = $('strip').getChildren()[0];
		var seconditem = $('strip').getChildren()[1];	
		var thirdItem = $('strip').getChildren()[2];	
		makeSmall(thirdItem);
		makeLarge(seconditem);
		showText(1);
		
		$('zoek_links').getChildren()[0].tween('width',77);
		$('zoek_links').setStyle('width',77);
		$('zoek_rechts').getChildren()[0].tween('width',241);
		$('zoek_rechts').setStyle('width',241);
	//eerst is groot	
	} else if($('strip').getChildren()[0].getStyle('width').toInt() == 77){
		var firstItem = $('strip').getChildren()[0];
		var seconditem = $('strip').getChildren()[1];				
		makeSmall(seconditem);
		makeLarge(firstItem);	
		$('zoek_rechts').getChildren()[0].tween('width',323);
		$('zoek_rechts').setStyle('width',323);
		
		
		removeLink('zoek_links');
		
		showText(0);
	}
	if($('events_rechts').getStyle('visibility') == 'hidden'){
		showLink('events_rechts');
	}		
}

$j(document).ready(function() {

	if(document.getElementById('strip')!=undefined)
	{		
		makeIndividualLinks();
		$j('#events_rechts').click(function(){go_rechts();});
		$j('#events_links').click(function(){go_links();});
		putInTheMiddle(0);
	}
});