var Interface = { }
Interface.Pano = Class.create({
	initialize: function(element, wrapper, cursor, options) {
		this.element = typeof element == 'object' ? element : $(element);
		this.wrapper = typeof wrapper == 'object' ? wrapper : $(wrapper);
		this.cursor = typeof wrapper == 'object' ? cursor : $(cursor);
		this.position = this.element.cumulativeOffset();
		this.totalWidth = this.wrapper.getWidth();
		this.visibleWidth = this.element.getWidth();
		this.quarters = this.visibleWidth/4;
		this.interval = null;
		this.mouseX = 0;
		
		this.options = options || { };
		this.options.velocity = this.options.velocity || 10;
		
		Event.observe(this.element, 'mouseover', this.start.bindAsEventListener(this));
		Event.observe(this.element, 'mousemove', this.start.bindAsEventListener(this));
		Event.observe(this.element, 'mouseout', this.stop.bindAsEventListener(this));
	},
	
	start: function(event) {
		if(this.totalWidth>this.visibleWidth){
			this.mouseX = Event.pointerX(event);
			
			this.cursor.show();
			this.cursor.style.left = (this.mouseX-20)+'px';
			this.cursor.style.top = (Event.pointerY(event)-50)+'px';
		
			if(this.interval==null) this.interval = setInterval(this.update.bind(this), 50);
		}else{
			this.wrapper.style.cursor = this.element.style.cursor = 'default';
		}
	},
	
	stop: function(event) {
		this.cursor.hide();
		clearInterval(this.interval);
		this.interval = null;
	},
	
	update: function() {
		if(this.mouseX<this.position.left+this.quarters){
			this.element.scrollLeft = this.element.scrollLeft-this.options.velocity;
		}
		
		if(this.mouseX>this.position.left+3*this.quarters){
			this.element.scrollLeft = this.element.scrollLeft+this.options.velocity;
		}
	}
});

Interface.Dropdown = Class.create({
	initialize: function(element, options) {
		this.element = typeof element == 'object' ? element : $(element);
		this.opened = false;
		this.opener = null;
		this.item_container = null;
		this.opener_buffer = '';
		this.items = new Array();

		this.options = options || { };
		this.options.height = this.options.height || 'auto';
		this.options.keepparent = this.options.keepparent || false;
		this.options.fixwidth = this.options.fixwidth || 0;
				
		var li = this.element.getElementsByTagName('li');

		for(var i=0;i<li.length;i++){
			this.opener = li[i].getElementsByTagName('a')[0];
			
			if(li[i].getElementsByTagName('ul')[0]){
				this.item_container = li[i].getElementsByTagName('ul')[0];
				
				if(!this.options.fixwidth){
					this.item_container.style.width = Element.getWidth(this.opener.parentNode)+'px';
				}
				break;
			}
		}
		
		if(this.item_container){
			// hide selector-items
			Element.hide(this.item_container);
			this.item_container.style.position = 'absolute';
			this.item_container.style.height = this.options.height;
			this.item_container.style.overflowY = 'auto';
			this.item_container.style.overflowX = 'hidden';
			this.items = this.item_container.getElementsByTagName('a');
			
			// add observers
			Event.observe(document.body, 'click', this.onBodyClicked.bindAsEventListener(this));
	    	Event.observe(this.element, 'keydown', this.onKeyPress.bindAsEventListener(this));
	    	
	    	for(var i=0;i<this.items.length;i++){
	    		Event.observe(this.items[i], 'click', this.onItemClick.bindAsEventListener(this,this.items[i]));
	    	}
	    }

	   	Event.observe(this.opener, 'click', this.onClickOpener.bindAsEventListener(this,this.opener));
	},
	
	show: function() {
		Effect.Appear(this.item_container,{duration:0.15});
		
		if(!this.options.keepparent){
			this.opener_buffer = this.opener.innerHTML;
			this.opener.innerHTML = '&nbsp;';
		}
	},
	
	hide: function() {
		Effect.Fade(this.item_container,{duration:0.15});
		
		if(!this.options.keepparent){
			this.opener.innerHTML = this.opener_buffer;
		}
	},
		
	onKeyPress: function(event) {
		if(this.opened){
			switch(event.keyCode) {
				case Event.KEY_ESC:
         			this.opened = false;
					this.hide();
					return;
			}
		}
	},
	
	onBodyClicked: function(event) {
		if(this.opened){
			this.opened = false;
			this.hide();
		}
	},
		
	onClickOpener: function(event) {
		if(this.opened){
			this.opened = false;
			this.hide();
		}else{
			if(this.item_container){
				this.opened = true;
				this.show();
			}
		}

		var data = $A(arguments);
		data[1].blur();

		Event.stop(event);
	},
	
	onItemClick: function(event) {
		var data = $A(arguments);
		this.opener_buffer = data[1].innerHTML;
	}
});

Interface.BeautySelect = Class.create({
	initialize: function(select, options) {
		this.select = $(select);
		this.items = new Array();
		this.hidden = '';
		this.newselect = null;
		this.dropdown = null;
		
		// optionen uebertragen
		for(var i=0;i<this.select.options.length;i++){
			this.items.push(this.select.options[i]);
		}
		
		// hidden feld rein
		this.select.insert({ before: '<input type="hidden" id="'+this.select.id+'" name="'+this.select.name+'" value="'+this.items[this.select.selectedIndex].value+'" class="nodisplay" />' });
		this.hidden = this.select.id;
		
		// html fuer dropdown
		var ul = '<ul class="dropdown" id="bsu-'+this.select.id+'"><li><a href="#">'+this.items[this.select.selectedIndex].text+'</a><ul>';
		for(i=0;i<this.items.length;i++){
			ul += '<li id="bs-'+this.items[i].value+'"><a href="#" onclick="$(\''+this.hidden+'\').value = this.parentNode.id.substr(3); return false;">'+this.items[i].text+'</a></li>';
		}
		ul += '</ul></li>';
		
		this.select.insert({ before: ul });
		this.newselect = $('bsu-'+this.select.id);
		this.select.parentNode.removeChild(this.select);
		
		// dropdown anlegen
		this.dropdown = new Interface.Dropdown(this.newselect);
	}
})

