var loadSaveNamePopup = false;

function switchProduct(productId){
		
	$("div#product-card-block-"+productId).hide("slow",function () {
		$("div#product-card-block-"+productId).remove();
	});
	
	$("div#product-"+productId).show("slow");
	
}

/*--------------------------------------------------------------*/

function switchImage( img, url ) {
    img.src = url;
}

/*--------------------------------------------------------------*/
function changePrice(id) {
	
	newprice = document.getElementById('product-price-'+id).value;
	//document.getElementById('product-block-price-'+id).innerHTML = newprice;
	
	newpriceclean = newprice.replace(',','');
	newpriceclean = newpriceclean.replace('.','');
					
	document.getElementById('product-block-price-clean-'+id).value = newpriceclean;
}

/*--------------------------------------------------------------*/
function changeAlcImg(productId) {

	if ( document.getElementById('product-alcohol-'+productId).src == 'http://www.with-compliments.nl/site/img/form/aan.gif'){
		document.getElementById('product-alcohol-'+productId).src = 'http://www.with-compliments.nl/site/img/form/uit.gif';
		document.getElementById('product-block-alc-'+productId).value = '0';
	} else {
		document.getElementById('product-alcohol-'+productId).src = 'http://www.with-compliments.nl/site/img/form/aan.gif';
		document.getElementById('product-block-alc-'+productId).value = '1';
	}
}
	
/*--------------------------------------------------------------*/	
function clearEigenVariant(id){
	
	if (document.getElementById('eigen-variant-naam-'+id).value == 'naam variant...'){
		document.getElementById('eigen-variant-naam-'+id).value = '';
	}
	
	if (document.getElementById('eigen-variant-prijs-'+id).value == '0,00'){
		document.getElementById('eigen-variant-prijs-'+id).value = '';
	}
}

/*--------------------------------------------------------------*/		
var backgroundHover = 'product-hover';
var currentDragItem = '';

$(document).ready(function(){
	
	$("div.product").draggable({
		
		helper: 'clone', 
		scroll: true
	});

	$("div.col").droppable({
		
		accept:	 ".product",
		hoverClass: backgroundHover,
		tolerance:  "pointer",
		drop: function(ev, ui) {
			
			// eerst kijken of product nog past past ja of nee.
			var dropElemId = ui.draggable.attr("id");
			var currentColProducts = $("#"+this.id).children("div.product-block").length;
			
			if (currentColProducts < productsPerCol){
		   		
				var dropElem = document.getElementById(dropElemId+"-block").innerHTML;
			
				$(this).append(dropElem);
				
				$("div#"+dropElemId).hide("normal");
				
				var productId = dropElemId.substring(8);
				$("#product-block"+productId).attr("id","product-card-block-"+productId);
				
				$(this, '.product-thumb').supersleight();
				$('#card-status').fadeOut('normal')
				
			} else {
				
				alert('Deze koffiespecial past niet meer in deze kolom');
				
			}
			
			currentDragItem = '';			
		}
	});
	
});

/*--------------------------------------------------------------*/

function ajaxLogin()
{
	var username = $('input[name=p-username]').val();
	var password = $('input[name=p-password]').val();
	var remember = $('input[name=p-auto]').val();
	
	$('#login-loader').fadeIn('fast');
	$('#err .error_box').hide('fast');
	
	$.getJSON('ajax/login.php?username=' + username + '&password=' + password + '&auto=' + remember, 
		function(data) {
			switch(data.status) 
			{
				case 'OK':
					var loginstr = 'u bent ingelogd als <strong>' + data.user.name_first + ' ' + data.user.name_last + 
					'</strong> <img src="img/icons/login-icon.jpg" border="0" style="margin-top: 2px; margin-bottom: -1px;" /> ' +
					'<a href="?action=logout">uitloggen</a>';

					$('#menu_my_account').attr('onclick', '');
					$('#menu_my_account').attr('href', '/site/?action=my');
					$('#login-p-save').attr('id', 'card-name');
					$('#login').html(loginstr);
					
					if ($('#card-name-popup').length && loadSaveNamePopup) {
						centerPopup('card-name-popup');
						switchPopup('login-p-popup', 'card-name-popup');
					} else {
						disablePopup('login-p-popup', 1);
						if (nextAction != '') {
							document.location = '?action=' + nextAction;
							nextAction = '';
						}
						
						if (nextEval != '') {
							eval(nextEval);
							nextEval = '';
						}
					}
							
					break;
					
				case 'ERROR':
					$('#err').html('<div class="error_box" style="display: none; margin-bottom: 7px;">' + data.err_msg + '</div>');
					$('#err .error_box').slideDown('fast');
					$('input[name=p-password]').val('');
					$('input[name=p-password]').focus();
					
					break;
			}
			
			$('#login-loader').fadeOut('fast');
		}
	);
}

