/***********************************************************************************************/
function createNewItem(id){
	var sections = $$('.list');
	var count = '';
	for(var i = 0; i < sections.length; i++) {
		var list = $(sections[i]);
		count = eval(count + list.getElementsByTagName('li').length);
	}
	
	if($F('add_item_input_' + id) == ''){
		var name = $F('add_item_dropdown_' + id);
	}else{
		var name = $F('add_item_input_' + id);
	}
	
	var price = $F('add_item_price_' + id);
	if (name != '' && name != 'overig_' + id){
		var newLi = Builder.node('li', { id: 'item_' + (count + 1), style: 'display:none;', onmouseover: 'itemHover(\'' + (count + 1) + '\')', onmouseout: 'itemOut(\'' + (count + 1) + '\')' });
		var newdiv = Builder.node('div', { id: 'item_div_' + (count + 1), className: 'item_div' }, name);
		var euroSign = Builder.node('div', { className: 'item_euro', id: 'item_euro_' + (count + 1) }, ' ');
		var newPrice = Builder.node('div', { id: 'item_price_' + (count + 1), className: 'item_price' }, price);
		var optionDiv = Builder.node('div', { id: 'option_div_' + (count + 1), className: 'option_div', style: 'display: none;'});
		var handle = Builder.node('img', { src: 'img/drag_handle.gif', title: 'Verplaatsen', alt: 'Verplaatsen', className: 'handle' });
		var bold = Builder.node('img', { src: 'img/text_bold.gif', title: 'Vet', alt: 'Vet', className: 'bold', onclick: 'toggle_bold(\'item_div_' + (count + 1) + '\');' });
		var italic = Builder.node('img', { src: 'img/text_italic.gif', title: 'Cursief', alt: 'Cursief', className: 'italic', onclick: 'toggle_italic(\'item_div_' + (count + 1) + '\');' });
		var del = Builder.node('img', { src: 'img/trash.gif', title: 'Verwijderen', alt: 'Verwijderen', className: 'del', onclick: 'del_li(\'item_' + (count + 1) + '\',\'item_div_' + (count + 1) + '\')' });
		
		optionDiv.appendChild(del);
		optionDiv.appendChild(handle);
		optionDiv.appendChild(bold);
		optionDiv.appendChild(italic);
		
		newLi.appendChild(newdiv);
		newLi.appendChild(euroSign);
		newLi.appendChild(newPrice);
		newLi.appendChild(optionDiv);
		
		new Insertion.Bottom('list_' + id, newLi);
		Effect.Appear(newLi.id);
		destroyLineItemSortables();
		createLineItemSortables();
		
		if(price != ''){
			$('item_euro_' + (count + 1)).update('€');
		}else{
			$('item_euro_' + (count + 1)).update('&nbsp;');
			$('item_price_' + (count + 1)).style.backgroundColor = '#fff';
			$('item_price_' + (count + 1)).style.border = '1px solid #DFDFDF';
		}
		
		new Ajax.InPlaceEditor('item_div_' + (count + 1),'dummy.php', { 
			onEnterHover: false,
			onLeaveHover: false,
			submitOnBlur: true, 
			okButton: false, 
			cancelLink: false, 
			formClassName: 'input', 
			clickToEditText: 'Klik om de tekst te bewerken', 
			savingText: 'Opslaan...',
			onComplete: function(){
				sendList();
			}
		});
		new Ajax.InPlaceEditor('item_price_' + (count + 1),'dummy.php', { 
			onEnterHover: false,
			onLeaveHover: false,
			submitOnBlur: true, 
			okButton: false, 
			cancelLink: false, 
			formClassName: 'input_price', 
			clickToEditText: 'Klik om de prijs te bewerken', 
			savingText: 'Opslaan...',
			onComplete: function(){
				sendList();
				updateEuroSign((count + 1));
			}
		});
		$('add_item_input_' + id).value = '';
		$('add_item_price_' + id).value = '';
		
		var dropdown = $('add_item_dropdown_' + id);
		if(dropdown != null){
			if(dropdown.value == 'overig_' + id){
				$('add_item_input_' + id).hide(); 
				$('add_item_dropdown_' + id).show();
				$('selected_' + id).selected = true;
			}
		}
		
		$('add_item_' + id).hide();
		
		sendList();
	}
}
/***********************************************************************************************/
function destroyLineItemSortables() {
	var sections = $$('.list');
	for(var i = 0; i < sections.length; i++) {
		Sortable.destroy(sections[i]);
	}
}
/***********************************************************************************************/
function createLineItemSortables() {
	var sections = $$('.list');
	for(var i = 0; i < sections.length; i++) {
		Sortable.create(sections[i], { 
			handle: 'handle',
			dropOnEmpty: true, 
			containment: sections, 
			constraint: false,
			onUpdate: function(){ 
				sendList(); 
			}
		});
	}
}
/***********************************************************************************************/
function updateCats(page,currentPage) {
	var sections = $$('.list');
	if(sections != ''){
		var total = '';
		sections.each(function(section) {
			var list = '';
			var list_name = $(section.id).previous('h3').innerHTML;
			var original = $(section.id).previous('input').value;
			Sortable.sequence(section).each(function(item) {
				var extraAtri = '';
				if($('item_div_' + item).style.fontWeight == 'bold'){
					extraAtri += '[B]';
				}else{
					extraAtri += '[]';
				}
				if($('item_div_' + item).style.fontStyle == 'italic'){
					extraAtri += '[I]';
				}else{
					extraAtri += '[]';
				}
				list += 'list_' + list_name + '[]=' + URLEncode($('item_div_' + item).innerHTML) + '[' + $('item_price_' + item).innerHTML + ']' + extraAtri + '&';
				
			});
			list += 'list_' + list_name + '[original]=' + original + '&';
			list += 'subpage[' + currentPage + ']=1&';
			total += list;
		});
		new Ajax.Updater('update','ajax.php', { asynchronous: true, parameters: total, onComplete: redirect(page) });
		return false;
	}else{
		alert('Om naar de volgende stap te gaan moet u eerst een categorie toevoegen.');
	}
}
/***********************************************************************************************/
function sendList() {
	var sections = $('categorieen').select('.list');
	var total    = '';
	var section  = '';
	sections.each(function(section){
		var list = '';
		var listName = $(section.id).previous('h3').innerHTML;
		var original = $(section.id).previous('input').value;
		
		Sortable.sequence(section).each(function(item) {
			var extraAtri = '';
			if($('item_div_' + item).style.fontWeight == 'bold'){
				extraAtri += '[BOLD]';
			}
			if($('item_div_' + item).style.fontStyle == 'italic'){
				extraAtri += '[ITALIC]';
			}
			var itemDiv = $('item_div_' + item).innerHTML;
			list += 'list_' + HTMLSpecialChars(listName) + '[]=' + HTMLSpecialChars(itemDiv) + '[' + $('item_price_' + item).innerHTML + ']' + extraAtri + '&';
			
		});
		list += 'list_' + HTMLSpecialChars(listName) + '[original]=' + original + '&';
		total += list;
	});
	new Ajax.Request('ajax.php', { asynchronous: true, parameters: total });
	return false;
}
/***********************************************************************************************/
function del_li(id,regelId){
	var regel = $(regelId).innerHTML;
	if (confirm('Weet u het zeker dat u het product \'' + regel + '\' wilt verwijderen?')) { 
		Effect.Fade(id); 
		setTimeout('$(\'' + id + '\').remove(); sendList();',1000);
	}
}
/***********************************************************************************************/
function del_div(id,nameCat){
	var categorie = $(nameCat).innerHTML;
	if (confirm('Weet u het zeker dat u categorie \'' + categorie + '\' wilt verwijderen?')) { 
		Effect.Fade(id); 
		setTimeout('$(\'' + id + '\').remove(); sendList();',1000);
	}
}
/***********************************************************************************************/
function createNewCat(){
	var sections = $$('.div_cat');
	var count    = sections.length;
	var cat_name = $('add_cat_input').value;
	var cat_id   = '';
	if(cat_name == ''){
		if($('option_' + $('add_input_select').value)){
			cat_name = $('option_' + $('add_input_select').value).innerHTML;
			cat_id   = $('add_input_select').value;
		}
	}
	if(cat_name != ''){
		var div_cat = Builder.node('div', { id: 'cat_' + (count + 1), className: 'div_cat', style: 'display: none;' });
		var cat_h3 = Builder.node('h3', { id: 'cat_title_' + (count + 1) }, cat_name);
		var ul_cat  = Builder.node('ul', { id: 'list_' + (count + 1), className: 'list', style: 'display: none;' });
		var inputHidden = Builder.node('input', { type: 'hidden', id: 'original_' + (count + 1), value: cat_id });
		var optionDiv = Builder.node('div', { className: 'cat_option_div' });
		var del = Builder.node('img', { src: 'img/trash.gif', title: 'Verwijderen', alt: 'Verwijderen', className: 'del_cat', id: 'delete_cat_' + (count + 1), onclick: 'del_div(\'cat_' + (count + 1) + '\',\'cat_title_' + (count + 1) + '\')' });
		var handle = Builder.node('img', { src: 'img/drag_handle.gif', title: 'Verplaatsen', alt: 'Verplaatsen', className: 'move_cat', id: 'handle_cat_' + (count + 1)});

		div_cat.appendChild(cat_h3);
		div_cat.appendChild(inputHidden);
		optionDiv.appendChild(del);
		optionDiv.appendChild(handle);
		div_cat.appendChild(optionDiv);
		div_cat.appendChild(ul_cat);
		
		$('categorieen').appendChild(div_cat);
		Effect.Appear($('cat_' + (count + 1)));
		
		$('add_cat_input').value  = '';
		$('add_cat_input').hide(); 
		$('add_input_select').show();
		$('cat_cancel').hide();
		$('cat_selected').selected = true;
		
		new Ajax.InPlaceEditor('cat_title_' + (count + 1),'dummy.php', { 
			onEnterHover: false,
			onLeaveHover: false,
			submitOnBlur: true, 
			okButton: false, 
			cancelLink: false, 
			formClassName: 'input_title', 
			clickToEditText: 'Klik om de tekst te bewerken', 
			savingText: 'Opslaan...',
			onComplete: function(){
				sendList();
			}
		});
		
		Sortable.destroy('categorieen');
		Sortable.create('categorieen', { 
			tag: 'div', 
			handle: 'move_cat', 
			constraint: false,
			onUpdate: function(){
				sendList();
			}
		});
		sendList();
	}
}
/***********************************************************************************************/
function sort_cat(){
	var sections = $$('.list');
	var i = 1;
	sections.each(function(section) {
		$(section.id).toggle();
		$('handle_cat_' + i).toggle();
		$('delete_cat_' + i).toggle();
		i++;
	});
	if($('add_cat').style.display == 'none'){
		Sortable.destroy('categorieen');
		Sortable.create('categorieen', { tag: 'div', handle: 'handle_cat', constraint: false});
	}else{
		Sortable.destroy('categorieen');
	}
}
/***********************************************************************************************/
function toggle_bold(id){
	if($(id).style.fontWeight == 'bold'){
		$(id).style.fontWeight = 'normal';
	}else{
		$(id).style.fontWeight = 'bold';
	}
	sendList(); 
}
/***********************************************************************************************/
function toggle_italic(id){
	if($(id).style.fontStyle == 'italic'){
		$(id).style.fontStyle = 'normal';
	}else{
		$(id).style.fontStyle = 'italic';
	}
	sendList(); 
}
/***********************************************************************************************/
function show_input(id){
	new Insertion.Bottom('list_' + id, $('add_item_' + id));
	$('add_item_' + id).show();
}
/***********************************************************************************************/
function redirect(page){
	setTimeout('window.location="http://dubbelfrisss.printgenerator.com/site/?page=maak_frissekaart&subpage=' + page + '"',1000)
}
/***********************************************************************************************/
function popup_example(){
	var top = (document.viewport.getDimensions().height / 2) - 101;
	var left  = (document.viewport.getDimensions().width / 2) - 201;
	$('pop_example').style.left = left + 'px';
	$('pop_example').style.top = top + 'px';
	$('pop_example').toggle();
}
/***********************************************************************************************/
function popup_formaat(formpop){
	/* var top = (document.viewport.getDimensions().height / 2) - 101;
	var left  = (document.viewport.getDimensions().width / 2) - 201; 
	$(formpop).style.left = left + 'px';
	$(formpop).style.top = top + 'px'; */
	$(formpop).toggle();
}
/***********************************************************************************************/
function showCatInput(value){
	if(value == 'overig'){
		$('add_cat_input').show(); 
		$('add_input_select').hide();
		$('cat_cancel').show();
	}
}
/***********************************************************************************************/
function showInput(value,id){
	if(value == 'overig_' + id){
		$('add_item_dropdown_' + id).hide(); 
		$('add_item_input_' + id).show();
	}
}
/***********************************************************************************************/
function cancelCatInput(){
	$('cat_selected').selected = true;
	$('add_cat_input').value  = '';
	$('add_cat_input').hide(); 
	$('add_input_select').show();
	$('cat_cancel').hide();	
}
/***********************************************************************************************/
function cancelInput(id){
	$('add_item_' + id).hide();
	if($('add_item_dropdown_' + id)){
		$('selected_' + id).selected = true;
		$('add_item_dropdown_' + id).show();
		$('add_item_input_' + id).hide();
	}
}
/***********************************************************************************************/
function checkCats(){
	if($('categorieen').innerHTML.blank()){
		alert('Om naar de volgende stap te gaan moet u eerst een categorie toevoegen.');
	}else{
		window.location="?page=maak_frissekaart&subpage=inhoud";
	}
}
/***********************************************************************************************/
function checkFormaat(){
	if($F('formaat_set').empty()){
		alert('Om naar de volgende stap te gaan moet u eerst een formaat kiezen.');
	}else{
		window.location="?page=maak_frissekaart&subpage=layout";
	}
}
/***********************************************************************************************/
function changeFont(value,id){
	switch(value){
		case 'font_summer':
			$(id).src = 'img/fonts/font_summer.png';
			$(id).show();
			break;
		case 'font_ice':
			$(id).src = 'img/fonts/font_ice.png';
			$(id).show();
			break;
		case 'font_frisss':
			$(id).src = 'img/fonts/font_frisss.png';
			$(id).show();
			break;
		case 'font_spicy':
			$(id).src = 'img/fonts/font_spicy.png';
			$(id).show();
			break;
		case 'font_funky':
			$(id).src = 'img/fonts/font_funky.png';
			$(id).show();
			break;
		case 'font_groovy':
			$(id).src = 'img/fonts/font_groovy.png';
			$(id).show();
			break;
		case 'font_light':
			$(id).src = 'img/fonts/font_light.png';
			$(id).show();
			break;
		case 'font_fridge':
			$(id).src = 'img/fonts/font_fridge.png';
			$(id).show();
			break;
		case 'font_chilly':
			$(id).src = 'img/fonts/font_chilly.png';
			$(id).show();
			break;
		case 'font_cold':
			$(id).src = 'img/fonts/font_cold.png';
			$(id).show();
			break;
		case 'font_wet':
			$(id).src = 'img/fonts/font_wet.png';
			$(id).show();
			break;
		case 'font_cool':
			$(id).src = 'img/fonts/font_cool.png';
			$(id).show();
			break;
		case '':
			$(id).hide();
			break;
	}
	
	new Ajax.Updater('update','ajax/layout.php', { asynchronous: true, parameters: 'action=' + id + '&value=' + value });
}
/***********************************************************************************************/
function saveLayout(type,value){
	new Ajax.Updater('update','ajax/layout.php', { asynchronous: true, parameters: 'action=' + type + '&value=' + HTMLSpecialChars(value) });
}
/***********************************************************************************************/
function del_card(jobid,id,name){
	if (confirm('Weet u zeker dat u uw placemat \'' + name + '\' wilt verwijderen?')) { 
		Effect.Fade(id);
		new Ajax.Updater('update', 'ajax/layout.php', { 
			asynchronous: true, 
			method: 'post', 
			parameters: 'action=del_card&jobid=' + jobid
		});
	}
}
/***********************************************************************************************/
function delCartItem(job_id){
	Effect.Fade(job_id);
	new Ajax.Updater('update','ajax/layout.php', { asynchronous: true, parameters: 'action=del_cart_item&id=' + job_id });
}
/***********************************************************************************************/
function updateEuroSign(id){
	if($('item_price_' + id).innerHTML == ''){
		$('item_euro_' + id).update('&nbsp;');
		$('item_price_' + id).style.backgroundColor = '#fff';
		$('item_price_' + id).style.border = '1px solid #DFDFDF';
	}else{
		$('item_euro_' + id).update('€');
		$('item_price_' + id).style.backgroundColor = '';
		$('item_price_' + id).style.border = '';
	}
}
/***********************************************************************************************/
function updatediv(id,shtml) {
   if (document.getElementById || document.all) {
      var el = document.getElementById? document.getElementById(id): document.all[id];
      if (el && typeof el.innerHTML != "undefined") el.innerHTML = shtml;
   }
}
/***********************************************************************************************/
function showPage(page){
	$('card_image').src = page;
}
/***********************************************************************************************/
function generateExample(formaat){
	new Ajax.Updater('error','df_check.php', { 
			asynchronous: true, 
			onComplete: function(){
				if($('error').innerHTML.blank()){
					location.href = "?page=maak_frissekaart&subpage=voorbeeld";
				}
			}
	});
}
/***********************************************************************************************/
function loadLayout(id){
	new Ajax.Updater('update','ajax/layout.php', { asynchronous: true, parameters: 'action=layout&template=' + id });
	
	var layouts = $$('#horizontal_carousel div ul li img');
	layouts.each(function(layout){
		layout.removeClassName('active');
	});
	
	$('template_' + id).addClassName('active');
	
	$('layout_next').show();
	$('layout_example').show();
	
	new Ajax.Updater('layout','layout_cfg.php', { asynchronous: true, parameters: 'template=' + id, onComplete: $('layout').show() });
}
/***********************************************************************************************/
function cardName(method){
	var block       = $('card_name').getDimensions();
	var blockWidth  = block['width'];
	var blockHeight = block['height'];
	
	var scrollOffsets = document.viewport.getScrollOffsets();
	var topOffset     = scrollOffsets['top'];
	var leftOffset    = scrollOffsets['left'];
	
	var width  = document.viewport.getWidth();
	var height = document.viewport.getHeight();
	
	var left = width / 2 - (blockWidth / 2) + leftOffset;
	var top  = height / 2 - (blockHeight / 2) + topOffset;
	
	if(top < 0) { top = 0; }	
	if(left < 0){ left = 0; }
	
	$('card_name').style.left = left + 'px';
	$('card_name').style.top  = top + 'px';
	
	$('subpage').value = method;
	
	$('card_name').show();
	
	$('id_card_name').focus();
}
/***********************************************************************************************/
function itemHover(id){
	$('option_div_' + id).show(); 
	$('item_' + id).style.background = '#DFDFDF';
}
/***********************************************************************************************/
function itemOut(id){
	$('option_div_' + id).hide(); 
	$('item_' + id).style.background = '';
}
/***********************************************************************************************/
function showHeaderInput(id){
	var activated = $$('#header_align .align');
	activated.each(function(active){
		active.removeClassName('active');
	});
	
	$(id).addClassName('active');
	
	$('header_input').show();
	if(id == 'header-align-logo-center'){
		$('header_line2').hide();
	}else{
		$('header_line2').show();
	}
}
/***********************************************************************************************/
function showFooterInput(id){
	var activated = $$('#footer_align .align');
	activated.each(function(active){
		active.removeClassName('active');
	});

	$(id).addClassName('active');
	
	$('footer_input').show();
	if(id == 'footer-align-logo-center'){
		$('footer_line2').hide();
	}else{
		$('footer_line2').show();
	}
}
/***********************************************************************************************/
function HTMLSpecialChars(string){
	string = string.replace(/&/g,"%26");
	string = string.replace(/\"/g,"%22");
	string = string.replace(/\'/g,"%27");
	string = string.replace(/</g,"%3C");
	string = string.replace(/>/g,"%3E");
	string = string.replace(/\#/g,"");
	
	return string;
};
/***********************************************************************************************/
function validateLayout(){
	var layouts = $$('.layout_thumb');
	layouts.each(function(layout){
		if(layout.hasClassName('layout_active') == true){
			check = true;
		}
	});
	
	var msg = '';
	if(alert == false){ msg = 'Om verder te kunnen gaan moet u eerste een layout kiezen'; }
	
	if(msg != ''){
		alert(msg);
		return false;
	}else{
		return true;
	}
}
/***********************************************************************************************/
function toggleHeader(value){
	var header = $('layout_header');
	
	if(value == 'yes' && header.style.display == 'none'){
		Effect.SlideDown('layout_header', {duration: .5});
	}
	
	if(value == 'no' && header.style.display == ''){
		Effect.SlideUp('layout_header', {duration: .5});
	}
}
/***********************************************************************************************/
function toggleFooter(value){
	var footer = $('layout_footer');
	
	if(value == 'yes' && footer.style.display == 'none'){
		Effect.SlideDown('layout_footer', {duration: .5});
	}
	
	if(value == 'no' && footer.style.display == ''){
		Effect.SlideUp('layout_footer', {duration: .5});
	}
}
/***********************************************************************************************/
function loadTemplates(column,position){
	if(column == 'onecolumn'){
		$('onecolumn').addClassName('column_active');
		if($('twocolumn')) { $('twocolumn').removeClassName('column_active'); }
	}else{
		$('onecolumn').removeClassName('column_active');
		$('twocolumn').addClassName('column_active');
	}
	$('layout_next').hide();
	$('layout_example').hide();
	
	new Ajax.Updater('update','ajax/layout.php', { asynchronous: true, parameters: 'action=column&value=' + column });
	new Ajax.Updater('voorbeeld_layout','pages/maak_frissekaart/layout_templates.php', { 
		asynchronous: true, 
		method: 'post', 
		parameters: 'column=' + column, 
		onComplete: function(){
			hCarousel = new UI.Carousel("horizontal_carousel", { scrollInc: 4 });
			//hCarousel.scrollTo(position);
			
			$('voorbeeld_layout').show();
		}
	});
}
/***********************************************************************************************/
function checkDF(){
	new Ajax.Updater('error','df_check.php', { 
			asynchronous: true, 
			onComplete: function() {
				if($('error').innerHTML.blank()){
					window.location = '?page=maak_frissekaart&subpage=formaat';
				}
			}
	});
}
/***********************************************************************************************/
function checkEmpty(){
	if($F('id_card_name') == '') { 
		return false;
	}else{
		return true;
	}
}
/***********************************************************************************************/