Interface.Voting = Class.create({
	initialize: function(answercontainer, voteleft, voteright, dragger, options) {
		this.answercontainer = $(answercontainer);
		this.voteLeftButton = $(voteleft);
		this.voteRightButton = $(voteright);
		this.dragger = $(dragger);
		this.value = new Array(50,50);
		this.votingImages = this.answercontainer.getElementsByTagName('img');
		this.votingValues = this.answercontainer.getElementsByTagName('input');
		this.fullWidth = Element.getWidth(this.votingImages[0])*2;
		this.dragging = false;
		this.offset = 0;
		this.interval = null;
		
		this.options = options || { };
		this.options.increment = this.options.increment || 5;
		this.options.padding = this.options.padding || 0;

		// max hoehe container setzen, um spruenge zu vermeiden
		this.left_height = Element.getHeight(this.votingImages[0]);
		this.right_height = Element.getHeight(this.votingImages[1]);
			
		if(this.left_height>this.right_height){
			this.answercontainer.style.height = (this.left_height*2+10)+'px';
		}else{
			this.answercontainer.style.height = (this.right_height*2+10)+'px';
		}
		
		// draggable breite berechnen und dragger initialisieren
		Element.extend(this.dragger);
		this.dragger.style.width = (this.dragger.getWidth()+this.options.padding*2)+'px';

		this.dragger.absolutize();
		this.leftBound = this.dragger.positionedOffset().left-this.options.padding;
		this.rightBound = this.voteRightButton.positionedOffset().left-this.dragger.getWidth()+this.options.padding;
		
		this.setVotingFromValues();
		
		Event.observe(this.voteLeftButton, 'mousedown', this.onStartVote.bindAsEventListener(this,0));
		Event.observe(this.voteLeftButton, 'mouseup', this.onStopVote.bindAsEventListener(this));
		Event.observe(this.voteRightButton, 'mousedown', this.onStartVote.bindAsEventListener(this,1));
		Event.observe(this.voteRightButton, 'mouseup', this.onStopVote.bindAsEventListener(this));
		Event.observe(this.dragger, 'mousedown', this.onStartDrag.bindAsEventListener(this));
		Event.observe(document, 'mouseup', this.onStopDrag.bindAsEventListener(this));
		Event.observe(document, 'mousemove', this.onDrag.bindAsEventListener(this));
	},
	
	vote: function(voting) {
		if(this.value[voting]+this.options.increment<=100){
			this.value[voting] += this.options.increment;
			this.value[Math.abs(voting-1)] -= this.options.increment;
		
			this.setVotingFromValues();
		}else{
			this.value[voting] = 100;
			this.value[Math.abs(voting-1)] = 0;
		
			this.setVotingFromValues();
			
			this.onStopVote();
		}
	},
	
	onStartVote: function(event) {
		var data = $A(arguments);
		
		this.interval = setInterval(this.vote.bind(this,data[1]), 50);
		
		Event.stop(event);
	},
		
	onStopVote: function() {
		clearInterval(this.interval);
	},
	
	onStartDrag: function(event) {
		this.dragging = true;
		this.offset = Event.pointerX(event)-Position.positionedOffset(this.dragger).left;
	},
	
	onStopDrag: function(event) {
		this.dragging = false;
	},
	
	onDrag: function(event) {
		if(this.dragging){
			this.dragger.style.left = this.getHandleX(Event.pointerX(event)-this.offset)+'px';
		}
	},
	
	getHandleX: function(x) {
		if(x<this.leftBound) x = this.leftBound;
		if(x>this.rightBound) x = this.rightBound;

		this.value[1] = Math.round((x-this.leftBound)/((this.rightBound-this.leftBound)/100));
		this.value[0] = 100-this.value[1];
		
		this.setVotingFromValues();
		
		return x;
	},
	
	setVotingFromValues: function() {
		this.voteLeftButton.innerHTML = this.value[0]+'%';
		this.voteRightButton.innerHTML = this.value[1]+'%';
		
		var image_width_left = (this.value[0]/100)*this.fullWidth;
		var image_width_right = (this.value[1]/100)*this.fullWidth;
		var image_height_left = (this.value[0]/100)*this.left_height*2;
		var image_height_right = (this.value[1]/100)*this.right_height*2;
		
		this.votingImages[0].style.width = (image_width_left>0 ? image_width_left : 1)+'px';
		this.votingImages[1].style.width = (image_width_right>0 ? image_width_right : 1)+'px';
		this.votingImages[0].style.height = image_height_left+'px';
		this.votingImages[1].style.height = image_height_right+'px';
		
		this.votingValues[0].value = this.value[0];
		this.votingValues[1].value = this.value[1];
		
		this.dragger.style.left = (((this.rightBound-this.leftBound)/100)*this.value[1]+this.leftBound)+'px';
	}
});

