/* 

pdx.prototype.gadgets.collapsiblecontent: prototype-based collapsible content
  manager
  v1.0, 2011/05/25, initial release
  v1.1, 2011/07/12, hash-awareness

  CC BY-SA 2011. Andras Kemeny (http://www.pdx.hu/)
    http://creativecommons.org/licenses/by-sa/3.0/legalcode
  NO WARRANTIES! however, it's tested on IE7/8, Firefox 3.5.x, Opera 10+,
    Chrome & Safari, and it works.
  REQUIRES prototype.js to work.
    http://www.prototypejs.org/
  REQUIRES script.aculo.us to work, if you use appeareance effects.
    http://script.aculo.us/

general info:

<div class="WG_collParaHead">collapsible title</div>
<div class="WG_collParaBody">
collapsed content
...
...
</div>

(and more of these as you like)

usage:

1. prepare the structures above.
2. enjoy.
 
collapsiblecontent.options(: default):
 
  headClass: 'WG_collParaHead'
    the classname of the collapsible content's header.
  bodyClass: 'WG_collParaBody'
    the classname of the collapsible content's body. if left blank, the next
    element is considered as the collapsible content.
  animate: true
    if true, script.aculo.us's Effect.SlideDown and SlideUp are used.
  effectDuration: 0.2
    how quick the effects should be.

*/

var collapsiblecontent = {
 options: {
  headClass: 'WG_collParaHead',
  bodyClass: 'WG_collParaBody',
  animate: true,
  effectDuration: 0.2
 },
 adjustScroll: false,
 init: function() {
 	$$('.'+collapsiblecontent.options.headClass).each(function(el) {
 		el.identify();
 		el.setAttribute('collstate','hidden');
 		el.setAttribute('collcontrols','-');
 		var nx = el.next();
 		if ((collapsiblecontent.options.bodyClass=='')||(nx.hasClassName(collapsiblecontent.options.bodyClass))) {
 			el.setAttribute('collcontrols',nx.identify());
			if ((location.hash!='')&&(el.down('a[name="'+location.hash.substr(1)+'"]')!==undefined)) {
				collapsiblecontent.adjustScroll = true;
 			} else {
 				nx.hide();
 			}
 			el.observe('click',collapsiblecontent.clicka);
 		}
 	});
 	if (collapsiblecontent.adjustScroll===true) {
 		$$('a[name="'+location.hash.substr(1)+'"]').pop().scrollTo();
 	}
 },
 clicka: function(ev) {
 	var el = ev.element();
 	if ((el.hasAttribute('collcontrols'))&&(el.getAttribute('collcontrols')!='-')) {
 		if (el.getAttribute('collstate')=='hidden') {
 			if (collapsiblecontent.options.animate === true) {
 				Effect.SlideDown(el.getAttribute('collcontrols'),{duration:collapsiblecontent.options.effectDuration});
 				el.setAttribute('collstate','shown');
 			} else {
 				$(el.getAttribute('collcontrols')).show();
 			}
 		}
 		else if (el.getAttribute('collstate')=='shown') {
 			if (collapsiblecontent.options.animate === true) {
 				Effect.SlideUp(el.getAttribute('collcontrols'),{duration:collapsiblecontent.options.effectDuration});
 				el.setAttribute('collstate','hidden');
 			} else {
 				$(el.getAttribute('collcontrols')).hide();
 			}
 		}
 	}
 }
}

document.observe('dom:loaded',collapsiblecontent.init);

