/*

mootools.v1.11.js moet eerst ingeladen zijn

				var winkelwagen	= null;
					Onderstaande in een domready event
								// WinkelWagenClass object aanmaken
								var velden = new Array();
								// De kolommen in de tabel
								//		[0]	=> Veldnaam uit json data
								//		[1]	=> prefix, tekst dat voor de waarde moet staan
								//				In geval van een functie geeft dit het teken aan dat gebruikt moet worden
								//		[2]	=> postfix, tekst dat na de waarde moet staan
								//		[3]	=> Link naar artikel pagina
								velden.push(Array('artikelnummer', null, null, true));
								velden.push(Array('omschrijving_kort', null, null, false));
								velden.push(Array('aantal', null, 'x', false));
								velden.push(Array('fnct_add', '+', null, false));					// [1] = tekst/html dat getoond moet worden als knop
								velden.push(Array('fnct_del', '-', null, false));					// [1] = tekst/html dat getoond moet worden als knop
								velden.push(Array('fnct_remove', 'x', null, false));				// [1] = tekst/html dat getoond moet worden als knop
								
								winkelwagen = new WinkelWagenClass('winkelwagen_container','winkelwagen','winkelwagen_img','Winkelwagen','U heeft geen artikelen in uw winkelwagen',velden, Array('Artikel toegevoegd','Artikel verwijderd'));



*/