Interface.DatePicker = Class.create({
	initialize: function(element, options) {
		this.element = $(element);
		this.opened = false;
		this.calendar = null;
		this.body = null;
		this.weekDays = new Array('Mo','Di','Mi','Do','Fr','Sa','So');
		this.months = new Array('Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember');
		this.daysInMonth = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
		this.today = new Date();
		this.month = this.today.getMonth();
		this.year = this.today.getFullYear();
		this.date = new Date(this.year,this.month,1); // monta +1
		this.selectedDate = '';
		this.visible = false;
		
		Element.extend(this.element);
		
		this.options = options || { };
		this.options.minDate = this.options.minDate || '';
		this.options.allowinput = this.options.allowinput || false;
		this.options.maxDate = this.options.maxDate || '';
		this.options.highlight = this.options.highlight || '';
		this.options.url = this.options.url || '';
		this.options.width = this.options.width || 200;
		
		this.element.setAttribute('autocomplete','off');
		
		document.write('<table id="'+this.element.id+'_cal" class="datepicker" style="width: '+this.options.width+'px;"><tbody></tbody></table>');
		this.calendar = $(this.element.id+'_cal');
		this.body = this.calendar.getElementsByTagName('tbody')[0];

		this.calendar.style.display = 'none';

		this.createCalendar();

		// add observers
		Event.observe(this.element, 'focus', this.onClick.bindAsEventListener(this));
		Event.observe(this.element, 'blur', this.onBlur.bindAsEventListener(this));
		Event.observe(this.element, 'keydown', this.onKeyDown.bindAsEventListener(this));
	},
	
	show: function() {
		Effect.Appear(this.calendar,{duration:0.15});
		this.visible = true;
	},
	
	hide: function() {
		Effect.Fade(this.parent.calendar,{duration:0.15});
		this.visible = false;
		if(this.stop) this.stop();
	},
	
	next: function() {
		if(this.month<11){
			this.month++;
		}else{
			this.month = 1;
			this.year++;
		}
		
		this.renderNew();
	},
	
	prev: function() {
		if(this.month>0){
			this.month--;
		}else{
			this.month = 11;
			this.year--;
		}
		
		this.renderNew();
	},
	
	renderNew: function() {
		if(this.hider) this.hider.stop();
		this.element.focus();
		
		this.date = new Date(this.year,this.month,1);
		
		var tr = this.body.getElementsByTagName('tr');

		var num = tr.length;
		for(var i=0;i<num;i++){
			this.body.removeChild(tr[0]);
		}
		
		this.createCalendar();
	},
	
	toggle: function() {
		if(this.visible){
			this.parent = this;
			this.hide();
		}else{
			this.calendar.style.top = (this.element.positionedOffset().top+this.element.getHeight())+'px';
			this.calendar.style.left = (this.element.positionedOffset().left-Element.getWidth(this.calendar)+this.element.getWidth())+'px';
			this.show();
		}
	},
	
	onClick: function(event) {
		this.calendar.style.top = (this.element.positionedOffset().top+this.element.getHeight())+'px';
		this.calendar.style.left = (this.element.positionedOffset().left-Element.getWidth(this.calendar)+this.element.getWidth())+'px';
		this.element.value = '';
		this.show();
	},
	
	onBlur: function(event) {
		this.hider = new PeriodicalExecuter(this.hide, .5);
		this.hider.parent = this;
	},
	
	onKeyDown: function(event) {
		if(!this.options.allowinput){
			event.stop();
		}else{
			if((event.keyCode<48 || event.keyCode>57) && event.keyCode!=190 && event.keyCode!=13 && event.keyCode!=37 && event.keyCode!=39 && event.keyCode!=8 && event.keyCode!=46){
				event.stop();
			}
		}
	},
	
	onDateSelect: function(event) {
		var data = $A(arguments);
		data.shift();
		this.selectedDate = data;
		
		if(this.element.nodeName=='INPUT'){
			this.element.value = this.selectedDate;
		}else{
			this.element.innerHTML = this.selectedDate;
		}
		Effect.Fade(this.calendar,{duration:0.15});
		this.visible = false;
		
		if(this.options.url!=''){
			var tmp = String(this.selectedDate).split(".");
			
			if(this.options.url.substr(0,10)=='javascript'){
				eval(this.options.url.substr(11));
			}else{
				document.location.href = this.options.url.replace(/%date%/g,tmp[2]+'-'+tmp[1]+'-'+tmp[0]);
			}
		}
	},
	
	onHover: function(element) {
		var data = $A(arguments);
		data.shift();
		this.calendar.getElementsByTagName('tr')[data[0]].getElementsByTagName('td')[data[1]].addClassName('over');
	},
	
	onOut: function(element) {
		var data = $A(arguments);
		data.shift();
		this.calendar.getElementsByTagName('tr')[data[0]].getElementsByTagName('td')[data[1]].removeClassName('over');
	},
	
	createCalendar: function() {
		var offset = this.date.getDay()==0 ? 6 : this.date.getDay()-1;
		var day = 1;
		var i = 0;
		var finished = false;
		var days_in_month = this.getDaysInMonth();
		var date_compare = this.year+'-'+(this.month+1<10 ? '0'+(this.month+1) : this.month+1);
		
		while(!finished){
			var tr = document.createElement('tr');
			if(day<=days_in_month) this.body.appendChild(tr);
				
			if(i==0){
				var td = document.createElement('th');
				td.setAttribute('colSpan',"7");
				this.calendar.getElementsByTagName('tr')[i].appendChild(td);
				var head = this.calendar.getElementsByTagName('tr')[i].getElementsByTagName('th')[0];

				var prevlink = document.createElement('span');
				prevlink.setAttribute((document.all ? 'className' : 'class'),'prev'+(date_compare<=this.options.minDate ? '-disabled' : ''));
				var nextlink = document.createElement('span');
				nextlink.setAttribute((document.all ? 'className' : 'class'),'next'+(date_compare>=this.options.maxDate && this.options.maxDate!='' ? '-disabled' : ''));
				var display = document.createElement('span');
				display.setAttribute((document.all ? 'className' : 'class'),'month');

				head.appendChild(prevlink);
				head.appendChild(display);
				head.appendChild(nextlink);
				
				if(date_compare>this.options.minDate) Event.observe(head.getElementsByTagName('span')[0], 'click', this.prev.bindAsEventListener(this));
				var content = document.createTextNode(this.months[this.date.getMonth()]+' '+this.year);
				head.getElementsByTagName('span')[1].appendChild(content);
				if(date_compare<this.options.maxDate || this.options.maxDate=='') Event.observe(head.getElementsByTagName('span')[2], 'click', this.next.bindAsEventListener(this));
			}else if(i==1){
				for(var j=0;j<7;j++){
					var td = document.createElement('td');
					td.className = 'weekdays';
					this.calendar.getElementsByTagName('tr')[i].appendChild(td);
					
					var content = document.createTextNode(this.weekDays[j]);
					this.calendar.getElementsByTagName('tr')[i].getElementsByTagName('td')[j].appendChild(content);
				}
			}else{
				for(var j=0;j<7;j++){
					if(offset>0){
						var td = document.createElement('td');
						this.calendar.getElementsByTagName('tr')[i].appendChild(td);
						var content = document.createTextNode(' ');
						offset--;
					}else if(day>days_in_month){
						if(this.calendar.getElementsByTagName('tr')[i]){
							var td = document.createElement('td');
							this.calendar.getElementsByTagName('tr')[i].appendChild(td);
							var content = document.createTextNode(' ');
						}

						finished = true;
					}else{
						var td = document.createElement('td');
						var my_date = new Date(this.year,this.month,day);
						var date_str = (my_date.getDate()<10 ? '0'+my_date.getDate() : my_date.getDate())+'.'+(my_date.getMonth()+1<10 ? '0'+(my_date.getMonth()+1) : my_date.getMonth()+1)+'.'+my_date.getFullYear();
						td.setAttribute('title',date_str);
						td.setAttribute('style','cursor: pointer;');
						
						var myql_date = this.date.getFullYear()+'-'+(this.date.getMonth()<11 ? '0'+(this.date.getMonth()+1) : this.date.getMonth()+1)+'-'+(day<10 ? '0'+day : day);
						if(myql_date==this.options.highlight) td.setAttribute('class','active');
						
						this.calendar.getElementsByTagName('tr')[i].appendChild(td);
						var content = document.createTextNode(day);
						Event.observe(this.calendar.getElementsByTagName('tr')[i].getElementsByTagName('td')[j],'click', this.onDateSelect.bindAsEventListener(this,date_str));
						Event.observe(this.calendar.getElementsByTagName('tr')[i].getElementsByTagName('td')[j],'mouseover', this.onHover.bindAsEventListener(this,i,j));
						Event.observe(this.calendar.getElementsByTagName('tr')[i].getElementsByTagName('td')[j],'mouseout', this.onOut.bindAsEventListener(this,i,j));
						day++;
					}
					
					if(this.calendar.getElementsByTagName('tr')[i]){
						this.calendar.getElementsByTagName('tr')[i].getElementsByTagName('td')[j].appendChild(content);
					}
				}
				
			}
			
			i++;
		}
	},
	
	getDaysInMonth: function() {
		if(this.month==1){
			// check leap year
			var dt = new Date(this.year+"/02/29");
			return ("1"==dt.getMonth() ? 29 : 28);
		}else{
			return this.daysInMonth[this.month];
		}
	}
});

