/*
** Orientatiedag ~ orientatiedag.js
** Author:    Lodewijk Schutte ~ Low
** Last edit: 20100204
*/

var OD = new Object;


OD.Programme = new Class({
	initialize: function(el) {

		// define tmp vars
		var m;

		// main element
		this.container = $(el);
		
		// header element - triggers load
		this.trigger = this.container.getElement('div.header h3 a');
		
		// get subject block
		this.subject = $(this.trigger.className);
		this.subject.getElement('h2').addEvent('click', this.scroll.bindWithEvent(this));
		
		// initiate loaded bool
		this.isLoaded = false;
		this.isOpen	= false;

		// create checkbox, add it to header
		this.box = new Element('input', {type:'checkbox'});
		this.box.addEvent('click', this.load.bind(this));
		this.container.getElement('div.header').grab(this.box, 'top');

		// create target div
		this.tableTarget = new Element('div');
		//this.tableTarget.setStyles({height:'0',overflow:'hidden'});
		this.container.grab(this.tableTarget);

		// create throbber image
		this.throbber = new Image();
		this.throbber.src = '/images/ani_loading.gif';
		
		// get url from element (first link)
		this.url = this.trigger.href;

		// append am/pm to url
		if (m = this.container.className.match(/(a|p)m/)) {
			this.url += m[0]+'/';
		}
		
		this.fx = new Fx.Tween(this.tableTarget);
		
		// create xmlhttprequest
		this.xhr = new Request.HTML({
			url: this.url,
			update: this.tableTarget
		});
		
		// add event to xhr
		this.xhr.addEvent('complete', this.loaded.bind(this));
		
		// add event to header element
		this.trigger.addEvent('click', this.load.bindWithEvent(this));
		
		this.scroll = new Fx.Scroll(window);

	},
	load: function(e) {
		
		if (!this.isLoaded) {
			// either load the table and show

			this.tableTarget.grab(this.throbber);
			this.xhr.get();
		} else {
			// or toggle the table from view
			if (this.isOpen) {
				this.tableTarget.addClass('hidden');
				this.isOpen = false;
			} else {
				this.tableTarget.removeClass('hidden');
				this.isOpen = true;
			}
		}
		
		// don't follow link and toggle checkbox
		if ($(e.target).get('tag') != 'input') {
			e.preventDefault();
			this.toggleBox();
		}

	},
	
	loaded: function() {
		this.isLoaded = true;
		this.isOpen = true;
		this.toggleBox();
	},
	
	toggleBox: function() {
		this.box.checked = this.isOpen;
	},
	
	scroll: function(e) {
		this.scroll.toElement(this.container);
		if (!this.isOpen) this.load(e);
	}
	
});



OD.Programmes = {
	init: function() {
		$(document.body).addClass('js-on');
		var objects = $$('div.prog');
		if (!objects.length) return;
		for (var i = 0, j = objects.length; i < j; i++) {
			new OD.Programme(objects[i]);
		}
	}
};


OD.Details = {
	
	catchClick: function(e) {
		var t = $(e.target);
		
		if (t.getParent('table.programme') && t.get('tag') == 'a') {
			e.preventDefault();
			
			var nr, row;
			
			// get parent color
			var div = t.getParent('div.prog');
			if (nr = div.className.match(/p(\d)/)) {
				OD.LowBox.setClass(nr[0]);
			}

			if (row = t.getParent('tr').className.match(/row\-(\d)/)) {
				OD.LowBox.setClass(row[0]);
			}
			
			//console.log(nr);
			
			OD.LowBox.open(t.href);
		}
		
	},
	
	init: function() {
		document.addEvent('click', this.catchClick.bindWithEvent(this));
	}
};


OD.LowBox = {
	// --- Start aanpasbare instellingen
	closeText	: 'Sluit venster',
	loadingText	: 'Laden...',
	nextText	: 'Volgende',
	prevText	: 'Vorige',
	suffix		: '_snippet',
	opacity		: 2,
	offset		: 75,
	prevImg		: '/images/icon_lt.gif',
	nextImg		: '/images/icon_gt.gif',
	useNames	: false, 
	loop		: false, 
	debug		: true,
	setClass: function(str) {
		this.box.className = str;
	},
	open: function(url) {
		// turn on overlay and box
		this.overlay.style.display = this.box.style.display = 'block';
		this.box.style.top = (window.getScroll().y + this.offset) + 'px';
		this.content.innerHTML = '';
		this.status = true;
		this.box.addClass('loading');
		this.content.load(url);
	},
	opened: function() {
		this.box.removeClass('loading');
	},
	closeBox: function() {
		this.overlay.style.display = 'none';
		this.box.style.display = 'none';
		this.content.innerHTML = '';
		this.status = false;
		return false;	
	},
	init: function() {
		// transparent overlay
		this.overlay = new Element('div',{
			id: 'lowover',
			styles: {
				display: 'none',
				opacity: this.opacity/10,
				filter: 'alpha(opacity=' + this.opacity*10 + ')'
			},
			events: {
				click: this.closeBox.bind(this)
			}
		});
		document.body.appendChild(this.overlay);

		this.box = new Element('div',{
			id: 'lowbox',
			styles: {display: 'none'}
		});
		document.body.appendChild(this.box);
		
		this.content = new Element('div');
		this.content.set('load',{onComplete:this.opened.bind(this)});
		this.box.appendChild(this.content);
				
		this.closeLink = document.createElement('a');
		this.closeLink.id = 'closebox';
		this.closeLink.href = '#';
		this.closeLink.onclick = this.closeBox.bind(this);
		this.closeLink.appendChild(document.createTextNode('Sluiten'));
		this.box.appendChild(this.closeLink);
	}
};


OD.FlashMap = {
	swf: '/flash/orientatiedag_plattegrond.swf',
	width: 800,
	height: 800,
	container: undefined,
	init: function() {
		var p = $$('div.pr4 p');

		if (!p.length) return;

		new Swiff(this.swf, {
			container: p[0],
			width: this.width,
			height: this.height,
			vars: {locatie: location.hash.replace('#','')}
		});
	}
};

// ----- INITIATE HASH 

for (var i in OD) {
	if (typeof OD[i].init == 'function') {
		window.addEvent('domready', OD[i].init.bind(OD[i]));
	}
}