/*
	jQuery.styledSelect - <select> replacement plugin

	Copyright (c) 2009 Petr Stanicek (pixy@pixy.cz)
	version 1.0, January 12, 2009

*/

/*

- usage: $('#anyselect').styledSelect(options);
- options are optional, none/all/any of these:
{
	coverClass : string, class name of the outer box,
	innerClass : string, class name of the inner box,
	adjustPosition : { top: string length, left: string length }, adjusted position of the outer box,
	selectOpacity : 0..1 // see below
}

CSS:	.select-replace: border, padding, background, font style
		.select-replace-cover: additional background
		select (the original element): font-size, width

Note:	Try to keep same size of original select and the replacing box - primary by adjusting
		font-sizes and padding, you'd better not to set height/width of those boxes.

Tip:	Use options {opacity:0.1} (or similar low value) to reveal the original select to fit the sizes
		while debugging. Don't forget to set it back to zero when you done.

Note:	If the original select is hidden while calling this function, you have to trigger its resize handler
		showing it first time, e.g.: $('#myselect').trigger('resize')

*/


$.fn.styledSelect = function(options) {
	var prefs = {
		coverClass : 'select-replace-cover',
		innerClass : 'select-replace',
		adjustPosition : { top:0, left:0 },
		selectOpacity : 0
		}
	if (options) $.extend(prefs,options);
	return this.each( function() {
		var selElm = $(this);
		selElm.wrap('<span><'+'/span>');
		selElm.after('<span><'+'/span>');
		var selReplace = selElm.next();
		var selCover = selElm.parent();
		selElm.css({
			'opacity':prefs.selectOpacity,
			'visibility':'visible',
			'position':'absolute',
			'top':0,
			'left':0,
			'display':'inline',
			'z-index':1
			});
		selCover.addClass(prefs.coverClass).css({
			'display':'inline-block',
			'position':'relative',
			'top':prefs.adjustPosition.top,
			'left':prefs.adjustPosition.left,
			'z-index':0,
			'vertical-align':'middle',
			'text-align':'left'
			});
		selReplace.addClass(prefs.innerClass).css({
			'display':'block',
			'white-space':'nowrap'
			});

		selElm.bind('change',function() {
			$(this).next().text(this.options[this.selectedIndex].text);
			}).bind('resize',function() {
			$(this).parent().width( $(this).width()+'px' );
			});
		selElm.trigger('change').trigger('resize');
		});
	}