/*
 * voorbeeld js code:
<script type="text/javascript">
if (!navigator.mimeTypes && !navigator.mimeTypes["application/x-shockwave-flash"]) {
	$('header-flash').setStyle('display','none');
	$('header-js').setStyle('display','block');
	
	window.addEvent('load', function() {
		new Header({
			zoom_factor:1.18,
			main_container:$('header-js'),
			main_container_element:'span',
			duration:4000
		});
	});
} else {
	
	$('header-js').setStyle('display','none');
}
</script>
 * 
 * voorbeeld html code:
<div id="header-js" style="display:none;overflow:hidden; width: 960px;height: 250px;position: absolute;margin: 0 -10px;z-index: 2;">
	<span style="position: absolute; visibility: visible; opacity: 1;">
		<img style="margin-left:-30px;margin-top:-20px;" src="../img/header01.jpg" id="header-js-image" class="header-js-image" alt="" />
	</span>
	<span style="position: absolute; visibility: hidden; opacity: 0;">
		<img style="margin-left:-30px;margin-top:-20px;" src="../img/header02.jpg" id="header-js-image" class="header-js-image"  alt="" />
	</span>
	<span style="position: absolute; visibility: hidden; opacity: 0;">
		<img style="margin-left:-30px;margin-top:-20px;" src="../img/header03.jpg" id="header-js-image" class="header-js-image"  alt="" />
	</span>
	<span style="position: absolute; visibility: hidden; opacity: 0;">
		<img style="margin-left:-30px;margin-top:-20px;" src="../img/header04.jpg" id="header-js-image" class="header-js-image"  alt="" />
	</span>
</div>
 */

var Header = new Class ({
	options: {},
	initialize : function(options) {
		this.zoom_factor = options.zoom_factor || 1.2;
		this.duration = options.duration || 3000;
		this.main_container = options.main_container || $('header-js');
		this.main_container_element = options.main_container_element || 'span';
		this.images_list = this.main_container.getElements(this.main_container_element);
		this.images = this.images_list.getChildren();
		this.zoom(0);
	},
	zoom : function(key) {
		var image = this.images[key][0];
		var initial_size = image.getSize();
		var coord = image.getCoordinates();
		image.setStyles({
			position:'relative',
			left:0,
			top:0});
		
		
		var container = new Element('div').setStyles({
			width:initial_size.x,
			height:initial_size.y,
			overflow:'hidden',
			position:'absolute',
			left:0,
			top:0,
			width:'960px',
			height:'250px',
			margin:'0pt 0px'
		}).set('id','header-js-container-'+key).injectInside(this.main_container).adopt(image);
		
		this.images_list[key].grab(container);
		
		var limiter = new Element('div').setStyles({
			width:initial_size.x,height:initial_size.y
		}).set('id','header-js-limiter-'+key).injectBefore(image).adopt(image);

		
		xi = parseInt(image.getStyle('left'))
		yi = parseInt(image.getStyle('top'))
			
		new_h = (coord.height) * this.zoom_factor;
		new_w = (coord.width) * this.zoom_factor;
		
		// (Math.random() * (uitersteminmargin - uiterstemaxmargin + 1) + uiterstemaxmargin);
		//zorgt ervoor dat de uiteinden van de image niet zichtbaar zijn
		new_t = parseInt(image.getStyle('margin-top')) + (Math.random() * (-50 - 10 + 1) + 10);
		new_l = parseInt(image.getStyle('margin-left')) + (Math.random() * (-100 - 30 + 1) + 30);
		
		limiter.setStyles({
			'margin-left':-(coord.width*this.zoom_factor-initial_size.x), 
			'width':(2*coord.width*this.zoom_factor-initial_size.x),
			'margin-top':-(coord.height*this.zoom_factor-initial_size.y), 
			'height':(2*coord.height*this.zoom_factor-initial_size.y) 
		});
		
		image.setStyles({
			'left':(coord.width*this.zoom_factor-coord.width+xi),
			'top':(coord.height*this.zoom_factor-coord.height+yi)
		});
		
		var zoom_in=new Fx.Morph( 
				image,
				{ onComplete: function() 
					{ 
						setTimeout(function() { thisObj.nextImage(key); }, 750);
						thisObj = this;
						setTimeout(function() { thisObj.images[key][0].erase('style'); }, 1000, 'style');
						setTimeout(function() { thisObj.images[key][0].set('style','margin-left:-30px;margin-top:-20px;'); }, 1000);
						setTimeout(function() { $('header-js-container-'+key).getChildren().replaces($('header-js-container-'+key)); },1000);
						setTimeout(function() { $('header-js-limiter-'+key).getChildren().replaces($('header-js-limiter-'+key)); },1000);

					}.bind(this),
				duration: this.duration, 
				transition:'linear', 
				wait:true
			}
		);
		
		zoom_in.start({
			'height':new_h, 
			'width': new_w,
			'margin-left': new_l,
			'margin-top': new_t
		});
	},
	nextImage : function(key) {
		
		if(this.images_list.length > 1){
			var currentIndex = key;
			var interval;
			/* opacity and fade */
			this.images_list.each(function(img,i){ 
				if(i > 0) {
					img.set('opacity',0);
				}
			});
			this.images_list[currentIndex].fade('out');
			this.images_list[currentIndex = currentIndex < this.images_list.length - 1 ? currentIndex+1 : 0].fade('in');
			if(key < this.images_list.length - 1) {
				key++;
			} else {
				key = 0;
			}
			thisObj = this;
			setTimeout(function() { thisObj.zoom(key); }, 1000);
		}
	}
});