var getPosLeft = function (el) { return (el.offsetParent) ? el.offsetLeft+getPosLeft(el.offsetParent) : el.offsetLeft; }
var getPosTop = function (el) { return (el.offsetParent) ? el.offsetTop+getPosTop(el.offsetParent) : el.offsetTop; }


var navigation_url;
var navigation_move = {from: 'back', to: 'front'};

var navigation = new function () {

	this.frameoverlay;
	this.iframe, this.naviEffect, this.naviEffectWidth;
	this.lastlink;
	this.player; this.playlist, this.controller, this.tracklist;
	this.currentItem;
	this.moveTime = 300;
	this.isController = false;
	this.controllerMoveTime = 600;
	this.controllerWaitForClose = 1000;
	this.controllerTimeout;
	this.locked = false;


	this.init = function () {
		this.naviEffectWidth = 224;
	
		var fl_logo = new SWFObject('/template/swf/logo.swf', 'fl_logo', '285', '92', '9');
		fl_logo.addParam('wmode', 'transparent');
		fl_logo.write('start');
	
		var links = document.getElementsByTagName('a');
		for (var i = 0; i < links.length; i++) {
			links[i].onclick = function (e) {
				if (navigation.isController) navigation.moveController();
				
				var top_last = getPosTop(navigation.lastlink);
				var top = getPosTop(this);
				
			
				
				if (top_last == top) {
					navigation_move = (getPosLeft(navigation.lastlink) < getPosLeft(this)) ? {from: 'right', to: 'left'} : {from: 'left', to: 'right'};
				} else if (top_last < top)
					navigation_move = {from: 'bottom', to: 'top'};
				else
					navigation_move = {from: 'top', to: 'bottom'};
	
				var next_depth = this.href.split('/').length;
				var last_depth = (typeof navigation_url == 'string') ? navigation_url.split('/').length : 0;
			
				if (next_depth < last_depth)
					navigation_move.to = 'back';

				
				navigation_url = this.href;
				navigation.lastlink = this;
				return false;
			}
			
			if (links[i].parentNode.id == 'navigation_buttons') {
				links[i].onmouseover = function (e) {
					new Motion(navigation.naviEffect, 'marginLeft', 'px', true, 0, getPosLeft(this) - getPosLeft(this.parentNode.parentNode) + 20, navigation.moveTime);
					new Motion(navigation.naviEffect, 'width', 'px', true, navigation.naviEffectWidth, this.offsetWidth - 20, navigation.moveTime);
				}
				links[i].onmouseout = function (e) {
					new Motion(navigation.naviEffect, 'marginLeft', 'px', true, getPosLeft(this) - getPosLeft(this.parentNode.parentNode) + 20, 0, navigation.moveTime);
					new Motion(navigation.naviEffect, 'width', 'px', true, this.offsetWidth - 20, navigation.naviEffectWidth, navigation.moveTime);
				}
			}
		}
		
		this.lastlink = links[0];
		
		this.naviEffect = document.getElementById('navi_effect');
	//	this.naviEffectWidth = this.naviEffect.offsetWidth;
		this.iframe = document.getElementById('content');

		this.frameoverlay = document.createElement('img');
		this.frameoverlay.src = '/template/img/bg_frame.jpg';
		this.frameoverlay.style.position = 'absolute';
		this.overlay(true);
		
		document.body.appendChild(this.frameoverlay);
		
		
		
		
		
		
		
		// MP3 Player
		
		var layer = document.createElement('div');
		layer.id = 'mp3player';
		document.body.appendChild(layer);
		
		
		var player = new SWFObject('/template/swf/player.swf', 'mpl', '100', '100', '9');
		player.addParam('allowscriptaccess', 'always');
		player.addParam('flashvars', 'repeat=always&file=/ajax/?playlist');
		player.write(layer.id);
		
		this.createPlayer();
	}
	
	this.overlay = function (show) {
		this.frameoverlay.style.left = getPosLeft(this.iframe) + 'px';
		this.frameoverlay.style.top = getPosTop(this.iframe) + 'px';
		this.frameoverlay.style.display = show ? 'block' : 'none';
	}
	
	this.createPlayer = function () {
		try {
			this.player = document['mpl'];
			this.playlist = this.player.getPlaylist();
			if (!this.playlist) throw('not loaded');
		} catch (e) {
			window.setTimeout('navigation.createPlayer();', 100);
			return;
		}
	
		this.tracklist = document.createElement('ul');
		this.tracklist.className = 'tracklist';
		
		for (var i = 0; i < this.playlist.length; i++) {
			var track = document.createElement('li');
			track.appendChild(document.createTextNode(this.playlist[i].author + ' - ' + this.playlist[i].title));
			track.onclick = function (e) {
				for (var index = 0; index < navigation.tracklist.childNodes.length; index++) {
					if (navigation.tracklist.childNodes[index] == this) {
						navigation.player.sendEvent('ITEM', index);
						navigation.listenPlay({state: true});
						break;
					}
				}
			}
			this.tracklist.appendChild(track);
		}
		
		this.artistlayer = document.createElement('h1');
		this.titlelayer = document.createElement('div');
		this.titlelayer.className = 'title';
		
		this.seek = document.createElement('div')
		this.seek.className = 'seek';
		this.innerSeek = document.createElement('div');
		this.seek.appendChild(this.innerSeek);
		this.seek.onclick = function (e) {
			var percent = (((document.all) ? e.x + document.body.scrollLeft : e.pageX) - getPosLeft(this)) / this.offsetWidth;
			var duration = navigation.player.getPlaylist()[navigation.currentItem].duration;
			navigation.player.sendEvent('SEEK', Math.round(percent * duration));
			navigation.listenPlay({state: true});
		}
		
		
		this.controller = document.createElement('div');
		this.controller.id = 'mp3controller';
		
		
		var bar = document.createElement('div');
		bar.className = 'bar';
		
		this.buttonPlay = document.createElement('div');
		this.buttonPlay.className = 'button pause';
		this.buttonPlay.onclick = function (e) {
			navigation.player.sendEvent('PLAY', null);
		}
		
		var buttonPrev = document.createElement('div');
		buttonPrev.className = 'button prev';
		buttonPrev.onclick = function (e) { navigation.player.sendEvent('PREV'); navigation.listenPlay({state: true}); }
		
		var buttonNext = document.createElement('div');
		buttonNext.className = 'button next';
		buttonNext.onclick = function (e) { navigation.player.sendEvent('NEXT'); navigation.listenPlay({state: true}); }
		
		var buttonStop = document.createElement('div');
		buttonStop.className = 'button stop';
		buttonStop.onclick = function (e) { navigation.player.sendEvent('STOP'); navigation.listenPlay({state: false}); }
		
		var buttonClose = document.createElement('div');
		buttonClose.className = 'button close';
		buttonClose.onclick = function (e) { navigation.moveController(); }
		
		bar.appendChild(this.buttonPlay);
		bar.appendChild(buttonPrev);
		bar.appendChild(buttonNext);
		bar.appendChild(buttonStop);
		bar.appendChild(buttonClose);
		bar.appendChild(this.seek);
		
		this.controller.appendChild(this.artistlayer);
		this.controller.appendChild(this.titlelayer);
		this.controller.appendChild(bar);
		this.controller.appendChild(this.tracklist);
		this.controller.onmouseout = function (e) {
			navigation.controllerTimeout = window.setTimeout('if(navigation.isController) navigation.moveController();', navigation.controllerWaitForClose);
		}
		this.controller.onmouseover = function (e) {
			if (navigation.controllerTimeout)
				window.clearTimeout(navigation.controllerTimeout);
			navigation.controllerTimeout = null;
		}
		
		this.controllershadow = document.createElement('div');
		this.controllershadow.id = 'mp3shadow';
		this.controllershadow.style.left = getPosLeft(this.iframe) + 'px';
		this.controllershadow.style.top = getPosTop(this.iframe) + 'px';
		this.controllershadow.style.opacity = 0;
		this.controllershadow.style.display = 'none';
		
		
		this.controllerlink = document.createElement('a');
		this.controllerlink.id = 'mp3link';
		this.controllerlink.className = 'on';
		this.controllerlink.onclick = function (e) { navigation.moveController(); }
		
		document.body.appendChild(this.controller);
		document.body.appendChild(this.controllershadow);
		document.getElementById('holepage').insertBefore(this.controllerlink, document.getElementById('imprint'));
		
		this.controller.style.opacity = 0;
		this.controller.style.display = 'none';
		
		this.player.addControllerListener('ITEM', 'navigation.listenItem');
		this.player.addControllerListener('PLAY', 'navigation.listenPlay');
		this.player.addModelListener('TIME', 'navigation.listenTime');
		
		
		this.player.sendEvent('ITEM', 0);
	}
	
	this.moveController = function (obj) {
		if (this.locked)	
			return;
		this.locked = true;
		if (!this.isController) {
			this.controller.style.display = 'block';
			this.controller.style.left = (getPosLeft(this.iframe) + Math.round((this.iframe.offsetWidth - this.controller.offsetWidth) / 2)) + 'px';
			this.controller.style.top = (getPosTop(this.iframe) + Math.round((this.iframe.offsetHeight - this.controller.offsetHeight) / 2)) + 'px';
			new Motion(this.controller, 'opacity', '', false, 0, 1, 2 * this.controllerMoveTime, 0, 'linear');
		
			this.controllershadow.style.display = 'block';
			this.controllershadow.style.height = this.controller.offsetHeight + 'px';
			this.controllershadow.style.top = getPosTop(this.controller) + 'px';
			new Motion(this.controllershadow, 'width', 'px', true, this.controller.offsetWidth, this.iframe.offsetWidth, this.controllerMoveTime);
			new Motion(this.controllershadow, 'left', 'px', true, getPosLeft(this.controller), getPosLeft(this.iframe), this.controllerMoveTime);
			new Motion(this.controllershadow, 'height', 'px', true, this.controller.offsetHeight, this.iframe.offsetHeight, this.controllerMoveTime, this.controllerMoveTime);
			new Motion(this.controllershadow, 'top', 'px', true, getPosTop(this.controller), getPosTop(this.iframe), this.controllerMoveTime, this.controllerMoveTime);
			new Motion(this.controllershadow, 'opacity', '', false, 0, 0.8, 2 * this.controllerMoveTime, 0, 'linear');
			
			window.setTimeout('navigation.locked = false;', 2 * this.controllerMoveTime);
		} else {
			new Motion(this.controllershadow, 'width', 'px', true, this.iframe.offsetWidth, this.controller.offsetWidth, this.controllerMoveTime);
			new Motion(this.controllershadow, 'left', 'px', true, getPosLeft(this.iframe), getPosLeft(this.controller), this.controllerMoveTime);
			new Motion(this.controllershadow, 'height', 'px', true, this.iframe.offsetHeight, this.controller.offsetHeight, this.controllerMoveTime / 2, this.controllerMoveTime / 2);
			new Motion(this.controllershadow, 'top', 'px', true, getPosTop(this.iframe), getPosTop(this.controller), this.controllerMoveTime / 2, this.controllerMoveTime / 2);
			new Motion(this.controllershadow, 'opacity', '', false, 0.8, 0, this.controllerMoveTime, 0, 'linear');
			new Motion(this.controllershadow, 'display', null, false, 'block', 'none', this.controllerMoveTime);
		
			new Motion(this.controller, 'opacity', '', false, 1, 0, this.controllerMoveTime, 0, 'linear');
			new Motion(this.controller, 'display', null, false, 'block', 'none', this.controllerMoveTime);
			
			window.setTimeout('navigation.locked = false;', this.controllerMoveTime);
		}
		
		this.isController = !this.isController;
	}
	
	this.listenItem = function (obj) {
		this.currentItem = obj.index;
		this.artistlayer.innerHTML = this.playlist[obj.index].author.toUpperCase();
		this.titlelayer.innerHTML = this.playlist[obj.index].title;
		for (var i = 0; i <= this.tracklist.childNodes.length; i++)
			this.tracklist.childNodes[i].className = (i == obj.index) ? 'active' : '';
	}
	
	this.listenPlay = function (obj) {
		this.buttonPlay.className = (obj.state) ? 'button pause' : 'button play';
		this.controllerlink.className = (obj.state) ? 'on' : 'off';
	}
	
	
	this.lastMargin = 0;
	
	this.listenTime = function (obj) {
		var to = Math.round((obj.position / obj.duration) * this.seek.offsetWidth - (this.innerSeek.offsetWidth / 2));
	/*	if (Math.abs(parseInt(this.innerSeek.style.marginLeft) - to) > 3)
			new Motion(this.innerSeek, 'marginLeft', 'px', true, this.lastMargin, to, 200);
		else
			this.innerSeek.style.marginLeft = to + 'px';
			
		this.lastMargin = to; */
		
		this.innerSeek.style.marginLeft = to + 'px';
	}

	
}





