//stop event bubbleing
function stopEvent(ev) {
	ev || (ev = window.event);
	if (/MSIE (5|6|7)/.test(navigator.userAgent)) {
		ev.cancelBubble = true;
		ev.returnValue = false;
	} else {
		ev.preventDefault();
		ev.stopPropagation();
	}
	return false;
}

//replace the given select
function replaceSelect(selectID) {
    if($(selectID)){
	    selectReplacement($(selectID));
    }
}

function selectReplacement(obj) {
	//hide the select
	obj.className += ' replaced';
	
	//replacement container for options
	var ul = document.createElement('div');
	ul.id='select_replace';
	
	var containerDiv = document.createElement('div');
	ul.className = 'selectReplacement';
  
	var opts = obj.options;
	
	//get current selection
	for (var i=0; i<opts.length; i++) {
    	var selectedOpt;
	    if (opts[i].selected) {
    	  selectedOpt = i;
	      break;
    	} else {
	      selectedOpt = 0;
    	}
  	}
  
  //construct replacement options list
  for (var i=0; i<opts.length; i++) {

    var li = document.createElement('span');
    var txt = document.createTextNode(opts[i].text);

	var contentDiv = document.createElement('div');		
	contentDiv.className = 'select_content';

	var innerContentDiv = document.createElement('div');		
	innerContentDiv.className = 'select_inner_content';

	var innerDiv = document.createElement('div');
	innerDiv.className = 'select_i_content';
	
	//add divs with borders(css style)
	innerDiv.appendChild(txt);
	innerContentDiv.appendChild(innerDiv);
	contentDiv.appendChild(innerContentDiv);

    
    li.appendChild(contentDiv);
    li.selIndex = opts[i].index;
    li.selectID = obj.id;
    
    //add event listener - select item in list
    li.onclick = function(evt) {
		if(!evt){
			evt = window.event;
		}
		
		var target = evt.target? evt.target : evt.srcElement;
		stopEvent(evt);
		
        selectMe(this);
    }
    
    //no selection for the current selected option
    if (i == selectedOpt) {
	    li.className = 'selected';

	      li.onclick = function() {
     		this.parentNode.className = this.parentNode.className.replace(/ selectOpen/g, '');
	      }
    }
    
    //add css style borders divs
    if(i == opts.length-1){
		var _bottomLeftDiv = document.createElement('div');		
		_bottomLeftDiv.className = 'select_bottom_left';
		var _bottomDiv = document.createElement('div');		
		_bottomDiv.className = 'select_bottom';
		var _bottomRightDiv = document.createElement('div');		
		_bottomRightDiv.className = 'select_bottom_right';
	
		var _bottomCenterDiv = document.createElement('div');
		
		_bottomRightDiv.appendChild(_bottomCenterDiv);
		_bottomDiv.appendChild(_bottomRightDiv);
		_bottomLeftDiv.appendChild(_bottomDiv);
		
		li.appendChild(_bottomLeftDiv);
    }

	//simulate select behaviour    
	li.onmouseover = function() {
        this.className += ' hover';

		var ul = this.parentNode;        

		for(var i =0; i < ul.childNodes.length; i++){
			if((/selected\b/).test(ul.childNodes[i].className) && ul.childNodes[i] != this){
				ul.childNodes[i].className = '';
			}
			
			if((/hover\b/).test(ul.childNodes[i].className) && ul.childNodes[i] != this){
				ul.childNodes[i].className = '';
			}
			
		}
        
    }
    
    ul.appendChild(li);
  }


	//add visible current selction
	var _li = document.createElement('span');
    var _txt = document.createTextNode(opts[selectedOpt].text);

	var _contentDiv = document.createElement('div');		
	_contentDiv.className = 'select_content';
	var _innerContentDiv = document.createElement('div');		
	_innerContentDiv.className = 'select_inner_content';

	var _innerDiv = document.createElement('div');
	_innerDiv.className = 'select_i_content';
	
	_innerDiv.appendChild(_txt);
	_innerContentDiv.appendChild(_innerDiv);
	_contentDiv.appendChild(_innerContentDiv);

    
    _li.appendChild(_contentDiv);
    _li.appendChild(_bottomLeftDiv);
    _li.selIndex = -1;
    _li.selectID = obj.id;
    _li.className = 'selectedStatic';
	
	//open / close select list
     _li.onclick = function() {
		var ul = this.parentNode;        

		
     	if((/selectOpen/).test(this.parentNode.className)){
     		this.parentNode.className = this.parentNode.className.replace(/ selectOpen/g, '');
     	}else{
			for(var i =0; i < ul.childNodes.length; i++){
				if(ul.childNodes[i].selIndex == $(ul.childNodes[i].selectID).selectedIndex){
					ul.childNodes[i].className = ' selected';
				}
				
				if(/hover\b/.test(ul.childNodes[i].className)){
					ul.childNodes[i].className = ul.childNodes[i].className.replace(/hover/g,'');
				}
			}

	        this.parentNode.className += ' selectOpen';
     	}
      }
	
	ul.insertBefore(_li,ul.firstChild);
	  
  
   document.onclick = function(evt){
	if(!evt){
		evt = window.event;
	}

	var target = evt.target? evt.target : evt.srcElement;
	
	//close select list if click outside it
	if(!targetIsInUL(target)){
		ul.className = ul.className.replace(/ selectOpen/g, '');
	}
   	
   }

	//add css borders and add the generated list to DOM
//	var topLeftDiv = document.createElement('div');		
//	topLeftDiv.className = 'select_top_left';
//	var topDiv = document.createElement('div');		
//	topDiv.className = 'select_top';
//	var topRightDiv = document.createElement('div');		
//	topRightDiv.className = 'select_top_right';

	var bottomLeftDiv = document.createElement('div');		
	bottomLeftDiv.className = 'select_bottom_left';
	var bottomDiv = document.createElement('div');		
	bottomDiv.className = 'select_bottom';
	var bottomRightDiv = document.createElement('div');		
	bottomRightDiv.className = 'select_bottom_right';

	var bottomCenterDiv = document.createElement('div');
	bottomCenterDiv.style.width = '150px'
	
//	topDiv.appendChild(topRightDiv);
//	topLeftDiv.appendChild(topDiv);
	bottomRightDiv.appendChild(bottomCenterDiv);
	bottomDiv.appendChild(bottomRightDiv);
	bottomLeftDiv.appendChild(bottomDiv);

	containerDiv.style.position = 'absolute';
	containerDiv.style.width = '50px';
//	containerDiv.appendChild(topLeftDiv);
	containerDiv.appendChild(ul);
	containerDiv.appendChild(bottomLeftDiv);	
	
	obj.parentNode.insertBefore(containerDiv,obj);
  
}

