// jcbox
// written by James Chalmers September 2009
// www.mtcmedia.co.uk
// v 1.05

// lastest update changelog:
//# added margin support
//# support for inline positioning.

jQuery.fn.jcbox = function (options) {

	var options = jQuery.extend( {

	},options);
	
	this.each(function(){
			
		// start iterating
		
		// get heights and widths
		var boxheight = $(this).outerHeight(false)+10;
		var boxwidth = $(this).outerWidth(false)+10;
		
		// we're going to wrap this in a div
		var boxid = 'box_'+Math.floor(Math.random()*100000);
		var contentid = boxid+'_content';
		$(this).attr('id', contentid);
		
		// remove any existing box first
		//$('[id^="box_"] > #'+contentid).
		
		$(this).wrap('<div id="'+boxid+'"></div>');
		// wrap it all up again in another container div for positioning purposes. This div
		// should be inline and will retain positional css from the $(this) as well as have a class of
		// $(this).attr('class')+'_jcbox' for later reference by jquery / elements
		$('#'+boxid).wrap('<div id="'+boxid+'_container" jcbox="'+$(this).attr('class')+'_jcbox"></div>');
		
		// do clearfixes		
		$('#'+boxid+', #'+boxid+'_container').append('<div class="jcbox_clear"> </div>');
		
		
		// transfer positional css
		$('#'+boxid+'_container').css({
			
			float: $(this).css('float'),
			position : $(this).css('position'),
			top : $(this).css('top'),
			right : $(this).css('right'),
			bottom : $(this).css('bottom'),
			left : $(this).css('left'),
			zoom : 1,
			'margin-top' : $(this).css('margin-top'),
			'margin-right' : $(this).css('margin-right'),
			'margin-bottom' : $(this).css('margin-bottom'),
			'margin-left' : $(this).css('margin-left'),
			'z-index' : $(this).css('z-index'),
			width : boxwidth+'px',
			height : boxheight+'px',
			//display:'block',
			// clear backgrounds from second style etc
			background : ' url()',
			'background-color' : '',
			padding : '0'
			
		});
		
		//clear positional css
		$(this).css({
			
			float: 'left',
			position : 'static',
			top : '0',
			right : '0',
			bottom : '0',
			left : '0',
			margin : '0px',
			'z-index' : $(this).css('z-index')
			
		});
		
		// set boxid height
		$('#'+boxid).css({
			width:boxwidth+'px',
			height:boxheight+'px',
			float:'left',
			zoom:1
		});	
		
		
		// add in the top and left sides
		var topid = boxid+'_top';
		var leftid = boxid+'_left';
		$(this).before('<div id="'+topid+'"> </div> <div id="'+leftid+'"> </div>');
		
		// add in the top-left and top-right boxes
		var topleftid = topid+'_left';
		var toprightid = topid+'_right';
		$('#'+topid).wrap('<div id="'+topid+'_container"></div>');
		$('#'+topid).before('<div id="'+topleftid+'"> </div>').after('<div id="'+toprightid+'"> </div>');
		
		// add in the left-top and left-bottom boxes
		var lefttopid = leftid+'_top';
		var leftbottomid = leftid+'_bottom';
		$('#'+leftid).wrap('<div id="'+leftid+'_container"></div>');
		$('#'+leftid).before('<div id="'+lefttopid+'"> </div>').after('<div id="'+leftbottomid+'"> </div>');
		
		// add in the right and bottom sides
		var rightid = boxid+'_right';
		var bottomid = boxid+'_bottom';
		$(this).after('<div id="'+rightid+'">  </div> <div id="'+bottomid+'">  </div>');
		
		// add in the right-top and right-bottom boxes
		var righttopid = rightid+'_top';
		var rightbottomid = rightid+'_bottom';
		$('#'+rightid).wrap('<div id="'+rightid+'_container"></div>');
		$('#'+rightid).before('<div id="'+righttopid+'"> </div>').after('<div id="'+rightbottomid+'"> </div>');
		
		// add in the bottom-left and bottom-right boxes
		var bottomleftid = bottomid+'_left';
		var bottomrightid = bottomid+'_right';
		$('#'+bottomid).wrap('<div id="'+bottomid+'_container"></div>');
		$('#'+bottomid).before('<div id="'+bottomleftid+'"> </div>').after('<div id="'+bottomrightid+'"> </div>');	
		
		
		// style topid_container
		$('#'+topid+'_container').css({
			width:boxwidth+'px'
		}).addClass('jcbox_top_container');
		
		// style top
		$('#'+topid).css({
			width:(boxwidth-24)+'px'
		}).addClass('jcbox_top');
		
		// style top-left
		$('#'+topleftid).css({
	
		}).addClass('jcbox_top-left');
		
		// style top-right
		$('#'+toprightid).css({
		
		}).addClass('jcbox_top-right');
		
		// style left
		$('#'+leftid+'_container').css({
			height : (boxheight-10)+'px'
		}).addClass('jcbox_left_container');
		
		$('#'+leftid).css({
			height:(boxheight-30)+'px'
		}).addClass('jcbox_left');
		
		// style left-top
		$('#'+lefttopid).css({
			
		}).addClass('jcbox_left-top');
		
		// style left-bottom
		$('#'+leftbottomid).css({
		
		}).addClass('jcbox_left-bottom');
	
		// style right_container
		$('#'+rightid+'_container').css({
			height:(boxheight-10)+'px'
		}).addClass('jcbox_right_container');
		
		// style right-top
		$('#'+rightid).css({
			height:(boxheight-30)+'px'
		}).addClass('jcbox_right');	
		
		// style right-top
		$('#'+righttopid).css({
		}).addClass('jcbox_right-top');
		
		// style right-bottom
		$('#'+rightbottomid).css({
		}).addClass('jcbox_right-bottom');	
	
		// style bottom_container
		$('#'+bottomid+'_container').css({
			width:boxwidth+'px'
		}).addClass('jcbox_bottom_container');
	
		// style bottom
		$('#'+bottomid).css({
			width:(boxwidth-24)+'px'
		}).addClass('jcbox_bottom');
		
		
		// style bottomid_container
		$('#'+bottomid+'_container').css({
			width:boxwidth+'px'
		}).addClass('jcbox_bottom_container');
		
		// style bottom
		$('#'+bottomid).css({
			width:(boxwidth-24)+'px'
		}).addClass('jcbox_bottom');
		
		// style bottom-left
		$('#'+bottomleftid).css({
	
		}).addClass('jcbox_bottom-left');
		
		// style bottom-right
		$('#'+bottomrightid).css({
		
		}).addClass('jcbox_bottom-right');	
	
		/*
		// add in resize support
		 - do this in another version
		$(this).resize(
		function(){
		$(this).jcbox()
		});
		*/
	
		}); // close this.each	
		
	// clear fontsizes for IE
	$('[class^="jcbox_"]').css({
		'font-size' : '0px',
		'line-height' : 0,
		padding : 0,
		margin:0,
		zoom : 1
	});
	
} // close function