function CollapsableImage( $force, callback ){
	
	var self = this;
	var YES = 'yes';
	var NO = 'no';
	var COOKIE  = 'sl_collapse';
	var COOKIE_PARAMS = {path:'/'};
	var stateClosed = { contentVisual: { height: '13px', margin:"0px", padding:"0px" }, collapse: {	backgroundPosition: '0px 0px'}};
	var stateOpen = { contentVisual: {	height: '294px', margin:"0px", padding:"0px" }, collapse: { backgroundPosition: '-878px 0px' }};
	
	this.forceCollapse = $force;
	this.isCollapsed = null;
	
	if( this.forceCollapse == YES || this.forceCollapse == NO ){
		this.isCollapsed = this.forceCollapse;
	}
	else if( $.cookie(COOKIE) == YES || $.cookie(COOKIE) == NO ){
		this.isCollapsed = $.cookie(COOKIE);
	}
	else{
		this.isCollapsed = NO;
	}
	
	$("#collapse").click(function(){
		self.collapse( self.isCollapsed == YES ? NO : YES, true, self.isCollapsed == YES ? callback : function(){} );
	});
	
	this.collapse = function( collapsed, animated, callback ){
		if( collapsed == YES ){
			if( animated ){
				$("#contentVisual").animate( stateClosed.contentVisual, { duration: 500, complete: function(){
					$("#contentVisual").css("overflow", "hidden");
				}} );
				setTimeout( function(){$("#mainImage").fadeOut("fast");}, 400);
			}
			else{
				$("#contentVisual").css( stateClosed.contentVisual );
				$("#mainImage").css("display", "none");
			}
			$("#collapse").css( stateClosed.collapse );
		} 
		if( collapsed == NO ){
			if( animated ){
				$("#contentVisual").animate( stateOpen.contentVisual, 500 );
			}
			else{
				$("#contentVisual").css( stateOpen.contentVisual );
			}
			$("#collapse").css( stateOpen.collapse );
			$("#mainImage").fadeIn("fast").css("display", "block");
			if( animated ) callback();
		} 

		self.isCollapsed = collapsed;
		// don't write cookie if we force the state
		if( self.forceCollapse == YES || self.forceCollapse == NO ) return;

		// write cookie
		$.cookie(COOKIE, collapsed, COOKIE_PARAMS);
	}
}
