
function ExtCPanel(leave_interval, interval, speed, start_y_offset, end_y_offset, start_opacity, end_opacity) {
	var node = document.getElementById('pos_cpanel');
	this.host = document.getElementById('cpanel_container');

	this.start_y_offset = start_y_offset;
	this.end_y_offset = end_y_offset;
	this.start_opacity = start_opacity;
	this.end_opacity = end_opacity;

	if (!node || !this.host)
		return;

	node.id = '';
	var content_node = null;
	node = node.firstChild;
	while (node) {
		if (node.nodeType == 1) {
			// if the node is a regular DOM element, handle it as a data source

			var header = node.firstChild;
			while (header && header.nodeType != 1)
				header = header.nextSibling;

			var header_str = '-';
			if (header && header.tagName == 'H3') {
				this.host.appendChild(header.firstChild);
				node.removeChild(header);
			}

			content_node = node;
			content_node.id = 'pos_cpanel';
			break;

			node = node.nextSibling;
		}
		else {
			// move to the next data block
			node = node.nextSibling;
		}
	}

	if (content_node != null) {
		this.wdg = document.createElement('div');
		document.getElementsByTagName('body')[0].appendChild(this.wdg);

		this.wdg.style.position = 'absolute';
		this.wdg.style.left = '0px';
		this.wdg.style.top = '0px';
		this.wdg.style.visibility = 'hidden';
		this.wdg.style.display = 'block';

		this.wdg.innerHTML = '\
<table cellspacing="0" cellpadding="0">\
	<tr>\
		<td class="cpanel_tl" width="17" height="46"><img src="templates/bt_ezhost/images/blank.gif" width="17" height="46" alt="" /></td>\
		<td class="cpanel_tc"><img src="templates/bt_ezhost/images/blank.gif" width="45" height="46" alt="" class="cpanel_tarrow" /></td>\
		<td class="cpanel_tr" width="23" height="46"><img src="templates/bt_ezhost/images/blank.gif" width="23" height="46" alt="" /></td>\
	</tr>\
	<tr>\
		<td class="cpanel_ml">&nbsp;</td>\
		<td class="cpanel_mc" id="cpanel_data_td"></td>\
		<td class="cpanel_mr">&nbsp;</td>\
	</tr>\
	<tr>\
		<td class="cpanel_bl" width="17" height="27"><img src="templates/bt_ezhost/images/blank.gif" width="17" height="27" alt="" /></td>\
		<td class="cpanel_bc">&nbsp;</td>\
		<td class="cpanel_br" width="23" height="27"><img src="templates/bt_ezhost/images/blank.gif" width="23" height="27" alt="" /></td>\
	</tr>\
</table>\
';

		document.getElementById('cpanel_data_td').appendChild(content_node);

		this.wdg_w = this.wdg.offsetWidth;
		this.wdg.style.display = 'none';
		this.wdg.style.visibility = 'visible';

		this.state = 0;
		this.progress = 0;
		this.interval = interval;
		this.speed = speed;

		this.leave_timer = 0;
		this.leave_interval = leave_interval;

		this.host.onmouseover = function () { document.ext_cpanel.h_mouseover(); }
		this.host.onmouseout = function () { document.ext_cpanel.h_mouseout(); }
		this.wdg.onmouseover = function () { document.ext_cpanel.h_mouseover(); }
		this.wdg.onmouseout = function () { document.ext_cpanel.h_mouseout(); }
	}
}

ExtCPanel.prototype.h_mouseover = function () {
	if (this.leave_timer > 0) {
		clearTimeout(this.leave_timer);
		this.leave_timer = 0;
	}

	if (this.state == 1)
		return;

	if (this.state == 0) {
		var x = this.host.offsetWidth - this.wdg_w, y = this.host.offsetHeight, obj = this.host;
		while (obj) {
			x += obj.offsetLeft;
			y += obj.offsetTop;
			obj = obj.offsetParent;
		}

		this.wdg.style.left = x + 'px';
		this.wdg.style.top = y + 'px';
		this.wdg_y = y;
	}

	this.state = 2;
	this.h_timer();
}

ExtCPanel.prototype.h_mouseout = function () {
	this.leave_timer = setTimeout('document.ext_cpanel.do_hide()', this.leave_interval);
}

ExtCPanel.prototype.do_hide = function () {
	this.leave_timer = 0;
	if (this.state > 0) {
		this.state = -1;
		this.h_timer();
	}
}

ExtCPanel.prototype.h_timer = function () {
	if (this.state == 2) {
		this.progress += this.speed;

		if (this.progress >= 100) {
			this.progress = 100;
			this.state = 1;
		}
	}
	else if (this.state == -1) {
		this.progress -= this.speed;

		if (this.progress <= 0) {
			this.progress = 0;
			this.state = 0;
			this.wdg.style.display = 'none';
		}
	}

	if (this.state != 0) {
		var opacity = Math.round(this.start_opacity + (this.end_opacity - this.start_opacity) * this.progress / 100);
		if (opacity == 0) {
			this.wdg.style.display = 'none';
		}
		else {
			this.wdg.style.top = this.wdg_y + this.start_y_offset + Math.round((this.end_y_offset - this.start_y_offset) * this.progress / 100) + 'px';

			this.wdg.style.display = 'block';
			this.wdg.style.opacity = opacity / 100;
			this.wdg.style.filter = 'filter: alpha(opacity=' + opacity + ')';
		}
	}

	if (this.state == 2 || this.state == -1)
		setTimeout('document.ext_cpanel.h_timer()', this.interval);
}

