/* $(function(){
	$("#content .copy").each(function() {
		var clip = new ZeroClipboard.Client();
		txt = $(this).parent().find('code').text();
		clip.setText(txt);
		clip.glue(this);
	});
}); */

$(document).ready(function(){

	$("#top-block").show();
	$("#top-link").show();
	$("#header .info").hide();

	$('#top-link').click(function(e) {
		e.preventDefault();
		$.scrollTo(0,600);
	});
	
	$('#fonts a').each(function(i){
		$(this).click(function(e) {
			e.preventDefault();
			if($("#params").is(':visible')){
				$.scrollTo($("#" + this.name + "-preview"),600,{offset:-340});
			}
			else{
				$.scrollTo($("#" + this.name + "-preview"),600,{offset:-65});
			}
		});
	});
	
	$("#preview h3 a").each(function(i){
		$(this).show();
	});
	
	$("#preview .csscode").each(function(i){
		$(this).hide();
	});
	
	$('#colorSelector').ColorPicker({
	color: '#000000',
	onShow: function (colpkr) {
		$(colpkr).fadeIn(300);
		return false;
	},
	onHide: function (colpkr) {
		$(colpkr).fadeOut(300);
		return false;
	},
	onChange: function (hsb, hex, rgb) {
		$('#colorSelector div').css('backgroundColor', '#' + hex);
		var textColor = document.getElementById('textcolor');
			var bgCcolor = document.getElementById('bgcolor');
			$('#colorpickerInput').val(hex);
			if(textColor.checked){
				for (var i=0;i<15;++i)
				{
					document.getElementById('preview').getElementsByTagName('p')[i].style.color = "#" + hex;
				}
			}
			else{
				for (var i=0;i<15;++i)
				{
					document.getElementById('preview').getElementsByTagName('p')[i].style.backgroundColor = "#" + hex;
				}
			}
			setCSS();
	}
	});

/* Слайдеры */	
	$("#fontSizeslider").slider({
		animate: 'true',
		min:     0,
		max:     5,
		step:    0.05,
		value:   0.75,
		slide: 	function(event, ui){
			$("#fontSize").val(ui.value + " em");
			for (var i=0;i<15;++i)
			{
				document.getElementById('preview').getElementsByTagName('p')[i].style.fontSize = ui.value + 'em';
			}
			setCSS();
		}
	});
	$("#fontsize-em").click(function (){
		$("#fontSizeslider").slider('option', 'max', 5);
		$("#fontSizeslider").slider('option', 'step', 0.05);
		$("#fontSizeslider").slider('option', 'slide', function(event, ui){
			$("#fontSize").val(ui.value + " em");
			for (var i=0;i<15;++i)
			{
				document.getElementById('preview').getElementsByTagName('p')[i].style.fontSize = ui.value + 'em';
			}
			setCSS();
		});
	});
	$("#fontsize-px").click(function (){
		$("#fontSizeslider").slider('option', 'max', 80);
		$("#fontSizeslider").slider('option', 'step', 1);
		$("#fontSizeslider").slider('option', 'slide', function(event, ui){
			$("#fontSize").val(ui.value + " px");
			for (var i=0;i<15;++i)
			{
				document.getElementById('preview').getElementsByTagName('p')[i].style.fontSize = ui.value + 'px';
			}
			setCSS();
		});
	});
	$("#fontsize-pt").click(function (){
		$("#fontSizeslider").slider('option', 'max', 80);
		$("#fontSizeslider").slider('option', 'step', 1);
		$("#fontSizeslider").slider('option', 'slide', function(event, ui){
			$("#fontSize").val(ui.value + " pt");
			for (var i=0;i<15;++i)
			{
				document.getElementById('preview').getElementsByTagName('p')[i].style.fontSize = ui.value + 'pt';
			}
			setCSS();
		});
	});
	$("#fontsize-percentage").click(function (){
		$("#fontSizeslider").slider('option', 'max', 500);
		$("#fontSizeslider").slider('option', 'step', 1);
		$("#fontSizeslider").slider('option', 'slide', function(event, ui){
			$("#fontSize").val(ui.value + " %");
			for (var i=0;i<15;++i)
			{
				document.getElementById('preview').getElementsByTagName('p')[i].style.fontSize = ui.value + '%';
			}
			setCSS();
		});
	});
	
	$("#lineHeightslider").slider({
		animate: 'true',
		min:     0,
		max:     300,
		step:    1,
		value:   120,
		slide: 	function(event, ui){
			$("#lineHeight").val(ui.value + " %");
			for (var i=0;i<15;++i)
			{
				document.getElementById('preview').getElementsByTagName('p')[i].style.lineHeight = ui.value + '%';
			}
			setCSS();
		}
	});
	$("#lineheight-em").click(function (){
		$("#lineHeightslider").slider('option', 'max', 4);
		$("#lineHeightslider").slider('option', 'step', 0.05);
		$("#lineHeightslider").slider('option', 'slide', function(event, ui){
			$("#lineHeight").val(ui.value + " em");
			for (var i=0;i<15;++i)
			{
				document.getElementById('preview').getElementsByTagName('p')[i].style.lineHeight = ui.value + 'em';
			}
			setCSS();
		});
	});
	$("#lineheight-px").click(function (){
		$("#lineHeightslider").slider('option', 'max', 150);
		$("#lineHeightslider").slider('option', 'step', 1);
		$("#lineHeightslider").slider('option', 'slide', function(event, ui){
			$("#lineHeight").val(ui.value + " px");
			for (var i=0;i<15;++i)
			{
				document.getElementById('preview').getElementsByTagName('p')[i].style.lineHeight = ui.value + 'px';
			}
			setCSS();
		});
	});
	$("#lineheight-pt").click(function (){
		$("#lineHeightslider").slider('option', 'max', 100);
		$("#lineHeightslider").slider('option', 'step', 1);
		$("#lineHeightslider").slider('option', 'slide', function(event, ui){
			$("#lineHeight").val(ui.value + " pt");
			for (var i=0;i<15;++i)
			{
				document.getElementById('preview').getElementsByTagName('p')[i].style.lineHeight = ui.value + 'pt';
			}
			setCSS();
		});
	});
	$("#lineheight-percentage").click(function (){
		$("#lineHeightslider").slider('option', 'max', 300);
		$("#lineHeightslider").slider('option', 'step', 1);
		$("#lineHeightslider").slider('option', 'slide', function(event, ui){
			$("#lineHeight").val(ui.value + " %");
			for (var i=0;i<15;++i)
			{
				document.getElementById('preview').getElementsByTagName('p')[i].style.lineHeight = ui.value + '%';
			}
			setCSS();
		});
	});
	
	$("#letterSpacingslider").slider({
		animate: 'true',
		min:     -1,
		max:     5,
		step:    0.05,
		value:   0,
		slide: 	function(event, ui){
			$("#letterSpacing").val(ui.value + " em");
			for (var i=0;i<15;++i)
			{
				document.getElementById('preview').getElementsByTagName('p')[i].style.letterSpacing = ui.value + 'em';
			}
			setCSS();
		}
	});
	$("#letterspacing-em").click(function (){
		$("#letterSpacingslider").slider('option', 'min', -1);
		$("#letterSpacingslider").slider('option', 'max', 5);
		$("#letterSpacingslider").slider('option', 'step', 0.05);
		$("#letterSpacingslider").slider('option', 'slide', function(event, ui){
			$("#letterSpacing").val(ui.value + " em");
			for (var i=0;i<15;++i)
			{
				document.getElementById('preview').getElementsByTagName('p')[i].style.letterSpacing = ui.value + 'em';
			}
			setCSS();
		});
	});
	$("#letterspacing-px").click(function (){
		$("#letterSpacingslider").slider('option', 'min', -5);
		$("#letterSpacingslider").slider('option', 'max', 50);
		$("#letterSpacingslider").slider('option', 'step', 1);
		$("#letterSpacingslider").slider('option', 'slide', function(event, ui){
			$("#letterSpacing").val(ui.value + " px");
			for (var i=0;i<15;++i)
			{
				document.getElementById('preview').getElementsByTagName('p')[i].style.letterSpacing = ui.value + 'px';
			}
			setCSS();
		});
	});
	$("#letterspacing-pt").click(function (){
		$("#letterSpacingslider").slider('option', 'min', -5);
		$("#letterSpacingslider").slider('option', 'max', 50);
		$("#letterSpacingslider").slider('option', 'step', 1);
		$("#letterSpacingslider").slider('option', 'slide', function(event, ui){
			$("#letterSpacing").val(ui.value + " pt");
			for (var i=0;i<15;++i)
			{
				document.getElementById('preview').getElementsByTagName('p')[i].style.letterSpacing = ui.value + 'pt';
			}
			setCSS();
		});
	});
	
	$("#wordSpacingslider").slider({
		animate: 'true',
		min:     -1,
		max:     8,
		step:    0.05,
		value:   0,
		slide: 	function(event, ui){
			$("#wordSpacing").val(ui.value + " em");
			for (var i=0;i<15;++i)
			{
				document.getElementById('preview').getElementsByTagName('p')[i].style.wordSpacing = ui.value + 'em';
			}
			setCSS();
		}
	});
	$("#wordspacing-em").click(function (){
		$("#wordSpacingslider").slider('option', 'min', -1);
		$("#wordSpacingslider").slider('option', 'max', 8);
		$("#wordSpacingslider").slider('option', 'step', 0.05);
		$("#wordSpacingslider").slider('option', 'slide', function(event, ui){
			$("#wordSpacing").val(ui.value + " em");
			for (var i=0;i<15;++i)
			{
				document.getElementById('preview').getElementsByTagName('p')[i].style.wordSpacing = ui.value + 'em';
			}
			setCSS();
		});
	});
	$("#wordspacing-px").click(function (){
		$("#wordSpacingslider").slider('option', 'min', -5);
		$("#wordSpacingslider").slider('option', 'max', 100);
		$("#wordSpacingslider").slider('option', 'step', 1);
		$("#wordSpacingslider").slider('option', 'slide', function(event, ui){
			$("#wordSpacing").val(ui.value + " px");
			for (var i=0;i<15;++i)
			{
				document.getElementById('preview').getElementsByTagName('p')[i].style.wordSpacing = ui.value + 'px';
			}
			setCSS();
		});
	});
	$("#wordspacing-pt").click(function (){
		$("#wordSpacingslider").slider('option', 'min', -5);
		$("#wordSpacingslider").slider('option', 'max', 100);
		$("#wordSpacingslider").slider('option', 'step', 1);
		$("#wordSpacingslider").slider('option', 'slide', function(event, ui){
			$("#wordSpacing").val(ui.value + " pt");
			for (var i=0;i<15;++i)
			{
				document.getElementById('preview').getElementsByTagName('p')[i].style.wordSpacing = ui.value + 'pt';
			}
			setCSS();
		});
	});
	
	$("#textIndentslider").slider({
		animate: 'true',
		min:     -5,
		max:     20,
		step:    0.05,
		value:   0,
		slide: 	function(event, ui){
			$("#textIndent").val(ui.value + " em");
			for (var i=0;i<15;++i)
			{
				document.getElementById('preview').getElementsByTagName('p')[i].style.textIndent = ui.value + 'em';
			}
			setCSS();
		}
	});
	$("#textindent-em").click(function (){
		$("#textIndentslider").slider('option', 'min', -5);
		$("#textIndentslider").slider('option', 'max', 20);
		$("#textIndentslider").slider('option', 'step', 0.05);
		$("#textIndentslider").slider('option', 'slide', function(event, ui){
			$("#textIndent").val(ui.value + " em");
			for (var i=0;i<15;++i)
			{
				document.getElementById('preview').getElementsByTagName('p')[i].style.textIndent = ui.value + 'em';
			}
			setCSS();
		});
	});
	$("#textindent-px").click(function (){
		$("#textIndentslider").slider('option', 'min', -50);
		$("#textIndentslider").slider('option', 'max', 200);
		$("#textIndentslider").slider('option', 'step', 1);
		$("#textIndentslider").slider('option', 'slide', function(event, ui){
			$("#textIndent").val(ui.value + " px");
			for (var i=0;i<15;++i)
			{
				document.getElementById('preview').getElementsByTagName('p')[i].style.textIndent = ui.value + 'px';
			}
			setCSS();
		});
	});
	$("#textindent-pt").click(function (){
		$("#textIndentslider").slider('option', 'min', -50);
		$("#textIndentslider").slider('option', 'max', 200);
		$("#textIndentslider").slider('option', 'step', 1);
		$("#textIndentslider").slider('option', 'slide', function(event, ui){
			$("#textIndent").val(ui.value + " pt");
			for (var i=0;i<15;++i)
			{
				document.getElementById('preview').getElementsByTagName('p')[i].style.textIndent = ui.value + 'pt';
			}
			setCSS();
		});
	});
	$("#textindent-percentage").click(function (){
		$("#textIndentslider").slider('option', 'min', -5);
		$("#textIndentslider").slider('option', 'max', 20);
		$("#textIndentslider").slider('option', 'step', 1);
		$("#textIndentslider").slider('option', 'slide', function(event, ui){
			$("#textIndent").val(ui.value + " %");
			for (var i=0;i<15;++i)
			{
				document.getElementById('preview').getElementsByTagName('p')[i].style.textIndent = ui.value + '%';
			}
			setCSS();
		});
	});
	
	$("#preview .csscode").each(function(i){
		$(this).hide();
	});
	
	$("#preview h3 a").each(function(i){
		$(this).click(function(){
			setCSS();
			$(this).parent().parent().find(".csscode").slideToggle(400);
			return false;
		});
	});

	$("#params-toggle").click(function () {
		if($("#params").is(':visible')){
			$("#params").toggle();
			$("#params-toggle").css({'backgroundPosition':'left bottom'});
		}
		else{
			$("#params").toggle();
			$("#params-toggle").css({'backgroundPosition':'left top'});
		}
    });


});

