/*

SHOWIDE.JS

Copyright 2008, Province of British Columbia, all rights reserved.
This material is owned by the Ministry of Forests and Range and
the Government of British Columbia and is protected by copyright
law. It may not be reproduced or redistributed without the prior
written permission of the Province of British Columbia.

Written by Tyler Waters of the Ministry of Forests and Range, 2008.

USE:

As always, pass "help" to get a description of params/methods.

Ensure the HTML DOM structure is set up properly
This is designed for use of Data Lists (DL tag)
 with Data Terms (DT tag) used for control
 and Data Definition (DD tag) for contents

Call the "doall" function to toggle all


Call the function onLoad (or after the target has rendered)
most values have defaults, but TOTAL must be specified.

Via JavaScript, call the "increment" function.
 or call the "reset" function to reset everything

Once increment has been called [total] # of times,
 the finish property (function callback) is called

*/


function ShowHide(args){
	this.target=null
	this.controltag=null
	this.contenttag=null
	for(var arg in args){this[arg]=args[arg];}
	if(typeof this.target == "string") this.target = document.getElementById(this.target);

	if(! this.target ) alert("there was a problem with " + args['target'] );
	if(! this.controltag ) { this.controltag = "DT" }
	if(! this.contenttag ) { this.contenttag = "DD" }
	if(! this.padding ) { this.padding = "0 0 0 16px" }
	if(! this.moreImg ) { this.moreImg = "/images/portal/more.gif" }
	if(! this.moreTop ) { this.moreTop = "0px" }
	if(! this.moreLeft ) { this.moreLeft = "0px" }
	if(! this.lessImg ) { this.lessImg = "/images/portal/less.gif" }
	if(! this.lessTop ) { this.lessTop = "0px" }
	if(! this.lessLeft ) { this.lessLeft = "0px" }



	if( this.help ) {

		var help = "Help Requested! (note: This function must be run ONLOAD)\n"
		    help +="I accept the following parameters (ctrl-C to grab example)\n\n"
		    help +="target: DOM element or ID of DOM element (see onLoad note above)\n"
		    help +="controlTag: tags that will be used to show content (DT)\n"
		    help +="contentTag: tags that will be used to store content (DD)\n"
		    help +="\nEach controlTag will have the following applied:\n\n"
		    help +="lessImg: relative path of less image (less.gif) \n"
		    help +="lessTop: top-positioning of image (0px)\n"
		    help +="lessLeft: left-positioning of image (0px)\n"

		    help +="moreImg: relative path of less image (more.gif)\n"
		    help +="moreTop: top-positioning of image (0px)\n"
		    help +="moreLeft: left-positioning of image (0px)\n"
		    help +="padding: be sure to include left of image-size (0 0 0 16px)'.\n\n"
		    help +="\ndefaults in brackets.\n\n"

		var ex = "" +
				  "x = new ShowHide({" +
				  "target:'divID'" +
				  ",controltag:'DT'" +
				  ",contenttag:'DD'" +
				  ",moreImg:'/images/portal/more.gif'" +
				  ",morePad:'0 0 0 16px'" +
				  ",lessImg:'/images/portal/less.gif'" +
				  ",lessPad:'0 0 0 16px'" +
				  ",help:true})";
		prompt(help, ex );

	}

	this.init();
}

ShowHide.prototype = {
	init : function() {
		var  controls = this.target.getElementsByTagName(this.controltag)
			,contents = this.target.getElementsByTagName(this.contenttag)
			,t=this;

		this.target.style.display="";

		for( var x=0,y=controls.length;x<y;x++ ) {
			var b = controls[x];
			b.onclick = function() { t.doit.call(t, this, true); }
			b.className = "question"
			b.assoc = contents[x];
			contents[x].style.display="none";
		}

		var c = document.createElement("STYLE"); c.setAttribute("type", "text/css"); var css = ""
		//css+= " #" + this.target.id +" "+ this.controltag +".question{background:url("+ this.moreImg +") no-repeat; }"
		//css+= " #" + this.target.id +" "+ this.controltag +".answer{background:url("+ this.lessImg +") no-repeat;}"

		var c = document.createElement("STYLE"); c.setAttribute("type", "text/css"); var css = ""
		css+= "\n #" + this.target.id +" "+ this.controltag +".question{background:url("+ this.moreImg +") no-repeat "+  this.moreLeft + " " + this.moreTop+ ";}"
		css+= "\n #" + this.target.id +" "+ this.controltag +".answer  {background:url("+ this.lessImg +") no-repeat "+  this.lessLeft + " " + this.moreTop+ ";}"

		//{background:url("+ this.moreImg +") no-repeat "+ this.lessTop + " " + this.lessLeft + ";}"
		//css+= " #" + this.target.id +" "+ this.controltag +".answer{"+
		//	"background-image:url("+ this.lessImg +");"+
		//	"background-repeat:no-repeat; "+
		//	"background-position:"+ this.lessLeft + " " + this.lessTop + ";"+
		//"}"
		css+= "\n #" + this.target.id +" "+ this.controltag + "{padding:"+this.padding+";}"
		css+= "\n #" + this.target.id +" "+ this.contenttag + "{padding:"+this.padding+";}"


		css+= "\n #" + this.target.id +" "+ this.controltag + "{padding:"+this.padding+";}"

		if(c.styleSheet){c.styleSheet.cssText=css;}else{c.appendChild(document.createTextNode(css));}
		document.getElementsByTagName("HEAD")[0].appendChild(c)
	}
	,doall: function(b){
		var  controls = this.target.getElementsByTagName(this.controltag)
		for(x=0;x<controls.length;x++) controls[x].onclick.call( controls[x], b );
	}
	,doit : function(e,b) { var t=this;
		e.className = b ? "answer" : "question";
		e.assoc.style.display = b ? "" : "none";
		e.assoc.className = b ? "visible" : "";
		e.onclick = function() {t.doit.call(t,e,!b); t=null;}
	}
}


function addEvent(obj, evType, fn, useCapture){
  if (obj.addEventListener){ obj.addEventListener(evType, fn, useCapture); return true; }
  else if (obj.attachEvent){ var r = obj.attachEvent("on"+evType, fn); return r; }
  else { obj['on'+evType] = fn; return false; }
}