var isfont =false;

var vwidth, vtableft, vulpaddingleft;
var vulpaddingleft = "0px";
var vmarginright = "0px";

function calValues() {

ut = getUnit();

var r = (ut=="em") ? getfontSizeRadio() : 1;

ve = x3.startlength;
var vw = x1.startlength;



var up = (ut=="em") ? r : 1;

vwidth = vw/up + ut;
vmarginright = ve/up + ut;
vulpaddingleft=x2.startlength/up+ut;

var i=t4.activetab1;
var t = $("tabco4");
var em = $$(t,"div")[i];

t.style.width = vwidth;

em.style.width = (ut=="%") ? "100%" : vwidth;

vtableft = (ut=="px") ? parseInt((w-vw)/2) + ut : formatDecimals((w-vw)/2/up,2)+ ut;
t.style.left = ($("center").checked==true) ? vtableft : "0px";

t4.width=vwidth;
//var ul =$$(t,"ul")[0];
var ul = getUL("tabco4","t");
ul.style.paddingLeft = vulpaddingleft;
var vborder = t4.border;

var li = $$(ul,'li');

li[0].style.borderLeft = vborder;
li[0].style.marginRight = vmarginright;


for(var i=1; i<li.length; i++){
	li[i].style.marginRight = vmarginright;

	li[i].style.borderLeft = (ve==0) ? "#fff 0px" : vborder;
}

//if (ie6()) 
writetotxtarea ();
}

var vmainheight="200px";
var mmh =200;
function changeheight() {


mmh = parseInt($("heitm").value);

vmainheight =((mmh !="NaN") && (mmh >0)) ? "   height: " + mmh + "px;"+ "\n" : "";

if (vmainheight!="") {

var i=t4.activetab1;
var t = $("tabco4");
var em = $$(t,"div")[i];

t.style.height = mmh + "px";



em.style.height = mmh + "px";


}
writetotxtarea();


}




var tabid;

