/**
*jQuery Plugin - Grid 9
*/
(function($){
	function onload(){
		$('.grid9').grid9();
	}
	/**
	*@param  object options{
	*					url: /path/to/images/image*.png		URL Pather
	*					useCenter: TRUE || FALSE			Determines if the center slice is used 
	*					fill: TRUE || FALSE					If TRUE the wrapping grid9 div will have is width and height set to 100%.
	*														If center is set to TRUE fill is force to TRUE
	*					center: TRUE || FALSE				If TRUE the content is center horizontaly and verticaly in a table cell
	*					inner: TRUE || FLASE				If TRUE the contents of element is wrapped in a grid 9
	*					innerId: string						ID givin to inner content container
	*					width: px							border width
	*					widthH: px							horizontal border width
	*					widthV: px							vertical border width
	*					widthT: px							top border width
	*					widthR: px							right border width
	*					widthB: px							bottom border width
	*					widthL: px							left border width
	*				}
	*/
	$.fn.grid9=function(options){
		var opts=options;
		this.each(function(){
			var content=$(this);
			if(content.data('grid9'))
				return;
			content.data('grid9',true);
			
			options={
				url:content.attr('grid9-url'),
				useCenter:content.attr('grid9-useCenter')===undefined || content.attr('grid9-useCenter')=='1',
				fill:content.attr('grid9-fill')=='1',
				center:content.attr('grid9-center')=='1',
				inner:content.attr('grid9-inner')=='1',
				innerId:content.attr('grid9-innerId'),
				width:content.attr('grid9-width'),
				widthH:content.attr('grid9-widthH'),
				widthV:content.attr('grid9-widthV'),
				widthT:content.attr('grid9-widthT'),
				widthR:content.attr('grid9-widthR'),
				widthB:content.attr('grid9-widthB'),
				widthL:content.attr('grid9-widthL')
			}
			if(options.center)
				options.fill=true;
			if(opts)
				$.extend(options,opts);
			
			var outter=null;
			if(options.inner){
				outter=content;
				outter.wrapInner('<span class="grid9-inner'+(content.hasClass('no-br')?' no-br':'')+'" />');
				content=outter.children();
				if(options.innerId)
					content.attr('id',options.innerId);
				content.remove();
			}
			
			
			content.wrap(
				'<'+((content.css('display')==='block' || options.fill)?'div':'span')+' class="grid9-wrapper'+(options.fill?' grid9-fill':'')+'"/>'
			);
			var container=content.parent();
			
			var bg=$(	'<div class="grid9-bg-host"><table class="grid9-bg">'+
						'<tr><td class="grid9-tl">&nbsp;</td><td class="grid9-t">&nbsp;</td><td class="grid9-tr">&nbsp;</td></tr>'+
						'<tr><td class="grid9-l">&nbsp;</td><td class="grid9-c">&nbsp;</td><td class="grid9-r">&nbsp;</td></tr>'+
						'<tr><td class="grid9-bl">&nbsp;</td><td class="grid9-b">&nbsp;</td><td class="grid9-br">&nbsp;</td></tr>'+
						'</table></div>'
			);
			var w=options.width===undefined?10:options.width;
			var bt=w;
			var br=w;
			var bb=w;
			var bl=w;
			
			if(options.widthH!==undefined){
				bt=options.widthH;
				bb=options.widthH;
			}
			if(options.widthV!==undefined){
				bl=options.widthV;
				br=options.widthV;
			}
			if(options.widthT!==undefined)
				bt=options.widthT;
			if(options.widthR!==undefined)
				br=options.widthR;
			if(options.widthB!==undefined)
				bb=options.widthB;
			if(options.widthL!==undefined)
				bl=options.widthL;
			bg.find('.grid9-tl').css({
				width:bl,
				height:bt,
				"background-image":'url('+options.url.replace('*','tl')+')'
			});
			bg.find('.grid9-t').css({
				height:bt,
				"background-image":'url('+options.url.replace('*','t')+')'
			});
			bg.find('.grid9-tr').css({
				width:br,
				height:bt,
				"background-image":'url('+options.url.replace('*','tr')+')'
			});
			bg.find('.grid9-l').css({
				width:bl,
				"background-image":'url('+options.url.replace('*','l')+')'
			});
			if(options.useCenter){
				bg.find('.grid9-c').css({
					"background-image":'url('+options.url.replace('*','c')+')'
				});
			}
			bg.find('.grid9-r').css({
				width:br,
				"background-image":'url('+options.url.replace('*','r')+')'
			});
			bg.find('.grid9-bl').css({
				width:bl,
				height:bb,
				"background-image":'url('+options.url.replace('*','bl')+')'
			});
			bg.find('.grid9-b').css({
				height:bb,
				"background-image":'url('+options.url.replace('*','b')+')'
			});
			bg.find('.grid9-br').css({
				width:br,
				height:bb,
				"background-image":'url('+options.url.replace('*','br')+')'
			});
			content.before(bg);
			
			
			
			if(options.center){
				var center=$('<table class="grid9-center grid9-fill"><tbody><tr><td></td></tr></tbody></table>');
				container.append(center);
				center.find('td').append(content);
			}
			
			if(outter){
				outter.append(container);
			}
			
		});
	}
	
	
	$(onload);
	
})(jQuery);