http://stormsilver.net/wp-content/themes/gg/js/sidebar.js

1var dom = YAHOO.util.Dom;
2
3Sidebar = function(){};
4Sidebar.currentSection = null;
5
6Sidebar.init = function()
7{
8	var sections = dom.getElementsByClassName('sidebarsection', 'div', 'sidebar');
9	for (var i = 0; i < sections.length; ++i)
10	{
11		new SidebarSection(sections[i]);
12	}
13};
14
15
16
17
18
19
20SidebarSection = function(el)
21{
22	var event = YAHOO.util.Event;
23	
24	var obj = new Object();
25	var anim = new YAHOO.util.Anim();
26	
27	obj.mouseover = function()
28	{
29		if (!obj.open)
30		{
31			if (anim.isAnimated())
32			{
33				anim.stop();
34			}
35			anim = new YAHOO.util.Anim(obj.element, {opacity: {to: 1}}, 0.2);
36			anim.animate();
37		}
38	};
39	obj.mouseout = function()
40	{
41		if (!obj.open)
42		{
43			if (anim.isAnimated())
44			{
45				anim.stop();
46			}
47			anim = new YAHOO.util.Anim(obj.element, {opacity: {to: 0.5}}, 0.2);
48			anim.animate();
49		}
50	};
51	obj.expand = function()
52	{
53		if (!obj.open)
54		{
55			if (Sidebar.currentSection != null)
56			{
57				Sidebar.currentSection.close();
58			}
59			Sidebar.currentSection = obj;
60			// the next few lines set the preconditions for the animation. 
61			dom.setStyle(obj.element, 'overflow', 'hidden');
62			dom.setStyle(obj.element, 'height', obj.element.clientHeight+'px');
63			dom.setStyle(obj.body, 'opacity', '0');
64			dom.setStyle(obj.body, 'display', 'block');
65			var height = obj.element.clientHeight + obj.body.clientHeight;
66			var fader = new YAHOO.util.Anim(obj.body, {opacity: {to:1}}, 0.2);
67			obj.open = true;
68			var resizer = new YAHOO.util.Anim(obj.element, {height: {to:height}}, 0.2);
69			resizer.onComplete.subscribe(function(){
70					fader.animate();
71					dom.setStyle(obj.element, 'overflow', 'visible');
72				});
73			resizer.animate();
74		}
75	};
76	obj.close = function()
77	{
78		if (obj.open)
79		{
80			var height = obj.header.clientHeight;
81			dom.setStyle(obj.element, 'overflow', 'hidden');
82			var resizer = new YAHOO.util.Anim(obj.element, {height: {to:height}}, 0.3);
83			obj.open = false;
84			obj.mouseout();
85			resizer.animate();
86		}
87	};
88	
89	el.id = dom.generateId();
90	obj.element = el;
91	var pieces = el.getElementsByTagName('div');
92	obj.header = pieces[0];
93	obj.body = pieces[1];
94	obj.open = false;
95	
96	
97	dom.setStyle(obj.element, 'opacity', '0.5');
98	dom.setStyle(obj.body, 'display', 'none');
99	event.addListener(obj.element, 'mouseover', obj.mouseover);
100	event.addListener(obj.element, 'mouseout', obj.mouseout);
101	event.addListener(obj.element, 'click', obj.expand);
102};
103