/*
 * jQuery.styledSelect - <select> replacement plugin
 *
 * Copyright (c) 2009 Petr Stanicek (pixy@pixy.cz)
 * version 1.1, January 12, 2009
 * 
 * http://wellstyled.com/files/jquery.styledselect/
 *	Change log:
 *	1.1 - Firefox 2 and older disabled due to wrong inline-block support.
 *
 
- usage: jQuery('#anyselect').styledSelect(options);
- options are optional 

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 caling this function, you must trigger its resize handler
		after you show it first time, e.g.: jQuery('#myselect').trigger('resize')
	http://wellstyled.com/files/jquery.styledselect/
*/


jQuery.fn.styledSelect = function(options) {
	var isFF2 = jQuery.browser.mozilla && jQuery.browser.version.indexOf('1.8.')==0;
	var prefs = {
		coverClass : 'select-replace-cover',
		innerClass : 'select-replace',
		adjustPosition : { top:-1, left:0 },
		selectOpacity : 0	}
	if (options) jQuery.extend(prefs,options);
	return this.each( function() {
		if (isFF2) return false;
		var selElm = jQuery(this);
		selElm.wrap('<span class="select-wrap" />').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':-1,'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() {
			jQuery(this).next().text($(this.options[this.selectedIndex]).text());
		}).bind('resize',function() {
			jQuery(this).parent().css('min-width', jQuery(this).width()+'px' );
		});
		
		selElm.next().text($(selElm[0].options[selElm[0].selectedIndex]).text())
		.parent().css('min-width', selElm.width()+'px' );
		
		});
	}

$.fn.inputStyle = function(){

	this.each(function(){
			// input must have valid width value
			if ( this.type == 'hidden' 
			 || this.type == 'checkbox'
			 || this.type == 'radio'
			 || this.type == 'submit'
			 || this.type == 'button'
			 || this.type == 'file'
			 || this.type == 'files'
			 ){return}
			
			
			var that = $(this)
			
			// ATTANTION !!
			//  may cause issue when the input style data change dynamicly
			
			
			if (that.hasClass('none')){return}
			
			
			var input_wrapper 	= $('<div />').addClass('input-wrapper')
			var input_icon 			= $('<div />').addClass('input-icon')
			var input_submit_btn = $('<input type="submit"  />').val(' ')
			var input_submit 	= $('<div />').addClass('input-submit').append(input_submit_btn)
			var input_selector_inner = $('<div />').addClass('input-select-inner')
			var input_selector 	= $("<div />").addClass('input-select').append(input_selector_inner)
			var that_width 		= that.width() ;
			// Applay the current width to him self
			that.width(that_width)
			
			if (that.attr('type') == 'select-one' && ! that.hasClass('size')){	
				that.styledSelect()
				return ;
			}
			
			
			
			
			
			if (that.hasClass('size')){
				var selectedIndex=null
				var _length =  that[0].options.length 
				for (var i=0;opt = that[0].options[i];i++){
					var option = $("<div />").addClass('option').attr('value',opt.value).text(opt.text).attr('index',i)
					if (that[0].selectedIndex == i){	selectedIndex = option }
					option.click(function(){
							that[0].selectedIndex  = $(this).attr('index')
							$('.option',input_selector_inner).removeClass('selected')
							$(this).addClass('selected')
							that.trigger('change')
					})
					input_selector_inner.append(option)
				}
				
				if (selectedIndex){	selectedIndex.addClass('selected') }
				
				that.after(input_selector)
				that.hide();
				return
			}
			input_wrapper.width(that_width+3)			
			that.wrap(input_wrapper)
			
			var wrapper = that.parent() ;
			
			if (that.hasClass('number') ){
					input_icon.addClass("input-icon-number")
					that.after(input_icon)
					binder = 'keypress'
					if ($.browser.msie){
						binder = 'keyup'
					}
					that.bind(binder,function(event){
						if 	(event.keyCode == 38){
							that.val(parseInt(that.val()||0)+1)
						}else if(event.keyCode == 40){
							that.val(parseInt(that.val()||0)-1)
						}
						
					})
			}
			if (that.hasClass('search') ){		
					that.after(input_submit,input_icon)
			}
			if (that.hasClass('email') ){					
					input_icon.addClass("input-icon-mail")
					that.after(input_submit,input_icon)
			}
	})
} ;