var DomAttributes = Class.create({

	_select: ['disabled', 'multiple', 'name', 'size', 'id', 'class', 'title', 'style', 'dir', 'lang', 'xml:lang', 'accesskey', 'tabindex', 'onfocus', 'onblur', 'onchange'],
	_optgroup: ['label', 'disabled', 'id', 'class', 'title', 'style', 'dir', 'lang', 'xml:lang', 'tabindex', 'onclick', 'ondblclick', 'onmousedown', 'onmouseup', 'onmouseover', 'onmousemove', 'onmouseout', 'onkeypress', 'onkeydown', 'onkeyup'],
	_option: ['label', 'disabled', 'selected', 'value', 'id', 'class', 'title', 'style', 'dir', 'lang', 'xml:lang', 'tabindex', 'onclick', 'ondblclick', 'onmousedown', 'onmouseup', 'onmouseover', 'onmousemove', 'onmouseout', 'onkeypress', 'onkeydown', 'onkeyup'],

	getAttributes: function(element) {
		var attributes = eval('this._' + element.tagName.toLowerCase());
		var result = [];
		attributes.each(function(attributeName) {
			var attributeValue = Element.readAttribute(element, attributeName);
			if (attributeValue) {
				result.push({'name': attributeName, 'value': attributeValue});
			}
		});
		return result;
	}
});


Element.fireNativeEvent = function(element, event) {

	element = $(element);

	if (document.createEventObject) {

		// Создаем объект событие (для IE не обязательно, но полезно знать, чтоб
		// передавать "синтетические" свойства события обработчику(ам)):
		var e = document.createEventObject();

		// Запускаем событие на элементе:
		element.fireEvent('on' + event, e);

	} else if (document.createEvent) {

		// Создаем объект событие:
		var e = document.createEvent("HTMLEvents");

		// Инициализируем:
		e.initEvent(event, false, false);

		// Запускаем на элементе:
		element.dispatchEvent(e);

	} else {

		return false;

	}
}


