function outsideClickHide (e) {
	var clicked = Event.element (e);
	
	if (clicked.descendantOf(this.up()) || clicked == this) {
	}
	else {
		this.removeClassName('selectOpen');
		this.removeClassName('selectOpenNarrow');
		this.removeClassName('selectOpenMedium');
		this.removeClassName('selectOpenMediumWide');
		this.removeClassName('selectOpenWide');
		this.addClassName ('selectReplacement');
		this.hide();
	}

}

//show dropdown
function ulSelectMe (e) {
	this.next().removeClassName ('selectReplacement');

	if (this.hasClassName("selectCurrentSelectionNarrow"))
		this.next().addClassName ('selectOpenNarrow');
	else if (this.hasClassName("selectCurrentSelectionMedium"))
		this.next().addClassName ('selectOpenMedium');
	else if (this.hasClassName("selectCurrentSelectionMediumWide"))
		this.next().addClassName ('selectOpenMediumWide');
	else if (this.hasClassName("selectCurrentSelectionWide"))
		this.next().addClassName ('selectOpenWide');
	else
		this.next().addClassName ('selectOpen');

	this.next().show();
	
	
	//********if click outside of 'selectReplacement' ul, then hide it...
	Event.observe(document.body, 'click', outsideClickHide.bindAsEventListener (this.next()) );
	
	
	//Event.stopObserving (this, 'click');
	//Event.observe (this, 'click', selectMe.bindAsEventListener (this) );

}

//show dropdown
function firstSelectMe (e) {
	this.up().next().removeClassName ('selectReplacement');

	if (this.up().hasClassName("selectCurrentSelectionNarrow"))
		this.up().next().addClassName ('selectOpenNarrow');
	else if  (this.up().hasClassName("selectCurrentSelectionMedium"))
		this.up().next().addClassName ('selectOpenMedium');
	else if  (this.up().hasClassName("selectCurrentSelectionMediumWide"))
		this.up().next().addClassName ('selectOpenMediumWide');
	else if  (this.up().hasClassName("selectCurrentSelectionWide"))
		this.up().next().addClassName ('selectOpenWide');
	else
		this.up().next().addClassName ('selectOpen');

	this.up().next().show();
	


	//********if click outside of 'selectReplacement' ul, then hide it...
	//Event.observe(document.body, 'click', outsideClickHide.bindAsEventListener (this.up().next()) );
	
	//Event.stopObserving (this, 'click');
	//Event.observe (this, 'click', selectMe.bindAsEventListener (this) );

}

function selectMe (e) {
	cur_li = this;
	

	
	lis = cur_li.up().childElements();

      for (var i=0; i<lis.length; i++) {
        if (lis[i] != cur_li) { // not the selected list item
		//make sure no 'selected' in class name
		if (lis[i].hasClassName ('selected') ) lis[i].removeClassName ('selected');
		
		//get rid of any previous event observing so doesn't multiple up
		Event.stopObserving (lis[i], 'click');
		Event.observe (lis[i], 'click', selectMe.bindAsEventListener(lis[i]) );	

		//if it's clicked, then will activate the 'else' blocked below
		
        } 
	else { // IS the previously selected option

	  //set the value of the select to this index
      select_element = cur_li.up().up().previous();
	  select_element.selectedIndex = i;

      // trigger onchange event (if any)
      if (select_element.onchange)
		  select_element.onchange();


	  //change text of always showing thing
	  cur_li.up().previous().down().innerHTML = cur_li.innerHTML;
		if (! lis[i].hasClassName ('selected') ) lis[i].addClassName ('selected');
	
	  cur_li.up().removeClassName ('selectOpen');
	  cur_li.up().addClassName ('selectReplacement');
	  cur_li.up().hide();
	  
	  
	  Event.stopObserving (cur_li, 'click');	  
	  Event.observe (cur_li, 'click', selectMe.bindAsEventListener(cur_li) );	
	  //Event.observe (cur_li, 'click', firstSelectMe.bindAsEventListener(cur_li) );
	  
	  //*****stop observing outside-box click
	  Event.stopObserving (document.body, 'click');
	  
	  
	}
    }

}


function updateCssSelect (sel) {

	sel.next().down().down().innerHTML = sel.options[sel.selectedIndex].innerHTML;
	lis = sel.next().down().next().childElements() 

	for (x = 0; x < lis.length ;x++) {
		if (lis[x].hasClassName ('selected') ) lis[x].removeClassName ('selected');			
	}
	
	lis[sel.selectedIndex].addClassName ('selected');

}


