baseurl = 'http://webdev3.campai.nl/lilCin3/';

function activateWindow(href,title,caption){
	myLightWindow.activateWindow({href: href,title: title, caption: caption});
}

function findPos(obj) {
	var curleft = curtop = 0;

	if (obj.offsetParent) {
		do {
			curleft += obj.offsetLeft;
			curtop += obj.offsetTop;
		} while (obj = obj.offsetParent);
		
		return [curleft,curtop];
	}
}


function toggleCategory(selectedCategoryID) {
	var numberOfParentCategories = document.getElementById('numberOfParentCategories').innerHTML;
	
	var categories = new Array(numberOfParentCategories);
	
	for (i=1; i<=numberOfParentCategories; i=i+1) {
	    
	    var categoryID = document.getElementById('categoryID' +i).innerHTML;
	    var arrayPosition = i-1;
		categories[arrayPosition] = 'childCategories' +categoryID;
	}
	
	/* First we disable all the child categories */
	for (i=0; i<numberOfParentCategories; i=i+1) {
		document.getElementById(categories[i]).style.display = 'none';
	}
	
	/* And then we enable the selected one */
	Effect.toggle('childCategories' +selectedCategoryID, 'blind', { duration: 0.2 });
}


function hideChildCategory() {
	alert('verbergen');
}

function getCartContents() {
	new Ajax.Updater('cartContainer', baseurl +'shop_cart');
}


function addProduct(productContainerID) {

	/*
		First we set the quantity of products that we want to put in the cart.
		We check to see if there are products in the cart (if there are no products in the cart
		the value is set to 0) and add 1.
	*/
		var numberOfDifferentProducts = document.getElementById('numberOfDifferentProducts').innerHTML;
		numberOfDifferentProducts = parseFloat(numberOfDifferentProducts);
		
		if (numberOfDifferentProducts == 0) {
			var currentQuantity = 0;
		} else {
			
			if(document.getElementById(productContainerID +'Quantity') != null) {
				var currentQuantity = document.getElementById(productContainerID +'Quantity').innerHTML;
			} else {
				var currentQuantity = 0;
			}
		}
		
		currentQuantity = parseFloat(currentQuantity);
		newQuantity = currentQuantity + 1;
	

	/*
		After that we retrieve the productID from the name of the unique product div.
		This way we have a proper ID to send along with our http request.
	*/
		productID = productContainerID.substring(7);
	
	/* Now we calculate the new price */
		var productPrice = document.getElementById('productprice' +productID).innerHTML;
		productPrice = parseFloat(productPrice);
		var productPriceTotal = newQuantity * productPrice;
		productPriceTotal = productPriceTotal.toFixed(2);
		

	/*
		Now we have all the information we need to do a database query through AJAX.
		After the request is finished we update the cart contents.
	*/
		var url = baseurl +'shop_handleCart';
		var params = 'action=add&productID=' +productID +'&productQuantity=' +newQuantity +'&productPrice=' +productPriceTotal;
		
		new Ajax.Request
		(
			url,
			{
			  method: 'get',
			  parameters: params,
			  onComplete: completeFunction
			}
		);
	
	function completeFunction(request) {
		getCartContents();
	}
}


function deleteProduct(productID, refresh) {

	var answer = confirm('Weet u zeker dat u dit product uit uw winkelwagentje wilt verwijderen?');

	if(answer) {
			
		newQuantity = 0;
		
		document.getElementById('product' +productID +'Quantity').innerHTML = newQuantity;
		
		var url = baseurl +'shop_handleCart';
		var params = 'action=delete&productID=' +productID;
		
		new Ajax.Request
		(
			url,
			{
			  method: 'get',
			  parameters: params,
			  onComplete: function(){
			  	if(refresh == false){
			  		getCartContents();	
			  	}
			  	else{
			  		document.location.reload(true);
			  	}
			  }
			}
		);
	}
}


function changeQuantityOfProducts(refresh) {

	var numberOfDifferentProducts = document.getElementById('numberOfDifferentProducts').innerHTML;
	
	for (i=1; i<=numberOfDifferentProducts; i++) {		
		var productID = document.getElementById('product_'+i).innerHTML;
		var productID = parseFloat(productID);
		var newQuantity = document.getElementById('product'+productID+'QuantityInput').value;
		var newQuantity = parseFloat(newQuantity);
		//var productPrice = document.getElementById('product'+productID+'PriceTotal').innerHTML;
		//productPrice = parseFloat(productPrice);
		var productsBasePrice = document.getElementById('productBasePrice'+i).innerHTML;
		var productsBasePrice = parseFloat(productsBasePrice);
		
		var productPriceTotal = newQuantity * productsBasePrice;
		productPriceTotal = productPriceTotal.toFixed(2);
		
		var url = baseurl +'shop_handleCart';
		var params = 'action=changeQuantity&productID=' +productID +'&productQuantity=' +newQuantity +'&productPrice=' +productPriceTotal;
		
		new Ajax.Request
		(
			url,
			{
			  method: 'get',
			  parameters: params,
			  onComplete: function(){
			  	if(refresh == false){
			  		getCartContents();
					alert('De aantallen zijn bijgewerkt.');
			  	}
			  	else{
			  		document.location.reload(true);
			  	}
			  }
			}
		);
	}
}