var SuperStyler_Select = Class.create({

	element: null,
	container: null,
	wrapper: null,
	select: null,
	options: [],

	initialize: function(htmlElement) {
//return;
		this.element = $(htmlElement);
		this.element.removeClassName('superStyler');
		this.options = [];
		this.container = new Element('div', {className: 'superStyler-select'});
		this.container.addClassName(this.element.readAttribute('class'));

		this.select = new Element('div', {className: 'superStyler-select-selectedItem'});
		this.select.button = new Element('div', {className: 'superStyler-select-selectedItem-button'});
		this.select.option = new Element('div', {className: 'superStyler-select-selectedItem-option'});
		this.wrapper = new Element('div', {className: 'superStyler-select-wrapper', style: 'display: none'});

		this.select.appendChild(this.select.button);
		this.select.appendChild(this.select.option);
		this.container.appendChild(this.select);
		this.container.appendChild(this.wrapper);


		if (this.element.disabled) {
			this.select.addClassName('superStyler-select-selectedItem-disabled');
		}

		this.updateWrapper();

		this.element.insert({after: this.container});
		this.select.appendChild(this.element);


		this.element.add = this.optionAdd.bind(this);
		this.element.remove = this.optionRemove.bind(this);
		this.element.addClassName('superStyler-hidden');

		this.updateDimensions();
		this.updateCurrentSelection();

		for (var i = 0; i < this.element.options.length; i++) {
			if (!this.options[i].hasClassName('superStyler-select-option-disabled')) {
				this.updateOptionEvents(this.options[i]);
			}
		}



		Event.observe(document, 'click', this.documentClickHandler.bindAsEventListener(this));

		Event.observe(this.element, 'keypress', this.keypressHandler.bindAsEventListener(this));
		Event.observe(this.element, 'keyup', this.keyupHandler.bindAsEventListener(this));
		Event.observe(this.element, 'change', this.changeHandler.bindAsEventListener(this));
		Event.observe(this.element, 'focus', this.focusHandler.bindAsEventListener(this));
		Event.observe(this.element, 'blur', this.blurHandler.bindAsEventListener(this));

		Event.observe(this.element, 'Select:optionAdd', this.optionAddHandler.bindAsEventListener(this));
		Event.observe(this.element, 'Select:optionRemove', this.optionRemoveHandler.bindAsEventListener(this));

		Event.observe(this.select, 'click', this.clickHandler.bindAsEventListener(this));

		Event.observe(this.wrapper, 'Select:refresh', this.refreshWrapper.bind(this));

	},


	optionAdd: function(option, beforeIndex) {
		var selectTransformer = new SelectTransformer('superStyler-select');
		var optionPrepared = selectTransformer.prepareOption(option);

		if (beforeIndex == null || (beforeIndex > 0 && !this.element.options[beforeIndex])) {
			this.element.appendChild(option);
			this.wrapper.appendChild(optionPrepared);
		} else {
			$(this.element.options[beforeIndex]).insert({before: option});
			this.options[beforeIndex].insert({before: optionPrepared});
		}

		this.updateOptionEvents(optionPrepared);
		this.options = this.wrapper.select('a.superStyler-select-option');

		this.updateCurrentSelection();
		this.updateDimensions();
		this.element.fire('Select:optionAdd');
	},


	optionRemove: function(index) {
		if (index < 0) {
			return;
		}
		$(this.element.options[index]).remove();

		var element = this.options[index];
		element.remove();
		this.options = this.options.without(element);

		this.updateCurrentSelection();
		this.updateDimensions();

		this.element.fire('Select:optionRemove');
	},


	updateWrapper: function() {
		var selectTransformer = new SelectTransformer('superStyler-select');
		this.wrapper.update(selectTransformer.prepareSelect(this.element));
		this.options = this.wrapper.select('a.superStyler-select-option');
	},


	updateOptionEvents: function(option) {
		Event.observe(option, 'mouseover', this.optionMouseoverHandler.bindAsEventListener(this));
		Event.observe(option, 'mouseout', this.optionMouseoutHandler.bindAsEventListener(this));
		Event.observe(option, 'click', this.optionClickHandler.bindAsEventListener(this));
	},


	refreshWrapper: function() {
		this.updateWrapper();
		this.updateDimensions();
		this.updateCurrentSelection();

		for (var i = 0; i < this.element.options.length; i++) {
			if (!this.element.options[i].disabled) {
				this.updateOptionEvents(this.options[i]);
			}
		}
	},


	updateDimensions: function() {
		this.wrapper.setStyle({width: 'auto', height: 'auto'});

		var dimensions = this.wrapper.getDimensions();
		this.wrapper.width = dimensions.width;
		this.wrapper.height = dimensions.height;

		dimensions = this.select.getDimensions();
		this.select.width = dimensions.width;
		this.select.height = dimensions.height;


		this.wrapper.setStyle({width: this.select.width - 2 + 'px'});
	},


	updateCurrentSelection: function() {
		this.wrapper.select('a.superStyler-select-option-selected').each(function(selectedOption) {
			selectedOption.removeClassName('superStyler-select-option-selected');
		});

		if (this.element.selectedIndex < 0) {
			this.select.option.update(null);
			return;
		}

		this.select.option.update($(this.element.options[this.element.selectedIndex]).readAttribute('label'));
		this.options[this.element.selectedIndex].addClassName('superStyler-select-option-selected');
	},


	optionMouseoverHandler: function(event) {
		Event.element(event).addClassName('superStyler-select-option-hightlight');
	},


	optionMouseoutHandler: function(event) {
		Event.element(event).removeClassName('superStyler-select-option-hightlight');
	},


	optionClickHandler: function(event) {
		var option = Event.element(event);
		Event.stop(event);

		for (var i = 0; i < this.options.length; i++) {
			if (this.options[i] == option) {
				this.element.selectedIndex = i;
				Element.fireNativeEvent(this.element, 'change');
				break;
			}
		}

		this.updateCurrentSelection();
		this.hideWrapper();
		this.element.focus();
	},




	optionAddHandler: function(event) {
	},


	optionRemoveHandler: function(event) {
	},


	documentClickHandler: function(event) {
		if (this.wrapper.visible() && !Event.element(event).descendantOf(this.select)) {
			this.hideWrapper();
		}
	},






















	focusHandler: function(event) {
		this.select.addClassName('superStyler-select-selectedItem-highlight');
	},


	blurHandler: function(event) {
		this.select.removeClassName('superStyler-select-selectedItem-highlight');
	},


	keypressHandler: function(event) {
		this.updateCurrentSelection();
	},


	keyupHandler: function(event) {
		this.updateCurrentSelection();
	},


	changeHandler: function(event, select) {
		this.updateCurrentSelection();
	},


	clickHandler: function(event) {
		Event.stop(event);

		if (this.wrapper.visible()) {
			this.hideWrapper();
		} else {
			this.showWrapper();
		}
	},


	hideWrapper: function() {
		if (isIE6()) {
			this.showSelectElements();
		}

		this.wrapper.hide();

		this.container.appendChild(this.wrapper);

	},


	showWrapper: function(select) {
		document.body.appendChild(this.wrapper);

		this.updateWrapperDimensions();

		this.wrapper.show();

		if (isIE6()) {
			this.hideSelectElements();
		}
	},


	showSelectElements: function() {
		var selectElements = $$('select:not(select.superStyler)');
		for (var i = 0; i < selectElements.length; i++) {
			selectElements[i].show();
			$$('div.dummySelect').each(function(e) { $(e).remove() });
		}

	},

	hideSelectElements: function() {

		var selectElements = $$('select:not(select.superStyler)');

		for (var i = 0; i < selectElements.length; i++) {

			var selectPosition = selectElements[i].cumulativeOffset();
			var selectDimesions = selectElements[i].getDimensions();
			var wrapperPosition = this.wrapper.cumulativeOffset();
			var wrapperDimesions = this.wrapper.getDimensions();

			var selectX1 = selectPosition.left;
			var selectX2 = selectPosition.left + selectDimesions.width;
			var selectY1 = selectPosition.top;
			var selectY2 = selectPosition.top + selectDimesions.height;

			var wrapperX1 = wrapperPosition.left;
			var wrapperX2 = wrapperPosition.left + wrapperDimesions.width;
			var wrapperY1 = wrapperPosition.top;
			var wrapperY2 = wrapperPosition.top + wrapperDimesions.height;


			if ((selectX1 >= wrapperX1 && selectX1 < wrapperX2 && selectY1 >= wrapperY1 && selectY1 < wrapperY2) ||
				(selectX2 <= wrapperX2 && selectX2 > wrapperX1 && selectY2 <= wrapperY2 && selectY2 > wrapperY1)) {


				var div = new Element('div', {className: 'dummySelect'}).setStyle({width: selectDimesions.width + 'px', height: selectDimesions.height + 'px'})
				selectElements[i].insert({after: div});
				selectElements[i].hide();

			}

		}

	},


	updateWrapperDimensions: function() {
		var viewportHeight = document.viewport.getHeight();
		var viewportY = this.select.viewportOffset().top;
		var offset = this.select.cumulativeOffset();
		var paddingTop = viewportY;
		var paddingBottom = viewportHeight - viewportY - this.select.height;

		if (paddingTop > paddingBottom) {

			if (this.wrapper.height > (paddingTop - 5)) {
				this.wrapper.setStyle({height: (paddingTop - 5) + 'px'});
			} else {
				this.wrapper.setStyle({height: 'auto'});
			}

			this.wrapper.setStyle({top: (offset.top - this.wrapper.getHeight() - 5) + 'px'});
		} else {
			if (this.wrapper.height > (paddingBottom - 5)) {
				this.wrapper.setStyle({height: (paddingBottom - 5) + 'px'});
			} else {
				this.wrapper.setStyle({height: 'auto'});
			}
			this.wrapper.setStyle({top: offset.top + this.select.height + 3 + 'px'});
		}

		this.wrapper.setStyle({left: offset.left + 'px'});




		/*
		var viewportDimensions = document.viewport.getDimensions();
		var viewportOffset = this.select.viewportOffset();
		var viewportWidth = viewportDimensions.width;
		var viewportX = viewportOffset.left;

		var paddingLeft = viewportX;
		var paddingRight = viewportWidth - viewportX - this.select.width;



		if (paddingLeft > paddingRight) {
			if (this.wrapper.width > (this.select.width + paddingLeft - 5)) {
				this.wrapper.setStyle({width: (this.select.width + paddingLeft - 5) + 'px'});
			} else {
				this.wrapper.setStyle({width: 'auto'});
			}
			this.wrapper.setStyle({left: 'auto', right: '0px'});
		} else {
			if (this.wrapper.width > (this.select.width + paddingRight - 5)) {
				this.wrapper.setStyle({width: (this.select.width + paddingRight - 5) + 'px'});
			} else {
				this.wrapper.setStyle({width: 'auto'});
			}
			this.wrapper.setStyle({left: '0px', right: 'auto'});
		}*/

//			console.log('paddingLeft', paddingLeft, ' / paddingRight', paddingRight, ' / paddingTop', paddingTop, ' / paddingBottom', paddingBottom);
//			console.log('this.wrapper.width', this.wrapper.width, ' / this.wrapper.height', this.wrapper.height);
//			console.log('viewportWidth', viewportWidth, ' / viewportHeight', viewportHeight);
//			console.log('viewportX', viewportX, ' / viewportY', viewportY);

	}




});

