window.addEvent('domready', loadpage);

var Image2Blocks = new Class({

	numrows: 0,
	numcols: 0,
	blocks: new Array(),
	container: null,

 	options: {
 		blocksize: {x: 50, y: 50},
 		styles: {'overflow': 'hidden'}
 	},

	initialize: function(img, options){
		img = $(img);
 		this.setOptions(options);
 		this.blocks = new Array();
 		this.container = null;

		// Alias for 100%
 		if (this.options.blocksize.x == '100%') this.options.blocksize.x = img.offsetWidth;
 		if (this.options.blocksize.y == '100%') this.options.blocksize.y = img.offsetHeight;

 		this.options.blocksize.x = this.options.blocksize.x.toInt();
 		this.options.blocksize.y = this.options.blocksize.y.toInt();

 		this.numcols = Math.ceil(img.offsetWidth  / this.options.blocksize.x);
 		this.numrows = Math.ceil(img.offsetHeight / this.options.blocksize.y);

 		// Create blocks of image
 		var blockidx = 0;
		for (var i=0; i<this.numrows; i++) {
			var bpy = i*this.options.blocksize.y;
			var bwy = (i==this.numrows-1?(img.offsetHeight-bpy):this.options.blocksize.y).toInt();
			for (var j=0; j<this.numcols; j++) {
				var bpx = j*this.options.blocksize.x;
				var bwx = (j==this.numcols-1?(img.offsetWidth-bpx):this.options.blocksize.x).toInt();
				this.blocks[blockidx] = new Element('div', {
						'styles': {
							'position': 'absolute',
							'top': (bpy)+'px',
							'left': (bpx)+'px',
							'width': bwx+'px',
							'height': bwy+'px',
							'background': 'url('+img.src+') no-repeat',
							'background-position': (-1*bpx)+'px '+(-1*bpy)+'px'
						}
					});
				this.blocks[blockidx].posx = (bpx)+'px';
 				this.blocks[blockidx].posy = (bpy)+'px';
 				blockidx++;
			}
		}

		// Replace img with new div
 		this.container = new Element('div');
 		this.container.setStyles({
				'position': 'relative',
				'width': img.offsetWidth,
				'height': img.offsetHeight
			});
 		this.container.setStyles(this.options.styles);
		this.container.adopt(this.blocks);
		img.replaceWith(this.container);
	},

	getBlocks: function(order, rowcol) {
		rowcol = rowcol?rowcol.toInt():0;
		if (order == 'random') {
			// Return blocks randomized
			var blockscp = this.blocks.copy();
			blockscp.shuffle();
			return blockscp;
		} else if (order == 'row') {
			// Return 1 row of blocks
			if (rowcol >= this.numrows) return null;
			var blockscp = new Array();
			for (var i=0; i<this.numcols; i++) {
				blockscp[i] = this.blocks[(rowcol*this.numcols)+i];
			}
			return blockscp;
		} else if (order == 'column') {
			// Return 1 column of blocks
			if (rowcol >= this.numcols) return null;
			var blockscp = new Array();
			for (var i=0; i<this.numrows; i++) {
				blockscp[i] = this.blocks[rowcol+(i*this.numcols)];
			}
			return blockscp;
		} else {
			// Return blocks as is
			return this.blocks;
		}
	}
});
Image2Blocks.implement(new Options);

var imgFxs = new Array();
function loadpage()
{
	initmenu();

	$$('#imgfader').each(function(sliderdiv) {
		sliderdiv.setStyle('opacity', 0);
	});

	/*var imgfades = $$('#imgfader img');
	imgfades.each(function(img, q) {
			imgFxs[q] = new Image2Blocks(img, {blocksize:{x: '100%', y: 10}, 'styles': {'position': 'absolute', 'top': '0px', 'left': '0px'}});
			var blocks = imgFxs[q].getBlocks();
			blocks.each(function(block, j) {
					block.fx = new Fx.Style(block, 'left', {duration:1000, transition:Fx.Transitions.Elastic.easeOut});
					block.fx.set(-500);
				});
		});

	if (imgfades[0]) showimg(0);*/

	// Get all elements with className newwindow and attach handler
	var newwinlinks = document.getElements('.newwindow');
  newwinlinks.each(function(node) {
      node.addEvent('click', opennewwin);
    });
}

