/**
 * @author Rob
 */

Element.implement({
	extra_dimensions: function(dir,padding,border,margin) {
	    if(typeof(dir)=='undefined') dir = 'x';
	    if(typeof(padding)=='undefined') padding = true;
	    if(typeof(border)=='undefined') border = true;
	    if(typeof(margin)=='undefined') margin = false;
	    var x = 0;
	    if(dir=='x') {
	            dir = ['left','right'];
	    } else {
	            dir = ['top','bottom'];
	    }
	    if(padding) {
	            x += this.getStyle('padding-' + dir[0]).toInt();
	            x += this.getStyle('padding-' + dir[1]).toInt();
	    }
	    if(border) {
	            x += this.getStyle('border-' + dir[0] + '-width').toInt();
	            x += this.getStyle('border-' + dir[1] + '-width').toInt();
	    }
	    if(margin) {
	            x += this.getStyle('margin-' + dir[0]).toInt();
	            x += this.getStyle('margin-' + dir[1]).toInt();
	    }
	    return x;
	},
	hasEvent: function(eventType,fn) {
		var myEvents = this.retrieve('events');
		return myEvents && myEvents[eventType] && (fn == undefined || myEvents[eventType].keys.contains(fn));
	}
});


var custom_select = {
	initialize: function(options) {
//		alert(options);
		this.options = $extend({
			stayInside: false
		}, options || {});
//		this.setOptions(options);
		this.elements = new Array();
		this.build_box();
		
		var _select_boxes = $$('select.selector');
		//console.log(_select_boxes);
		if(_select_boxes.length > 100 && document.location.href.toString().test(/admin/)) return false;
		_select_boxes.each( function(el) {
			if(el.get('multiple') == null || el.get('multiple') == '')
				this.initialize_element(el);
		}.bind(this));
		
		document.addEvent('mousedown', function(event) {
			var event = new Event(event);
			//var target = (!event.target.get ? $(event.target) : event.target);
			var target = $(event.target);
			if(target != this.box && target.getParent('div') != this.box) {
				if (typeof(this.box_open) == 'object') {
					if (target.getParent('div.select-container') != this.box_open.container) 
						this.close_select();
				}
			}
		}.bind(this));
	},
	initialize_element: function(el) {
		var select = {source: el};
		
		if(el.getParent('div.select-container') != null) {
			select.container = el.getParent('div.select-container');
			select.text = select.container.getElement('div.select-text');
			select.button = select.container.getElement('div.select-button');
		} else {
			select.container = new Element('div', {
				'id': 'select-' + (el.get('id') != null?el.get('id'):'num-' + this.elements.length),
				'class': 'select-container',
				styles: {
					width: select.source.getSize().x.toInt()
				}
			}).wraps(el);
			if(select.container.getSize().x.toInt() < 50) select.container.setStyle('width', 50);
			select.source.setStyle('width', 'auto');
			
			select.text = new Element('div', {
				'class': 'select-text'
			}).inject(select.source,'before');
	
			select.button = new Element('div', {
				'class': 'select-button'
			}).inject(select.source,'before');
		}
		
		this.set_dimensions(select);
		this.detect_state(select);
		
		select.text.addEvent('click', function(ev) {
			if (!select.state.disabled && !select.state.readonly) {
				if ((typeof(this.box_open) == 'object' && this.box_open != select || typeof(this.box_open) != 'object')) {
					if (typeof(this.box_open) == 'object' && this.box_open != select) 
						this.close_select();
					this.open_select(select);
				}
			}
		}.bind(this));
		
		select.button.addEvent('click', function(ev) {
			if (!select.state.disabled && !select.state.readonly) {
				if ((typeof(this.box_open) == 'object' && this.box_open != select || typeof(this.box_open) != 'object')) {
					if (typeof(this.box_open) == 'object' && this.box_open != select) 
						this.close_select();
					this.open_select(select);
				} else if (typeof(this.box_open) == 'object' && this.box_open == select) {
						this.close_select();
					}
			}
		}.bind(this));
		
		select.container.addEvents({
			mouseenter: function() {
				if (!select.state.disabled && !select.state.readonly) this.addClass('select-container-hover');
			},mouseleave: function() {
				this.removeClass('select-container-hover');
			}				
		});
		
//		select.source.addEvents({
//			focus: function(ev) {
//				//var ev = new Event(ev).stop();
//				//console.log(select.source);
//				//select.source.blur();
//				select.container.focus();
//			}.bind(this)
//		});
		select.source.hide();
		this.elements.push(select);
		this.set_select(select, select.source.selectedIndex);
		
		this.preload_images(select);
	},
	open_select: function(select) {
		//Scroll
		var window_height = window.getSize().y.toInt();
		this.box_open = select;
		// de box een breedte geven
		select.source.show();
		var select_source_size = select.source.getSize();
		var select_source_extra_dimensions = select.source.extra_dimensions();
		select.source.hide();
		
		var src_width = select_source_size.x.toInt() - select_source_extra_dimensions;
		if(src_width < select.container.getSize().x.toInt()) src_width = select.container.getSize().x.toInt() - this.box.extra_dimensions();
		this.box.setStyles({
			width: src_width,
			height:'auto'
		});
		
		// de box positioneren
		// de box tonen
		this.box.setStyles({
			display: 'block',
			visibility: 'visible'
		});	

		var cnt_coord = select.container.getCoordinates($(document.body));
		var box_top = cnt_coord.top + cnt_coord.height;
		var box_left = cnt_coord.left; 
		if(Browser.firefox && (window.getWidth().toInt()%2) != 0){
			box_left++;
		}
		
		var parent_div = select.container.getParent('div');
		if(parent_div.getScrollSize().y.toInt() > parent_div.getSize().y.toInt()) {
			box_top += parent_div.getScroll().y.toInt();
		}
		
		//stayInside
		if(this.options.stayInside != false && $(this.options.stayInside)) {
			var stayInside = $(this.options.stayInside).getCoordinates();
			var sin_left = stayInside.left;
			var sin_right = sin_left + stayInside.width;
			var box_right = box_left + select_source_size.x.toInt();
			if(box_left < sin_left) box_left = sin_left;
			if (box_right > sin_right)
				box_left = box_left - (this.box.getSize().x.toInt() - select.container.getSize().x.toInt());
		}
		this.box.setStyles({
			top: box_top,
			left: box_left 
		});
		
		// de options aanmaken
		this.box.empty();
		var list = new Element('ul');
		var _opt = 0;
		var _extra_width = 0;
		list.inject(this.box);
		select.source.getElements('*').each( function(el, i) {
			if(el.get('tag') == 'option') {
				
				var li = new Element('li', {
					'class': el.get('class')
				}).store('selectindex', _opt).inject(list);
				
				if(el.get('rel') != null && el.get('rel').test(/(gif|png|jpg)$/)) {
					var img = new Element('img',{src: el.get('rel')}).inject(li);
					li.addClass('image');
					li.setStyle('line-height', img.getSize().y.toInt());
					var _image_width = img.getSize().x.toInt() + img.extra_dimensions('x', true,true,true);
					if(_image_width > _extra_width) _extra_width = _image_width;
				}
				new Element('span',{html: el.get('html')}).inject(li);
				
				
				if(el.get('selected')) li.addClass('selected');
				if(el.getParent().get('tag') == 'optgroup') li.addClass('inside_group');
				
				
				li.addEvents({
					mouseenter: function(){
						li.addClass('hover');
						if (list.getElement('.selected')) {
							this.sel_temp = list.getElement('.selected');
							this.sel_temp.removeClass('selected');
						}
					}.pass(li, this),
					mouseleave: function(){
						li.removeClass('hover');
						if(typeof(this.sel_temp) != 'undefined') {
							this.sel_temp.addClass('selected');
							delete(this.sel_temp);
						}
					}.pass(li, this),
					click: function(ev){
						var _var = li.retrieve('selectindex');
						this.set_select(select, _var, ev);
						this.close_select();
					}.pass(li, this)
				});
				
				_opt++;
			} else if(el.get('tag') == 'optgroup') {
				var li = new Element('li', {
					html: el.get('label'),
					'class': 'optgroup'
				}).inject(list);
			}
		}.bind(this));
		
		if(_extra_width != 0) {
			this.box.setStyles({
				width: (src_width + _extra_width)
			});
		}
		
		// hoogte controleren
//		if (console) {
			var end_height = box_top + this.box.getSize().y.toInt();
			var body_height = document.getElement('body').getFirst('div').getSize().y.toInt();
			var check_height = (body_height > window_height?body_height:window_height);
			check_height = window_height;
			
			if(end_height > check_height) {
				var diff = end_height - check_height + 10;
				this.box.setStyle('height', (this.box.getSize().y.toInt() - this.box.extra_dimensions('y')) - diff);
				if(list.getElement('.selected'))
					this.box.scrollTo(0,list.getElement('.selected').getCoordinates(this.box).top);
			}
			if (list.getFirst('li') != null) {
				var min_height = list.getFirst('li').getSize().y.toInt() * (list.getElements('li').length > 3 ? 2 : list.getElements('li').length);
			} else {
				var min_height = select.source.getStyle('line-height').toInt();
			}
			var box_height = this.box.getSize().y.toInt();
			if(box_height < min_height) {
				this.box.setStyle('height', min_height);
			}
			
//		}
//		else {
//			var end_height = box_top + this.box.getSize().y.toInt();
//			if (end_height > window_height) {
//				var diff = end_height - window_height + 10;
//				this.box.setStyle('height', (this.box.getSize().y.toInt() - this.box.extra_dimensions('y')) - diff);
//				if (list.getElement('.selected')) 
//					this.box.scrollTo(0, list.getElement('.selected').getCoordinates(this.box).top);
//			}
//		}
		
		// class toevoegen aan container		
		select.container.addClass('select-container-open');
		
	
	},
	close_select: function() {
		if(this.box_open != false) this.box_open.container.removeClass('select-container-open');
		this.box_open = false;
		this.box.setStyles({
			display: 'none',
			visibility: 'hidden',
			top: 0,
			left: 0
		});
		this.box.empty();
	},
	set_select: function(select, i, ev) {
		if(typeof(_layout) != 'undefined') _layout.reposition_overtext();
		if(select.source.getElements('option').length>0) {
			if(typeof(ev) == 'undefined') ev = false;
			select.source.selectedIndex = i;
			select.text.set('text', select.source.getElements('option')[i].get('html'));
			if (ev != false) {
				select.source.fireEvent('change', ev);
				select.source.fireEvent('click', ev);
			}
		}
	},	
	build_box: function() {
		this.box_open = false;
		this.box = new Element('div', {
			'class': 'select-options',
			styles: {
				display: 'none',
				visibility: 'hidden',
				position: 'absolute',
				top: 0,
				left: 0
			}
		}).inject(document.body);
	},
	
	set_dimensions: function(select) {
		var container_width = select.container.getSize().x.toInt() - select.container.extra_dimensions();
		var button_width = select.button.getSize().x.toInt();
		var text_width = container_width - button_width - select.text.extra_dimensions();
		select.text.setStyle('width', text_width);
		select.container.setStyle('height', select.text.getSize().y.toInt());
	},
	register_change: function(element) {
		if(this.elements.length>0) {
			this.elements.each( function(select) {
				if(select.source == element) {
					//this.set_select(select, element.selectedIndex);
					this.detect_state(select);
				}
			}.bind(this));
		}
	},
	detect_state: function(select) {
		select.state = {
			disabled: select.source.get('disabled'),
			readonly: select.source.hasClass('readonly')
		}
		for(var a in select.state) {
			select.container.removeClass('select-container-' + a);
			if(select.state[a]) select.container.addClass('select-container-' + a); 
		}
	},
	preload_images: function(select) {
		var img = new Array();
		select.source.getElements('*').each( function(el, i) {
			if(el.get('tag') == 'option') {
				if(el.get('rel') != null && el.get('rel').test(/(gif|png|jpg)$/)) {
					//if(document.images) {
					//	img[i] = new Image();
					//	img[i].src = el.get('rel');
					//}
					img.push(el.get('rel'));
				}
			}
		});
		if(img.length>0) {
			new Asset.images(img);
		}
	}
};

window.addEvent('domready', custom_select.initialize.pass({stayInside: 'website'}, custom_select));