var SuperStyler_Checkbox = Class.create({

	element: null,
	parent: null,
	visual: null,
	focus: null,

	initialize: function(htmlElement) {
//		return;
		this.element = $(htmlElement);
		this.element.removeClassName('superStyler');
		this.parent = $(this.element.parentNode);
		this.visual = new Element('div', {className: 'superStyler-checkbox'});
		this.visual.addClassName(this.element.readAttribute('class'));
		this.focus = new Element('div');
		this.visual.appendChild(this.focus);



		this.element.addClassName('superStyler-hidden');

		this.element.insert({after: this.visual});

		this.visual.appendChild(this.element);


		this.parent.setStyle({lineHeight: this.visual.getHeight() + 'px'});


		if (this.element.disabled) {
			if (this.element.checked) {
				this.visual.addClassName('superStyler-checkbox-checked-disabled');
			} else {
				this.visual.addClassName('superStyler-checkbox-unchecked-disabled');
			}
			return;
		}

		this.sync();

		Event.observe(this.element, 'focus', this.focusHandler.bindAsEventListener(this));
		Event.observe(this.element, 'blur', this.blurHandler.bindAsEventListener(this));
		Event.observe(this.element, 'keydown', this.keydownHandler.bindAsEventListener(this));
		Event.observe(this.element, 'keyup', this.keyupHandler.bindAsEventListener(this));
		Event.observe(this.element, 'keypress', this.keypressHandler.bindAsEventListener(this));

		Event.observe(this.visual, 'click', this.mouseclickHandler.bindAsEventListener(this));
		Event.observe(this.visual, 'mousedown', this.mousedownHandler.bindAsEventListener(this));
		Event.observe(this.visual, 'mouseup', this.mouseupHandler.bindAsEventListener(this));
		Event.observe(this.visual, 'mouseover', this.mouseoverHandler.bindAsEventListener(this));
		Event.observe(this.visual, 'mouseout', this.mouseoutHandler.bindAsEventListener(this));

	},



	keydownHandler: function(event) {
		if (event.keyCode == 32) {
			Event.stop(event);
			this.press();
		}
	},


	keyupHandler: function(event) {
		if (event.keyCode == 32) {
			Event.stop(event);
			this.element.checked = this.element.checked ? false : true;
			this.sync();
		}
	},


	keypressHandler: function(event) {
		if (event.keyCode == 32) {
			Event.stop(event);
		}
	},




	focusHandler: function(event) {
		this.focus.className = 'focused';
	},


	blurHandler: function(event) {
		this.focus.className = '';
	},


	mousedownHandler: function(event) {
		Event.stop(event);
		this.press();
	},


	mouseupHandler: function(event) {
		Event.stop(event);
	},


	mouseclickHandler: function(event) {
		Event.stop(event);
		this.element.checked = this.element.checked ? false : true;
		this.sync();
	},


	mouseoverHandler: function(event) {
		if (this.element.checked) {
			this.visual.addClassName('superStyler-checkbox-checked-mouseover');
		} else {
			this.visual.addClassName('superStyler-checkbox-unchecked-mouseover');
		}
	},


	mouseoutHandler: function(event) {
		this.sync();
	},


	press: function() {
		if (this.element.checked) {
			this.visual.className = 'superStyler-checkbox superStyler-checkbox-checked-pressed';
		} else {
			this.visual.className = 'superStyler-checkbox superStyler-checkbox-unchecked-pressed';
		}
	},

	sync: function() {
		if (this.element.checked) {
			this.visual.className = 'superStyler-checkbox superStyler-checkbox-checked';
		} else {
			this.visual.className = 'superStyler-checkbox superStyler-checkbox-unchecked';
		}
	}

});




