// radio buttons
var class_radio = 'radiobox';

// checkboxes
var class_checkbox = 'checkbox';

// dropdowns
var option_height = 29;
var bottom_height = 32;
var options_visible = 8;

// css classes
var class_specials = 'dropbox';
var class_selected_option = 'selected';
var class_div_hide = 'hide';
var class_ul = 'droplist';


// stop changing :)
var selected_div;
var selected_label;

$(document).ready(function() 
{
	// init scene
	/* Selects */
	/* Explicatie: Ascunde select-urile de pe pagina si pune valoarea selectata intr-un label. Optiunile din select se vor deschide sub label intr-un div cu span-uri. La click pe span, se ascunde div-ul, se face select in elementul select si se pune valoarea selectata in label */
	$('select.' + class_specials).each(function(name)
	{
		$(this).hide();
		str = "<span><em>&nbsp;</em>";
		nr = 0;
		opts = "";
		$('select.' + class_specials).eq(name).find('option').each(function(i, selected)
		{
			nr++;
			// daca e optiunea selectata, ii pune o clasa in plus
			select_class = '';
			if ( $(this).is(':selected') )
			{
				str = "<span><em>" + $(selected).text() + "</em>";
				select_class = class_selected_option;
			}
			opts += "<li class='" + select_class + "' onclick=\"js_change_select('" + $(selected).val() + "', '" + $(selected).text() + "', this);\">" + $(selected).text() + "</li>";
		});
		// daca sunt mai putine optiuni decat nr max, atunci facem height din ele
		if ( nr < options_visible ) options_height = nr * option_height;
		else options_height = options_visible * option_height;
		total_height = options_height + bottom_height;

		
		opts = "<div class=\"" + class_div_hide + "\"><small style=\"height:" + options_height + "px;\" class=\"r\"></small><ul class=\"" + class_ul + "\" style=\"height:" + options_height + "px\">" + opts;
		opts += "</ul><small class=\"b\" style=\"top:" + total_height + "px;\"></small><small class=\"br\" style=\"top:" + total_height + "px;\"></small></div>";
		
		str += opts;
		str += "</span>";
		
		// adauga div-ul intre label si select
		$('label.' + class_specials).eq(name).append(str);
	});
		
	$('label.' + class_specials + ' em').click(function()
	{
		if ( $(this).next('div').is(':visible') ) 
		{
			$(this).next('div').hide();
			$(this).parent().parent().removeClass('open');
			$(this).parent().parent().addClass('closed');
			
		}
		else 
		{	
			if ( selected_div )
			{
				$(selected_div).hide();
				$(selected_label).removeClass('open');
				$(selected_label).addClass('closed');
			}
			
			selected_div = $(this).next('div');
			selected_label = $(this).parent().parent();
			
			$(this).parent().parent().removeClass('closed');
			$(this).parent().parent().addClass('open');
			
			$(this).next('div').show();			
			$(this).parent().find('ul').scrollTo( $(this).parent().find('ul').find('li.' + class_selected_option) );
		}
	});
		
	$('label.' + class_specials + ' li').hover(
		function()
		{
			$(this).addClass('hover');
		},
		function()
		{
			$(this).removeClass('hover');
		}
	);
	
	$('label.' + class_specials + ' em').hover(
		function()
		{
			$(this).parent().parent().addClass('hover');
		},
		function()
		{
			$(this).parent().parent().removeClass('hover');
		}
	);
	$(document).mousedown(click_outside_selects);
	/* Selects */
	
	
	
	/* Radio Groups */
	
	/* Explicatie: Ascunde radio butoanele de pe pagina si le inlocuieste cu un span */
	$('input.' + class_radio).each(function(name)
	{
		//$(this).hide();
		align_class = '';
		disabled_class = '';
		if ($(this).hasClass('left')) align_class = ' left';
		if ($(this).hasClass('right')) align_class = ' right';
		
		if ( $(this).is(':checked') ) checked_class = ' checked';
		else checked_class = ' unchecked';
		
		if ( $(this).is(':disabled') ) 
		{
			if ( $(this).is(':checked') ) disabled_class = ' disabled';
			else disabled_class = ' disabled';
		}
		
		str = "<span class=\"" + class_radio + checked_class + disabled_class + align_class + "\"></span>";
		
		// adauga span-ul inainte de checkbox
		//$('input.' + class_radio).eq(name).before(str);
	});
	$('input.' + class_radio).change(function()
	{	
		if (!$(this).is(':disabled'))
		{
			nume = $(this).attr('name');
			$(this).parent().parent().find("input[name=" + nume + "]").parent().find('span.' + class_radio).removeClass('checked');
			$(this).parent().parent().find("input[name=" + nume + "]").parent().find('span.' + class_radio).addClass('unchecked');
			$(this).parent().find('span.' + class_radio).removeClass('unchecked');
			$(this).parent().find('span.' + class_radio).addClass('checked');
		}
	});
	$('span.' + class_radio).click(function()
	{
		if (!$(this).hasClass('disabled')) $(this).next('input.' + class_radio).change();
	});
	$('span.' + class_radio).hover(
		function()
		{
			$(this).addClass('hover');
		},
		function()
		{
			$(this).removeClass('hover');
		}
	);
	/* Radio Groups */
	
	
	
	/* Checkboxes */
	$('input.' + class_checkbox).each(function(name)
	{
		$(this).hide();
		align_class = '';
		disabled_class = '';
		if ($(this).hasClass('left')) align_class = ' left';
		if ($(this).hasClass('right')) align_class = ' right';
		
		if ( $(this).is(':checked') ) checked_class = ' checked';
		else checked_class = ' unchecked';
		
		if ( $(this).is(':disabled') ) 
		{
			if ( $(this).is(':checked') ) disabled_class = ' disabled';
			else disabled_class = ' disabled';
		}
		
		str = "<span class=\"" + class_checkbox + checked_class + disabled_class + align_class + "\"></span>";
		
		// adauga span-ul inainte de checkbox
		$('input.' + class_checkbox).eq(name).before(str);
	});
	
	$('span.' + class_checkbox).hover(
		function()
		{
			$(this).addClass('hover');
		},
		function()
		{
			$(this).removeClass('hover');
		}
	);
	
	$('span.' + class_checkbox).click(function()
	{
		// la click pe span schimba clasa din checked in unchecked sau invers si pune input-ul
		if ( $(this).next('input.' + class_checkbox).is(':checked') )
		{
			if ( !$(this).next('input.' + class_checkbox).is(':disabled') )
			{
				$(this).next('input.' + class_checkbox).attr('checked', false);
				$(this).removeClass('checked');
				$(this).addClass('unchecked');
				$(this).next('input.' + class_checkbox).change();
			}
		}
		else
		{
			if ( !$(this).next('input.' + class_checkbox).is(':disabled') )
			{
				$(this).next('input.' + class_checkbox).attr('checked', true);
				$(this).removeClass('unchecked');
				$(this).addClass('checked');
				$(this).next('input.' + class_checkbox).change();
			}
		}
	});
	
	// la change de pe label
	$('input.' + class_checkbox).change(function()
	{
		if ($(this).is(':checked')) 
		{
			// face check
			$(this).prev('span.' + class_checkbox).removeClass('unchecked');
			$(this).prev('span.' + class_checkbox).addClass('checked');
		}
		else
		{
			// face uncheck
			$(this).prev('span.' + class_checkbox).removeClass('checked');
			$(this).prev('span.' + class_checkbox).addClass('unchecked');
		}
	});
	
	/* Explicatie: Ascunde checkbox-urile de pe pagina si le inlocuieste cu un span care functioneaza la fel cu checkbox-ul */
	
	/* Checkboxes */
});
/* Selects */
function click_outside_selects(e)
{
	// cand face click pe altceva in afara de span-urile de selectare sau label-uri, inchide select-ul deschis daca e vreunu
	if ( (!$(e.target).is('label.' + class_specials + ' em')) && (!$(e.target).is('label.' + class_specials + ' ul')) && (!$(e.target).is('label.' + class_specials + ' li')) )
	{
		if ( selected_div )
		{
			$(selected_div).hide();
			$(selected_label).removeClass('open');
			$(selected_label).addClass('closed');
			selected_div = null;
			selected_label = null;
		}
	}
}
function js_change_select( valoare, text, el )
{
	$(el).parent().parent().prev('em').html(text);
	
	$(el).parent().parent().parent().parent().removeClass('open');
	$(el).parent().parent().parent().parent().addClass('closed');
	$(el).parent().children('li.' + class_selected_option).removeClass(class_selected_option);
	
	$(el).addClass(class_selected_option);
	$(el).parent().parent().parent().prev('select').val(valoare);
	$(el).parent().parent().hide();
}

/* Selects */

$(function() {
	var zIndexNumber = 1000;
	$('*').each(function() {
		$(this).css('zIndex', zIndexNumber);
		zIndexNumber -= 1;
	});
});
