/** Set the asset location. By default it's a CDN, but we override it */
Clientcide.setAssetLocation( config.url.assets + '/Clientcide/assets' );

window.addEvent('domready', function() {

	if( Date && Date.defineFormats ){
		Date.defineFormats({
		    datum: '%d-%m-%Y',
		    datumtijd: '%d-%m-%Y %H:%M:%S'
		});
		
		Date.defineParsers( 
			'%d[-./]%m[-./]%Y',
			'%d-%m-%Y %H:%M:%S',
			'%d-%m-%Y %H:%M'
		);
	}
	
	initForms();
});

/**
 * Load the Date.js javascript with the Date-class (extends default js-Date class)
 * 
 * @param callback Function to call when load is completed
 * @return null
 */
function loadDate( callback ){
	var id = 'js-Date';

	console.log(callback);
	return;
	if( $(id) ){
		if( callback) callback();
	}else{

		dbug.log('loading ' + id);
		Asset.javascript( config.url.assets + '/MooTools/mootools-more-date.js',{ 
			id: id,
			onload: (function(callback){
				Date.defineFormats({
				    datum: '%d-%m-%Y',
				    datumtijd: '%d-%m-%Y %H:%M:%S'
				});
				
				Date.defineParsers( 
					'%d[-./]%m[-./]%Y',
					'%d-%m-%Y %H:%M:%S',
					'%d-%m-%Y %H:%M'
				);
				
				if( callback) callback();
			}).pass(callback)
		});
	}
}

/**
 * Load the StickyWin.js script with the StickyWin class.
 * 
 * @param callback Function to call when load is completed
 * @return void
 */
function loadStickyWin( callback ){
	var id = 'js-StickyWin';

	if( $(id) ){
		if( callback ) callback();
	}else{
		dbug.log('loading ' + id);
		Asset.javascript( config.url.assets + '/Clientcide/clientcide-stickywin.js',{ 
			id: id,
			onload: (function(){
				if( callback) callback();
			}).pass(callback)
		});
	}
}

/**
 * Load the DatePicker.js script with the DatePicker class
 * 
 * @param callback Function to call when load is completed
 * @return void
 */
function loadDatePicker( callback ){
	var id = 'js-DatePicker';
	
	if( typeof(StickyWin) == 'undefined' ){
		dbug.log('loading ' + id + ' postponed, loading dependency first');
		loadStickyWin( function(){ loadDatePicker.delay(100, null, [callback]); }.bind(this) );
		return;
	}
	if( typeof(Date.getMsg) == 'undefined' ){
		dbug.log('loading ' + id + ' postponed, loading dependency first');
		loadDate( function(){ loadDatePicker.delay(100, null, [callback]); }.bind(this) );
		return;
	}
	
	if( $(id) ){
		if( callback ) callback();
	}else{
		console.log('loading ' + id);
		Asset.javascript( config.url.js + '/DatePicker.js',{
			id: id,
			onload: (function(callback){
				MooTools.lang.setLanguage( 'nl-NL' );
				if( callback) callback();
			}).pass(callback)
		});
	}
}

/**
 * Load the Autocompleter.js script with the Autocompleter class
 * 
 * @param callback Function to call when load is completed
 * @return void
 */
function loadAutocompleter( callback ){
	var id = 'js-Autocompleter';
	
	if( $(id) ){
		if( callback ) callback();
	}else{
		dbug.log('loading ' + id);
		Asset.javascript( config.url.js + '/Autocompleter.js',{
			id: id,
			onload: (function(callback){
				if( callback) callback();
			}).pass(callback)
		});
	}
}

function initForms(){
	$$('form').each(function(form){
		new MijnTiogaForm( form );
	});
}

var MijnTiogaForm = new Class({
	Implements: [Options, Events],
	elements: [],
	options: {},	
	initialize: function( el, options ){
		this.element = el;
		this.setOptions(options);
		
		this.element.getElements('dd').each(function( el ){
			this.elements.push( new MijnTiogaFormElement(el) );
		}, this);
	}
});

