/*

mootools 1.2.4+ 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_fadeinout		= null;
		// Fade timer voor tonen van winkelwagen
		this.fade_timer			= null;
		// Winkelwagen zichtbaar ja/nee
		var cookie 				= Cookie.read('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).fade('hide');
		} else {
			$(this.id_fade_element).fade('show');
		}
		
		this.request(null,null,null,false);
	},
	// Voert een ajax request uit en update de jsondata
	request: function(urldata,id,notificatie,display) {																	
		var pointer = this;
		// Ajax request uitvoeren
		var ajax 	= new Request.JSON({
			url: '/cms/dp_shop.php?ajax_winkelwagen',
			method: 'get',
			autoCancel: true,
			data:	urldata,
			update: $('WinkelWagenClassData'),
			onComplete: function(jsondata) {
				pointer.jsondata = jsondata;

				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);
				}
			}
		}).send();
	},
	// 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_fadeinout != null) {
			this.fx_fadeinout.set(0);
			this.fx_fadeinout = 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'}).inject($(this.id_winkelwagen));
		var thead	= new Element('thead',{}).inject(table);
		// Eerste rij maken
		var tr_th	= new Element('tr',{}).inject(thead);
		// Table header met titel
		var th		= new Element('th',{'colspan': this.velden.length, id: 'winkelwagen_th_titel'}).inject(tr_th);
		//var th_div	= new Element('div',{id:'winkelwagen_th_titel_div'}).inject(th);
		// Titel instellen
		//th.setText(this.titel);													
		
		var div_winkelwagentekst = new Element('div',{id: 'winkelwagen_div_winkelwagentekst'}).inject(th);
		var div_winkelwagentekst_span = new Element('span',{id: 'winkelwagen_div_winkelwagentekst_span'}).inject(div_winkelwagentekst);
		div_winkelwagentekst_span.set('html', this.titel);
		
		// Prijs informatie
		var div_prijs = new Element('div',{id: 'winkelwagen_div_prijs'}).inject(th);
		var div_prijs_span = new Element('span',{id: 'winkelwagen_div_prijs_span'}).inject(div_prijs);
		div_prijs_span.set('html', '€ ' + this.jsondata.overig.totaalprijs);
		
		// Notificatie blok
		var div_notice = new Element('div',{id: 'winkelwagen_div_notice'}).inject(th);
		if(notificatie != null) {
			var div_notice_span = new Element('span', {
				id: 'winkelwagen_div_notice_span'
			}).inject(div_notice);
			div_notice_span.fade('hide');
			div_notice_span.set('text', this.notificaties[notificatie]);
		}
		
		var pointer = this;
		var i_tr = 0;

		var tbody	= new Element('tbody',{}).inject(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}).inject(tbody);
			var td		= new Element('td',{'class': 'winkelwagen_td_leeg', 'colspan': this.velden.length}).inject(tr_td);
			var span 	= new Element('span',{}).inject(td);
			span.set('html', 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++}).inject(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',{}).inject(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'}).inject(td);
						span.set('text', 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'}).inject(td);
						span.set('text', 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'}).inject(td);
						span.set('text', extra1);
						span.setProperty('onclick', 'winkelwagen.del(\''+item.id+'\')');
						span.setProperty('title', 'Verwijder artikel');
					}
					// Leeg veld
					else if(item2[0] == null) {
						td.set('text', '');
					}
					else {
						var tekst = extra1 + eval('item.'+item2[0]+';') + extra2;
						// Tekst plaatsen in cell
						if(item2[3] == false) {
							td.set('text', tekst);
						}
						// Tekst moet linken naar artikelpagina
						else {
							var a = new Element('a',{}).inject(td);
							a.setProperty('href', '/cms/dp_shop.php?use=artikel&artikel_id=' + item.id);
							a.set('text', tekst);
						}
					}
					i++;
				});
			});
		}
		
		// Met enkel table.inject() 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) {
			this.fx_fadeinout = new Fx.Tween('winkelwagen_div_notice_span', {property: 'opacity'});
			this.fx_fadeinout.start(0,1).chain(
				function(){ this.start(1,0); }
			);
		}

		// 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() {
		if(!this.visible) {
			$(this.id_fade_element).fade('in');
			this.visible = true;
		} else {
			$(this.id_fade_element).fade('out');
			this.visible = false;
		}
		this.toggle_img();
		Cookie.write('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).set('src', '/layout/images/winkelwagen_aan.gif');
			} else {
				$(this.id_winkelwagen_img).set('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');
	}
});