var SuperStyler_Radio = Class.create({

	element: null,
	parent: null,
	visual: null,
	focus: null,

	initialize: function(htmlElement) {
//		return;
		this.element = $(htmlElement);
		this.element.removeClassName('superStyler');
		this.parent = $(this.element.parentNode);
		this.visual = new Element('div', {className: 'superStyler-radio'});
		this.visual.addClassName(this.element.readAttribute('class'));
		this.focus = new Element('div');
		this.visual.appendChild(this.focus);


		this.element.addClassName('superStyler-hidden');

		this.element.insert({after: this.visual});

		this.visual.appendChild(this.element);

		this.parent.setStyle({lineHeight: this.visual.getHeight() + 'px'});


		if (this.element.disabled) {
			if (this.element.checked) {
				this.visual.addClassName('superStyler-radio-checked-disabled');
			} else {
				this.visual.addClassName('superStyler-radio-unchecked-disabled');
			}
			return;
		}


		this.sync();


		Event.observe(this.element, 'focus', this.focusHandler.bindAsEventListener(this));
		Event.observe(this.element, 'blur', this.blurHandler.bindAsEventListener(this));
		Event.observe(this.element, 'keydown', this.keydownHandler.bindAsEventListener(this));
		Event.observe(this.element, 'keyup', this.keyupHandler.bindAsEventListener(this));
		Event.observe(this.element, 'keypress', this.keypressHandler.bindAsEventListener(this));

		Event.observe(this.visual, 'click', this.mouseclickHandler.bindAsEventListener(this));
		Event.observe(this.visual, 'mousedown', this.mousedownHandler.bindAsEventListener(this));
		Event.observe(this.visual, 'mouseup', this.mouseupHandler.bindAsEventListener(this));
		Event.observe(this.visual, 'mouseover', this.mouseoverHandler.bindAsEventListener(this));
		Event.observe(this.visual, 'mouseout', this.mouseoutHandler.bindAsEventListener(this));

	},


	keydownHandler: function(event) {
		if (event.keyCode == 32) {
			Event.stop(event);
			this.press();
		}
	},


	keyupHandler: function(event) {
		if (event.keyCode == 32) {
			Event.stop(event);
			this.sync();
		}
	},
	keypressHandler: function(event) {
		if (event.keyCode == 32) {
			Event.stop(event);
		}
	},


	focusHandler: function(event) {
		this.focus.className = 'focused';
	},


	blurHandler: function(event) {
		this.focus.className = '';
	},



	mousedownHandler: function(event) {
		Event.stop(event);
		this.press();
	},


	mouseupHandler: function(event) {
		Event.stop(event);
	},


	mouseclickHandler: function(event) {
		Event.stop(event);
		var name = this.element.readAttribute('name');
		$$('input[type=radio][name="' + name + '"]:not(input[type=radio][name="' + name + '"][disabled])').each(function(element) {
			var visual = $(element.parentNode);
			visual.className = 'superStyler-radio superStyler-radio-unchecked';
			element.checked = false;
		}.bind(this));

		this.element.checked = true;
		this.visual.className = 'superStyler-radio superStyler-radio-checked';
	},


	mouseoverHandler: function(event) {
		if (this.element.checked) {
			this.visual.addClassName('superStyler-radio-checked-mouseover');
		} else {
			this.visual.addClassName('superStyler-radio-unchecked-mouseover');
		}
	},


	mouseoutHandler: function(event) {
			this.sync();
	},


	press: function() {
		if (this.element.checked) {
			this.visual.className = 'superStyler-radio superStyler-radio-checked-pressed';
		} else {
			this.visual.className = 'superStyler-radio superStyler-radio-unchecked-pressed';
		}
	},

	sync: function() {
		if (this.element.checked) {
			this.visual.className = 'superStyler-radio superStyler-radio-checked';
		} else {
			this.visual.className = 'superStyler-radio superStyler-radio-unchecked';
		}
	}

});