//verify if target on click is in list
function targetIsInUL(obj){
	if(obj.id == 'select_replace'){
		return true;
	}else{
		var parentNode = obj.parentNode;
		
		while(parentNode){
			if(parentNode.id == 'select_replace'){
				return true;
			}else{
				parentNode = parentNode.parentNode;
			}
		}
		return false;
	}
}    

//change selection
function selectMe(obj) {
  var lis = obj.parentNode.getElementsByTagName('span');

  for (var i=0; i<lis.length; i++) {
    if (lis[i] != obj && lis[i].selIndex >= 0) {
      lis[i].className='';

      lis[i].onclick = function(evt) {
		if(!evt){
			evt = window.event;
		}
		stopEvent(evt);
		var target = evt.target? evt.target : evt.srcElement;
        
        selectMe(this);
      }
    } else {
    	
		setVal(obj);
	    obj.className='selected';
      
		      
    	obj.parentNode.className = 
        obj.parentNode.className.replace(/selectOpen/g, '');
		
		if(lis[i].selIndex >= 0){
	    	obj.onclick = function(evt) {
	
				if(!evt){
					evt = window.event;
				}
				stopEvent(evt);
				var target = evt.target? evt.target : evt.srcElement;
		
		        obj.parentNode.className = obj.parentNode.className.replace(/selectOpen/g, '');
	      	}
		}
    }
  }
}

//set current selection value and submit the form
function setVal(obj)/*(objID, selIndex)*/ {
  var select = document.getElementById(obj.selectID);
  select.selectedIndex = obj.selIndex;
  obj.parentNode.firstChild.firstChild.firstChild.firstChild.innerHTML = select.options[select.selectedIndex].text;
  select.form.submit();
//  alert(obj.options[obj.selectedIndex].value)
}


function setForm() {
	var s = document.getElementsByTagName('select');
	for (var i=0; i<s.length; i++) {
	   selectReplacement(s[i]);
	}
}