// Swaps select boxes to a nice looking custom made, hides the orginal.
// Keeps the behavior of the original <select> element, for correct server side behavior
// - This is done by using jquery trigger functionality
// By Richard A.

var customSelectBoxesManager = new Object();
customSelectBoxesManager.idSuffix = '_CustomSelect';

// triggers the custom controls change/click
customSelectBoxesManager.reset = function(strOrgID) {
	var objSelButton = $('#' + strOrgID + customSelectBoxesManager.idSuffix + ' .listwrap .list .items a:eq(0)');
	objSelButton.trigger('click');
}

$(document).ready(function() {
    function customSelectBoxes() {
		function createNewObject(strID) {
			var objNew = $(strID).clone();
			objNew.attr('id', '');
			objNew.show();
			return objNew;
		}

		function boxClick(e) {
			var objList = $(this).parent().children('.listwrap');
			// close all other boxes ??
			$('.custom-selectbox-listwrap').each(function() {
				if(objList.parent().attr('id')!=$(this).parent().attr('id')) {
					$(this).hide();				
				}
			});
			objList.css('display', (objList.css('display') == 'none' ? '' : 'none')); // handle this box
			
			$(this).children('a').trigger('blur');
			return false;
		}
		function itemClick(e) {
			var objTopPar = $(this).parent().parent().parent().parent();
			var strOrgId = objTopPar.attr('id').replace(customSelectBoxesManager.idSuffix, '');
			$('#' + strOrgId).val($(this).children('span').text());
			$('#' + strOrgId).trigger('change');
			$(this).parent().children().removeClass('active');
			$(this).addClass('active');
			var strText = $(this).html().replace(new RegExp('<.*>'), '').replace(new RegExp('(&nbsp;)'), ' ');
			objTopPar.children('.controls').children('span').text(strText);
			objTopPar.children('.listwrap').hide();
			return false;
		}
		function createBox(objCurr, objNew) {
			// gör en som tar hand om vanliga
			var idCurr = objCurr.attr('id');
			objNew.attr('id', idCurr + customSelectBoxesManager.idSuffix);

			var objItems = objNew.children('.listwrap').children('.list').children('.items');
			var intItemsCount = objCurr.children().length;
			objCurr.children().each(function(counter2) {
				var strCssClass = $(this).attr('selected') != '' ? 'active' : '';
				var strText = $(this).text();
				var strItem = '<a class="' + strCssClass + '" href="#">' + ((strText == '') ? '&nbsp;' : strText) + '<span style="display:none;">' + $(this).attr('value') + '</span></a>';
				objItems.append(strItem);
				var objItem = objItems.children(':last');
				objItem.bind('click', itemClick);
				if (strCssClass != '') {
					objNew.children('.controls').children('span').text(strText);
				}
				if (counter2 == intItemsCount - 1) {
					objItem.css('border-bottom','none');
				}
			});
			objCurr.css('display', 'none');
			objNew.appendTo(objCurr.parent());
			objNew.children('.controls').bind('click', boxClick);
		}
		this.initAll = function() {
			$('select.use-custom-smaller').each(function(counter) {
				createBox($(this), createNewObject('#CustomSelectBoxSmallerPrototype'));
			});				

			$('select.use-custom').each(function(counter) {
				createBox($(this), createNewObject('#CustomSelectBoxPrototype'));
			});

			$(document).bind('click', function() {
				$('.custom-selectbox .listwrap').hide();
				$('.custom-selectbox-smaller .listwrap').hide();
			});
		}
    }
    
    new customSelectBoxes().initAll();
});