/*
*	22-3-2009: 	center functie aangepast
				<a> ook toegevoegd als clicker
*
*
*//*
var ModalWindow = new Class({

	Implements: [Options, Events],

	initialize: function(options){		
        this.setOptions(options);
        this.injectModal();        
        this.overlay = new Overlay({color: this.options.overlayColor});
        
        $$('.'+ this.options.className).each( function(item, index){
        	var toShow = {
        		'src': item.getProperty('href'),        		
        		'title': item.getProperty('title'),
        		'rel': item.getProperty('rel')
        	};        	
        	var clicker = $(item).getFirst();
        	item.addEvent('click', function(event){
        		event.stop();
        		this.loadingIndicator = new LoadingIndicator({container: clicker});
        		this.init(clicker, toShow);
        	}.bind(this));      
        	clicker.addEvent('click', function(event){
        		event.stop();
        		this.loadingIndicator = new LoadingIndicator({container: clicker});
        		this.init(clicker, toShow);
        	}.bind(this));
        	       	
        }, this);        
    },
    
    init: function(clicker, toShow){    
		this.loadingIndicator.show();
		var img = this.preload(toShow);		
		img.addEvent('load', function(){	
			this.loadingIndicator.hide();
			
			if (this.options.showOverlay) {
			
				this.overlay.addEvent('onShow', function(){	
					this.show(img, clicker);
					this.overlay.removeEvents('onShow');
				}.bind(this));
				
				this.overlay.addEvent('onHide', function(start){					
					this.hide(start); 
					this.overlay.removeEvents('onHide');
				}.bind(this));
				
				this.overlay.show();
				
			} else {
			//console.log('init',img.width,img.height);
				this.show(img, clicker);
			}
		}.bind(this));
    },
    
    preload: function(toShow){
    	var img = new Image();    	
		img.src = toShow.src;
		img.title = toShow.title;
		return img;
    },
    
    show: function(img, clicker){
    	$('modal-content').empty();    	
		var dimensions = (this.options.allowResize) ? this.resize(img) : {width: img.width, height: img.height};
		$(img).inject($('modal-content'));
		var pos = this.center(dimensions);
		var padding = this.getPadding($('modal-outer'));	
		var zoom = new Fx.Morph('modal-outer',{
			'duration': this.options.zoomSpeed,
			'transition': Fx.Transitions.Quad.easeInOut
		});
		//console.log($('modal-outer').getStyle('display'));
		if ($('modal-outer').getStyle('display') == 'block'){
			zoom.start({
			    'width': dimensions.width,
				'height': dimensions.height,
				'left': pos.x,
				'top': pos.y
			});
		} else {
			var start = clicker.getCoordinates();			
			zoom.set({
			    'height': start.height,
			    'width': start.width,
				'top': start.top - (padding.y/2),
				'left': start.left - (padding.x/2),
				'display': 'block'
			});
			zoom.start({
			    'width': dimensions.width,
				'height': dimensions.height,
				'left': pos.x,
				'top': pos.y
			});
			zoom.addEvent('complete', function(){
				$('modal-shadow').setStyle('display','block');
				$('modal-close').setStyle('display','block').addEvent('click', function(){
					(this.options.showOverlay) ?  this.overlay.fireEvent('onOverlayClick') : this.hide(start);
				}.bind(this));
				if (this.options.showOverlay) this.overlay.addEvent('onOverlayClick', function(){ this.hide(start); this.removeEvents('onOverlayClick');});
			}.bind(this));	
		}
    },
	
	hide: function(original){
		//console.log('clicker=',original);
		$('modal-close').setStyle('display','none').removeEvents('click');
		$('modal-shadow').setStyle('display','none');
		(function(){$('modal-content').empty()}).delay(500);
		var padding = this.getPadding($('modal-outer'));
		var zoom = new Fx.Morph('modal-outer',{
			'duration': this.options.zoomSpeed,
			'transition': Fx.Transitions.Quad.easeInOut
		});
		zoom.start({
		    'width': (original.width),
			'height': (original.height),
			'left': original.left - (padding.y/2),
			'top': original.top - (padding.x/2)
		}).addEvent('complete', function(){
			$('modal-outer').setStyle('display', 'none');
		}.bind(this));
    },
	
	center: function(img){
		//console.log('center',img.width,img.height);
		var win = window.getSize();
		var wins = window.getScroll();
		var padding = this.getPadding($('modal-outer'));
		return {
			x: wins.x + (Math.floor( Math.floor(win.x - (img.width + padding.x)) / 2)), 
			y: wins.y + (Math.floor( Math.floor(win.y - (img.height + padding.y)) / 2))
		};
	},

	getPadding: function(el){
		var org = el.getStyles('width','height','display'), padding;
		if (org.display == 'none'){
			padding = el.setStyles({'width': 0, 'height': 0, 'display': 'block'}).getSize();
			el.setStyles(org);
		} else { 
			padding = el.setStyles({'width': 0, 'height': 0}).getSize();
			el.setStyles(org);
		}
		return padding;		
	},

	resize: function(img){
		//console.log('resize',img.width,img.height);
		var win = window.getSize();
		var r = Math.min(Math.min(win.x - 50, img.width) / img.width, Math.min(win.y - 100, img.height) / img.height);
		return {width: Math.round(r * img.width), height: Math.round(r * img.height)};
	},

	injectModal: function(){
		new Element('div',{	'id': 'modal-outer'}	).grab(
			new Element('div',{	'id': 'modal-inner'}).adopt([ 
				new Element('div',{	'id': 'modal-content'}),
				new Element('div',{	'id': 'modal-close'}),
				new Element('div',{	'id': 'modal-shadow'}).set('html',
					'<div class="shadow-n"></div><div class="shadow-ne"></div><div class="shadow-e"></div><div class="shadow-se"></div><div class="shadow-s"></div><div class="shadow-sw"></div><div class="shadow-w"></div><div class="shadow-nw"></div>'
				)
			])
		).inject(document.body, 'top');
	},
	
	options: {
		className: 'show-in-modal',
		showOverlay: false,
		overlayColor: '#333333',
		allowResize: true,
		allowZoom: true,
		zoomSpeed: 500
	}
});*/
var ModalWindow = new Class({

	Implements: [Options, Events],

	initialize: function(options){		
        this.setOptions(options);
        this.injectModal();        
        this.overlay = new Overlay({color: this.options.overlayColor});
        
        $$('.'+ this.options.className).each( function(item, index){
        	var toShow = {
        		'src': item.getProperty('href'),        		
        		'title': item.getProperty('title'),
        		'rel': item.getProperty('rel')
        	};        	
        	var clicker = $(item).getFirst();
        	clicker.addEvent('click', function(event){
        		event.stop();
        		this.loadingIndicator = new LoadingIndicator({container: clicker});
        		this.init(clicker, toShow);
        	}.bind(this));   
        	item.addEvent('click', function(event){
        		event.stop();
        		this.loadingIndicator = new LoadingIndicator({container: clicker});
        		this.init(clicker, toShow);
        	}.bind(this));      
        	
        }, this);        
    },
    
    init: function(clicker, toShow){    
		this.loadingIndicator.show();
			
		var proceed = function(img){		
			this.loadingIndicator.hide();				
			if (this.options.showOverlay) {
			
				this.overlay.addEvent('onShow', function(){	
					this.show(img, clicker);
					this.overlay.removeEvents('onShow');
				}.bind(this));
				
				this.overlay.addEvent('onHide', function(start){					
					this.hide(start); 
					this.overlay.removeEvents('onHide');
				}.bind(this));
				
				this.overlay.show();
				
			} else {
				//console.log('init',img.width,img.height);
				this.show(img, clicker);
			}			
		}.bind(this);
		
		var img = new Asset.image(toShow.src, {
			title: toShow.title,
			'onload': proceed
		});		
		
    },
    
    preload: function() {
    	
    },
    
   
    
    show: function(img, clicker){
    	//console.log($('modal-outer').getStyle('display'));
    	$('modal-content').empty();
		var dimensions = (this.options.allowResize) ? this.resize(img) : {width: img.width, height: img.height};
		$(img).inject($('modal-content'));
		
		var pos = this.center(dimensions);
		
		var padding = this.getPadding($('modal-outer'));
		var zoom = new Fx.Morph('modal-outer',{
			'duration': this.options.zoomSpeed,
			'transition': Fx.Transitions.Quad.easeInOut
		});
		//console.log($('modal-outer').getStyle('display'));
		if ($('modal-outer').getStyle('display') == 'block'){
			zoom.start({
			    'width': dimensions.width,
				'height': dimensions.height,
				'left': pos.x,
				'top': pos.y
			});
		} else {
			var start = clicker.getCoordinates();
						
			zoom.set({
			    'height': start.height,
			    'width': start.width,
				'top': start.top - (padding.y/2),
				'left': start.left - (padding.x/2),
				'display': 'block'
			});
			zoom.addEvent('start', function(){
				//alert('Event start gefired');
				
			});	
			zoom.start({
			    'width': dimensions.width,
				'height': dimensions.height,
				'left': pos.x,
				'top': pos.y
			});
			
			
			
			zoom.addEvent('complete', function(){
				$('modal-shadow').setStyle('display','block');
				$('modal-close').setStyle('display','block').addEvent('click', function(){
					(this.options.showOverlay) ?  this.overlay.fireEvent('onOverlayClick') : this.hide(start);
				}.bind(this));
				if (this.options.showOverlay) this.overlay.addEvent('onOverlayClick', function(){ this.hide(start); this.removeEvents('onOverlayClick');});
			}.bind(this));	
		}
    },
	
	hide: function(original){
		$('modal-close').setStyle('display','none').removeEvents('click');
		$('modal-shadow').setStyle('display','none');
		(function(){$('modal-content').empty()}).delay(500);
		var padding = this.getPadding($('modal-outer'));
		var zoom = new Fx.Morph('modal-outer',{
			'duration': this.options.zoomSpeed,
			'transition': Fx.Transitions.Quad.easeInOut
		});
		zoom.start({
		    'width': (original.width),
			'height': (original.height),
			'left': original.left - (padding.y/2),
			'top': original.top - (padding.x/2)
		}).addEvent('complete', function(){
			$('modal-outer').setStyle('display', 'none');
		}.bind(this));
    },
	
	center: function(img){
		var win = window.getSize(),
			padding = this.getPadding($('modal-outer')),
			wins = window.getScroll();
		return {x: wins.x + (Math.floor( Math.floor(win.x - (img.width + padding.x)) / 2)), y: wins.y + (Math.floor( Math.floor(win.y - (img.height + padding.y)) / 2))};
	},

	getPadding: function(el){
		
		var org = el.getStyles('width','height','display'), padding;		
		
		if (org.display == 'none'){			
			padding = el.setStyles({'width': 0, 'height': 0, 'display': 'block'}).getSize();
					
			if (org.width > 0)	el.setStyle('width',org.width); // IE geeft soms een width -36, en dan crasht de boel
			if (org.height > 0)	el.setStyle('height',org.height); 
			el.setStyle('display',org.display);
			
		} else { 
			padding = el.setStyles({'width': 0, 'height': 0}).getSize();
			el.setStyles(org);
		}
		
		return padding;		
	},

	resize: function(img){
		//console.log('resize',img.width,img.height);
		var win = window.getSize();
		var r = Math.min(Math.min(win.x - 50, img.width) / img.width, Math.min(win.y - 100, img.height) / img.height);
		return {width: Math.round(r * img.width), height: Math.round(r * img.height)};
	},

	injectModal: function(){
		new Element('div',{	'id': 'modal-outer', 'styles': {'display': 'none'}}	).grab(
			new Element('div',{	'id': 'modal-inner'}).adopt([ 
				new Element('div',{	'id': 'modal-content'}),
				new Element('div',{	'id': 'modal-close'}),
				new Element('div',{	'id': 'modal-shadow'}).set('html',
					'<div class="shadow-n"></div><div class="shadow-ne"></div><div class="shadow-e"></div><div class="shadow-se"></div><div class="shadow-s"></div><div class="shadow-sw"></div><div class="shadow-w"></div><div class="shadow-nw"></div>'
				)
			])
		).inject(document.body, 'top');
	},
	
	options: {
		className: 'show-in-modal',
		showOverlay: false, 
		allowResize: true,
		allowZoom: true,
		zoomSpeed: 500,
		overlayColor: '#333333'
	}
});