var MijnTiogaFormElement = new Class({
	Implements: [Options, Events],
	
	toolbar:null,
	element:null,
	datepicker:null,
	tools:null,
	toolbarFocus:false,
	
	options: {
		toolbarClass:'toolbar',
		iconClass: 'icon',
		sliderOptions: { duration:400 },
		tools:[
		   {
		    	type:	'fieldpreview',
		    	img:	config.url.img + '/icons/page_go.png',
		    	match:	function( element ){
		    		return element.getElement('[onfocus*=jsonPreviewValues]');
		    	},
		    	create: function( element, img ){
		    		formElement = $pick(element.getElement('input'), element.getElement('textarea'), element.getElement('select'), element.getElement('button'));;
		    		
		    		var showPreview = function(){  
		    			if( typeof StickyWin != 'function' ){
			    			loadStickyWin( function(){
			    				this.create.delay(20, this, [element, img]);
			    			}.bind(this) );
			    			return this.type;
			    		}
		    			
		    			var previewData = this.retrieve('preview-data');
		    			if( !previewData ){
		    				jsonData = this.get('onfocus');
		    				re = new RegExp('jsonPreviewValues=(.*);;');
		    				m = re.exec( jsonData );
		    				
		    				if( m[1] ){
		    					previewData = JSON.decode(m[1]);
		    					this.store('preview-data', previewData);
		    				}
		    			}
		    			
		    			if( previewData ){
		    				preview = this.get('value');
		    				
		    				$each(previewData, function( value, key){
		    					re = new RegExp(key, 'g');
		    					preview = preview.replace( re, value );
		    				});
		    				
		    				preview = '<pre class="preview">' + preview + '</pre>';
		    				
		    				container = new Element('div', {'class':'preview'});
		    				container.set('html', '<span class="head">Voorbeeld</p>' +
		    					preview +
		    					'<p><a href="javascript:void null">Sluiten</a></p>'
		    				);
		    				
		    				win = new StickyWin.Modal({
		    					destroyOnClose: true,
		    					content: container
		    				});
		    				
		    				container.getElement('a').addEvent('click', win.hide );
		    				
		    				win.show();
		    				
		    			}else{
		    				alert('Geen preview-gegevens beschikbaar');
		    			}
		    		};
		    		
		    		img.addEvent('click', function(e){ formElement.showPreview(e); } );
		    	}
		    },{
		    	type:	'datepicker',
		    	img:	config.url.img + '/icons/calendar.png',
		    	title:	'Kies datum',
		    	match: 	function( element ){
		    		return element.getElement('.date-picker') && !element.getElement('.time-picker');
		    	},
		    	create:	function( element, img ){
		    		if( typeof DatePicker != 'function' ){
		    			loadDatePicker( function(){
		    				this.create.delay(20, this, [element, img]);
		    			}.bind(this) );
		    			return this.type;
		    		}
		    		
		    		new DatePicker(element.getElement('.date-picker'), {
		    			additionalShowLinks:[img],
		    			format: 'datum',
		    			showOnInputFocus: false,
		    			checkOnBlur: true,
		    			fillOnBlur: false,
		    			checkOnInit: true
		    		});
		    		
		    		return this.type;
		    	}
		    },{
		    	type:	'datetimepicker',
		    	img:	config.url.img + '/icons/calendar.png',
		    	title:	'Kies datum/tijd',
		    	match: 	function( element ){
		    		return element.getElement('.date-picker') && element.getElement('.time-picker');
		    	},
		    	create:	function( element, img ){
		    		
		    		if( typeof DatePicker != 'function' ){ 
		    			loadDatePicker( function(){
		    				this.create.delay(20, this, [element, img]);
		    			}.bind(this) );
		    			return this.type; 
		    		}
		    		if( typeof DatePicker.extraLoaded != 'function' ){
		    			loadDatePicker( function(){
		    				this.create.delay(20, this, [element, img]);
		    			}.bind(this) );
		    			return this.type;
		    		}
		    		
		    		new DatePicker(element.getElement('.date-picker'), {
		    			additionalShowLinks:[img],
		    			format: 'datumtijd',
		    			showOnInputFocus: false,
		    			checkOnBlur: true,
		    			fillOnBlur: false,
		    			checkOnInit: true,
		    			time:true
		    		});
		    		
		    		return this.type;
		    	}
		    },{
		    	type:	'datenow',
		    	img:	config.url.img + '/icons/date_go.png',
		    	title:	'Nu',
		    	match: 	function( element ){
		    		return element.getElement('.date-now');
		    	},
		    	create:	function( element, img ){
		    		if( typeof(Date) == 'undefined' ){
		    			loadDate(  this.create.dealy(20, this, [element, img]) );
		    			return this.type; 
		    		}
		    		
		    		img.addEvent('click', function(e){
						var d = new Date();
						element.getElement('.date-now').set('value', d.format('datum'));
						element.getElement('.date-now').fireEvent('change');
						element.getElement('.date-now').fireEvent('blur');
					} );
		    		
		    		return this.type;
		    	}
		    },{
		    	type:	'richtext',
		    	img:	config.url.img + '/icons/style.png',
		    	title:	'HTML',
		    	match: 	function( element ){
		    		return element.getElement('.richtext');
		    	},
		    	create:	function( element, img ){
		    		if( typeof(CKEDITOR) == 'undefined' ){
		    			loadCKEditor(  function(){
		    				this.create.delay(20, this, [element, img]);
		    			}.bind(this) );
		    			return this.type; 
		    		}
		    		
		    		img.addEvent('click', function(e){
						toggleCKEditor( element.getElement('.richtext') );
					} );
		    		
		    		return this.type;
		    	}
		    },{
		    	type:'filter',
		    	img:config.url.img + '/icons/find.png',
		    	match:	function( element ){
		    		return element.getElement('.filter');
		    	},
		    	create: function( element, img ){
		    		var elFilter = new Element('input', {type:'text', 'class':'.filter-element'});
		    		elFilter.inject( element.getElement('select'), 'before');
		    		
		    		var slider = new Fx.Slide( elFilter );
		    		img.store('slider', slider );
		    		slider.hide();
		    		elFilter.setStyle('display', 'inline-block');
		    		img.addEvent('click', function(e){ e.target.retrieve('slider').toggle(); });
		    		
		    		elFilter.addEvent('keyup', function(e){
		    			var select = element.getElement('.filter');
		    			var filterEl = elFilter;
		    			var value = filterEl.get('value').toLowerCase();
		    			filterEl.set('value', value);
		    			
		    			if( value == '' ) return;
		    			
		    			var options = select.getElements('option');
		    			options.setStyle('display', null);
		    			
		    			options.each(function(el){
		    				if( el.get('text').toLowerCase().indexOf(value) === -1 ){
		    					el.setStyle('display', 'none');
		    				}
		    			}, this);
		    		} );
		    		
		    		return this.type;
		    	}
		    }
		]
	},
	
	initialize: function( el, options ){
		
		this.element = el;
		this.setOptions( options );
		
		this.tools = new Hash();
		this.tools.initialized = false;
		this.initTools();
		
		this.element.getElements('input, select, button, textarea').addEvent('focus', this.onFieldFocus.bind(this) );
		this.element.getElements('input, select, button, textarea').addEvent('blur', this.onFieldBlur.bind(this) );
		this.element.addEvent('mouseenter', this.onFocus.bind(this) );
		this.element.getElements('input, select, button, textarea').addEvent('focus', this.onFocus.bind(this) );
		this.element.addEvent('mouseleave', this.onBlur.bind(this) );
		this.element.getElements('input, select, button, textarea').addEvent('blur', this.onBlur.bind(this) );
	},
	
	initTools: function(){
		
		if( this.tools.initialized ) return;
		
		this.options.tools.each(function(tool){
			if( !tool.match(this.element) || this.tools.get(tool.type) != null ) return;
			
			var img = this.getToolbarIcon( tool.img, tool.title );
			
			this.tools.set( tool.type, tool.create(this.element, img) );
			
		}.bind(this));
		
		this.tools.initialized = true;
	},
	
	getToolbar: function(){
		if( this.toolbar == null ){
			this.toolbar = new Element('div', {'class':this.options.toolbarClass});
			this.toolbar.inject( this.element, 'top'  );
			this.toolbar.setStyle('display', 'none');
			
			this.toolbar.addEvent('mouseenter', this.onToolbarFocus.bind(this) );
			this.toolbar.addEvent('mouseleave', this.onToolbarBlur.bind(this) );
			
			this.toolbarFx = new Fx.Tween( this.toolbar );
		}
		
		return this.toolbar;
	},
	
	getToolbarIcon: function( url, title ){
		var img = new Element('img', {'src':url, 'class':'icon', title:title });
		var toolbar = this.getToolbar();
		toolbar.grab( img );
		
		toolbar.setStyle('width', toolbar.getElements('img').length * 22 );
		toolbar.setStyle('height', 22 );
		
		return img;
	},
	
	onFieldBlur: function(){
		this.element.getPrevious('dt').setStyle('font-weight', '');
	},
	
	onFieldFocus: function(){
		this.initTools();
		this.element.getPrevious('dt').setStyle('font-weight', 'bold');
	},
	
	onBlur: function(){
		if( this.toolbar && this.toolbarFocus == false ){
			this.toolbarFx.cancel();
			//var f = function(){ this.toolbar.setStyle('display', 'none'); }.bind(this);
			//this.toolbarFx.onComplete( f );
			this.toolbarFx.start('opacity', 0);
		}
	},
	
	onFocus: function(){
		this.initTools();
		if( this.toolbar && this.toolbarFocus == false && !this.isDisabled() ){
			this.toolbar.setStyle('display', 'block');
			this.toolbar.setStyle('opacity', 0);
			
			this.toolbarFx.cancel();
			this.toolbarFx.start('opacity', 0.3);
		}
	},
	
	onToolbarFocus: function(){
		this.toolbarFocus = true;
		this.toolbarFx.cancel();
		this.toolbarFx.start('opacity', 1);
	},
	
	onToolbarBlur: function(){
		this.toolbarFocus = false;
		this.toolbarFx.cancel();
		this.toolbarFx.start('opacity', 0.3);
	},
	
	isDisabled: function(){
		var els = this.element.getElements('input, textarea, select');
		
		var isDisabled = false;
		els.each(function(el){
			if( el.get('disabled') != false ) isDisabled = true;
		});
		
		return isDisabled;
	}
});


function addInsertKomma( el ){
	el.removeEvent('keydown', insertKomma);
	el.addEvent('keydown', insertKomma);
}

function insertKomma(e){
	if( e.code == 110 ){
		var oldtext = e.target.get('value');
	    var curpos = e.target.selectionStart;
	    pretext = oldtext.substring(0,curpos);
	    posttext = oldtext.substring(curpos,oldtext.length);
	    e.target.set('value', pretext + ',' + posttext);
		e.preventDefault();
	}
}