function initBasic() {
	var obj, ele, i = 0;
	if(isIE) {
		$('none').firstChild.onclick = function(){setupEffect(this.firstChild.data);} 
		$('none').firstChild.href = '#'; $('none').firstChild.hideFocus = "true"; $('none').className = 'script_bt_active';
		$('curl').firstChild.onclick = function(){setupEffect(this.firstChild.data);} 
		$('curl').firstChild.href = '#'; $('curl').firstChild.hideFocus = "true"; 
		$('reflex').firstChild.onclick = function(){setupEffect(this.firstChild.data);} 
		$('reflex').firstChild.href = '#'; $('reflex').firstChild.hideFocus = "true"; 
		$('edge').firstChild.onclick = function(){setupEffect(this.firstChild.data);} 
		$('edge').firstChild.href = '#'; $('edge').firstChild.hideFocus = "true"; 
		$('instant').firstChild.onclick = function(){setupEffect(this.firstChild.data);} 
		$('instant').firstChild.href = '#'; $('instant').firstChild.hideFocus = "true"; 
		$('corner').firstChild.onclick = function(){setupEffect(this.firstChild.data);} 
		$('corner').firstChild.href = '#'; $('corner').firstChild.hideFocus = "true"; 
		$('glossy').firstChild.onclick = function(){setupEffect(this.firstChild.data);} 
		$('glossy').firstChild.href = '#'; $('glossy').firstChild.hideFocus = "true"; 
		$('slided').firstChild.onclick = function(){setupEffect(this.firstChild.data);} 
		$('slided').firstChild.href = '#'; $('slided').firstChild.hideFocus = "true"; 
		$('filmed').firstChild.onclick = function(){setupEffect(this.firstChild.data);} 
		$('filmed').firstChild.href = '#'; $('filmed').firstChild.hideFocus = "true"; 
		$('bevel').firstChild.onclick = function(){setupEffect(this.firstChild.data);} 
		$('bevel').firstChild.href = '#'; $('bevel').firstChild.hideFocus = "true"; 
		$('sphere').firstChild.onclick = function(){setupEffect(this.firstChild.data);} 
		$('sphere').firstChild.href = '#'; $('sphere').firstChild.hideFocus = "true"; 
		$('bg_trans').onclick = function(){setBGTrans(this.checked,'bg_color');} 
		$('bg_color').onclick = function(){setBGColor('bg_trans','bg_color','bg_value');}
		$('bg_color').onchange = function(){this.blur();setBGColor('bg_trans','bg_color','bg_value');}
		$('bg_value').onclick = function(){playSound('clickSND');openPicker('bg_value','bg_color');}
		for(i=0; i<=2; i++) {$('ts_'+i).onclick = function(){setTSSize(this,'picture');}} 
		for(i=0; i<=7; i++) {$('ti_'+i).onclick = function(){setTSImage(this,'picture','ti_size');}}
	}else {
		$('none').firstChild.setAttribute("onClick","setupEffect(this.firstChild.data);"); $('none').className = 'script_bt_active';
		$('curl').firstChild.setAttribute("onClick","setupEffect(this.firstChild.data);"); 
		$('reflex').firstChild.setAttribute("onClick","setupEffect(this.firstChild.data);"); 
		$('edge').firstChild.setAttribute("onClick","setupEffect(this.firstChild.data);"); 
		$('corner').firstChild.setAttribute("onClick","setupEffect(this.firstChild.data);"); 
		$('glossy').firstChild.setAttribute("onClick","setupEffect(this.firstChild.data);"); 
		$('instant').firstChild.setAttribute("onClick","setupEffect(this.firstChild.data);"); 
		$('slided').firstChild.setAttribute("onClick","setupEffect(this.firstChild.data);"); 
		$('filmed').firstChild.setAttribute("onClick","setupEffect(this.firstChild.data);"); 
		$('bevel').firstChild.setAttribute("onClick","setupEffect(this.firstChild.data);"); 
		$('sphere').firstChild.setAttribute("onClick","setupEffect(this.firstChild.data);"); 
		$('bg_trans').setAttribute("onClick","setBGTrans(this.checked,'bg_color');");
		$('bg_color').setAttribute("onClick","setBGColor('bg_trans','bg_color','bg_value');");
		$('bg_color').setAttribute("onChange","this.blur();setBGColor('bg_trans','bg_color','bg_value');");
		$('bg_value').setAttribute("onClick","playSound('clickSND');openPicker('bg_value','bg_color');");
		for(i=0; i<=2; i++) {$('ts_'+i).setAttribute("onClick","setTSSize(this,'picture');");} 
		for(i=0; i<=7; i++) {$('ti_'+i).setAttribute("onClick","setTSImage(this,'picture','ti_size');");}
	}
	$('bg_trans').checked=false; $('bg_color').value='#666666'; $('bg_color').disabled=false;
	$('ts_0').checked=true; $('ts_1').checked=false; $('ts_2').checked=false; 
	if(isCS&&!isIE) {
		obj = document.getElementsByTagName("body")[0];
		ele = document.createElement("form"); 
		ele.name = 'download'; ele.action = 'download.php';
		obj.appendChild(ele);
	}	
}
function initApp() {
	isON = $('snd').checked;
	initBasic();
	$('about').style.display = 'none';
	setTSImage($('ti_1'),'picture','ti_size');
}
function showInit() {
	var obj = document.getElementsByTagName("body")[0];
	var ele = document.createElement("div"); ele.display = 'none';
	if(isGE||isOP) {ele.id = 'clickSND';}else {
	ele.innerHTML = '<embed id="clickSND" type="audio/x-wav" src="sounds/click.wav" enablejavascript="true" autostart="false" hidden="true" loop="false" width="0" height="0" mastersound></embed>';}
	obj.appendChild(ele); 
	preloadImages();
}
function addImageMasks() {
	var browser = "images/browser/"+(isIE?'ie.png':isOP?'opera.png':isWK?'webkit.png':isGE?'gecko.png':'unknown.png');
	var engine = isIE?'Trident':isOP?'Presto':isWK?'WebKit':isGE?'Gecko':'Unknown';
	if(bugy) {
		$('go').innerHTML = '<img src="'+browser+'" style="display: inline; float: left;" alt"">&nbsp;Your&nbsp;Browser&nbsp;Engine&nbsp;is&nbsp;"<b>'+engine+'<\/b>&nbsp;1.8.1.10"<br><small>&nbsp;&nbsp;Sorry,&nbsp;this&nbsp;version&nbsp;is&nbsp;buggy&nbsp;(<b>canvas.drawimage<\/b>&nbsp;N/A)!<\/small><br>';
	}else {
		$('about').removeChild($('progress'));
		$('go').innerHTML = 'Press <input type="button" name="start" value="start" onclick="initApp();"> to play around. <input onclick="playSound(\'clickSND\');" id="snd" name="snd" type="checkbox" value="1" checked="checked"> Use click sound. Have fun.<br><br><img src="'+browser+'" style="display: inline; float: left;" alt"">&nbsp;Your&nbsp;Browser&nbsp;Engine&nbsp;is&nbsp;"<b>'+engine+'<\/b>"<br>&nbsp;&nbsp;<small>If&nbsp;not:&nbsp;send&nbsp;an&nbsp;email&nbsp;to&nbsp;<b><a style="color: #ffaa00;" href="&#109;&#097;&#105;&#108;&#116;&#111;:&#099;&#118;&#105;&#064;&#110;&#101;&#116;&#122;&#103;&#101;&#115;&#116;&#097;&#046;&#100;&#101;">&#110;&#101;&#116;&#122;&#103;&#101;&#115;&#116;&#097;&#046;&#100;&#101;<\/a><\/b>!<\/small><br><small>You\'re&nbsp;using&nbsp;<b>'+BrowserDetect.browser+'<\/b>&nbsp;<i>'+BrowserDetect.version+'<\/i>&nbsp;on&nbsp;<b>'+BrowserDetect.OS+'<\/b>!</small><br>';
	}
}
function noneBasic() {
	var ele = document.createElement("span"); ele.id = 'noCV';
	ele.innerHTML = '<b>Attention:<\/b> <em>Your browser supports neither Canvas nor VML!<\/em>';
	$('header').appendChild(ele);
	$('go').innerHTML = '<strong>Your browser supports neither Canvas nor VML!<\/strong>';
}
function playSound(obj) {
	if(isON==true) {
		if(isGE||isOP) {
			$(obj).innerHTML="<embed src=\"sounds/click.wav\" type=\"audio/x-wav\" width=0 height=0 hidden=true autostart=true loop=false>";
		}else {
			try {var snd=$(obj); snd.Play();}catch (e) {}
		}
		forceRefresh();
	}
}
function forceRefresh() {
	if(window.opera) document.body.parentNode.style.backgroundColor='transparent';	
}
function setHexColor(obj) { var val;
	if(obj.value.match(/^#[0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f]$/i)) {
		obj.value = obj.value.toLowerCase();
	}else if(obj.value.match(/^#[0-9a-f][0-9a-f][0-9a-f]$/i)) {
		var val1 = obj.value.substr(1,1).toLowerCase();
		var val2 = obj.value.substr(2,1).toLowerCase();
		var val3 = obj.value.substr(3,1).toLowerCase();
		obj.value = '#' + val1 + val1 + val2 + val2 + val3 + val3;
	}else if(obj.value.match(/^#[0-9a-f][0-9a-f]$/i)) {
		val = obj.value.substr(1,2).toLowerCase();
		obj.value = '#' + val + val + val;
	}else if(obj.value.match(/^#[0-9a-f]$/i)) {
		val = obj.value.substr(1,1).toLowerCase();
		obj.value = '#' + val + val + val + val + val + val;
	}else {
		obj.value = '#000000';
	}
}
function hsb2hex(h,s,b) {var c,f,u,p,q,t; 
	function d2h(v) {v=Math.round(Math.min(Math.max(0,v),255)); return("0123456789ABCDEF".charAt((v-v%16)/16)+"0123456789ABCDEF".charAt(v%16));};
	c=d2h(Math.min(255,Math.max(0,Math.round(b/100*255)))); 
	if(s==0){
		return "#"+c+c+c;
	}else{
		u=h%360; f=u%60; 
		p=d2h(Math.min(255,Math.max(0,Math.round((b*(100-s))/10000*255)))); 
		q=d2h(Math.min(255,Math.max(0,Math.round((b*(6000-s*f))/600000*255)))); 
		t=d2h(Math.min(255,Math.max(0,Math.round((b*(6000-s*(60-f)))/600000*255)))); 
		switch(Math.floor(u/60)) {
			case 0: return "#"+c+t+p; 
			case 1: return "#"+q+c+p; 
			case 2: return "#"+p+c+t; 
			case 3: return "#"+p+q+c; 
			case 4: return "#"+t+p+c; 
			case 5: return "#"+c+p+q;
		}
	}return "#000000";
}

function getTri(obj) {var r,g,b;
	if(obj&&obj.value.match(/^#[0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f]$/i)) {
		r = Math.max(0,Math.min(parseInt(obj.value.substr(1,2),16),255));
		g = Math.max(0,Math.min(parseInt(obj.value.substr(3,2),16),255));
		b = Math.max(0,Math.min(parseInt(obj.value.substr(5,2),16),255));
		return [r,g,b];
	}else {
		return [0,0,0];
	}
}
function getRadioValue(obj) {	var rl = obj.length;	if(rl == 'undefined') {if(obj.checked) {return obj.value; }else {return "";}}	for(var i=0; i<rl; i++) {if(obj[i].checked) {return obj[i].value;}}	return "";}
function setColor(ele,div) {
	setHexColor($(ele));
	$S(div).backgroundColor = $(ele).value;
}
function setBGTrans(state,ele) {
	var obj = document.getElementsByTagName("body")[0];
	var inp = document.getElementById(ele);
	setHexColor(inp);
	playSound('clickSND');
	if(state) {
		obj.style.backgroundImage = 'url(images/layout/trans.gif)'; 
		obj.style.backgroundColor = 'transparent';
		inp.disabled = true; 
	}else {
		obj.style.backgroundImage = 'none'; 
		obj.style.backgroundColor = inp.value;
		inp.disabled = false; 
	}
	if(!isIE&&isCS) {
		var obj = document.getElementById("preview");
		if(state) {
			obj.style.backgroundImage = 'url(images/layout/trans.gif)'; 
		}else {
			obj.style.backgroundImage = 'none'; 
		}
	}
}
function setBGColor(trans,ele,div) {
	var obj = document.getElementsByTagName("body")[0];
	var inp = document.getElementById(ele);
	var col = document.getElementById(div);
	setHexColor(inp);
	playSound('clickSND');
	if(!document.getElementById(trans).checked) {
		obj.style.backgroundColor = inp.value; 
	}
	col.style.backgroundColor = inp.value;
}
function setTSImage(icon,id,fac) {
	if(FXis!='none') {cvi_lab.remove($("picture"));}
	if(!isIE&&isCS) {if($("preview")) {cvi_pre.remove($("preview"));}}
	var obj = document.getElementById(id);
	var val = getRadioValue(document.getElementsByName(fac));
	var img = new Image();
	img.onload = function() {
		playSound('clickSND');
		obj.style.cssText = "";
		obj.src = icon.src; 
		Iscr = icon.src;
		Ifac = 75*parseFloat(icon.alt);
		obj.width = parseInt(img.width*(val/100)); 
		obj.height = parseInt(img.height*(val/100));
		setupFilter(true); setUpdate(); 
	};
	img.src = icon.src;
}
function setTSSize(val,id) {
	if(FXis!='none') {cvi_lab.remove($("picture"));}
	var obj = document.getElementById(id);
	if(val.checked === true) {
		var img = new Image();
		img.onload = function() {
			playSound('clickSND');
			obj.style.cssText = "";
			obj.width = parseInt(img.width*(val.value/100)); 
			obj.height = parseInt(img.height*(val.value/100)); 
			setUpdate(); setupFilter(false); 
		};
		img.src = obj.src;
	}
}
function addAccordion() {
	var i=0, id="", ele, obj, small, link, tmp;
	var header = document.getElementsByTagName("h5");
	for(i=0;i<header.length;i++) {	
		ele = header[i]; id = ele.id.split('_');
		obj = document.getElementById(id[1]);
		if(isIE) {
			small = document.createElement("small");
			small.style.position = 'absolute';
			small.style.right = 0.5 + 'em';
			small.style.background = 'transparent';
			tmp = "toggleHeader('" + id[1] + "');";
			small.innerHTML = '<a title="toggle named section" style="color:white;" onClick='+tmp+'>&plusmn;</a>';
			ele.appendChild(small);
		}else {
			ele.setAttribute("title", "toggle named section");
			ele.setAttribute("onclick","toggleHeader('"+id[1]+"');");
			if(isGE){
				ele.style.MozUserSelect = "none";			}else if(isWK){				ele.style.KhtmlUserSelect = "none"; 			}	
		}
		obj.style.visibility = "hidden";
		obj.style.display = "none"; 
		ele.className = "closed"; 
	}	
	forceRefresh();
}
function toggleHeader(id) {
	var obj = document.getElementById(id);
	var ele = document.getElementById("do_"+id);
	playSound('clickSND');
	if(obj.style.display=="none"||obj.style.display===null) {
		obj.style.visibility = "visible";
		obj.style.display = "block";
		ele.className = "open";
		forceRefresh();
	}else {
		obj.style.visibility = "hidden";
		obj.style.display = "none"; 
		ele.className = "closed";
	}
}
function setUpdate() {
	switch(FXis) {
		case "curl":
			cvi_curl.add($('picture'), { size: $('s_val').value, shadow: $('o_val').value, color: $('b_true').checked?$('b_color').value:0, invert: $('i_true').checked });
		break;
		case "edge":
			cvi_edge.add($('picture'), { mask: $('m_val').value, inbuilt: $('b_true').checked, type: $('t_val').value, angle: $('a_val').value, size: $('s_val').value });
		break;
		case "reflex":
			cvi_reflex.add($('picture'), { tilt: $('t_val').value, height: $('h_val').value, transparency: $('o_val').value, distance: $('d_val').value, border: $('b_val').value, color: $('b_color').value, boxmode: true });
		break;
		case "corner":
			cvi_corner.add($('picture'), { radius: $('r_val').value, shadow: $('o_val').value, shade: $('s_val').value, inverse: $('i_true').checked });
		break;
		case "glossy":
			cvi_glossy.add($('picture'), { radius: $('r_val').value, color: $('a_true').checked?$('a_color').value:0, color2: $('b_true').checked?$('b_color').value:0, gradient: $('d_val').value, shade: $('s_val').value, shadow: $('o_val').value, noshadow: $('s_true').checked, noradius: $('n_true').checked });
		break;
		case "instant":
			cvi_instant.add($('picture'), { text: $('x_val').value, textcolor: $('b_tcolor').value, fontattr: [$('w_val').value,$('d_val').value,$('p_val').value], tilt: $('t_val').value, shade: $('s_val').value, shadow: $('o_val').value, color: $('b_color').value, noshade: $('s_true').checked, nocorner: $('c_true').checked, historical: $('h_true').checked, preserve: $('p_true').checked });
		break;
		case "slided":
			cvi_slide.add($('picture'), { shade: $('s_val').value, shadow: $('o_val').value, color: $('a_true').checked?$('a_color').value:0, color2: $('b_true').checked?$('b_color').value:0, gradient: $('d_val').value, noshadow: $('s_true').checked, nocircles: $('c_true').checked, text: $('x_val').value, textcolor: $('b_tcolor').value, fontattr: [$('w_val').value,$('k_val').value,$('p_val').value] });
		break;
		case "filmed":
			cvi_strip.add($('picture'), { strip: $('t_val').value, shine: $('s_val').value, shadow: $('o_val').value, color: $('a_color').value, noshadow: $('s_true').checked, softshadow: $('t_true').checked });
		break;
		case "bevel":
			cvi_bevel.add($('picture'), { radius: $('r_val').value, glow: $('g_val').value, shine: $('h_val').value, shade: $('s_val').value, glowcolor: $('g_color').value, shinecolor: $('h_color').value, shadecolor: $('s_color').value, backcolor: $('b_color').value, fillcolor: $('f_color').value, linear: $('l_true').checked, noglow: $('g_true').checked, noshine: $('h_true').checked, noshade: $('s_true').checked, usemask: $('m_true').checked });
		break;
		case "sphere":
			cvi_sphere.add($('picture'), { alpha: $('o_val').value, shine: $('h_val').value, shade: $('s_val').value, zoom: $('z_val').value, shift: $('t_val').value, color: $('a_true').checked?$('a_color').value:0, color2: $('a_true').checked&&$('b_true').checked?$('b_color').value:0 });
		break;
		case "none":
		break;
	}					
}
function detachProgress(id,prg) {
	if($('filter_true').checked==true){
		$('template').style.display = 'block';
		$('progress').style.display = 'none';
	}
}			
function attachProgress() {
	if($('filter_true').checked==true&&FXis!='none'){
		$('template').style.display = 'none';
		$('progress').style.display = 'block';
	}
}			
function setUpgrade() {
	attachProgress();
	switch(FXis) {
		case "curl":
			cvi_curl.modify($('picture'), { callback: 'detachProgress', filter: [FTis], size: $('s_val').value, shadow: $('o_val').value, color: $('b_true').checked?$('b_color').value:0, invert: $('i_true').checked });
		break;
		case "edge":
			cvi_edge.modify($('picture'), { callback: 'detachProgress', filter: [FTis], mask: $('m_val').value, inbuilt: $('b_true').checked, type: $('t_val').value, angle: $('a_val').value, size: $('s_val').value });
		break;
		case "reflex":
			cvi_reflex.modify($('picture'), { callback: 'detachProgress', filter: [FTis], tilt: $('t_val').value, height: $('h_val').value, transparency: $('o_val').value, distance: $('d_val').value, border: $('b_val').value, color: $('b_color').value, boxmode: true });
		break;
		case "corner":
			cvi_corner.modify($('picture'), { callback: 'detachProgress', filter: [FTis], radius: $('r_val').value, shadow: $('o_val').value, shade: $('s_val').value, inverse: $('i_true').checked });
		break;
		case "glossy":
			cvi_glossy.modify($('picture'), { callback: 'detachProgress', filter: [FTis], radius: $('r_val').value, color: $('a_true').checked?$('a_color').value:0, color2: $('b_true').checked?$('b_color').value:0, gradient: $('d_val').value, shade: $('s_val').value, shadow: $('o_val').value, noshadow: $('s_true').checked, noradius: $('n_true').checked });
		break;
		case "instant":
			cvi_instant.modify($('picture'), { callback: 'detachProgress', filter: [FTis], text: $('x_val').value, textcolor: $('b_tcolor').value, fontattr: [$('w_val').value,$('d_val').value,$('p_val').value], tilt: $('t_val').value, shade: $('s_val').value, shadow: $('o_val').value, color: $('b_color').value, noshade: $('s_true').checked, nocorner: $('c_true').checked, historical: $('h_true').checked, preserve: $('p_true').checked });
		break;
		case "slided":
			cvi_slide.modify($('picture'), { callback: 'detachProgress', filter: [FTis], shade: $('s_val').value, shadow: $('o_val').value, color: $('a_true').checked?$('a_color').value:0, color2: $('b_true').checked?$('b_color').value:0, gradient: $('d_val').value, noshadow: $('s_true').checked, nocircles: $('c_true').checked, text: $('x_val').value, textcolor: $('b_tcolor').value, fontattr: [$('w_val').value,$('k_val').value,$('p_val').value] });
		break;
		case "filmed":
			cvi_strip.modify($('picture'), { callback: 'detachProgress', filter: [FTis], strip: $('t_val').value, shine: $('s_val').value, shadow: $('o_val').value, color: $('a_color').value, noshadow: $('s_true').checked, softshadow: $('t_true').checked });
		break;
		case "bevel":
			cvi_bevel.modify($('picture'), { callback: 'detachProgress', filter: [FTis], radius: $('r_val').value, glow: $('g_val').value, shine: $('h_val').value, shade: $('s_val').value, glowcolor: $('g_color').value, shinecolor: $('h_color').value, shadecolor: $('s_color').value, backcolor: $('b_color').value, fillcolor: $('f_color').value, linear: $('l_true').checked, noglow: $('g_true').checked, noshine: $('h_true').checked, noshade: $('s_true').checked, usemask: $('m_true').checked });
		break;
		case "sphere":
			cvi_sphere.modify($('picture'), { callback: 'detachProgress', filter: [FTis], alpha: $('o_val').value, shine: $('h_val').value, shade: $('s_val').value, zoom: $('z_val').value, shift: $('t_val').value, color: $('a_true').checked?$('a_color').value:0, color2: $('a_true').checked&&$('b_true').checked?$('b_color').value:0 });
		break;
		case "none":
		break;
	}
}

function prepareFilter(v) {
	if(Lfil!='') {$(Lfil).style.display='none'; }
	v=v||$('preview_val').value; $('preview_val').value=v; PVis= {f:'none', s:-1}; FTis=PVis;
	if(v=="outline") { 
		Lfil="b_outl"; $(Lfil).style.display='block'; PVis = {f:$('preview_val').value, s:[parseFloat($('s17_val').value),parseInt($('s18_val').value),$('operator_type').options[$('operator_type').selectedIndex].value||'sobel']};
	}else if(v=="threshold") { 
		Lfil="b_thres"; $(Lfil).style.display='block'; PVis = {f:$('preview_val').value, s:parseFloat($('s5_val').value)};
	}else if(v=="posterize") { 
		Lfil="b_post"; $(Lfil).style.display='block'; PVis = {f:$('preview_val').value, s:parseInt($('s6_val').value)};
	}else if(v.match(/zoomblur|spinblur/i)) { 
		Lfil="b_2blur"; $(Lfil).style.display='block'; PVis = {f:$('preview_val').value, s:parseInt($('s7_val').value)};
	}else if(v=="smooth") { 
		Lfil="b_blur"; $(Lfil).style.display='block'; PVis = {f:$('preview_val').value, s:parseInt($('s8_val').value)};
	}else if(v.match(/exposure|gamma|brightness|contrast/i)) {
		Lfil="b_multi"; $(Lfil).style.display='block'; PVis = {f:$('preview_val').value, s:parseFloat($('s0_val').value)};
	}else if(v=="external") { 
		Lfil="b_extn"; $(Lfil).style.display='block'; PVis = {f:$('extf_type').options[$('extf_type').selectedIndex].value||'blur', s:[$('extf_true').checked==true?-1:parseFloat($('s19_val').value),parseInt($('s20_val').value)]};
	}else if(v=="motionblur") { 
		Lfil="b_moti"; $(Lfil).style.display='block'; PVis = {f:$('preview_val').value, s:[parseInt($('s9_val').value),parseInt($('s10_val').value)]};
	}else if(v=="mixrgb") { 
		Lfil="b_rgb"; $(Lfil).style.display='block'; PVis = {f:$('preview_val').value, s:[[parseInt($('s11_val').value),parseInt($('s12_val').value),parseInt($('s13_val').value)],[parseInt($('s14_val').value),parseInt($('s15_val').value),parseInt($('s16_val').value)]]};
	}else if(v=="chromakey") { 
		Lfil="b_keys"; $(Lfil).style.display='block'; $S('grab_color').backgroundColor = hsb2hex($('s21_val').value,$('s23_val').value,$('s25_val').value);
		PVis = {f:$('preview_val').value, s:[parseInt($('s21_val').value),parseInt($('s22_val').value),parseInt($('s23_val').value),parseInt($('s24_val').value),parseInt($('s25_val').value)]};
	}else if(v=="colorkey") { 
		Lfil="b_keyc"; $(Lfil).style.display='block'; PVis = {f:$('preview_val').value, s:[[parseInt($('s26_val').value),parseInt($('s27_val').value),parseInt($('s28_val').value)],[parseInt($('s29_val').value),parseInt($('s30_val').value),parseInt($('s31_val').value)]]};
	}else if(v=="tritone") { 
		Lfil="b_tri"; $(Lfil).style.display='block'; PVis = {f:$('preview_val').value, s:[getTri($('tl_color')),getTri($('tm_color')),getTri($('th_color'))]};
	}else if(v.match(/adjustrgba|adjusthsba|adjustyuva/i)) { 
		Lfil="b_rgba"; $(Lfil).style.display='block'; PVis = {f:$('preview_val').value, s:[parseFloat($('s1_val').value),parseFloat($('s2_val').value),parseFloat($('s3_val').value),parseFloat($('s4_val').value)]};
	}else {
		Lfil=""; PVis = {f:$('preview_val').value, s:-1};
	}
	cvi_pre.modify($('preview'),{filter: [PVis]});
	if($('filter_true').checked==true){
		$('filter_val').value=$('preview_val').value; FTis=PVis;
		setUpgrade();
	}else{
		$('filter_val').value='none'; FTis= {f:'none', s:-1};
		setUpgrade();
	}
}

function setupFilter(v) {
	if(!isIE&&isCS) {FTis= {f:'none', s:-1};
		if(v) {
			var i=0, ctx=false, obj=$("filter"), arr=""; Lfil=''; PVis= {f:'none', s:-1}; FTis=PVis; for(i in cvi_matrix){arr+='<option value="'+i+'">'+i+'</option>';}
			if(obj.style.display=="none"||obj.style.display===null) {ctx=true; toggleHeader('filter');}
			obj.innerHTML='<div class="track"><span id="template">Filtering is a <b>very time<br />consuming</b> procedure!</span><div id="progress" style="display:none;padding: 0.5em 0 0.5em 0;width:90%;height:16px;background: url(images/layout/progress.gif) repeat-x;"></div></div>'
			+ '<input onclick="playSound(\'clickSND\');if(this.checked==true){$(\'filter_val\').value=$(\'preview_val\').value;FTis=PVis;setUpgrade();}else{$(\'filter_val\').value=\'none\';FTis= {f:\'none\', s:-1};setUpgrade();}" id="filter_true" name="filter_true" type="checkbox" value="0" /><input id="filter_val" name="filter_val" type="hidden" value="none" /> <label>Append to Effect</label></div>'
			+ '<div class="track" style="margin-top:8px;" title="Double click to zoom in/out. Click & Drag to move around."><img style="height:75px;width:'+Ifac+'px" width="'+Ifac+'" height="75" id="preview" onload="cvi_pre.add(this);" src="'+Iscr+'" /></div>'
			+ '<div class="track"><select id="filter_type" name="filter_type" style="-moz-user-select:none;-khtml-user-select:none;" size="1" onchange="playSound(\'clickSND\');prepareFilter(this.options[this.selectedIndex].value);">'
			+ '<option value="none" selected="selected">none</option>'
			+ '<option value="anaglyph">anaglyph</option>'
			+ '<option value="invert">invert</option>'
			+ '<option value="solarize">solarize</option>'
			+ '<option value="sepia">sepia</option>'
			+ '<option value="grayscale">grayscale</option>'
			+ '<option value="outline">outline</option>'
			+ '<option value="threshold">threshold</option>'
			+ '<option value="posterize">posterize</option>'
			+ '<option value="exposure">exposure</option>'
			+ '<option value="gamma">gamma</option>'
			+ '<option value="brightness">brightness</option>'
			+ '<option value="contrast">contrast</option>'
			+ '<option value="tritone">tritone</option>'
			+ '<option value="mixrgb">mixRGB</option>'
			+ '<option value="adjustrgba">adjustRGBA</option>'
			+ '<option value="adjusthsba">adjustHSBA</option>'
			+ '<option value="adjustyuva">adjustYUVA</option>'
			+ '<option value="chromakey">chromakey</option>'
			+ '<option value="colorkey">colorkey</option>'
			+ '<option value="smooth">smooth</option>'
			+ '<option value="zoomblur">zoomblur</option>'
			+ '<option value="spinblur">spinblur</option>'
			+ '<option value="motionblur">motionblur</option>'
			+ '<option value="external">external</option>'
			+ '</select><input id="preview_val" name="preview_val" type="hidden" value="none" /> <label>Type</label></div>'
			+ '<div id="b_multi" class="track"><span class="i_text">Multiplier</span><div id="s0_data" class="tr_right slider"><div class="tr_left"></div><div id="s0_handle" class="handle"><img class="slider handle" src="images/slider/handle.png" alt="" /></div></div><input id="s0_val" name="s0_val" type="hidden" value="1.00"><div>&nbsp;&nbsp;<span id="s0_out" style="cursor:pointer" title="reset on click" onclick="slide[0].setValue(1);">1.00</span></div></div>'
			+ '<div id="b_rgba" class="track"><span class="i_text"><b>R</b> | <b>Y</b> | <b>H</b>ue</span><div id="s1_data" class="tr_right slider"><div class="tr_left"></div><div id="s1_handle" class="handle"><img class="slider handle" src="images/slider/handle.png" alt="" /></div></div><input id="s1_val" name="s1_val" type="hidden" value="1.00"><div>&nbsp;&nbsp;<span id="s1_out" style="cursor:pointer" title="reset on click" onclick="slide[1].setValue(1);">1.00</span></div>'
			+ '<span class="i_text"><b>G</b> | <b>U</b> | <b>S</b>aturation</span><div id="s2_data" class="tr_right slider"><div class="tr_left"></div><div id="s2_handle" class="handle"><img class="slider handle" src="images/slider/handle.png" alt="" /></div></div><input id="s2_val" name="s2_val" type="hidden" value="1.00"><div>&nbsp;&nbsp;<span id="s2_out" style="cursor:pointer" title="reset on click" onclick="slide[2].setValue(1);">1.00</span></div>'
			+ '<span class="i_text"><b>B</b> | <b>V</b> | <b>B</b>rightness</span><div id="s3_data" class="tr_right slider"><div class="tr_left"></div><div id="s3_handle" class="handle"><img class="slider handle" src="images/slider/handle.png" alt="" /></div></div><input id="s3_val" name="s3_val" type="hidden" value="1.00"><div>&nbsp;&nbsp;<span id="s3_out" style="cursor:pointer" title="reset on click" onclick="slide[3].setValue(1);">1.00</span></div>'
			+ '<span class="i_text"><b>A</b>lpha</span><div id="s4_data" class="tr_right slider"><div class="tr_left"></div><div id="s4_handle" class="handle"><img class="slider handle" src="images/slider/handle.png" alt="" /></div></div><input id="s4_val" name="s4_val" type="hidden" value="1.00"><div>&nbsp;&nbsp;<span id="s4_out" style="cursor:pointer" title="reset on click" onclick="slide[4].setValue(1);">1.00</span></div></div>'
			+ '<div id="b_thres" class="track"><span class="i_text">Threshold</span><div id="s5_data" class="tr_right slider"><div class="tr_left"></div><div id="s5_handle" class="handle"><img class="slider handle" src="images/slider/handle.png" alt="" /></div></div><input id="s5_val" name="s5_val" type="hidden" value="1.00"><div>&nbsp;&nbsp;<span id="s5_out" style="cursor:pointer" title="reset on click" onclick="slide[5].setValue(1);">1.00</span></div></div>'
			+ '<div id="b_post" class="track"><span class="i_text">Level</span><div id="s6_data" class="tr_right slider"><div class="tr_left"></div><div id="s6_handle" class="handle"><img class="slider handle" src="images/slider/handle.png" alt="" /></div></div><input id="s6_val" name="s6_val" type="hidden" value="16.0"><div>&nbsp;&nbsp;<span id="s6_out" style="cursor:pointer" title="reset on click" onclick="slide[6].setValue(16);">16</span></div></div>'
			+ '<div id="b_2blur" class="track"><span class="i_text">Distance</span><div id="s7_data" class="tr_right slider"><div class="tr_left"></div><div id="s7_handle" class="handle"><img class="slider handle" src="images/slider/handle.png" alt="" /></div></div><input id="s7_val" name="s7_val" type="hidden" value="1"><div>&nbsp;&nbsp;<span id="s7_out" style="cursor:pointer" title="reset on click" onclick="slide[7].setValue(1);">1 px</span></div></div>'
			+ '<div id="b_blur" class="track"><span class="i_text">Radius</span><div id="s8_data" class="tr_right slider"><div class="tr_left"></div><div id="s8_handle" class="handle"><img class="slider handle" src="images/slider/handle.png" alt="" /></div></div><input id="s8_val" name="s8_val" type="hidden" value="1"><div>&nbsp;&nbsp;<span id="s8_out" style="cursor:pointer" title="reset on click" onclick="slide[8].setValue(1);">1 px</span></div></div>'
			+ '<div id="b_moti" class="track"><span class="i_text">Distance</span><div id="s9_data" class="tr_right slider"><div class="tr_left"></div><div id="s9_handle" class="handle"><img class="slider handle" src="images/slider/handle.png" alt="" /></div></div><input id="s9_val" name="s9_val" type="hidden" value="1"><div>&nbsp;&nbsp;<span id="s9_out" style="cursor:pointer" title="reset on click" onclick="slide[9].setValue(1);">1 px</span></div>'
			+ '<span class="i_text">Angle</span><div id="s10_data" class="tr_right slider"><div class="tr_left"></div><div id="s10_handle" class="handle"><img class="slider handle" src="images/slider/handle.png" alt="" /></div></div><input id="s10_val" name="s10_val" type="hidden" value="0"><div>&nbsp;&nbsp;<span id="s10_out" style="cursor:pointer" title="reset on click" onclick="slide[10].setValue(0);">0 &deg;</span></div></div>'
			+ '<div id="b_rgb" class="track"><span class="i_text">into <b>R</b>ed</span><div id="s11_data" class="tr_right slider"><div class="tr_left"></div><div id="s11_handle" class="handle"><img class="slider handle" src="images/slider/handle.png" alt="" /></div></div><input id="s11_val" name="s11_val" type="hidden" value="0"><div>&nbsp;&nbsp;<span id="s11_out" style="cursor:pointer" title="reset on click" onclick="slide[11].setValue(0);">0</span></div>'
			+ '<span class="i_text">into <b>G</b>reen</span><div id="s12_data" class="tr_right slider"><div class="tr_left"></div><div id="s12_handle" class="handle"><img class="slider handle" src="images/slider/handle.png" alt="" /></div></div><input id="s12_val" name="s12_val" type="hidden" value="0"><div>&nbsp;&nbsp;<span id="s12_out" style="cursor:pointer" title="reset on click" onclick="slide[12].setValue(0);">0</span></div>'
			+ '<span class="i_text">into <b>B</b>lue</span><div id="s13_data" class="tr_right slider"><div class="tr_left"></div><div id="s13_handle" class="handle"><img class="slider handle" src="images/slider/handle.png" alt="" /></div></div><input id="s13_val" name="s13_val" type="hidden" value="0"><div>&nbsp;&nbsp;<span id="s13_out" style="cursor:pointer" title="reset on click" onclick="slide[13].setValue(0);">0</span></div>'
			+ '<span class="i_text"><b>B</b>lue<b>G</b>reen</span><div id="s14_data" class="tr_right slider"><div class="tr_left"></div><div id="s14_handle" class="handle"><img class="slider handle" src="images/slider/handle.png" alt="" /></div></div><input id="s14_val" name="s14_val" type="hidden" value="0"><div>&nbsp;&nbsp;<span id="s14_out" style="cursor:pointer" title="reset on click" onclick="slide[14].setValue(0);">0</span></div>'
			+ '<span class="i_text"><b>R</b>ed<b>B</b>lue</span><div id="s15_data" class="tr_right slider"><div class="tr_left"></div><div id="s15_handle" class="handle"><img class="slider handle" src="images/slider/handle.png" alt="" /></div></div><input id="s15_val" name="s15_val" type="hidden" value="0"><div>&nbsp;&nbsp;<span id="s15_out" style="cursor:pointer" title="reset on click" onclick="slide[15].setValue(0);">0</span></div>'
			+ '<span class="i_text"><b>G</b>reen<b>R</b>ed</span><div id="s16_data" class="tr_right slider"><div class="tr_left"></div><div id="s16_handle" class="handle"><img class="slider handle" src="images/slider/handle.png" alt="" /></div></div><input id="s16_val" name="s16_val" type="hidden" value="0"><div>&nbsp;&nbsp;<span id="s16_out" style="cursor:pointer" title="reset on click" onclick="slide[16].setValue(0);">0</span></div></div>'
			+ '<div id="b_tri" class="track"><span class="i_text"><b>Low</b> range color</span><input onchange="this.blur();setColor(\'tl_color\',\'tl_value\');prepareFilter();" onclick="setColor(\'tl_color\',\'tl_value\');prepareFilter();" id="tl_color" name="tl_color" class="o_col" type="text" value="#ff0000"><div onClick="playSound(\'clickSND\');openPicker(\'tl_value\',\'tl_color\');" title="Open color picker" id="tl_value" class="c_val"><img src="images/layout/space.gif" alt="" /></div>'
			+ '<br/><span class="i_text"><b>Mid</b> range color</span><input onchange="this.blur();setColor(\'tm_color\',\'tm_value\');prepareFilter();" onclick="setColor(\'tm_color\',\'tm_value\');prepareFilter();" id="tm_color" name="tm_color" class="o_col" type="text" value="#00ff00"><div onClick="playSound(\'clickSND\');openPicker(\'tm_value\',\'tm_color\');" title="Open color picker" id="tm_value" class="c_val"><img src="images/layout/space.gif" alt="" /></div>'
			+ '<br/><span class="i_text"><b>High</b> range color</span><input onchange="this.blur();setColor(\'th_color\',\'th_value\');prepareFilter();" onclick="setColor(\'th_color\',\'th_value\');prepareFilter();" id="th_color" name="th_color" class="o_col" type="text" value="#0000ff"><div onClick="playSound(\'clickSND\');openPicker(\'th_value\',\'th_color\');" title="Open color picker" id="th_value" class="c_val"><img src="images/layout/space.gif" alt="" /></div></div>'
			+ '<div id="b_outl" class="track"><select id="operator_type" name="operator_type" size="1" onchange="playSound(\'clickSND\');prepareFilter();"><option value="roberts">roberts</option><option value="prewitt">prewitt</option><option value="sobel" selected="selected">sobel</option><option value="kirsh">kirsh</option><option value="scharr">scharr</option></select>&nbsp;<span>Operator</span><br/>'			
			+ '<span class="i_text">Divisor</span><div id="s17_data" class="tr_right slider"><div class="tr_left"></div><div id="s17_handle" class="handle"><img class="slider handle" src="images/slider/handle.png" alt="" /></div></div><input id="s17_val" name="s17_val" type="hidden" value="1"><div>&nbsp;&nbsp;<span id="s17_out" style="cursor:pointer" title="reset on click" onclick="slide[17].setValue(1);">1</span></div>'
			+ '<span class="i_text">Bias</span><div id="s18_data" class="tr_right slider"><div class="tr_left"></div><div id="s18_handle" class="handle"><img class="slider handle" src="images/slider/handle.png" alt="" /></div></div><input id="s18_val" name="s18_val" type="hidden" value="0"><div>&nbsp;&nbsp;<span id="s18_out" style="cursor:pointer" title="reset on click" onclick="slide[18].setValue(0);">0</span></div></div>'
			+ '<div id="b_extn" class="track"><select id="extf_type" name="extf_type" size="1" onchange="playSound(\'clickSND\');prepareFilter();">'+arr+'</select>&nbsp;<span>Matrix</span><br/><span class="i_text">Divisor &nbsp; auto&nbsp;<input onclick="playSound(\'clickSND\');if(this.checked==true){slide[19].setDisabled();slide[20].setDisabled();slide[19].setValue(-1);slide[20].setValue(0);$(\'s19_val\').value=-1;$(\'s19_out\').innerHTML=\'-1\';}else{slide[19].setValue(1);$(\'s19_out\').innerHTML=\'1\';$(\'s19_val\').value=1;slide[19].setEnabled();slide[20].setEnabled();}" id="extf_true" name="extf_true" type="checkbox" checked="checked" value="1" /></span>'
			+ '<div id="s19_data" class="tr_right slider"><div class="tr_left"></div><div id="s19_handle" class="handle"><img class="slider handle" src="images/slider/handle.png" alt="" /></div></div><input id="s19_val" name="s19_val" type="hidden" value="-1"><div>&nbsp;&nbsp;<span id="s19_out" style="cursor:pointer" title="reset on click" onclick="slide[19].setValue(1);">-1</span></div>'
			+ '<span class="i_text">Bias</span><div id="s20_data" class="tr_right slider"><div class="tr_left"></div><div id="s20_handle" class="handle"><img class="slider handle" src="images/slider/handle.png" alt="" /></div></div><input id="s20_val" name="s20_val" type="hidden" value="0"><div>&nbsp;&nbsp;<span id="s20_out" style="cursor:pointer" title="reset on click" onclick="slide[20].setValue(0);">0</span></div></div>'
			+ '<div id="b_keys" class="track">near color <div id="grab_color" class="c_val"><img src="images/layout/space.gif" alt="" /></div><span class="i_text"><b>Hue</b></span><div id="s21_data" class="tr_right slider"><div class="tr_left"></div><div id="s21_handle" class="handle"><img class="slider handle" src="images/slider/handle.png" alt="" /></div></div><input id="s21_val" name="s21_val" type="hidden" value="127"><div>&nbsp;&nbsp;<span id="s21_out" style="cursor:pointer" title="reset on click" onclick="slide[21].setValue(127);">127 &deg;</span></div>'
			+ '<span class="i_text">Hue <b>tolerance</b></span><div id="s22_data" class="tr_right slider"><div class="tr_left"></div><div id="s22_handle" class="handle"><img class="slider handle" src="images/slider/handle.png" alt="" /></div></div><input id="s22_val" name="s22_val" type="hidden" value="10"><div>&nbsp;&nbsp;<span id="s22_out" style="cursor:pointer" title="reset on click" onclick="slide[22].setValue(10);">10 %</span></div>'
			+ '<span class="i_text"><b>min</b> saturation</span><div id="s23_data" class="tr_right slider"><div class="tr_left"></div><div id="s23_handle" class="handle"><img class="slider handle" src="images/slider/handle.png" alt="" /></div></div><input id="s23_val" name="s23_val" type="hidden" value="66"><div>&nbsp;&nbsp;<span id="s23_out" style="cursor:pointer" title="reset on click" onclick="slide[23].setValue(66);">66 %</span></div>'
			+ '<span class="i_text"><b>min</b> brightness</span><div id="s24_data" class="tr_right slider"><div class="tr_left"></div><div id="s24_handle" class="handle"><img class="slider handle" src="images/slider/handle.png" alt="" /></div></div><input id="s24_val" name="s24_val" type="hidden" value="50"><div>&nbsp;&nbsp;<span id="s24_out" style="cursor:pointer" title="reset on click" onclick="slide[24].setValue(50);">50 %</span></div>'
			+ '<span class="i_text"><b>max</b> brightness</span><div id="s25_data" class="tr_right slider"><div class="tr_left"></div><div id="s25_handle" class="handle"><img class="slider handle" src="images/slider/handle.png" alt="" /></div></div><input id="s25_val" name="s25_val" type="hidden" value="100"><div>&nbsp;&nbsp;<span id="s25_out" style="cursor:pointer" title="reset on click" onclick="slide[25].setValue(100);">100 %</span></div></div>'
			+ '<div id="b_keyc" class="track"><span class="i_text">min <b>R</b>ed</span><div id="s26_data" class="tr_right slider"><div class="tr_left"></div><div id="s26_handle" class="handle"><img class="slider handle" src="images/slider/handle.png" alt="" /></div></div><input id="s26_val" name="s26_val" type="hidden" value="0"><div>&nbsp;&nbsp;<span id="s26_out" style="cursor:pointer" title="reset on click" onclick="slide[26].setValue(0);">0</span></div>'
			+ '<span class="i_text">min <b>G</b>reen</span><div id="s27_data" class="tr_right slider"><div class="tr_left"></div><div id="s27_handle" class="handle"><img class="slider handle" src="images/slider/handle.png" alt="" /></div></div><input id="s27_val" name="s27_val" type="hidden" value="100"><div>&nbsp;&nbsp;<span id="s27_out" style="cursor:pointer" title="reset on click" onclick="slide[27].setValue(0);">100</span></div>'
			+ '<span class="i_text">min <b>B</b>lue</span><div id="s28_data" class="tr_right slider"><div class="tr_left"></div><div id="s28_handle" class="handle"><img class="slider handle" src="images/slider/handle.png" alt="" /></div></div><input id="s28_val" name="s28_val" type="hidden" value="0"><div>&nbsp;&nbsp;<span id="s28_out" style="cursor:pointer" title="reset on click" onclick="slide[28].setValue(0);">0</span></div>'
			+ '<span class="i_text">max <b>R</b>ed</span><div id="s29_data" class="tr_right slider"><div class="tr_left"></div><div id="s29_handle" class="handle"><img class="slider handle" src="images/slider/handle.png" alt="" /></div></div><input id="s29_val" name="s29_val" type="hidden" value="0"><div>&nbsp;&nbsp;<span id="s29_out" style="cursor:pointer" title="reset on click" onclick="slide[29].setValue(255);">0</span></div>'
			+ '<span class="i_text">max <b>G</b>reen</span><div id="s30_data" class="tr_right slider"><div class="tr_left"></div><div id="s30_handle" class="handle"><img class="slider handle" src="images/slider/handle.png" alt="" /></div></div><input id="s30_val" name="s30_val" type="hidden" value="255"><div>&nbsp;&nbsp;<span id="s30_out" style="cursor:pointer" title="reset on click" onclick="slide[30].setValue(255);">255</span></div>'
			+ '<span class="i_text">max <b>B</b>lue</span><div id="s31_data" class="tr_right slider"><div class="tr_left"></div><div id="s31_handle" class="handle"><img class="slider handle" src="images/slider/handle.png" alt="" /></div></div><input id="s31_val" name="s31_val" type="hidden" value="0"><div>&nbsp;&nbsp;<span id="s31_out" style="cursor:pointer" title="reset on click" onclick="slide[31].setValue(255);">0</span></div></div>';
			slide[0] = new Control.Slider('s0_handle', 's0_data', {
				range: $R(0.0, 4.00), sliderValue: 1.00, 
				onSlide: function(v) { forceRefresh(); $('s0_out').innerHTML = parseFloat(v).toFixed(2) },
				onChange: function(v) { forceRefresh(); $('s0_val').value = parseFloat(v); $('s0_out').innerHTML = parseFloat(v).toFixed(2); prepareFilter();}
			});
			slide[1] = new Control.Slider('s1_handle', 's1_data', {
				range: $R(0.0, 4.00), sliderValue: 1.00, 
				onSlide: function(v) { forceRefresh(); $('s1_out').innerHTML = parseFloat(v).toFixed(2) },
				onChange: function(v) { forceRefresh(); $('s1_val').value = parseFloat(v); $('s1_out').innerHTML = parseFloat(v).toFixed(2); prepareFilter();}
			});
			slide[2] = new Control.Slider('s2_handle', 's2_data', {
				range: $R(0.0, 4.00), sliderValue: 1.00, 
				onSlide: function(v) { forceRefresh(); $('s2_out').innerHTML = parseFloat(v).toFixed(2) },
				onChange: function(v) { forceRefresh(); $('s2_val').value = parseFloat(v); $('s2_out').innerHTML = parseFloat(v).toFixed(2); prepareFilter();}
			});
			slide[3] = new Control.Slider('s3_handle', 's3_data', {
				range: $R(0.0, 4.00), sliderValue: 1.00, 
				onSlide: function(v) { forceRefresh(); $('s3_out').innerHTML = parseFloat(v).toFixed(2) },
				onChange: function(v) { forceRefresh(); $('s3_val').value = parseFloat(v); $('s3_out').innerHTML = parseFloat(v).toFixed(2); prepareFilter();}
			});
			slide[4] = new Control.Slider('s4_handle', 's4_data', {
				range: $R(0.0, 4.00), sliderValue: 1.00, 
				onSlide: function(v) { forceRefresh(); $('s4_out').innerHTML = parseFloat(v).toFixed(2) },
				onChange: function(v) { forceRefresh(); $('s4_val').value = parseFloat(v); $('s4_out').innerHTML = parseFloat(v).toFixed(2); prepareFilter();}
			});
			slide[5] = new Control.Slider('s5_handle', 's5_data', {
				range: $R(0.0, 2.00), sliderValue: 1.00, 
				onSlide: function(v) { forceRefresh(); $('s5_out').innerHTML = parseFloat(v).toFixed(2) },
				onChange: function(v) { forceRefresh(); $('s5_val').value = parseFloat(v); $('s5_out').innerHTML = parseFloat(v).toFixed(2); prepareFilter();}
			});
			slide[6] = new Control.Slider('s6_handle', 's6_data', {
				range: $R(1, 16), sliderValue: 16, 
				onSlide: function(v) { forceRefresh(); $('s6_out').innerHTML = parseInt(v) },
				onChange: function(v) { forceRefresh(); $('s6_val').value = parseInt(v); $('s6_out').innerHTML = parseInt(v); prepareFilter();}
			});
			slide[7] = new Control.Slider('s7_handle', 's7_data', {
				range: $R(1, 64), sliderValue: 1, 
				onSlide: function(v) { forceRefresh(); $('s7_out').innerHTML = parseInt(v) },
				onChange: function(v) { forceRefresh(); $('s7_val').value = parseInt(v); $('s7_out').innerHTML = parseInt(v)+' px'; prepareFilter();}
			});
			slide[8] = new Control.Slider('s8_handle', 's8_data', {
				range: $R(1, 8), sliderValue: 1, 
				onSlide: function(v) { forceRefresh(); $('s8_out').innerHTML = parseInt(v) },
				onChange: function(v) { forceRefresh(); $('s8_val').value = parseInt(v); $('s8_out').innerHTML = parseInt(v)+' px'; prepareFilter();}
			});
			slide[9] = new Control.Slider('s9_handle', 's9_data', {
				range: $R(1, 64), sliderValue: 1, 
				onSlide: function(v) { forceRefresh(); $('s9_out').innerHTML = parseInt(v) },
				onChange: function(v) { forceRefresh(); $('s9_val').value = parseInt(v); $('s9_out').innerHTML = parseInt(v)+' px'; prepareFilter();}
			});
			slide[10] = new Control.Slider('s10_handle', 's10_data', {
				range: $R(0, 360), sliderValue: 0, 
				onSlide: function(v) { forceRefresh(); $('s10_out').innerHTML = parseInt(v) },
				onChange: function(v) { forceRefresh(); $('s10_val').value = parseInt(v); $('s10_out').innerHTML = parseInt(v)+' &deg;'; prepareFilter();}
			});
			slide[11] = new Control.Slider('s11_handle', 's11_data', {
				range: $R(0, 255), sliderValue: 0, 
				onSlide: function(v) { forceRefresh(); $('s11_out').innerHTML = parseInt(v) },
				onChange: function(v) { forceRefresh(); $('s11_val').value = parseInt(v); $('s11_out').innerHTML = parseInt(v); prepareFilter();}
			});
			slide[12] = new Control.Slider('s12_handle', 's12_data', {
				range: $R(0, 255), sliderValue: 0, 
				onSlide: function(v) { forceRefresh(); $('s12_out').innerHTML = parseInt(v) },
				onChange: function(v) { forceRefresh(); $('s12_val').value = parseInt(v); $('s12_out').innerHTML = parseInt(v); prepareFilter();}
			});
			slide[13] = new Control.Slider('s13_handle', 's13_data', {
				range: $R(0, 255), sliderValue: 0, 
				onSlide: function(v) { forceRefresh(); $('s13_out').innerHTML = parseInt(v) },
				onChange: function(v) { forceRefresh(); $('s13_val').value = parseInt(v); $('s13_out').innerHTML = parseInt(v); prepareFilter();}
			});
			slide[14] = new Control.Slider('s14_handle', 's14_data', {
				range: $R(0, 255), sliderValue: 0, 
				onSlide: function(v) { forceRefresh(); $('s14_out').innerHTML = parseInt(v) },
				onChange: function(v) { forceRefresh(); $('s14_val').value = parseInt(v); $('s14_out').innerHTML = parseInt(v); prepareFilter();}
			});
			slide[15] = new Control.Slider('s15_handle', 's15_data', {
				range: $R(0, 255), sliderValue: 0, 
				onSlide: function(v) { forceRefresh(); $('s15_out').innerHTML = parseInt(v) },
				onChange: function(v) { forceRefresh(); $('s15_val').value = parseInt(v); $('s15_out').innerHTML = parseInt(v); prepareFilter();}
			});
			slide[16] = new Control.Slider('s16_handle', 's16_data', {
				range: $R(0, 255), sliderValue: 0, 
				onSlide: function(v) { forceRefresh(); $('s16_out').innerHTML = parseInt(v) },
				onChange: function(v) { forceRefresh(); $('s16_val').value = parseInt(v); $('s16_out').innerHTML = parseInt(v); prepareFilter();}
			});
			slide[17] = new Control.Slider('s17_handle', 's17_data', {
				range: $R(0.00, 10.00), sliderValue: 1.00, 
				onSlide: function(v) { forceRefresh(); $('s17_out').innerHTML = parseFloat(v).toFixed(2) },
				onChange: function(v) { forceRefresh(); $('s17_val').value = parseFloat(v); $('s17_out').innerHTML = parseFloat(v).toFixed(2); prepareFilter();}
			});
			slide[18] = new Control.Slider('s18_handle', 's18_data', {
				range: $R(0, 255), sliderValue: 0, 
				onSlide: function(v) { forceRefresh(); $('s18_out').innerHTML = parseInt(v) },
				onChange: function(v) { forceRefresh(); $('s18_val').value = parseInt(v); $('s18_out').innerHTML = parseInt(v); prepareFilter();}
			});
			slide[19] = new Control.Slider('s19_handle', 's19_data', {
				range: $R(0.00, 2.00), sliderValue: -1.00, 
				onSlide: function(v) { forceRefresh(); $('s19_out').innerHTML = parseFloat(v).toFixed(2) },
				onChange: function(v) { forceRefresh(); $('s19_val').value = parseFloat(v); $('s19_out').innerHTML = parseFloat(v).toFixed(2); prepareFilter();}
			});
			slide[20] = new Control.Slider('s20_handle', 's20_data', {
				range: $R(0, 255), sliderValue: 0, 
				onSlide: function(v) { forceRefresh(); $('s20_out').innerHTML = parseInt(v) },
				onChange: function(v) { forceRefresh(); $('s20_val').value = parseInt(v); $('s20_out').innerHTML = parseInt(v); prepareFilter();}
			});
			slide[21] = new Control.Slider('s21_handle', 's21_data', {
				range: $R(0, 360), sliderValue: 127, 
				onSlide: function(v) { forceRefresh(); $('s21_out').innerHTML = parseInt(v) },
				onChange: function(v) { forceRefresh(); $('s21_val').value = parseInt(v); $('s21_out').innerHTML = parseInt(v)+' &deg;'; prepareFilter();}
			});
			slide[22] = new Control.Slider('s22_handle', 's22_data', {
				range: $R(0, 100), sliderValue: 10, 
				onSlide: function(v) { forceRefresh(); $('s22_out').innerHTML = parseInt(v) },
				onChange: function(v) { forceRefresh(); $('s22_val').value = parseInt(v); $('s22_out').innerHTML = parseInt(v)+' %'; prepareFilter();}
			});
			slide[23] = new Control.Slider('s23_handle', 's23_data', {
				range: $R(0, 100), sliderValue: 66, 
				onSlide: function(v) { forceRefresh(); $('s23_out').innerHTML = parseInt(v) },
				onChange: function(v) { forceRefresh(); $('s23_val').value = parseInt(v); $('s23_out').innerHTML = parseInt(v)+' %'; prepareFilter();}
			});
			slide[24] = new Control.Slider('s24_handle', 's24_data', {
				range: $R(0, 100), sliderValue: 50, 
				onSlide: function(v) { forceRefresh(); $('s24_out').innerHTML = parseInt(v) },
				onChange: function(v) { forceRefresh(); $('s24_val').value = parseInt(v); $('s24_out').innerHTML = parseInt(v)+' %'; prepareFilter();}
			});
			slide[25] = new Control.Slider('s25_handle', 's25_data', {
				range: $R(0, 100), sliderValue: 100, 
				onSlide: function(v) { forceRefresh(); $('s25_out').innerHTML = parseInt(v) },
				onChange: function(v) { forceRefresh(); $('s25_val').value = parseInt(v); $('s25_out').innerHTML = parseInt(v)+' %'; prepareFilter();}
			});
			slide[26] = new Control.Slider('s26_handle', 's26_data', {
				range: $R(0, 255), sliderValue: 0, 
				onSlide: function(v) { forceRefresh(); $('s26_out').innerHTML = parseInt(v) },
				onChange: function(v) { forceRefresh(); $('s26_val').value = parseInt(v); $('s26_out').innerHTML = parseInt(v); prepareFilter();}
			});
			slide[27] = new Control.Slider('s27_handle', 's27_data', {
				range: $R(0, 255), sliderValue: 100, 
				onSlide: function(v) { forceRefresh(); $('s27_out').innerHTML = parseInt(v) },
				onChange: function(v) { forceRefresh(); $('s27_val').value = parseInt(v); $('s27_out').innerHTML = parseInt(v); prepareFilter();}
			});
			slide[28] = new Control.Slider('s28_handle', 's28_data', {
				range: $R(0, 255), sliderValue: 0, 
				onSlide: function(v) { forceRefresh(); $('s28_out').innerHTML = parseInt(v) },
				onChange: function(v) { forceRefresh(); $('s28_val').value = parseInt(v); $('s28_out').innerHTML = parseInt(v); prepareFilter();}
			});
			slide[29] = new Control.Slider('s29_handle', 's29_data', {
				range: $R(0, 255), sliderValue: 0, 
				onSlide: function(v) { forceRefresh(); $('s29_out').innerHTML = parseInt(v) },
				onChange: function(v) { forceRefresh(); $('s29_val').value = parseInt(v); $('s29_out').innerHTML = parseInt(v); prepareFilter();}
			});
			slide[30] = new Control.Slider('s30_handle', 's30_data', {
				range: $R(0, 255), sliderValue: 255, 
				onSlide: function(v) { forceRefresh(); $('s30_out').innerHTML = parseInt(v) },
				onChange: function(v) { forceRefresh(); $('s30_val').value = parseInt(v); $('s30_out').innerHTML = parseInt(v); prepareFilter();}
			});
			slide[31] = new Control.Slider('s31_handle', 's31_data', {
				range: $R(0, 255), sliderValue: 0, 
				onSlide: function(v) { forceRefresh(); $('s31_out').innerHTML = parseInt(v) },
				onChange: function(v) { forceRefresh(); $('s31_val').value = parseInt(v); $('s31_out').innerHTML = parseInt(v); prepareFilter();}
			});
			slide[19].setDisabled();
			slide[20].setDisabled();
			setColor('tl_color','tl_value');
			setColor('tm_color','tm_value');
			setColor('th_color','th_value');
			$('b_multi').style.display='none';
			$('b_rgba').style.display='none';
			$('b_thres').style.display='none';
			$('b_post').style.display='none';
			$('b_2blur').style.display='none';
			$('b_blur').style.display='none';
			$('b_moti').style.display='none';
			$('b_rgb').style.display='none';
			$('b_tri').style.display='none';
			$('b_outl').style.display='none';
			$('b_extn').style.display='none';
			$('b_keys').style.display='none';
			$('b_keyc').style.display='none';
			if(!isGE) {cvi_pre.add($("preview"));} 
			if(ctx&&obj.style.display!="none") {toggleHeader('filter');}
		}else {
			$('filter_true').checked=false; $('filter_val').value='none'; 
		}
	}else {
		$('filter').innerHTML = '<div class="track">Empty</div>';
	}
}
function setupEffect(fx) {
	if(fx!=FXis) {
		var obj = $('effect'); var ele = $(fx); var stc = ''; $(FXis).className = 'script_bt'; FXis = fx;
		if(obj.style.display=="none"||obj.style.display===null) {toggleHeader('effect');} setupFilter(false);
		if(isCS&&!isIE) {stc = '<div class="track"><input style="margin-top: 0.33em;width: 12em;" type="button" name="save" value="Download Image" onclick="saveCanvas();"></div>';}
		switch(fx) {
			case "curl":
				ele.className = 'script_bt_active'; cvi_lab.remove($("picture"));
				if(isIE) {var suf = 'gif'; var txt = 'menu/'+fx+'.'+suf;}else {var suf = 'png'; var txt = 'icons/'+fx+'.'+suf;}
				obj.innerHTML = '<a href="../'+fx+'/"><div class="prog"><img style="width:1em;height:1em;" src="../cvi/images/'+txt+'" alt="'+fx+'.js"> <label><b>'+fx+'.js</b> home</label></div></a>'
				+ '<div class="track"><input onclick="playSound(\'clickSND\');if(this.checked){cvi_curl.modify($(\'picture\'), { color: $(\'b_color\').value });}else{cvi_curl.modify($(\'picture\'), { color: \'0\' });}" id="b_true" name="b_true" type="checkbox" value="0" tabindex="14" accesskey="c"> <label>Backside <u>c</u>olor</label></div>'
				+ '<div class="track"><input onchange="this.blur();setColor(\'b_color\',\'b_value\');if($(\'b_true\').checked){cvi_curl.modify($(\'picture\'), { color: this.value });}" onclick="setColor(\'b_color\',\'b_value\');if($(\'b_true\').checked){cvi_curl.modify($(\'picture\'), { color: this.value });}" id="b_color" name="b_color" class="o_col" type="text" tabindex="15" value="#e0e0e0"><div onClick="playSound(\'clickSND\');openPicker(\'b_value\',\'b_color\');" title="Open color picker" id="b_value" class="c_val" ><img src="images/layout/space.gif" alt="" /></div></div>'
				+ '<div class="track"><label>Curl size</label></div>'
				+ '<div class="track"><div id="v_size" class="tr_right slider"><div class="tr_left"></div><div id="s_handle" class="handle"><img class="slider handle" src="images/slider/handle.'+suf+'" alt="" /></div></div><input id="s_val" name="s_val" type="hidden" value="33"><div>&nbsp;&nbsp;<span id="s_out">33%</span></div></div>'
				+ '<div class="track"><label>Shadow opacity</label></div>'
				+ '<div class="track"><div id="v_opac" class="tr_right slider"><div class="tr_left"></div><div id="o_handle" class="handle"><img class="slider handle" src="images/slider/handle.'+suf+'" alt="" /></div></div><input id="o_val" name="o_val" type="hidden" value="66"><div>&nbsp;&nbsp;<span id="o_out">66%</span></div></div>'
				+ '<div class="track"><input onclick="playSound(\'clickSND\');cvi_curl.modify($(\'picture\'), { invert: this.checked });" id="i_true" name="i_true" type="checkbox" value="0" tabindex="16" accesskey="i"> <label><u>i</u>nvert clipping</label></div>'+ stc;
				new Control.Slider('s_handle', 'v_size', {
					range: $R(1, 100), sliderValue: 33, 
					onSlide: function(v) { forceRefresh(); $('s_out').innerHTML = parseInt(v)+'%' },
					onChange: function(v) { forceRefresh(); $('s_val').value = parseInt(v); $('s_out').innerHTML = parseInt(v)+'%'; cvi_curl.modify($("picture"), { size: parseInt(v) }); }
				}); 
				new Control.Slider('o_handle', 'v_opac', {
					range: $R(1, 100), sliderValue: 66, 
					onSlide: function(v) { forceRefresh(); $('o_out').innerHTML = parseInt(v)+'%' },
					onChange: function(v) { forceRefresh(); $('o_val').value = parseInt(v); $('o_out').innerHTML = parseInt(v)+'%'; cvi_curl.modify($("picture"), { shadow: parseInt(v) }); }
				});
				playSound('clickSND');
				setColor('b_color','b_value');
				cvi_curl.add($("picture"), { size: 33, shadow: 66, color: 0, invert: false });
				forceRefresh();
			break;
			
			case "reflex":
				ele.className = 'script_bt_active'; cvi_lab.remove($("picture"));
				if(isIE) {var suf = 'gif'; var txt = 'menu/'+fx+'.'+suf;}else {var suf = 'png'; var txt = 'icons/'+fx+'.'+suf;}
				obj.innerHTML = '<a href="../'+fx+'/"><div class="prog"><img style="width:1em;height:1em;" src="../cvi/images/'+txt+'" alt="'+fx+'.js"> <label><b>'+fx+'.js</b> home</label></div></a>'
				+ '<div class="track"><label>Border <u>c</u>olor</label></div>'
				+ '<div class="track"><input onchange="this.blur();setColor(\'b_color\',\'b_value\');cvi_reflex.modify($(\'picture\'), { color: this.value });" onclick="setColor(\'b_color\',\'b_value\');cvi_reflex.modify($(\'picture\'), { color: this.value });" id="b_color" name="b_color" class="o_col" type="text" tabindex="14" accesskey="c" value="#ffffff"><div onClick="playSound(\'clickSND\');openPicker(\'b_value\',\'b_color\');" title="Open color picker" id="b_value" class="c_val" ><img src="images/layout/space.gif" alt="" /></div></div>'
				+ '<div class="track"><label>Z-Tilt direction</label></div>'
				+ '<div class="track"><input onclick="$(\'t_val\').value=this.value;playSound(\'clickSND\');cvi_reflex.modify($(\'picture\'), { tilt: this.value });" tabindex="15" name="t_tilt" type="radio" value="none" accesskey="n" checked="checked"><u>n</u>one '
				+ '<input onclick="$(\'t_val\').value=this.value;playSound(\'clickSND\');cvi_reflex.modify($(\'picture\'), { tilt: this.value });" tabindex="16" name="t_tilt" type="radio" value="left" accesskey="l"><u>l</u>eft '
				+ '<input onclick="$(\'t_val\').value=this.value;playSound(\'clickSND\');cvi_reflex.modify($(\'picture\'), { tilt: this.value });" tabindex="17" name="t_tilt" type="radio" value="right" accesskey="r"><u>r</u>ight'
				+ '<input id="t_val" name="t_val" type="hidden" value="none"></div>'
				+ '<div class="track"><label>Reflection height</label></div>'
				+ '<div class="track"><div id="v_height" class="tr_right slider"><div class="tr_left"></div><div id="h_handle" class="handle"><img class="slider handle" src="images/slider/handle.'+suf+'" alt="" /></div></div><input id="h_val" name="h_val" type="hidden" value="33"><div>&nbsp;&nbsp;<span id="h_out">33%</span></div></div>'
				+ '<div class="track"><label>Reflection distance</label></div>'
				+ '<div class="track"><div id="v_dist" class="tr_right slider"><div class="tr_left"></div><div id="d_handle" class="handle"><img class="slider handle" src="images/slider/handle.'+suf+'" alt="" /></div></div><input id="d_val" name="d_val" type="hidden" value="0"><div>&nbsp;&nbsp;<span id="d_out">0px</span></div></div>'
				+ '<div class="track"><label>Reflection transparency</label></div>'
				+ '<div class="track"><div id="v_opac" class="tr_right slider"><div class="tr_left"></div><div id="o_handle" class="handle"><img class="slider handle" src="images/slider/handle.'+suf+'" alt="" /></div></div><input id="o_val" name="o_val" type="hidden" value="50"><div>&nbsp;&nbsp;<span id="o_out">50%</span></div></div>'
				+ '<div class="track"><label>Border size</label></div>'
				+ '<div class="track"><div id="v_border" class="tr_right slider"><div class="tr_left"></div><div id="b_handle" class="handle"><img class="slider handle" src="images/slider/handle.'+suf+'" alt="" /></div></div><input id="b_val" name="b_val" type="hidden" value="0"><div>&nbsp;&nbsp;<span id="b_out">0px</span></div></div>' + stc;
				new Control.Slider('h_handle', 'v_height', {
					range: $R(10, 100), sliderValue: 33, 
					onSlide: function(v) { forceRefresh(); $('h_out').innerHTML = parseInt(v)+'%' },
					onChange: function(v) { forceRefresh(); $('h_val').value = parseInt(v); $('h_out').innerHTML = parseInt(v)+'%'; cvi_reflex.modify($("picture"), { height: parseInt(v) }); }
				});
				new Control.Slider('d_handle', 'v_dist', {
					range: $R(0, 100), sliderValue: 0, 
					onSlide: function(v) { forceRefresh(); $('d_out').innerHTML = parseInt(v)+'px' },
					onChange: function(v) { forceRefresh(); $('d_val').value = parseInt(v); $('d_out').innerHTML = parseInt(v)+'px'; cvi_reflex.modify($("picture"), { distance: parseInt(v) }); }
				});
				new Control.Slider('o_handle', 'v_opac', {
					range: $R(1, 100), sliderValue: 50, 
					onSlide: function(v) { forceRefresh(); $('o_out').innerHTML = parseInt(v)+'%' },
					onChange: function(v) { forceRefresh(); $('o_val').value = parseInt(v); $('o_out').innerHTML = parseInt(v)+'%'; cvi_reflex.modify($("picture"), { transparency: parseInt(v) }); }
				});
				new Control.Slider('b_handle', 'v_border', {
					range: $R(0, 20), sliderValue: 0, 
					onSlide: function(v) { forceRefresh(); $('b_out').innerHTML = parseInt(v)+'px' },
					onChange: function(v) { forceRefresh(); $('b_val').value = parseInt(v); $('b_out').innerHTML = parseInt(v)+'px'; cvi_reflex.modify($("picture"), { border: parseInt(v) }); }
				});
				playSound('clickSND');
				setColor('b_color','b_value');
				cvi_reflex.add($("picture"), { tilt: 'none', height: 33, transparency: 50, distance: 0, border: 0, color: '#ffffff', boxmode: true });
				forceRefresh();
			break;
			
			case "edge":
				ele.className = 'script_bt_active'; cvi_lab.remove($("picture"));
				if(isIE) {var suf = 'gif'; var txt = 'menu/'+fx+'.'+suf;}else {var suf = 'png'; var txt = 'icons/'+fx+'.'+suf;}
				obj.innerHTML = '<a href="../'+fx+'/"><div class="prog"><img style="width:1em;height:1em;" src="../cvi/images/'+txt+'" alt="'+fx+'.js"> <label><b>'+fx+'.js</b> home</label></div></a>'
				+ '<div class="track"><input onclick="playSound(\'clickSND\');cvi_edge.modify($(\'picture\'), { inbuilt: this.checked });" id="b_true" name="b_true" type="checkbox" value="0" tabindex="14" accesskey="e" checked="checked"> <label>Inbuilt <u>e</u>dge</label></div>'
				+ '<div class="track"><select id="t_type" name="t_type" size="1" tabindex="15" accesskey="t" onchange="$(\'t_val\').value=this.options[this.selectedIndex].value;playSound(\'clickSND\');cvi_edge.modify($(\'picture\'), { type: this.options[this.selectedIndex].value });">'
				+ '<option value="f" selected=" selected">frame</option><option value="l">linear</option><option value="r">radial</option>'
				+ '</select><input id="t_val" name="t_val" type="hidden" value="f"> <label>Inbuilt <u>t</u>ype</label></div>'
				+ '<div class="track"><select id="t_angle" name="t_angle" size="1" tabindex="16" accesskey="a" onchange="$(\'a_val\').value=parseInt(this.options[this.selectedIndex].value);playSound(\'clickSND\');cvi_edge.modify($(\'picture\'), { angle: parseInt(this.options[this.selectedIndex].value) });">'
				+ '<option value="0" selected=" selected">0°</option><option value="90">90°</option><option value="180">180°</option><option value="270">270°</option>'
				+ '</select><input id="a_val" name="a_val" type="hidden" value="0"> <label>Inbuilt <u>a</u>ngle</label></div>'
				+ '<div class="track"><label>Soft edge size</label></div>'
				+ '<div class="track"><div id="v_size" class="tr_right slider"><div class="tr_left"></div><div id="s_handle" class="handle"><img class="slider handle" src="images/slider/handle.'+suf+'" alt="" /></div></div><input id="s_val" name="s_val" type="hidden" value="20"><div>&nbsp;&nbsp;<span id="s_out">20px</span></div></div>'
				+ '<div class="track"><label>Image masks</label></div>'
				+ '<div class="track"><input id="m_val" name="m_val" type="hidden" value="0">'
				+ '<img onClick="playSound(\'clickSND\');$(\'m_val\').value=0;cvi_edge.modify($(\'picture\'), {mask: 0 });" class="mask" src="masks/bubbles.png" title="bubbles" alt="0" />'
				+ '<img onClick="playSound(\'clickSND\');$(\'m_val\').value=1;cvi_edge.modify($(\'picture\'), {mask: 1 });" class="mask" src="masks/disturb.png" title="disturb" alt="1" />'
				+ '<img onClick="playSound(\'clickSND\');$(\'m_val\').value=2;cvi_edge.modify($(\'picture\'), {mask: 2 });" class="mask" src="masks/flames.png" title="flames" alt="2" /><br>'
				+ '<img onClick="playSound(\'clickSND\');$(\'m_val\').value=3;cvi_edge.modify($(\'picture\'), {mask: 3 });" class="mask" src="masks/skyline.png" title="skyline" alt="3" />'
				+ '<img onClick="playSound(\'clickSND\');$(\'m_val\').value=4;cvi_edge.modify($(\'picture\'), {mask: 4 });" class="mask" src="masks/text.png" title="text" alt="4" />'
				+ '<img onClick="playSound(\'clickSND\');$(\'m_val\').value=5;cvi_edge.modify($(\'picture\'), {mask: 5 });" class="mask" src="masks/crippleedge.png" title="crippleedge" alt="5" /><br>'
				+ '<img onClick="playSound(\'clickSND\');$(\'m_val\').value=6;cvi_edge.modify($(\'picture\'), {mask: 6 });" class="mask" src="masks/frizzedge.png" title="frizzedge" alt="6" />'
				+ '<img onClick="playSound(\'clickSND\');$(\'m_val\').value=7;cvi_edge.modify($(\'picture\'), {mask: 7 });" class="mask" src="masks/splatteredge.png" title="splatteredge" alt="7" />'
				+ '<img onClick="playSound(\'clickSND\');$(\'m_val\').value=8;cvi_edge.modify($(\'picture\'), {mask: 8 });" class="mask" src="masks/waveedge.png" title="waveedge" alt="8" /></div>' + stc;
				new Control.Slider('s_handle', 'v_size', {
					range: $R(1, 200), sliderValue: 20, 
					onSlide: function(v) { forceRefresh(); $('s_out').innerHTML = parseInt(v)+'px' },
					onChange: function(v) { forceRefresh(); $('s_val').value = parseInt(v); $('s_out').innerHTML = parseInt(v)+'px'; cvi_edge.modify($("picture"), { size: parseInt(v) }); }
				}); 
				playSound('clickSND');
				cvi_edge.add($("picture"), { size: 0, mask: 0, inbuilt: true });
				forceRefresh();
			break;
			
			case "corner":
				ele.className = 'script_bt_active'; cvi_lab.remove($("picture"));
				if(isIE) {var suf = 'gif'; var txt = 'menu/'+fx+'.'+suf;}else {var suf = 'png'; var txt = 'icons/'+fx+'.'+suf;}
				obj.innerHTML = '<a href="../'+fx+'/"><div class="prog"><img style="width:1em;height:1em;" src="../cvi/images/'+txt+'" alt="'+fx+'.js"> <label><b>'+fx+'.js</b> home</label></div></a>'
				+ '<div class="track"><label>Radius size</label></div>'
				+ '<div class="track"><div id="v_radius" class="tr_right slider"><div class="tr_left"></div><div id="r_handle" class="handle"><img class="slider handle" src="images/slider/handle.'+suf+'" alt="" /></div></div><input id="r_val" name="r_val" type="hidden" value="0"><div>&nbsp;&nbsp;<span id="r_out">0px</span></div></div>'
				+ '<div class="track"><label>Shade opacity</label></div>'
				+ '<div class="track"><div id="v_shade" class="tr_right slider"><div class="tr_left"></div><div id="s_handle" class="handle"><img class="slider handle" src="images/slider/handle.'+suf+'" alt="" /></div></div><input id="s_val" name="s_val" type="hidden" value="0"><div>&nbsp;&nbsp;<span id="s_out">0%</span></div></div>'
				+ '<div class="track"><label>Shadow opacity</label></div>'
				+ '<div class="track"><div id="v_opac" class="tr_right slider"><div class="tr_left"></div><div id="o_handle" class="handle"><img class="slider handle" src="images/slider/handle.'+suf+'" alt="" /></div></div><input id="o_val" name="o_val" type="hidden" value="0"><div>&nbsp;&nbsp;<span id="o_out">0%</span></div></div>'
				+ '<div class="track"><input onclick="playSound(\'clickSND\');cvi_corner.modify($(\'picture\'), { inverse: this.checked });" id="i_true" name="i_true" type="checkbox" value="0" tabindex="14" accesskey="i"> <label>Shadow <u>i</u>nverse</label></div>' + stc;
				new Control.Slider('r_handle', 'v_radius', {
					range: $R(0, 100), sliderValue: 0, 
					onSlide: function(v) { forceRefresh(); $('r_out').innerHTML = parseInt(v)+'px' },
					onChange: function(v) { forceRefresh(); $('r_val').value = parseInt(v); $('r_out').innerHTML = parseInt(v)+'px'; cvi_corner.modify($("picture"), { radius: parseInt(v) }); }
				});
				new Control.Slider('o_handle', 'v_opac', {
					range: $R(0, 100), sliderValue: 0, 
					onSlide: function(v) { forceRefresh(); $('o_out').innerHTML = parseInt(v)+'%' },
					onChange: function(v) { forceRefresh(); $('o_val').value = parseInt(v); $('o_out').innerHTML = parseInt(v)+'%'; cvi_corner.modify($("picture"), { shadow: parseInt(v) }); }
				});
				new Control.Slider('s_handle', 'v_shade', {
					range: $R(0, 100), sliderValue: 0, 
					onSlide: function(v) { forceRefresh(); $('s_out').innerHTML = parseInt(v)+'%' },
					onChange: function(v) { forceRefresh(); $('s_val').value = parseInt(v); $('s_out').innerHTML = parseInt(v)+'%'; cvi_corner.modify($("picture"), { shade: parseInt(v) }); }
				});
				playSound('clickSND');
				cvi_corner.add($('picture'), { radius: 0, shadow: 0, shade: 0, inverse: false });
				forceRefresh();
			break;
			
			case "glossy":
				ele.className = 'script_bt_active'; cvi_lab.remove($("picture"));
				if(isIE) {var suf = 'gif'; var txt = 'menu/'+fx+'.'+suf;}else {var suf = 'png'; var txt = 'icons/'+fx+'.'+suf;}
				obj.innerHTML = '<a href="../'+fx+'/"><div class="prog"><img style="width:1em;height:1em;" src="../cvi/images/'+txt+'" alt="'+fx+'.js"> <label><b>'+fx+'.js</b> home</label></div></a>'
				+ '<div class="track"><input onclick="playSound(\'clickSND\');if(this.checked){cvi_glossy.modify($(\'picture\'), { color: $(\'a_color\').value });}else{cvi_glossy.modify($(\'picture\'), { color: \'0\' });}" id="a_true" name="a_true" type="checkbox" value="0" tabindex="14" accesskey="c"> <label>Backgrnd <u>c</u>olor</label></div>'
				+ '<div class="track"><input onchange="this.blur();setColor(\'a_color\',\'a_value\');if($(\'a_true\').checked){cvi_glossy.modify($(\'picture\'), { color: this.value });}" onclick="setColor(\'a_color\',\'a_value\');if($(\'a_true\').checked){cvi_glossy.modify($(\'picture\'), { color: this.value });}" id="a_color" name="a_color" class="o_col" type="text" tabindex="15" value="#cccccc"><div onClick="playSound(\'clickSND\');openPicker(\'a_value\',\'a_color\');" title="Open color picker" id="a_value" class="c_val" ><img src="images/layout/space.gif" alt="" /></div></div>'
				+ '<div class="track"><input onclick="playSound(\'clickSND\');if(this.checked){cvi_glossy.modify($(\'picture\'), { color2: $(\'b_color\').value });}else{cvi_glossy.modify($(\'picture\'), { color2: \'0\' });}" id="b_true" name="b_true" type="checkbox" value="0" tabindex="16" accesskey="r"> <label>Gradient colo<u>r</u></label></div>'
				+ '<div class="track"><input onchange="this.blur();setColor(\'b_color\',\'b_value\');if($(\'b_true\').checked){cvi_glossy.modify($(\'picture\'), { color2: this.value });}" onclick="setColor(\'b_color\',\'b_value\');if($(\'b_true\').checked){cvi_glossy.modify($(\'picture\'), { color2: this.value });}" id="b_color" name="b_color" class="o_col" type="text" tabindex="17" value="#999999"><div onClick="playSound(\'clickSND\');openPicker(\'b_value\',\'b_color\');" title="Open color picker" id="b_value" class="c_val" ><img src="images/layout/space.gif" alt="" /></div></div>'
				+ '<div class="track" style="padding-left: 1em;"><input onclick="$(\'d_val\').value=this.value;playSound(\'clickSND\');cvi_glossy.modify($(\'picture\'), { gradient: this.value });" tabindex="18" name="s_grad" type="radio" value="diagonally" accesskey="d"> <u>d</u>iagonally course<br>'
				+ '<input onclick="$(\'d_val\').value=this.value;playSound(\'clickSND\');cvi_glossy.modify($(\'picture\'), { gradient: this.value });" tabindex="19" name="s_grad" type="radio" value="horizontal" accesskey="h"> <u>h</u>orizontal course<br>'
				+ '<input onclick="$(\'d_val\').value=this.value;playSound(\'clickSND\');cvi_glossy.modify($(\'picture\'), { gradient: this.value });" tabindex="20" name="s_grad" type="radio" value="vertical" accesskey="v" checked="checked"> <u>v</u>ertical course'
				+ '<input id="d_val" name="d_val" type="hidden" value="vertical"></div>'
				+ '<div class="track"><label>Radius size</label></div>'
				+ '<div class="track"><div id="v_radius" class="tr_right slider"><div class="tr_left"></div><div id="r_handle" class="handle"><img class="slider handle" src="images/slider/handle.'+suf+'" alt="" /></div></div><input id="r_val" name="r_val" type="hidden" value="25"><div>&nbsp;&nbsp;<span id="r_out">25%</span></div></div>'
				+ '<div class="track"><label>Shade opacity</label></div>'
				+ '<div class="track"><div id="v_shade" class="tr_right slider"><div class="tr_left"></div><div id="s_handle" class="handle"><img class="slider handle" src="images/slider/handle.'+suf+'" alt="" /></div></div><input id="s_val" name="s_val" type="hidden" value="50"><div>&nbsp;&nbsp;<span id="s_out">50%</span></div></div>'
				+ '<div class="track"><label>Shadow opacity</label></div>'
				+ '<div class="track"><div id="v_opac" class="tr_right slider"><div class="tr_left"></div><div id="o_handle" class="handle"><img class="slider handle" src="images/slider/handle.'+suf+'" alt="" /></div></div><input id="o_val" name="o_val" type="hidden" value="40"><div>&nbsp;&nbsp;<span id="o_out">40%</span></div></div>'
				+ '<div class="track"><input onclick="playSound(\'clickSND\');if($(\'n_true\').checked){this.checked=true;}else {cvi_glossy.modify($(\'picture\'), { noshadow: this.checked });}" id="s_true" name="s_true" type="checkbox" value="0" tabindex="21" accesskey="s"> <label>No <u>s</u>hadow</label></div>'
				+ '<div class="track"><input onclick="playSound(\'clickSND\');if($(\'s_true\').checked==false){$(\'s_true\').checked=true;}cvi_glossy.modify($(\'picture\'), { noshadow: $(\'s_true\').checked, noradius: this.checked });" id="n_true" name="n_true" type="checkbox" value="0" tabindex="22" accesskey="i"> <label>No rad<u>i</u>us</label></div>' + stc;
				new Control.Slider('r_handle', 'v_radius', {
					range: $R(10, 50), sliderValue: 25, 
					onSlide: function(v) { forceRefresh(); $('r_out').innerHTML = parseInt(v)+'%' },
					onChange: function(v) { forceRefresh(); $('r_val').value = parseInt(v); $('r_out').innerHTML = parseInt(v)+'%'; cvi_glossy.modify($("picture"), { radius: parseInt(v) }); }
				});
				new Control.Slider('s_handle', 'v_shade', {
					range: $R(0, 100), sliderValue: 50, 
					onSlide: function(v) { forceRefresh(); $('s_out').innerHTML = parseInt(v)+'%' },
					onChange: function(v) { forceRefresh(); $('s_val').value = parseInt(v); $('s_out').innerHTML = parseInt(v)+'%'; cvi_glossy.modify($("picture"), { shade: parseInt(v) }); }
				});
				new Control.Slider('o_handle', 'v_opac', {
					range: $R(0, 100), sliderValue: 40, 
					onSlide: function(v) { forceRefresh(); $('o_out').innerHTML = parseInt(v)+'%' },
					onChange: function(v) { forceRefresh(); $('o_val').value = parseInt(v); $('o_out').innerHTML = parseInt(v)+'%'; cvi_glossy.modify($("picture"), { shadow: parseInt(v) }); }
				});
				playSound('clickSND');
				setColor('a_color','a_value');
				setColor('b_color','b_value');
				cvi_glossy.add($('picture'), { radius: 25, shade: 50, shadow: 50, color: 0, color2: 0, gradient: 'v', noshadow: false, noradius: false });
				forceRefresh();
			break;
			
			case "instant":
				ele.className = 'script_bt_active'; cvi_lab.remove($("picture"));
				if(isIE) {var suf = 'gif'; var txt = 'menu/'+fx+'.'+suf;}else {var suf = 'png'; var txt = 'icons/'+fx+'.'+suf;}
				obj.innerHTML = '<a href="../'+fx+'/"><div class="prog"><img style="width:1em;height:1em;" src="../cvi/images/'+txt+'" alt="'+fx+'.js"> <label><b>'+fx+'.js</b> home</label></div></a>'
				+ '<div class="track"><label>Frame color</label></div>'
				+ '<div class="track"><input onchange="this.blur();setColor(\'b_color\',\'b_value\');cvi_instant.modify($(\'picture\'), { color: this.value });" onclick="setColor(\'b_color\',\'b_value\');cvi_instant.modify($(\'picture\'), { color: this.value });" id="b_color" name="b_color" class="o_col" type="text" tabindex="14" value="#f0f4ff"><div onClick="playSound(\'clickSND\');openPicker(\'b_value\',\'b_color\');" title="Open color picker" id="b_value" class="c_val" ><img src="images/layout/space.gif" alt="" /></div></div>'
				+ '<div class="track"><label>Tilt direction</label></div>'
				+ '<div class="track"><input onclick="$(\'t_val\').value=this.value;playSound(\'clickSND\');cvi_instant.modify($(\'picture\'), { tilt: this.value });" tabindex="15" name="t_tilt" type="radio" value="none" accesskey="n" checked="checked"><u>n</u>one '
				+ '<input onclick="$(\'t_val\').value=this.value;playSound(\'clickSND\');cvi_instant.modify($(\'picture\'), { tilt: this.value });" tabindex="16" name="t_tilt" type="radio" value="left" accesskey="l"><u>l</u>eft '
				+ '<input onclick="$(\'t_val\').value=this.value;playSound(\'clickSND\');cvi_instant.modify($(\'picture\'), { tilt: this.value });" tabindex="17" name="t_tilt" type="radio" value="right" accesskey="r"><u>r</u>ight'
				+ '<input id="t_val" name="t_val" type="hidden" value="none"></div>'
				+ '<div class="track"><label>Shadow opacity</label></div>'
				+ '<div class="track"><div id="v_opac" class="tr_right slider"><div class="tr_left"></div><div id="o_handle" class="handle"><img class="slider handle" src="images/slider/handle.'+suf+'" alt="" /></div></div><input id="o_val" name="o_val" type="hidden" value="33"><div>&nbsp;&nbsp;<span id="o_out">33%</span></div></div>'
				+ '<div class="track"><label>Shade opacity</label></div>'
				+ '<div class="track"><div id="v_shade" class="tr_right slider"><div class="tr_left"></div><div id="s_handle" class="handle"><img class="slider handle" src="images/slider/handle.'+suf+'" alt="" /></div></div><input id="s_val" name="s_val" type="hidden" value="33"><div>&nbsp;&nbsp;<span id="s_out">33%</span></div></div>'
				+ '<div class="track"><label>Text color</label></div>'
				+ '<div class="track"><input onchange="this.blur();setColor(\'b_tcolor\',\'b_tvalue\');cvi_instant.modify($(\'picture\'), { textcolor: this.value });" onclick="setColor(\'b_tcolor\',\'b_tvalue\');cvi_instant.modify($(\'picture\'), { textcolor: this.value });" id="b_tcolor" name="b_tcolor" class="o_col" type="text" tabindex="18" value="#000000"><div onClick="playSound(\'clickSND\');openPicker(\'b_tvalue\',\'b_tcolor\');" title="Open color picker" id="b_tvalue" class="c_val" ><img src="images/layout/space.gif" alt="" /></div></div>'
				+ '<div class="track"><input onchange="this.blur();cvi_instant.modify($(\'picture\'), {text: this.value });" id="x_val" name="x_val" class="o_text" type="text" tabindex="19" value=""></div>'
				+ '<div class="track"><label>Font weight/width/space</label></div>'
				+ '<div class="track"><div id="v_weight" class="tr_right slider"><div class="tr_left"></div><div id="w_handle" class="handle"><img class="slider handle" src="images/slider/handle.'+suf+'" alt="" /></div></div><input id="w_val" name="w_val" type="hidden" value="100"><div>&nbsp;&nbsp;<span id="w_out">100%</span></div></div>'
				+ '<div class="track"><div id="v_width" class="tr_right slider"><div class="tr_left"></div><div id="d_handle" class="handle"><img class="slider handle" src="images/slider/handle.'+suf+'" alt="" /></div></div><input id="d_val" name="d_val" type="hidden" value="100"><div>&nbsp;&nbsp;<span id="d_out">100%</span></div></div>'
				+ '<div class="track"><div id="v_space" class="tr_right slider"><div class="tr_left"></div><div id="p_handle" class="handle"><img class="slider handle" src="images/slider/handle.'+suf+'" alt="" /></div></div><input id="p_val" name="p_val" type="hidden" value="100"><div>&nbsp;&nbsp;<span id="p_out">100%</span></div></div>'
				+ '<div class="track"><input onclick="playSound(\'clickSND\');cvi_instant.modify($(\'picture\'), { noshade: this.checked });" id="s_true" name="s_true" type="checkbox" value="0" tabindex="20" accesskey="s"> <label>No <u>s</u>hading</label></div>'
				+ '<div class="track"><input onclick="if(this.checked==true){$(\'h_true\').checked=false;};playSound(\'clickSND\');cvi_instant.modify($(\'picture\'), { nocorner: this.checked, historical: $(\'h_true\').checked });" id="c_true" name="c_true" type="checkbox" value="0" tabindex="21" accesskey="c"> <label>Use round <u>c</u>orners</label></div>'
				+ '<div class="track"><input onclick="if(this.checked==true){$(\'c_true\').checked=false;};playSound(\'clickSND\');cvi_instant.modify($(\'picture\'), { nocorner: $(\'c_true\').checked, historical: this.checked });" id="h_true" name="h_true" type="checkbox" value="0" tabindex="22" accesskey="h"> <label>Use <u>h</u>istorical border</label></div>'
				+ '<div class="track"><input onclick="playSound(\'clickSND\');cvi_instant.modify($(\'picture\'), { preserve: this.checked });" id="p_true" name="p_true" type="checkbox" value="0" tabindex="23" accesskey="p"> <label><u>p</u>reserve Aspect</label></div>' + stc;
				new Control.Slider('o_handle', 'v_opac', {
					range: $R(1, 100), sliderValue: 33, 
					onSlide: function(v) { forceRefresh(); $('o_out').innerHTML = parseInt(v)+'%' },
					onChange: function(v) { forceRefresh(); $('o_val').value = parseInt(v); $('o_out').innerHTML = parseInt(v)+'%'; cvi_instant.modify($("picture"), { shadow: parseInt(v) }); }
				});
				new Control.Slider('s_handle', 'v_shade', {
					range: $R(10, 100), sliderValue: 33, 
					onSlide: function(v) { forceRefresh(); $('s_out').innerHTML = parseInt(v)+'%' },
					onChange: function(v) { forceRefresh(); $('s_val').value = parseInt(v); $('s_out').innerHTML = parseInt(v)+'%'; cvi_instant.modify($("picture"), { shade: parseInt(v) }); }
				});
				new Control.Slider('w_handle', 'v_weight', {
					range: $R(10, 200), sliderValue: 100, 
					onSlide: function(v) { forceRefresh(); $('w_out').innerHTML = parseInt(v)+'%' },
					onChange: function(v) { forceRefresh(); $('w_val').value = parseInt(v); $('w_out').innerHTML = parseInt(v)+'%'; cvi_instant.modify($("picture"), { fontattr: [parseInt(v),$('d_val').value,$('p_val').value] }); }
				});
				new Control.Slider('d_handle', 'v_width', {
					range: $R(10, 400), sliderValue: 100, 
					onSlide: function(v) { forceRefresh(); $('d_out').innerHTML = parseInt(v)+'%' },
					onChange: function(v) { forceRefresh(); $('d_val').value = parseInt(v); $('d_out').innerHTML = parseInt(v)+'%'; cvi_instant.modify($("picture"), { fontattr: [$('w_val').value,parseInt(v),$('p_val').value] }); }
				});
				new Control.Slider('p_handle', 'v_space', {
					range: $R(20, 400), sliderValue: 100, 
					onSlide: function(v) { forceRefresh(); $('p_out').innerHTML = parseInt(v)+'%' },
					onChange: function(v) { forceRefresh(); $('p_val').value = parseInt(v); $('p_out').innerHTML = parseInt(v)+'%'; cvi_instant.modify($("picture"), { fontattr: [$('w_val').value,$('d_val').value,parseInt(v)] }); }
				});
				playSound('clickSND');
				setColor('b_color','b_value');
				setColor('b_tcolor','b_tvalue');
				cvi_instant.add($("picture"), { textcolor: '#000000', fontattr: [100,100,100], text: '', tilt: 'none', shadow: 33, shade: 33, color: '#f0f4ff', noshade: false, nocorner: false, historical: false, preserve: false });
				forceRefresh();
			break;
			
			case "slided":
				ele.className = 'script_bt_active'; cvi_lab.remove($("picture"));
				if(isIE) {var suf = 'gif'; var txt = 'menu/'+fx+'.'+suf;}else {var suf = 'png'; var txt = 'icons/'+fx+'.'+suf;}
				obj.innerHTML = '<a href="../'+fx+'/"><div class="prog"><img style="width:1em;height:1em;" src="../cvi/images/'+txt+'" alt="'+fx+'.js"> <label><b>'+fx+'.js</b> home</label></div></a>'
				+ '<div class="track"><input onclick="playSound(\'clickSND\');if(this.checked){cvi_slide.modify($(\'picture\'), { color: $(\'a_color\').value });}else{cvi_slide.modify($(\'picture\'), { color: \'0\' });}" id="a_true" name="a_true" type="checkbox" value="0" tabindex="14" accesskey="c"> <label>Backgrnd <u>c</u>olor</label></div>'
				+ '<div class="track"><input onchange="this.blur();setColor(\'a_color\',\'a_value\');if($(\'a_true\').checked){cvi_slide.modify($(\'picture\'), { color: this.value });}" onclick="setColor(\'a_color\',\'a_value\');if($(\'a_true\').checked){cvi_slide.modify($(\'picture\'), { color: this.value });}" id="a_color" name="a_color" class="o_col" type="text" tabindex="15" value="#dddddd"><div onClick="playSound(\'clickSND\');openPicker(\'a_value\',\'a_color\');" title="Open color picker" id="a_value" class="c_val" ><img src="images/layout/space.gif" alt="" /></div></div>'
				+ '<div class="track"><input onclick="playSound(\'clickSND\');if(this.checked){cvi_slide.modify($(\'picture\'), { color2: $(\'b_color\').value });}else{cvi_slide.modify($(\'picture\'), { color2: \'0\' });}" id="b_true" name="b_true" type="checkbox" value="0" tabindex="16" accesskey="r"> <label>Gradient colo<u>r</u></label></div>'
				+ '<div class="track"><input onchange="this.blur();setColor(\'b_color\',\'b_value\');if($(\'b_true\').checked){cvi_slide.modify($(\'picture\'), { color2: this.value });}" onclick="setColor(\'b_color\',\'b_value\');if($(\'b_true\').checked){cvi_slide.modify($(\'picture\'), { color2: this.value });}" id="b_color" name="b_color" class="o_col" type="text" tabindex="17" value="#999999"><div onClick="playSound(\'clickSND\');openPicker(\'b_value\',\'b_color\');" title="Open color picker" id="b_value" class="c_val" ><img src="images/layout/space.gif" alt="" /></div></div>'
				+ '<div class="track" style="padding-left: 1em;"><input onclick="$(\'d_val\').value=this.value;playSound(\'clickSND\');cvi_slide.modify($(\'picture\'), { gradient: this.value });" tabindex="18" name="s_grad" type="radio" value="diagonally" accesskey="d" checked="checked"> <u>d</u>iagonally course<br>'
				+ '<input onclick="$(\'d_val\').value=this.value;playSound(\'clickSND\');cvi_slide.modify($(\'picture\'), { gradient: this.value });" tabindex="19" name="s_grad" type="radio" value="horizontal" accesskey="h"> <u>h</u>orizontal course<br>'
				+ '<input onclick="$(\'d_val\').value=this.value;playSound(\'clickSND\');cvi_slide.modify($(\'picture\'), { gradient: this.value });" tabindex="20" name="s_grad" type="radio" value="vertical" accesskey="v"> <u>v</u>ertical course'
				+ '<input id="d_val" name="d_val" type="hidden" value="diagonally"></div>'
				+ '<div class="track"><label>Shading opacity</label></div>'
				+ '<div class="track"><div id="v_shade" class="tr_right slider"><div class="tr_left"></div><div id="s_handle" class="handle"><img class="slider handle" src="images/slider/handle.'+suf+'" alt="" /></div></div><input id="s_val" name="s_val" type="hidden" value="50"><div>&nbsp;&nbsp;<span id="s_out">50%</span></div></div>'
				+ '<div class="track"><label>Shadow opacity</label></div>'
				+ '<div class="track"><div id="v_opac" class="tr_right slider"><div class="tr_left"></div><div id="o_handle" class="handle"><img class="slider handle" src="images/slider/handle.'+suf+'" alt="" /></div></div><input id="o_val" name="o_val" type="hidden" value="40"><div>&nbsp;&nbsp;<span id="o_out">40%</span></div></div>'
				+ '<div class="track"><label>Text color</label></div>'
				+ '<div class="track"><input onchange="this.blur();setColor(\'b_tcolor\',\'b_tvalue\');cvi_slide.modify($(\'picture\'), { textcolor: this.value });" onclick="setColor(\'b_tcolor\',\'b_tvalue\');cvi_slide.modify($(\'picture\'), { textcolor: this.value });" id="b_tcolor" name="b_tcolor" class="o_col" type="text" tabindex="21" value="#000000"><div onClick="playSound(\'clickSND\');openPicker(\'b_tvalue\',\'b_tcolor\');" title="Open color picker" id="b_tvalue" class="c_val" ><img src="images/layout/space.gif" alt="" /></div></div>'
				+ '<div class="track"><input onchange="this.blur();cvi_slide.modify($(\'picture\'), {text: this.value });" id="x_val" name="x_val" class="o_text" type="text" tabindex="22" value=""></div>'
				+ '<div class="track"><label>Font weight/width/space</label></div>'
				+ '<div class="track"><div id="v_weight" class="tr_right slider"><div class="tr_left"></div><div id="w_handle" class="handle"><img class="slider handle" src="images/slider/handle.'+suf+'" alt="" /></div></div><input id="w_val" name="w_val" type="hidden" value="100"><div>&nbsp;&nbsp;<span id="w_out">100%</span></div></div>'
				+ '<div class="track"><div id="v_width" class="tr_right slider"><div class="tr_left"></div><div id="k_handle" class="handle"><img class="slider handle" src="images/slider/handle.'+suf+'" alt="" /></div></div><input id="k_val" name="k_val" type="hidden" value="100"><div>&nbsp;&nbsp;<span id="k_out">100%</span></div></div>'
				+ '<div class="track"><div id="v_space" class="tr_right slider"><div class="tr_left"></div><div id="p_handle" class="handle"><img class="slider handle" src="images/slider/handle.'+suf+'" alt="" /></div></div><input id="p_val" name="p_val" type="hidden" value="100"><div>&nbsp;&nbsp;<span id="p_out">100%</span></div></div>'
				+ '<div class="track"><input onclick="playSound(\'clickSND\');cvi_slide.modify($(\'picture\'), { noshadow: this.checked });" id="s_true" name="s_true" type="checkbox" value="0" tabindex="23" accesskey="s"> <label>No <u>s</u>hadow</label></div>'
				+ '<div class="track"><input onclick="playSound(\'clickSND\');cvi_slide.modify($(\'picture\'), { nocircles: this.checked });" id="c_true" name="c_true" type="checkbox" value="0" tabindex="24" accesskey="l"> <label>No circ<u>l</u>es</label></div>' + stc;
				new Control.Slider('s_handle', 'v_shade', {
					range: $R(1, 100), sliderValue: 40, 
					onSlide: function(v) { forceRefresh(); $('s_out').innerHTML = parseInt(v)+'%' },
					onChange: function(v) { forceRefresh(); $('s_val').value = parseInt(v); $('s_out').innerHTML = parseInt(v)+'%'; cvi_slide.modify($("picture"), { shade: parseInt(v) }); }
				});
				new Control.Slider('o_handle', 'v_opac', {
					range: $R(1, 100), sliderValue: 40, 
					onSlide: function(v) { forceRefresh(); $('o_out').innerHTML = parseInt(v)+'%' },
					onChange: function(v) { forceRefresh(); $('o_val').value = parseInt(v); $('o_out').innerHTML = parseInt(v)+'%'; cvi_slide.modify($("picture"), { shadow: parseInt(v) }); }
				});
				new Control.Slider('w_handle', 'v_weight', {
					range: $R(10, 200), sliderValue: 100, 
					onSlide: function(v) { forceRefresh(); $('w_out').innerHTML = parseInt(v)+'%' },
					onChange: function(v) { forceRefresh(); $('w_val').value = parseInt(v); $('w_out').innerHTML = parseInt(v)+'%'; cvi_slide.modify($("picture"), { fontattr: [parseInt(v),$('k_val').value,$('p_val').value] }); }
				});
				new Control.Slider('k_handle', 'v_width', {
					range: $R(10, 400), sliderValue: 100, 
					onSlide: function(v) { forceRefresh(); $('k_out').innerHTML = parseInt(v)+'%' },
					onChange: function(v) { forceRefresh(); $('k_val').value = parseInt(v); $('k_out').innerHTML = parseInt(v)+'%'; cvi_slide.modify($("picture"), { fontattr: [$('w_val').value,parseInt(v),$('p_val').value] }); }
				});
				new Control.Slider('p_handle', 'v_space', {
					range: $R(20, 400), sliderValue: 100, 
					onSlide: function(v) { forceRefresh(); $('p_out').innerHTML = parseInt(v)+'%' },
					onChange: function(v) { forceRefresh(); $('p_val').value = parseInt(v); $('p_out').innerHTML = parseInt(v)+'%'; cvi_slide.modify($("picture"), { fontattr: [$('w_val').value,$('k_val').value,parseInt(v)] }); }
				});
				playSound('clickSND');
				setColor('a_color','a_value');
				setColor('b_color','b_value');
				setColor('b_tcolor','b_tvalue');
				cvi_slide.add($('picture'), { shade: 50, shadow: 40, color: 0, color2: 0, gradient: 'd', noshadow: false, nocircles: false, textcolor: '#000000', fontattr: [100,100,100], text: '' });
				forceRefresh();
			break;
			
			case "filmed":
				ele.className = 'script_bt_active'; cvi_lab.remove($("picture"));
				if(isIE) {var suf = 'gif'; var txt = 'menu/'+fx+'.'+suf;}else {var suf = 'png'; var txt = 'icons/'+fx+'.'+suf;}
				obj.innerHTML = '<a href="../'+fx+'/"><div class="prog"><img style="width:1em;height:1em;" src="../cvi/images/'+txt+'" alt="'+fx+'.js"> <label><b>'+fx+'.js</b> home</label></div></a>'
				+ '<div class="track"><label>Filmstrip <u>c</u>olor</label></div>'
				+ '<div class="track"><input onchange="this.blur();setColor(\'a_color\',\'a_value\');cvi_strip.modify($(\'picture\'), { color: this.value });" onclick="setColor(\'a_color\',\'a_value\');cvi_strip.modify($(\'picture\'), { color: this.value });" id="a_color" name="a_color" class="o_col" type="text" tabindex="14" accesskey="c" value="#000000"><div onClick="playSound(\'clickSND\');openPicker(\'a_value\',\'a_color\');" title="Open color picker" id="a_value" class="c_val" ><img src="images/layout/space.gif" alt="" /></div></div>'
				+ '<div class="track"><label>Strip opacity</label></div>'
				+ '<div class="track"><div id="v_strip" class="tr_right slider"><div class="tr_left"></div><div id="t_handle" class="handle"><img class="slider handle" src="images/slider/handle.'+suf+'" alt="" /></div></div><input id="t_val" name="t_val" type="hidden" value="100"><div>&nbsp;&nbsp;<span id="t_out">100%</span></div></div>'
				+ '<div class="track"'+(isIE?' style="color:black;"':"")+'><label>Shine opacity</label></div>'
				+ '<div class="track"><div id="v_shine" class="tr_right slider"><div class="tr_left"></div><div id="s_handle" class="handle"><img class="slider handle" src="images/slider/handle.'+suf+'" alt="" /></div></div><input id="s_val" name="s_val" type="hidden" value="25"><div>&nbsp;&nbsp;<span id="s_out">'+(isIE?"0%":"25%")+'</span></div></div>'
				+ '<div class="track"><label>Shadow opacity</label></div>'
				+ '<div class="track"><div id="v_opac" class="tr_right slider"><div class="tr_left"></div><div id="o_handle" class="handle"><img class="slider handle" src="images/slider/handle.'+suf+'" alt="" /></div></div><input id="o_val" name="o_val" type="hidden" value="33"><div>&nbsp;&nbsp;<span id="o_out">33%</span></div></div>'
				+ '<div class="track"><input onclick="playSound(\'clickSND\');cvi_strip.modify($(\'picture\'), { noshadow: this.checked });" id="s_true" name="s_true" type="checkbox" value="0" tabindex="15" accesskey="s"> <label>No <u>s</u>hadow</label></div>'
				+ '<div class="track"><input onclick="playSound(\'clickSND\');cvi_strip.modify($(\'picture\'), { softshadow: this.checked });" id="t_true" name="t_true" type="checkbox" value="0" tabindex="16" accesskey="t"> <label>Sof<u>t</u> shadow</label></div>' + stc;
				new Control.Slider('t_handle', 'v_strip', {
					range: $R(1, 100), sliderValue: 100, 
					onSlide: function(v) { forceRefresh(); $('t_out').innerHTML = parseInt(v)+'%' },
					onChange: function(v) { forceRefresh(); $('t_val').value = parseInt(v); $('t_out').innerHTML = parseInt(v)+'%'; cvi_strip.modify($("picture"), { strip: parseInt(v) }); }
				});
				if(!isIE) {
					new Control.Slider('s_handle', 'v_shine', {
						range: $R(1, 100), sliderValue: 25, 
						onSlide: function(v) { forceRefresh(); $('s_out').innerHTML = parseInt(v)+'%' },
						onChange: function(v) { forceRefresh(); $('s_val').value = parseInt(v); $('s_out').innerHTML = parseInt(v)+'%'; cvi_strip.modify($("picture"), { shine: parseInt(v) }); }
					});
				}
				new Control.Slider('o_handle', 'v_opac', {
					range: $R(1, 100), sliderValue: 33, 
					onSlide: function(v) { forceRefresh(); $('o_out').innerHTML = parseInt(v)+'%' },
					onChange: function(v) { forceRefresh(); $('o_val').value = parseInt(v); $('o_out').innerHTML = parseInt(v)+'%'; cvi_strip.modify($("picture"), { shadow: parseInt(v) }); }
				});
				playSound('clickSND');
				setColor('a_color','a_value');
				cvi_strip.add($('picture'), { strip: 100, shine: 25, shadow: 33, color: '#000000', noshadow: false, softshadow: false });
				forceRefresh();
			break;
			
			case "bevel":
				ele.className = 'script_bt_active'; cvi_lab.remove($("picture"));
				if(isIE) {var suf = 'gif'; var txt = 'menu/'+fx+'.'+suf;}else {var suf = 'png'; var txt = 'icons/'+fx+'.'+suf;}
				obj.innerHTML = '<a href="../'+fx+'/"><div class="prog"><img style="width:1em;height:1em;" src="../cvi/images/'+txt+'" alt="'+fx+'.js"> <label><b>'+fx+'.js</b> home</label></div></a>'
				+ '<div class="track"><input onclick="playSound(\'clickSND\');cvi_bevel.modify($(\'picture\'), { usemask: this.checked });" id="m_true" name="m_true" type="checkbox" value="0" tabindex="14" accesskey="m"> <label>Use backgrnd <u>m</u>ask</label></div>'
				+ '<div class="track"><input onchange="this.blur();setColor(\'b_color\',\'b_value\');if($(\'m_true\').checked){cvi_bevel.modify($(\'picture\'), { backcolor: this.value });}" onclick="setColor(\'b_color\',\'b_value\');if($(\'m_true\').checked){cvi_bevel.modify($(\'picture\'), { backcolor: this.value });}" id="b_color" name="b_color" class="o_col" type="text" tabindex="15" value="#0080ff"><div onClick="playSound(\'clickSND\');openPicker(\'b_value\',\'b_color\');" title="Open color picker" id="b_value" class="c_val" ><img src="images/layout/space.gif" alt="" /></div></div>'
				+ '<div class="track"><input onchange="this.blur();setColor(\'f_color\',\'f_value\');if($(\'m_true\').checked){cvi_bevel.modify($(\'picture\'), { fillcolor: this.value });}" onclick="setColor(\'f_color\',\'f_value\');if($(\'m_true\').checked){cvi_bevel.modify($(\'picture\'), { fillcolor: this.value });}" id="f_color" name="f_color" class="o_col" type="text" tabindex="16" value="#0080ff"><div onClick="playSound(\'clickSND\');openPicker(\'f_value\',\'f_color\');" title="Open color picker" id="f_value" class="c_val" ><img src="images/layout/space.gif" alt="" /></div></div>'
				+ '<div class="track"><input onclick="playSound(\'clickSND\');cvi_bevel.modify($(\'picture\'), { noglow: this.checked });" id="g_true" name="g_true" type="checkbox" value="0" tabindex="17" accesskey="g"> <label>No <u>g</u>low</label></div>'
				+ '<div class="track"><input onchange="this.blur();setColor(\'g_color\',\'g_value\');if(!$(\'g_true\').checked){cvi_bevel.modify($(\'picture\'), { glowcolor: this.value });}" onclick="setColor(\'g_color\',\'g_value\');if(!$(\'g_true\').checked){cvi_bevel.modify($(\'picture\'), { glowcolor: this.value });}" id="g_color" name="g_color" class="o_col" type="text" tabindex="18" value="#000000"><div onClick="playSound(\'clickSND\');openPicker(\'g_value\',\'g_color\');" title="Open color picker" id="g_value" class="c_val" ><img src="images/layout/space.gif" alt="" /></div></div>'
				+ '<div class="track"><div id="g_opac" class="tr_right slider"><div class="tr_left"></div><div id="g_handle" class="handle"><img class="slider handle" src="images/slider/handle.'+suf+'" alt="" /></div></div><input id="g_val" name="g_val" type="hidden" value="33"><div>&nbsp;&nbsp;<span id="g_out">33%</span></div></div>'
				+ '<div class="track"><input onclick="playSound(\'clickSND\');cvi_bevel.modify($(\'picture\'), { noshine: this.checked });" id="h_true" name="h_true" type="checkbox" value="0" tabindex="19" accesskey="h"> <label>No s<u>h</u>ine</label></div>'
				+ '<div class="track"><input onchange="this.blur();setColor(\'h_color\',\'h_value\');if(!$(\'h_true\').checked){cvi_bevel.modify($(\'picture\'), { shinecolor: this.value });}" onclick="setColor(\'h_color\',\'h_value\');if(!$(\'h_true\').checked){cvi_bevel.modify($(\'picture\'), { shinecolor: this.value });}" id="h_color" name="h_color" class="o_col" type="text" tabindex="20" value="#ffffff"><div onClick="playSound(\'clickSND\');openPicker(\'h_value\',\'h_color\');" title="Open color picker" id="h_value" class="c_val" ><img src="images/layout/space.gif" alt="" /></div></div>'
				+ '<div class="track"><div id="h_opac" class="tr_right slider"><div class="tr_left"></div><div id="h_handle" class="handle"><img class="slider handle" src="images/slider/handle.'+suf+'" alt="" /></div></div><input id="h_val" name="h_val" type="hidden" value="40"><div>&nbsp;&nbsp;<span id="h_out">40%</span></div></div>'
				+ '<div class="track"><input onclick="playSound(\'clickSND\');cvi_bevel.modify($(\'picture\'), { noshade: this.checked });" id="s_true" name="s_true" type="checkbox" value="0" tabindex="21" accesskey="s"> <label>No <u>s</u>hade</label> <input onclick="playSound(\'clickSND\');cvi_bevel.modify($(\'picture\'), { linear: this.checked });" id="l_true" name="l_true" type="checkbox" value="0" tabindex="22" accesskey="l"> <label><u>l</u>inear</label></div>'
				+ '<div class="track"><input onchange="this.blur();setColor(\'s_color\',\'s_value\');if(!$(\'s_true\').checked){cvi_bevel.modify($(\'picture\'), { shadecolor: this.value });}" onclick="setColor(\'s_color\',\'s_value\');if(!$(\'s_true\').checked){cvi_bevel.modify($(\'picture\'), { shadecolor: this.value });}" id="s_color" name="s_color" class="o_col" type="text" tabindex="23" value="#000000"><div onClick="playSound(\'clickSND\');openPicker(\'s_value\',\'s_color\');" title="Open color picker" id="s_value" class="c_val" ><img src="images/layout/space.gif" alt="" /></div></div>'
				+ '<div class="track"><div id="s_opac" class="tr_right slider"><div class="tr_left"></div><div id="s_handle" class="handle"><img class="slider handle" src="images/slider/handle.'+suf+'" alt="" /></div></div><input id="s_val" name="s_val" type="hidden" value="50"><div>&nbsp;&nbsp;<span id="s_out">50%</span></div></div>'
				+ '<div class="track"><label>Radius size</label></div>'
				+ '<div class="track"><div id="r_adius" class="tr_right slider"><div class="tr_left"></div><div id="r_handle" class="handle"><img class="slider handle" src="images/slider/handle.'+suf+'" alt="" /></div></div><input id="r_val" name="r_val" type="hidden" value="20"><div>&nbsp;&nbsp;<span id="r_out">20%</span></div></div>' + stc;
				new Control.Slider('g_handle', 'g_opac', {
					range: $R(1, 100), sliderValue: 33, 
					onSlide: function(v) { forceRefresh(); $('g_out').innerHTML = parseInt(v)+'%' },
					onChange: function(v) { forceRefresh(); $('g_val').value = parseInt(v); $('g_out').innerHTML = parseInt(v)+'%'; if(!$('g_true').checked){cvi_bevel.modify($("picture"), { glow: parseInt(v) });} }
				}); 
				new Control.Slider('h_handle', 'h_opac', {
					range: $R(1, 100), sliderValue: 40, 
					onSlide: function(v) { forceRefresh(); $('h_out').innerHTML = parseInt(v)+'%' },
					onChange: function(v) { forceRefresh(); $('h_val').value = parseInt(v); $('h_out').innerHTML = parseInt(v)+'%'; if(!$('h_true').checked){cvi_bevel.modify($("picture"), { shine: parseInt(v) });} }
				}); 
				new Control.Slider('s_handle', 's_opac', {
					range: $R(1, 100), sliderValue: 50, 
					onSlide: function(v) { forceRefresh(); $('s_out').innerHTML = parseInt(v)+'%' },
					onChange: function(v) { forceRefresh(); $('s_val').value = parseInt(v); $('s_out').innerHTML = parseInt(v)+'%'; if(!$('s_true').checked){cvi_bevel.modify($("picture"), { shade: parseInt(v) });} }
				}); 
				new Control.Slider('r_handle', 'r_adius', {
					range: $R(20, 40), sliderValue: 20, 
					onSlide: function(v) { forceRefresh(); $('r_out').innerHTML = parseInt(v)+'%' },
					onChange: function(v) { forceRefresh(); $('r_val').value = parseInt(v); $('r_out').innerHTML = parseInt(v)+'%'; cvi_bevel.modify($("picture"), { radius: parseInt(v) }); }
				});
				playSound('clickSND');
				setColor('b_color','b_value');
				setColor('f_color','f_value');
				setColor('g_color','g_value');
				setColor('h_color','h_value');
				setColor('s_color','s_value');
				cvi_bevel.add($("picture"), { radius: 20, glow: 33, shine: 40, shade: 50, linear: false, noglow: false, noshine: false, noshade: false, usemask: false });
				forceRefresh();
			break;
			
			case "sphere":
				ele.className = 'script_bt_active'; cvi_lab.remove($("picture"));
				if(isIE) {var suf = 'gif'; var txt = 'menu/'+fx+'.'+suf;}else {var suf = 'png'; var txt = 'icons/'+fx+'.'+suf;}
				obj.innerHTML = '<a href="../'+fx+'/"><div class="prog"><img style="width:1em;height:1em;" src="../cvi/images/'+txt+'" alt="'+fx+'.js"> <label><b>'+fx+'.js</b> home</label></div></a>'
				+ '<div class="track"><input onclick="playSound(\'clickSND\');if(this.checked){cvi_sphere.modify($(\'picture\'), { color: $(\'a_color\').value });}else{$(\'b_true\').checked=false; cvi_sphere.modify($(\'picture\'), { color: \'0\', color2: \'0\' });}" id="a_true" name="a_true" type="checkbox" value="0" tabindex="14" accesskey="c"> <label>Backgrnd <u>c</u>olor</label></div>'
				+ '<div class="track"><input onchange="this.blur();setColor(\'a_color\',\'a_value\');if($(\'a_true\').checked){cvi_sphere.modify($(\'picture\'), { color: this.value });}" onclick="setColor(\'a_color\',\'a_value\');if($(\'a_true\').checked){cvi_sphere.modify($(\'picture\'), { color: this.value });}" id="a_color" name="a_color" class="o_col" type="text" tabindex="15" value="#0000ff"><div onClick="playSound(\'clickSND\');openPicker(\'a_value\',\'a_color\');" title="Open color picker" id="a_value" class="c_val" ><img src="images/layout/space.gif" alt="" /></div></div>'
				+ '<div class="track"><input onclick="playSound(\'clickSND\');if(this.checked&&$(\'a_true\').checked){cvi_sphere.modify($(\'picture\'), { color2: $(\'b_color\').value });}else{$(\'b_true\').checked=false; cvi_sphere.modify($(\'picture\'), { color2: \'0\' });}" id="b_true" name="b_true" type="checkbox" value="0" tabindex="16" accesskey="r"> <label>Gradient colo<u>r</u></label></div>'
				+ '<div class="track"><input onchange="this.blur();setColor(\'b_color\',\'b_value\');if($(\'b_true\').checked&&$(\'a_true\').checked){cvi_sphere.modify($(\'picture\'), { color2: this.value });}" onclick="setColor(\'b_color\',\'b_value\');if($(\'b_true\').checked){cvi_sphere.modify($(\'picture\'), { color2: this.value });}" id="b_color" name="b_color" class="o_col" type="text" tabindex="17" value="#00ffff"><div onClick="playSound(\'clickSND\');openPicker(\'b_value\',\'b_color\');" title="Open color picker" id="b_value" class="c_val" ><img src="images/layout/space.gif" alt="" /></div></div>'
				+ '<div class="track"><label>Image opacity</label></div>'
				+ '<div class="track"><div id="v_opac" class="tr_right slider"><div class="tr_left"></div><div id="o_handle" class="handle"><img class="slider handle" src="images/slider/handle.'+suf+'" alt="" /></div></div><input id="o_val" name="o_val" type="hidden" value="100"><div>&nbsp;&nbsp;<span id="o_out">100%</span></div></div>'
				+ '<div class="track"><label>Image zoom</label></div>'
				+ '<div class="track"><div id="v_zoom" class="tr_right slider"><div class="tr_left"></div><div id="z_handle" class="handle"><img class="slider handle" src="images/slider/handle.'+suf+'" alt="" /></div></div><input id="z_val" name="z_val" type="hidden" value="100"><div>&nbsp;&nbsp;<span id="z_out">100%</span></div></div>'
				+ '<div class="track"><label>Image shift</label></div>'
				+ '<div class="track"><div id="v_shift" class="tr_right slider"><div class="tr_left"></div><div id="t_handle" class="handle"><img class="slider handle" src="images/slider/handle.'+suf+'" alt="" /></div></div><input id="t_val" name="t_val" type="hidden" value="50"><div>&nbsp;&nbsp;<span id="t_out">50%</span></div></div>'
				+ '<div class="track"><label>Shine opacity</label></div>'
				+ '<div class="track"><div id="v_shine" class="tr_right slider"><div class="tr_left"></div><div id="h_handle" class="handle"><img class="slider handle" src="images/slider/handle.'+suf+'" alt="" /></div></div><input id="h_val" name="h_val" type="hidden" value="100"><div>&nbsp;&nbsp;<span id="h_out">100%</span></div></div>'
				+ '<div class="track"><label>Shade opacity</label></div>'
				+ '<div class="track"><div id="v_shade" class="tr_right slider"><div class="tr_left"></div><div id="s_handle" class="handle"><img class="slider handle" src="images/slider/handle.'+suf+'" alt="" /></div></div><input id="s_val" name="s_val" type="hidden" value="100"><div>&nbsp;&nbsp;<span id="s_out">100%</span></div></div>' + stc;
				new Control.Slider('o_handle', 'v_opac', {
					range: $R(1, 100), sliderValue: 100, 
					onSlide: function(v) { forceRefresh(); $('o_out').innerHTML = parseInt(v)+'%' },
					onChange: function(v) { forceRefresh(); $('o_val').value = parseInt(v); $('o_out').innerHTML = parseInt(v)+'%'; cvi_sphere.modify($("picture"), { alpha: parseInt(v) }); }
				});
				new Control.Slider('z_handle', 'v_zoom', {
					range: $R(100, 200), sliderValue: 100, 
					onSlide: function(v) { forceRefresh(); $('z_out').innerHTML = parseInt(v)+'%' },
					onChange: function(v) { forceRefresh(); $('z_val').value = parseInt(v); $('z_out').innerHTML = parseInt(v)+'%'; cvi_sphere.modify($("picture"), { zoom: parseInt(v) }); }
				});
				new Control.Slider('t_handle', 'v_shift', {
					range: $R(0, 100), sliderValue: 50, 
					onSlide: function(v) { forceRefresh(); $('t_out').innerHTML = parseInt(v)+'%' },
					onChange: function(v) { forceRefresh(); $('t_val').value = parseInt(v); $('t_out').innerHTML = parseInt(v)+'%'; cvi_sphere.modify($("picture"), { shift: parseInt(v) }); }
				});
				new Control.Slider('h_handle', 'v_shine', {
					range: $R(1, 100), sliderValue: 100, 
					onSlide: function(v) { forceRefresh(); $('h_out').innerHTML = parseInt(v)+'%' },
					onChange: function(v) { forceRefresh(); $('h_val').value = parseInt(v); $('h_out').innerHTML = parseInt(v)+'%'; cvi_sphere.modify($("picture"), { shine: parseInt(v) }); }
				});
				new Control.Slider('s_handle', 'v_shade', {
					range: $R(1, 100), sliderValue: 100, 
					onSlide: function(v) { forceRefresh(); $('s_out').innerHTML = parseInt(v)+'%' },
					onChange: function(v) { forceRefresh(); $('s_val').value = parseInt(v); $('s_out').innerHTML = parseInt(v)+'%'; cvi_sphere.modify($("picture"), { shade: parseInt(v) }); }
				});
				playSound('clickSND');
				setColor('a_color','a_value');
				setColor('b_color','b_value');
				cvi_sphere.add($('picture'), { alpha: 100, shade: 100, shine: 100, zoom: 100, color: 0, color2: 0 });
				forceRefresh();
			break;
			
			case "none":
				ele.className = 'script_bt_active';
				cvi_lab.remove($("picture"));
				playSound('clickSND');
				obj.innerHTML = '<div class="track">Empty</div>';
				forceRefresh();
			break;
		}
	}
}
function saveCanvas() {
	if($('picture').tagName.toUpperCase() == "CANVAS") {
		if(isCS&&!isIE) {
			var data = $('picture').toDataURL();
			saveOnline(data);
		}
	}
}
function saveOnline(dataurl) {
	var req = null;
	if(window.XMLHttpRequest) {
		req = new XMLHttpRequest();
	}else {return;}
	req.onreadystatechange = function() { 
		if(req.readyState == 4) {
			if(req.status == 200) {
				var response = req.responseText;
				document.download.submit();
			}else {
				alert("Error: " + req.status + " " + req.statusText);
			}	
		} 
	}; 
	req.open("POST", "save.php", true);
	req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	req.send('img='+dataurl);
}

var cvi_lab = {
	replace : function(canvas) {
		var object = canvas.parentNode; 
		var picture = document.createElement('img');
		picture.id = canvas.id;
		picture.alt = canvas.alt;
		picture.title = canvas.title;
		picture.src = canvas.source;
		picture.className = canvas.className;
		picture.style.cssText = "";
		picture.height = canvas.iheight>0?canvas.iheight:canvas.height;
		picture.width = canvas.iwidth>0?canvas.iwidth:canvas.width;
		object.replaceChild(picture,canvas);
	},
	remove : function(canvas) {
		if(document.all && document.namespaces && !window.opera) {
			if(canvas.tagName.toUpperCase() == "VAR") {
				cvi_lab.replace(canvas);
			}
		}else {
			if(canvas.tagName.toUpperCase() == "CANVAS") {
				cvi_lab.replace(canvas);
			}
		}
	}
};

var cvi_pre = {
	add: function(image, opts) {
		if(image.tagName.toUpperCase() == "IMG") {
			var defopts={"filter":'none'}; if(opts) {for(var i in defopts) {if(!opts[i]) {opts[i]=defopts[i];}}}else {opts=defopts;}
			if(image.naturalWidth&&image.naturalHeight) {var nw=image.naturalWidth; var nh=image.naturalHeight;}
			else {var tmp=new Image(); tmp.src=image.src; var nw=tmp.width; var nh=tmp.height; delete tmp;}			
			var object=image.parentNode, canvas=document.createElement('canvas');
			try {
				if(canvas||canvas.getContext("2d")) {
					canvas.id=image.id;
					canvas.options=opts;
					canvas.title=image.title;
					canvas.source=image.src;
					canvas.style.height='75px';
					canvas.height=image.height;
					canvas.width=image.width;
					canvas.naturalWidth=nw; 
					canvas.naturalHeight=nh;
					canvas.style.height='75px';
					if($('bg_trans').checked) {
						canvas.style.backgroundImage = 'url(images/layout/trans.gif)'; 
					}else {	
						canvas.style.backgroundImage = 'none'; 
					}
					object.replaceChild(canvas,image);
					canvas.style.MozUserSelect="none"; 
					canvas.style.KhtmlUserSelect="none"; 
					canvas.style.WebkitUserSelect="none"; 
					canvas.dragging=false; 
					canvas.zoom=false; 
					canvas.offsetX=cvi_pre._xoff(canvas); 
					canvas.offsetY=cvi_pre._yoff(canvas); 
					canvas.deltaX=0; 
					canvas.deltaY=0; 
					canvas.evtX=0; 
					canvas.evtY=0;
					canvas.curX=0; 
					canvas.curY=0;
					canvas.ondblclick=cvi_pre._isDblclicked; 
					canvas.onclick=function() {return false;}; 
					canvas.oncontextmenu=function() {return false;};
					cvi_pre.modify(canvas,opts);
				}
			} catch (e) {
			}
		} return false;
	},
	
	modify: function(canvas,options) {
		if(canvas.getContext("2d")&&canvas.tagName.toUpperCase()=="CANVAS") {
			var filter=(typeof options['filter']=='object'?options['filter']:canvas.options['filter']); canvas.options['filter']=filter;
			var nw=canvas.naturalWidth,nh=canvas.naturalHeight,iw=Math.round(canvas.width),ih=Math.round(canvas.height);
			var context=canvas.getContext("2d"), alternate=false;
			var img=new Image(); img.onload=function() {
				if((typeof cvi_filter!='undefined')&&filter!=null&&filter.length>0) {
					var source=document.createElement('canvas'); source.height=ih+4; source.width=iw+4; var src=source.getContext("2d");
					var buffer=document.createElement('canvas'); buffer.height=ih; buffer.width=iw; var ctx=buffer.getContext("2d");
					if(src&&ctx) {alternate=true; ctx.clearRect(0,0,iw,ih); src.clearRect(0,0,iw+4,ih+4);
						if(canvas.zoom) {
							ctx.drawImage(img,canvas.curX,canvas.curY,iw,ih,0,0,iw,ih); 
							src.drawImage(img,canvas.curX,canvas.curY,iw,ih,0,0,iw+4,ih+4); 
							src.drawImage(img,canvas.curX,canvas.curY,iw,ih,2,2,iw,ih); 
						}else {
							ctx.drawImage(img,0,0,iw,ih); 
							src.drawImage(img,0,0,iw+4,ih+4); 
							src.drawImage(img,2,2,iw,ih); 
						}
						for(var i in filter) {cvi_filter.add(source,buffer,filter[i],iw,ih);}
					}
				}
				context.clearRect(0,0,canvas.width,canvas.height); 
				context.save();
				if(alternate) {
					context.drawImage(source,2,2,canvas.width,canvas.height,0,0,canvas.width,canvas.height);
				}else {
					if(!canvas.zoom) {
						context.drawImage(img,0,0,canvas.width,canvas.height); 
					}else {
						context.drawImage(img,(nw-canvas.width)/2,(nh-canvas.height)/2,canvas.width,canvas.height,0,0,canvas.width,canvas.height); 
					}
				}
				context.restore(); 
			}; 
			img.src=canvas.source;
		}
	},

	remove : function(canvas) {
		if(canvas.getContext("2d")&&canvas.tagName.toUpperCase() == "CANVAS") {
			var object=canvas.parentNode; 
			var img=document.createElement('img');
			img.id=canvas.id;
			img.src=canvas.source;
			img.title=canvas.title;
			img.style.height='75px';
			img.heigh=canvas.height;
			img.width=canvas.width;
			img.style.height='75px';
			object.replaceChild(img,canvas);
		}
	},
	
	_isPressed : function(e) {
		if(!this.zoom) {return false;}
		this.dragging=true; 
		this.style.cursor='move'; 
		this.evtX=e.pageX-this.offsetX; 
		this.evtY=e.pageY-this.offsetY; 
		this.deltaX=this.evtX-this.curX; 
		this.deltaY=this.evtY-this.curY;
		return false;
	},
	_isDragged : function(e) {
		if(!this.dragging||!this.zoom) {return false;}
		this.evtX=e.pageX-this.offsetX; 
		this.evtY=e.pageY-this.offsetY;
		this.curX=Math.min(this.naturalWidth-Math.round(this.width),Math.max(0,this.evtX-this.deltaX));
		this.curY=Math.min(this.naturalHeight-Math.round(this.height),Math.max(0,this.evtY-this.deltaY));
		cvi_pre.modify(this,this.options);
		return false;
	},		
	_isReleased : function(e) {
		if(!this.dragging||!this.zoom) {return false;}
		this.dragging=false; 
		this.style.cursor='auto'; 
		cvi_pre.modify(this,this.options);
		return false;
	},
	_isDblclicked : function(e) {
		this.dragging=false; 
		this.style.cursor='auto';
		this.zoom=this.zoom==true?false:true;
		if(this.zoom==true) {
			this.onmousedown=cvi_pre._isPressed; 
			this.onmousemove=cvi_pre._isDragged; 
			this.onmouseup=cvi_pre._isReleased; 
		}else {
			this.onmousedown=null; 
			this.onmousemove=null; 
			this.onmouseup=null; 
		}
		cvi_pre.modify(this,this.options);
		return false;
	},
	_xoff : function(n) {var r=n.offsetLeft; for(var p=n; p=p.offsetParent; p!=null) {r+=p.offsetLeft;} return r;},
	_yoff : function(n) {var r=n.offsetTop; for(var p=n; p=p.offsetParent; p!=null) {r+=p.offsetTop;} return r;}
};
