var Maker = {
	opened: [],
	start: function() {
		Event.observe(document, 'click', this.onDocClick.bindAsEventListener(this));
	},
	
	hideOpen: function(event) {
		if (!this.opened || !this.opened.length) return;
		var element = Event.element(event);
		
		$A(this.opened).each((function(item) {
			item.style.display = 'none';
		}).bind(this));
		
		this.opened = [];
	},
	
	onDocClick: function(event) {
		this.hideOpen(event);
	}
};

function addControl(name, items, defaultItem, width, callback, isDisabled) {
	if (!items) return;
	
	var div = document.createElement('DIV');
	
	if (isDisabled)
        div.className = 'selector-disabled';
	else
	    div.className = 'selector';
	
	div.style.width = width ? parseInt(width) + 'px' : 'auto';

	div.disabled = isDisabled;
	
	var pimp = document.createElement('DIV');
	pimp.className = 'pimp';
	pimp.onmouseover = function() {
	    if (this.parentNode.disabled)
	      return;
	      
		this.className = 'pimp-hover';
	};
	pimp.onmouseout = function() {
		this.className = 'pimp';
	};
	pimp.onmousedown = function(event) {
		event = event || window.event;
		Event.stop(event);
	};
	
	var span = document.createElement('SPAN');
	span.innerHTML = items[defaultItem || 0];
	div.appendChild(span);
	div.appendChild(pimp);
	
	div.valueSpan = span;
	div.id = name;
	
	var menu = document.createElement('DIV');
	menu.className = 'control-menu';
	menu.style.width = width ? (parseInt(width) + 29) + 'px' : 'auto';
	
	for(var i=0; i<items.length; i++) {
		var aLink = document.createElement('A');
		aLink.href="javascript:void(0)";
		aLink.innerHTML = items[i];
		aLink.callbackFunc = callback;
		menu.appendChild(aLink);

		aLink.onmousedown = function(event) {
			event = event || window.event;
			Event.stop(event);
		};
		aLink.onclick = function(event) {
			event = event || window.event;
			menu.style.display = 'none';
			span.innerHTML = this.innerHTML;
			
			if (this.callbackFunc && typeof(this.callbackFunc) == 'function')
			    this.callbackFunc(span.innerHTML);
			
			Event.stop(event);
			return false;
		};
	}
	/* end links appending */
	
	$('hidden_tools').appendChild(menu);
	
	// open menu
	pimp.onclick = function(event) {
		event = event || window.event;
		
		if (this.parentNode.disabled)
	      return;
		
		Maker.hideOpen(event);
		var offset = Position.cumulativeOffset(this.parentNode);
		
		Element.setStyle(menu, {
			display: 'block',
			left: offset[0] + 'px',
			top: offset[1] + this.parentNode.offsetHeight -1 + 'px'
		});
		
		Event.stop(event);
		Maker.opened.push(menu);
		
		return false;
	};
	
	return div;
}		

