generate 8side css

generic_8side_css.css

v\:*{
behavior:url(#default#VML);
}

generic_8side_css.js

window.addEvent('domready', function(){
	html='<div class="top">'+
			'<div class="tl"></div>'+
			'<div class="t"></div>'+
			'<div class="tr"></div>'+
		'</div>'+
		'<div class="center">'+
			'<div class="l"></div>'+
			'<div class="c"></div>'+
			'<div class="r"></div>'+
		'</div>'+
		'<div class="bottom">'+
			'<div class="bl"></div>'+
			'<div class="b"></div>'+
			'<div class="br"></div>'+
		'</div>';
	if(Browser.Engine.trident){
		if(Browser.Engine.version==4){
			$(document.body).addClass('ie6');
		}
		if(Browser.Engine.version<6){
			document.namespaces.add("v","urn:schemas-microsoft-com:vml");
		}else{
			document.namespaces.add("v","urn:schemas-microsoft-com:vml","#default#VML"); 
		}
		vml='<v:rect style="width:4000px; height:4000px; position:absolute; visibility:hidden; left:-1px; top:-1px;" coordsize="21600,21600" fillcolor="none" stroked="f"><v:fill src="" type="tile"  position="0.00025, 0.00025" style="left:-1px; top:-1px"></v:fill></v:rect>';
		html='<div class="top">'+
			'<div class="tl">'+vml+'</div>'+
			'<div class="t">'+vml+'</div>'+
			'<div class="tr">'+vml+'</div>'+
		'</div>'+
		'<div class="center">'+
			'<div class="l">'+vml+'</div>'+
			'<div class="c">'+vml+'</div>'+
			'<div class="r">'+vml+'</div>'+
		'</div>'+
		'<div class="bottom">'+
			'<div class="bl">'+vml+'</div>'+
			'<div class="b">'+vml+'</div>'+
			'<div class="br">'+vml+'</div>'+
		'</div>';
	}
	
	for(var i=0;i<1;i++){
		var div=new Element('div', {'class': 'test'}).inject('t');
		div.set('html', html);
		div;
		if(Browser.Engine.trident){
			div.getElements('div div').each(function(div){
				var src=div.getStyle('backgroundImage').replace(/url\(['"]?(.*?)['"]?\)/, function(full, match){
					return match;
				});
				div.style.background='none';
				var rect=div.getElementsByTagName('rect')[0];
				var fill=div.getElementsByTagName('fill')[0];
				rect.fillcolor="none";
				rect.style.visibility="visible";
				//fill.opacity=0.8;
				fill.src=src;
			});
		}
	}
	$('t').makeDraggable({
		onDrag: function(){
			//this.element.setStyle('width', this.element.offsetWidth-1).setStyle('width', this.element.offsetWidth+1);
		}
	});

});

generic_8side_css.py

#!python

f=open('result.css', 'w')

cls='test'
ie6='.ie6'


coords=(50, 50, 50, 50)

left, top, right, bottom = map(str, coords)

padding_left='0'
padding_top='0'
l='-10'
t='-10'

img='split/test-'
ext='png'

imgs={
	"tl": img+'tl'+'.'+ext,
	"tr": img+'tr'+'.'+ext,
	"bl": img+'bl'+'.'+ext,
	"br": img+'br'+'.'+ext,
	"t": img+'t'+'.'+ext,
	"b": img+'b'+'.'+ext,
	"l": img+'l'+'.'+ext,
	"r": img+'r'+'.'+ext,
	"c": img+'c'+'.'+ext
}

css=''
css+='.'+cls+', .'+cls+' div{\n'+'position: absolute;\n'+'overflow:hidden;\n'+'}\n'
css+='.'+cls+' {\n'+'left:'+l+'px;\n'+'top:'+t+'px;\n'+'padding-left:'+padding_left+'px;\n'+'padding-top:'+padding_top+'px;\n'+'}\n'
#css+=ie6+' '+'.'+cls+' {\n'+'overflow-y:hidden;\n'+'}\n'
css+='.'+cls+' .top{\n'+'height: '+top+'px;\n'+'width: 100%;\n'+'position: relative;\n'+'top:-'+padding_top+'px;\n'+'padding-left:'+padding_left+'px;\n'+'padding-top:'+padding_top+'px;\n'+'left:-'+padding_left+'px;\n'+'}\n'
css+='.'+cls+' .center{\n'+'height: 100%;\n'+'width: 100%;\n'+'position: relative;\n'+'top:-'+str(2*int(bottom)+2*int(padding_top))+'px;\n'+'padding-left:'+padding_left+'px;\n'+'padding-top:'+padding_top+'px;\n'+'left:-'+padding_left+'px;\n'+'}\n'
css+='.'+cls+' .bottom{\n'+'height: '+bottom+'px;\n'+'width:100%;\n'+'top:-'+str(2*int(bottom)+2*int(padding_top))+'px;\n'+'position:relative;\n'+'padding-left:'+padding_left+'px;\n'+'left:-'+padding_left+'px;'+'}\n'
css+='.'+cls+' .tl{\n'+'width: '+left+'px;\n'+'height: '+top+'px;\n'+'background:'+'url("'+imgs['tl']+'")'+';\n'+'left:0px;\n'+'top:0px;\n'+'}\n'
css+='.'+cls+' .tr{\n'+'width: '+right+'px;\n'+'height: '+top+'px;\n'+'float:right;\n'+'position: relative;\n'+'background:'+'url("'+imgs['tr']+'");\n'+'top:-'+padding_top+'px;\n'+'}\n'
css+='.'+cls+' .t{\n'+'height: '+top+'px;\n'+'width:100%;\n'+'left:-'+str(int(right)+int(padding_left))+'px;\n'+'top: 0;\n'+'clip:rect(auto auto auto '+str(int(left)+int(right)+int(padding_left))+'px);\n'+'background:'+'url("'+imgs['t']+'")'+';\n'+'padding-left:'+padding_left+'px;\n'+'}\n'
css+=ie6+' '+'.'+cls+' .t{\n'+'left:-'+right+'px;\n'+'clip:rect(auto auto auto '+str(int(left)+int(right))+'px);\n'+'}\n'
css+='.'+cls+' .bl{\n'+'width: '+left+'px;\n'+'height: '+bottom+'px;\n'+'background:'+'url("'+imgs['bl']+'");\n'+'left:0px\n'+'}\n'
css+='.'+cls+' .br{\n'+'width: '+right+'px;\n'+'height: '+bottom+'px;\n'+'float: right;\n'+'position: relative;\n'+'background:'+'url("'+imgs['br']+'")'+';\n'+'}\n'
css+='.'+cls+' .b{\n'+'height: '+bottom+'px;\n'+'width:100%;\n'+'left:-'+str(int(right)+int(padding_left))+'px;\n'+'clip:rect(auto auto auto '+str(int(left)+int(right)+int(padding_left))+'px);\n'+	'background:'+'url("'+imgs['b']+'");\n'+'padding-left:'+padding_left+'px;\n'+'}\n'
css+=ie6+' '+'.'+cls+' .b{\n'+'left:-'+right+'px;\n'+'clip:rect(auto auto auto '+str(int(left)+int(right))+'px);\n'+'}\n'
css+='.'+cls+' .l{\n'+'height:10000px;\n'+'width:'+left+'px;\n'+'left:0;\n'+'top:'+str(int(top)+int(bottom))+'px;\n'+'background:'+'url("'+imgs['l']+'")'+';\n'+'}\n'
css+='.'+cls+' .r{\n'+'height:10000px;\n'+'width:'+right+'px;\n'+'top:'+str(int(top)+int(bottom)-int(padding_top))+'px;\n'+'float:right;\n'+'position:relative;\n'+'background:'+'url("'+imgs['r']+'")'+';\n'+'}\n'
css+='.'+cls+' .c{\n'+'height: 10000px;\n'+'width:100%;\n'+'left:-'+str(int(right)+int(padding_left))+'px;\n'+'top:'+str(int(top)+int(bottom))+'px;\n'+'clip:rect(auto auto auto '+str(int(left)+int(right)+int(padding_left))+'px);\n'+'background:'+'url("'+imgs['c']+'");\n'+'padding-left:'+padding_left+'px;\n'+'}\n'
css+=ie6+' '+'.'+cls+' .c{\n'+'left:-'+right+'px;\n'+'clip:rect(auto auto auto '+str(int(left)+int(right))+'px);\n'+'}\n'


f.write(css)