Interface.Accordion = Class.create({
	initialize: function(container, options) {
		this.container = $(container);

		this.options = options || { };
		this.options.itemName = this.options.itemName || 'accslot';
		this.options.hover = this.options.hover || false;
		this.options.active = this.options.active || 0;
		this.options.duration = this.options.duration || 0.2;
		this.options.closedHeight = this.options.closedHeight || 18;
		
		this.items = this.container.getElementsByClassName(this.options.itemName);

		// hide inactive boxes
		for(var i=0;i<this.items.length;i++){
			Element.extend(this.items[i]);
			if(i!=this.options.active){
				this.items[i].makeClipping().setStyle({ height: this.options.closedHeight + 'px' });
			}
			
			Event.observe(this.items[i], this.options.hover ? 'mouseover' : 'click', this.onClick.bindAsEventListener(this,i));
		}
	},
	
	hide: function(Item) {
		Effect.AccordionClose(this.items[Item],{ duration: this.options.duration, closedHeight: this.options.closedHeight });
	},
	
	show: function(Item) {
		Effect.AccordionOpen(this.items[Item],{ duration: this.options.duration, closedHeight: this.options.closedHeight, afterFinish: this.unfixHeight, cnt: this.container });
	},
	
	unfixHeight: function(e) {
		e.options.cnt.undoClipping();
	},
	
	onClick: function(event) {
		var data = $A(arguments);

		if(this.options.active!=data[1]){
			this.hide(this.options.active);
			this.options.active = data[1];
			this.show(this.options.active);
			this.container.makeClipping().setStyle({height: this.container.getHeight()+'px'});
			
			var links = this.items[data[1]].getElementsByTagName('a');
			for(var i=0;i<links.length;i++){
				links[i].blur();
			}
			
			Event.stop(event);
		}
	}
});

