(function ($) {
	$(document).ready (function () {
	
		var heighest = -1;
		
		// wrap 'divs' around all lists
		$ ('#twistyShowHide ul').each (function (i) {
			$ (this).wrap ('<div class="showHideContainer" id="showHideId-' + i + '"></div>');
		
			var h = $ (this).height ();
			if (h > heighest) {
				heighest = h;
			}
		});
		
		// set fixed height of surrounding div tag
		var pHeight = $ ('#twistyShowHide > p');
		pHeight = pHeight.length * pHeight.height ();		
		$ ('#twistyShowHide').css ({ overflow: 'hidden', height: heighest + pHeight + 90 });
		
		
		// add class 'showHideActive'
		var css = '<style type="text/css">\n' + 
				'p.showHideActive { background: url(//www.ibm.com/i/v16/icons/tw_open.gif) no-repeat 2px 4px; }\n' +
				'p.showHideParagraph { background: url(//www.ibm.com/i/v16/icons/tw_closed.gif) no-repeat 2px 4px;}\n' +
				'</style>';
				
		$ ('head').append (css);
		$ ('#twistyShowHide p').addClass ('showHideParagraph').css ({paddingLeft: "21px"});
		
		// hide all but first list
		$ ('div.showHideContainer:not(:first)').hide ();
		$ ('div.showHideContainer').height (heighest + 17);
		
		// set first as active
		$ ('#twistyShowHide p:first').addClass ('showHideActive').removeClass ('showHideParagraph');
		
		// when somebody clicks on a paragraph..		
		$ ('#twistyShowHide p').bind("mouseenter",function() {		
		
			// first find active list
			var active = $ ('p.showHideActive');
			var oldId = active.next ().attr ('id').substr (11);
			var newId = $ (this).next ().attr ('id').substr (11);
			
			if (oldId == newId) {
				return; 
			}
			
			var div = active.next ();
			var hei = div.height ();
			
			
			
			active.removeClass ('showHideActive').addClass ('showHideParagraph');
			
			
			
			// show the new one
			var nove = $ (this);
			var ndiv = nove.next ();
			nove.addClass ('showHideActive').removeClass ('showHideParagraph'); 
			
			if (newId < oldId) {
				
				ndiv.slideDown ();
				div.slideUp ();
			
			} else {
				ndiv.slideDown ('slow');
				div.slideUp('slow');
				

			}
			
    
    	});
	});
}) (jQuery);