/**
 * @author roman
 */
// check dependencies
if(typeof iConcerts == "undefined"){
	alert("ERROR: iConcerts.js must be loaded prior to this File");
}

iConcerts.UI = {
	idCounter: 0,
	scrollBars: new Array(),
	droppable: new Array(),
	getId: function(){
		return this.idCounter++;
	},
	
	updateScrollBars: function(){
		$A(this.scrollBars).each(function(sb){
			sb.update();
		});
	}
};
iConcerts.UI.ScreenFader = Class.create();
iConcerts.UI.ScreenFader.prototype = {
	initialize: function(element){
		this.element = $(element);
		this._animating = false;
		if(this.element == null){
			//TODO: Error handling
		}
		
		var offs = Position.cumulativeOffset(this.element);
		var wi = this.element.getWidth();
		var he = this.element.getHeight();
		
		oldplaceolder = $('flashPlayerEmpty');
		if (oldplaceolder) {
			oldplaceolder.remove();
		}
		var placeholder = document.createElement('div');
		placeholder.setAttribute('id','flashPlayerEmpty');
		
		this.element.up().insertBefore(placeholder,this.element);
		
		this.element.setStyle({
			position:'absolute',
			top:offs[1] + 'px',
			left:offs[0] + 'px',
			zIndex:'3'
		});
	},
	
	fadeIn: function(callback){
		if(!this._animating){
			this._animating = true;
			var node = $(document.createElement('div'));
			this.node = node;
			node.className = 'screenFade';
			var body =  $$('body')[0];
			body.appendChild(node);
			
			new Effect.Fade(node, {from:0, to:0.8, afterFinish:function(effect){
				this._animating = false;
				node.observe('click', this.fadeOut.bind(this));
				if(typeof callback == 'function'){
					this.callback = callback;
					callback(true);
				} else if(typeof this.callback == 'function'){
					this.callback(true);
				}
			}.bind(this)});
		}
	},
	
	fadeOut: function(callback){
		if(!this._animating){
			this._animating = true;
			var node = this.node;
			
			new Effect.Fade(node, {from:0.8, to:0, afterFinish:function(effect){
				this._animating = false;
				node.remove();
				if(typeof callback == 'function'){
					this.callback = callback;
					callback(false);
				} else if(typeof this.callback == 'function'){
					this.callback(false);
				}
			}.bind(this)});
		}
	}
}