/*
	These functions are being used by the product photo scroller
*/
	function MoveLeft() {
		/* FIXME: these statements should be put in a function outside this one */
			var numberOfPhotos = document.getElementById('numberOfPhotos').innerHTML;
			numberOfPhotos = parseFloat(numberOfPhotos);
		
			var currentlySelectedPhoto = document.getElementById('currentlySelectedPhoto').innerHTML;
			currentlySelectedPhoto = parseFloat(currentlySelectedPhoto);
		
			/* !! Change this to the width of a single photo !! */
			var widthOfSingleImage = 122;
			var numberOfPixelsToShift = widthOfSingleImage;
		/* End */
		
		
		/* First we set the the number of the selected photo */
		var currentlySelectedPhoto = currentlySelectedPhoto-1;
		
		/*
			Then we check to see if the user clicked the link 'previous photo' while the first photo is being displayed.
			In that case we want to display the last picture so the scroller actually behaves as a true scroller.
		*/
		if (currentlySelectedPhoto == 0) {
			currentlySelectedPhoto = numberOfPhotos;
			
			/*
				We set the number of pixels to shift. Added a '-' so we shift everything the right direction.
				Since we're moving the other way we can skip the width of 1 single photo.
			*/
			var numberOfPixelsToShift = -(numberOfPhotos-1)*numberOfPixelsToShift;
			
			new Effect.MoveBy('bigBox', 0, numberOfPixelsToShift , 
		    	{
		        	duration: 0.4,  
		            transition: Effect.Transitions.sinoidal
				}
			);
		}
		else {
			new Effect.MoveBy('bigBox', 0, numberOfPixelsToShift , 
		    	{
		        	duration: 0.4,  
		            transition: Effect.Transitions.sinoidal
				}
			);
		}
	
		document.getElementById('currentlySelectedPhoto').innerHTML = currentlySelectedPhoto;
	}
	

	function MoveRight() {
		/* FIXME: these statements should be put in a function outside this one */
			var numberOfPhotos = document.getElementById('numberOfPhotos').innerHTML;
			numberOfPhotos = parseFloat(numberOfPhotos);
		
			var currentlySelectedPhoto = document.getElementById('currentlySelectedPhoto').innerHTML;
			currentlySelectedPhoto = parseFloat(currentlySelectedPhoto);
		
			/* !! Change this to the width of a single photo !! */
			var widthOfSingleImage = 122;
			var numberOfPixelsToShift = widthOfSingleImage;
		/* End */
		
		
		/* First we set the the number of the selected photo */
		var currentlySelectedPhoto = currentlySelectedPhoto+1;
		
		/*
			Then we check to see if the user clicked the link 'next photo' while the last photo is being displayed.
			In that case we want to display the first picture so the scroller actually behaves as a true scroller.
		*/
		if (currentlySelectedPhoto == numberOfPhotos+1) {
			currentlySelectedPhoto = 1;
			
			/*
				We set the number of pixels to shift. Since we're moving the other way we have to add the width of 1 single photo.
			*/
			var numberOfPixelsToShift = (numberOfPhotos-1)*numberOfPixelsToShift;
			
			new Effect.MoveBy('bigBox', 0, numberOfPixelsToShift , 
		    	{
		        	duration: 0.4,  
		            transition: Effect.Transitions.sinoidal
				}
			);
		}
		else {
			new Effect.MoveBy('bigBox', 0, -numberOfPixelsToShift , 
				{
		        	duration: 0.4,  
		            transition: Effect.Transitions.sinoidal
				}
			);
		}
	
		document.getElementById('currentlySelectedPhoto').innerHTML = currentlySelectedPhoto;
	}
/* End of scroller functions */


function placeBid() {
	var url = baseurl +'shop_placeBid';
	var productID = document.getElementById('uniqueProductID').innerHTML;
	var price = document.getElementById('field1').value;
	var params = 'productID=' +productID +'&bidPrice=' +price;
	
	new Ajax.Request (
		url,
		{
		  method: 'get',
		  parameters: params
		}
	);
}

function setPayButton(load){
	var paymethod = document.getElementById('paymethod').value;
	if(paymethod != ''){
		document.getElementById('nextButton').disabled = false;
		document.getElementById('payForm').action = baseurl+'shop_saveOrder/method='+paymethod;
	}
	else{
		document.getElementById('nextButton').disabled = true;
	}
}

function showHideElement(elementID){
	elementDiv = document.getElementById(elementID);
	if(elementDiv.style.display == 'none'){
		elementDiv.style.display = 'block';
	}
	else if(elementDiv.style.display == 'block'){
		elementDiv.style.display = 'none';
	}
	
}

function selectCustomizeColor(color){
	var colors = new Array();
	colors[0] = 'pink';
	colors[1] = 'blue';
	colors[2] = 'white';
	colors[3] = 'purple';
	colors[4] = 'green';
	colors[5] = 'red';
	colors[6] = 'yellow';
	colors[7] = 'brown';
	
	for(var i=0; i<8; i++){
		if(colors[i]==color){
			document.getElementById('customizeColor_'+colors[i]).className = 'customizeColorSelected';
			document.offerteForm.customizeColor.value = colors[i];
		}
		else{
			document.getElementById('customizeColor_'+colors[i]).className = 'customizeColor';
		}
	}
}

function selectCustomizeColorCheldCart(color){
	var colors = new Array();
	colors[0] = 'pink';
	colors[1] = 'blue';
	colors[2] = 'white';
	colors[3] = 'silver';
	colors[4] = 'green';
	colors[5] = 'red';
	
	for(var i=0; i<6; i++){
		if(colors[i]==color){
			document.getElementById('customizeColor_'+colors[i]).className = 'customizeColorSelected';
			document.offerteForm.customizeColor.value = colors[i];
		}
		else{
			document.getElementById('customizeColor_'+colors[i]).className = 'customizeColor';
		}
	}
}