/**
 * Totalno mazalo, no ne me ebe, vas ebe li vi?
 *
 * Koito iska da optimizira, da go portva kym
 * prototype ili koqto si poiska library. :p
 */

function toggle_select(menu_id, holder) {

	var select = document.getElementById(menu_id);

	if (select.style.display == 'none') {
		select.style.display = 'block';
	} else {
		select.style.display = 'none';
	}

	var hold = document.getElementById(holder);

	if (hold && hold.style) {
		// hold.style.zIndex = parseInt(hold.style.zIndex, 10) + 2;
	}
}

// real_select_id is the ID of the <select>
var selectbox = {
	real_select_id: '',
	z_index: 100
}

function init_select(real_select_id, holder) {

	if (real_select_id == undefined) {
		alert('Select box is not presented');
		return false;
	}

	if (holder == undefined) {
		alert('Holder box is not presented');
		return false;
	}

	selectbox.real_select_id = real_select_id;

	document.getElementById(holder).innerHTML = '<div class="select-button" style="position: absolute; margin-top: -5px;">\n' +
			'<div class="select-button-left"></div>\n' +
			'<a href="" id="'+ real_select_id +'_selected"><div class="select-button-content" id="'+ real_select_id +'_menu-content">Избери</div></a>\n' +
			'<a href="" id="'+ real_select_id +'_arrow"><div class="select-button-right"></div></a>\n' +
		'</div>\n' +
			'<br />\n' +
		'<div class="select-menu" id="'+ real_select_id +'_select-menu-id" style="display: none; position: absolute;">\n' +
			'<div class="select-menu-left"></div>\n' +
			'<div class="menu-content-holder" id="'+ real_select_id +'_menu-content-holder">\n' +
				'<ul class="select-menu-content" id="'+ real_select_id +'_menu-list">\n' +
				'</ul>\n' +
			'</div>\n' +
			'<div class="select-menu-right">\n' +
				'<div id="'+ real_select_id +'_slider" class="slider">\n' +
					'<div class="slider-handle"></div>\n' +
				'</div>\n' +
			'</div>\n' +
		'</div>';

	document.getElementById(real_select_id +'_selected').onclick = function() { toggle_select(real_select_id + '_select-menu-id', holder); return false; }
	document.getElementById(real_select_id +'_arrow').onclick = function() { toggle_select(real_select_id + '_select-menu-id', holder); return false; }

	document.getElementById(holder).style.zIndex = selectbox.z_index--;

	// get the select box by ID
	var real_select_box = document.getElementById(selectbox.real_select_id);

	// get the menu
	var menu = document.getElementById(real_select_id + '_menu-content');

	// get the list holder
	var list = document.getElementById(real_select_id + '_menu-list');

	// ???
	// var select = document.getElementById('select-menu-id');


	// if the select box is selected
	if (real_select_box && list) {

		// loop thru all options and create the custom menu
		// elements. el.rel = opt.val, el.html = opt.name
		var length = real_select_box.options.length;
		var options = real_select_box.options;

		for (i = 0; i < length; i++) {
		
			if (options[i].value == '') {
				continue;
			}

			// build necessary dom elements
			var li = document.createElement('li');
			//li.setAttribute('rel', options[i].value);
			li.setAttribute('rel', options[i].innerHTML);
			li.setAttribute('title', i);

			var left = document.createElement('div');
			left.setAttribute('class' , 'left');
			left.innerHTML = '&nbsp;';

			var right = document.createElement('div');
			right.setAttribute('class' , 'right');
			right.innerHTML = '&nbsp;';

			var option = document.createElement('div');
			option.innerHTML = options[i].innerHTML;

			// if this options is the selected one
			if (options[i].selected) {
				option.setAttribute('class', 'hover clicked');
			}

			li.appendChild(left);
			li.appendChild(option);
			li.appendChild(right);

			list.appendChild(li);
		}
	}


	// once generated iterate thru them and do the rest
	var items = list.getElementsByTagName('li');
	var max = 0;

	toggle_select(real_select_id + '_select-menu-id');


	for(i = 0, l = items.length; i < l; i++) {
		if (items[i].offsetWidth > max) {
			max = items[i].offsetWidth;
		}
	}

	if (max > 35) {
		document.getElementById(real_select_id + '_menu-content').style.width = max + 'px';
	} else {
		document.getElementById(real_select_id + '_menu-content').style.width = '55px';
	}

	for(i = 0, l = items.length; i < l; i++) {
		if (max < 35) {
			items[i].getElementsByTagName('div')[1].style.width = '55px';
		} else {
			items[i].getElementsByTagName('div')[1].style.width = max + 'px';
		}

		items[i].onmouseover = menu_item_on_focus;
		items[i].onmouseout = menu_item_on_blur;
		items[i].onclick = function() { menu_item_on_click(real_select_id, this); }
	}


	// initialize the slider ALWAYS AFTER init_select() !!!
	// CHANGE THIS ANYTIME YOU CHANGE THE CSS FOR THE LI's
  	var list_height =  $(real_select_id + '_menu-list').scrollHeight;
	var list_visible = $(real_select_id + '_menu-content-holder').offsetHeight;

	var max = ( list_height - list_visible );

	var zoom_slider = $(real_select_id + '_slider');

	new Control.Slider(zoom_slider.down('.slider-handle'), zoom_slider, {
	  range: $R(0, max),
	  axis: 'vertical',
	  sliderValue: 0,
	  onSlide: function(value) {
	  	$(real_select_id + '_menu-list').scrollTop = value;
		// $('selected').innerHTML += value + '<br />';
	  }
	});


	toggle_select(real_select_id + '_select-menu-id');

	real_select_box.style.display = 'none';
}

function menu_item_on_focus() {
	if (this.className != 'hover clicked') {
		this.className = 'hover';
	}
}

function menu_item_on_blur() {
	if (this.className != 'hover clicked') {
		this.className = '';
	}
}

function menu_item_on_click(real_select_id, el) {
	document.getElementById(real_select_id + '_menu-content').innerHTML = el.getAttribute('rel');
	document.getElementById(real_select_id + '_select-menu-id').style.display = 'none';

	var real_select_box = document.getElementById(real_select_id);

	id = el.getAttribute('title');

	real_select_box.options[id].selected = true;

	var list = document.getElementById(real_select_id + '_menu-list');
	var items = list.getElementsByTagName('li');
	for(i = 0, l = items.length; i < l; i++) {
		items[i].className = '';
	}

	this.className = 'hover clicked';
}