Interface.Tabbox = Class.create({
	initialize: function(tab, box, options) {
		this.tab = $(tab);
		this.box = $(box);
		//this.active = 0;
		
		this.options = options || { };
		this.options.paramName = this.options.paramName || this.tab.name;
		this.options.slotName = this.options.slotName || 'tabslot';
		this.options.hover = this.options.hover || false;
		this.active = this.options.active || 0;
		
		this.tabitems = this.tab.getElementsByTagName('li');
		this.boxitems = this.box.getElementsByClassName(this.options.slotName);

		// hide inactive boxes
		for(var i=0;i<this.boxitems.length;i++){
			if(i!=this.active){
				this.tabitems[i].className = '';
				this.boxitems[i].style.display = 'none';
			}else{
				this.tabitems[i].className = 'active';
				this.boxitems[i].style.display = 'block';
			}
			
			Event.observe(this.tabitems[i], this.options.hover ? 'mouseover' : 'click', this.onClick.bindAsEventListener(this,i));
		}
	},
	
	hide: function(Box) {
		//Effect.BlindUp(this.boxitems[Box],{duration:0.5 });
		this.boxitems[Box].style.display = 'none';
	},
	
	show: function(Box) {
		//Effect.BlindDown(this.boxitems[Box],{duration:0.5 });
		this.boxitems[Box].style.display = 'block';
	},
	
	onClick: function(event) {
		this.tabitems[this.active].className = '';
		this.hide(this.active);
		
		var data = $A(arguments);
		this.active = data[1];
		var link = this.tabitems[this.active].getElementsByTagName('a')[0];
		link.blur();
		
		this.tabitems[this.active].className = 'active';
		this.show(this.active);
		
		event.stop();
	}
});

Interface.Shiftticker = Class.create({
	initialize: function(element, options) {
		this.element = $(element);
		this.items = this.element.getElementsByTagName('li');
		this.activeItem = 0;
		this.loopCount = 0;
		this.interval = null;
		
		this.options = options || { };
		this.options.paramName = this.options.paramName || this.element.name;
		this.options.stay = this.options.stay || 5;

		// hide selector-items
		for(var i=1;i<this.items.length;i++){
			Element.hide(this.items[i]);
		}
		
		this.interval = setInterval(this.hide.bind(this), this.options.stay*1000);
		
		// add observers
		Event.observe(this.element, 'mouseover', this.onMouseOver.bindAsEventListener(this));
		Event.observe(this.element, 'mouseout', this.onMouseOut.bindAsEventListener(this));
	},
	
	hide: function() {
		Effect.BlindUp(this.items[this.activeItem],{duration:0.5 });
		clearInterval(this.interval);
		this.interval = setInterval(this.show.bind(this), 500);
	},
	
	show: function() {
		this.activeItem++;
		
		if(this.activeItem==this.items.length){
			this.activeItem = 0;
			this.loopCount++;
		}
		
		Effect.BlindDown(this.items[this.activeItem],{duration:0.5});
		clearInterval(this.interval);
		this.interval = setInterval(this.hide.bind(this), this.options.stay*1000);
	},
	
	onMouseOver: function(event) {
		clearInterval(this.interval);
	},
	
	onMouseOut: function(event) {
		this.interval = setInterval(this.hide.bind(this), this.options.stay*1000);
	}
});

Interface.Slidebox = Class.create({
	initialize: function(container, element, itemClass, scroll, options) {
		this.container = $(container);
		this.element = $(element);
		this.itemClass = itemClass;
		this.scroller = $(scroll);
				
		this.items = this.element.getElementsByClassName(this.itemClass);
		this.itemCount = this.items.length;
		
		this.innerWidth = this.items[0].getWidth()*this.itemCount+20;
		this.outerWidth = this.container.getWidth();
		this.leftBound = 0;

		this.dragging = false;
		this.interval = null;
		this.offset = 0;
		this.value = 0;
		
		this.options = options || { };
		this.options.paramName = this.options.paramName || this.element.name;
		this.options.left = this.options.left || 'leftarrow';
		this.options.right = this.options.right || 'rightarrow';
		this.options.track = this.options.track || 'track';
		this.options.handle = this.options.handle || 'handle';
		this.options.speed = this.options.speed || 5;
		
		// create html
		if(this.innerWidth>this.outerWidth){
			this.container.style.overflow = 'hidden';
			
			var elem = document.createElement('a');
			elem.setAttribute('id',this.options.left);
			this.scroller.appendChild(elem);
			this.left = $(this.options.left);
			
			var elem = document.createElement('div');
			elem.setAttribute('id',this.options.track);
			this.scroller.appendChild(elem);
			this.track = $(this.options.track);
			
			var elem = document.createElement('div');
			elem.setAttribute('id',this.options.handle);
			this.track.appendChild(elem);
			this.handle = $(this.options.handle);
			this.handle.style.position = 'absolute';
			this.handle.style.cursor = 'move';
			this.handle.style.width = (Math.round(this.track.getWidth()/(this.innerWidth/this.outerWidth)))+'px';
			this.leftBound = Position.cumulativeOffset(this.track)[0];
			this.rightBound = this.track.getWidth()+this.leftBound-this.handle.getWidth();
			
			var elem = document.createElement('a');
			elem.setAttribute('id',this.options.right);
			this.scroller.appendChild(elem);
			this.right = $(this.options.right);
			
			Event.observe(this.left, 'mousedown', this.onScrollLeft.bindAsEventListener(this));
			Event.observe(this.left, 'mouseup', this.onStopScroll.bindAsEventListener(this));
			Event.observe(this.right, 'mousedown', this.onScrollRight.bindAsEventListener(this));
			Event.observe(this.right, 'mouseup', this.onStopScroll.bindAsEventListener(this));
			Event.observe(this.handle, 'mousedown', this.onStartDrag.bindAsEventListener(this));
			Event.observe(document, 'mouseup', this.onStopDrag.bindAsEventListener(this));
			Event.observe(document, 'mousemove', this.onDrag.bindAsEventListener(this));
		}else{
			this.container.style.overflow = 'hidden';
		}
	},
		
	scroll: function(dir) {
		this.handle.style.left = this.getHandleX(Position.cumulativeOffset(this.handle)[0]+dir*this.options.speed)+'px';
		this.update();
	},
	
	onScrollLeft: function(event) {
		this.interval = setInterval(this.scroll.bind(this,-1), 50);
	},
	
	onScrollRight: function(event) {
		this.interval = setInterval(this.scroll.bind(this,1), 50);
	},
	
	onStopScroll: function(event) {
		clearInterval(this.interval);
	},
	
	onStartDrag: function(event) {
		this.dragging = true;
		this.offset = Event.pointerX(event)-Position.cumulativeOffset(this.handle)[0];
	},
	
	onStopDrag: function(event) {
		this.dragging = false;
	},
	
	onDrag: function(event) {
		if(this.dragging){
			this.handle.style.left = this.getHandleX(Event.pointerX(event)-this.offset)+'px';
			this.update();
		}
	},
	
	update: function() {
		//this.element.style.left = this.handleX+'px';
		//$('logo').innerHTML = this.value;
		this.element.style.left = (-1*this.value*((this.innerWidth-this.outerWidth)/100))+'px';
	},
	
	getHandleX: function(x) {
		if(x<this.leftBound) x = this.leftBound;
		if(x>this.rightBound) x = this.rightBound;

		this.value = (x-this.leftBound)/((this.rightBound-this.leftBound)/100);
		return x;
	},
		
	easing: function(time,begin,change,duration) {
		return change*time/duration + begin;
	}
});

