image1=new Image();image1.src="http://csstxt.com/img/information.gif";
image2=new Image();image2.src="http://csstxt.com/img/start-result.gif";
image3=new Image();image3.src="http://csstxt.com/img/end-result.gif";
image4=new Image();image4.src="http://csstxt.com/img/ic-code.jpg";
function displaytext(what) 
{
	thiselement = document.getElementById(what);
	if (thiselement.style.display=="none" || thiselement.style.display==""){thiselement.style.display="block";thiselement.focus();} 
	else {thiselement.style.display="none";}
}
function dont_displaytext(what) 
{
	thiselement = document.getElementById(what);
	thiselement.style.display="none";
}
function load_new()
{
	if(document.getElementById('step_load').value=='on')new_fct();
	else document.getElementById('step_load').value="off";
}
function load_new_last()
{
	if(document.getElementById('step_load').value=='on')new_fct();
	else document.getElementById('step_load').value="on";
}

function new_fct()
{
		
		var read_text=document.getElementById('zonetext0');
		if(document.getElementById('seecode').value==1)document.getElementById('a1').style.display="none";
		var global_style="";
		var s_b0=document.getElementById('idb0').value;var onoff_value0=document.getElementById('b0val').value;	
		var s_b1=document.getElementById('idb1').value;var onoff_value1=document.getElementById('b1val').value;	
		var s_b2=document.getElementById('idb2').value;var onoff_value2=document.getElementById('b2val').value;	
		var s_b3=document.getElementById('idb3').value;var onoff_value3=document.getElementById('b3val').value;	
		var s_b4=document.getElementById('idb4').value;var onoff_value4=document.getElementById('b4val').value;	
		var s_b5=document.getElementById('idb5').value;var onoff_value5=document.getElementById('b5val').value;	
		var s_b6=document.getElementById('idb6').value;var onoff_value6=document.getElementById('b6val').value;	
		var s_b7=document.getElementById('idb7').value;var onoff_value7=document.getElementById('b7val').value;	
		
		
		if(onoff_value0==1)global_style+=s_b0+";";
		else global_style+="font-weight:normal;";
		if(onoff_value1==1)
		{
			if(onoff_value2==1)
			{
				if(onoff_value5==1)global_style+="text-decoration:"+s_b1+" "+s_b2+" "+s_b5+";";
				else global_style+="text-decoration:"+s_b1+" "+s_b2+";";
			}
			else
			{
				if(onoff_value5==1)global_style+="text-decoration:"+s_b1+" "+s_b5+";";
				else global_style+="text-decoration:"+s_b1+";";
			}
		}
		else if(onoff_value2==1)
		{ 
				if(onoff_value5==1)global_style+="text-decoration:"+s_b2+" "+s_b5+";";
				else global_style+="text-decoration:"+s_b2+";";
		}	
		else if(onoff_value5==1)
		{ 
				global_style+="text-decoration:"+s_b5+";";
		}
		else
		{
				global_style+="";
		}
		
		if(onoff_value3==1)
		{
			if(onoff_value4==1)global_style+=s_b4+";";
			else global_style+=s_b3+";";	
		}
		else
		{	
			if(onoff_value4==1)global_style+=s_b4+";";
			else global_style+="";
		}
		if(onoff_value6==1)
		{
			if(onoff_value7==1)global_style+=s_b7+";";
			else global_style+=s_b6+";";	
		}
		else
		{
			if(onoff_value7==1)global_style+=s_b7+";";
			else global_style+="";
		}
		var text_color=document.getElementById('myInput1').value;
		global_style+="color:"+text_color+";";
		var bg_color=document.getElementById('myInput2').value;
		if(bg_color!="" )
		{
		global_style+="background-color:"+bg_color+";";
		}
		var border_color=document.getElementById('myInput3').value;
		var border_size=document.getElementById('slider5').value;
		var border_content=document.getElementById('bordercontent').value;
		if(border_size>0 && border_color!="" && border_content!="none")
		{
			global_style+="border: "+border_size+"px "+border_content+" "+border_color+";";
		}
		var letter_spacing=document.getElementById('slider1').value;
		global_style+="letter-spacing:"+letter_spacing+"pt;";
		var word_spacing=document.getElementById('slider2').value;
		global_style+="word-spacing:"+word_spacing+"pt;";
		var font_size=document.getElementById('slider3').value;
		var pixel_text=document.getElementById('pixeltext').value;
		var em_text=document.getElementById('emtext').value;
		var pct_text=document.getElementById('pcttext').value;
		if(pixel_text==1)
		{
			global_style+="font-size:"+font_size+"px;";
		}
		else if(pct_text==1)
		{
			global_style+="font-size:"+font_size+"%;";	
		}
		else if(em_text==1)
		{
			global_style+="font-size:"+font_size+"em;";	
		}
		else
		{
			global_style+="font-size:"+font_size+"px;";	
		}
		var align_font=document.getElementById('alignfont').value;
		global_style+="text-align:"+align_font+";";
		var family_font=document.getElementById('familyfont').value;
		global_style+="font-family:"+family_font+";";
		var line_height=document.getElementById('slider4').value;
		global_style+="line-height:"+line_height+";";
		var margin_text=document.getElementById('slider6').value;
		if(margin_text>0 && margin_text!="")global_style+="margin:"+margin_text+"px;";
		var padding_text=document.getElementById('slider7').value;
		if(padding_text>0 && padding_text!="")global_style+="padding:"+padding_text+"px;";
		var width_text=document.getElementById('slider8').value;
		if(width_text>0 && width_text!="")global_style+="width:"+width_text+"px;";
		var height_text=document.getElementById('slider9').value;
		if(height_text>0 && height_text!="")global_style+="height:"+height_text+"px;";
	var end_style="</p>";
	var ptag_text=document.getElementById('ptagtext').value;
	if(ptag_text==1){start_style="<p style=\"";end_style="</p>";}
	else {start_style="<div style=\"";end_style="</div>";}
	var middle_style="\">";
		var i_s="<img border=\"0\" valign=\"absmiddle\" src=\"img/start-result.gif\" alt=\"\">";
		var i_e="<img border=\"0\" valign=\"absmiddle\" src=\"img/end-result.gif\" alt=\"\">";
	/*var see_code="<br /><center><input class=\"bgenerate\" type=\"button\" onclick=\"displaytext('a1');document.getElementById('seecode').value='2';new_fct()\" value=\"Get code\" name=\"getthe_code\">&nbsp;&nbsp;<img src=\"img/ic-code.jpg\" align=\"absmiddle\" alt=\"\"></center>";*/
	var see_code="<br /><br /><center><a href=\"javascript:void(0);\" onclick=\"displaytext('a1');document.getElementById('seecode').value='2';new_fct()\"><img style=\"border:none;\" src=\"img/ic-code.jpg\" align=\"absmiddle\" alt=\"\"></center>";
	
	
	document.getElementById('zonetextnew').innerHTML=i_s+start_style+global_style+middle_style+read_text.value+end_style+i_e+see_code;
	if(document.getElementById('seecode').value==2)
	{
		var plus_text1="<textarea style=\"color:#0F4A73;width:684px;\" onclick=\"text_a.focus();text_a.select();\" id=\"text_a\" cols=\"81\" rows=\"5\">";
		var plus_text2="</textarea>";
		document.getElementById('csscode1').innerHTML=plus_text1+start_style+global_style+middle_style+read_text.value+end_style+plus_text2;
		var plus_text3="<textarea style=\"color:#0F4A73;width:684px;\" onclick=\"text_a.focus();text_b.select();\" id=\"text_b\" rows=\"15\">";
		var plus_text4="</textarea>";		
		if(ptag_text==1)
		{
			var start_e="<html><head>\n<style type=\"text/css\">\n.mycss\n{\n"+global_style+"";
			var middle_e="\n}\n</style>\n</head>\n<body>\n<p class=\"mycss\">"+read_text.value+"</p>\n</body>";
			
			document.getElementById('i1').innerHTML="It creates a css style into the Html Tag &lt;div&gt; like this : &lt;p style=\"...\"&gt;text example&lt;/p&gt;";
			document.getElementById('i2').innerHTML="It creates a stylesheet with a class called .mycss : to use it : &lt;p class=\"mycss\"&gt;text example&lt;/p&gt;";	
			document.getElementById('csscode2').innerHTML=plus_text3+start_e+middle_e+plus_text4;	
			
		}
		else
		{
			var start_e="<html><head>\n<style type=\"text/css\">\n.mycss\n{\n"+global_style+"";
			var middle_e="\n}\n</style>\n</head>\n<body>\n<div class=\"mycss\">"+read_text.value+"</div>\n</body>";
			
			document.getElementById('i1').innerHTML="It creates a css style into the Html Tag &lt;div&gt; like this : &lt;div style=\"...\"&gt;text example&lt;/div&gt;";
			document.getElementById('i2').innerHTML="It creates a stylesheet with a class called .mycss : to use it : &lt;div class=\"mycss\"&gt;text example&lt;/div&gt;";	
			document.getElementById('csscode2').innerHTML=plus_text3+start_e+middle_e+plus_text4;	
			
		}
	document.getElementById('seecode').value="1";
	}
}
window.addEvent('load', function() 
{
	var ex1 = new MooRainbow('myRainbow1', {
		'id': 'mooRainbow1',
		'wheel': true,
		'startColor': [72, 84, 140],
		'onChange': function(color) {$('myInput1').value = color.hex;
		new_fct();
		},
		
		'onComplete': function(color) {
		 
		}

		
	});	
	var ex2 = new MooRainbow('myRainbow2', {
		'id': 'mooRainbow2',
		'wheel': true,
		'startColor': [72, 84, 140],
		'onChange': function(color) {$('myInput2').value = color.hex;
		new_fct();
		},
		
		'onComplete': function(color) {
		}
	});	
	var ex3 = new MooRainbow('myRainbow3', {
		'id': 'mooRainbow3',
		'wheel': true,
		'startColor': [72, 84, 140],
		'onChange': function(color) {$('myInput3').value = color.hex;
		new_fct();
		},
		
		'onComplete': function(color) {
		}
	});
});
Slider.Range = Slider.extend({
	options: { start: 0, end: 150 },
	initialize: function (el, knob, options) {
		this.parent(el, knob, options);
		this.options.steps = this.options.end - this.options.start;
		return this;
	},
	set: function (step) {
		this.step = step.limit(this.options.start, this.options.end);
		this.checkStep();
		this.end();
		this.fireEvent('onTick', this.toPosition(this.step));
		return this;
	},
	toStep: function (position) {
		
		return Math.round((position + this.options.offset) / this.max * this.options.steps) + this.options.start;
	},
	toPosition: function (step) {
		
		return (this.max * step / this.options.steps) - (this.max * this.options.start / this.options.steps);
	}
	
});
window.addEvent('domready', function () {
	var slider1 = new Slider.Range('area1', 'knob1', 
	{
		start: -10,
		end: 10,
		onChange:function (step) {
			$('spanslider1').setHTML('<input id="slider1" type="text" class="sliding" size="2" value="'+step+'">');
		},
		onComplete: function() {
		load_new();

		}
		
	}).set(1);
	
	
	
	var slider2 = new Slider.Range('area2', 'knob2', {start: -20,end: 30,onChange: function (step) {$('spanslider2').setHTML('<input id="slider2" type="text" class="sliding" size="2" value="'+step+'">');}
	
	,
		onComplete: function() {
		load_new();

		}
	}).set(2);
	var slider3 = new Slider.Range('area3', 'knob3', {start: 0,end: 150,onChange: function (step) {$('spanslider3').setHTML('<input id="slider3" type="text" class="sliding" size="2" value="'+step+'">');}
	,
		onComplete: function() {
		load_new();

		}
	
	}).set(12);
	var slider4 = new Slider.Range('area4', 'knob4', {start: 0,end: 5,onChange: function (step) {$('spanslider4').setHTML('<input id="slider4" type="text" class="sliding" size="2" value="'+step+'">');}
	
	,
		onComplete: function() {
		load_new();

		}
	}).set(1);
	var slider5 = new Slider.Range('area5', 'knob5', {start: 0,end: 100,onChange: function (step) {$('spanslider5').setHTML('<input id="slider5" type="text" class="sliding" size="2" value="'+step+'">');}
	
	,
		onComplete: function() {
		load_new_last();

		}
	}).set(0);
	


});


