function Infobox(id, placeholderId, imgId) {
	this.id = id;
    this.placeHolder = $('#' + placeholderId);
    this.image = $('#' + imgId);
    this.error = null;
    this.progressContent = null;
    this.progressbar = null;
    this.content = null;

    this.url = "/ibcontent.ashx";
    this.data = {};

	this.loaded = false;
}

Infobox.prototype.init = function() {
	this.content = $('<div></div>');
    this.placeHolder.append( this.content );
	this.content.hide();

	this.progressContent = $('<div style="padding:10px;"><center><div class="progressbar" style="width: 200px;"></div>Loading...</center></div>');
    this.placeHolder.append( this.progressContent );

	this.progressbar = $('div.progressbar', this.progressContent);
	this.progressbar.progressbar({	autostart:false,
									speed:2000,
									animation:'fade'});
	this.progressContent.hide();

    this.error = $('<div class="error"></div>');
    this.error.hide();
    this.placeHolder.append( this.error );
//alert(this.id + '_needShow: ' + $.cookie(this.id + '_needShow'));
	if( $.cookie(this.id + '_needShow') == '1' ) {
		this.show();
	}
}

Infobox.prototype.toggle = function() {
    var oThis = this;

    if( this.placeHolder.is(':hidden') ) {
        this.show();
    }
    else {
        this.hide();
    }
}

Infobox.prototype.show = function() {
    var oThis = this;
    this.image.attr('src', '/images/collapse_blue.jpg');

    this.placeHolder.show('fast', function() {
        if( !oThis.loaded ) {
            if( oThis.error.is(':visible') ) {
                oThis.error.fadeOut('slow', function() {
                    oThis.loadContent();
                });
            }
            else {
                oThis.loadContent();
            }
        }
    });

	$.cookie(this.id + '_needShow', '1', { expires: 365 });
}

Infobox.prototype.hide = function() {
    this.image.attr('src', '/images/expand_blue.jpg');

    this.placeHolder.hide('fast');

	$.cookie(this.id + '_needShow', null);
}

Infobox.prototype.onSuccess = function(html) {
	var oThis = this;

	this.loaded = true;

	this.progressbar.progressbar('stop');
	this.progressContent.fadeOut('slow', function() {
		oThis.content.html( html );
		oThis.content.fadeIn('slow');
	});
}

Infobox.prototype.onError = function(xhr, status, error) {
	var oThis = this;

	this.progressbar.progressbar('stop');
	this.progressContent.fadeOut('slow', function() {
		if( status == 'timeout' ) {
			oThis.showError('Timeout error has occured. Please try again later.');
		}
		else if( xhr != null ) {
			oThis.showError('Error: ' + xhr.status + ' (' + xhr.statusText+ ')');
		}
		else {
			oThis.showError('Unknown error has occured');
		}
	});
}

Infobox.prototype.loadContent = function() {
    var oThis = this;

	this.startProgress();

    $.ajax({
       timeout: 60000,
       type: "GET",
       url: oThis.url,
       data: oThis.data,
       success: function(html) {
			oThis.onSuccess(html);
       },
       error: function(xhr, status, error) {
			oThis.onError(xhr, status, error);
       }
     });
}

Infobox.prototype.reloadContent = function() {
    var oThis = this;
    this.loaded = false;

    if( this.content.is(':visible') ) {
        this.content.hide('fast', function() { oThis.show(); } );
    }
    else {
        this.show();
    }
}

Infobox.prototype.showError = function(msg) {
    this.error.html('<b>' + msg + '</b>');
    this.error.fadeIn('slow');
}

Infobox.prototype.startProgress = function() {
	this.progressContent.fadeIn('slow');
	this.progressbar.progressbar('start');
}