var last_z_index_used = 2001;

function changeSelects () {
	// IE has problems with this, use default select
	if (ie)
		return false;
	
	selects = $$('.cssSelect');

	for (x = 0; x < selects.length; x++) {
		selects[x].hide();
		//create matching ul:
		index = selects[x].selectedIndex;

		last_z_index_used -= 1;
		
		//ul_text = '<ul class="selectCurrentSelection">' + '<li>' + selects[x].options[index].innerHTML + '</li></ul>';
		ul_text = '<div style="position: relative; z-index: ' + last_z_index_used + '"><ul class="selectCurrentSelection' + (selects[x].hasClassName("narrow_select") ? 'Narrow' : '') + (selects[x].hasClassName("medium_select") ? 'Medium' : '') + (selects[x].hasClassName("medium_wide_select") ? 'MediumWide' : '') + (selects[x].hasClassName("wide_select") ? 'Wide' : '') + (selects[x].hasClassName("prefillSelect") ? ' prefillSelect ' : '') + '" style="background-repeat: no-repeat"><li>' + selects[x].options[index].innerHTML + '</li></ul>';
		//for each option, add an li to the ul
		ul_text += '<ul class="selectReplacement">';
		
		
		for (y = 0; y < selects[x].options.length; y++) {
			ul_text += '<li' + (y == index ? ' class="selected' + /* (selects[x].options[y].hasClassName("prefillSelect") ? ' prefillSelect' : '') +*/ '"' : (selects[x].options[y].hasClassName("prefillSelect") ? ' class="prefillSelect" ' : '') ) + '>' + selects[x].options[y].innerHTML + '</li>';				
			//ul_text += '<li>' + selects[x].options[y].innerHTML + '</li>';				
		}
		ul_text += '</ul></div>';
		
		
		
		Element.insert (selects[x], {'after' : ul_text } );		
		
		//the new ul object:
		top_ul = selects[x].next().down();
		new_ul = top_ul.next();
		
		new_ul.hide();
		
		//observe click
		//Event.observe (new_ul, 'click', changeOpen.bindAsEventListener (new_ul) );
		
		//for selected index, add additional click event
		lis = new_ul.childElements();
		sel_li = lis[index];
		
		
		
		top_li = top_ul.down();
		//alert (top_li.innerHTML);
		
		
	
		//Event.observe (sel_li, 'click', firstSelectMe.bindAsEventListener (sel_li) );
		Event.observe (top_li, 'click', firstSelectMe.bindAsEventListener (top_li) );
		Event.observe (top_ul, 'click', ulSelectMe.bindAsEventListener (top_ul) );
		for (y = 0; y < lis.length; y++) {
			Event.observe (lis[y], 'click', selectMe.bindAsEventListener (lis[y]) );
		}
		
		Event.observe (selects[x], 'change', updateCssSelect.bindAsEventListener (selects[x]) );
		

	}
}


//IE :hover hack for ul/li stuff
sfHover = function() {
	//sels = document.getElementsByClassName ('cssSelect');
	sels = $$('.cssSelect');
	for (x = 0; x < sels.length; x++) {

		//add to ul
		sels[x].onmouseover=function() {
			this.className+=" hover";
		}
		sels[x].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" hover\\b"), "");
		}

		//add to lis for ul
		alert(sels[x] + "|" + sels[x].next());

		sfEls = sels[x].next().getElementsByTagName("li");
		for (var i=0; i<sfEls.length; i++) {
			sfEls[i].onmouseover=function() {
				this.className+=" hover";
			}
			sfEls[i].onmouseout=function() {
				this.className=this.className.replace(new RegExp(" hover\\b"), "");
			}
		}
	}
}

linkHover = function() {
	links = $$('input.likeLink');
	for (x = 0; x < links.length; x++) {
	
		//add to ul
		links[x].onmouseover=function() {
			this.className+=" likelinkHover";
		}
		links[x].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" likelinkHover\\b"), "");
		}	

	}
}

if (! ie) {
if (window.attachEvent) window.attachEvent("onload", linkHover);

Event.observe (window, 'load', function () { changeSelects() } );

if (window.attachEvent) window.attachEvent("onload", sfHover);
}