function setFontPreview(){
	var Text = document.getElementById('textarea').value;
	for (var i=0;i<15;++i)
	{
		document.getElementById('preview').getElementsByTagName('p')[i].firstChild.nodeValue = Text;
	}
	setCSS();
}

function bold(){
	var bold = document.getElementById('bold');
	if(bold.className == 'inactive'){
		bold.className = 'active';
		for (var i=0;i<15;++i)
		{
			document.getElementById('preview').getElementsByTagName('p')[i].style.fontWeight = 'bold';
		}
	}
	else {
		bold.className = 'inactive';
		for (var i=0;i<15;++i)
		{
			document.getElementById('preview').getElementsByTagName('p')[i].style.fontWeight = 'normal';
		}
	}
	setCSS();
}

function italic(){
	var italic = document.getElementById('italic');
	if(italic.className == 'inactive'){
		italic.className = 'active';
		for (var i=0;i<15;++i)
		{
			document.getElementById('preview').getElementsByTagName('p')[i].style.fontStyle = 'italic';
		}
	}
	else {
		italic.className = 'inactive';
		for (var i=0;i<15;++i)
		{
			document.getElementById('preview').getElementsByTagName('p')[i].style.fontStyle = 'normal';
		}
	}
	setCSS();
}

function underline(){
	var underline = document.getElementById('underline');
	if(underline.className == 'inactive'){
		underline.className = 'active';
		document.getElementById('overline').className = 'inactive';
		document.getElementById('strikethrough').className = 'inactive';
		for (var i=0;i<15;++i)
		{
			document.getElementById('preview').getElementsByTagName('p')[i].style.textDecoration = 'underline';
		}
	}
	else {
		underline.className = 'inactive';
		for (var i=0;i<15;++i)
		{
			document.getElementById('preview').getElementsByTagName('p')[i].style.textDecoration = 'none';
		}
	}
	setCSS();
}