window.addEvent('load', function() {
	$$('#imgfader').each(function(sliderdiv) {
		if (sliderdiv.getElements('.control').length != sliderdiv.getElements('img').length) {
			sliderdiv.getElements('img').each(function(el) {
				new Element('div', {'class':'control'}).inject(sliderdiv);
			});
		}
		sliderdiv.tween('opacity', 1);
		var slide = new slider(sliderdiv, sliderdiv.getElements('.control'), sliderdiv.getElements('img'), {
			duration: 1000
		});
		slide.init();
	});
});

function showimg(curimgFxs)
{
	var blocks, i, k;

	// Swap z-index
	var previmgFxs = curimgFxs==0?imgFxs.length-1:curimgFxs-1;
	imgFxs[previmgFxs].container.setStyle('z-index', 1);
	imgFxs[curimgFxs].container.setStyle('z-index', 2);

	// Start animation
	for (i=0, k=0; blocks = imgFxs[curimgFxs].getBlocks('row', i); i++)
	{
 		blocks.each(function(block) {
  			(function(){block.fx.start(block.posx)}).delay(50*k);
  			k++;
  		});
	}

	if (curimgFxs != previmgFxs)
	{
		// Reset position
		blocks = imgFxs[previmgFxs].getBlocks();
		blocks.each(function(block) {(function(){block.fx.set(-500)}).delay(50*k);});
		
		curimgFxs = imgFxs[curimgFxs+1]?curimgFxs+1:0;
		setTimeout('showimg('+curimgFxs+')', 10000);
	}
}

function opennewwin(event)
{
	// Open link in new window
	window.open(searchtagup(this, 'A').href, '_blank');
	var eventObj = new Event(event);
	eventObj.stop();
}

function searchtagup(el, tag)
{
	tag = tag.toUpperCase();
	if (!el.parentNode) return false;
	return el.tagName==tag?el:searchtagup(el.parentNode, tag);
}

function initmenu()
{
	var szNormal = 24;
	var szFull   = 36;
	var szSmall  = Math.round($("navigatie").hasClass('home')?(szNormal*6-szFull)/5:(szNormal*5-szFull)/4);

	$('tohome').addEvent('click', tohome);

	var kwicks = $$("#navigatie li a");
	var fx = new Fx.Elements(kwicks, {wait: false, duration: 300, transition: Fx.Transitions.Sine.easeOut});
	kwicks.each(function(kwick, i) {
		kwick.addEvent('click', menuclicked);
		kwick.addEvent("mouseenter", function(event) {
			if (kwick.hasClass('selected'))
			{
				$("navigatie").fireEvent('mouseleave');
				return;
			}
			var o = {};
			o[i] = {height: [kwick.getStyle("height").toInt(), szFull]}
			kwicks.each(function(other, j) {
				if(i != j) {
					var w = other.getStyle("height").toInt();
					if(w != szSmall && !other.hasClass('selected')) o[j] = {height: [w, szSmall]};
				}
			});
			fx.start(o);
		});
	});

	$("navigatie").addEvent("mouseleave", function(event) {
		var o = {};
		kwicks.each(function(kwick, i) {
			o[i] = {height: [kwick.getStyle("height").toInt(), szNormal]}
		});
		fx.start(o);
	})
}

function tohome(event)
{
	var navel = $("navigatie");
	if (!navel.hasClass('home'))
	{
		var eventObj = new Event(event);
		eventObj.stop();
		$E("#navigatie li a.selected").removeClass('selected');
		var navChange = new Fx.Style(navel, 'width', {duration:1000, onComplete: function(){window.open('home', '_self');}});
		navChange.start(786);
	}
}

function menuclicked(event)
{
	var navel  = $("navigatie");
	var kwicks = $$("#navigatie li a");
	var oldsel = '';

	var eventObj = new Event(event);
	eventObj.stop();

	kwicks.each(function(kwick) {
		kwick.removeEvents('mouseenter');
		kwick.removeEvents('click');
		if (kwick.hasClass('selected'))
		{
			oldsel = kwick.id;
			kwick.removeClass('selected');
		}
	});

	this.addClass('selected');

	navel.fireEvent('mouseleave');
	navel.removeEvents('mouseleave');

	setTimeout("swapmenu('"+this.id+"', '"+oldsel+"')", 300);
}

