/*
* Dynamit
*/

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

	// initialize
    var thirdToggleActive = false;
	var $tabs = $('#tabs').tabs();
	$('#tabs').show();
	var disabled = [];
	
	$('#tabs-wrapper').hide();

	if (top.location.href.indexOf('#tabs') > 0 || $('#messages_product_view').html() != '') {
		$('.product-shop').hide();
		$('.block-additional').hide();
		$('#tabs-wrapper').show();
	}

	$('.btn-cart-wrapper .btn-cart').click(function(){
		$('.product-shop').hide();
		$('#tabs-wrapper').show();
		$('.block-additional').hide();
		return false;
	});

	$(".ui-tabs-panel").each(function(i){

		var totalSize = $(".ui-tabs-panel").size() - 1;

		if (i == 0) {
			next = i + 2;
			$(this).append("<a href='#tabs' class='next-tab mover next-tab-first' rel='" + next + "'>Volgende stap &#187;</a>");
		} else if (i != totalSize) {
		next = i + 2;
			$(this).append("<a href='#tabs' class='next-tab mover' rel='" + next + "'>Volgende stap &#187;</a>");
		}

		if (i != 0) {
			disabled.push(i);
			prev = i;
		   	$(this).append("<a href='#tabs' class='prev-tab mover' rel='" + prev + "'>&#171; Vorige stap</a>");
		}

		// last step
		if (i == totalSize) {
			$(this).append("<a href='#' class='tab-show-cart' rel='" + (i + 1) + "'>Volgende stap &#187;</a>");
		}

	});

	var disabledAll = disabled;
	$tabs.tabs('option', 'disabled', disabled);

	// activate first step
	step1('#tabs #fragment-1');
	

	// events

	$('.next-tab-first').click(function(){
		loadDefaults();
	});

    function nextTab(el) {
        var step = $(el).attr("rel");
		$tabs.tabs('enable', step);
		$tabs.tabs('select', step);
		eval("step" + step + "('#tabs #fragment-" + step + "')");
		$tabs.tabs('select', $(el).attr("rel"));
    }

    $('.next-tab').click(function() {nextTab(this)});