var offsetx = 12;
var offsety =  8;

function newelement(newid)
{ 
    if(document.createElement)
    { 
        var el = document.createElement('div'); 
        el.id = newid;     
        with(el.style)
        { 
            display = 'none';
            position = 'absolute';
        } 
        el.innerHTML = '&nbsp;'; 
        document.body.appendChild(el); 
    } 
} 
var ie5 = (document.getElementById && document.all); 
var ns6 = (document.getElementById && !document.all); 
var ua = navigator.userAgent.toLowerCase();
var isapple = (ua.indexOf('applewebkit') != -1 ? 1 : 0);
function getmouseposition(e)
{
    if(document.getElementById)
    {
        var iebody=(document.compatMode && 
        	document.compatMode != 'BackCompat') ? 
        		document.documentElement : document.body;
        pagex = (isapple == 1 ? 0:(ie5)?iebody.scrollLeft:window.pageXOffset);
        pagey = (isapple == 1 ? 0:(ie5)?iebody.scrollTop:window.pageYOffset);
        mousex = (ie5)?event.x:(ns6)?clientX = e.clientX:false;
        mousey = (ie5)?event.y:(ns6)?clientY = e.clientY:false;

        var lixlpixel_tooltip = document.getElementById('tooltip');
        lixlpixel_tooltip.style.left = (mousex+pagex+offsetx) + 'px';
        lixlpixel_tooltip.style.top = (mousey+pagey+offsety) + 'px';
    }
}
function tooltip(tip)
{
    if(!document.getElementById('tooltip')) newelement('tooltip');
    var lixlpixel_tooltip = document.getElementById('tooltip');
    lixlpixel_tooltip.innerHTML = tip;
    lixlpixel_tooltip.style.display = 'block';
    document.onmousemove = getmouseposition;
}
function exit()
{
    document.getElementById('tooltip').style.display = 'none';
}
function ajaxget(urlpage,what)
{
	if(window.XMLHttpRequest) obj1=new XMLHttpRequest();else if(window.ActiveXObject) obj1=new ActiveXObject("Microsoft.XMLHTTP");else return(false);
        obj1.open ('GET', urlpage, true);
        obj1.onreadystatechange = function() 
        {
         if(obj1.readyState==1) {var b="b";}
         else if(obj1.readyState==4)
         {
                   if(obj1.status==200){document.getElementById(what).innerHTML=obj1.responseText;}
                   else if(obj1.status==404){document.getElementById(what).innerHTML = "Url BUG";}
                   else{document.getElementById(what).innerHTML = "Error : ".obj1.status;}
         }
        }
        obj1.send(null);
        return;
} 