/*#############################################################
Name: jFinterface
Version: 1.0
Author: Quang Ngo
Email : nnquangit@yahoo.com

Feel free to use and modify but please keep this copyright.
#################################################################*/
(function($){
	var index = 999;
	$.jFinterface = {
		getindex : function(){
			return index;
		},
		setindex : function(i){
			index = i;
		},
		resetForm : function($form){
			$form[0].reset();
			$('.jFwrapSelect').not('.jFwrapSelect-hover')
			.find('.jFwrapSelect-lst').css({visibility:"hidden"});
			$.jFinterface.resetTextField($('.jFwrapText',$form));
			$.jFinterface.resetButton($('.jFwrapButton',$form));
			$.jFinterface.resetCheckbox($('.jFwrapCheckbox',$form));
			$.jFinterface.resetRadio($('.jFwrapRadio',$form));
			$.jFinterface.resetTextarea($('.jFwrapTextarea',$form));
			$.jFinterface.resetFileupload($('.jFwrapFile',$form));
			$.jFinterface.resetSelect($('.jFwrapSelect',$form));
			$.jFinterface.resetSelectmul($('.jFwrapSelectmul',$form));
			return false;
		},
		initTextField : function($ob){
			$ob.each(function(){
				$(this).width($(this).width()-10);
				$(this).wrap('<span class="jFwrapText"><span></span></span>');
				//$(this).before('<div class="jFwrapdata">'+$(this).val()+'</div>');									
				$(this).parent().parent().hover(function(){
					$(this).addClass("jFwrapText-hover");
				},function(){
					$(this).removeClass("jFwrapText-hover");
				});
			});
		},
		resetTextField : function($ob){
			$ob.each(function(){
				//$('input',$(this)).val($('.jFwrapdata',$(this)).html());
			});
		},
		initButton : function($ob){
			$ob.each(function(){
				$(this)	.wrap('<span class="jFwrapButton"><span></span></span>')
								//.before('<div class="jFwrapdata">'+$(this).val()+'</div>')
								.parent().parent().hover(function(){
									$(this).addClass("jFwrapButton-hover");
								},function(){
									$(this).removeClass("jFwrapButton-hover");
								});
			});
		},
		resetButton : function($ob){
			$ob.each(function(){
				//$('input',$(this)).val($('.jFwrapdata',$(this)).html());
			});
		},
		initCheckbox: function($ob){
			$ob.each(function(){
				$(this)	.wrap('<span class="jFwrapCheckbox"></span>')
								.before('<div class="jFwrapdata">'+($(this)[0].checked?'on':'off')+'</div>');
				
				var $checkbox = $(this);
				var $jFwrapCheckbox = $(this).parent();
				
				$jFwrapCheckbox.click(function(){
					$checkbox[0].checked = !$checkbox[0].checked;
					$checkbox.change();
					return false;
				});
				$checkbox.change(function(){
					if($checkbox[0].checked)
					$jFwrapCheckbox.addClass("jFwrapCheckbox-checked");
					else
					$jFwrapCheckbox.removeClass("jFwrapCheckbox-checked");
				});
				
				if($checkbox[0].checked)
					$jFwrapCheckbox.addClass("jFwrapCheckbox-checked");
			});
		},
		resetCheckbox: function($ob){
			$ob.each(function(){
				$(this).removeClass("jFwrapCheckbox-checked");
				$('input',this)[0].checked	= false;
				if($('.jFwrapdata',$(this)).html()=="on")
				{
					$(this).addClass("jFwrapCheckbox-checked");
					$('input',this)[0].checked	= true;	
				}
			});
		},
		initRadio: function($ob,$form){
			$ob.each(function(){
				$(this)	.wrap('<span class="jFwrapRadio"></span>')
								.before('<div class="jFwrapdata">'+($(this)[0].checked?'on':'off')+'</div>');
				
				var $radio = $(this);
				var $jFwrapRadio = $(this).parent();
				
				$jFwrapRadio.click(function(){
					if(!$radio[0].checked)
					{
						$('input:radio[name="'+$radio.attr("name")+'"]',$form).each(function(){
							$(this).parent().removeClass("jFwrapRadio-checked");
							$(this)[0].checked = false;
						});
						$(this).addClass("jFwrapRadio-checked");
						$radio[0].checked = true;
						$radio.change();
					}
					return true;
				});
					
				if($radio[0].checked)
					$jFwrapRadio.addClass("jFwrapRadio-checked");
			});
		},
		resetRadio: function($ob){
			$ob.each(function(){
				$(this).removeClass("jFwrapRadio-checked");
				$('input',this)[0].checked	= false;
				if($('.jFwrapdata',$(this)).html()=="on")
				{
					$(this).addClass("jFwrapRadio-checked");
					$('input',this)[0].checked	= true;	
				}
			});
		},
		initTextarea: function($ob){
			$ob.each(function(){
				var width = $(this).width();
				$(this)	.wrap('<span class="jFwrapTextarea"></span>')
								.parent().width(width)
								.end()
								.width(width-10)
								//.before('<div class="jFwrapdata">'+ $(this).val() +'</div>')
								.before('<div class="jFwrapTextarea-head"><span></span></div>')
								.after('<div class="jFwrapTextarea-foot"><span></span></div>')
								.wrap('<div class="jFwrapTextarea-left"></div>')
								.wrap('<div class="jFwrapTextarea-right"></div>');
			});
		},
		resetTextarea: function($ob){
			$ob.each(function(){
				//$('textarea',$(this)).val($('.jFwrapdata',$(this)).html());
			});
		},
		initFileupload: function($ob){
			$ob.each(function(){
				var txtwidth = $.browser.msie ? $(this).width()-5 : $(this).width()-10;
				var btnwidth = $(this).attr("btnwidth")
				?'style="width:'+$(this).attr("btnwidth")+'"':'';
				var $jFwrapFile = $(this).wrap('<span class="jFwrapFile"></span>').parent();
				$(this)	.before('<div class="jFwrapdata"></div>')
								.before('<span class="jFwrapFile-txt"><span><input type="text" readonly /></span></span><span class="jFwrapFile-btn"><span '+btnwidth+'></span></span>')
								.addClass('jFwrapFile-con');
				$('input:text',$jFwrapFile).width(txtwidth);
				$(".jFwrapdata",$jFwrapFile).html($(this).attr("data")?$(this).attr("data"):'');
				$("input:text",$jFwrapFile).val($(this).attr("data")?$(this).attr("data"):'');
				$(".jFwrapFile-btn span",$jFwrapFile).html($(this).attr("title")?$(this).attr("title"):'');
				
				$jFwrapFile.hover(function(){
					$(this).addClass("jFwrapFile-hover");
				},function(){
					$(this).removeClass("jFwrapFile-hover");
				});
				
				$(this).change(function(){
					$('input:text',$jFwrapFile).val($(this).val());
				});
				
				
			});
		},
		resetFileupload: function($ob){
			$ob.each(function(){
				$('input:text',$(this)).val($('.jFwrapdata',$(this)).html());
				$('input:file',$(this)).val('');
			});
		},
		unselectOption: function(data,$wrap){
			var $op = $("option[value='"+data+"']",$wrap);
			var $li = $("li[data='"+data+"']",$wrap);
			if(($op.length>0)&&($li.length>0))
			{
				$op[0].selected = false;
				$li.removeClass("selected");
				return true;
			}
			return false;
		},
		selectOption: function(data,$wrap){
			var $op = $("option[value='"+data+"']",$wrap);
			var $li = $("li[data='"+data+"']",$wrap);
			if(($op.length>0)&&($li.length>0))
			{
				$op[0].selected = true;
				$li.addClass("selected");
				return $op;
			}
			return false;
		},
		initSelectmultiple: function($ob,$form){
			$ob.each(function(){
				var width = $(this).width()+4;
				var height = $(this).height()-10;
				var $select = $(this);
				var $jFwrapSelect = $(this)	.wrap('<span class="jFwrapSelectmul"></span>')
																		.parent()
																		.width(width);
				$(this)	.before('<div class="jFwrapSelectmul-head"><span></span></div>')
								.before('<div class="jFwrapSelectmul-left"><div class="jFwrapSelectmul-right"><div class="jFwrapSelect-lst"><div class="jFwrapSelect-src" jscrollpane-option="scrollbarWidth:5,scrollbarMargin:5,arrowSize:5,showArrows:true"><ul></ul></div></div></div></div><div class="jFwrapSelectmul-foot"><span></span></div>');
				$('.jFwrapSelect-src',$jFwrapSelect).height(height);
				var dli = false;
				$('option',$select).each(function(){
					$(this).attr("value",$(this).val());
					$('ul',$jFwrapSelect).html($('ul',$jFwrapSelect).html()+'<li class="'+(dli?'alter':'')+'" data="'+$(this).val()+'">'+$(this).text()+'</li>');
					dli=!dli;
				});
				$('ul li:last-child',$jFwrapSelect).addClass("last");
				$('ul li:first-child',$jFwrapSelect).addClass("first");
				$jFwrapSelect.hover(function(){
					$(this).addClass("jFwrapSelectmul-hover");
				},function(){
					$(this).removeClass("jFwrapSelectmul-hover");
				});
				
				$('ul li',$jFwrapSelect).each(function(){
					$(this).hover(function(){
						$(this).addClass("hover");
					},function(){
						$(this).removeClass("hover");
					});
					$(this).click(function(){
						if($(this).hasClass("selected"))
							$.jFinterface.unselectOption($(this).attr("data"),$jFwrapSelect);
						else
							$.jFinterface.selectOption($(this).attr("data"),$jFwrapSelect);
						$('select',$jFwrapSelect).change();
					});
				});
				$('option:selected',$jFwrapSelect).each(function(){
					$.jFinterface.selectOption($(this).val(),$jFwrapSelect);
				});
			});
		},
		initSelect: function($ob,$form){
			$ob.each(function(){
				var width = $(this).width()-21;

				var $select = $(this);
				var $jFwrapSelect = $(this)	.wrap('<span class="jFwrapSelect"></span>')
																		.parent()
																		.css({zIndex:index});

				index=index-2;
				//.replace("Microsoft", "W3Schools")
				$(this).before('<span class="jFwrapSelect-txt"><input type="text" readonly /></span><a href="#" class="jFwrapSelect-btn"></a><div class="jFwrapSelect-lst"><div class="jFwrapSelect-lst-head"><span></span></div><div class="jFwrapSelect-lst-left"><div class="jFwrapSelect-lst-right"><div class="jFwrapSelect-src" jscrollpane-option="scrollbarWidth:5,scrollbarMargin:5,arrowSize:5,showArrows:true"><ul></ul></div></div></div><div class="jFwrapSelect-lst-foot"><span></span></div></div>');
				
				var $list = $('.jFwrapSelect-lst',$jFwrapSelect);
				//////////////////////
				//$('ul',$jFwrapSelect).html($(this).html().replace("/option/g", "li"));
				var dli = false;
				$('option',$select).each(function(){
					$(this).attr("value",$(this).val());
					$('ul',$jFwrapSelect).html($('ul',$jFwrapSelect).html()+'<li class="'+(dli?'alter':'')+'" data="'+$(this).attr("value")+'">'+$(this).text()+'</li>');
					dli=!dli;
				});
				$('ul li:last-child',$jFwrapSelect).addClass("last");
				$('ul li:first-child',$jFwrapSelect).addClass("first");
				//////////////////////
				$jFwrapSelect.hover(function(){
					$(this).addClass("jFwrapSelect-hover");
				},function(){
					$(this).removeClass("jFwrapSelect-hover");
				});
				//////////////////////
				$('a:first',$jFwrapSelect).click(function(){
					if($list.css("visibility")=="visible")
						$list.css({visibility:"hidden"});
					else
					{
						$('.jFwrapSelect',$form)
						.find('.jFwrapSelect-lst')
						.css({visibility:"hidden"});
						$list.css({visibility:"visible"});
					}
					return false;
				});
				//////////////////////
				$('ul li',$jFwrapSelect).each(function(){
					$(this).hover(function(){
						$(this).addClass("hover");
					},function(){
						$(this).removeClass("hover");
					});
					$(this).click(function(){
						$list.css({visibility:"hidden"});
						if($(this).hasClass("selected"))
							return false;
						$("li",$jFwrapSelect).removeClass("selected");
						$("option",$jFwrapSelect).each(function(){$(this)[0].selected = false;});
						if($.jFinterface.selectOption($(this).attr("data"),$jFwrapSelect))
						{
							$('input:text',$jFwrapSelect).val($(this).text());
							$('select',$jFwrapSelect).change();	
							return true;
						}
						return false;
					});
				});
				//////////////////////
				var subwidth = $(this).attr("subwidth")||width+25;
				var subheight = $(this).attr("subheight")?$(this).attr("subheight"):'';
				$('.jFwrapSelect-txt input:text',$jFwrapSelect).width(width);
				$('.jFwrapSelect-lst',$jFwrapSelect).width(subwidth);
				if(subheight!=='')
				$('.jFwrapSelect_src',$jFwrapSelect).height(subheight);
				//////////////////////
				$.jFinterface.selectOption($('option:selected',$jFwrapSelect).val(),$jFwrapSelect);
				$('input:text',$jFwrapSelect).val($('option:selected',$jFwrapSelect).text());
			});
		},
		resetSelect: function($ob){
			$ob.each(function(){
				var $op = $('option:selected',$(this));
				$("li",$(this)).removeClass("selected");
				$("option",$(this)).each(function(){$(this)[0].selected = false;});
				if($.jFinterface.selectOption($op.val(),$(this)))
					$('input:text',$(this)).val($op.text());
			});
		},
		resetSelectmul: function($ob){
			$ob.each(function(){
												
				var $wrap = $(this);
				var $op = $('option:selected',$(this));
				$("li",$(this)).removeClass("selected");
				$("option",$(this)).each(function(){$(this)[0].selected = false;});
				
				$op.each(function(){
					$.jFinterface.selectOption($(this).val(),$wrap);
				});
			});
		}
	};
	$.fn.jFinterface = function(){
		this.each(function(){
			var $form = $(this);
			var $pure = $('*[noFinterface*=""] *,*[noFinterface] *',$form);
			/*********************Action default ***********************/
			$form.click(function(){
				$('.jFwrapSelect',$form).not('.jFwrapSelect-hover')
				.find('.jFwrapSelect-lst').css({visibility:"hidden"});
			});
			$('input:reset',$form).not($pure).click(function(){
				return $.jFinterface.resetForm($form);
			});
			/**************** Textfield & Password ****************/
			$.jFinterface.initTextField($('input:text,input:password',$form)
																		.not($pure));
			/**************** Button ****************/
			$.jFinterface.initButton($('input:submit,input:reset,input:button,button',$form)
																 .not($pure));
			/**************** Checkbox ****************/
			$.jFinterface.initCheckbox($('input:checkbox',$form)
																	 .not($pure));
			/**************** Radio ****************/
			$.jFinterface.initRadio($('input:radio',$form)
																.not($pure),$form);
			/**************** Textarea ****************/
			$.jFinterface.initTextarea($('textarea',$form)
																	 .not($pure));
			/**************** Fileupload ****************/
			$.jFinterface.initFileupload($('input:file',$form)
																		 .not($pure));
			/**************** Select ****************/
			$.jFinterface.initSelect($('select',$form)
																 .not('select[multiple]')
																 .not($pure),$form);
			/**************** Select multiple ****************/
			$.jFinterface.initSelectmultiple($('select[multiple]',$form)
																 .not($pure),$form);
			/**************** End ****************/
		});
		return this;
	}
})(jQuery);