/*--------------------------------------------------------------*/

function saveCard()
{
	var card_name = $('input[name=p-card_name]').val();
	
	$('#card_name-loader').fadeIn('fast');
	$('#name-err .error_box').slideUp('fast');
	
	$.getJSON('ajax/save_card.php?card_name=' + card_name, 
		function(data) {
			switch(data.status) 
			{
				case 'OK':
				    pageTracker._trackPageview('/track_funnel/wc_opslaan/');
					document.location = '?action=my&action2=cart';							
					break;
					
				case 'ERROR':
					$('#name-err').html('<div class="error_box" style="display: none; margin-bottom: 7px;">' + data.err_msg + '</div>');
					$('#name-err .error_box').slideDown('fast');
					$('input[name=p-card_name]').focus();
					
					break;
			}
			
			$('#card_name-loader').fadeOut('fast');
		}
	);
}
/*--------------------------------------------------------------*/

function ajaxRegister()
{
	var q = '';
	var gender = $('input[name=p-gender]').val();
	var text01 = $('select[name=p-text01]').val();
	var optin1 = $('input[name=p-optin1]').attr('checked') ? 1 : 0;
		
	
	/**
	 * Het 'p-' gedeelte wordt van de veldnaam afgehaald voor de submit
	 */
	
	$('#newuserform input[type=text]').each(function() {
		if ($(this).attr('name').indexOf('p-') == 0) {
			q = q + '&' + $(this).attr('name').substr(2) + '=' + escape($(this).val());
		}
	});
	
	$('#register-loader').fadeIn('fast');
	$('#register-err .error_box').hide('fast');
	
	$.getJSON('ajax/register.php?gender=' + escape(gender) + '&text01=' + escape(text01) + '&optin1=' + escape(optin1) + q, 
		function(data) {
			switch(data.status) 
			{
				case 'OK':
					$('#registered-popup .popup-content-email').html(data.user.email);
					switchPopup('newuser-p-popup', 'registered-popup');
					
					$('input[name=p-gender]').attr('checked', false);
					$('select[name=p-text01]').val('');
					$('input[name=p-optin1]').attr('checked', false);
	
					$('#newuserform input[type=text]').each(function() {
						if ($(this).attr('name').indexOf('p-') == 0) {
							$(this).val('');
						}
					});
					
					break;
					
				case 'ERROR':
					$('#register-err').html('<div class="error_box" style="display: none; margin-bottom: 7px;">' + data.err_msg + '</div>');
					$('#register-err .error_box').show('fast');
					
					break;
			}
			
			$('#register-loader').fadeOut('fast');
		}
	);
}

/*--------------------------------------------------------------*/

function ajaxLostPassword()
{
	var email = $('input[name=lostpassword-p-email]').val();
	
	$('#lostpassword-loader').fadeIn('fast');
	$('#lostpassword-err .error_box').hide('fast');
	
	$.getJSON('ajax/lostpassword.php?email=' + email, 
		function(data) {
			switch(data.status) 
			{
				case 'OK':
					$('#lostpasswordsuccess-popup .popup-content-email').html(data.user.email);
							
					centerPopup('card-name-popup');
					switchPopup('lostpassword-p-popup', 'lostpasswordsuccess-popup');
							
					break;
					
				case 'ERROR':
					$('#lostpassword-err').html('<div class="error_box" style="display: none; margin-bottom: 7px;">' + data.err_msg + '</div>');
					$('#lostpassword-err .error_box').show('fast');
					$('input[name=lostpassword-p-email]').focus();
					
					break;
			}
			
			$('#lostpassword-loader').fadeOut('fast');
		}
	);
}


/*--------------------------------------------------------------*/	

