$.fn.extend({
		buildMagicForm:function(){
			
			$(this).find('form').attr("onsubmit", '').submit(function(){return $(this).validateForm();});
			
			$(this).find("input, select, textarea").each(
				function(index, element){												
					if( this.tagName == 'SELECT' ){
						$(this).wrap('<div class="input-left" />').wrap('<div class="input-right" />').before("<input type='text' class='select-text' style='width:"+$(this).width()+"px;'><a class='select-button' href='javascript:;'></a>");												
									
						$(this).focus(function(){$(this).parent().parent().parent().parent().addClass("focus");})
						   .blur(function(){$(this).parent().parent().parent().parent().removeClass("focus");}).change(function(){$(this).prevAll("input").val($(this).children("option:selected").text());}).change();
						
					}else if(this.tagName == 'INPUT'){	
					
						if($(this).is("input[type='text']")){
							$(this).wrap('<div class="input-left" />').wrap('<div class="input-right" />');	
							$(this).focus(function(){$(this).parent().parent().parent().parent().addClass("focus");})
							   .blur(function(){
											  	$(this).parent().parent().parent().parent().removeClass("focus");
												$(this).validateField();
											});
						}else if($(this).is("input[type='file']")){
							
							$(this).wrap('<div class="input-left" />').wrap('<div class="input-right" />').before("<input type='text' class='select-text' style='width:"+parseInt(parseInt($(this).width())-100)+"px;'><a class='browse-button' style='left:"+parseInt(parseInt($(this).width())-90)+"px;' href='javascript:;'>Browse</a>");
							$(this).addClass('input-type-file').change(function(){$(this).prevAll("input[type='text']").val($(this).val());}).mouseover(function(){$(this).prevAll("a.browse-button").addClass('browse-button-hover');}).mouseout(function(){$(this).prevAll("a.browse-button").removeClass('browse-button-hover');});
							
							//$(this).wrap('<div class="input-left" />').wrap('<div class="input-right" />');	
							$(this).focus(function(){$(this).parent().parent().parent().parent().addClass("focus");})
							   .blur(function(){$(this).parent().parent().parent().parent().removeClass("focus");});
						
						}else if($(this).is("input[type='submit']") || $(this).is("input[type='reset']")){
							//$(this).css("display", "none").after($("<a class='btn'>"+$(this).val()+"</a>").click(function(){$(this).prev("input").click();}));							
							$(this).addClass('btn');							
						}
						
						
					}else if(this.tagName == 'TEXTAREA'){
						$(this).wrap('<div class="textarea-top-l" />').wrap('<div class="textarea-center-l" />').wrap('<div class="textarea-center-r" />').parent().parent().before('<div class="textarea-top-r"></div>').after('<div class="textarea-bottom-l"><div class="textarea-bottom-r"></div></div>');
																	
						$(this).focus(function(){$(this).parent().parent().parent().parent().parent().addClass("focus");})
						       .blur(function(){$(this).parent().parent().parent().parent().parent().removeClass("focus");});
					}
					
					
				});  
						  
				$(this).find('.element').each(function(){									   
					   if($(this).prev('label').length) if(parseInt($(this).prev('label').width()) > 100)$(this).css("clear", "left");
			   });	  
		},
		
		
		validateForm:function(){
			var rtrn = true;
			$(this).find("input[type='text'], select, textarea").each(
																	  function(index, element){
																		if(!$(this).validateField())rtrn = false;
																	  }
																	 );
			return rtrn;
			
		},
		
		validateField:function(){
			if($(this).attr('datatype') != undefined){
				var regex = '';				
				var datatype = $(this).attr('datatype').toLowerCase();
				
				var parts = [];
				if(datatype.indexOf(',') != -1)	parts = datatype.split(',');	
				else 							parts[0] = 	datatype;
				
				for(x in parts){
					datatype 	= parts[x]
					var value 	= $(this).val();
					
					
					switch (datatype){
						case "required":
							regex = new RegExp(/^\S+$/);
							break;
	
						case "numeric":
							regex = new RegExp(/^[\d\-\.\s]+$/);
							break;
	
						case "email"  :
							regex = new RegExp(/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/);
	;						break;
	
						case "mobile" :
							regex = new RegExp(/^[\d]{10}$/);
	;						break;
						
						case "url" 	  :
							regex = new RegExp(eval('/^(http|https|ftp)\://[a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,3}(:[a-zA-Z0-9]*)?/?([a-zA-Z0-9\-\._\?\,\'/\\\+&amp;%\$#\=~])*[^\.\,\)\(\s]$/'));
	;						break;
	
						default	      :
							try{
								regex = new RegExp(eval(datatype));
								datatype = "";
							}catch(e){alert($(this).attr('name')+" regex error ");}
							break;
	
					}
					
					var msg = $(this).attr(datatype+'msg') != undefined ? $(this).attr(datatype+'msg') : $(this).attr('name')+" has unknown data type error ";
					
					if (!value.match(regex)) {
						$(this).setError(msg);
						return false;
					}else $(this).setError($(this).getError().replace(msg, ''));
				}
				
			}
			return true;
		}, 
		
		setError:function(msg){
			if($(this).parent().parent().next('.error-message').length)$(this).parent().parent().next('.error-message').text(msg);
			else alert(msg);
		},
		
		getError:function(){
			return $(this).parent().parent().next('.error-message').text();
		}
		
		
		
		
		
	});