Motionobjects = new Array();

function Motion(obj, property, unit, round, startValue, endValue, duration, startDelay, computation) {
	this.obj = obj;	
	this.property = property;
	this.startValue = startValue;
	this.endValue = endValue;
	this.duration = duration;
	this.unit = (typeof unit == 'string') ? unit : '';
	this.round = round;
	this.lastValue = this.startValue;
	this.timeouts = new Array();
	
	for (var i = 0; i < Motionobjects.length; i++) {
		if (Motionobjects[i] != null && Motionobjects[i].obj == this.obj && Motionobjects[i].property == this.property) {
			for (var j = 0; j < Motionobjects[i].timeouts.length; j++) {
				window.clearTimeout(Motionobjects[i].timeouts[j]);
			}
			this.startValue = Motionobjects[i].lastValue;
			Motionobjects[i] = null;
			break;
		}
	}
	
	
	this.startDelay = (typeof startDelay != 'undefined') ? startDelay : 0;

	this.id = Motionobjects.push(this) - 1;

	if (typeof startValue == 'string') {
		this.obj.style[this.property] = startValue;
		window.setTimeout('Motionobjects['+this.id+'].obj.style[\''+this.property+'\'] = \''+endValue+'\';', this.duration + this.startDelay);
		return;
	}	
	
	this.computation = (typeof computation != 'undefined') ? computation : 'cubic';
	
	switch (this.computation) {
		case 'cubic':
			this.a = -(2*(-this.startValue+this.endValue))/Math.pow(this.duration,3);
			this.b = (3*(-this.startValue+this.endValue))/Math.pow(this.duration,2);
			this.d = this.startValue;
			break;
		case 'linear':
			this.a = (this.endValue-this.startValue)/this.duration;
			this.b = this.startValue;
			break;
	}
	
	this.start();
}

Motion.prototype.value = function (t) {
	switch (this.computation) {
		case 'cubic':
			return (t < this.duration) ? this.a*Math.pow(t,3) + this.b*Math.pow(t,2) + this.d : this.endValue;
		case 'linear':
			return (t < this.duration) ? this.a*t + this.b : this.endValue;
	}
}

Motion.prototype.start = function (t) {
	for (var t = 0; t <= this.duration; t += 10) {
		var value = (this.round) ? Math.round(this.value(t)) : this.value(t);
		this.timeouts.push( window.setTimeout('Motionobjects['+this.id+'].set('+value+');', t + this.startDelay) );
	}
}

Motion.prototype.set = function (value) {
	this.lastValue = value;
	this.obj.style[this.property] = value+this.unit;
}