$(window).scroll(function() {
	/**
	 * Alleen deze functie uitvoeren bij de designtool
	 */
	if ($('#designtool-panel-right').length == 0) {
		return false;
	}
	
	/**
	 * Huidige scroll top
	 */
	var document_top	= $(document).scrollTop();
	
	/**
	 * Standaard top margin van de design tool (minimaal zoveel ruimte tussen
	 * de bovenkant van de browser en de designtool)
	 */
	var d_margin_top	= 15;
	
	/**
	 * Footer afmetingen. Lager dan dit mag de designtool niet komen.
	 */
	var footer_offset   = $('#step-buttons').offset();
	var footer_top	  	= footer_offset.top;
	
	/**
	 * Afmetingen van het linker paneel.
	 */
	var pl				= $('#designtool-panel-left');
	var pl_offset		= pl.offset();
	var pl_top			= pl_offset.top;
	var pl_height		= pl.height();
	
	/**
	 * Designtool afmetingen.
	 */
	var pr				= $('#designtool-panel-right');
	var pr_offset		= pr.offset();
	var pr_top			= pr_offset.top;
	var pr_height		= pr.height() + parseInt(pr.css('padding-top')) + parseInt(pr.css('padding-bottom'));
	var pr_bottom		= pr_top + pr_height;
	

	if (pr_height < pl_height)
	{
		/**
		 * In dit geval moet de designtool kunnen scrollen
		 */
		
		
		/**
		 * Berekenen van de top margin van de designtool.
		 */
		var margin_top	  = document_top - pl_top + d_margin_top;
		var max_margin_top  = footer_top - pl_top - pr_height;
		
		/**
		 * Checks op de top en bottom van de nieuwe positie van de designtool
		 */
		if (margin_top < 0) margin_top = 0;
		if (margin_top > max_margin_top) margin_top = max_margin_top;
		
		/**
		 * Huidige animatie van de designtool stoppen. Dit voorkomt vreemde bewegingen.
		 * Bug: bv het infaden van popups wordt ook gestopt.
		 */
		//pr.stop();
		
		/**
		 * Het positioneren van de designtool. Alleen als het nodig is.
		 */
		if ( pr_bottom < footer_top - d_margin_top || document_top < pr_top ) {
			/**
			 * Gebruik animate om de positie van de designtool aan te passen
			 */
			pr.animate({
				marginTop: margin_top
			}, 500, 'swing');
	
//			pl.animate({
//				marginTop: 0
//			}, 500, 'swing');
			/**
			 * Of, als animate te zwaar is, gebruik css
			 */
	//		pr.css('margin-top', margin_top);
		}
	} else {
	    pr.animate({
			marginTop: 0
		}, 500, 'swing');
	}
});