Interface.Dock = Class.create({
	initialize: function(element, hoverelement, options) {
		this.element = $(element);
		this.hover_element = $(hoverelement);
		this.items = this.element.getElementsByTagName('img') || null;
		this.items_width = new Array();
		this.items_height = new Array();
		
		this.options = options || { };
		this.options.boundary = this.options.boundary || 300;
		this.options.maxzoom = this.options.maxzoom-1 || 0.1;
		
		for(var i=0;i<this.items.length;i++){
			Element.extend(this.items[i]);

			this.items[i].relativize();
			this.items_width[i] = this.items[i].width;
			this.items_height[i] = this.items[i].height;

			var tooltip = this.items[i].parentNode.getElementsByTagName('span')[0];
			tooltip.style.display = 'none';
			Event.observe(this.items[i].parentNode, 'mouseover', this.onItemIn.bindAsEventListener(this,tooltip,this.items[i]));
			Event.observe(this.items[i].parentNode, 'mousemove', this.onItemMoveIn.bindAsEventListener(this,tooltip,this.items[i]));
			Event.observe(this.items[i].parentNode, 'mouseout', this.onItemOut.bindAsEventListener(this,tooltip,this.items[i]));
		}
		
		Event.observe(this.hover_element, 'mousemove', this.onIn.bindAsEventListener(this));
		Event.observe(this.hover_element, 'mouseout', this.onOut.bindAsEventListener(this));
	},
	
	onIn: function(event) {
		var distance = 0;
		var magnify = 0;
		
		for(var i=0;i<this.items.length;i++){
			distance = Math.abs(this.items[i].cumulativeOffset().left+this.items[i].getWidth()/2 - Event.pointerX(event));
		
			if(distance>this.options.boundary){
				this.items[i].style.width = this.items_width[i]+'px';
				this.items[i].style.height = this.items_height[i]+'px';
			}else{
				magnify = (this.options.boundary-distance)/this.options.boundary*this.options.maxzoom+1;
				this.items[i].style.width = (magnify*this.items_width[i])+'px';
				this.items[i].style.height = (magnify*this.items_height[i])+'px';
			}
		}
	},
	
	onOut: function(event) {
		if(!Position.within(this.hover_element,Event.pointerX(event),Event.pointerY(event))){
			for(var i=0;i<this.items.length;i++){
				this.items[i].style.width = this.items_width[i]+'px';
				this.items[i].style.height = this.items_height[i]+'px';
			}
		}
	},
	
	onItemIn: function(event) {
		var data = $A(arguments);

		data[1].style.display = 'block';
		Effect.Fade(data[1], { from: 1.0, to: 0.8, duration: 1});
	},
	
	onItemMoveIn: function(event) {
		var data = $A(arguments);
		var offset = Number(this.element.style.left.replace(/px/,''))<0 ? Number(this.element.style.left.replace(/px/,'')) : 0;
		data[1].style.left = (Event.pointerX(event)+10+offset*-1)+'px';
	},
	
	onItemOut: function(event) {
		var data = $A(arguments);
		data[1].style.display = 'none';
	}
});

Interface.Exploreritem = Class.create({
	initialize: function(element, options) {
		this.element = $(element);
		this.opened = false;
		this.child = this.element.getElementsByTagName('ul')[0] || null;
		
		this.options = options || { };
		this.options.paramName = this.options.paramName || this.element.name;
		this.options.openClass = this.options.openClass || 'opened';
		this.options.closeClass = this.options.closeClass || 'closed';
		
		if(this.child) this.hideChild();
		this.element.className = this.options.closeClass;
		
		Event.observe(this.element, 'click', this.onClick.bindAsEventListener(this));
	},
	
	hideChild: function() {
		this.child.style.display = 'none';
	},
	
	open: function() {
		if(this.child){
			new Effect.BlindDown(this.child, { duration: 0.25 });
			setTimeout(this.onOpen.bind(this), 250);
		}
	},
	
	close: function() {
		if(this.child){
			new Effect.BlindUp(this.child, { duration: 0.25 });
			setTimeout(this.onClose.bind(this), 250);
		}
	},
	
	onClick: function(event) {
		if(!this.opened){
			this.open();
		}else{
			this.close();
		}
		
		//event.stop();
	},
	
	onOpen: function() {
		this.opened = true;
		this.element.className = this.options.openClass;
	},
	
	onClose: function() {
		this.opened = false;
		this.element.className = this.options.closeClass;
	}
});

