window.addEvent('domready', function() {

	// Create variables (in this case two arrays) representing our bubbles and pages
	var myItem = $$('.sp_item');
	var myBanner = $$('.sp_banner');
	var myText = $$('.sp_text');
	var myInText = $$('.sp_intext');
	var myHeadline1 = $$('.sp_banner .headline h1');
	var myHeadline2 = $$('.sp_banner .headline h2');
	var myBannerText = $$('.sp_banner .text');

	var bannerwidth1 = '240';
	var bannerwidth2 = '120';
	var textwidth1 = '0';
	var textwidth2 = '360';
	var textwidth3 = '340';
	
	function first() {
		myHeadline1.setStyle('display', 'none');
		myHeadline2.setStyle('display', 'none');
		myBannerText.setStyle('display', 'none');
		myText[0].morph({width:textwidth2});
		myText[1].morph({width:textwidth1});
		myText[2].morph({width:textwidth1});
		myText[3].morph({width:textwidth1});
		myBanner[0].morph({width: bannerwidth1})
		myBanner[1].morph({width: bannerwidth2})
		myBanner[2].morph({width: bannerwidth2})
		myBanner[3].morph({width: bannerwidth2})
		myInText[0].fade(1);
		myInText[1].fade(0);
		myInText[2].fade(0);
		myInText[3].fade(0);		
	}

	function second() {
		myHeadline1.setStyle('display', 'none');
		myHeadline2.setStyle('display', 'none');
		myBannerText.setStyle('display', 'none');
		myText[0].morph({width:textwidth1});
		myText[1].morph({width:textwidth2});
		myText[2].morph({width:textwidth1});
		myText[3].morph({width:textwidth1});
		myBanner[0].morph({width: bannerwidth2})
		myBanner[1].morph({width: bannerwidth1})
		myBanner[2].morph({width: bannerwidth2})
		myBanner[3].morph({width: bannerwidth2})
		myInText[0].fade(0);
		myInText[1].fade(1);
		myInText[2].fade(0);
		myInText[3].fade(0);		
	}

	function third() {
		myHeadline1.setStyle('display', 'none');
		myHeadline2.setStyle('display', 'none');
		myBannerText.setStyle('display', 'none');
		myText[0].morph({width:textwidth1});
		myText[1].morph({width:textwidth1});
		myText[2].morph({width:textwidth2});
		myText[3].morph({width:textwidth1});
		myBanner[0].morph({width: bannerwidth2})
		myBanner[1].morph({width: bannerwidth2})
		myBanner[2].morph({width: bannerwidth1})
		myBanner[3].morph({width: bannerwidth2})
		myInText[0].fade(0);
		myInText[1].fade(0);
		myInText[2].fade(1);
		myInText[3].fade(0);		
	}

	function fourth() {
		myHeadline1.setStyle('display', 'none');
		myHeadline2.setStyle('display', 'none');
		myBannerText.setStyle('display', 'none');
		myText[0].morph({width:textwidth1});
		myText[1].morph({width:textwidth1});
		myText[2].morph({width:textwidth1});
		myText[3].morph({width:textwidth2});
		myBanner[0].morph({width: bannerwidth2})
		myBanner[1].morph({width: bannerwidth2})
		myBanner[2].morph({width: bannerwidth2})
		myBanner[3].morph({width: bannerwidth1})
		myInText[0].fade(0);
		myInText[1].fade(0);
		myInText[2].fade(0);
		myInText[3].fade(1);		
	}


	myBanner[0].addEvent('click', function(e){
		first();
	});
	myBanner[1].addEvent('click', function(e){
		second();
	});
	myBanner[2].addEvent('click', function(e){
		third();
	});
	myBanner[3].addEvent('click', function(e){
		fourth();
	});

});