function swapmenu(menuid, oldsel)
{
	var navel = $("navigatie");
	var curel = $(menuid);
	var navChange;
	if (navel.hasClass('home'))
	{
		if (oldsel)
		{
			$('submenu').removeClass(oldsel);
		}
		$('submenu').addClass(curel.id);
		navChange = new Fx.Tween(navel, {property: 'width', duration:1000, onComplete: function(){window.open(curel.href, '_self');}});
		navChange.start(381);
	}
	else
	{
		var _curel = curel;
		navChange = new Fx.Tween(navel, {property: 'width', duration:1000, onComplete: function(){
				$('submenu').empty();
				if (oldsel)
				{
					$('submenu').removeClass(oldsel);
				}
				$('submenu').addClass(_curel.id);
				var navChange2 = new Fx.Tween(navel, {property: 'width', duration:1000, onComplete: function(){window.open(_curel.href, '_self');}});
				navChange2.start(381);
			}});
		navChange.start(786);
	}
}

Array.prototype.shuffle = function() {
	var l = this.length;
	for (var i = 0; i < l; i++) {
		// Random item in this array.
		var r = parseInt(Math.random() * l);
		var obj = this[r];

		// Swap.
		this[r] = this[i];
		this[i] = obj;
}
}

var slider = new Class({

	Extends: Fx.Elements,

	options: {
		autotimer: 3000,
		link: 'cancel'
	},

	initialize: function(element, controls, elements, options) {
		this.element = element;
		this.setOptions(options);
		this.nextel = 0;
		this.controls = controls;
		this.elements = elements;
		this.started = false;

		var maxheight = 0;
		this.elements.each(function(el) {
			maxheight = maxheight > el.getSize().y ? maxheight : el.getSize().y;
		}, this);

		this.element.setStyle('height', maxheight);

		if (this.elements.length == 1) {
			return;
		}

		this.elements.setStyle('opacity', 0);

		var auto = this.element.get('class').match(/auto_([0-9]+)/);
		if (auto) {
			this.options.autotimer = auto[1];
		} else if (this.element.hasClass('noauto')) {
			this.options.autotimer = 0;
		}

		this.controlcont = false;
		if ($('controls-'+this.element.get('id'))) {
			this.controlcont = $('controls-'+this.element.get('id'));
		}

		this.controls.each(function(head, i) {
			if (this.controlcont) {
				head.inject(this.controlcont);
			} else {
				head.inject(this.elements[0], 'before');
			}
			head.addEvent('mouseover', this.slide.bindWithEvent(this, i));
			head.addEvent('click', function(e){e.stop();});
			if (head.hasClass('sliderinit')) {
				this.nextel = i;
			}
		}, this);

		var me = this;
		this.element.addEvent('mouseleave', function() {
			$clear(this.autoslide);
			if (me.options.autotimer > 0) {
				this.autoslide = me.doSlide.periodical(me.options.autotimer, me);
			}
		});

		this.element.addEvent('mouseenter', function() {
			$clear(this.autoslide);
		});
	},

	slide: function(e, curel) {
		this.nextel = curel;
		this.doSlide();
		this.element.fireEvent('mouseenter');
	},

	doSlide: function() {
		if (this.controls.length == 0 || this.elements.length == 0) {
			return;
		}
		if (!this.controls[this.nextel]) {
			this.nextel = 0;
		}

		var obj = {};
		this.elements.each(function(el, i) {
			if (el.getStyle('opacity') != 0 && i != this.nextel) {
				el.setStyle('z-index', 1);
				obj[i] = {'opacity': [el.getStyle('opacity'), 0]};
			} else if (i == this.nextel) {
				obj[i] = {'opacity': [el.getStyle('opacity'), 1]};
				el.setStyle('z-index', 2);
			}
		}, this);
		this.start(obj);

		this.controls.removeClass('active');
		this.controls[this.nextel].addClass('active');
		this.nextel++;
	},

	init: function() {
		if (!this.started) {
			this.started = true;
			this.element.fireEvent('mouseleave');
			this.doSlide();
		}
	}
});
slider.implement(new Options);