Interface.Explorer = Class.create({
	initialize: function(element, options) {
		this.element = $(element);
		this.items = new Array();
		
		this.options = options || { };
		this.options.openClass = this.options.openClass || 'opened';
		this.options.closeClass = this.options.closeClass || 'closed';
		
		var li = this.element.getElementsByTagName('li');
		for(var i=0;i<li.length;i++){
			var item = new Interface.Exploreritem(li[i], { openClass: this.options.openClass, closeClass: this.options.closeClass });
			this.items.push(item);
		}
	}
});

Interface.Lightbox = Class.create({
	initialize: function(container,options) {
		this.visible = false;
		this.container = $(container);
		
		this.options = options || { };
		this.options.heightOffset = this.options.heightOffset || 0;
		this.options.hideFlash = this.options.hideFlash || false;
		this.options.src = this.options.src || '';
		this.options.caption = this.options.caption || '';
		this.options.overlay = this.options.overlay || 'overlay';
		this.options.lightbox = this.options.lightbox || 'lightbox';

		// code fuer lightbox aufbauen
		var elem = document.createElement('div');
		elem.setAttribute('id',this.options.overlay);
		this.container.appendChild(elem);
		this.overlay = $(this.options.overlay);
		this.overlay.hide();
		Event.observe(this.overlay, 'click', this.hide.bindAsEventListener(this));
		
		var elem = document.createElement('div');
		elem.setAttribute('id',this.options.lightbox);
		this.container.appendChild(elem);
		this.lightbox = $(this.options.lightbox);
		this.lightbox.hide();

		if(this.options.src==''){
		// images
			var elem = document.createElement('div');
			elem.setAttribute('id',this.options.lightbox+'c');
			this.lightbox.appendChild(elem);
			this.lightboxc = $(this.options.lightbox+'c');
			this.lightboxc.hide();
		
			var elem = document.createElement('a');
			elem.setAttribute('id','lightboxclose');
			this.lightboxc.appendChild(elem);
			this.lightboxclose = $('lightboxclose');
			var content = document.createTextNode('schließen');
			this.lightboxclose.appendChild(content);
			Event.observe(this.lightboxclose, 'click', this.hide.bindAsEventListener(this));
			
			var elem = document.createElement('img');
			elem.setAttribute('id','lightboximg');
			this.lightboxc.appendChild(elem);
			this.lightboximg = $('lightboximg');
			
			//if(this.options.caption!=''){
				var elem = document.createElement('p');
				elem.setAttribute('id','lightboxcaption');
				this.lightboxc.appendChild(elem);
				this.caption = $('lightboxcaption');
				this.caption.innerHTML = this.options.caption;
			//}
		}else{
		// other
			this.lightboxc = $(this.options.src);
			this.lightbox.appendChild(this.lightboxc);
			this.lightboxc.hide();
		}
	},
		
	show: function(Img,E) {
		Event.stop(E);

		if(this.options.hideFlash){
			$$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'hidden' });
		}
				
		var screen_size = Element.getDimensions($$('body')[0]);
		var screen_sizex = Element.getDimensions($$('html')[0]);

		var iebody = (document.compatMode && document.compatMode != "BackCompat")? document.documentElement : document.body;
		var dsocleft = document.all? iebody.scrollLeft : pageXOffset;
		var dsoctop = document.all? iebody.scrollTop : pageYOffset;
		
		this.overlay.setStyle({ width: (screen_size.width+dsocleft) + 'px', height: (screen_size.height+50) + 'px' });
        new Effect.Appear(this.overlay, { duration: 0.5, from: 0.0, to: 0.8 });

		if(this.options.src==''){
		// images
	        this.img = Img.href;

    	    var preloader = new Image();
                
			preloader.onload = (function(){
				this.lightboximg.src = this.img;
				this.lightbox.show();
				//this.lightboxc.setStyle({ width: preloader.width+'px', height: (preloader.height+this.options.heightOffset)+'px'});
				this.lightboxc.setStyle({ width: preloader.width+'px' });
				var lightbox_y = document.viewport.getScrollOffsets().top+document.viewport.getHeight()/2-this.lightboxc.getHeight()/2;
				this.lightbox.setStyle({ top: lightbox_y+'px', left: '0px' });
				new Effect.BlindDown(this.lightboxc, { duration: 0.5 });
			}).bind(this);
			
			Element.hide(preloader);
			preloader.src = this.img;
		}else{
		// other
			this.lightbox.show();
			var lightbox_y = document.viewport.getScrollOffsets().top+document.viewport.getHeight()/2-this.lightboxc.getHeight()/2;
			this.lightbox.setStyle({ top: lightbox_y+'px', left: '0px' });
			new Effect.BlindDown(this.lightboxc, { duration: 0.5 });
		}
		
        this.visible = true;
	},
	
	hide: function() {
		new Effect.Fade(this.overlay, { duration: 0.5, from: 0.9, to: 0 });
        new Effect.BlindUp(this.lightboxc, { duration: 0.5, afterFinish: this.hideLoader });
        
        if(this.options.hideFlash){
        	$$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'visible' });
        }
        
        this.visible = false;
	},
	
	hideLoader: function(El) {
		Element.hide(El.element.parentNode);
	}
});

