function component_Shoutbox(auto_id)
{
	this.DOMConstruct('Shoutbox', auto_id);

	this.$window = this.$('#window');
	this.$msg_list = this.$('#msg_list');
	this.$sidebar = this.$('#sidebar');
	this.$bottom = this.$('#bottom');
	this.$input = this.$('#input');
    this.$username = this.$('#username');
	this.$send_btn = this.$('#send_btn');
    
    this.$lastMessageId = 0;
	var handler = this;

	this.delegates =
	{
		ping: function() {
			handler.ping();
		},

		pingComplete: function() {
			handler.ping_in_process = false;
			if (handler.ping_queued) {
				handler.ping();
			}
		}

	}

	this.$('#shoutbox_input_form')
		.submit(function() {
			var value = jQuery.trim(handler.$input.val());
			if (value) {
				//var color_txt = $('body').css('color');
				var color = handler.palette_picker.color || "00aaff"; //handler.palette_picker.rgbToHex(color_txt);
                var name = jQuery.trim(handler.$username.val());

                var msg = {
                        username: name,
                        text: value,
                        color: color
                };
                handler.ajaxCall('addMessage', msg);

			}

			handler.$input.val('');

			return false;
		});

}

component_Shoutbox.prototype =
	new SK_ComponentHandler({

	/**
	 * Custom constructor.
	 */
	construct: function(ping_interval)
	{
		handler = this;
		this.ping_interval = window.setInterval(this.delegates.ping, ping_interval);
		this.ping(); // calling first ping faster
	},


	/**
	 * Backend ping.
	 */
	ping: function()
	{
		if (this.ping_in_process) {
			this.ping_queued = true;
			return;
		}

		this.ping_queued = false;
		this.ping_in_process = true;

		var params = {
			lastMessageId: handler.$lastMessageId
		}

		this.ajaxCall('ping', params, {
			complete: this.delegates.pingComplete
		});
	},

	/**
	 * Immediately stops pinging.
	 */
	stop: function(error_message) {
		window.clearInterval(this.ping_interval);
		this.ping_queued = false;
		this.ping_in_process = true; // hack

		if (error_message) {
			var fl_box = SK_alert(error_message);
			fl_box.$body.find('a')
				.click(function() {
					window.opener.open(this.href);
					return false;
				});
			fl_box.bind('close', function() {window.close()});
		}

		this.$input.disable();
		this.$send_btn.disable();
	},

	/**
	 * Server-called callback.
	 */
	drawMessages: function(lastMessageId, msg_list)
	{
        
        if ($('.shoutbox_preloader').length > 0)
            $('.shoutbox_preloader').remove();

        if ($('div#no_messages_label').length > 0)
            $('div#no_messages_label').remove();

        handler.$lastMessageId = lastMessageId;
		var $tpl_msg = this.$('#message_tpl');
        
		for (var i = 0, msg, $msg; msg = msg_list[i]; i++) {
        
            $msg = $tpl_msg.clone().removeAttr('id');
			
			$msg.children('.msg_username')
                .text(msg.username).attr('href', msg.href);
            $msg.children('.msg_time').text(msg.time);
			$msg.children('.msg_text').html(msg.text);
			$msg.children('.msg_text').css('color', '#'+msg.color);

            this.$msg_list.append($msg);
		}
        this.$window.scrollTop(this.$msg_list.height());

	}

});