if(typeof $=='undefined') {function $(v) {return(document.getElementById(v));}}
var buzy="", bgc='#ffff00', bgo=0.5 ,cl='#000' ,sz=32, ir=8, sw=3, tp="t", ct=12, sp=96, mo=0.25, slide=new Array();
function addPreview(){
	if(typeof(buzy)=='object') {
		buzy.remove(); buzy=""; bgc=$('ol_color').value; bgo=parseInt($('bgo_val').value)/100;
		cl=$('c_val').value; tp=$('t_val').value; sz=$('z_val').value; ir=$('r_val').value;
		sw=$('w_val').value; ct=$('x_val').value; sp=$('s_val').value; mo=parseInt($('o_val').value)/100;
	}else {
		bgc='#ffff00'; bgo=0.5; cl='#000'; sz=32; ir=8; sw=3; tp="t"; ct=12; sp=96, mo=0.25;
	}
	playSound('clickSND');
	buzy=getBusyOverlay($("preview"),bgc,bgo,'','',cl,sz,ir,sw,tp,ct,sp,mo); 
}
function initBasic() {
	if(isIE) {
		$('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');}
	}else {
		$('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');");
	}
	$('bg_trans').checked=false; $('bg_color').value='#666666'; $('bg_color').disabled=false;
	var suf = isIE?'gif':'png'; var obj = $('effect'); 
	if(obj.style.display=="none"||obj.style.display===null) {toggleHeader('effect');}
	$('effect').innerHTML = '<div class="track"><b>Overlay</b></div>'
	+ '<div class="track"><input onchange="this.blur();setColor(\'ol_color\',\'bgc_val\');addPreview();" onclick="setColor(\'ol_color\',\'bgc_val\');addPreview();" id="ol_color" name="ol_color" class="o_col" type="text" value="#ffff00"><div onClick="playSound(\'clickSND\');openPicker(\'bgc_val\',\'ol_color\');" title="Open color picker" id="bgc_val" class="c_val" ><img src="images/layout/space.gif" alt="" /></div></div>'
	+ '<div class="track"><label>opacity</label></div><div class="slider_outer"><div class="slider_inner"><div class="slider_knob" id="bgo_handle"></div></div><div class="slider_left"></div><div class="slider_right"></div><input id="bgo_val" name="bgo_val" type="hidden" value="50"/><div class="slider_val"><span id="bgo_out">50%</span></div></div>'
	+ '<div class="prog"><b>Indicator</b></div>'
	+ '<div class="track"><label>master presets</label> <select id="p_type" name="p_type" size="1" onchange="$(\'p_val\').value=this.options[this.selectedIndex].value; slide[0].setValue($(\'p_val\').value); slide[1].setValue($(\'p_val\').value/4); slide[2].setValue(parseInt($(\'p_val\').value/10));">'
	+ '<option value="16">16</option><option value="24">24</option><option value="32" selected="selected">32</option><option value="48">48</option><option value="64">64</option><option value="128">128</option><option value="256">256</option><option value="512">512</option>'	
	+ '</select><input id="p_val" name="p_val" type="hidden" value="32"></div>'
	+ '<div class="track"><label>type</label> <select id="t_type" name="t_type" size="1" onchange="$(\'t_val\').value=this.options[this.selectedIndex].value;addPreview();">'
	+ '<option value="r">rectangle</option><option value="p">polygon</option><option value="t" selected="selected">tube</option><option value="o">oval</option><option value="c">circle</option>'	
	+ '</select><input id="t_val" name="t_val" type="hidden" value="f"></div>'
	+ '<div class="track"><label>color</label> <select id="c_type" name="c_type" size="1" onchange="$(\'c_val\').value=this.options[this.selectedIndex].value;setColor(\'c_val\',\'i_val\');addPreview();">'
	+ '<option value="#000000" selected="selected">black</option><option value="#ff0000">red</option><option value="#ffff00">yellow</option><option value="#00ff00">green</option><option value="#00ffff">cyan</option><option value="#0000ff">blue</option><option value="#ff00ff">magenta</option><option value="#ffffff">white</option></select>'	
	+ '<div class="track"><input onchange="this.blur();setColor(\'c_val\',\'i_val\');addPreview();" onclick="setColor(\'c_val\',\'i_val\');addPreview();" id="c_val" name="c_val" class="o_col" type="text" value="#000000"><div onClick="playSound(\'clickSND\');openPicker(\'i_val\',\'c_val\');" title="Open color picker" id="i_val" class="c_val" ><img src="images/layout/space.gif" alt="" /></div></div>'
	+ '<div class="track"><label>size</label></div><div class="slider_outer"><div class="slider_inner"><div class="slider_knob" id="z_handle"></div></div><div class="slider_left"></div><div class="slider_right"></div><input id="z_val" name="z_val" type="hidden" value="32"/><div class="slider_val"><span id="z_out">32px</span></div></div>'
	+ '<div class="track"><label>radius</label></div><div class="slider_outer"><div class="slider_inner"><div class="slider_knob" id="r_handle"></div></div><div class="slider_left"></div><div class="slider_right"></div><input id="r_val" name="r_val" type="hidden" value="8"/><div class="slider_val"><span id="r_out">8px</span></div></div>'
	+ '<div class="track"><label>weight</label></div><div class="slider_outer"><div class="slider_inner"><div class="slider_knob" id="w_handle"></div></div><div class="slider_left"></div><div class="slider_right"></div><input id="w_val" name="w_val" type="hidden" value="3"/><div class="slider_val"><span id="w_out">3px</span></div></div>'
	+ '<div class="track"><label>count</label></div><div class="slider_outer"><div class="slider_inner"><div class="slider_knob" id="x_handle"></div></div><div class="slider_left"></div><div class="slider_right"></div><input id="x_val" name="x_val" type="hidden" value="12"/><div class="slider_val"><span id="x_out">12</span></div></div>'
	+ '<div class="track"><label>speed</label></div><div class="slider_outer"><div class="slider_inner"><div class="slider_knob" id="s_handle"></div></div><div class="slider_left"></div><div class="slider_right"></div><input id="s_val" name="s_val" type="hidden" value="96"/><div class="slider_val"><span id="s_out">96ms</span></div></div>'
	+ '<div class="track"><label>min. opacity</label></div><div class="slider_outer"><div class="slider_inner"><div class="slider_knob" id="o_handle"></div></div><div class="slider_left"></div><div class="slider_right"></div><input id="o_val" name="o_val" type="hidden" value="25"/><div class="slider_val"><span id="o_out">25%</span></div></div>';
	slide[0]=cvi_slider.attach($('z_handle'),32,16,512);
	slide[0].slideBegin=slide[0].slideMove=function(v) {$('z_out').innerHTML=parseInt(v)+'px'};
	slide[0].slideEnd=function(v) {$('z_val').value=parseInt(v); $('z_out').innerHTML=parseInt(v)+'px'; addPreview();};
	slide[1]=cvi_slider.attach($('r_handle'),8,1,254);
	slide[1].slideBegin=slide[1].slideMove=function(v) {$('r_out').innerHTML=parseInt(v)+'px'};
	slide[1].slideEnd=function(v) {$('r_val').value=parseInt(v); $('r_out').innerHTML=parseInt(v)+'px'; addPreview();};
	slide[2]=cvi_slider.attach($('w_handle'),3,1,254);
	slide[2].slideBegin=slide[2].slideMove=function(v) {$('w_out').innerHTML=parseInt(v)+'px'};
	slide[2].slideEnd=function(v) {$('w_val').value=parseInt(v); $('w_out').innerHTML=parseInt(v)+'px'; addPreview();};
	slide[3]=cvi_slider.attach($('x_handle'),12,5,36);
	slide[3].slideBegin=slide[3].slideMove=function(v) {$('x_out').innerHTML=parseInt(v)};
	slide[3].slideEnd=function(v) {$('x_val').value=parseInt(v); $('x_out').innerHTML=parseInt(v); addPreview();};
	slide[4]=cvi_slider.attach($('s_handle'),96,30,500);
	slide[4].slideBegin=slide[4].slideMove=function(v) {$('s_out').innerHTML=parseInt(v)+'ms'};
	slide[4].slideEnd=function(v) {$('s_val').value=parseInt(v); $('s_out').innerHTML=parseInt(v)+'ms'; addPreview();};
	slide[5]=cvi_slider.attach($('o_handle'),25,1,50);
	slide[5].slideBegin=slide[5].slideMove=function(v) {$('o_out').innerHTML=parseInt(v)+'%'};
	slide[5].slideEnd=function(v) {$('o_val').value=parseInt(v); $('o_out').innerHTML=parseInt(v)+'%'; addPreview();};
	slide[6]=cvi_slider.attach($('bgo_handle'),50,0,100);
	slide[6].slideBegin=slide[6].slideMove=function(v) {$('bgo_out').innerHTML=parseInt(v)+'%'};
	slide[6].slideEnd=function(v) {$('bgo_val').value=parseInt(v); $('bgo_out').innerHTML=parseInt(v)+'%'; addPreview();};
	playSound('clickSND');
	setColor('ol_color','bgc_val');
	setColor('c_val','i_val');
}
function initApp() {
	isON = $('snd').checked;
	initBasic();
	$('about').style.display = 'none';
	addPreview();
}
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); 
	$('go').innerHTML = ' Press <input type="button" name="start" value="start" onclick="initApp();"> to play.<br><input onclick="playSound(\'clickSND\');" id="snd" name="snd" type="checkbox" value="1" checked="checked"> Use click sound.';
}	
function noneBasic() {
	var ele = document.createElement("span"); ele.id = 'noCV';
	ele.innerHTML = '<b>Attention:<\/b> <em>Your browser neither supports Canvas nor VML!<\/em>';
	$('header').appendChild(ele); $('about').style.display = 'none';
}
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) {}
		}
	}
}
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 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; 
	}
}
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 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"; 
	}	
}
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";
	}else {
		obj.style.visibility = "hidden";
		obj.style.display = "none"; 
		ele.className = "closed";
	}
}