$.fn.dynamicBox=function(options){
	var def={
		parentClass: '',
		wrapType: 'top bottom left right middle',
		arrow: '',
		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':'none'})
			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'})
			if(settings.arrow!=''){
				wrapper.prepend("<div class='DB_arrow DB_arrow_top'></div>")
				.prepend("<div class='DB_arrow DB_arrow_right'></div>")
				.prepend("<div class='DB_arrow DB_arrow_bottom'></div>")
				.prepend("<div class='DB_arrow DB_arrow_left'></div>")
				$('.DB_arrow',wrapper).css('position','absolute')
				var arrT=$('.DB_arrow_top',wrapper)
				var arrR=$('.DB_arrow_right',wrapper)
				var arrB=$('.DB_arrow_bottom',wrapper)
				var arrL=$('.DB_arrow_left',wrapper)
				arrT.css('top',0)
				arrR.css('right',0)
				arrB.css('bottom',0)
				arrL.css('left',0)
				if(arrT.position().left==0){arrT.css('left',Math.ceil((wrapper.width()-arrT.width())/2)+'px')}
				if(arrB.position().left==0){arrB.css('left',Math.ceil((wrapper.width()-arrB.width())/2)+'px')}
				if(arrL.position().top==0){arrL.css('top',Math.ceil((wrapper.height()-arrL.height())/2)+'px')}
				if(arrR.position().top==0){arrR.css('top',Math.ceil((wrapper.height()-arrR.height())/2)+'px')}
				if(settings.arrow.search('top')==-1){arrT.css({'width':0,'height':0})}
				if(settings.arrow.search('right')==-1){arrR.css({'width':0,'height':0})}
				if(settings.arrow.search('bottom')==-1){arrB.css({'width':0,'height':0})}
				if(settings.arrow.search('left')==-1){arrL.css({'width':0,'height':0})}
			}
			$.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(settings.arrow!=''){
						w.prepend("<div class='DB_"+v+"_m'></div>")
					}
					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})
					if(settings.arrow!=''){
						var currArr=$('.DB_arrow_'+v,wrapper)
						wM.eq(0).css({'top':0,'left':wL.width()+'px','right':wrapper.width()-currArr.position().left+'px'})
						wM.eq(1).css({'top':0,'left':currArr.position().left+currArr.width()+'px','right':wR.width()+'px'})
					}else{
						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>")
					if(settings.arrow!=''){
						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
					if(settings.arrow!=''){
						var currArr=$('.DB_arrow_'+v,wrapper)
						w.eq(0).css({'top':tT+'px', 'bottom':wrapper.height()-currArr.position().top+'px'})
						w.eq(1).css({'top':currArr.position().top+currArr.height()+'px', 'bottom':tB+'px'})
					}else{
						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,elem)
			
			//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')
			})
		}
	})
}