var SuperStyler_File = Class.create({

	element: null,
	container: null,
	visual: null,
	input: null,
	button: null,
	focus: null,

	initialize: function(htmlElement) {
//		return;
		this.element = $(htmlElement);
		this.element.removeClassName('superStyler');

		var title = this.element.readAttribute('title');
		if (!title || title.length < 1) {
			title = '';
		}

		this.visual = new Element('div', {className: 'superStyler-file'});
		this.visual.addClassName(this.element.readAttribute('class'));

		this.input = new Element('div', {className: 'superStyler-file-input'});
		this.button = new Element('div', {className: 'superStyler-file-button'});
		this.focus = new Element('div', {className: 'superStyler-file-focus'}).update(title);


		this.element.insert({after: this.visual});
		this.element.setOpacity(0);
		this.button.appendChild(this.element);

		this.visual.appendChild(this.button);
		this.visual.appendChild(this.input);
		this.visual.appendChild(this.focus);


		if (this.element.disabled) {
			this.visual.addClassName('superStyler-file-disabled');
			return;
		}


		Event.observe(this.element, 'change', this.changeHandler.bindAsEventListener(this));

		Event.observe(this.element, 'focus', this.focusHandler.bindAsEventListener(this));
		Event.observe(this.element, 'blur', this.blurHandler.bindAsEventListener(this));
		Event.observe(this.element, 'keydown', this.keydownHandler.bindAsEventListener(this));
		Event.observe(this.element, 'keyup', this.keyupHandler.bindAsEventListener(this));
//		Event.observe(this.element, 'keypress', this.keypressHandler.bindAsEventListener(this));
		Event.observe(this.element, 'mousedown', this.mousedownHandler.bindAsEventListener(this));
		Event.observe(this.element, 'mouseup', this.mouseupHandler.bindAsEventListener(this));

		Event.observe(this.button, 'mouseover', this.mouseoverHandler.bindAsEventListener(this));
		Event.observe(this.button, 'mouseout', this.mouseoutHandler.bindAsEventListener(this));



	},


	keydownHandler: function(event) {
		if (event.keyCode == 32) {
			this.visual.addClassName('superStyler-file-pressed');
		}
	},


	keyupHandler: function(event) {
		if (event.keyCode == 32) {
			this.visual.removeClassName('superStyler-file-pressed');
		}
	},
//	keypressHandler: function(event) {
//		if (event.keyCode == 32) {
//			Event.stop(event);
//		}
//	},



	mousedownHandler: function(event) {
		this.visual.addClassName('superStyler-file-pressed');
	},

	mouseupHandler: function(event) {
		this.button.removeClassName('superStyler-file-pressed');
	},


	changeHandler: function(event) {
		var value = $F(this.element);
		this.input.writeAttribute('title', value);
		this.input.update(value);
	},


	focusHandler: function(event) {
		this.visual.addClassName('superStyler-file-focused');
	},


	blurHandler: function(event) {
		this.visual.removeClassName('superStyler-file-hovered');
		this.visual.removeClassName('superStyler-file-pressed');
		this.visual.removeClassName('superStyler-file-focused');
	},


	mouseoverHandler: function(event) {
		this.visual.addClassName('superStyler-file-hovered');
	},


	mouseoutHandler: function(event) {
		this.visual.removeClassName('superStyler-file-hovered');
		this.visual.removeClassName('superStyler-file-pressed');
//		this.visual.className = 'superStyler-file';
//		this.button.removeClassName('superStyler-file-hovered');
	}



});