/*--------------------------------------------------------------*/	
$(document).ready(function() {
	$('.selected-product, .not-selected-product').click(function() {
		
		/**
		 * Selecteren van producten in de selectie
		 */
		var val	 = $(this).find('.selected-toggle').val();
		var newval  = 0;
		
		if (val == 0) {
			newval = 1;
			$(this).addClass('selected-product-checked');
		} else {
			$(this).removeClass('selected-product-checked');
		}
		
		$(this).find('.selected-toggle').val(newval);
	});
	
	
	$('#add-products').click(function() {
		
		/**
		 * Producten in de selectie toevoegen
		 */
		$('.not-selected-product').each(function() {
			var val	 = $(this).find('.selected-toggle').val();
			var prod_id = $(this).find('.selected-prodid').val();
			
			if (val == 1) {
				$('#selected-product-' + prod_id).show('fast');
				
				$(this).removeClass('selected-product-checked');
				$(this).hide('fast');
			}
		});
	});
	
	
	$('#remove-products').click(function() {
		
		/**
		 * Producten uit de selectie verwijderen
		 */
		$('.selected-product').each(function() {
			var val	 = $(this).find('.selected-toggle').val();
			var prod_id = $(this).find('.selected-prodid').val();
			
			if (val == 1) {
				$('#not-selected-product-' + prod_id).show('fast');
				
				$(this).removeClass('selected-product-checked');
				$(this).hide('fast');
			}
		});
	});
	
	
	$('#update-selectie').click(function() {

		/**
		 * Eerst alle producten in de rij en op de kaart onzichtbaar maken
		 */
		$("div.product").hide();
		$(".col .product-block").hide();
		
		
		/**
		 * Vervolgens kijken welke producten nog in de selectie staan. Deze
		 * moeten in de rij en op de kaart weer zichtbaar gemaakt worden.
		 */
		$('.selected-product').each(function() {
			var val	 = $(this).find('.selected-toggle').val();
			var prod_id = $(this).find('.selected-prodid').val();
			
			if ($(this).css('display') == 'block') {
				if ($('#product-card-block-' + prod_id).length == 0) {
					$("#product-" + prod_id).show();
				} 
		
				$(".col #product-card-block-" + prod_id).show();
			}
		});
		
		
		/**
		 * Producten die nog op de kaart staan maar nog steeds onzichtbaar zijn
		 * moeten verwijderd worden. Deze staan nl. niet meer in de selectie.
		 */
		$(".col").children(".product-block").each(function() {
			var check_id = $(this).attr('id');

			if ($("#" + check_id).css('display') == 'none') {
				$("#" + check_id).remove();
			}
		});
		
		setTimeout("disablePopup('product-selectie-popup', 1)", 100);
	});
	
	
	
	$('.information-icon').mouseover(function(e) {
        var src_box      = $(this).attr('rel');
        var src_contents = $('#' + src_box).html();
        var src_style    = $('#' + src_box).attr('style');   
        
        if (src_style == undefined) {
            src_style = '';
        }
        
        if (src_contents != null) {
            $('#information-box-contents').html(src_contents);
            $('#information-box').attr('style', src_style);
                        
            var box_top         = e.pageY + 10;
            var box_left        = e.pageX + 10;
            var box_height      = $('#information-box').height();
            var box_width       = $('#information-box').width();
            
            var scroll_top      = $(window).scrollTop();
            var scroll_left     = $(window).scrollLeft();
            var window_width    = $(window).width();
            var window_height   = $(window).height();
            
            if (box_left + box_width > scroll_left + window_width) {
                box_left = e.pageX - box_width - 10;
            }
            
            if (box_top + box_height > scroll_top + window_height) {
                box_top = e.pageY - box_height - 15;
            }

            $('#information-box').css({
                top:  box_top + 'px',
                left: box_left + 'px'
            });
            
            $('#information-box').fadeIn(200);
        }
	}).mouseout(function() {
	   $('#information-box').fadeOut('fast');
	});
	
	
	$('#preview-img').load(function() {
	   $('#side-loader').fadeOut('fast');
	});
	
	
	$('.question-ia a, .question-a a').toggle(
	   function() {
	       $("li.answer[rel='" + $(this).attr('name') + "']").toggle('normal');
	       $(this).css('font-weight', 'bold');
	       $(this).parent().attr('class', 'question-a');
	   },
	   function() {
	       $("li.answer[rel='" + $(this).attr('name') + "']").toggle('normal');
	       $(this).css('font-weight', 'normal');
	       $(this).parent().attr('class', 'question-ia');
	   }
	);
	
	$('#order-history-list .ordernr a').toggle(
	   function() {
	       $("#order-history-list div[rel='" + $(this).attr('name') + "']").toggle('normal');
	       $(this).css('font-weight', 'bold');
	       $(this).parent().parent().attr('class', 'order-history-item-a');
	   },
	   function() {
	       $("#order-history-list div[rel='" + $(this).attr('name') + "']").toggle('normal');
	       $(this).css('font-weight', 'normal');
	       $(this).parent().parent().attr('class', 'order-history-item-ia');
	   }
	);
});



/*--------------------------------------------------------------*/	
function check_length(area_id, length) {
	form = document.forms['naamindruk'];
	
	form[area_id].value = form[area_id].value.substr( 0, length );
	document.getElementById( 'chars_left_' + area_id ).innerHTML = length - form[area_id].value.length;
}	


