var html;
function elem(id) {
	return document.getElementById(id);
}
elem('activity').onchange=function() {
	Preview_HTML();
	if(this.value!='active') {
		elem('preview').style.backgroundColor='#ddd';
	} else {
		elem('preview').style.backgroundColor='';
	}
}
function Preview_HTML() {
	if(elem('activity').value!='active') {
		return;
	}
	var Codes=elem('insert_code').value;
	var preview_window=window.open('','preview');
	preview_window.document.write(Codes);
	preview_window.document.close();
}
function Patterns(par) {
	switch(par) {
		case 'paragraph':
		html='<div dir="rtl">\n<p> پاراگراف اول</p>\n<p>\nپاراگراف دوم\n<br>\nادامه پاراگراف دوم\n</p>\n</div>';
		break;
		case 'heading':
		html='<div dir="rtl">\n<h1>سرفصل شماره 1</h1>\n<h2>سرفصل شماره 2</h2>\n<h3>سرفصل شماره 3</h3>\n<h4>سرفصل شماره 4</h4>\n<h5>سرفصل شماره 5</h5>\n<h6>سرفصل شماره 6</h6>\n</div>';
		break;
		case 'format':
		html='<div dir="rtl">\n<strong>متن ضخیم</strong>\n<br>\n<b>متن ضخیم</b>\n<br><br>\n<i>متن مورب</i>\n<br>\n<em>متن مورب </em>\n<br><br>\n<u>متن زیرخط دار</u>\n</div>';
		break;
		case 'fonts':
		html='<div dir="rtl">\n<font size="3">متن با اندازه فونت 3</font>\n<br><br>\n<font color="blue">متن با رنگ آبی</font>\n<br><br>\n<font face="Times New Roman">متن با قلم Times New Roman</font>\n</div>';
		break;
		case 'special':
		html='&amp;\n<br>\n&copy;\n<br>\n&reg;\n<br>\n&trade;\n<br>\n&dagger;\n<br>\n&raquo;\n<br>\n&laquo;\n<br>\n&#151;\n<br>\n&deg;\n<br>\n&frac14;\n<br>\n&frac12;\n<br>\n&frac34;\n<br>\n&middot;\n<br>\n&iexcl;\n<br>\n&euro;\n<br>\n&pound;\n<br>\n&divide;\n<br>\n&radic;';
		break;
		case 'links':
		html='<div dir="rtl" align="center">\nماوس خود را روی لینک زیر قرار دهید تا عنوان آنرا مشاهده کنید :\n<br>\n<a href="http://'+window.location.host+'/"\n title="طراحی وب - آموزش طراحی صفحات وب"\n target="_blank">\nساختن لینکی که در صفحه جدید باز می شود\n</a>\n</div>';
		break;
		case 'images':
		html='<img\n src="http://'+window.location.host+'/images/learn_html.gif"\n alt="متتن جایگزین تصویر"\n border="2"\n height="100"\n width="200"\n align="right">';
		break;
		case 'comment':
		html='این قسمت خارج از کامنت نوشته شده است\n<!--\nاین یک کامنت است\nاین بخش در داخل کامنت نوشته شده است\nکامنتها در مرورگر نمایش داده نمی شوند\n-->\nاین متن خارج از کامنت و بعد از آن نوشته شده است';
		break;
		case 'ul':
		html='<div dir="rtl">\n<ul>\n<li type="circle">قسمت اول لیست</li>\n<li type="disk">قسمت دوم لیست</li>\n<li type="square">قسمت سوم لیست</li>\n<li>قسمت چهارم لیست</li>\n</ul>\n</div>';
		break;
		case 'ol':
		html='<div dir="rtl">\n<ol start="8">\n<li type="1">قسمت اول لیست</li>\n<li type="A">قسمت دوم لیست</li>\n<li type="a">قسمت سوم لیست</li>\n<li type="I">قسمت چهارم لیست</li>\n<li type="i">قسمت پنجم لیست</li>\n</ol> \n</div>';
		break;
		case 'email':
		html='<div dir="rtl">\nلینک زیر برای ارسال ایمیل به همراه یک کپی و یک کپی مخفی با مشخص کردن موضوع و متن بدنه ایمیل استفاده می شود:\n<a href="mailto:yaser.zeinali@gmail.com?cc=info@neopersia.org&bcc=admin@neopersia.org&subject=HTML In Practice&body=Learn HTML with Exams">\nتماس با ما از طریق ایمیل\n</a>\n</div>';
		break;
		case 'forms':
		html='<div dir="rtl">\n<form name="testForm" method="post" action="http://'+window.location.host+'/samples/myForm.php?testForGet=this section uses GET method" target="_blank">\nمتن مربوط به تکست باکس :<br>\n<input name="frm_textbox" type="text" size="30" maxlength="30">\n<br>\nمتن مربوط به باکس کلمه عبور :<br>\n<input name="frm_pass" type="password" size="30" maxlength="30">\n<br>\nTextArea :<br>\n<textarea name="frm_textarea" cols="25" rows="3"></textarea>\n<br>\n<input name="frm_checkbox" type="checkbox" value="چک باکس انتخاب شده است">\nمتن مربوط به چک باکس <br>\n<label>\n<input type="radio" name="RadioGroup" value="value1">\nدکمه 1</label>\n<br>\n<label>\n<input type="radio" name="RadioGroup" value="value2">\nدکمه 2</label>\n<br>\n<select name="frm_list" size="1">\n<option value="مقدار اول در لیست">گزینه اول</option>\n<option value="مقدار دوم در لیست">گزینه دوم</option>\n<option value="مقدار سوم در لیست">گزینه سوم</option>\n</select>\n<br>\n<br>\n<input value="پاک کردن فرم" type="reset">\n<input value="ارسال فرم" type="submit">\n</form>\n</div>';
		break;
		case 'sound':
		html='<embed src="http://'+window.location.host+'/samples/example.mid" width="300" height="60" autostart="true" loop="true">';
		break;
		case 'hr':
		html='\n<hr \nalign="left" \nwidth="250" \nsize="20" \nnoshade="noshade">';
		break;
		case 'marquee':
		html='<marquee loop="infinite" bgcolor="yellow" width ="250">متن مورد نظر خود را اینجا بنویسید</marquee>';
		break;
		case 'table':
		html='<div dir="rtl">\n<table border="3" cellpadding="5" cellspacing="5">\n<tr>\n<td>سطر اول و سلول اول</td>\n<td>سطر اول و سلول دوم</td>\n</tr>\n<tr>\n<td>سطر دوم و سلول اول</td>\n<td>سطر دوم و سلول دوم</td>\n</tr>\n</table>\n</div>';
		break;
		case 'table2':
		html='<div dir="rtl">\n<table width="350" height="100" border="3">\n<td align="center" valign="top">\nمتمایل به بالا\n</td>\n<td align="center" valign="middle">\nمتمایل به وسط\n</td>\n<td align="center" valign="bottom">\nمتمایل به پایین\n</td>\n</table> \n</div>';
		break;
		case 'table3':
		html='<div dir="rtl">\n<table border="2">\n<td align="center">\nسلول اول\n</td>\n<td rowspan="2" align="center">\n<img src="http://'+window.location.host+'/images/learn_html.gif">\n</td>\n<tr>\n<td align="center">\nسلول دوم\n</td>\n</tr>\n</table>\n</div>';
		break;
		case 'table4':
		html='<div dir="rtl">\n<table border="3">\n<td bgcolor="yellow">\nمحتویات سلول اول\n</td>\n<td bgcolor="green">\nمحتویات سلول دوم\n</td>\n</table>\n</div>';
		break;
		case 'table5':
		html='<div dir="rtl">\n<table border="3" width="300">\n<tr bgcolor="pink">\n<td>صورتی</td>\n<td>این ردیف صورتی است</td>\n<tr bgcolor="gray">\n<td>خاکستری</td>\n<td>این ردیف خاکستری است</td>\n</table>\n</div>';
		break;
		case 'iranflag':
		html='<html>\n<head>\n<title>نمایش پرچم ایران با استفاده از کدهای اچ تی ام ال و سی اس اس</title>\n<style type="text/css">\nbody { background-color:#ddd }\n.top { background-color:green }\n.middle { background-color:white; text-align:center }\n.bottom { background-color:red }\n</style>\n</head>\n\n<body>\n<div class="top">&nbsp;</div>\n<div class="middle">الله</div>\n<div class="bottom">&nbsp;</div>\n</body>\n\n</html>';
		break;
	}
	elem('insert_code').value=html;
	Preview_HTML();
}