var FontPicker = Class.create();
FontPicker.prototype = {
	options: {},
	paths: [],
	
	initialize: function() {
		var options = Object.extend({
			name: 'Default',
			beforeScrollUp:	null,
			beforeScrollDown:null,
			afterScrollUp:	null,
			afterScrollDown:null,
			onScrollUpdate:	null,
			onFontChoose:	null,
			width:			270,
			height:			150,
			pimpWidth:		17,
			pimpHeight:		16,
			scrollerHeight:	30,
			top1:			0,
			top2:			46,
			borderColor:	'#CCCCCC',
			backgroundColor:'#FFFFFF',
			topPimpClass:	'font-picker-toppimp',
			bottomPimpClass:'font-picker-bottompimp',
			scrollerClass:	'font-picker-scroller',
			containerClass: 'font-picker-container'
		}, arguments[0] || {})
		
		this.options = options;
	},
	
	setPaths: function(paths) {
		this.paths = paths;
	},
	
	generate: function(landing) {
		if (!this.paths || !this.paths.length) return;
		
		this.fontList = document.createElement('DIV');
		this.fontList.onselectstart = this.bibb;
		this.fontList.style.overflow = 'hidden';
		this.fontList.style.position = 'relative';
		
		Element.setStyle(this.fontList, {
			marginRight: 	this.options.pimpWidth - 2 + 'px',
			backgroundColor:this.options.backgroundColor,
			borderRight:	'1px solid ' + this.options.borderColor
		});
		
		$A(this.paths).each((function(path){
			var fontImg = new Image();
			fontImg.alt = fontImg.title = path.name;
			fontImg.src = path.src;
			fontImg.fontid = path.id;

			var fontDiv = document.createElement('DIV');
			fontDiv.title = path.name;
			fontDiv.fontid = path.id;
			fontDiv.onclick = this.onFontChoose.bindAsEventListener(this);
			fontDiv.style.backgroundColor = '#FFFFFF';
			fontDiv.onmouseover = function() {
				this.style.backgroundColor = '#CCCCCC';
			};
			fontDiv.onmouseout = function() {
				this.style.backgroundColor = '#FFFFFF';
			};
			
			fontDiv.appendChild(fontImg);
			this.fontList.appendChild(fontDiv);
		}).bind(this));
		
		this.landing = document.createElement('DIV');
		var cont = document.createElement('DIV');
		cont.className = 'selector';
		cont.style.width = "200px";
		this.vspan = document.createElement('SPAN');
		this.vspan.innerHTML = this.paths[0].name;
		this.vspan.onselectstart = this.bibb;
		this.pspan = document.createElement('DIV');
		this.pspan.className = 'pimp';
		this.pspan.onselectstart = this.bibb;
		this.pspan.onmouseover = function() {this.className = 'pimp-hover';};
		this.pspan.onmouseout = function() {this.className = 'pimp';};
		this.pspan.onclick = this.toggle.bindAsEventListener(this);
		
		cont.appendChild(this.vspan);
		cont.appendChild(this.pspan);
		
		// scroller pimps
		this.toppimp = document.createElement('DIV');
		this.toppimp.className = this.options.topPimpClass;
		this.toppimp.onselectstart = this.bibb;
		this.bottompimp = document.createElement('DIV');
		this.bottompimp.className = this.options.bottomPimpClass;
		this.bottompimp.onselectstart = this.bibb;
		
		var callerObj = this;
		this.toppimp.onmouseover = function(event) { Element.setStyle(this, {backgroundPosition: '0px -' + callerObj.options.top1 + 'px'}); };
		this.toppimp.onmouseout = function(event) { Element.setStyle(this, {backgroundPosition: - (callerObj.options.pimpWidth) + 'px -' + callerObj.options.top1 + 'px'}); };
		this.bottompimp.onmouseover = function(event) { Element.setStyle(this, {backgroundPosition: '0px -' + callerObj.options.top2 + 'px'}); };
		this.bottompimp.onmouseout = function(event) { Element.setStyle(this, {backgroundPosition: - (callerObj.options.pimpWidth) + 'px -' + callerObj.options.top2 + 'px'}); };
		
		this.scroller = document.createElement('DIV');
		this.scroller.className = this.options.scrollerClass;
		this.scroller.onselectstart = this.bibb;
		this.scroller.style.position = 'absolute';
		this.scroller.style.top = this.options.pimpHeight-2 + 'px';

		this.scroller.onmouseover = function(event) { 
			Element.setStyle(this, {
				backgroundPosition: '0px -' + (callerObj.options.top1 + callerObj.options.pimpHeight) + 'px'
			}); 
		};
		this.scroller.onmouseout = function(event) { 
			Element.setStyle(this, {
				backgroundPosition: - (callerObj.options.pimpWidth) + 'px -' + (callerObj.options.top1 + callerObj.options.pimpHeight) + 'px'
			}); 
		};
		this.scroller.onmousedown = (function() {
			this.scrolling = true;
		}).bind(this);

		new Draggable(this.scroller, {
			constraint: 'vertical',
			snap: (function(x, y, draggable) {
				var ot1 = this.options.pimpHeight-2;
				if (y < ot1) y = ot1;
				
				var ot2 = this.options.height - this.options.pimpHeight - this.options.scrollerHeight + 2;
				if (y > ot2) y = ot2;
				
				this.onScrollUpdate(y - ot1);
				return [x,y];
			}).bind(this)
		});
		
		this.toppimp.onclick = this.shiftTop.bind(this);
		this.toppimp.onmousedown = this.startScrolling.bindAsEventListener(this, 'top');
		this.bottompimp.onclick = this.shiftDown.bind(this);
		this.bottompimp.onmousedown = this.startScrolling.bindAsEventListener(this, 'bottom');
		
		// font container
		this.fontContainter = document.createElement('DIV');
		this.fontContainter.className = this.options.containerClass;
		this.fontContainter.appendChild(this.toppimp);
		this.fontContainter.appendChild(this.bottompimp);
		this.fontContainter.appendChild(this.scroller);
		this.fontContainter.appendChild(this.fontList);
		this.fontContainter.onselectstart = this.bibb;
		
		Element.setStyle(this.fontContainter, {
			marginLeft: '1px',
			marginTop: '-1px',
			display: 'none'			
		});
		
		this.landing.appendChild(cont);
		this.landing.appendChild(this.fontContainter);
		
		var landing = $(landing);
		if (landing) landing.appendChild(this.landing);
		
		//
		Event.observe(document, 'mouseup', this.stopScrolling.bindAsEventListener(this))
	},
	
	startScrolling: function(event, dir) {
		if (dir == 'top')
			this.cron = window.setInterval(this.shiftTop.bind(this, 4), 25);
		else
			this.cron = window.setInterval(this.shiftDown.bind(this, 4), 25);
		
		Event.stop(event);
	},
	
	stopScrolling: function(event) {
		if (this.cron) {
			window.clearInterval(this.cron);
			this.cron = 0;
		} else if (!this.scrolling) {
			this.hide();
		}

		this.scrolling = false;
	},
	
	shiftTop: function(step) {
		var element = this.scroller;
		var y = (parseFloat(element.style.top) || 0) - (step || 4);
		var ot = this.options.pimpHeight-2;
		y = Math.max(y, ot);
		element.style.top = y + 'px';
		this.onScrollUpdate(y - ot);
	},
	
	shiftDown: function(step) {
		var element = this.scroller;
		var y = (parseFloat(element.style.top) || 0) + (step || 4);
		var ot = this.options.pimpHeight-2;
		var ot2 = this.options.height - this.options.pimpHeight - this.options.scrollerHeight + 2;
		y = Math.min(y, ot2);
		element.style.top = y + 'px';
		this.onScrollUpdate(y - ot);
	},
	
	onScrollUpdate: function(step) {
		var s = this.options.height - 2*this.options.pimpHeight + 4 - this.options.scrollerHeight;
		var x = ((this.fontList.offsetHeight - this.options.height) / s);
		if (x <= 0) return;
		this.fontList.style.top = - x * step + 'px';
	},
	
	setValue: function(value) {
		this.vspan.innerHTML = value;
	},
	
	onFontChoose: function(event) {
		var element = Event.element(event);
		this.setValue(element.title);
		this.hide();
		if (typeof this.options.onFontChoose == 'function')
			this.options.onFontChoose(element.title, element.fontid);
	},
	
	toggle: function(event) {
		var opened = this.pspan.opened;
		if (opened) {
			this.hide();
		} else {
			this.show();
		}
		
		Maker.hideOpen(event);
		Event.stop(event);
	},
	
	show: function() {
		if (this.pspan.opened) return;
		
		Element.show(this.fontContainter);
		this.pspan.opened = true;
	},
	
	hide: function() {
		if (!this.pspan.opened) return;
		
		Element.hide(this.fontContainter);
		this.pspan.opened = false;
	},
	
	bibb: function() {
		return false;
	}
};