/**
 * Find all selectboxes and change all needed stuff.
 */
function z7selectBox(defaults) {
	
	if(/MSIE 6/i.test(navigator.userAgent)) {
		return false;
	}
	
	// find all select boxes
	var selects = document.getElementsByTagName('select');
	var j=0;
	
	// do some action for each select box
	for(i=0, n=selects.length; i<n; i++) {
	
		// copy select box with all childs
		var original = selects[i].cloneNode(true);
	
		// get info about original element
		var width = selects[i].offsetWidth;
		var height = selects[i].offsetHeight;
		var style = selects[i].style;
		// important for IE
		var selIndex = selects[i].selectedIndex;
		
		// add extra width if needed
		if(defaults.extraWidth) {
			width += defaults.extraWidth;
		}
		
		// create the fake element
		var fakeParent = document.createElement('div');
		fakeParent.id = 'z7selectBoxFake'+i;
		fakeParent.onmouseout = function() { z7selectBoxFakeMouseout(this, i, defaults.arrowImage); };
		fakeParent.onmouseover = function() { z7selectBoxFakeMouseover(this, i, defaults.arrowImageHover); };

		// add image
		if(defaults.arrowImage) {
			var fakeArrow = document.createElement('img');
			fakeArrow.src = defaults.arrowImage;
			fakeArrow.id ='z7selectBoxFakeImg'+i;
			fakeParent.appendChild(fakeArrow);
		}
		
		// create the text container
		var fakeText = document.createElement('span');
		fakeText.id = 'z7selectBoxFakeText'+i;
		fakeParent.appendChild(fakeText);
		
		// paste original into container
		fakeParent.appendChild(original);

		// replace original
		selects[i].parentNode.replaceChild(fakeParent, selects[i]);
		
		// some style changings
		document.getElementById('z7selectBoxFake'+i).style.display = style.display;
		document.getElementById('z7selectBoxFake'+i).style.float = style.float;
		document.getElementById('z7selectBoxFake'+i).style.width = width+'px';
		document.getElementById('z7selectBoxFake'+i).style.position = 'relative';
		document.getElementById('z7selectBoxFake'+i).style.overflow = 'hidden';
		document.getElementById('z7selectBoxFake'+i).className = 'z7selectBoxFake';
	
		// some changings on original element
		selects[i].style.position = 'absolute';
		selects[i].style.left = '0px';
		selects[i].style.bottom = '0px';
		selects[i].style.width = width+'px';
		selects[i].style.opacity = '0';
		selects[i].style.filter = 'Alpha(opacity=0)';
		// important for IE
		selects[i].selectedIndex = selIndex;

		if (selects[i].addEventListener) {
			with ({'i': i}) {
				selects[i].addEventListener('change', function() { z7selectBoxChangeText(i); }, true);
			}
		}
		else if(selects[i].attachEvent) {
			with ({'i': i}) {
				selects[i].attachEvent('onchange', function() {z7selectBoxChangeText(i); });
			}
		}
	
		// write current content into fake element
		z7selectBoxChangeText(i);
	}
}

/**
 * Set the correct text to the fake box.
 */
function z7selectBoxChangeText(id) {
	ref = document.getElementById('z7selectBoxFake'+id).getElementsByTagName('select').item(0);
	document.getElementById('z7selectBoxFake'+id).getElementsByTagName('span').item(0).innerHTML = ref.options[ref.selectedIndex].text;
}

/**
 * Changes the image and the css class.
 */
function z7selectBoxFakeMouseover(ref, id, img) {
	ref.className = 'z7selectBoxFakeHover';
	ref.getElementsByTagName('img').item(0).src = img;
}


/**
 * Changes the image and the css class.
 */
function z7selectBoxFakeMouseout(ref, id, img) {
	ref.className = 'z7selectBoxFake';
	ref.getElementsByTagName('img').item(0).src = img;
}