/**
 * MaxServ Stylable FormElement
 *
 *
 * @category   	JavaScript/Ext
 * @package    	MaxJSComponents
 * @copyright  	Copyright (c) 2009 MaxServ B.V. Netherlands (http://www.maxserv.com)
 * @license    	Commercial
 * @author	   	Arno Schoon (arno@maxserv.nl)
 * @description	This script replaces a form-element to simple HTML that can be styled using CSS
 * @version		1.0
 * @requires	ExtJs 3.x library
 */

//reference local blank image
Ext.BLANK_IMAGE_URL = '../../ext/resources/images/default/s.gif';

//create namespace
Ext.namespace('maxServ');
/*
maxServ.formElement = function(el){
	this.element;
	this.input;
	this.replaceInput(el);
};
*/
maxServ.formElementSelectBox = Ext.extend(maxServ.formElement, {
	constructor: function(el){
		this.input = Ext.get(el); // just to make sure we have an element here
		
		var config = {};
		
		if(this.input.is('select')){
			this.element = this.replaceSelectbox();
		}
		
		this.addEvents({
			'click': true
		});
		
		this.listeners = config.listeners;
		
		maxServ.formElement.superclass.constructor.call(config);
		
		this.input.setVisibilityMode(Ext.Element.DISPLAY);
		
		this.input.hide();
	},
	
	replaceSelectbox: function(){
		var options = this.getSelectboxOptions();
		
		var elm = this.input.parent().createChild({tag: 'div', cls: 'select'});
		elm.addClass(this.input.id);
		
		var text = elm.createChild({tag: 'span', cls: 'selecttext', html: options.selectedText});
		
		// create a scrollable element
		var container = elm.createChild({tag: 'div', cls: 'options-container'}).hide();
			var content = container.createChild({tag: 'div', cls: 'scrollbar-content'});
			var track = container.createChild({tag: 'div', cls: 'scrollbar-track'});
				var handle = track.createChild({tag: 'div', cls: 'scrollbar-handle'});
		
		// render a list of options
		var ul = content.createChild({tag: 'ul', cls: 'optionsul'});
		
		options.list.each(function(o, n, i){
			var li = ul.createChild({tag: 'li', cls: 'optionitem'});
			var an = li.createChild({
				tag: 'a', 
				html: o.label, 
				rel: o.rel, 
				href: '#',
				cls: 'option'
			});
			
			if(o.selectedIndex == i){
				an.addClass('selected');
			}
						
			an.on('click', this.clickOption, this, {preventDefault: true});
		}, this);
		
		var arrow = elm.createChild({tag: 'a', href: '#', cls: 'arrow', html: 'show options'});
		arrow.on('click', this.toggle, this, {preventDefault: true});
		text.on('click', this.toggle, this, {preventDefault: true});
				
		this.input.insertBefore(elm);
		this.type = 'select';
		
		return elm;
	},
	
	getSelectboxOptions: function(){
		var a = [];
		var st;
		var si;
		
		Ext.select('option' , true, this.input.id).each(function(e, o, i){
			a.push({
				value: e.getValue(),
				label: e.dom.innerHTML,
				rel: Ext.id(e)
			});
			
			if(e.dom.selected){
				st = e.dom.innerHTML;
				si = i;
			}
			
		});
		
		var o = {
				list: a,
				selectedText: st,
				selectedIndex: si
		};
		
		return o;
	},
	
	clickOption: function(e,t){
		var elm = Ext.get(t);
		
		if(elm.is('a.option')){
			this.select(elm.dom.rel);
		} else if(elm.is('option')){
			this.select(eml.dom.id);
		}
	},
	
	select: function(id){
		var newtext;
		
		Ext.select('a.option', true, this.element.dom.id).each(function(e){
			e.removeClass('selected');
			
			if(e.dom.rel == id){
				e.addClass('selected');
				newtext = e.dom.innerHTML;
			}
		});
		
		Ext.select('.selecttext', true, this.element.dom.id).first().update(newtext);
		
		Ext.fly(id).dom.selected = true;
		
		Ext.select('.options-container', true, this.element.dom.id).hide();
		
		
	},
	
	toggle: function(e,t){
		var elm = Ext.fly(t).parent().down('.options-container');
		if(elm.isVisible()){
			elm.hide();
		} else {
			var content = elm.down('div.scrollbar-content');
			var track = elm.down('div.scrollbar-track');
			
			var scrollbar = new Control.ScrollBar($(content.dom.id), $(track.dom.id));
			
			elm.show();
		}
	}
});