iConcerts.UI.ScrollBar = Class.create();
iConcerts.UI.ScrollBar.prototype = {
	initialize: function(element, options){
		this.options = Object.extend({
			trackClass: 'scrollTrack',
			handleClass: 'scrollHandle',
			handleActive: 'scrollHandleActive',
			direction: 'vertical',
			position: 'inside',
			handleMinSize: 10,
			width:null,
			height:null,
			minSize: 20,
			preserveOuterDimensions: false
		}, options || {});
		
		this.element = $(element);
		
		this.scrollbar = $(document.createElement('div'));
		this.scrollbar.className = 'scrollTrack';
		this.scrollbar.setAttribute('id', 'scrollBar' + iConcerts.UI.getId());
		this.handle = $(document.createElement('div'));
		this.handle.className = 'scrollHandle';
		this.handle.setAttribute('id', 'scrollHandle' + iConcerts.UI.getId());
		this.inner = $(document.createElement('div'));
		
		this.inner.innerHTML = this.element.innerHTML;
		this.element.innerHTML = '';
		this.element.appendChild(this.inner);
		this.scrollbar.appendChild(this.handle);
		this.element.appendChild(this.scrollbar);
		this.inner.makePositioned();
		this.element.makePositioned();
		
		this.owi = this.element.getWidth();
		this.ohe = this.element.getHeight();
		this.iwi = this.inner.getWidth();
		this.ihe = this.inner.getHeight();
		this.scwi = this.scrollbar.getWidth();
		
//		alert("ohe=" + this.ohe + " ihe=" + this.ihe);
		
		if(this.options.width != null){
			this.element.setStyle({width: this.options.width + 'px'});
			this.owi = this.options.width;
		}
		if(this.options.height != null){
			this.element.setStyle({height: this.options.height + 'px'});
			this.ohe = this.options.height;
		}
		this.eventObj = this.doWheel.bindAsEventListener(this);
		this.drawScrollbar();
		iConcerts.UI.scrollBars.push(this);
		
	},
	
	drawScrollbar: function(){
		if(this.options.direction == 'vertical'){
			if(this.ihe > this.ohe || this.ohe < this.options.minSize){
				this.scrollbar.show();
				var hsize = Math.round(this.ohe / this.ihe * this.ohe);
				hsize = hsize < this.options.handleMinSize ? this.options.handleMinSize : hsize;
				
				this.scrollbar.setStyle({
					height: this.ohe + 'px',
					cssFloat: 'right'
				});
				
				if(this.options.position == 'inside'){
					this.inner.setStyle({ width: this.owi - this.scwi -10 + "px", cssFloat:'left' });
				} else {
					this.element.setStyle({ width: this.owi + this.scwi + "px" });
					this.inner.setStyle({ width: this.owi + "px", cssFloat:'left'});
				}
				this.handle.setStyle({ height: hsize + 'px '});
				var gap = this.ihe - this.ohe;
				this.scrolltick = 1 / (gap/4);
				
				var pos = 0;
				if(this.slider){
					pos = this.slider.value;
					this.slider.dispose();
				}
				this.slider = new Control.Slider
						(this.handle.id, this.scrollbar.id, {axis:'vertical', minimum:0,maximum:this.ohe});
						
				this.slider.options.onChange = function(val){
					var ptop = Math.round(gap * val);
					this.inner.setStyle({top: -ptop + 'px'});
					this.handle.className = this.options.handleClass;
				}.bind(this);
				
				this.slider.options.onSlide = function(val){
					var ptop = Math.round(gap * val);
					this.inner.setStyle({top: -ptop + 'px'});
					this.handle.className = this.options.handleActive;
				}.bind(this);
				this.slider.setValue(pos);
				Event.observe(this.element, 'mousewheel', this.eventObj);
				Event.observe(this.element, 'DOMMouseScroll', this.eventObj);
			} else {
				this.scrollbar.hide();
				
				if(this.slider){
					this.slider.setValue(0);
					Event.stopObserving(this.element, 'mousewheel',this.eventObj);
					Event.stopObserving(this.element, 'DOMMouseScroll',this.eventObj);
					this.slider.dispose();
					delete this.slider;
				}
			}
		} else {
			if(this.iwi > this.owi || this.owi < this.options.minSize){
				this.scrollbar.show();
				var hsize = Math.round(this.owi / this.iwi * this.owi);
				hsize = hsize < this.options.handleMinSize ? this.options.handleMinSize : hsize;
				this.scrollbar.setStyle({
					height: this.scwi + 'px',
					width: this.owi + 'px',
					left:'0px'
				});
				
				if(this.options.position == 'inside'){
					this.inner.setStyle({ height: this.ohe - this.scwi + "px" });
				} else {
					this.element.setStyle({ height: this.ohe + this.scwi + "px" });
					this.inner.setStyle({ height: this.ohe + "px", overflow:'hidden' });
				}
				this.handle.setStyle({ width: hsize + 'px ', height: this.scwi + 'px'});
				var gap = (this.iwi - this.owi);
				this.scrolltick = 1 / (gap/4);
				
				var pos = 0;
				if(this.slider){
					pos = this.slider.value;
					this.slider.dispose();
				}
				this.slider = new Control.Slider
						(this.handle.id, this.scrollbar.id, {axis:'horizontal', minimum:0,maximum:this.owi});
						
				this.slider.options.onChange = function(val){
					var pleft = Math.round(gap * val);
					this.inner.setStyle({left: -pleft + 'px'});
					this.handle.className = this.options.handleClass;
				}.bind(this);
				
				this.slider.options.onSlide = function(val){
					var pleft = Math.round(gap * val);
					this.inner.setStyle({left: -pleft + 'px'});
					this.handle.className = this.options.handleActive;
				}.bind(this);
				this.slider.setValue(pos);
				Event.observe(this.element, 'mousewheel', this.eventObj);
				Event.observe(this.element, 'DOMMouseScroll', this.eventObj);
			} else {
				this.scrollbar.hide();
				
				if(this.slider){
					this.slider.setValue(0);
					Event.stopObserving(this.element, 'mousewheel', this.eventObj);
					Event.stopObserving(this.element, 'DOMMouseScroll', this.eventObj);
					this.slider.dispose();
					delete this.slider;
				}
			}
		}
	},
	
	update: function(){
		var newiwi = this.inner.getWidth();
		var newihe = this.inner.getHeight();
		var newowi = this.element.getWidth();
		var newohe = this.element.getHeight();
		if(newiwi != this.iwi || newihe != this.ihe || newowi != this.owi || newohe != this.ohe){
			if(newowi < this.options.minSize || newohe < this.options.minSize)
				return;
			
			this.iwi = newiwi;
			this.ihe = newihe;
			if(!this.options.preserveOuterDimensions){
				this.ohe = newohe;
				this.owi = newowi;
			}
			this.drawScrollbar();
		}
	},	
	
	doWheel: function(event){
		Event.stop(event);
		var speed = Event.wheel(event);
		var pos = this.slider.value;
		this.slider.setValue( pos - speed * this.scrolltick);
	},
	
	getInner: function(){
		return this.inner;
	}
		
}