function writetotxtarea() {

var str = $("html0").value;
var vclass = str.match(/[\"\'](\w+)[\"\']/g);
if (vclass.length==1) {
    ctabid = vclass[0].replace(/\"/g,"");    
    
}
else
{
    ctabid = "tabco";
   
}


tmpcode =   ".content " + "{" + "\n"
			+ "   clear: both;" + "\n"
            + "   border: " + t4.border + ";" + "\n"     
            + "   background-color: " + t4.bkcolor + ";" + "\n"
            + "   width: " + vwidth + ";" + "\n"
            + "   height: " + mmh+"px"  + ";" + "\n"
            + "}" + "\n"
            + ".ulnofloat " + "{" + "\n"
            + "   list-style-type: none;" + "\n"     
            + "   padding-left: " + vulpaddingleft + ";" + "\n"
            + "   margin: 0px;" + "\n"
            + "}" + "\n"
            + ".ullifloat " + "{" + "\n"
            + "   float : left;" + "\n"
            + "   padding-left: opx" + ";" + "\n"
            + "   border-right:  " + t4.border+ ";" + "\n"
            + "   background-color: " + t4.tabcolor + ";" + "\n"
            + "   margin-right: " + vmarginright + ";" + "\n"
            + "}" + "\n"
            + ".ula " + "{" + "\n"
            + "   position: relative;" + "\n"
            + "   text-decoration: none;" + "\n"
            + "   display: block;" + "\n"
            + "   padding: 5px 10px;" + "\n"
            + "   cursor: pointer;" + "\n"
            + "   font: bold 11px arial, sans-serif;" + "\n"
            + "   color: " + clout + ";" + "\n"
            + "}" + "\n"	
            + "#" + ctabid + "{" + "\n"
            + "   position: relative;" + "\n"
            + "   left : " + vtableft + ";" + "\n"
            + "   width: " + vwidth + ";" + "\n"
            + "   background-color: " + containercolor + ";" + "\n"
            + "   border-right: " + containercolor  + " 2px solid;" + "\n" 
            + "}" + "\n"
            + "#" + ctabid + " ul a:hover {" + "\n" 
            + "   color: " + clover + ";" + "\n" 
			+ "}" + "\n"
			
//outputcode();
$("css0").value = tmpcode;
jscode = $("js0").value.replace(/containercolor\s*=\s*\"(#\w+)"/,'containercolor="'+ containercolor + '"');
jscode = jscode.replace(/border\s*=\s*\"#\w+\s+\dpx\s+solid"/,'border="'+ t4.border + '"');
jscode = jscode.replace(/conbkcolor\s*=\s*\"(#\w+)"/,'conbkcolor="'+ t4.bkcolor + '"');
jscode = jscode.replace(/tabbk\s*=\s*\"(#\w+)"/,'tabbk="'+ t4.tabcolor + '"');
//jscode = jscode.replace(/tabeventxxx/,t4.eventType);
var ee = jscode.match(/\d+\,\"\w+/).toString().replace(/\d+\,\"/,"");
////.replace(/\d+\,\"/,"")
//ee = ee.substring(3,ee.length);

var re = new RegExp('"'+ee+'"', "");
jscode =jscode.replace(re,'"'+t4.eventType+'"');
var ee = jscode.match(/\("\w+/).toString().replace(/\("/,"");
var re = new RegExp('"'+ee+'"', "");
jscode =jscode.replace(re,'"'+ctabid+'"');

//var re = new RegExp("return\s[\(]id==\"(\w+)", "");
//var myArray = re.exec(jscode);
//var ee =RegExp.$1;
var ee = jscode.match(/return\s[\(]id==\"(\w+)/g).toString().replace(/return\s[\(]id==\"/,"");

var re = new RegExp('"'+ee+'"', "");
jscode =jscode.replace(re,'"'+ctabid+'"');
$("js0").value=jscode;

}


var clout="#c00000";
var clover ="#0062e6";
var containercolor = "#6699cc";
function outputcode() {
if ( tmpcode==null) return;
var csscode,js;
		


csscode = "<style type='text/css'>" + "\n"	+ tmpcode + "</style>";		
js = "<script type='text/javascript'>" + "\n"	+ jscode + "</script>";	
var html = layouthtml()
if ($("is_html").checked==true) {

csscode = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">' + "\n"
			+ '<html xmlns="http://www.w3.org/1999/xhtml">' + "\n"
			+ '<head>' + "\n"
			+ '<title>Content navigation tab - pagecolumn.com</title>' + "\n"
			+ csscode
			+ js
			+ '</head>' + "\n"
			+ '<body>' + "\n"
			+ html
			+ '</body>' + "\n"
			+ '</html>' + "\n";
			
$("css0").value = csscode;

}
else
$("css0").value = tmpcode;


}



var tmpcode,jscode;
function layouthtml() {
var str='';
str+='	<div id="'+ctabid + '">' + "\n";
str+='	    <div>content tab1<\/div>' + "\n";
str+='	    <div>content tab2<\/div>' + "\n";
str+='	    <div>content tab3<\/div>' + "\n";
str+='	    <div>content tab4<\/div>' + "\n";
str+='	    <ul>' + "\n";
str+='	         <li><a href="javascript:vd()">tab 1</a></li>' + "\n";
str+='	         <li><a href="javascript:vd()">tab 2</a></li>' + "\n";
str+='	         <li><a href="javascript:vd()">tab 3</a></li>' + "\n";
str+='	         <li><a href="javascript:vd()">tab 4</a></li>' + "\n";
str+='	    <\/ul>' + "\n";
str+='	 <\/div> '+ "\n";

return str;
}

function fontunit(e) {
e = (e) ? e : ((window.event) ? window.event : "");
var o = getTargetElement(e); 
var uod = utfont;
var unew = o.innerHTML;
utfont = unew;
o.parentNode.parentNode.getElementsByTagName("span")[0].innerHTML = unew;

var y4 = unitconversion2(x4.startlength, uod, unew);
x4.startlength =y4;

var vmin = getstartValues(utfont,3);
var vmax = getstartValues(utfont,4);

Draggable("font",y4,sldcolor,vmin,vmax,150,utfont);  
//x4 = new slider("font",0.9,"#b4d2f7",0.5,1,150,"em"); 

}

function unitclick(e) {
e = (e) ? e : ((window.event) ? window.event : "");
var o = getTargetElement(e); 
if (ut!=o.id) {
var u =ut;
ut = o.id;

var y1 = unitconversion(x1.startlength, u, ut);
x1.startlength =y1;
var y2 = unitconversion(x2.startlength, u, ut);
x2.startlength =y2;
var y3 = unitconversion(x3.startlength, u, ut);
x3.startlength =y3;
//alert(t4.width)
t4.width = unitconversion(parseFloat(t4.width), u, ut) +ut;
//alert(t4.width)
w = getstartValues(ut,1);
var g = getstartValues(ut,2);

Draggable("point1",y1,sldcolor,0,w,300,ut);
Draggable("point2",y2,sldcolor,0,w,300,ut); 
Draggable("gap",y3,sldcolor,0,g,150,ut);  
$("emfont").style.display = (ut=="em") ? "block" : "none";
}
}


function  fullscreen(evt) {
 evt = (evt) ? evt : ((window.event) ? window.event : "");
 var elem = getTargetElement(evt);
 
 if (evt.type=='click') {
 if (elem.parentNode.id=="up") {
 $("www").style.display = "none";
 var em = $("tabco2");
 em.style.left ="10px";
 em.style.top="-50px";
 $("ttt").removeChild($("tabco2"));
 document.body.appendChild(em);
 setunit(ut);
 $("tabco2").className = "tabco2p";
 $("tabco2").style.filter='alpha(opacity=85)'; // IE
 $("tabco2").style.opacity='0.85'; // FF
 $("down").style.display = "block";
  
 }
 else {
 $("www").style.display = "block";
 var em = $("tabco2");
 em.style.left ="20px";
 em.style.top="0px";
 document.body.removeChild($("tabco2"));
 $("ttt").appendChild(em);
 setunit(ut);
 $("tabco2").className = "tabco2r";
 $("up").style.display = "block";
 }
 
 elem.parentNode.style.display = "none";
 }
}

function selevent(evt) {

evt = (evt) ? evt : ((window.event) ? window.event : "");

 var elem = getTargetElement(evt);
 
if ($("click").checked) {

t4.eventType = "click";
bindEvent("tabco4", "click");

}else {
t4.eventType = "mouseover";
bindEvent("tabco4", "mouseover");
}

calValues();
}


function bindEvent2(container, e) {


var tp = gettab(container).position;
var ele = $$(getUL(container,tp),'li');

   for(var i=0; i< ele.length; i++){ 

		if (e=="click") {
ele[i].onmouseover = "";
 ele[i].onclick = tabEvent;}
		if (e=="mouseover") { ele[i].onmouseover = tabEvent;} 		
		
		if (e=="") {ele[i].onclick = "";
		ele[i].onmouseout ="";
		}
    
   }

}



function init() {

   var el =  $("unb").getElementsByTagName("li");      
  for(var i=0; i< el.length; i++){
  el[i].onclick = fontunit;
  }

 var el =  $("uns").getElementsByTagName("input"); 
  for(var i=0; i< el.length; i++){
  el[i].onclick = unitclick;
  }  
 var ee =  $("ev").getElementsByTagName("input");
 for(var i=0; i< ee.length; i++){
  ee[i].onclick = selevent;
  }   

var e = $$($("up"),"div");

for(var i=0; i< e.length; i++){ 
e[i].onclick = fullscreen;

}

var ee = $$($("down"),"div");
for(var i=0; i< ee.length; i++){ 
ee[i].onclick = fullscreen;


}
 }

var ww,w,ut,x1,x2,x3,utfont;
var vfont;
var sldcolor = "#33ff33";
window.onload = function(){

start();

ut = "px";

utfont ="em";

vfont = "90%";

$(ut).checked =true;
//ww = parseFloat(window.screen.width);


ww = parseFloat(document.body.clientWidth);

w = getstartValues(ut,1);

var g = getstartValues(ut,2);


x1 = new slider("point1",400,sldcolor,0,w,300,ut);
x1.b(); 
x2 = new slider("point2",0,sldcolor,0,w,300,ut);

x2.b();

x3 = new slider("gap",0,sldcolor,0,g,150,ut);

x3.b();


x4 = new slider("font",0.9,sldcolor,0.5,1,150,utfont);

x4.b();

start();

init();

}

function vd() {
}

function selitem(color, text,colortype) {
this.color =color;
this.text = text;
this.colortype = colortype;
}
var item = new Array;
var t1,t2,t3,t4,t5;

function start() {	

var border = "#cfcfcf 1px solid";
var conbkcolor = "#eee9e9";
var tabbk = "#cfcfcf";

t2 = new Bindtabs("tabco2",0,"click","b",border,tabbk,conbkcolor);
t2.c();
t3 = new Bindtabs("tabco3",1,"click","b",border,tabbk,conbkcolor);
t3.c();

t4 = new Bindtabs("tabco4",1,"mouseover","b",border,tabbk,conbkcolor,"400px");
t4.c();



c0 = new selitem('#000','container bkcolor','bk');
c1 = new selitem('#000','box bkcolor','bk');
c2 = new selitem('#000','box bdcolor','bd');
c3 = new selitem('#000','tab bkcolor','bk');
c4 = new selitem('#000','tab font','cl');
c5 = new selitem('#000','tab hover font','cl');


item = [c0,c1,c2,c3,c4,c5];

}



function getbkColor(obj) {
var str =(obj.currentStyle) ?  obj.currentStyle.backgroundColor : getComputedStyle(obj,'').getPropertyValue('background-color');
return str;
}