$.fn.dynamicBox=function(options){
	var def={
		parentClass: '',
		wrapType: 'top bottom left right middle',
		success: function(wrapper){},
	}
	var settings=$.extend(def,options)
	var parentClass=settings.parentClass
	$(this).each(function(i){
		var elem=$(this)
		if(!elem.parent().hasClass('DB_wrapper')){

			elem.css('background','transparent')
			elem.wrap("<div style='position: relative; width: "+elem.innerWidth()+"px; height: "+elem.innerHeight()+"px'></div>")
			elem.parent().prepend("<div class='DB_wrapper "+parentClass+"'></div>")
			var wrapper=$('.DB_wrapper',elem.parent())
			
			wrapper.css({width: '100%',height: '100%','top':elem.position().top+'px','left':elem.position().left+'px'})
			$.each(settings.wrapType.split(' '),function(i,v){
				if(v=='top' || v=='bottom'){
					wrapper.prepend("<div class='DB_"+v+"'></div>")
					var w=$('.DB_'+v,wrapper)
					w.prepend("<div class='DB_"+v+"_l'></div>")
					.prepend("<div class='DB_"+v+"_r'></div>")
					.prepend("<div class='DB_"+v+"_m'></div>")
					.css({'width':'100%','position':'absolute','padding':0})
					if(v=='top'){w.css('top',0)}else{w.css('bottom',0)}
					wL=$('.DB_'+v+'_l',w)
					wR=$('.DB_'+v+'_r',w)
					wM=$('.DB_'+v+'_m',w)
					wL.css({'top':0,'left':0})
					wR.css({'top':0,'right':0})
					wM.css({'top':0,'left':wL.width()+'px','right':wR.width()+'px'})
					$('> div',w).css('position','absolute')
				}else if(v=='right' || v=='left'){
					wrapper.prepend("<div class='DB_"+v+"' style='position: absolute'></div>")
					var w=$('.DB_'+v,wrapper)
					var tT=$('.DB_top',wrapper).length>0? $('.DB_top',wrapper).height() : 0
					var tB=$('.DB_bottom',wrapper).length>0? $('.DB_bottom',wrapper).height() : 0
					w.css({'top':tT+'px', 'bottom':tB+'px'})
					if(v=='left'){w.css('left',0)}else{w.css('right',0)}
				}
				else if(v=='middle'){
					wrapper.prepend("<div class='DB_middle' style='position: absolute'></div>")
					var w=$('.DB_middle',wrapper)
					var tT=$('.DB_top',wrapper).length>0? $('.DB_top',wrapper).height() : 0
					var tB=$('.DB_bottom',wrapper).length>0? $('.DB_bottom',wrapper).height() : 0
					var tL=$('.DB_left',wrapper).length>0? $('.DB_left',wrapper).width() : 0
					var tR=$('.DB_right',wrapper).length>0? $('.DB_right',wrapper).width() : 0
					w.css({'top':tT+'px', 'bottom':tB+'px', 'left':tL+'px', 'right':tR+'px'})
				}
			})
			settings.success(wrapper)
			
			//EFFECTS
			elem.focus(function(){
				wrapper.addClass('active')
				$(this).mouseover(function(){
					wrapper.removeClass('hover')
				})
				wrapper.removeClass('hover')
			})
			elem.blur(function(){
				wrapper.removeClass('active')
				$(this).mouseover(function(){
					wrapper.addClass('hover')
				})
			})
			elem.mouseover(function(){
				wrapper.addClass('hover')
			})
			elem.mouseout(function(){
				wrapper.removeClass('hover')
			})
		}
	})
}