/////////////////////////////////////////////////////////////////////
/* Document contains all Javascript related to the _base.template.html
////////////////////////////////////////////////////////////////////*/

document.observe("dom:loaded", function() {
	
	assignRoundedCorners();
	assignClearForms();
	assignPageButtons();

});

function initAccordion(iSub, isAnimate, color) {

	var iColor=color;
	accordion_update(iSub, isAnimate);
	accordion_events();
	
	function accordion_update(iSub, isAnimate) {
	
		if (isAnimate==null) isAnimate=false;
		
		// how many sections do we have?
		var iTotalSections=$$('dl#acc dt').size();
	
		// what is the height of a DT?
		var iHeight=$('acc').down().getHeight();
		
		// in an array store the subsections in order they appear on page, so
		// head_10, head_11, head_9, head_14, head_3 etc
		var arrOrder = Array();	
		$$('dl#acc dt').each(function(s) {	
			arrOrder.push(head_split(s.id));							  
		});
	
		// now work out where in the stack the dropdown to select is.
		var iSubSectionSelect=arrOrder.indexOf(iSub);
					
		// iterate through all DTs and move up or down	
		$$('dl#acc dt').each(function(s, i) {	
			
			// We are iterating through the dropdowns from top to bottom.
			// Work out if the current dropdown needs to be shifted up or down....
			
			if (i<=iSubSectionSelect || iSubSectionSelect==-1) {	
				// move up
				var iDtPx= i * iHeight
			} else  {
				// move down
				var iDtPx=$('acc').getHeight() - ( (iTotalSections - i) * iHeight);		
			}
			
			// from that, we can work out where the DD should move to
			var iDdPx = iDtPx + iHeight;
							
			if (!isAnimate) {		
				// we're not animating - just stick in the right place.  CSS already defines these elements as absolutley positioned.
				s.setStyle({ top : iDtPx + "px" });			
				// move DD to match
				s.next().setStyle({top : iDdPx + "px"});				
			} else if (isAnimate) {
				// animation - same as above, but slide there instead.		
				  new Effect.Move (s, { duration: 0.2, y: iDtPx, mode: 'absolute' });		
				  new Effect.Move (s.next(), { duration: 0.2, y: iDdPx, mode: 'absolute' });			  			
			}
			
			// change the colour of the DT - black for on, orange for off.
			if (i!=iSubSectionSelect) {	
				s.setStyle({
				color:iColor,
				backgroundImage:'url(/img/spinner_off.gif)'
				});	
				s.selected=false;
			} else if (i==iSubSectionSelect) {
				s.setStyle({
				color:'#000',
				backgroundImage:'url(/img/spinner_on.gif)'
				});								
				s.selected=true;
			}
			
			// if showing NO sections (-1) then switch all DDs off, otherwise switch them on
			if (iSubSectionSelect==-1) {
				s.next().setStyle({display:'none'});
			} else {
				s.next().setStyle({display:'block'});
			}
				
		});
		
	}
	
	function accordion_events() {	
		$$('dl#acc dt').each(function(s) {
			s.observe('click', function() {
										
				//accordion_update(head_split(this.id), true);
			});		
			s.observe('mouseover', function() {
				//if (!s.selected) {
					//accordion_update(head_split(this.id), true);
				//}
				s.setStyle({color:'#000'});
			});	
			s.observe('mouseout', function() {
				if (!s.selected) {
					s.setStyle({color:iColor});
				}
			});			
		});	
	}	
		
	function head_split(strName) {
		// a dt can have an id like head_14 - just return the number
		return (Number(strName.substr(5)));
	}
}