Interface.Glider = Class.create({
	initialize: function(element,prev,next,options) {
		this.element = $(element);
		this.items = new Array();
		this.prev_button = $(prev);
		this.next_button = $(next);
		this.index = 0;
		this.distance = 0;
		
		this.options = options || { };
		this.options.itemclass = this.options.itemclass || 'item';
		this.options.tagname = this.options.tagname || 'div';
		this.options.slotclass = this.options.slotclass || 'slot';
		this.options.initpage = this.options.initpage || 0;
		
		var tmp = this.element.select('.'+this.options.itemclass);

		this.element.style.overflow = 'hidden';
		
		var total_width = 0;
		for(var i=0;i<tmp.length;i++){
			var slotcount = tmp[i].select('.'+this.options.slotclass).length;
			
			if(slotcount>0){	
				this.items.push(tmp[i]);
				total_width += Element.getWidth(tmp[i]);
			}
		}

		this.prev_button.hide();
		this.prev_button.style.height = this.element.getHeight()+'px';
		this.next_button.style.height = this.element.getHeight()+'px';

		if(total_width<Element.getWidth(this.element)+10){
			this.next_button.hide();
		}
		
		if(this.options.initpage>0) this.jump(this.options.initpage);
		
		Event.observe(this.prev_button, 'click', this.prev.bindAsEventListener(this));
		Event.observe(this.next_button, 'click', this.next.bindAsEventListener(this));
	},
	
	move: function(nextIndex) {
		this.index = nextIndex;
		
		Position.prepare();
		container_offset = Position.cumulativeOffset(this.element),
		element_offset = Position.cumulativeOffset(this.items[this.index]);

		this.scrolling = new Effect.SmoothScroll(this.element, { duration: 0.5, x:element_offset[0]-container_offset[0], y:element_offset[1]-container_offset[1] });
		
		if(this.index>0){
			this.prev_button.show();
		}else{
			this.prev_button.hide();
		}
		
		if(this.index<this.items.length-1){
			this.next_button.show();
		}else{
			this.next_button.hide();
		}
	},
	
	jump: function(nextIndex) {
		this.index = nextIndex;
		
		Position.prepare();
		container_offset = Position.cumulativeOffset(this.element),
		element_offset = Position.cumulativeOffset(this.items[this.index]);

		this.element.scrollLeft = element_offset[0]-container_offset[0];
		this.element.scrollTop = element_offset[1]-container_offset[1];
		
		if(this.index>0){
			this.prev_button.show();
		}else{
			this.prev_button.hide();
		}
		
		if(this.index<this.items.length-1){
			this.next_button.show();
		}else{
			this.next_button.hide();
		}
	},
	
	prev: function() {
		this.move(this.index-1);
		this.prev_button.blur();
	},
	
	next: function() {
		this.move(this.index+1);
		this.next_button.blur();
	},
	
	first: function() {
		this.move(0);
	},
	
	last: function() {
		this.move(this.items.length-1);
	}
	
});

Effect.SmoothScroll = Class.create();
Object.extend(Object.extend(Effect.SmoothScroll.prototype, Effect.Base.prototype), {
	initialize: function(element) {
		this.element = $(element);
		var options = Object.extend({x:0,y:0,mode: 'absolute'}, arguments[1] || {});
		this.start(options);
	},
	
	setup: function() {
		if (this.options.continuous && !this.element._ext ) {
			this.element.cleanWhitespace();
			this.element._ext=true;
			this.element.appendChild(this.element.firstChild);
		}
	
		this.originalLeft=this.element.scrollLeft;
		this.originalTop=this.element.scrollTop;
	
		if(this.options.mode == 'absolute') {
			this.options.x -= this.originalLeft;
			this.options.y -= this.originalTop;
		} 		
	},
	
	update: function(position) {
		this.element.scrollLeft = this.options.x * position + this.originalLeft;
		this.element.scrollTop  = this.options.y * position + this.originalTop;
	}
});

Effect.AccordionOpen = function(element) {
	element = $(element);
	
	element.makeClipping().setStyle({height: 'auto'}); 
    element.undoClipping();
	var element_dimensions = element.getDimensions();
	element.makeClipping().setStyle({height: arguments[1].closedHeight+'px'}); 
	
	return new Effect.Scale(element, 100, Object.extend({ 
		scaleContent: false, 
		scaleX: false,
		scaleFrom: arguments[1].closedHeight/(element_dimensions.height/100),
		scaleMode: { originalHeight: element_dimensions.height, originalWidth: element_dimensions.width },
		restoreAfterFinish: false,
		afterSetup: function(effect) { 
			effect.element.makeClipping().setStyle({height: effect.options.closedHeight+'px'}).show(); 
		},  
    	afterFinishInternal: function(effect) { 
    		effect.element.makeClipping().setStyle({height: 'auto'}); 
    		effect.element.undoClipping();
    		effect.element.addClassName('active'); 
    	}
	}, arguments[1] || { }));
};

Effect.AccordionClose = function(element) {
	element = $(element);
	
	var element_dimensions = element.getDimensions();
	
	return new Effect.Scale(element, arguments[1].closedHeight/(element_dimensions.height/100), Object.extend({ 
		scaleContent: false, 
		scaleX: false,
		scaleMode: { originalHeight: element_dimensions.height, originalWidth: element_dimensions.width },
		restoreAfterFinish: false,
		afterSetup: function(effect) { 
			Element.extend(effect.element);
			effect.element.makeClipping().setStyle({ height: 'auto' }).show(); 
		},  
    	afterFinishInternal: function(effect) { 
    		effect.element.makeClipping().setStyle({height: effect.options.closedHeight+'px'}); 
    		effect.element.removeClassName('active'); 
    	}
	}, arguments[1] || { }));
};