https://lausd.yumyummi.com/resources/dropdown_master/js/jquery.dd.js

1// MSDropDown - jquery.dd.js
2// author: Marghoob Suleman - http://www.marghoobsuleman.com/
3// Date: 10 Nov, 2012 
4// Version: 3.5.2
5// Revision: 27
6// web: www.marghoobsuleman.com
7/*
8// msDropDown is free jQuery Plugin: you can redistribute it and/or modify
9// it under the terms of the either the MIT License or the Gnu General Public License (GPL) Version 2
10*/ 
11var msBeautify = msBeautify || {};
12(function ($) {
13	msBeautify = {
14	version: {msDropdown:'3.5.2'},
15	author: "Marghoob Suleman",
16	counter: 20,
17	debug: function (v) {
18		if (v !== false) {
19			$(".ddOutOfVision").css({height: 'auto', position: 'relative'});
20		} else {
21			$(".ddOutOfVision").css({height: '0px', position: 'absolute'});
22		}
23	},
24	oldDiv: '',
25	create: function (id, settings, type) {
26		type = type || "dropdown";
27		var data;
28		switch (type.toLowerCase()) {
29		case "dropdown":
30		case "select":
31			data = $(id).msDropdown(settings).data("dd");
32			break;
33		}
34		return data;
35	}
36};
37
38$.msDropDown = {}; //Legacy
39$.msDropdown = {}; //camelCaps
40$.extend(true, $.msDropDown, msBeautify);
41$.extend(true, $.msDropdown, msBeautify);
42// make compatibiliy with old and new jquery
43if ($.fn.prop === undefined) {$.fn.prop = $.fn.attr;}
44if ($.fn.on === undefined) {$.fn.on = $.fn.bind;$.fn.off = $.fn.unbind;}
45if (typeof $.expr.createPseudo === 'function') {
46	//jQuery 1.8  or greater
47	$.expr[':'].Contains = $.expr.createPseudo(function (arg) {return function (elem) { return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0; }; });
48} else {
49	//lower version
50	$.expr[':'].Contains = function (a, i, m) {return $(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0; };
51}
52//dropdown class
53function dd(element, settings) {
54	var settings = $.extend(true,
55		{byJson: {data: null, selectedIndex: 0, name: null, size: 0, multiple: false, width: 250},
56		mainCSS: 'dd',
57		height: 120, //not using currently
58		visibleRows: 7,
59		rowHeight: 0,
60		showIcon: true,
61		zIndex: 9999,
62		useSprite: false,
63		animStyle: 'slideDown',
64		event:'click',
65		openDirection: 'auto', //auto || alwaysUp || alwaysDown
66		jsonTitle: true,
67		style: '',
68		disabledOpacity: 0.7,
69		disabledOptionEvents: true,
70		childWidth:0,
71		enableCheckbox:false, //this needs to multiple or it will set element to multiple
72		checkboxNameSuffix:'_mscheck',
73		append:'',
74		prepend:'',
75		reverseMode:true, //it will update the msdropdown UI/value if you update the original dropdown - will be usefull if are using knockout.js or playing with original dropdown
76		roundedCorner:true,
77		enableAutoFilter:true,
78		on: {create: null,open: null,close: null,add: null,remove: null,change: null,blur: null,click: null,dblclick: null,mousemove: null,mouseover: null,mouseout: null,focus: null,mousedown: null,mouseup: null}
79		}, settings);								  
80	var $this = this; //this class	 
81	var holderId = {postElementHolder: '_msddHolder', postID: '_msdd', postTitleID: '_title',postTitleTextID: '_titleText', postChildID: '_child'};
82	var css = {dd:settings.mainCSS, ddTitle: 'ddTitle', arrow: 'ddArrow arrowoff', ddChild: 'ddChild', ddTitleText: 'ddTitleText',disabled: 'disabled', enabled: 'enabled', ddOutOfVision: 'ddOutOfVision', borderTop: 'borderTop', noBorderTop: 'noBorderTop', selected: 'selected', divider: 'divider', optgroup: "optgroup", optgroupTitle: "optgroupTitle", description: "description", label: "ddlabel",hover: 'hover',disabledAll: 'disabledAll'};
83	var css_i = {li: '_msddli_',borderRadiusTp: 'borderRadiusTp',ddChildMore: 'border shadow',fnone: "fnone"};
84	var isList = false, isMultiple=false,isDisabled=false, cacheElement = {}, element, orginial = {}, isOpen=false;
85	var DOWN_ARROW = 40, UP_ARROW = 38, LEFT_ARROW=37, RIGHT_ARROW=39, ESCAPE = 27, ENTER = 13, ALPHABETS_START = 47, SHIFT=16, CONTROL = 17, BACKSPACE=8, DELETE=46;
86	var shiftHolded=false, controlHolded=false,lastTarget=null,forcedTrigger=false, oldSelected, isCreated = false;
87	var doc = document, ua = window.navigator.userAgent, isIE = ua.match(/msie/i);
88	settings.reverseMode = settings.reverseMode.toString();
89	settings.roundedCorner = settings.roundedCorner.toString();
90	var isArray = function(obj) {
91		return (Object.prototype.toString.call(obj)=="[object Array]") ? true : false;

92	};
93	var msieversion = function()
94   	{      
95      var msie = ua.indexOf("MSIE");
96      if ( msie > 0 ) {      // If Internet Explorer, return version number
97         return parseInt (ua.substring (msie+5, ua.indexOf (".", msie)));
98	  } else {                // If another browser, return 0
99         return 0;
100	  };
101   	};
102	var checkDataSetting = function() {
103		settings.mainCSS = $("#"+element).data("maincss") || settings.mainCSS;
104		settings.visibleRows = $("#"+element).data("visiblerows") || settings.visibleRows;
105		if($("#"+element).data("showicon")==false) {settings.showIcon = $("#"+element).data("showicon");};
106		settings.useSprite = $("#"+element).data("usesprite") || settings.useSprite;
107		settings.animStyle = $("#"+element).data("animstyle") || settings.animStyle;
108		settings.event = $("#"+element).data("event") || settings.event;
109		settings.openDirection = $("#"+element).data("opendirection") || settings.openDirection;
110		settings.jsonTitle = $("#"+element).data("jsontitle") || settings.jsonTitle;
111		settings.disabledOpacity = $("#"+element).data("disabledopacity") || settings.disabledOpacity;
112		settings.childWidth = $("#"+element).data("childwidth") || settings.childWidth;
113		settings.enableCheckbox = $("#"+element).data("enablecheckbox") || settings.enableCheckbox;
114		settings.checkboxNameSuffix = $("#"+element).data("checkboxnamesuffix") || settings.checkboxNameSuffix;
115		settings.append = $("#"+element).data("append") || settings.append;
116		settings.prepend = $("#"+element).data("prepend") || settings.prepend;
117		settings.reverseMode = $("#"+element).data("reversemode") || settings.reverseMode;
118		settings.roundedCorner = $("#"+element).data("roundedcorner") || settings.roundedCorner;
119		settings.enableAutoFilter = $("#"+element).data("enableautofilter") || settings.enableAutoFilter;
120		
121		//make string
122		settings.reverseMode = settings.reverseMode.toString();
123		settings.roundedCorner = settings.roundedCorner.toString();
124		settings.enableAutoFilter = settings.enableAutoFilter.toString();
125	};	
126	var getElement = function(ele) {
127		if (cacheElement[ele] === undefined) {
128			cacheElement[ele] = doc.getElementById(ele);
129		}
130		return cacheElement[ele];
131	}; 	
132	var getIndex = function(opt) {
133		var childid = getPostID("postChildID"); 
134		return $("#"+childid + " li."+css_i.li).index(opt);
135	};
136	var createByJson = function() {
137		if (settings.byJson.data) {
138				var validData = ["description","image","title"];
139				try {
140					if (!element.id) {
141						element.id = "dropdown"+msBeautify.counter;
142					};
143					settings.byJson.data = eval(settings.byJson.data);
144					//change element
145					var id = "msdropdown"+(msBeautify.counter++);
146					var obj = {};
147					obj.id = id;
148					obj.name = settings.byJson.name || element.id; //its name
149					if (settings.byJson.size>0) {
150						obj.size = settings.byJson.size;
151					};
152					obj.multiple = settings.byJson.multiple;
153					var oSelect = createElement("select", obj);
154					for(var i=0;i<settings.byJson.data.length;i++) {
155						var current = settings.byJson.data[i];
156						var opt = new Option(current.text, current.value);
157						for(var p in current) { 
158							if (p.toLowerCase() != 'text') { 
159								var key = ($.inArray(p.toLowerCase(), validData)!=-1) ? "data-" : "";
160								opt.setAttribute(key+p, current[p]);
161							};
162						};
163						oSelect.options[i] = opt;
164					};
165					getElement(element.id).appendChild(oSelect);
166					oSelect.selectedIndex = settings.byJson.selectedIndex;
167					$(oSelect).css({width: settings.byJson.width+'px'});
168					//now change element for access other things
169					element = oSelect;
170				} catch(e) {
171					throw "There is an error in json data.";
172				};
173		};			
174	};
175	var init = function() {		
176		 //set properties
177		 createByJson();
178		if (!element.id) {
179			element.id = "msdrpdd"+(msBeautify.counter++);
180		};						
181		element = element.id;
182		$this.element = element;
183		checkDataSetting();		
184		isDisabled = getElement(element).disabled;
185		var useCheckbox = settings.enableCheckbox;
186		if(useCheckbox.toString()==="true") {
187			getElement(element).multiple = true;
188			settings.enableCheckbox = true;
189		};
190		isList = (getElement(element).size>1 || getElement(element).multiple==true) ? true : false;

191		//trace("isList "+isList);
192		if (isList) {isMultiple = getElement(element).multiple;};			
193		mergeAllProp();		
194		//create layout
195		createLayout();		
196		//set ui prop
197		updateProp("uiData", getDataAndUI());
198		updateProp("selectedOptions", $("#"+element +" option:selected"));
199		var childid = getPostID("postChildID");
200		oldSelected = $("#" + childid + " li." + css.selected);
201		
202		if(settings.reverseMode==="true") {
203			$("#"+element).on("change", function() {
204				setValue(this.selectedIndex);
205			});
206		};
207		//add refresh method
208		getElement(element).refresh = function(e) {
209			 $("#"+element).msDropdown().data("dd").refresh();
210		};
211
212	 };	
213	 /********************************************************************************************/	
214	var getPostID = function (id) {
215		return element+holderId[id];
216	};
217	var getInternalStyle = function(ele) {		 
218		 var s = (ele.style === undefined) ? "" : ele.style.cssText;
219		 return s;
220	};
221	var parseOption = function(opt) {
222		var imagePath = '', title ='', description='', value=-1, text='', className='', imagecss = '', index;
223		if (opt !== undefined) {
224			var attrTitle = opt.title || "";
225			//data-title
226			if (attrTitle!="") {
227				var reg = /^\{.*\}$/;
228				var isJson = reg.test(attrTitle);
229				if (isJson && settings.jsonTitle) {
230					var obj =  eval("["+attrTitle+"]");	
231				};				 
232				title = (isJson && settings.jsonTitle) ? obj[0].title : title;
233				description = (isJson && settings.jsonTitle) ? obj[0].description : description;
234				imagePath = (isJson && settings.jsonTitle) ? obj[0].image : attrTitle;
235				imagecss = (isJson && settings.jsonTitle) ? obj[0].imagecss : imagecss;
236				index = opt.index;
237			};
238
239			text = opt.text || '';
240			value = opt.value || '';
241			className = opt.className || "";
242			//ignore title attribute if playing with data tags
243			title = $(opt).prop("data-title") || $(opt).data("title") || (title || "");
244			description = $(opt).prop("data-description") || $(opt).data("description") || (description || "");
245			imagePath = $(opt).prop("data-image") || $(opt).data("image") || (imagePath || "");
246			imagecss = $(opt).prop("data-imagecss") || $(opt).data("imagecss") || (imagecss || "");
247			index = $(opt).index();
248		};
249		var o = {image: imagePath, title: title, description: description, value: value, text: text, className: className, imagecss:imagecss, index:index};
250		return o;
251	};	 
252	var createElement = function(nm, attr, html) {
253		var tag = doc.createElement(nm);
254		if (attr) {
255		 for(var i in attr) {
256			 switch(i) {
257				 case "style":
258					tag.style.cssText = attr[i];
259				 break;
260				 default:
261					tag[i]  = attr[i];
262				 break;
263			 };	
264		 };
265		};
266		if (html) {
267		 tag.innerHTML = html;
268		};
269		return tag;
270	};
271	 /********************************************************************************************/
272	  /*********************** <layout> *************************************/
273	var hideOriginal = function() {
274		var hidid = getPostID("postElementHolder");
275		if ($("#"+hidid).length==0) {			 
276			var obj = {style: 'height: 0px;overflow: hidden;position: absolute;',className: css.ddOutOfVision};	
277			obj.id = hidid;
278			var oDiv = createElement("div", obj);	
279			$("#"+element).after(oDiv);
280			$("#"+element).appendTo($("#"+hidid));
281		} else {
282			$("#"+hidid).css({height: 0,overflow: 'hidden',position: 'absolute'});
283		};
284		getElement(element).tabIndex = -1;
285	};
286	var createWrapper = function () {
287		var brdRds = (settings.roundedCorner == "true") ? " borderRadius" : "";
288		var obj = {
289			className: css.dd + " ddcommon"+brdRds
290		};
291		var intcss = getInternalStyle(getElement(element));
292		var w = $("#" + element).outerWidth();
293		obj.style = "width: " + w + "px;";
294		if (intcss.length > 0) {
295			obj.style = obj.style + "" + intcss;
296		};
297		obj.id = getPostID("postID");
298		obj.tabIndex = getElement(element).tabIndex;
299		var oDiv = createElement("div", obj);
300		return oDiv;
301	};
302	var createTitle = function () {
303		var selectedOption;
304		if(getElement(element).selectedIndex>=0) {
305			selectedOption = getElement(element).options[getElement(element).selectedIndex];
306		} else {
307			selectedOption = {value:'', text:''};
308		}
309		var spriteClass = "", selectedClass = "";
310		//check sprite
311		var useSprite = $("#"+element).data("usesprite");
312		if(useSprite) { settings.useSprite = useSprite; };
313		if (settings.useSprite != false) {
314			spriteClass = " " + settings.useSprite;
315			selectedClass = " " + selectedOption.className;
316		};
317		var brdRdsTp = (settings.roundedCorner == "true") ? " "+css_i.borderRadiusTp : "" ;
318		var oTitle = createElement("div", {className: css.ddTitle + spriteClass + brdRdsTp});
319		//divider
320		var oDivider = createElement("span", {className: css.divider});
321		//arrow
322		var oArrow = createElement("span", {className: css.arrow});
323		//title Text
324		var titleid = getPostID("postTitleID");
325		var oTitleText = createElement("span", {className: css.ddTitleText + selectedClass, id: titleid});
326	
327		var parsed = parseOption(selectedOption);
328		var arrowPath = parsed.image;
329		var sText = parsed.text || "";		
330		if (arrowPath != "" && settings.showIcon) {
331			var oIcon = createElement("img");
332			oIcon.src = arrowPath;
333			if(parsed.imagecss!="") {
334				oIcon.className = parsed.imagecss+" ";
335			};
336		};
337		var oTitleText_in = createElement("span", {className: css.label}, sText);
338		oTitle.appendChild(oDivider);
339		oTitle.appendChild(oArrow);
340		if (oIcon) {
341			oTitleText.appendChild(oIcon);
342		};
343		oTitleText.appendChild(oTitleText_in);
344		oTitle.appendChild(oTitleText);
345		var oDescription = createElement("span", {className: css.description}, parsed.description);
346		oTitleText.appendChild(oDescription);
347		return oTitle;
348	};
349	var createFilterBox = function () {
350		var tid = getPostID("postTitleTextID");
351		var brdRds = (settings.roundedCorner == "true") ? "borderRadius" : "";
352		var sText = createElement("input", {id: tid, type: 'text', value: '', autocomplete: 'off', className: 'text shadow '+brdRds, style: 'display: none'});
353		return sText;
354	};
355	var createChild = function (opt) {
356		var obj = {};
357		var intcss = getInternalStyle(opt);
358		if (intcss.length > 0) {obj.style = intcss; };
359		var css2 = (opt.disabled) ? css.disabled : css.enabled;
360		css2 = (opt.selected) ? (css2 + " " + css.selected) : css2;
361		css2 = css2 + " " + css_i.li;
362		obj.className = css2;
363		if (settings.useSprite != false) {
364			obj.className = css2 + " " + opt.className;
365		};
366		var li = createElement("li", obj);
367		var parsed = parseOption(opt);
368		if (parsed.title != "") {
369			li.title = parsed.title;
370		};
371		var arrowPath = parsed.image;
372		if (arrowPath != "" && settings.showIcon) {
373			var oIcon = createElement("img");
374			oIcon.src = arrowPath;
375			if(parsed.imagecss!="") {
376				oIcon.className = parsed.imagecss+" ";
377			};
378		};
379		if (parsed.description != "") {
380			var oDescription = createElement("span", {
381				className: css.description
382			}, parsed.description);
383		};
384		var sText = opt.text || "";
385		var oTitleText = createElement("span", {
386			className: css.label
387		}, sText);
388		//checkbox
389		if(settings.enableCheckbox===true) {
390			var chkbox = createElement("input", {
391			type: 'checkbox', name:element+settings.checkboxNameSuffix+'[]', value:opt.value||"", className:"checkbox"}); //this can be used for future
392			li.appendChild(chkbox);
393			if(settings.enableCheckbox===true) {
394				chkbox.checked = (opt.selected) ? true : false;

395			};
396		};
397		if (oIcon) {
398			li.appendChild(oIcon);
399		};
400		li.appendChild(oTitleText);
401		if (oDescription) {
402			li.appendChild(oDescription);
403		} else {
404			if (oIcon) {
405				oIcon.className = oIcon.className+css_i.fnone;
406			};
407		};
408		var oClear = createElement("div", {className: 'clear'});
409		li.appendChild(oClear);
410		return li;
411	};
412	var createChildren = function () {
413		var childid = getPostID("postChildID");
414		var obj = {className: css.ddChild + " ddchild_ " + css_i.ddChildMore, id: childid};
415		if (isList == false) {
416			obj.style = "z-index: " + settings.zIndex;
417		} else {
418			obj.style = "z-index:1";
419		};
420		var childWidth = $("#"+element).data("childwidth") || settings.childWidth;
421		if(childWidth) {
422			obj.style =  (obj.style || "") + ";width:"+childWidth;
423		};		
424		var oDiv = createElement("div", obj);
425		var ul = createElement("ul");
426		if (settings.useSprite != false) {
427			ul.className = settings.useSprite;
428		};
429		var allOptions = getElement(element).children;
430		for (var i = 0; i < allOptions.length; i++) {
431			var current = allOptions[i];
432			var li;
433			if (current.nodeName.toLowerCase() == "optgroup") {
434				//create ul
435				li = createElement("li", {className: css.optgroup});
436				var span = createElement("span", {className: css.optgroupTitle}, current.label);
437				li.appendChild(span);
438				var optChildren = current.children;
439				var optul = createElement("ul");
440				for (var j = 0; j < optChildren.length; j++) {
441					var opt_li = createChild(optChildren[j]);
442					optul.appendChild(opt_li);
443				};
444				li.appendChild(optul);
445			} else {
446				li = createChild(current);
447			};
448			ul.appendChild(li);
449		};
450		oDiv.appendChild(ul);		
451		return oDiv;
452	};
453	var childHeight = function (val) {
454		var childid = getPostID("postChildID");
455		if (val) {
456			if (val == -1) { //auto
457				$("#"+childid).css({height: "auto", overflow: "auto"});
458			} else {				
459				$("#"+childid).css("height", val+"px");
460			};
461			return false;
462		};
463		//else return height
464		var iHeight;
465		var totalOptions = getElement(element).options.length;
466		if (totalOptions > settings.visibleRows || settings.visibleRows) {
467			var firstLI = $("#" + childid + " li:first");
468			var margin = parseInt(firstLI.css("padding-bottom")) + parseInt(firstLI.css("padding-top"));
469			if(settings.rowHeight===0) {
470				$("#" + childid).css({visibility:'hidden',display:'block'}); //hack for first child
471				settings.rowHeight = Math.ceil(firstLI.height());
472				$("#" + childid).css({visibility:'visible'});
473				if(!isList || settings.enableCheckbox===true) {
474					$("#" + childid).css({display:'none'});
475				};
476			};
477			iHeight = ((settings.rowHeight + margin) * Math.min(settings.visibleRows,totalOptions)) + 3;
478		} else if (isList) {
479			iHeight = $("#" + element).height(); //get height from original element
480		};		
481		return iHeight;
482	};
483	var applyChildEvents = function () {
484		var childid = getPostID("postChildID");
485		$("#" + childid).on("click", function (e) {
486			if (isDisabled === true) return false;
487			//prevent body click
488			e.preventDefault();
489			e.stopPropagation();
490			if (isList) {
491				bind_on_events();
492			};
493		});
494		$("#" + childid + " li." + css.enabled).on("click", function (e) {
495			if(e.target.nodeName.toLowerCase() !== "input") {
496				close(this);
497			};
498		});
499		$("#" + childid + " li." + css.enabled).on("mousedown", function (e) {
500			if (isDisabled === true) return false;
501			oldSelected = $("#" + childid + " li." + css.selected);
502			lastTarget = this;
503			e.preventDefault();
504			e.stopPropagation();
505			//select current input
506			if(settings.enableCheckbox===true) {
507				if(e.target.nodeName.toLowerCase() === "input") {
508					controlHolded = true;
509				};	
510			};
511			if (isList === true) {
512				if (isMultiple) {					
513					if (shiftHolded === true) {
514						$(this).addClass(css.selected);
515						var selected = $("#" + childid + " li." + css.selected);
516						var lastIndex = getIndex(this);
517						if (selected.length > 1) {
518							var items = $("#" + childid + " li." + css_i.li);
519							var ind1 = getIndex(selected[0]);
520							var ind2 = getIndex(selected[1]);
521							if (lastIndex > ind2) {
522								ind1 = (lastIndex);
523								ind2 = ind2 + 1;
524							};
525							for (var i = Math.min(ind1, ind2); i <= Math.max(ind1, ind2); i++) {
526								var current = items[i];
527								if ($(current).hasClass(css.enabled)) {
528									$(current).addClass(css.selected);
529								};
530							};
531						};
532					} else if (controlHolded === true) {
533						$(this).toggleClass(css.selected); //toggle
534						if(settings.enableCheckbox===true) {
535							var checkbox = this.childNodes[0];
536							checkbox.checked = !checkbox.checked; //toggle
537						};
538					} else {
539						$("#" + childid + " li." + css.selected).removeClass(css.selected);
540						$("#" + childid + " input:checkbox").prop("checked", false);
541						$(this).addClass(css.selected);
542						if(settings.enableCheckbox===true) {
543							this.childNodes[0].checked = true;
544						};
545					};					
546				} else {
547					$("#" + childid + " li." + css.selected).removeClass(css.selected);
548					$(this).addClass(css.selected);
549				};
550				//fire event on mouseup
551			} else {
552				$("#" + childid + " li." + css.selected).removeClass(css.selected);
553				$(this).addClass(css.selected);
554			};		
555		});
556		$("#" + childid + " li." + css.enabled).on("mouseenter", function (e) {
557			if (isDisabled === true) return false;

558			e.preventDefault();
559			e.stopPropagation();
560			if (lastTarget != null) {
561				if (isMultiple) {
562					$(this).addClass(css.selected);
563					if(settings.enableCheckbox===true) {
564						this.childNodes[0].checked = true;
565					};
566				};
567			};
568		});
569	
570		$("#" + childid + " li." + css.enabled).on("mouseover", function (e) {
571			if (isDisabled === true) return false;
572			$(this).addClass(css.hover);
573		});
574		$("#" + childid + " li." + css.enabled).on("mouseout", function (e) {
575			if (isDisabled === true) return false;
576			$("#" + childid + " li." + css.hover).removeClass(css.hover);
577		});
578	
579		$("#" + childid + " li." + css.enabled).on("mouseup", function (e) {
580			if (isDisabled === true) return false;
581			e.preventDefault();
582			e.stopPropagation();
583			if(settings.enableCheckbox===true) {
584				controlHolded = false;
585			};
586			var selected = $("#" + childid + " li." + css.selected).length;			
587			forcedTrigger = (oldSelected.length != selected || selected == 0) ? true : false;	
588			fireAfterItemClicked();
589			unbind_on_events(); //remove old one
590			bind_on_events();
591			lastTarget = null;
592		});
593	
594		/* options events */
595		if (settings.disabledOptionEvents == false) {
596			$("#" + childid + " li." + css_i.li).on("click", function (e) {
597				if (isDisabled === true) return false;
598				fireOptionEventIfExist(this, "click");
599			});
600			$("#" + childid + " li." + css_i.li).on("mouseenter", function (e) {
601				if (isDisabled === true) return false;
602				fireOptionEventIfExist(this, "mouseenter");
603			});
604			$("#" + childid + " li." + css_i.li).on("mouseover", function (e) {
605				if (isDisabled === true) return false;
606				fireOptionEventIfExist(this, "mouseover");
607			});
608			$("#" + childid + " li." + css_i.li).on("mouseout", function (e) {
609				if (isDisabled === true) return false;
610				fireOptionEventIfExist(this, "mouseout");
611			});
612			$("#" + childid + " li." + css_i.li).on("mousedown", function (e) {
613				if (isDisabled === true) return false;
614				fireOptionEventIfExist(this, "mousedown");
615			});
616			$("#" + childid + " li." + css_i.li).on("mouseup", function (e) {
617				if (isDisabled === true) return false;
618				fireOptionEventIfExist(this, "mouseup");
619			});
620		};
621	};
622	var removeChildEvents = function () {
623		var childid = getPostID("postChildID");
624		$("#" + childid).off("click");
625		$("#" + childid + " li." + css.enabled).off("mouseenter");
626		$("#" + childid + " li." + css.enabled).off("click");
627		$("#" + childid + " li." + css.enabled).off("mouseover");
628		$("#" + childid + " li." + css.enabled).off("mouseout");
629		$("#" + childid + " li." + css.enabled).off("mousedown");
630		$("#" + childid + " li." + css.enabled).off("mouseup");
631	};
632	var triggerBypassingHandler = function (id, evt_n, handler) {
633		$("#" + id).off(evt_n, handler);
634		$("#" + id).trigger(evt_n);
635		$("#" + id).on(evt_n, handler);
636	};
637	var applyEvents = function () {
638		var id = getPostID("postID");
639		var tid = getPostID("postTitleTextID");
640		var childid = getPostID("postChildID");		
641		$("#" + id).on(settings.event, function (e) {			
642			if (isDisabled === true) return false;
643			fireEventIfExist(settings.event);
644			//prevent body click
645			e.preventDefault();
646			e.stopPropagation();
647			open(e);
648		});
649		$("#" + id).on("keydown", function (e) {
650			var k = e.which;
651			if (!isOpen && (k == ENTER || k == UP_ARROW || k == DOWN_ARROW ||
652				k == LEFT_ARROW || k == RIGHT_ARROW ||
653				(k >= ALPHABETS_START && !isList))) {
654				open(e);
655				if (k >= ALPHABETS_START) {
656					showFilterBox();
657				} else {
658					e.preventDefault();
659					e.stopImmediatePropagation();
660				};
661			};
662		});
663		$("#" + id).on("focus", wrapperFocusHandler);
664		$("#" + id).on("blur", wrapperBlurHandler);
665		$("#" + tid).on("blur", function (e) {
666			//return focus to the wrapper without triggering the handler
667			triggerBypassingHandler(id, "focus", wrapperFocusHandler);
668		});
669		applyChildEvents();		
670		$("#" + id).on("dblclick", on_dblclick);
671		$("#" + id).on("mousemove", on_mousemove);
672		$("#" + id).on("mouseenter", on_mouseover);
673		$("#" + id).on("mouseleave", on_mouseout);
674		$("#" + id).on("mousedown", on_mousedown);
675		$("#" + id).on("mouseup", on_mouseup);
676	};
677	var wrapperFocusHandler = function (e) {
678		fireEventIfExist("focus");
679	};
680	var wrapperBlurHandler = function (e) {
681		fireEventIfExist("blur");
682	};
683	//after create
684	var fixedForList = function () {
685		var id = getPostID("postID");
686		var childid = getPostID("postChildID");		
687		if (isList === true && settings.enableCheckbox===false) {
688			$("#" + id + " ." + css.ddTitle).hide();
689			$("#" + childid).css({display: 'block', position: 'relative'});	
690			//open();
691		} else {
692			if(settings.enableCheckbox===false) {
693				isMultiple = false; //set multiple off if this is not a list
694			};
695			$("#" + id + " ." + css.ddTitle).show();
696			$("#" + childid).css({display: 'none', position: 'absolute'});
697			//set value
698			var first = $("#" + childid + " li." + css.selected)[0];
699			$("#" + childid + " li." + css.selected).removeClass(css.selected);
700			var index = getIndex($(first).addClass(css.selected));
701			setValue(index);
702		};
703		childHeight(childHeight()); //get and set height 
704	};
705	var fixedForDisabled = function () {
706		var id = getPostID("postID");
707		var opc = (isDisabled == true) ? settings.disabledOpacity : 1;
708		if (isDisabled === true) {
709			$("#" + id).addClass(css.disabledAll);
710		} else {
711			$("#" + id).removeClass(css.disabledAll);
712		};
713	};
714	var fixedSomeUI = function () {
715		//auto filter
716		var tid = getPostID("postTitleTextID");
717		if(settings.enableAutoFilter=="true") {
718			$("#" + tid).on("keyup", applyFilters);
719		};
720		//if is list
721		fixedForList();
722		fixedForDisabled();
723	};
724	var createLayout = function () {		
725		var oDiv = createWrapper();
726		var oTitle = createTitle();
727		oDiv.appendChild(oTitle);
728		//auto filter box
729		var oFilterBox = createFilterBox();
730		oDiv.appendChild(oFilterBox);
731	
732		var oChildren = createChildren();
733		oDiv.appendChild(oChildren);
734		$("#" + element).after(oDiv);
735		hideOriginal(); //hideOriginal
736		fixedSomeUI();
737		applyEvents();
738		
739		var childid = getPostID("postChildID");
740		//append
741		if(settings.append!='') {
742			$("#" + childid).append(settings.append);
743		};
744		//prepend
745		if(settings.prepend!='') {
746			$("#" + childid).prepend(settings.prepend);
747		};		
748		if (typeof settings.on.create == "function") {
749			settings.on.create.apply($this, arguments);
750		};
751	};

752	var selectUI_LI = function(indexes) {
753		var childid = getPostID("postChildID");
754		$("#" + childid + " li." + css_i.li).removeClass(css.selected);
755		if(settings.enableCheckbox===true) {
756			$("#" + childid + " li." + css_i.li + " input.checkbox").prop("checked", false);
757		};
758		if(isArray(indexes)===true) {
759			for(var i=0;i<indexes.length;i++) {
760				updateNow(indexes[i]);
761			};
762		} else {
763			updateNow(indexes);
764		};
765		function updateNow(index) {
766			$($("#" + childid + " li." + css_i.li)[index]).addClass(css.selected);
767			if(settings.enableCheckbox===true) {
768				$($("#" + childid + " li." + css_i.li)[index]).find("input.checkbox").prop("checked", "checked");
769			};
770			
771		};
772	};
773	var selectMutipleOptions = function (bySelected, useIndexes) {
774		var childid = getPostID("postChildID");
775		var selected = bySelected || $("#" + childid + " li." + css.selected); //bySelected or by argument
776		for (var i = 0; i < selected.length; i++) {
777			var ind = (useIndexes===true) ? selected[i]  : getIndex(selected[i]);
778			getElement(element).options[ind].selected = "selected";
779		};
780		setValue(selected);
781	};
782	var fireAfterItemClicked = function () {
783		//console.log("fireAfterItemClicked")
784		var childid = getPostID("postChildID");
785		var selected = $("#" + childid + " li." + css.selected);		
786		if (isMultiple && (shiftHolded || controlHolded) || forcedTrigger) {
787			getElement(element).selectedIndex = -1; //reset old
788		};
789		var index;
790		if (selected.length == 0) {
791			index = -1;
792		} else if (selected.length > 1) {
793			//selected multiple
794			selectMutipleOptions(selected);
795		} else {
796			//if one selected
797			index = getIndex($("#" + childid + " li." + css.selected));
798		};		
799		if ((getElement(element).selectedIndex != index || forcedTrigger) && selected.length<=1) {			
800			forcedTrigger = false;			
801			var evt = has_handler("change");
802			getElement(element).selectedIndex = index;	
803			setValue(index);
804			//local
805			if (typeof settings.on.change == "function") {
806				var d = getDataAndUI();
807				settings.on.change(d.data, d.ui);
808			};			
809			$("#" + element).trigger("change");			
810		};
811	};
812	var setValue = function (index, byvalue) {
813		if (index !== undefined) {
814			var selectedIndex, value, selectedText;
815			if (index == -1) {
816				selectedIndex = -1;
817				value = "";
818				selectedText = "";
819				updateTitleUI(-1);
820			} else {
821				//by index or byvalue
822				if (typeof index != "object") {
823					var opt = getElement(element).options[index];
824					getElement(element).selectedIndex = index;
825					selectedIndex = index;
826					value = parseOption(opt);
827					selectedText = (index >= 0) ? getElement(element).options[index].text : "";
828					updateTitleUI(undefined, value);
829					value = value.value; //for bottom
830				} else {
831					//this is multiple or by option
832					selectedIndex = (byvalue && byvalue.index) || getElement(element).selectedIndex;
833					value = (byvalue && byvalue.value) || getElement(element).value;
834					selectedText = (byvalue && byvalue.text) || getElement(element).options[getElement(element).selectedIndex].text || "";
835					updateTitleUI(selectedIndex);
836					//check if this is multiple checkbox					
837				};
838			};			
839			updateProp("selectedIndex", selectedIndex);
840			updateProp("value", value);
841			updateProp("selectedText", selectedText);
842			updateProp("children", getElement(element).children);
843			updateProp("uiData", getDataAndUI());
844			updateProp("selectedOptions", $("#" + element + " option:selected"));
845		};
846	};
847	var has_handler = function (name) {
848		//True if a handler has been added in the html.
849		var evt = {byElement: false, byJQuery: false, hasEvent: false};
850		var obj = $("#" + element);
851		//console.log(name)
852		try {
853			//console.log(obj.prop("on" + name) + " "+name);
854			if (obj.prop("on" + name) !== null) {
855				evt.hasEvent = true;
856				evt.byElement = true;
857			};
858		} catch(e) {
859			//console.log(e.message);
860		}
861		// True if a handler has been added using jQuery.
862		var evs;
863		if (typeof $._data == "function") { //1.8
864			evs = $._data(obj[0], "events");
865		} else {
866			evs = obj.data("events");
867		};
868		if (evs && evs[name]) {
869			evt.hasEvent = true;
870			evt.byJQuery = true;
871		};
872		return evt;
873	};
874	var bind_on_events = function () {
875		unbind_on_events();
876		$("body").on("click", close);
877		//bind more events		 
878		$(document).on("keydown", on_keydown);
879		$(document).on("keyup", on_keyup);
880		//focus will work on this	 		 
881	};
882	var unbind_on_events = function () {

883		$("body").off("click", close);
884		//bind more events
885		$(document).off("keydown", on_keydown);
886		$(document).off("keyup", on_keyup);
887	};
888	var applyFilters = function (e) {
889		if(e.keyCode < ALPHABETS_START && e.keyCode!=BACKSPACE && e.keyCode!=DELETE) {
890			return false;
891		};
892		var childid = getPostID("postChildID");
893		var tid = getPostID("postTitleTextID");
894		var sText = getElement(tid).value;
895		if (sText.length == 0) {
896			$("#" + childid + " li:hidden").show(); //show if hidden
897			childHeight(childHeight());
898		} else {
899			$("#" + childid + " li").hide();
900			var items = $("#" + childid + " li:Contains('" + sText + "')").show();
901			if ($("#" + childid + " li:visible").length <= settings.visibleRows) {
902				childHeight(-1); //set autoheight
903			};
904			if (items.length > 0 && !isList || !isMultiple) {
905				$("#" + childid + " ." + css.selected).removeClass(css.selected);
906				$(items[0]).addClass(css.selected);
907			};	
908		};		
909		if (!isList) {
910			adjustOpen();
911		};
912	};
913	var showFilterBox = function () {
914		if(settings.enableAutoFilter=="true") {
915			var id = getPostID("postID");
916			var tid = getPostID("postTitleTextID");
917			if ($("#" + tid + ":hidden").length > 0 && controlHolded == false) {
918				$("#" + tid + ":hidden").show().val("");
919				//blur the wrapper without triggering the handler
920				triggerBypassingHandler(id, "blur", wrapperBlurHandler);
921				getElement(tid).focus();
922			};
923		};
924	};
925	var hideFilterBox = function () {
926		var tid = getPostID("postTitleTextID");
927		if ($("#" + tid + ":visible").length > 0) {
928			$("#" + tid + ":visible").hide();
929			getElement(tid).blur();
930		};
931	};
932	var on_keydown = function (evt) {
933		var tid = getPostID("postTitleTextID");
934		var childid = getPostID("postChildID");
935		switch (evt.keyCode) {
936			case DOWN_ARROW:
937			case RIGHT_ARROW:
938				evt.preventDefault();
939				evt.stopPropagation();
940				//hideFilterBox();
941				next();
942				break;
943			case UP_ARROW:
944			case LEFT_ARROW:
945				evt.preventDefault();
946				evt.stopPropagation();
947				//hideFilterBox();
948				previous();
949				break;
950			case ESCAPE:
951			case ENTER:
952				evt.preventDefault();
953				evt.stopPropagation();
954				close();
955				var selected = $("#" + childid + " li." + css.selected).length;	
956				forcedTrigger = (oldSelected.length != selected || selected == 0) ? true : false;				
957				fireAfterItemClicked();
958				unbind_on_events(); //remove old one				
959				lastTarget = null;			
960				break;
961			case SHIFT:
962				shiftHolded = true;
963				break;
964			case CONTROL:
965				controlHolded = true;
966				break;
967			default:
968				if (evt.keyCode >= ALPHABETS_START && isList === false) {
969					showFilterBox();
970				};
971				break;
972		};
973		if (isDisabled === true) return false;
974		fireEventIfExist("keydown");
975	};
976	var on_keyup = function (evt) {
977		switch (evt.keyCode) {
978			case SHIFT:
979				shiftHolded = false;
980				break;
981			case CONTROL:
982				controlHolded = false;
983				break;
984		};
985		if (isDisabled === true) return false;
986		fireEventIfExist("keyup");
987	};
988	var on_dblclick = function (evt) {
989		if (isDisabled === true) return false;
990		fireEventIfExist("dblclick");
991	};
992	var on_mousemove = function (evt) {
993		if (isDisabled === true) return false;
994		fireEventIfExist("mousemove");
995	};
996	
997	var on_mouseover = function (evt) {
998		if (isDisabled === true) return false;
999		evt.preventDefault();
1000		fireEventIfExist("mouseover");
1001	};
1002	var on_mouseout = function (evt) {
1003		if (isDisabled === true) return false;
1004		evt.preventDefault();
1005		fireEventIfExist("mouseout");
1006	};
1007	var on_mousedown = function (evt) {
1008		if (isDisabled === true) return false;
1009		fireEventIfExist("mousedown");
1010	};
1011	var on_mouseup = function (evt) {
1012		if (isDisabled === true) return false;
1013		fireEventIfExist("mouseup");
1014	};
1015	var option_has_handler = function (opt, name) {
1016		//True if a handler has been added in the html.
1017		var evt = {byElement: false, byJQuery: false, hasEvent: false};
1018		if ($(opt).prop("on" + name) != undefined) {
1019			evt.hasEvent = true;
1020			evt.byElement = true;
1021		};
1022		// True if a handler has been added using jQuery.
1023		var evs = $(opt).data("events");
1024		if (evs && evs[name]) {
1025			evt.hasEvent = true;
1026			evt.byJQuery = true;
1027		};
1028		return evt;
1029	};
1030	var fireOptionEventIfExist = function (li, evt_n) {
1031		if (settings.disabledOptionEvents == false) {
1032			var opt = getElement(element).options[getIndex(li)];
1033			//check if original has some
1034			if (option_has_handler(opt, evt_n).hasEvent === true) {
1035				if (option_has_handler(opt, evt_n).byElement === true) {
1036					opt["on" + evt_n]();
1037				};
1038				if (option_has_handler(opt, evt_n).byJQuery === true) {
1039					switch (evt_n) {
1040						case "keydown":
1041						case "keyup":
1042							//key down/up will check later
1043							break;
1044						default:
1045							$(opt).trigger(evt_n);
1046							break;
1047					};
1048				};
1049				return false;

1050			};
1051		};
1052	};
1053	var fireEventIfExist = function (evt_n) {
1054		//local
1055		if (typeof settings.on[evt_n] == "function") {
1056			settings.on[evt_n].apply(this, arguments);
1057		};
1058		//check if original has some
1059		if (has_handler(evt_n).hasEvent === true) {
1060			if (has_handler(evt_n).byElement === true) {
1061				getElement(element)["on" + evt_n]();
1062			} else if (has_handler(evt_n).byJQuery === true) {
1063				switch (evt_n) {
1064					case "keydown":
1065					case "keyup":
1066						//key down/up will check later
1067						break;
1068					default:
1069						$("#" + element).triggerHandler(evt_n);
1070						break;
1071				};
1072			};
1073			return false;
1074		};
1075	};
1076	/******************************* navigation **********************************************/
1077	var scrollToIfNeeded = function (opt) {
1078		var childid = getPostID("postChildID");
1079		//if scroll is needed
1080		opt = (opt !== undefined) ? opt : $("#" + childid + " li." + css.selected);
1081		if (opt.length > 0) {
1082			var pos = parseInt(($(opt).position().top));
1083			var ch = parseInt($("#" + childid).height());
1084			if (pos > ch) {
1085				var top = pos + $("#" + childid).scrollTop() - (ch/2);
1086				$("#" + childid).animate({scrollTop:top}, 500);
1087			};
1088		};
1089	};
1090	var next = function () {
1091		var childid = getPostID("postChildID");
1092		var items = $("#" + childid + " li:visible." + css_i.li);
1093		var selected = $("#" + childid + " li:visible." + css.selected);
1094		selected = (selected.length==0) ? items[0] : selected;
1095		var index = $("#" + childid + " li:visible." + css_i.li).index(selected);
1096		if ((index < items.length - 1)) {
1097			index = getNext(index);
1098			if (index < items.length) { //check again - hack for last disabled 
1099				if (!shiftHolded || !isList || !isMultiple) {
1100					$("#" + childid + " ." + css.selected).removeClass(css.selected);
1101				};
1102				$(items[index]).addClass(css.selected);
1103				updateTitleUI(index);
1104				if (isList == true) {
1105					fireAfterItemClicked();
1106				};
1107				scrollToIfNeeded($(items[index]));
1108			};
1109			if (!isList) {
1110				adjustOpen();
1111			};
1112		};	
1113		function getNext(ind) {
1114			ind = ind + 1;
1115			if (ind > items.length) {
1116				return ind;
1117			};
1118			if ($(items[ind]).hasClass(css.enabled) === true) {
1119				return ind;
1120			};
1121			return ind = getNext(ind);
1122		};
1123	};
1124	var previous = function () {
1125		var childid = getPostID("postChildID");
1126		var selected = $("#" + childid + " li:visible." + css.selected);
1127		var items = $("#" + childid + " li:visible." + css_i.li);
1128		var index = $("#" + childid + " li:visible." + css_i.li).index(selected[0]);
1129		if (index >= 0) {
1130			index = getPrev(index);
1131			if (index >= 0) { //check again - hack for disabled 
1132				if (!shiftHolded || !isList || !isMultiple) {
1133					$("#" + childid + " ." + css.selected).removeClass(css.selected);
1134				};
1135				$(items[index]).addClass(css.selected);
1136				updateTitleUI(index);
1137				if (isList == true) {
1138					fireAfterItemClicked();
1139				};
1140				if (parseInt(($(items[index]).position().top + $(items[index]).height())) <= 0) {
1141					var top = ($("#" + childid).scrollTop() - $("#" + childid).height()) - $(items[index]).height();
1142					$("#" + childid).animate({scrollTop: top}, 500);
1143				};
1144			};
1145			if (!isList) {
1146				adjustOpen();
1147			};
1148		};
1149	
1150		function getPrev(ind) {
1151			ind = ind - 1;
1152			if (ind < 0) {
1153				return ind;
1154			};
1155			if ($(items[ind]).hasClass(css.enabled) === true) {
1156				return ind;
1157			};
1158			return ind = getPrev(ind);
1159		};
1160	};
1161	var adjustOpen = function () {
1162		var id = getPostID("postID");
1163		var childid = getPostID("postChildID");
1164		var pos = $("#" + id).offset();
1165		var mH = $("#" + id).height();
1166		var wH = $(window).height();
1167		var st = $(window).scrollTop();
1168		var cH = $("#" + childid).height();
1169		var top = $("#" + id).height(); //this close so its title height
1170		var direction = settings.openDirection.toLowerCase();
1171		if (((wH + st) < Math.floor(cH + mH + pos.top) || direction == 'alwaysup') && direction != 'alwaysdown') {
1172			top = cH;
1173			$("#" + childid).css({top: "-" + top + "px", display: 'block', zIndex: settings.zIndex});			
1174			if(settings.roundedCorner == "true") {
1175				$("#" + id).removeClass("borderRadius borderRadiusTp").addClass("borderRadiusBtm");
1176			};
1177			var top = $("#" + childid).offset().top;
1178			if (top < -10) {
1179				$("#" + childid).css({top: (parseInt($("#" + childid).css("top")) - top + 20 + st) + "px", zIndex: settings.zIndex});
1180				if(settings.roundedCorner == "true") {
1181					$("#" + id).removeClass("borderRadiusBtm borderRadiusTp").addClass("borderRadius");
1182				};
1183			};
1184		} else {
1185			$("#" + childid).css({top: top + "px", zIndex: settings.zIndex});			
1186			if(settings.roundedCorner == "true") {
1187				$("#" + id).removeClass("borderRadius borderRadiusBtm").addClass("borderRadiusTp");
1188			};
1189		};
1190		//hack for ie zindex
1191		//i hate ie :D
1192		if(isIE) {
1193			if(msieversion()<=7) {
1194				$('div.ddcommon').css("zIndex", settings.zIndex-10);
1195				$("#" + id).css("zIndex", settings.zIndex+5);
1196			};
1197		};		
1198	};
1199	var open = function (e) {
1200		if (isDisabled === true) return false;

1201		var id = getPostID("postID");
1202		var childid = getPostID("postChildID");
1203		if (!isOpen) {
1204			isOpen = true;
1205			if (msBeautify.oldDiv != '') {
1206				$("#" + msBeautify.oldDiv).css({display: "none"}); //hide all 
1207			};
1208			msBeautify.oldDiv = childid;
1209			$("#" + childid + " li:hidden").show(); //show if hidden
1210			adjustOpen();
1211			var animStyle = settings.animStyle;
1212			if(animStyle=="" || animStyle=="none") {
1213				$("#" + childid).css({display:"block"});
1214				scrollToIfNeeded();
1215				if (typeof settings.on.open == "function") {
1216					var d = getDataAndUI();
1217					settings.on.open(d.data, d.ui);
1218				};
1219			} else {				
1220				$("#" + childid)[animStyle]("fast", function () {
1221					scrollToIfNeeded();
1222					if (typeof settings.on.open == "function") {
1223						var d = getDataAndUI();
1224						settings.on.open(d.data, d.ui);
1225					};
1226				});
1227			};
1228			bind_on_events();
1229		} else {
1230			if(settings.event!=='mouseover') {
1231				close();
1232			};
1233		};
1234	};
1235	var close = function (e) {
1236		isOpen = false;
1237		var id = getPostID("postID");
1238		var childid = getPostID("postChildID");
1239		if (isList === false || settings.enableCheckbox===true) {
1240			$("#" + childid).css({display: "none"});			
1241			if(settings.roundedCorner == "true") {
1242				$("#" + id).removeClass("borderRadiusTp borderRadiusBtm").addClass("borderRadius");
1243			};
1244		};
1245		unbind_on_events();
1246		if (typeof settings.on.close == "function") {
1247			var d = getDataAndUI();
1248			settings.on.close(d.data, d.ui);
1249		};
1250		//rest some old stuff
1251		hideFilterBox();
1252		childHeight(childHeight()); //its needed after filter applied
1253		$("#" + childid).css({zIndex:1});
1254		//update the title in case the user clicked outside
1255		updateTitleUI(getElement(element).selectedIndex);
1256	};
1257	/*********************** </layout> *************************************/	
1258	var mergeAllProp = function () {
1259		try {
1260			orginial = $.extend(true, {}, getElement(element));
1261			for (var i in orginial) {
1262				if (typeof orginial[i] != "function") {				
1263					$this[i] = orginial[i]; //properties
1264				};
1265			};
1266		} catch(e) {
1267			//silent
1268		};
1269		$this.selectedText = (getElement(element).selectedIndex >= 0) ? getElement(element).options[getElement(element).selectedIndex].text : "";		
1270		$this.version = msBeautify.version.msDropdown;
1271		$this.author = msBeautify.author;
1272	};
1273	var getDataAndUIByOption = function (opt) {
1274		if (opt != null && typeof opt != "undefined") {
1275			var childid = getPostID("postChildID");
1276			var data = parseOption(opt);
1277			var ui = $("#" + childid + " li." + css_i.li + ":eq(" + (opt.index) + ")");
1278			return {data: data, ui: ui, option: opt, index: opt.index};
1279		};
1280		return null;
1281	};
1282	var getDataAndUI = function () {
1283		var childid = getPostID("postChildID");
1284		var ele = getElement(element);
1285		var data, ui, option, index;
1286		if (ele.selectedIndex == -1) {
1287			data = null;
1288			ui = null;
1289			option = null;
1290			index = -1;
1291		} else {
1292			ui = $("#" + childid + " li." + css.selected);
1293			if (ui.length > 1) {
1294				var d = [], op = [], ind = [];
1295				for (var i = 0; i < ui.length; i++) {
1296					var pd = getIndex(ui[i]);
1297					d.push(pd);
1298					op.push(ele.options[pd]);
1299				};
1300				data = d;
1301				option = op;
1302				index = d;
1303			} else {
1304				option = ele.options[ele.selectedIndex];
1305				data = parseOption(option);
1306				index = ele.selectedIndex;
1307			};
1308		};
1309		return {data: data, ui: ui, index: index, option: option};
1310	};
1311	var updateTitleUI = function (index, byvalue) {
1312		var titleid = getPostID("postTitleID");
1313		var value = {};
1314		if (index == -1) {
1315			value.text = "&nbsp;";
1316			value.className = "";
1317			value.description = "";
1318			value.image = "";
1319		} else if (typeof index != "undefined") {
1320			var opt = getElement(element).options[index];
1321			value = parseOption(opt);
1322		} else {
1323			value = byvalue;
1324		};
1325		//update title and current
1326		$("#" + titleid).find("." + css.label).html(value.text);
1327		getElement(titleid).className = css.ddTitleText + " " + value.className;
1328		//update desction
1329		if (value.description != "") {
1330			$("#" + titleid).find("." + css.description).html(value.description).show();
1331		} else {
1332			$("#" + titleid).find("." + css.description).html("").hide();
1333		};
1334		//update icon
1335		var img = $("#" + titleid).find("img");
1336		if (img.length > 0) {
1337			$(img).remove();
1338		};
1339		if (value.image != "" && settings.showIcon) {
1340			img = createElement("img", {src: value.image});
1341			$("#" + titleid).prepend(img);
1342			if(value.imagecss!="") {
1343				img.className = value.imagecss+" ";
1344			};
1345			if (value.description == "") {
1346				img.className = img.className+css_i.fnone;
1347			};
1348		};
1349	};
1350	var updateProp = function (p, v) {
1351		$this[p] = v;
1352	};
1353	var updateUI = function (a, opt, i) { //action, index, opt
1354		var childid = getPostID("postChildID");
1355		var wasSelected = false;

1356		switch (a) {
1357			case "add":
1358				var li = createChild(opt || getElement(element).options[i]);				
1359				var index;
1360				if (arguments.length == 3) {
1361					index = i;
1362				} else {
1363					index = $("#" + childid + " li." + css_i.li).length - 1;
1364				};				
1365				if (index < 0 || !index) {
1366					$("#" + childid + " ul").append(li);
1367				} else {
1368					var at = $("#" + childid + " li." + css_i.li)[index];
1369					$(at).before(li);
1370				};
1371				removeChildEvents();
1372				applyChildEvents();
1373				if (settings.on.add != null) {
1374					settings.on.add.apply(this, arguments);
1375				};
1376				break;
1377			case "remove":
1378				wasSelected = $($("#" + childid + " li." + css_i.li)[i]).hasClass(css.selected);
1379				$("#" + childid + " li." + css_i.li + ":eq(" + i + ")").remove();
1380				var items = $("#" + childid + " li." + css.enabled);
1381				if (wasSelected == true) {
1382					if (items.length > 0) {
1383						$(items[0]).addClass(css.selected);
1384						var ind = $("#" + childid + " li." + css_i.li).index(items[0]);
1385						setValue(ind);
1386					};
1387				};
1388				if (items.length == 0) {
1389					setValue(-1);
1390				};
1391				if ($("#" + childid + " li." + css_i.li).length < settings.visibleRows && !isList) {
1392					childHeight(-1); //set autoheight
1393				};
1394				if (settings.on.remove != null) {
1395					settings.on.remove.apply(this, arguments);
1396				};
1397				break;
1398		};	
1399	};
1400	/************************** public methods/events **********************/
1401	this.act = function () {
1402		var action = arguments[0];
1403		Array.prototype.shift.call(arguments);
1404		switch (action) {
1405			case "add":
1406				$this.add.apply(this, arguments);
1407				break;
1408			case "remove":
1409				$this.remove.apply(this, arguments);
1410				break;
1411			default:
1412				try {
1413					getElement(element)[action].apply(getElement(element), arguments);
1414				} catch (e) {
1415					//there is some error.
1416				};
1417				break;
1418		};
1419	};
1420	
1421	this.add = function () {
1422		var text, value, title, image, description;
1423		var obj = arguments[0];		
1424		if (typeof obj == "string") {
1425			text = obj;
1426			value = text;
1427			opt = new Option(text, value);
1428		} else {
1429			text = obj.text || '';
1430			value = obj.value || text;
1431			title = obj.title || '';
1432			image = obj.image || '';
1433			description = obj.description || '';
1434			//image:imagePath, title:title, description:description, value:opt.value, text:opt.text, className:opt.className||""
1435			opt = new Option(text, value);
1436			$(opt).data("description", description);
1437			$(opt).data("image", image);
1438			$(opt).data("title", title);
1439		};
1440		arguments[0] = opt; //this option
1441		getElement(element).add.apply(getElement(element), arguments);
1442		updateProp("children", getElement(element)["children"]);
1443		updateProp("length", getElement(element).length);
1444		updateUI("add", opt, arguments[1]);
1445	};
1446	this.remove = function (i) {
1447		getElement(element).remove(i);
1448		updateProp("children", getElement(element)["children"]);
1449		updateProp("length", getElement(element).length);
1450		updateUI("remove", undefined, i);
1451	};
1452	this.set = function (prop, val) {
1453		if (typeof prop == "undefined" || typeof val == "undefined") return false;
1454		prop = prop.toString();
1455		try {
1456			updateProp(prop, val);
1457		} catch (e) {/*this is ready only */};
1458		switch (prop) {
1459			case "size":
1460				getElement(element)[prop] = val;
1461				if (val == 0) {
1462					getElement(element).multiple = false; //if size is zero multiple should be false
1463				};
1464				isList = (getElement(element).size > 1 || getElement(element).multiple == true) ? true : false;
1465				fixedForList();
1466				break;
1467			case "multiple":
1468				getElement(element)[prop] = val;
1469				isList = (getElement(element).size > 1 || getElement(element).multiple == true) ? true : false;
1470				isMultiple = getElement(element).multiple;
1471				fixedForList();
1472				updateProp(prop, val);
1473				break;
1474			case "disabled":
1475				getElement(element)[prop] = val;
1476				isDisabled = val;
1477				fixedForDisabled();
1478				break;
1479			case "selectedIndex":
1480			case "value":				
1481				if(prop=="selectedIndex" && isArray(val)===true) {
1482					$("#"+element +" option").prop("selected", false);
1483					selectMutipleOptions(val, true);
1484					selectUI_LI(val); //setValue is being called from selectMutipleOptions
1485				} else {
1486					getElement(element)[prop] = val;					
1487					selectUI_LI(getElement(element).selectedIndex);
1488					setValue(getElement(element).selectedIndex);
1489				};
1490				break;
1491			case "length":
1492				var childid = getPostID("postChildID");
1493				if (val < getElement(element).length) {
1494					getElement(element)[prop] = val;
1495					if (val == 0) {
1496						$("#" + childid + " li." + css_i.li).remove();
1497						setValue(-1);
1498					} else {
1499						$("#" + childid + " li." + css_i.li + ":gt(" + (val - 1) + ")").remove();
1500						if ($("#" + childid + " li." + css.selected).length == 0) {
1501							$("#" + childid + " li." + css.enabled + ":eq(0)").addClass(css.selected);
1502						};
1503					};
1504					updateProp(prop, val);
1505					updateProp("children", getElement(element)["children"]);
1506				};
1507				break;
1508			case "id":
1509				//please i need this. so preventing to change it. will work on this later
1510				break;
1511			default:
1512				//check if this is not a readonly properties
1513				try {
1514					getElement(element)[prop] = val;
1515					updateProp(prop, val);
1516				} catch (e) {
1517					//silent
1518				};
1519				break;
1520		};
1521	};
1522	this.get = function (prop) {
1523		return $this[prop] || getElement(element)[prop]; //return if local else from original
1524	};
1525	this.visible = function (val) {
1526		var id = getPostID("postID");		
1527		if (val === true) {
1528			$("#" + id).show();
1529		} else if (val === false) {
1530			$("#" + id).hide();
1531		} else {
1532			return ($("#" + id).css("display")=="none") ? false : true;
1533		};
1534	};
1535	this.debug = function (v) {
1536		msBeautify.debug(v);
1537	};
1538	this.close = function () {
1539		close();
1540	};
1541	this.open = function () {		
1542		open();
1543	};
1544	this.showRows = function (r) {
1545		if (typeof r == "undefined" || r == 0) {
1546			return false;

1547		};
1548		settings.visibleRows = r;
1549		childHeight(childHeight());
1550	};
1551	this.visibleRows = this.showRows;
1552	this.on = function (type, fn) {
1553		$("#" + element).on(type, fn);
1554	};
1555	this.off = function (type, fn) {
1556		$("#" + element).off(type, fn);
1557	};
1558	this.addMyEvent = this.on;
1559	this.getData = function () {
1560		return getDataAndUI()
1561	};
1562	this.namedItem = function () {
1563		var opt = getElement(element).namedItem.apply(getElement(element), arguments);
1564		return getDataAndUIByOption(opt);
1565	};
1566	this.item = function () {
1567		var opt = getElement(element).item.apply(getElement(element), arguments);
1568		return getDataAndUIByOption(opt);
1569	};	
1570	//v 3.2
1571	this.setIndexByValue = function(val) {
1572		this.set("value", val);
1573	};
1574	this.destroy = function () {
1575		var hidid = getPostID("postElementHolder");
1576		var id = getPostID("postID");
1577		$("#" + id + ", #" + id + " *").off();
1578		getElement(element).tabIndex = getElement(id).tabIndex;
1579		$("#" + id).remove();
1580		$("#" + element).parent().replaceWith($("#" + element));		
1581		$("#" + element).data("dd", null);
1582	};
1583	this.refresh = function() {
1584		setValue(getElement(element).selectedIndex);
1585	};
1586	//Create msDropDown	
1587	init();
1588};
1589//bind in jquery
1590$.fn.extend({
1591			msDropDown: function(settings)
1592			{
1593				return this.each(function()
1594				{
1595					if (!$(this).data('dd')){
1596						var mydropdown = new dd(this, settings);
1597						$(this).data('dd', mydropdown);
1598					};
1599				});
1600			}
1601});
1602$.fn.msDropdown = $.fn.msDropDown; //make a copy
1603})(jQuery);