SelectUIGroup = function () {
	this.selectObjsGroup = getElementsByClassName(arguments[0]);
	var direction = arguments[1] && arguments[1].direction ? arguments[1].direction : "up";
	new SelectUI(this.selectObjsGroup, arguments[0], direction).init();
}
/**/
SelectUI = function () {
    this.selects = new Array();
    this.selectObjs = arguments[0];
	this.globalClassName = arguments[1];
	this.direction = arguments[2];
    this.previous = null;
}
    SelectUI.prototype.init = function () {
        var self = this;
        for (var i in this.selectObjs) {
            this.selects[i] = new Select({
                selectObj: this.selectObjs[i],
                selectClassName: this.selectObjs[i].className.replace(this.globalClassName, ""),
                zIndex: 1000-i,
				direction: this.direction
            }, self);
        }
		
        for (var i in this.selects) {
            this.selects[i].init();
        }
    }
    
    SelectUI.prototype.setStatus = function () {
        var self = this;
        
        for (var i in self.selects) {
            if (self.selects[i].active) {
				if (self.previous == null) {
                	self.previous = self.selects[i];
				}
				else {
					self.previous.hide();
				}
            }
        }
		
		//Hide SelectUIObj when clicking outside
		document.onmousedown = function (e) {
			if (typeof(self.previous) != "undefined" && self.previous != null) {
				self.previous.hide();
				$(".WrapSelect").removeClass("WrapSelectOver");
			}
			//Cancel Bubling
			stopEventBubling(e);
		}
	}
	
	/* One select */
	Select = function () {
		this.options = {
			selectObj: arguments[0].selectObj ? arguments[0].selectObj : document.getElementById("selectUI"),
			selectClassName: arguments[0].selectClassName ? arguments[0].selectClassName : "SelectUIObj",
			zIndex: arguments[0].zIndex ? arguments[0].zIndex : "1000",
			direction: arguments[0].direction
		}
		this.callbackObj = arguments[1];
		this.callback = function (callbackObj) {
			callbackObj.setStatus();
		}
	}
	
		Select.prototype.init = function () {
			var self = this;
			this.active;
			
			//Hide the select
			this.options.selectObj.style.position = "absolute";
			this.options.selectObj.style.top = "-1000em";
			this.options.selectObj.style.left = "-1000em";
	
			//Create Container of The SelectObjList
			this.SelectUIObjContainer = document.createElement("div");
			this.SelectUIObjContainer.style.zIndex = this.options.zIndex;
			this.SelectUIObjContainer.className += " " +  this.options.selectClassName;
			this.SelectUIObjContainer.innerHTML = this.options.selectObj.title != "" ? "<p>" + this.options.selectObj.title + "</p>" : "<p>" + this.options.selectObj.value + "</p>";
			//wrapper
			this.wrapper = document.createElement("div");
			this.wrapper.className = "WrapSelect";
			this.options.selectObj.parentNode.insertBefore(this.wrapper, this.options.selectObj);
			this.wrapper.appendChild(this.SelectUIObjContainer);
			//this.options.selectObj.parentNode.insertBefore(this.SelectUIObjContainer, this.options.selectObj);
			this.SelectUIObjContainer.style.position = (/(relative|absolute|fixed)/).test(getStyle(this.SelectUIObjContainer, "position")) ? getStyle(this.SelectUIObjContainer, "position") : "relative";
			
			//Create SelectObjList corresponsing to the select's values
			this.SelectUIObjList = document.createElement("ul");
			for (var i=0 ; i < this.options.selectObj.options.length ; i++) {
				var SelectUIObjList_Element = document.createElement("li");
				SelectUIObjList_Element.innerHTML ='<a target="_blank" style="color: #797979; text-decoration: none;" href="'+this.options.selectObj.options[i].value+'">' + this.options.selectObj.options[i].innerHTML+'</a>';
				this.SelectUIObjList.appendChild(SelectUIObjList_Element);
			}
			this.SelectUIObjContainer.appendChild(this.SelectUIObjList);
			//this.SelectUIObjContainer.style.width = this.SelectUIObjList.offsetWidth + 30 + "px";
			this.SelectUIObjContainer.style.width = "150px";
			//this.SelectUIObjList.style.width = this.SelectUIObjContainer.offsetWidth - 4 + "px";
			this.SelectUIObjList.style.width = "146px";
			this.SelectUIObjListHeight = this.SelectUIObjList.offsetHeight;

			//Hide the SelectUIObjList
			this.hide();
			
			//Styling SelectUIObjLis
			this.SelectUIObjList.style.position = "absolute";
			this.SelectUIObjList.style.zIndex = this.options.zIndex;
			
	
			//AddEvent to SelectObjList_Element
			for (var i=0 ; i < this.SelectUIObjList.getElementsByTagName("li").length ; i++) {
				this.SelectUIObjList.getElementsByTagName("li")[i].style.cursor = "pointer";
				this.SelectUIObjList.getElementsByTagName("li")[i].onclick = function (e) {
					self.updatedToSelect(this); //TODO...i = 4 always !!!
					//Cancel Bubling
					stopEventBubling(e);
				}
				this.SelectUIObjList.getElementsByTagName("li")[i].onmouseover = function () {
					if (!(/Hover/).test(this.className)) {
						this.className += " Hover";
					}
				}
				this.SelectUIObjList.getElementsByTagName("li")[i].onmouseout = function () {
					if ((/Hover/).test(this.className)) {
						this.className = this.className.replace(/Hover/, "");
					}
				}
				this.SelectUIObjList.getElementsByTagName("li")[i].onmousedown = function (e) {
					//Cancel Bubling
					stopEventBubling(e);
					return false;
				}
			}
			
			//AddEvent to Select > Option
			for (var i=0 ; i < this.options.selectObj.options.length ; i++) {
				this.options.selectObj.onchange = function () {
					self.updatedToSelectUIObj();
				}
			}
			
			//Change the status of SelectUIObjList when mouseup and out of it
			this.SelectUIObjContainer.onmouseup = function (e) {
				if (/MouseDown/.test(this.className)) {
					this.className = this.className.replace(/MouseDown/, "");
				}
				//Cancel Bubling
				stopEventBubling(e);
				return false;
			}
			this.SelectUIObjContainer.onmouseout = function (e) {
				if (/MouseDown/.test(this.className)) {
					this.className = this.className.replace(/MouseDown/, "");
				}
				
				//Cancel Bubling
				stopEventBubling(e);
			}
			
			//Display the SelectUIObjList when clicking on the title bar
			this.SelectUIObjContainer.onmousedown = function (e) {
				if (self.active) {  //HIDE
					self.hide();
					$(".WrapSelect").removeClass("WrapSelectOver");
				}
				else { //SHOW
					if (!(/MouseDown/.test(this.className))) {
						this.className += " MouseDown";
					}
					self.show();
					$(".WrapSelect").addClass(" WrapSelectOver");
				}
				
				//Cancel Bubling
				stopEventBubling(e);
			}
		}
		
		//Update selected data from SelectUIObj to original select
		Select.prototype.updatedToSelect = function (el, value) {
			//Updated to the SelectUIObj title
			//this.SelectUIObjContainer.getElementsByTagName("p")[0].innerHTML = el.innerHTML;
			
			//Updated to the original select
			for (var i = 0 ; i < this.options.selectObj.length ; i++) {
				if (this.options.selectObj.options[i].innerHTML == el.innerHTML) {
					this.options.selectObj.value = this.options.selectObj.options[i].value;
					break;
				}
			}
			
			//Hide the SelectUIObjList
			this.hide();
			$(".WrapSelect").removeClass("WrapSelectOver");
		}
		
		//Update selected data from original select to SelectUIObj
		Select.prototype.updatedToSelectUIObj = function () {
			//Updated to the SelectUIObj title
			this.SelectUIObjContainer.getElementsByTagName("p")[0].innerHTML = this.options.selectObj.value;
						
			//Hide the SelectUIObjList
			this.hide();
			$(".WrapSelect").removeClass("WrapSelectOver");
		}
		
		//Hide the SelectUIObjList
		Select.prototype.hide = function () {
			this.SelectUIObjList.style.display = "none";
			this.active = false;
			/**/
			this.callbackObj.previous = null;
			this.callback(this.callbackObj);
		}
		
		//Show the SelectUIObjList
		Select.prototype.show = function () {
			if (this.SelectUIObjListHeight > document.documentElement.scrollTop + document.documentElement.clientHeight - findAbsPos(this.SelectUIObjContainer.parentNode).top - this.SelectUIObjContainer.parentNode.offsetHeight || this.options.direction == "up") {
				this.SelectUIObjList.style.top = "";
				this.SelectUIObjList.style.bottom = this.SelectUIObjContainer.parentNode.offsetHeight + "px";	
			}
			else {
				this.SelectUIObjList.style.bottom = ""; //reset bottom
				//this.SelectUIObjList.style.top = "100%";
			}
			this.SelectUIObjList.style.display = "block";
			this.active = true;
			this.callback(this.callbackObj);
		}
		