function overline(){
	var overline = document.getElementById('overline');
	if(overline.className == 'inactive'){
		overline.className = 'active';
		document.getElementById('underline').className = 'inactive';
		document.getElementById('strikethrough').className = 'inactive';
		for (var i=0;i<15;++i)
		{
			document.getElementById('preview').getElementsByTagName('p')[i].style.textDecoration = 'overline';
		}
	}
	else {
		overline.className = 'inactive';
		for (var i=0;i<15;++i)
		{
			document.getElementById('preview').getElementsByTagName('p')[i].style.textDecoration = 'none';
		}
	}
	setCSS();
}

function strikethrough(){
	var strikethrough = document.getElementById('strikethrough');
	if(strikethrough.className == 'inactive'){
		strikethrough.className = 'active';
		document.getElementById('underline').className = 'inactive';
		document.getElementById('overline').className = 'inactive';
		for (var i=0;i<15;++i)
		{
			document.getElementById('preview').getElementsByTagName('p')[i].style.textDecoration = 'line-through';
		}
	}
	else {
		strikethrough.className = 'inactive';
		for (var i=0;i<15;++i)
		{
			$("#preview p").css({'textDecoration': 'none'});
		}
	}
	setCSS();
}

function allcaps(){
	var allcaps = document.getElementById('allcaps');
	if(allcaps.className == 'inactive'){
		allcaps.className = 'active';
		document.getElementById('smallcaps').className = 'inactive';
		for (var i=0;i<15;++i)
		{
			document.getElementById('preview').getElementsByTagName('p')[i].style.textTransform = 'uppercase';
			document.getElementById('preview').getElementsByTagName('p')[i].style.fontVariant = 'normal';
		}
	}
	else {
		allcaps.className = 'inactive';
		for (var i=0;i<15;++i)
		{
			document.getElementById('preview').getElementsByTagName('p')[i].style.textTransform = 'none';
		}
	}
	setCSS();
}