var SuperStyler = Class.create({

	elements: [],

	initialize: function() {
		this.domReady();
		Event.observe(window, 'load', this.start.bindAsEventListener(this));
	},

	start: function() {
		this.refresh();



	},

	refresh: function(htmlElement) {
		var container = this.getContainer(htmlElement);

		var radio = container.select('input[type=radio].superStyler');
		var checkbox = container.select('input[type=checkbox].superStyler');
		var select = container.select('select.superStyler:not(select.superStyler[multiple])');
		var file = container.select('input[type=file].superStyler');

		for (var i = 0; i < radio.length; i++) {
			this.elements.push(new SuperStyler_Radio(radio[i]));
			radio[i].show();
		}

		for (var i = 0; i < checkbox.length; i++) {
			this.elements.push(new SuperStyler_Checkbox(checkbox[i]));
			checkbox[i].show();
		}

		for (var i = 0; i < select.length; i++) {
			var superStylerSelect = new SuperStyler_Select(select[i]);
			this.elements.push(superStylerSelect);
			select[i].show();
		}

		for (var i = 0; i < file.length; i++) {
			this.elements.push(new SuperStyler_File(file[i]));
			file[i].show();
		}
	},

	domReady: function(htmlElement) {
		var elements = this.getContainer(htmlElement).select('.superStyler');
		for (var i = 0; i < elements.length; i++) {
			elements[i].hide();
		}

	},

	getContainer: function(htmlElement) {
		return (htmlElement) ? $(htmlElement) : $$('body')[0];
	}




//	_addOption: function(event, select) {
//		var option = new Element('option', {value: Math.random(), label: Math.random()}).update(Math.random());
//		select.add(option, 5);
//
//
//
////		element.realSelectElement.add(option, null);
////		element.fakeSelect.add(option, 2);
////		element.realSelectElement.add(option, 0);
//	},
//
//	_deleteOption: function(event, select) {
//		select.remove(select.selectedIndex);
//	}




});

ScriptsManager.registerScript("SuperStyler");