var caseStudy = Class.create ({
	
	initialize: function()
	{
		//speed of sliding motion
		this.speed = 0.8;
		
		//get open height before closing it
		this.originalHeight = $('content').getHeight() + "px";
		this.listingHeight = $('listing').getHeight() + "px";
		
		//if box is open or not
		this.open = 0;
	
		this.hideContent();
		this.showButton();
		
		//bind listener to button
		$('button').observe("click", this.buttonClicked.bind(this));
	},

	//make container 0px as javascript is on
	hideContent: function()
	{
		if ($('content'))
		{
			$('content').setStyle({
			   height: '0px'
			});
		}
	},
	
	//show button if javascript as on
	showButton: function()
	{
		if ($('button'))
		{
			$('button').setStyle({
			   display: 'inline'
			});
		}
	},
	
	//button has been pressed, open or close as needed
	buttonClicked: function(event)
	{
		if(!event)
		{
			return false;
		}
		
		event.stop();
		
		if(this.open == 0)
		{
			this.open = 1;
			this.openContent();
			$('button').update("CLOSE THE PANEL");
		}
		else
		{
			this.open = 0;
			this.closeContent();
			$('button').update("CONTINUE READING");
		}
	},
	
	//open Content and close listing
	openContent: function()
	{
		new Effect.Morph('content', {
			style: { 
			height: this.originalHeight
			},
			duration: this.speed,
			transition: Effect.Transitions.linear
		});
		
		new Effect.Morph('listing', {
			style: { 
			height: '0px'
			},
			duration: this.speed,
			transition: Effect.Transitions.linear
		});
	},
	
	//close Content and open listing
	closeContent: function()
	{
		new Effect.Morph('content', {
			style: { 
			height: '0px'
			},
			duration: this.speed,
			transition: Effect.Transitions.linear
		});
		
		new Effect.Morph('listing', {
			style: { 
			height: this.listingHeight
			},
			duration: this.speed,
			transition: Effect.Transitions.linear
		});
	}
});


document.observe('dom:loaded', function()
{	
	if ($('content'))
	{
		new caseStudy();
	}
});