function smallcaps(){
	var smallcaps = document.getElementById('smallcaps');
	if(smallcaps.className == 'inactive'){
		smallcaps.className = 'active';
		document.getElementById('allcaps').className = 'inactive';
		for (var i=0;i<15;++i)
		{
			document.getElementById('preview').getElementsByTagName('p')[i].style.fontVariant = 'small-caps';
			document.getElementById('preview').getElementsByTagName('p')[i].style.textTransform = 'none';
		}
	}
	else {
		smallcaps.className = 'inactive';
		for (var i=0;i<15;++i)
		{
			document.getElementById('preview').getElementsByTagName('p')[i].style.fontVariant = 'normal';
		}
	}
	setCSS();
}

function left(){
	var left = document.getElementById('left');
	left.className = 'active';
	document.getElementById('right').className = 'inactive';
	document.getElementById('center').className = 'inactive';
	document.getElementById('justify').className = 'inactive';
	for (var i=0;i<15;++i)
	{
		document.getElementById('preview').getElementsByTagName('p')[i].style.textAlign = 'left';
	}
	setCSS();
}

function right(){
	var right = document.getElementById('right');
	if(right.className == 'inactive'){
		right.className = 'active';
		document.getElementById('left').className = 'inactive';
		document.getElementById('center').className = 'inactive';
		document.getElementById('justify').className = 'inactive';
		for (var i=0;i<15;++i)
		{
			document.getElementById('preview').getElementsByTagName('p')[i].style.textAlign = 'right';
		}
	}
	else {
		right.className = 'inactive';
		for (var i=0;i<15;++i)
		{
			document.getElementById('preview').getElementsByTagName('p')[i].style.textAlign = 'left';
		}
	}
	setCSS();
}

