/**************************************************************************************
	Selector change
	=============
	by Pixelindustries (2009)
	
	for more information / license information, please contact me/us
**************************************************************************************/

var SelectorChange = new Class({

	Implements: Options,
		
	fakeSelects: [],
	
	selectSelector: '',
	
	options: {
		select_class : 'sc-select_container',
		option_container_class : 'sc-options_container',
		active_option_class : 'sc-active_option',
		option_class : 'sc-option',
		select_bottom_class: 'sc-select_bottom',
		select_bottom_right_class: 'sc-select_bottom_right',
		select_bottom_left_class: 'sc-select_bottom_left',
				
		active_select : 'sc-active',
		zIndex: 2000
	},
	
	initialize: function(selectSelector, options) {
		this.selectSelector = selectSelector;
		this.setOptions(options);
		this.redraw();
		
		window.addEvents({
			'resize': this.redraw.bind(this)
		});
	},	
	redraw: function() {
		
		var that = this;
		
		this.fakeSelects.each(function(elm, index) {
			elm.dispose();
		});
		this.fakeSelects = [];
		
		/* replacing selector whit div etc*/
		$$(this.selectSelector).each(function(select) {
		 	
		 	var positions = select.getCoordinates();
		 	
		 	var select_container = new Element('div', {'class':  that.options.select_class })
		 		.setStyles(positions)
		 		.setStyles({
			 		'overflow': 'hidden',
			 		'position': 'absolute',
			 		'z-index': that.options.zIndex
			 	})
		 		.inject(document.body, 'bottom');
		 		
			that.fakeSelects.push(select_container);
					
			/* make nice bottom*/	
			select_bottom = new Element('div', { 'class': that.options.select_bottom_class })
		 	.inject(select_container, 'bottom')
		 	.setStyles({
		 			'width': positions.width,
		 			'position': 'absolute',
		 			'z-index': 0
		  		});	

			new Element('div', { 'class': that.options.select_bottom_right_class }).inject(select_bottom);	
		 	new Element('div', { 'class': that.options.select_bottom_left_class  }).inject(select_bottom);
				
			/* Set active item */
			active_item = new Element('div', { 'class': that.options.active_option_class })
		 	.setStyles({
		 		'height': select_container.getStyle('height'),
		 		'position': 'relative',
		 		'z-index': 200
		 	})
		 	.inject(select_container, 'top')
	
			active_item.set('text', select.getFirst().get('html'));
			
			var options_container = new Element('div', {'class': that.options.option_container_class })
			.setStyles({
		 		'position': 'relative',
		 		'z-index': 200
		 	})
			.inject(select_container);
		 	
		 	select.getChildren().each(function(option) {
		 		
		 		if (option.getProperty('selected')) {
		 			active_item.set('text', option.get('html'));
		  		}
		 		
		 		select_item = new Element('div', { 'class': that.options.option_class })
					.inject(options_container)
					.set('rel', option.get('value'))
					.setStyle('cursor', 'pointer')
					.set('text', option.get('html'));
		 	});
		
		 	
		 			 	
		 	/* set actions*/
			select_container.addEvents({
				'click': function(event) {
					if (this.retrieve('selectOpenStatus')) {
						var active_value = event.target.get('rel');
						var active_text = event.target.get('text');
						
						var active = select_container.getElement('.'+that.options.active_option_class);
										
						active.set('text', active_text);
						
						select.setProperty('value', active_value);
										
						this.store('selectOpenStatus', false);
					} else {
						var active = select_container.getElement('.'+that.options.active_option_class);
						var options = select_container.getElement('.'+that.options.option_container_class);
													
						var active_h = active.getSize().y;
						var new_h    = options.getSize().y + +active_h;
					
						that.close();
						event.stop();
		
						active.addClass(that.options.active_select);
						this.setStyle('z-index', this.getStyle('z-index') + 1)
							.set('tween', { duration: 300 })
							.tween('height', [active_h , new_h])
							.store('selectOpenStatus', true);
					}
				}
			})
		 	
		});
		
		// hide original select boxes!
		$$(this.selectSelector).setStyle('visibility', 'hidden');
	
		document.addEvents({
			'click': function() {
				this.close();
			}.bind(this)
		});
		
	},
	
	close: function() {
		var that = this;
		this.fakeSelects.each(function(select_container) {
			var active = select_container.getElement('.'+that.options.active_option_class);
			
			active.removeClass(that.options.active_select);
					
			select_container
				.set('tween', {
					duration: 150,
					onComplete: function() {
						select_container.setStyles({ 'z-index': that.options.zIndex });
					}
				})
				.tween('height', active.getStyle('height'))
				.store('selectOpenStatus', false);
			
		});
	}
	
});