if(typeof $=='undefined') {function $(v) {return(document.getElementById(v));}}
var v_bgopac,v_opac,v_size,v_width,v_weight,v_space,v_angle;
function addPreview(){
	playSound('clickSND');
	var canvas,box,txt,text,size,width,weight,space,angle,h,w,x,y,col,opac;
	text 	= String($('t_val').value);
	size 	= parseInt($('z_val').value);
	width 	= parseInt($('d_val').value);
	weight 	= parseInt($('w_val').value);
	space 	= parseInt($('s_val').value);
	angle	= parseInt($('a_val').value);
	h = get_textHeight(size);
	w = get_textWidth(text,size,width,space);
	canvas = document.getElementById('preview');
	if(canvas.getContext) {
		context = canvas.getContext("2d");
		canvas.width=600; canvas.height=400;
		context.clearRect(0,0,canvas.width,canvas.height);
		context.fillStyle = 'rgba('+getRGB($('ol_color').value)+','+parseFloat($('bgo_val').value/100)+')';
		context.fillRect(0,0,canvas.width,canvas.height);
		set_textRenderContext(context);
		if(check_textRenderContext(context)) {
			x = parseInt((canvas.width-w)/2);
			y = parseInt((canvas.height-h)/2);
			if(angle!=0){
				context.save();
				context.translate(canvas.width/2,canvas.height/2);
				context.rotate((Math.PI/180)*angle);
				if($('b_true').checked) {
					context.lineWidth = 1; 
					context.strokeStyle = 'rgba(255,0,0,0.5)';
					draw_boundingBox(context,-(w/2)+0.5,-(h/2)+0.5,size,h,w);
				}
				context.strokeStyle = 'rgba('+getRGB($('c_val').value)+','+parseFloat($('o_val').value/100)+')';
				context.strokeText(text,-(w/2),-(h/2),size,weight,width,space);
				context.restore();
     		}else {
				if($('b_true').checked) {
					context.lineWidth = 1; 
					context.strokeStyle = 'rgba(255,0,0,0.5)';
					draw_boundingBox(context,x+0.5,y+0.5,size,h,w);
				}
				context.strokeStyle = 'rgba('+getRGB($('c_val').value)+','+parseFloat($('o_val').value/100)+')';
				context.strokeText(text,x,y,size,weight,width,space);
     		}
		}
	}else if(document.namespaces) {
		canvas.width=600; canvas.height=400;
		canvas.style.backgroundColor = $('ol_color').value;
		canvas.style.filter="alpha(opacity:"+$('bgo_val').value+")";
		if(check_strokeTextCapability()) {
			x = parseInt((canvas.width-w)/2); y = parseInt((canvas.height-h)/2);
			col = $('c_val').value; opac = parseFloat($('o_val').value/100);
			if($('b_true').checked) {
				box = get_boundingBox(x,y,size,h,w,1,'#ff0000',0.5,angle);
			}else {box=""; }
			txt = get_strokeText(text,x,y,size,weight,width,space,'sans-serif',col,opac,angle);		
			canvas.innerHTML = box+txt;
		}
	}
}
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>Canvas</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="#ffffff"><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><div class="slider_val"><span id="bgo_out">100%</span></div><input id="bgo_val" name="o_val" type="hidden" value="100"/></div>'
	+ '<div class="prog"><b>Font</b></div>'
	+ '<div class="track"><label>type</label> <select id="t_type" name="t_type" size="1"><option value="sans-serif" selected="selected">sans-serif</option></select></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>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><div class="slider_val"><span id="o_out">100%</span></div><input id="o_val" name="o_val" type="hidden" value="100"/></div>'
	+ '<div class="track"><label>angle</label></div><div class="slider_outer"><div class="slider_inner"><div class="slider_knob" id="a_handle"></div></div><div class="slider_left"></div><div class="slider_right"></div><input id="a_val" name="a_val" type="hidden" value="0"/><div class="slider_val"><span id="a_out" style="cursor:pointer" title="reset on click" onclick="v_angle.setValue(0);">0°</span></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" style="cursor:pointer" title="reset on click" onclick="v_size.setValue(32);">32px</span></div></div>'
	+ '<div class="track"><label>width</label></div><div class="slider_outer"><div class="slider_inner"><div class="slider_knob" id="d_handle"></div></div><div class="slider_left"></div><div class="slider_right"></div><input id="d_val" name="d_val" type="hidden" value="100"/><div class="slider_val"><span id="d_out" style="cursor:pointer" title="reset on click" onclick="v_width.setValue(100);">100%</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="100"/><div class="slider_val"><span id="w_out" style="cursor:pointer" title="reset on click" onclick="v_weight.setValue(100);">100%</span></div></div>'
	+ '<div class="track"><label>space</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="100"/><div class="slider_val"><span id="s_out" style="cursor:pointer" title="reset on click" onclick="v_space.setValue(100);">100%</span></div></div>'
	+ '<div class="track"><label>text</label> <input onclick="addPreview();" id="b_true" name="b_true" type="checkbox" value="0"> <label>bounding Box</label></div><div class="track"><input onchange="this.blur();addPreview();" id="t_val" name="t_val" class="o_text" type="text" value="Hello world"></div>';
	v_bgopac=cvi_slider.attach($('bgo_handle'),100,0,100);
	v_bgopac.slideBegin=v_bgopac.slideMove=function(v) {$('bgo_out').innerHTML=parseInt(v)+'%'};
	v_bgopac.slideEnd=function(v) {$('bgo_val').value=parseInt(v); $('bgo_out').innerHTML=parseInt(v)+'%'; addPreview();};
	v_opac=cvi_slider.attach($('o_handle'),100,1,100);
	v_opac.slideBegin=v_opac.slideMove=function(v) {$('o_out').innerHTML=parseInt(v)+'%'};
	v_opac.slideEnd=function(v) {$('o_val').value=parseInt(v); $('o_out').innerHTML=parseInt(v)+'%'; addPreview();};
	v_angle=cvi_slider.attach($('a_handle'),0,0,360);
	v_angle.slideBegin=v_angle.slideMove=function(v) {$('a_out').innerHTML=parseInt(v)+'°'};
	v_angle.slideEnd=function(v) {$('a_val').value=parseInt(v); $('a_out').innerHTML=parseInt(v)+'°'; addPreview();};
	v_size=cvi_slider.attach($('z_handle'),32,5,300);
	v_size.slideBegin=v_size.slideMove=function(v) {$('z_out').innerHTML=parseInt(v)+'px'};
	v_size.slideEnd=function(v) {$('z_val').value=parseInt(v); $('z_out').innerHTML=parseInt(v)+'px'; addPreview();};
	v_width=cvi_slider.attach($('d_handle'),100,10,400);
	v_width.slideBegin=v_width.slideMove=function(v) {$('d_out').innerHTML=parseInt(v)+'%'};
	v_width.slideEnd=function(v) {$('d_val').value=parseInt(v); $('d_out').innerHTML=parseInt(v)+'%'; addPreview();};
	v_weight=cvi_slider.attach($('w_handle'),100,10,400);
	v_weight.slideBegin=v_weight.slideMove=function(v) {$('w_out').innerHTML=parseInt(v)+'%'};
	v_weight.slideEnd=function(v) {$('w_val').value=parseInt(v); $('w_out').innerHTML=parseInt(v)+'%'; addPreview();};
	v_space=cvi_slider.attach($('s_handle'),100,20,500);
	v_space.slideBegin=v_space.slideMove=function(v) {$('s_out').innerHTML=parseInt(v)+'%'};
	v_space.slideEnd=function(v) {$('s_val').value=parseInt(v); $('s_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';
	if(document.namespaces) {
		if(document.namespaces['v']==null) {
			var e=["shape","shapetype","group","background","path","formulas","handles","fill","stroke","shadow","textbox","textpath","imagedata","line","polyline","curve","roundrect","oval","rect","arc","image"],s=document.createStyleSheet(); 
			for(var i=0; i<e.length; i++) {s.addRule("v\\:"+e[i],"behavior: url(#default#VML);");} document.namespaces.add("v","urn:schemas-microsoft-com:vml");
		} 
	}else {
		var parent = document.getElementById('view');
		var object = document.getElementById('preview');
		var canvas = document.createElement('canvas');
		canvas.id = object.id;
		canvas.className = object.className;
		canvas.style.cssText = object.style.cssText;
		canvas.style.height = object.style.height; 
		canvas.style.width = object.style.width;
		parent.replaceChild(canvas,object);
	}
	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>';
	ele.innerHTML = '<b>Attention:<\/b> <em>Your browser do not support the HTML-5 Canvas element!<\/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 getRGB(v){
	function hex2dec(h){return(Math.max(0,Math.min(parseInt(h,16),255)));}
	var r=0,g=0,b=0; v = v||'#000000'; 
	if(v.match(/^#[0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f]$/i)) {
		r=hex2dec(v.substr(1,2)),g=hex2dec(v.substr(3,2)),b=hex2dec(v.substr(5,2));
	} return r+','+g+','+b;
}
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";
	}
}