var Interface = { }
Interface.Dropdown = Class.create({
	initialize: function(element, options) {
		this.element = $(element);
		this.opened = false;
		this.opener = this.element.getElementsByTagName('li')[0];
		this.items = this.opener.getElementsByTagName('ul')[0];
		
		this.options = options || { };
		this.options.paramName = this.options.paramName || this.element.name;
		this.options.height = this.options.height || 'auto';

		// hide selector-items
		Element.hide(this.items);
		this.items.style.position = 'absolute';
		this.items.style.height = this.options.height;
		this.items.style.overflow = 'auto';
		
		// add observers
		Event.observe(this.opener, 'click', this.onClickOpener.bindAsEventListener(this));
    	Event.observe(this.element, 'keydown', this.onKeyPress.bindAsEventListener(this));

		var opener_link = this.opener.getElementsByTagName('a');
		if(opener_link){
			Event.observe(opener_link[0], 'blur', this.onBlur.bindAsEventListener(this));
		}
	},
	
	show: function() {
		Effect.Appear(this.items,{duration:0.15});
	},
	
	hide: function() {
		Effect.Fade(this.items,{duration:0.15});
	},
		
	onKeyPress: function(event) {
		if(this.opened){
			switch(event.keyCode) {
				case Event.KEY_ESC:
         			this.opened = false;
					this.hide();
					return;
			}
		}
	
	},
	
	onBlur: function(event) {
		this.opened = false;
		setTimeout(this.hide.bind(this), 250);
	},
	
	onClickOpener: function(event) {
		if(this.opened){
			this.opened = false;
			this.hide();
		}else{
			this.opened = true;
			this.show();
		}
	}
});

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;
		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));
		}
	},
		
	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;
	}
});