$(document).ready(function() {
	$("div[@class=source]").each(function(){		
		var source = $("pre", this).html()
			.replace(/<\/?a.*?>/ig, "")
			.replace(/<\/?strong.*?>/ig, "")
			.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&");
		var iframe = document.createElement("iframe");
		iframe.src = "/index-blank.html";
		iframe.width = "100%";
		iframe.frameborder = "0";
		iframe.scrolling = "no";
		iframe.style.border = "none";
		$(this).wrap("<div class='example'></div>");
		$(this).before('<ul class="tabs-nav"></ul>');
		$(this).before('<div class="demo"></div>');
		$(this).prev().append(iframe);
		$(window).load(function(){
			var doc = iframe.contentDocument || iframe.contentWindow.document;
			source = source
				.replace("$(document).ready(function(){", "window.onload = (function(){try{")
				.replace(/}\);\s*<\/sc/, "}catch(e){}});</sc")
				//.replace("</head>", "<style>html,body{border:0; margin:0; padding:0;}</style></head>");
			doc.open();
			doc.write( source );
			doc.close();
		});
		$('iframe').load(function(){this.height = this.contentWindow.document.body.offsetHeight  + 36 + 'px';});
		
		var tabs1 = '<li><a href="#demo';
		var tabs2 = '">Live Demo</a></li><li><a href="#source';		
		var tabs3 = '">View Source</a></li><b>ex.';	
		var tabs4 = '</b>';
		$(".example").attr("id", function (arr) {
          return "example" + arr;
        })
        .each(function (arr) {
			$(".demo", this).attr("id", "demo"+arr);
			$(".source", this).attr("id", "source"+arr);
			//$("a[href=#demo]", this).attr("href", "#demo_"+arr);
			//$("a[href=#source]", this).attr("href", "#source_"+arr);	
			$(".tabs-nav", this).html(tabs1+arr+tabs2+arr+tabs3+arr+tabs4);
			$('#example'+arr).tabs();
		});
	});
});