$(document).ready(function() {
  	
	findSelectsAndInitJsDropDown();
 	
 });
 
 function findSelectsAndInitJsDropDown(){
 	if(typeof(selects) == 'undefined')
 		selects = [];
 	
 	$('.select.js').each(function(index, element){
 		if(!$(element).hasClass('processed')){
 			var temp = new dropDown();
 			temp.init(element, index);
 			selects.push(temp);
 			
 			//selects[index] = new dropDown();
 			//selects[index].init(element, index);
 		}
 	});
 	
 }
 
 
  function dropDown(){
 	var self = this;
 	var selectElement = null;
 	var dropDownSelector = null;
 	var dropDownName = "";
 	var visible = false;
 	var slideSpeed = 250;
 	var index = null;

	/*
	*	true for debug output to console
	*/ 
  	var showDebug = false;

 
 	this.init = function(obj, index){
 		
 		this.index = index;
 		this.selectElement = $(obj);
 		this.selectElement.addClass('processed');
 		this.dropDownName = this.selectElement.attr('name')+'JS';
 		this.hideFormField();
 		this.addJsSelect();
		this.nestInRequestForm();
 		this.dropDownSelector = $('#'+this.dropDownName);
 		this.dropDownSelector.jScrollPane({showArrows:true, scrollbarWidth:42, dragMaxHeight:36, dragMinHeight:36,reinitialiseOnImageLoad:true});
 		this.dropDownSelector.parent().hide();
 		this.addHeaderClickEvent();
 		this.addSelectItemsClickEvent();
 		this.updateHeaderText();
		this.setDimensions();
 		this.debug(this.dropDownName);
		this.debug(this.dropDownSelector);
 	}
 	
 	this.getName = function(){
 		return this.dropDownName;
 	}
 	
 	this.setDimensions = function(){
 		var parentInnerWidth = this.dropDownSelector.parent().parent().innerWidth()
 		var dropDownWidth = parentInnerWidth - 42 ;
 	 	this.debug(parentInnerWidth);
 	 	this.debug(dropDownWidth);
 	 	this.dropDownSelector.parent().css('width',parentInnerWidth -2);
 	 	this.dropDownSelector.css('width',dropDownWidth);
 	 	this.dropDownSelector.parent().css('z-index',970-this.index); //if there are more than one drop downs right above each other
 	}
 	
 	this.hideFormField = function(){
		this.selectElement.hide();
 	}
 	
 	this.addJsSelect = function(){
 		var heightHack = "";
 		if(this.getName() == "eventTypeJS")
 			heightHack = 'style="height:230px !important;"';
 		
 		this.selectElement.after('<div class="combobox">\
 									<div class="head">Hallo welt</div>\
 									<div id="'+this.dropDownName+'" class="scroll-pane" '+heightHack+'>\
 									'+this.buildSelectElements()+'\
									</div>\
								</div>');
 	
 		
 	}
 	
 	
 	/*
 	*	Removes some styles that are not needed for this dropDown
 	*/
 	this.nestInRequestForm = function(){
 		if(this.selectElement.parent().hasClass('form-input-inner'))
 			this.selectElement.parent().removeClass('form-input-inner');
 		if(this.selectElement.parent().parent().hasClass('form-input'))
 			this.selectElement.parent().parent().css('border','none');
 	}
 	
 	this.addHeaderClickEvent = function(){
 		this.dropDownSelector.parent().prev('div').click(function(){
 			self.toggleDropDown();
 		});
 	
 	}
 	
 	this.addSelectItemsClickEvent = function() {
 		$('#'+this.dropDownName+' p').each(function(index,object){
 			$(object).click(function(){
 				self.elementClicked($(object));
 			});
 		});
 	}
 	
 	
 	this.buildSelectElements = function(){
 		var tmp = "";
 		this.selectElement.children().each(function(index, object){
 			tmp += '<p value="'+$(object).val()+'">'+$(object).html()+'</p>';
 		});
 		
 		return tmp;
 	
 	}
 	
 	this.elementClicked = function(obj){
 		this.debug(obj.attr('value'));
 		this.toggleDropDown();
 		this.debug(this.selectElement.find('option[value='+obj.attr('value')+']').html() + ":" + this.selectElement.find('option[value='+obj.attr('value')+']').val());
		this.selectElement.val(obj.attr('value'));
		
		//Populate events to the world
		this.selectElement.trigger('change');
		this.selectElement.trigger('focusout');
		
		this.updateHeaderText();
 	}
 	
 	this.updateHeaderText = function(){
 		this.dropDownSelector.parent().prev('div').html(this.selectElement.find('option:selected').text());
 		if(this.selectElement.find('option:selected').attr('disabled'))
 			this.dropDownSelector.parent().prev('div').css('color','#999999');
 		else
 			this.dropDownSelector.parent().prev('div').css('color','#873058');
 		 		
 		this.debug(this.dropDownSelector.parent().prev('div').html());
 	}
 	
 	this.makeMeError = function(){
 		this.dropDownSelector.parent().prev('div').addClass('error');
 		
 		this.debug("makeMeError");
 	}
 	
 	this.makeMeNoError = function(){
 		 this.dropDownSelector.parent().prev('div').removeClass('error');
 		 
 		 this.debig('makeMeNoError');
 	}
 	
 	this.toggleDropDown = function(){
 		if(this.visible)
 			this.hideDropDown();
 		else
 			this.showDropDown();
 	}
 	
 	this.hideDropDown = function(){
 		$('body').unbind('click');
 		this.visible = false;
 		this.debug('show:' + this.visible);
 		
 		this.dropDownSelector.parent().hide();
 		return;
 	}
 	
 	this.showDropDown = function(){
		this.visible = true;
 		this.debug('show:' + this.visible);
 		this.dropDownSelector.parent().show(10,function(){;
	 		$('body').bind('click',function(event){
	 			try{	
	 				var evt=window.event || (event)
 					if (!evt.target) //if event obj doesn't support e.target, presume it does e.srcElement
  						evt.target=evt.srcElement //extend obj with custom e.target prop
	 				//alert($(evt.target).html());
	 				
	 				if(!$(evt.target).hasClass('jScrollPaneDrag') && !$(evt.target).html()=='')
			 			self.hideDropDown();
			 		
			 		}catch(e){
			 			//do nothing
			 		}
			 			
			 	});
		 });		
 	}
 	
 	this.debug = function(msg){
 		if(showDebug)
 			console.log(msg);
 	
 	}
 	
 }