var WinkelWagenClass = new Class({
									// Constructor
									// Params:
									//			id van element die moet faden. Kan winkelwagen container zijn, of de container waar de winkelwagen container in zit
									//			id van div container waar winkelwagen in komt
									//			id van afbeelding die moet wisselen = optioneel. Geef null indien niet aanwezig
									//			titel van tabel
									//			tekst te tonen als er geen artikelen in de winkelwagen zitten
									//			Array met de velden die getoond moeten worden
									//			Array met teksten te tonen als er een artikel is toegevoegd of verwijderd 
									//			Winkelwagen zichtbaar 
									//			Automatisch verbergen na een request als winkelwagen niet open staat
									initialize:	function(id_fade_element,id_winkelwagen,id_winkelwagen_img,titel,leeg_tekst,velden,notificaties,visible,auto_hide) {
													this.id_fade_element	= id_fade_element;
													this.id_winkelwagen 	= id_winkelwagen;
													this.id_winkelwagen_img = id_winkelwagen_img;
													this.jsondata			= null;
													this.titel				= titel;
													this.leeg_tekst			= leeg_tekst;
													this.velden				= velden;
													this.notificaties		= notificaties;
													this.auto_hide			= auto_hide;
													
													// Fade in/out effect voor notificatie tekst
													this.fx_fadeout			= null;
													this.fx_fadein			= null;
													// Fade timer voor tonen van winkelwagen
													this.fade_timer			= null;
													// Winkelwagen zichtbaar ja/nee
													var cookie 				= Cookie.get('shop_winkelwagen_display');
													// Uit cookie halen
													if(cookie && visible == null) {
														this.visible = (cookie == 'true') ? true : false;
													} else {
														if(visible == false || visible == true) {
															this.visible = visible;
														}
													}
													
													// Juiste winkelwagen plaatje tonen
													this.toggle_img();
													
													// Zichtbaar/ontzichtbaar maken van winkelwagen
													if(!this.visible) {
														$(this.id_fade_element).setOpacity(0);
													} else {
														$(this.id_fade_element).setOpacity(1);
													}
													
													this.request(null,null,null,false);
												},
									// Voert een ajax request uit en update de jsondata
									request:	function(urldata,id,notificatie,display) {
												
													// Onzichtbare div maken waar de output in opgeslagen wordt
													new Element('div',	{
																			'styles': {
																				'border': '1px solid #000000',
																				'width': '400px',
																				'height': '400px',
																				'display': 'none',
																				'visibility': 'hidden'
																			},
																			'id': 'WinkelWagenClassData'
																		}).injectBefore(this.id_winkelwagen);
																		
													var pointer = this;
													// Ajax request uitvoeren
													var ajax 	= new Ajax('/cms/dp_shop.php?ajax_winkelwagen',{method: 'get',
																												autoCancel: true,
																												data:	urldata,
																												update: $('WinkelWagenClassData'),
																												onComplete: function() {
																																pointer.jsondata = Json.evaluate($('WinkelWagenClassData').getText());
																																// De data is geevalueerd. Onzichtbare div nu weer verwijderen
																																$('WinkelWagenClassData').remove();
																																var qs = pointer.query_string();
																																if(qs['use'] && qs['use'] == 'winkelwagen' && urldata != null) {
																																	location.href = '/cms/dp_shop.php?use=winkelwagen';
																																} else {
																																	// Tabel updaten
																																	pointer.update(id,notificatie,display);
																																}
																															}
																						}).request();
												},
									// Voeg een artikel toe / hoog op met 1
									add:		function(id) {
													var q = 'quantity_' + id;
													var quantity = 1;
													if($(q)) {
														quantity = $(q).getProperty('value');
													}
													this.request('add=' + id + '&quantity=' + quantity, id, 0, true);
												},
									// Verwijder een artikel / 1 aftrekken
									del:		function(id) {
													this.request('del=' + id, id, 1, true);
												},
									// Verwijder een artikel
									remove:		function(id) {
													this.request('remove=' + id, id, 1, true);
												},
									// Lees de json data uit en genereer de tabel
									update:		function(id, notificatie, display) {

													// Stop de fade_timer
													$clear(this.fade_timer);

													if(this.fx_fadeout != null && this.fx_fadein != null) {
														//alert('stop etc');
														this.fx_fadeout.stop();
														this.fx_fadein.stop();
														this.fx_fadeout = null;
														this.fx_fadein 	= null;
													}

													// Alles in this.id_winkelwagen weggooien
													$(this.id_winkelwagen).empty();
													
													// Tabel maken
													var table 	= new Element('table',{id: 'winkelwagen_table', cellpadding: 0, cellspacing: 0, valign: 'top'}).injectInside($(this.id_winkelwagen));
													var thead	= new Element('thead',{}).injectInside(table);
													// Eerste rij maken
													var tr_th	= new Element('tr',{}).injectInside(thead);
													// Table header met titel
													var th		= new Element('th',{'colspan': this.velden.length, id: 'winkelwagen_th_titel'}).injectInside(tr_th);
													//var th_div	= new Element('div',{id:'winkelwagen_th_titel_div'}).injectInside(th);
													// Titel instellen
													//th.setText(this.titel);													
													
													var div_winkelwagentekst = new Element('div',{id: 'winkelwagen_div_winkelwagentekst'}).injectInside(th);
													var div_winkelwagentekst_span = new Element('span',{id: 'winkelwagen_div_winkelwagentekst_span'}).injectInside(div_winkelwagentekst);
													div_winkelwagentekst_span.setHTML(this.titel);
													
													// Prijs informatie
													var div_prijs = new Element('div',{id: 'winkelwagen_div_prijs'}).injectInside(th);
													var div_prijs_span = new Element('span',{id: 'winkelwagen_div_prijs_span'}).injectInside(div_prijs);
													div_prijs_span.setHTML('€ ' + this.jsondata.overig.totaalprijs);
													
													// Notificatie blok
													var div_notice = new Element('div',{id: 'winkelwagen_div_notice'}).injectInside(th);
													if(notificatie != null) {
														//th_notice.setText(this.notificaties[notificatie]);\
														var div_notice_span = new Element('span',{id: 'winkelwagen_div_notice_span',
																								 opacity: 0,
																								 styles: {display: 'none'}
																								 }).injectInside(div_notice);
														div_notice_span.setText(this.notificaties[notificatie]);
													}

													
													var pointer = this;
													var i_tr = 0;

			
													var tbody	= new Element('tbody',{}).injectInside(table);
													// Geen artikelen
													if(this.jsondata.artikelen.length == 0) {
														// Nieuwe rij toevoegen in tabel
														var tr_td 	= new Element('tr',{'class': 'winkelwagen_flip_' + i_tr}).injectInside(tbody);
														var td		= new Element('td',{'class': 'winkelwagen_td_leeg', 'colspan': this.velden.length}).injectInside(tr_td);
														var span 	= new Element('span',{}).injectInside(td);
														span.setHTML(this.leeg_tekst);
													}
													// Wel artikelen
													else {

														// Alle records van de ontvangen json data bij langs gaan
														this.jsondata.artikelen.each(	function(item,index) {
																							// Nieuwe rij toevoegen in tabel
																							var tr_td 	= new Element('tr',{'id': 'winkelwagen_rij_'+item.id, 'class': 'winkelwagen_flip_' + i_tr++}).injectInside(tbody);
																							// Class bepalen
																							if(i_tr == 2) {
																								i_tr = 0;
																							}
																							// Class bepaler voor cell
																							var i = 0;
																							// Alle velden toevoegen zoals is opgegeven in this.velden
																							pointer.velden.each(function(item2, index2) {
																												var td		= new Element('td',{}).injectInside(tr_td);
																												td.setProperty('class', 'winkelwagen_td_' + i);
																												// Prefix
																												var extra1 	= item2[1] != null ? item2[1] : '';
																												// Postfix
																												var extra2	= item2[2] != null ? item2[2] : '';
																												// add functie 
																												if(item2[0] == 'fnct_add') {
																													var id = 'winkelwagen_fnct_add_'+item.id;
																													var span = new Element('span',{'id': id,'class': 'winkelwagen_fnct_add'}).injectInside(td);
																													span.setText(extra1);
																													// Niet de juiste manier, maar wel de manier die in IE7 werkt
																													// Het is nu noodzakelijk dat er een WinkelWagenClass object genaamd
																													// winkelwagen is
																													span.setProperty('onclick', 'winkelwagen.add(\''+item.id+'\')');
																													span.setProperty('title', 'Voeg artikel toe');
																													/*
																													// Dit is de goede manier, maar omdat IE7 kennelijk niet goed met inject
																													// om gaat, werkt dit niet
																													span.addEvent('click',	function() {
																																				pointer.add(item.id);
																																			});
																													*/
																												}
																												// Artikel verwijderen. LEES fnct_add voor meer info over IE7 probleem
																												else if(item2[0] == 'fnct_remove') {
																													var id = 'winkelwagen_fnct_remove_'+item.id;
																													var span = new Element('span',{'id': id,'class': 'winkelwagen_fnct_remove'}).injectInside(td);
																													span.setText(extra1);
																													span.setProperty('onclick', 'winkelwagen.remove(\''+item.id+'\')');
																													span.setProperty('title', 'Verwijder artikel');
																												}
																												// Trek 1 van aantal af. LEES fnct_add voor meer info over IE7 probleem
																												else if(item2[0] == 'fnct_del') {
																													var id = 'winkelwagen_fnct_del_'+item.id;
																													var span = new Element('span',{'id': id,'class': 'winkelwagen_fnct_del'}).injectInside(td);
																													span.setText(extra1);
																													span.setProperty('onclick', 'winkelwagen.del(\''+item.id+'\')');
																													span.setProperty('title', 'Verwijder artikel');
																												}
																												// Leeg veld
																												else if(item2[0] == null) {
																													td.setText('');
																												}
																												else {
																													var tekst = extra1 + eval('item.'+item2[0]+';') + extra2;
																													// Tekst plaatsen in cell
																													if(item2[3] == false) {
																														td.setText(tekst);
																													}
																													// Tekst moet linken naar artikelpagina
																													else {
																														var a = new Element('a',{}).injectInside(td);
																														a.setProperty('href', '/cms/dp_shop.php?use=artikel&artikel_id=' + item.id);
																														a.setText(tekst);
																													}
																												}
																												i++;
																											});
																						});
													}
													
													// Met enkel table.injectInside() zou het moeten werken, maar IE7 update niet
													// waardoor er geen tabel zichtbaar wordt. Zorgt er tevens voor dat events
													// op de gegenereerde elementen niet meer werken
													$(this.id_winkelwagen).innerHTML = $(this.id_winkelwagen).innerHTML;

													if(notificatie != null) {
														// Kijk of de effecten al bestaan
														// Eerst nog maar niet gebruiken...
														if(this.fx_fadeout == null && this.fx_fadein == null) {
															// Maak het fadeout effect
															this.fx_fadeout= new Fx.Styles($('winkelwagen_div_notice_span'),{duration: 2000,
																															transition: Fx.Transitions.linear});
															// Maak het fadein effect
															this.fx_fadein = new Fx.Styles($('winkelwagen_div_notice_span'),{duration: 1000,
																															transition: Fx.Transitions.linear,
																															'onStart': 		function() {
																																				$('winkelwagen_div_notice_span').setOpacity(0);
																																				$('winkelwagen_div_notice_span').setStyle('display','');
																																			},
																															'onComplete':	function() {
																																				pointer.fx_fadeout.start({'opacity': [1,0]});
																																			}});
														}
														this.fx_fadein.start({'opacity': [0,1]});
													}

													// Als het winkelwagentje verborgen is dan tonen
													// Mits display = true wordt meegegeven
													if(!this.visible && display) {
														this.toggle();
														var pointer = this;
														if(this.auto_hide) {
															var func = function(){pointer.toggle();};
															// Na 3 seconden het winkelwagentje weer verbergen
															this.fade_timer = func.delay(3000);
														}
													}

												},
									// Toggle fadein/fadeout van winkelwagen
									toggle:		function() {
													var fx_fade = new Fx.Styles($(this.id_fade_element),{duration: 400, transition: Fx.Transitions.linear});
													if(!this.visible) {
														fx_fade.start({'opacity': [0,1]});
														this.visible = true;
													} else {
														fx_fade.start({'opacity': [1,0]});
														this.visible = false;
													}
													this.toggle_img();
													Cookie.set('shop_winkelwagen_display',this.visible);
												},
									// Toon/Verberg afbeelding van winkelwagen indien aanwezig (bijv. aan/uit vinkje)
									toggle_img:	function() {
													if(this.id_winkelwagen_img != null && $(this.id_winkelwagen_img)) {
														if(this.visible) {
															$(this.id_winkelwagen_img).setProperty('src', '/layout/images/winkelwagen_aan.gif');
														} else {
															$(this.id_winkelwagen_img).setProperty('src', '/layout/images/winkelwagen_uit.gif');
														}
													}
												},
									// Functie om de query string uit te lezen
									query_string: 	function() {
														var qsParm = new Array();
														var query = window.location.search.substring(1);
														//alert(query);
														var parms = query.split('&');
														for (var i=0; i<parms.length; i++) {
															var pos = parms[i].indexOf('=');
															if (pos > 0) {
																var key = parms[i].substring(0,pos);
																var val = parms[i].substring(pos+1);
																qsParm[key] = val;
															}
														}
														return qsParm;
													}
								});


// Uit te voeren wanneer document geladen is
window.addEvent('domready', function(){
								// Indien de afleveradres_actief checkbox aanwezig is dan hier events aan hangen
								if($('afleveradres_actief')) {
									// Fix voor IE
									$('afleveradres_actief').addEvent('click', function(){ $('afleveradres_actief').fireEvent('change'); });
									// Bij het veranderen van het vinkje de juiste velden enablen/disablen
									$('afleveradres_actief').addEvent('change',	function() {
																					// De velden die enabled/disabled moeten worden
																					var fields = new Array('txtAfl_Bedrijf','lstAfl_Titel','txtAfl_Naam','txtAfl_Straat','txtAfl_Postcode','txtAfl_Plaats','txtAfl_Land');
																					$each(fields, 	function(item, index) {
																										var status = $('afleveradres_actief').getProperty('checked');
																										if($(item)) {
																											$(item).setProperty('disabled', !status);
																											
																											if(status == false) {
																												$(item).addClass('uitgeschakeld');
																											} else {
																												$(item).removeClass('uitgeschakeld');
																											}
																										}
																									});
																				});
									// Eenmalig uitvoeren zodat kleuren goed staan
									$('afleveradres_actief').fireEvent('click');
								}
							});