// JavaScript Document/* SELECT OBJECT */
/*
	*SelectUI will be created to replace for the original select and sync each other
	*SelectUI will be created and inserted before the original select :
		<div> : SelectUI
		<select> : original select
*/
SelectUIGroup = function () {
	this.selectObjsGroup = getElementsByClassName(arguments[0]);
	new SelectUI(this.selectObjsGroup, arguments[0]).init();
}
/**/
SelectUI = function () {
    this.selects = new Array();
    this.selectObjs = arguments[0];
	this.globalCalssName = arguments[1];
    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.globalCalssName, ""),
                zIndex: 1000-i
            }, 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();
			}
			//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 : "10000"
		}
		this.callbackObj = arguments[1];
		this.callback = function (callbackObj) {
			callbackObj.setStatus();
		}
	}
	
		/*method*/
		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>";
			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 = this.options.selectObj.options[i].innerHTML;
				this.SelectUIObjList.appendChild(SelectUIObjList_Element);
			}
			this.SelectUIObjContainer.appendChild(this.SelectUIObjList);
			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 (/SelectMouseDown/.test(this.className)) {
					this.className = this.className.replace(/SelectMouseDown/, "");
				}
				//Cancel Bubling
				stopEventBubling(e);
				return false;
			}
			this.SelectUIObjContainer.onmouseout = function (e) {
				if (/MouseDown/.test(this.className)) {
					this.className = this.className.replace(/SelectMouseDown/, "");
				}
				
				//Cancel Bubling
				stopEventBubling(e);
			}
			
			//Display the SelectUIObjList when clicking on the title bar
			this.SelectUIObjContainer.onmousedown = function (e) {
				if (self.active) {  //HIDE
					self.hide();
				}
				else { //SHOW
					if (!(/SelectMouseDown/.test(this.className))) {
						this.className += " SelectMouseDown";
					}
					self.show();
				}
				
				//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;
					   if(this.options.selectObj.name=="wantTo"
    ||this.options.selectObj.name=="findOut" ||
    this.options.selectObj.name=="products"
    || this.options.selectObj.name=="select1"){
    window.location = this.options.selectObj.value
    }
					break;
				}
			}
			
			//Hide the SelectUIObjList
			this.hide();
		}
		
		//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();
		}
		
		//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).top - this.SelectUIObjContainer.offsetHeight) {
				this.SelectUIObjList.style.top = "";
				this.SelectUIObjList.style.bottom = this.SelectUIObjContainer.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);
		}
		