iConcerts.UI.ScrollButton = Class.create();
iConcerts.UI.ScrollButton.prototype = {
	initialize: function(element, initPos, options){
		this.options = Object.extend({
			leftId: '',
			rightId: '',
			titleTag: 'a',
			maxWidth: 520
		}, options || {});
		
		this.element = $(element);
		
		this.leftArrow = $(this.options.leftId);
		this.rightArrow = $(this.options.rightId);
		this.curPos = initPos
		this.tabPos = new Array();
		this.tabNav = new Array();
		this.scrollbar = $(document.createElement('div'));
		this.scrollbar.className = 'scrollTabbedNav';
		this.inner = $(document.createElement('div'));
		this.inner.className = 'scrollInnerTabbedNav';
		this.element.select(this.options.titleTag).each(function(elem, index){
			this.tabNav[index] = elem;
			if (index == 0) {
				this.tabPos[index] = 0;
				this.tabPos[index+1] = elem.getWidth();
			}
			else {
				this.tabPos[index+1] = this.tabPos[index] + elem.getWidth();
			}
			elem.remove();
//			this.inner.appendChild(elem.cloneNode(true));
			this.inner.appendChild(elem);
		}.bind(this));
		this.element.appendChild(this.scrollbar);
		this.scrollbar.appendChild(this.inner);
		this.update()
	},
	
	leftClick: function(){
		if (iConcerts.UI.scrolltab.curPos - 1 >= 0) {
			iConcerts.UI.scrolltab.curPos -= 1;
			iConcerts.UI.scrolltab.update();
		}
	},

	rightClick: function(){
		if (iConcerts.UI.scrolltab.curPos + 1 < iConcerts.UI.scrolltab.tabPos.length - 1) {
			iConcerts.UI.scrolltab.curPos += 1;
			iConcerts.UI.scrolltab.update();
		}
	},

	update: function(){
		firstPos = 0;
		while (!this.tabNav[firstPos].visible()) {
			firstPos += 1;
		}
		lastPos = this.tabNav.length - 1;
		while (!this.tabNav[lastPos].visible()) {
			lastPos -= 1;
		}
		if (lastPos <= 0) {
			lastPos = 1;
		}
		if (this.curPos <= firstPos) {
			this.curPos = firstPos;
			this.leftArrow.className = '';
			this.leftArrow.hide();
			Event.stopObserving(this.leftArrow, 'click', this.leftClick);
		}
		else {
			this.leftArrow.className = 'active';
			this.leftArrow.show();
			Event.observe(this.leftArrow, 'click', this.leftClick);
		}
		if (this.tabPos[lastPos]-this.tabPos[this.curPos] <= this.options.maxWidth) {
			this.rightArrow.className = '';
			this.rightArrow.hide();
			Event.stopObserving(this.rightArrow, 'click', this.rightClick);
		}
		else {
			this.rightArrow.className = 'active';
			this.rightArrow.show();
			Event.observe(this.rightArrow, 'click', this.rightClick);
		}
		var p = lastPos;
		var newWidth = this.tabPos[p]-this.tabPos[this.curPos];
		while (newWidth > this.options.maxWidth) {
			p--;
			var newWidth = this.tabPos[p]-this.tabPos[this.curPos];
		}
		this.scrollbar.setStyle({width: newWidth + 'px'});
		this.inner.setStyle({left: (this.tabPos[this.curPos]-this.tabPos[firstPos]) * -1 + 'px'});
	},
	
	showActive: function(){
		activePos = 0;
		while (!this.tabNav[activePos].hasClassName('active')) {
			activePos++;
		}
		var lastPos = this.tabPos.length-1;
		var newWidth = this.tabPos[lastPos]-this.tabPos[this.curPos];
		while (newWidth > this.options.maxWidth) {
			lastPos--;
			var newWidth = this.tabPos[lastPos]-this.tabPos[this.curPos];
		}
		if (activePos >= this.curPos && activePos <= lastPos) {
			return;
		}
		else if (activePos < this.curPos) {
			this.curPos = activePos;
			this.update();
			return
		}
		else {
			var newWidth = this.tabPos[activePos]-this.tabPos[this.curPos];
			while (newWidth > this.options.maxWidth) {
				this.curPos++;
				var newWidth = this.tabPos[activePos]-this.tabPos[this.curPos];
			}
			this.update();
			return
		}
	}
}