/*--------------------------------------------------------------*/
function selectionToSession(submit, callback) {

	$("#card-status").hide();
	
	// create multi dimensional array
	var multidimension = new Array(2);
	for ( var i=0; i < multidimension.length; i++ ){
		multidimension[i] = new Array(4);
		for ( var j=0; j < multidimension.length; j++ ){
			multidimension[i][j] = new Array(4);
		}
	}

	// bereken het aantal kolommen van de kaart.
	var colsPerCard = ($("div#card-outside").children("div.col").length);
	var postString  = '';
	
	// loop 2 keer, buiten- en binnenzijde
	for (n = 0; n <= 1; n++ ) {
		if ( n == 0 ){
			side = 'outside';
		} else {
			side = 'inside';
		}
		// loop de beschikbare kolommen na.
		for ( i = 0; i < colsPerCard; i++ ){
			
				colId = $("div#card-"+side).children("div.col")[i].id;
				var productsInCol = ($("div#"+colId).children("div.product-block").length) ;
				
				// per product een query string aanmaken.
				for ( j = 0; j < productsInCol; j++ ){
					productId = $("div#"+colId).children("div.product-block")[j].id;
					productId = productId.substring(19);
					
					// alcohol + prijsophalen.
					alc   = document.getElementById("product-block-alc-"+productId).value;
					price = document.getElementById("product-block-price-clean-"+productId).value;

					postString = postString+'&'+side+'_'+i+'_'+j+'='+productId+'_'+alc+'_'+price;
				}
		}
	}	
	
	postString = postString + '&voorzijde_prijs=' + $('#voorzijde_prijs').val();
	
	$.getJSON('ajax/selection_to_session.php?' + postString, 
		function(data) {
			switch(data.status) 
			{
				case 'OK':
					if (submit == undefined || submit == '1') {
        				document.forms['kaart_samenstellen'].submit();
        			} else {
        				eval(callback);
        			}
							
					break;
					
				case 'ERROR':
					$("#card-status").addClass("error_box");
    				$("#card-status").slideDown("fast");
    				$("#card-status").html(data.err_msg);
    				
                    $('html,body').animate({scrollTop: 180}, 200, 'swing');
					
					break;
			}
		}
	);
}

/*--------------------------------------------------------------*/
function placeEigenVarianten() {

	var postString = '';
	
	for (i = 1; i <= 7; i++ ) {
			inputNaamValue  = document.getElementById("eigen-variant-naam-"+i).value;
			inputPrijsValue = document.getElementById("eigen-variant-prijs-"+i).value;
			
			postString = postString+'&eigen_variant_naam_'+i+'='+inputNaamValue;
			postString = postString+'&eigen_variant_prijs_'+i+'='+inputPrijsValue;
	}	
	
	$.ajax({
		type   : "POST",
		url	: "ajax/eigenvarianten_to_session.php",
		data   :  postString,
		success: function(msg){
		   disablePopup("eigen-varianten-popup",1);
		}
	});
}


/*--------------------------------------------------------------*/
function clearEigenVarianten() {

	for (i = 1; i <= 7; i++ ) {
		$("#eigen-variant-naam-"+i).val('naam variant...');
		$("#eigen-variant-prijs-"+i).val('0,00');
	}	
	
	placeEigenVarianten();
}


/*--------------------------------------------------------------*/
function showLeverancierInput (value) {
	if (value == 'anders') {
		$('#text01').attr('name','text01_tmp');
		$('#leverancier-input').attr('name','text01');
		$('#leverancier-input').show();
	} else {
		$('#text01').attr('name','text01');
		$('#leverancier-input').attr('name','');
		$('#leverancier-input').hide();
	}
}

/*--------------------------------------------------------------*/
function previewCard(preview,job_id,type,side){
	
	$('#preview-content').append('<div style="text-align: center; padding-top: 100px; padding-bottom: 100px; width: 200px;"><img src="/site/img/ajax/loader.gif" /></div>');
	$('#preview').show();

	$.ajax({
		type   : "POST",
		url	: "ajax/create_preview.php",
		success: function(msg){
			$("#preview-content").html(msg);
		}
	});
}
/*--------------------------------------------------------------*/
function previewSpecialsCard(preview,job_id,type,side){
	
	$('#preview-content').append('<div style="text-align: center; padding-top: 100px; padding-bottom: 100px; width: 200px;"><img src="/site/img/ajax/loader.gif" /></div>');
	$('#preview').show();

	$.ajax({
		type   : "POST",
		url	: "ajax/create_preview_specials.php",
		success: function(msg){
			$("#preview-content").html(msg);
		}
	});
}
/*--------------------------------------------------------------*/
function del_card(jobid,id,name){
	if (confirm('Weet u zeker dat u uw koffiekaart \'' + name + '\' wilt verwijderen?')) { 
		$.ajax({
			type   : "POST",
			url	: "ajax/layout.php",
			data   : 'action=del_card&jobid=' + jobid,
			success: function(msg){
				$("#" + id).fadeOut("slow");
			}
		});
	}
}
/*--------------------------------------------------------------*/
function delCartItem(job_id){
	$.ajax({
		type   : "POST",
		url	: "ajax/layout.php",
		data   : 'action=del_cart_item&id=' + job_id,
		success: function(msg){
			$("#job" + job_id).fadeOut("slow");
		}
	});
}
/*--------------------------------------------------------------*/