/*
	$('.next-tab').click(function() {
		var step = $(this).attr("rel");
		$tabs.tabs('enable', step);
		$tabs.tabs('select', step);
		eval("step" + step + "('#tabs #fragment-" + step + "')");
		//return false;
	});
*/
	$('.prev-tab').click(function() {
		$tabs.tabs('select', $(this).attr("rel"));
		//return false;
	});

	$('.tab-show-cart').click(function(){
		// show 'add to cart'
		$('.product-options-bottom').each(function(){
			$(this).show();
		});
		// hide link
		$(this).hide();
		return false;
	});

	function reset() {
        thirdToggleActive = false;
		$tabs.find('input:radio, input:checkbox').removeAttr('checked');
		$tabs.find('input:text, input:file').val('');
		$tabs.find('select').val('');
		$('.tab-show-cart', $tabs).show();
	}

	function loadDefaults()
	{
		$('#fragment-2 input:radio:eq(1)', $tabs).attr('checked', 'checked');
		$('#fragment-3 input:radio:eq(1)', $tabs).attr('checked', 'checked');
		$('#fragment-5 input:radio:first', $tabs).attr('checked', 'checked');
		$('#fragment-6 input:radio:first', $tabs).attr('checked', 'checked');
	}

	// configure individual steps
	/* Step 1:  */
	function step1(id) {
		var $panel = $(id);
		step1.html = $panel.html();
		var $onToggle = $panel.find('input:radio:first');
		var $offToggle = $panel.find('input:radio:eq(2)');
		var $thirdToggle = $panel.find('input:radio:eq(1)');

		if (typeof step1.init == 'undefined') {
			$onToggle.attr('checked', 'checked');
			step1.init = true;
		}

		$offToggle.click(function(){
			reset();
			$(this).attr('checked','checked');
			$('.product-options-bottom').show();
			$panel.find('.next-tab').hide();
			$tabs.tabs('option', 'disabled', disabledAll);
		});
		$thirdToggle.click(function(){
			reset();
            
			$(this).attr('checked','checked');
            $('.product-options-bottom').hide();
            $panel.find('.next-tab').attr('rel', 5).show();
//			$('.product-options-bottom').show();
//			$panel.find('.next-tab').hide();
			$tabs.tabs('option', 'disabled', disabledAll);
            $('#fragment-5').find('.prev-tab').attr('rel', 1);
            $('#fragment-5').find('.next-tab').unbind('click').click(function(){
                $('.product-options-bottom').show();
        		$('#fragment-5').find('.next-tab').hide();
            });

			return true;
		});
		$onToggle.click(function(){
            
			$('.product-options-bottom').hide();
			$panel.find('.next-tab').attr('rel', 2).show();
            $tabs.tabs('option', 'disabled', disabledAll);

            var $panel5 = $('#fragment-5');
            $panel5.find('.prev-tab').attr('rel', 4);
            $panel5.find('.next-tab').attr('rel', 6).unbind('click').click(function() {nextTab(this)});
            $panel5.find('.next-tab').show();


		});

		// get first state
		if ($offToggle.is(':checked')) {
			$('.product-options-bottom').show();
			$panel.find('.next-tab').hide();
		}
		if ($thirdToggle.is(':checked')) {
			$('.product-options-bottom').show();
			$panel.find('.next-tab').hide();
		}
		if ($onToggle.is(':checked')) {
			$('.product-options-bottom').hide();
			$panel.find('.next-tab').show();
		}

	}
	/* Step 2: greeting */
	function step2(id) {
		var $panel = $(id);
		if (typeof step2.init == 'undefined') {
			var $customGreeting = $panel.find('input:text');
			var $customGreetingLabel = $panel.find('label:eq(0)');
			var $optionlist = $tabs.find('#fragment-2 .options-list:eq(0)');
			if ($optionlist.length > 0 && $customGreeting.length > 0) {
				$optionlist.find('li:first .label label').html($customGreetingLabel.html() + ' ');
				$optionlist.find('li:first .label').append($customGreeting);
				$panel.find('label:eq(0)').remove();
				$panel.find('div:eq(0)').remove();
			}
			$panel.find('input:radio:eq(1)').attr('checked','checked');
			$customGreeting.css('width', '360px');
			step2.init = true;
		}
	}
	/* Step 3: font selection */
	function step3(id) {
		var $panel = $(id);
		if (typeof step3.init == 'undefined') {
			$panel.find('.options-list:first li:first').hide();
			$panel.find('option:first').remove();
			$panel.find('input:radio:eq(1)').attr('checked', 'checked');
			step3.init = true;
		}
	}
	/* Step 4:  */
	function step4(id) {
		var $panel = $(id);
		$panel.find('input:checkbox:first').click(function(){
			if ($(this).is(':checked')) {
				$panel.find('input:file').attr('disabled','disabled');
			} else {
				$panel.find('input:file').removeAttr('disabled');
			}
		});
		if (typeof step4.init == 'undefined') {
			$panel.find('label:eq(1)').remove();
			step4.init = true;
		}
		if ($panel.find('input:checkbox:first').is(':checked')) {
			$panel.find('input:file').attr('disabled','disabled');
		} else {
			$panel.find('input:file').removeAttr('disabled');
		}
	}
	/* Step 5: Text color */
	function step5(id) {
		var $panel = $(id);

		if (typeof step5.init == 'undefined') {
			$panel.find('li:first').remove();
			$panel.find('li:first').append('<div class="toggle-holder"></div>');
			$holder = $panel.find('li:first div');
			$holder.append($panel.children('label:eq(1)'));
			$holder.append($panel.children('div:eq(1)'));
			$holder.append($panel.children('label:eq(1)'));
			$holder.append($panel.children('div:eq(1)'));
			$panel.find('input:radio:first').attr('checked', 'checked');
			step5.init = true;
		}
		var $colorToggle = $panel.find('input:radio:first');
		var $blackToggle = $panel.find('input:radio:last');

		$colorToggle.click(function(){
			$panel.find('input:text').each(function(){
					$(this).removeClass('disabled');
					$(this).removeAttr('disabled');
				});
		});
		$blackToggle.click(function(){
			$panel.find('input:text').each(function(){
					$(this).addClass('disabled');
					$(this).attr('disabled','disabled');
					$(this).val('');
				});
		});

		// get initial state
		if ($colorToggle.is(':checked')) {
			$panel.find('input:text').each(function(){
					$(this).removeClass('disabled');
					$(this).removeAttr('disabled');
				});
		}
		if ($blackToggle.is(':checked')) {
			$panel.find('input:text').each(function(){
				$(this).addClass('disabled');
				$(this).attr('disabled', 'disabled');
			});
		}
		
	}
	/* Step 6: positioning toggle */
	function step6(id) {
		var $panel = $(id);
		if (typeof step6.init == 'undefined') {
			$panel.find('li:first').remove();
			$panel.find('input:radio:first').attr('checked','checked');
			step6.init = true;
		}
		var $onToggle = $panel.find('input:radio:first');
		var $offToggle = $panel.find('input:radio:eq(1)');

		$offToggle.click(function(){
			$('.product-options-bottom').show();
			$panel.find('.next-tab').hide();
		});
		$onToggle.click(function(){
			$('.product-options-bottom').hide();
			$panel.find('.next-tab').show();
		});

		// get first state
		if ($offToggle.is(':checked')) {
			$('.product-options-bottom').show();
			$panel.find('.next-tab').hide();
		}
		if ($onToggle.is(':checked')) {
			$('.product-options-bottom').hide();
			$panel.find('.next-tab').show();
		}
	}
	/* Step 7: positioning */
	function step7(id) {
		var $panel = $(id);
		if (typeof step7.init == 'undefined') {
			$panel.find('ul').each(function(){
				$(this).find('li:first').remove();
				$(this).find('li:nth-child(3n)').addClass('last');
			});
			$panel.find('ul').addClass('select-hor');
			step7.init = true;
		}
	}
	
	/* Step 8: comment */
	function step8(id) {
		var $panel = $(id);
		if (typeof step8.init == 'undefined') {
			$textarea = $('textarea', $panel);
			$textarea.before('<p>Vul hier uw eventuele opmerkingen in ter aanvulling op de door u geselecteerde opties</p>');
			$textarea.after('<p>Het doorvoeren van wijzigingen buiten de standaarden in het systeem brengt kosten met zich mee.</p>');
			$textarea.attr({cols: '80', rows: '6'});
			step8.init = true;
		}
	}
	

}); // end jQuery