/* FILE BROWSE OBJECT */
/*
	*FileBrowseUI will be created to replace the original file browse
	*FileBrowseUI will be created like this :
	<div>									:	Wrapper for all elements
		<input type="text" />				:	Fake Text Input to show the browse path
												ID and Name of the origin browse will be copy to this 
												textbox and remove them on the original browse
		<div><input type="file" /></div>	:	<div> = wrapper for original file browse
	</div>
	*Options :
		browseButtonPos			:	set the Browse button position
									left/right then top/bottom(affected when breakline==TRUE)
									default: "right"
		breakline				:	if set to TRUE, textbox and Browse button are on 2 line
									(top/bottom available)
		browseButtonClassName	:	set the classname for Browse button, default = DefaultBrowseBtn
		browseTextBoxClassName	:	set the classname for the TextBox, default = DefaultBrowseTextBox
*/
FileBrowseUIGroup = function () {
	this.FileBrowseUIGroup = getElementsByClassName(arguments[0]);
	for (var i = 0 ; i < this.FileBrowseUIGroup.length ; i++) {
		new FileBrowseUI(this.FileBrowseUIGroup[i], arguments[1]);
	}
}
	FileBrowseUI = function () {
		this.options = {
			browseButtonPos: arguments[1] && arguments[1].browseButtonPos ? arguments[1].browseButtonPos : "right",
			browseButtonClassName: arguments[1] && arguments[1].browseButtonClassName ? arguments[1].browseButtonClassName : "DefaultBrowseBtn",
			browseTextBoxClassName: arguments[1] && arguments[1].browseTextBoxClassName ? arguments[1].browseTextBoxClassName : "DefaultBrowseTextBox",
			breakline: arguments[1] && arguments[1].breakline ? arguments[1].breakline : false
		}
		//Left/Right + Top/Bottom
		var lr = this.options.browseButtonPos.split(" ")[0];
		var tb = this.options.browseButtonPos.split(" ")[1];
		//Original file browse
		this.originalFileBrowse = arguments[0];
		//Create file browse wrapper
		var inputWrapper = document.createElement("div");
		this.originalFileBrowse.parentNode.insertBefore(inputWrapper, this.originalFileBrowse);
		inputWrapper.appendChild(this.originalFileBrowse);
		
		//Create fake input text for fake Browse...
		var fakeTextBoxWrapper = document.createElement("div");
		this.fakeTextBoxInput = document.createElement("input");
		this.fakeTextBoxInput.id = this.originalFileBrowse.id;
		this.originalFileBrowse.id = "";
		this.fakeTextBoxInput.name = this.originalFileBrowse.name;
		this.originalFileBrowse.name = "";
		inputWrapper.parentNode.insertBefore(fakeTextBoxWrapper, inputWrapper);
		fakeTextBoxWrapper.appendChild(this.fakeTextBoxInput);
		
		//Create BrowseUI Wrapper for al element
		var browseUIWrapper = document.createElement("div");
		inputWrapper.parentNode.insertBefore(browseUIWrapper, inputWrapper);
		//Append to Browser
		if (typeof(tb) == "undefined" || tb == "bottom") {
			browseUIWrapper.appendChild(fakeTextBoxWrapper);
			browseUIWrapper.appendChild(inputWrapper);
		}
		else {
			browseUIWrapper.appendChild(inputWrapper);
			browseUIWrapper.appendChild(fakeTextBoxWrapper);
		}
		browseUIWrapper.className = this.originalFileBrowse.className;
		
		//Prepare styling...
		browseUIWrapper.style.overflow = "hidden";
		//Browse button
		inputWrapper.style.position = "relative";
		inputWrapper.style.overflow = "hidden";
		this.originalFileBrowse.style.fontSize = "10em";
		this.originalFileBrowse.style.position = "absolute";
		this.originalFileBrowse.style.Zindex = "1";
		this.originalFileBrowse.style.top = "0px";
		this.originalFileBrowse.style.right = "0px";
		this.originalFileBrowse.className = "";
		inputWrapper.className += this.options.browseButtonClassName;
		//Event: onmousedown state
		inputWrapper.onmousedown = function () {
			inputWrapper.className += " FileBrowseMouseDown";
		}
		inputWrapper.onmouseout = function () {
			inputWrapper.className = inputWrapper.className.replace(/FileBrowseMouseDown/, "");
		}
		
		var ie = document.all;
		if (ie) {
			inputWrapper.style.styleFloat = lr;
			this.originalFileBrowse.style.filter = "alpha(opacity=0)";
		}
		else {
			inputWrapper.style.cssFloat = lr;
			this.originalFileBrowse.style.opacity = 0;
			this.originalFileBrowse.style.MozOpacity = 0;
		}
		//Browse TextBox: this.fakeTextBoxInput
		this.fakeTextBoxInput.className += this.options.browseTextBoxClassName;
		this.fakeTextBoxInput.style.margin = "0px";
		this.fakeTextBoxInput.style.outline = "none";
		if (ie) {
			if (lr == "left") {
				fakeTextBoxWrapper.style.styleFloat = "right";
			}
			else {
				fakeTextBoxWrapper.style.styleFloat = "left";
			}
			this.fakeTextBoxInput.style.marginTop = "-1px"; /*fix for IE*/
		}
		else {
			if (lr == "left") {
				fakeTextBoxWrapper.style.cssFloat = "right";
			}
			else {
				fakeTextBoxWrapper.style.cssFloat = "left";
			}
			fakeTextBoxWrapper.style.width = this.fakeTextBoxInput.offsetWidth + "px"; /*fix for MAC Safari not effected others*/
		}
		//browseUIWrapper dimension
		browseUIWrapper.style.width = this.options.breakline ? this.fakeTextBoxInput.offsetWidth + "px" :inputWrapper.offsetWidth + this.fakeTextBoxInput.offsetWidth + "px";
		//Event
		var self = this;
		this.originalFileBrowse.onchange = function () {
			self.updatedFileBrowseUI();
		}
		
		/*method*/
		//Update FileBrowseUI
		FileBrowseUI.prototype.updatedFileBrowseUI = function () {
			this.fakeTextBoxInput.value = this.originalFileBrowse.value;
		}
	}

/* RADIO OBJECT */
/* CHECKBOX OBJECT */

/* 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};
}