<HTML>
<HEAD>
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<TITLE></TITLE>
<link rel="shortcut icon" href="" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="" />
</HEAD>
<style>
body {
width:1000px;
height:100%;
}
#smiles_window {
display:none;
width:300px;
height:200px;
overflow:auto;
border:1px solid;
}
#directories_div {
float:left;
width:70px;
height:100%;
}
#smiles_div {
float:left;
width:210px;
height:100%;
}
.button_smile_directories {
width:65px;
}
</style>
<BODY>
<script>
/*
Этот скрипт нужно выводить вместе с формой отправки сообщения
*/
function get_smiles() {
function get_XmlHttp() {
var xmlHttp = null;
if(window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
else if(window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlHttp;
}
var button = document.getElementById('get_smiles_but');
button.onclick = function(e) {
close_smiles_window();
}
/*Запрос для получения списка смайлов: */
var URL = 'http://site.ru/smiles/smiles.php';
var data = 'get_smiles=1';
var get_smiles_req = get_XmlHttp();
get_smiles_req.open("POST", URL, true);
get_smiles_req.send(data);
get_smiles_req.onreadystatechange = function() {
if (get_smiles_req.readyState == 4) {
if (get_smiles_req.status == 200) {
var res = get_smiles_req.responseText;
show_smiles(res); //Если сервер вернул ответ, то запускаем функцию вывода смайлов
}
else {
//Ошибка. Не пришел ответ сервера.
}
}
}
/*Функция вывода смайлов:*/
function show_smiles(res) {
/*Ответ сервера должен быть в виде JSON-строки, надо преобразовать в массив и вывести: */
/*структура примерно такая:
{"директория":{
"smile_tag":"url",
"smile_tag":"url",
"smile_tag":"url",
"smile_tag":"url"
}
"директория":{
"smile_tag":"url",
"smile_tag":"url",
"smile_tag":"url",
"smile_tag":"url"
}
...
... и так далее
}
*/
var win = document.getElementById('smiles_window');
win.style.display = 'block';
var direc_div = document.getElementById('directories_div');
direc_div.innerHTML = '';
var smiles_div = document.getElementById('smiles_div');
var smiles_arr = JSON.parse(res); //массив с директориями смайлов
for (key in smiles_arr) {
var dir_button = document.createElement('input');
dir_button.type = 'button';
dir_button.className = 'button_smile_directories';
dir_button.value = key;
dir_button.onclick = function(e) {
var direc = e.target.value;
/*По клику откроется директория: */
open_directory(direc);
}
direc_div.appendChild(dir_button);
/* */
}
/*Открытие директории: */
function open_directory(dir) {
smiles_div.innerHTML = '';
var smiles = smiles_arr[dir];
for (key in smiles) {
var smile_addr = smiles[key];
var smile_elem = document.createElement('img');
smile_elem.setAttribute('name', key);
smile_elem.src = smile_addr;
smile_elem.onclick = function(e) {
var tag_smile = e.target.getAttribute('name');
var addr = e.target.getAttribute('addr');
var textarea = document.getElementById('msg');
textarea.value = textarea.value + ' ' + tag_smile;
close_smiles_window();
}
smiles_div.appendChild(smile_elem);
}
}
}
/*Функция для закрытия окошка: */
function close_smiles_window() {
var button = document.getElementById('get_smiles_but');
button.value = 'Смайлы';
button.setAttribute('onclick', 'get_smiles()');
/*спрятать окошко смайлов: */
document.getElementById('smiles_window').style.display = 'none';
}
}
</script>
<form>
<br /><textarea id='msg' name='msg'></textarea><br />
<label><input type='checkbox' name='translit' value='1' /> Транслит</label>
<!--Кнопка открытия смайлов: -->
<input type='button' value='Смайлы' name='get_smiles_but' id='get_smiles_but' onclick='get_smiles()' />
<!--Окошко со смайлами, сначало оно скрыто (display:none): -->
<div id='smiles_window' style='display:none'>
<div id='directories_div'></div>
<div id='smiles_div'></div>
</div>
<!---->
<br />
<!--<img src='/captcha.php?SESS=$sess' width='100' height='30' alt='Проверочное число' /><br /><input name='chislo' size='5' maxlength='5' value='' type='text' /><br/>-->
<input type='submit' value='Отправить' />
</form>
</BODY>
</HTML>