function center(){
	var center = document.getElementById('center');
	if(center.className == 'inactive'){
		center.className = 'active';
		document.getElementById('left').className = 'inactive';
		document.getElementById('right').className = 'inactive';
		document.getElementById('justify').className = 'inactive';
		for (var i=0;i<15;++i)
		{
			document.getElementById('preview').getElementsByTagName('p')[i].style.textAlign = 'center';
		}
	}
	else {
		center.className = 'inactive';
		for (var i=0;i<15;++i)
		{
			document.getElementById('preview').getElementsByTagName('p')[i].style.textAlign = 'left';
		}
	}
	setCSS();
}

function justify(){
	var justify = document.getElementById('justify');
	if(justify.className == 'inactive'){
		justify.className = 'active';
		document.getElementById('left').className = 'inactive';
		document.getElementById('right').className = 'inactive';
		document.getElementById('center').className = 'inactive';
		for (var i=0;i<15;++i)
		{
			document.getElementById('preview').getElementsByTagName('p')[i].style.textAlign = 'justify';
		}
	}
	else {
		justify.className = 'inactive';
		for (var i=0;i<15;++i)
		{
			document.getElementById('preview').getElementsByTagName('p')[i].style.textAlign = 'left';
		}
	}
	setCSS()
}

function setCSS(){
	for (var i=0;i<15;++i)
	{
		var instyle = document.getElementById('preview').getElementsByTagName('p')[i].style;
		var text = "";
		if(instyle.fontFamily) text += "font-family: " + instyle.fontFamily + ";\r\n";
		if(!instyle.fontSize || instyle.fontSize == "0.75em") text += "font-size: 0.75em;\n";
		else text += "font-size: " + instyle.fontSize + ";\r\n";
		if(instyle.color && RGB2Color(instyle.color) != '#000000') text += "color: " + RGB2Color(instyle.color) + ";\r\n";
		if(instyle.backgroundColor && RGB2Color(instyle.backgroundColor) != '#ffffff') text += "background-color: " + RGB2Color(instyle.backgroundColor) + ";\r\n";
		if(instyle.fontWeight && instyle.fontWeight != "normal") text += "font-weight: " + instyle.fontWeight + ";\r\n";
		if(instyle.fontStyle && instyle.fontStyle != "normal") text += "font-style: " + instyle.fontStyle + ";\r\n";
		if(instyle.textDecoration && instyle.textDecoration != "none") text += "text-decoration: " + instyle.textDecoration + ";\r\n";
		if(instyle.textTransform && instyle.textTransform != "none") text += "text-transform: " + instyle.textTransform + ";\r\n";
		if(instyle.fontVariant && instyle.fontVariant != "normal") text += "font-variant: " + instyle.fontVariant + ";\r\n";
		if(instyle.textAlign) text += "text-align: " + instyle.textAlign + ";\r\n";
		if(instyle.lineHeight && instyle.lineHeight != "100%") text += "line-height: " + instyle.lineHeight + ";\r\n";
		if(instyle.letterSpacing && instyle.letterSpacing != "0em") text += "letter-spacing: " + instyle.letterSpacing + ";\r\n";
		if(instyle.wordSpacing && instyle.wordSpacing != "0em") text += "word-spacing: " + instyle.wordSpacing + ";\r\n";
		if(instyle.textIndent && instyle.textIndent != "0em") text += "text-indent: " + instyle.textIndent + ";\r\n";
		document.getElementById("preview").getElementsByTagName("code")[i].firstChild.nodeValue = text;
	}
}

function byte2Hex(n){
  var nybHexString = "0123456789ABCDEF";
  return String(nybHexString.substr((n >> 4) & 0x0F,1)) + nybHexString.substr(n & 0x0F,1);
}

function RGB2Color(colors){
  if(!colors) return '000000';
  if(!colors.match('rgb')) return colors;
  var rgb = colors.match(/\d+/g);
  return "#" + byte2Hex(rgb[0]) + byte2Hex(rgb[1]) + byte2Hex(rgb[2]);
}