/* Misc functions */
function getElementsByClassName (className) {
    var children = document.getElementsByTagName('*') || document.all;
    var elements = new Array();
  
    for (var i = 0; i < children.length; i++) {
        var child = children[i];
        var classNames = child.className.split(' ');
        for (var j = 0; j < classNames.length; j++) {
            if (classNames[j] == className) {
                elements.push(child);
                break;
            }
        }
    }
    return elements;
}

//Cancel Bubling
function stopEventBubling (e) {
	if (!e) e = window.event;
	if (e.stopPropagation) {
		e.stopPropagation();
	}
	else {
		e.cancelBubble = true;
	}
}

//Change CSS style to DOM style
function DOMStyle (styleProp) {
	parseString = styleProp.split("-");
	styleProp = "";
	for (var i = 1 ; i < parseString.length ; i++) {
		parseString[i] = parseString[i].replace(parseString[i].charAt(0), parseString[i].charAt(0).toUpperCase());
	}
	for (var i = 0 ; i < parseString.length ; i++) {
		styleProp += parseString[i];
	}
	return styleProp;
}

function getStyle (element, styleProp) {
    if (element.currentStyle) {
		styleProp = DOMStyle(styleProp);
        var value = element.currentStyle[styleProp];
    }
    else {
        if (window.getComputedStyle) {
        	var value = document.defaultView.getComputedStyle(element,null).getPropertyValue(styleProp);
		}
    }
    return value;
}

function findAbsPos(obj) {
	var curleft = curtop = 0;
		if (obj.offsetParent) {
			do {
				curleft += obj.offsetLeft;
				curtop += obj.offsetTop;
			} while (obj = obj.offsetParent);
	}
	return {left: curleft, top: curtop};
}