/*
* Mag Studio - Custom Selects
* @Author: Alexander Gavazov
* @Site: www.creative.bg & www.studio.bg
*/

// Namespace or some like that :)
var hideCustomSelects = {};
hideCustomSelects.object = {};
hideCustomSelects.increment = 0;


var CustomSelect = function(select)
{
	this.select = select;
	this._label = '';
	this._options = {};
	this._E = {}; // Elements namespace
	this._isHide = true;
	this._oldTitle = '';

	this.getLabel();
	this.getOptions();
	this.hideElement();
	this.createElement();

	// Add to hide library
	hideCustomSelects.object[hideCustomSelects.increment] = this;
	hideCustomSelects.increment++;
}

CustomSelect.prototype.getLabel = function()
{
	var label = $$('label[for="' + this.select.id + '"]')[0];
	if(label)
	{
		this._label = label.innerHTML;
		label.hide(); // Hide label
	}
	else
	{
		this._label = '';
	}
}

CustomSelect.prototype.getOptions = function()
{
	this.select.childElements().each(function(node) {
		if(!node.value)
		{
			node.value = node.innerHTML;
		}
		this._options[node.value] = {};
		this._options[node.value].title = node.innerHTML;

		var selected = node.readAttribute('selected');
		this._options[node.value].selected = (selected == 'true' || selected == true || selected == 'selected') ? true : false;
	}.bind(this));
}

CustomSelect.prototype.titleClick = function()
{
	if(this._isHide)
	{
		closeCustomSelect();
		this.show();
	}
	else
	{
		this.hide();
	}
}

CustomSelect.prototype.show = function()
{
	this._oldTitle = this._E.title.innerHTML;
	this._E.title.innerHTML = this._label + '<span></span>';
	this._E.title.className = 'title_opened';
	Opacity.set(this._E.options, 0);
	this._E.options.show();
	Opacity.fade(this._E.options, 0, 100, function() {
		this._isHide = false;
	}.bind(this));
	this._E.container.style.zIndex = 9999;
}

CustomSelect.prototype.hide = function()
{
	if(this._oldTitle)
	{
		this._E.title.innerHTML = this._oldTitle;
	}

	this._E.title.className = 'title';
	this._isHide = true;
	Opacity.fade(this._E.options, 100, 0, function() {
		this._E.options.hide();
		this._E.container.style.zIndex = 9998;
	}.bind(this));
}

CustomSelect.prototype.changeValue = function(option, value, isChanged)
{
	this._oldTitle = '';
	var options = this._E.options.getElementsByTagName('DIV');
	for(i in options)
	{
		options[i].className = '';
	}
	option.className = 'active';
	this._E.title.innerHTML = option.innerHTML + '<span></span>';
	this.hide();

	this.select.value = value;

	if(isChanged && this.select.onchange)
	{
		this.select.onchange();
	}
}

CustomSelect.prototype.hideElement = function()
{
	if(Prototype.Browser.IE)
	{
		setTimeout(function() {
			this.select.hide();
		}.bind(this), 100); // Hide original select after 100 msc (IE6, IE7 problem)
	}
	else
	{
		this.select.hide();
	}
}

CustomSelect.prototype.createElement = function()
{
	// Create container
	this._E.container = new Element('div', {className: 'custom_select ' + (this.select.className ? this.select.className.replace('CustomSelect', '') : '')});
	Element.insert(this.select, {before: this._E.container});

	// Create title
	this._E.title = new Element('div', {className: 'title'});
	this._E.title.innerHTML = this._label + '<span></span>';
	this._E.title.onclick = this.titleClick.bind(this);
	Element.insert(this._E.container, {top: this._E.title});

	// Create options
	this._E.options = new Element('div', {className: 'options'});
	this._E.options.hide();
	Element.insert(this._E.container, {bottom: this._E.options});

	for(i in this._options)
	{
		var option = new Element('div', {className: (this._options[i].selected ? 'active' : '')});

		option.onclick = this.changeValue.bind(this, option, i, 'change');

		option.innerHTML = this._options[i].title;

		if(Prototype.Browser.IE6)
		{
			option.onmouseover = function() {this.className += ' hover';};
			option.onmouseout = function() {this.className = this.className.replace('hover', '');};
		}

		Element.insert(this._E.options, {bottom: option});

		if(this._options[i].selected)
		{
			this.changeValue(option, i);
		}
	}
}

//// Init and Hide Events ////

function closeCustomSelect()
{
	for(i in hideCustomSelects.object)
	{
		if(!hideCustomSelects.object[i]._isHide)
		{
			hideCustomSelects.object[i].hide();
		}
	}
}

Event.observe(window, 'load', function() {
	$$('select.CustomSelect').each(function(node) {
		new CustomSelect(node);
	});
});

Event.observe(document, 'click', function(e) {
	function searchParentClass(element, className)
	{
		if(element && element.parentNode)
		{
			return (new RegExp("(^|\\s)" + className + "(\\s|$)").test(element.parentNode.className)) ? true : searchParentClass(element.parentNode, className);
		}
	}

	if(!searchParentClass(Event.element(e), 'custom_select'))
	{
		closeCustomSelect();
	}
});


document.onkeydown = function(e)
{
	var code;
	if(!e) var e = window.event;
	if(e.keyCode == '27') closeCustomSelect();
}