/* *****************************************************************************************
	toggle visibility of screenshots
	use the following files with this library: 
		screenshots3.css
		jsloaded.css
*/

/* 
The goal is:
if js is off: show all screenshots
if js is on: default to showing no screenshots

*/

//set a document level variable that the togglescreenshots.js can check just in case we add screenshots without
// including this library
if(window.wdc){
	window.wdc.screenshots = new Object();
	with(window.wdc){
		screenshots.loaded = true; 
		screenshots.magicClassName = "screenshot"
		screenshots.showText = "Show screenshots for this section"
		screenshots.hideText = "Hide screenshots for this section"
//		screenshots.hide_classname = "schide"
		screenshots.show_classname = "scshow"
		screenshots.controlClassname = "toggleControl"
		screenshots.sectionClassname = "scToggleSection"
		screenshots.titleClassname = "screenshotTitle"
		screenshots.TwistyWrapperClassname = "scTwisty"
		screenshots.mainContentContainerID = "enrollBodyMain"
		screenshots.groupName = "screenshotgroup"
	}
	
	// make it happen
	addEvent(window,"load",prepThePage,false)
	

	// write the hide style block here in case somebody has stylesheets, but not JS.
	document.write('<link rel="stylesheet" href="/depts/enrollment/css/jsloaded.css" type="text/css" />');

}

// ------------------------------------------------------------------------------------------

function putThatThingBackWhereYouFoundItOrSoHelpMe(ItsAMusical){
	// find the screenshots in this section
	if(!document.getElementById){ return false; }
	var mi = document.getElementById(ItsAMusical)
	// do we show or hide?
	var show = false;
	if (hasClass(mi,window.wdc.screenshots.show_classname)) {
		// hide these
		removeClass(mi,window.wdc.screenshots.show_classname)
		show = false
		var toggleText =  window.wdc.screenshots.showText;
	} else {
		// show these
		appendClass(mi,window.wdc.screenshots.show_classname)
		show = true
		var toggleText =  window.wdc.screenshots.hideText;
	}
	// swap text
	var aa = getElementsByClassName(mi,'a','SCtoggleLink')
	if(aa.length>0){ aa[0].innerHTML = toggleText }


	// do the screenshots in it; must be in a <p> tag!
	// there's a bug in getElementsByClassName: it doesn't scope properly on oElm in IE
	var workers = getElementsByClassName(mi,'p',window.wdc.screenshots.magicClassName);
//	alert(workers.length);
	var z = ''
//	z += mi.id+'\ntoggled: '+workers.length
//	z += '\n'+mi.childNodes.length
	for(var k=0;k<workers.length;k++){
		setScreenshotVisibility(workers[k],show)
		z += k+':'+workers[k].id+'\n'
	}
//	alert(z);
}

function prepThePage(){
	if(!getElementsByClassName){ return false }
	if(!document.getElementById) { return false }
	
	// find the container we should work in
	var main = document.getElementById(window.wdc.screenshots.mainContentContainerID)
	if(!main){ main = document }

	// run the individual screenshots
	var screenshots = getElementsByClassName(main,'*',window.wdc.screenshots.magicClassName)
//	alert('found '+screenshots.length+' screenshots')
	for(var j=0;j<screenshots.length;j++){
		var x = screenshots[j]
		_createSCID(x,j)
		addTitleBar(x)
	}
	// look for group containers
	var groups = getElementsByClassName(main,'*',window.wdc.screenshots.groupName)
//	alert('found '+groups.length+' groups')
	for(var i=0;i<groups.length;i++){
		thisWrapper = groups[i];
		// add a group toggle control only if there's more than one screenshot in it
		// @todo/bug getElementsByClassName does not handle '*' properly with a non-document search scope
		var ss = getElementsByClassName(thisWrapper,'p',window.wdc.screenshots.magicClassName)
		if(ss){
			if(ss.length>1){ addGroupToggle(thisWrapper,i) }	
		}
	}
}


function _createSCID(node,index){
	// @todo: should check to see if the requested id is available
	if(!node.id){
		thisID = "genScID"+String(index);
		if(document.getElementById(thisID)){ thisID += String( Math.random()*10000) }
		node.setAttribute("id",thisID)
	}
}

function addGroupToggle(wrapper,index){
	// add a toggle group button to this container
	if(!wrapper.id){ wrapper.id = "scToggleGroup_"+index }
	var control = document.createElement('div');
	control.className = window.wdc.screenshots.controlClassname
//	control.id = "scToggleGroup_"+index
	var a = document.createElement('a')
	a.setAttribute('href','#');
//	a.onclick = "putThatThingBackWhereYouFoundItOrSoHelpMe('"+(control.id)+"'); return false; ";
//	addEvent(a,'click',"putThatThingBackWhereYouFoundItOrSoHelpMe('"+(control.id)+"')",false,true);
	a.className = "SCtoggleLink"
//	wrapper.setAttribute('id',"SCtoggleLink_"+index)
	a.href="javascript:putThatThingBackWhereYouFoundItOrSoHelpMe('"+(wrapper.id)+"'); "
	a.appendChild(document.createTextNode(window.wdc.screenshots.showText)); 
	control.appendChild(a)
	wrapper.insertBefore(control,wrapper.firstChild)
}

function addTitleBar(obj){
	var thisID = obj.id
	var imgs = obj.getElementsByTagName('img')
//	alert('adding title bar for '+thisID+'\n'+imgs.length+' images found here')
	for(i=0;i<imgs.length;i++){
		var theImg = imgs[i];
		// get the alt text and build a div
		var txt = theImg.getAttribute("alt") 
		if (txt==''){ txt = "Screenshot" }
		var src = theImg.getAttribute('src')
		// build the title row; 
		//use a doc fragment to hold the branches until we can insert them into the main tree
		var frag = document.createDocumentFragment()
		var title = document.createElement("span")
		title.className = window.wdc.screenshots.titleClassname;

		// create a twisty button; default state is closed
		var lnk = document.createElement("a");
		lnk.setAttribute("id",thisID+"link")
		lnk.setAttribute("href",src);
//		lnk.setAttribute("href","javascript:toggleScreenshotByID('"+thisID+"');")
//		lnk.setAttribute("href","javascript:toggleThisScreenshot();")
		addEventJK(lnk,'click',toggleThisScreenshot,false,true)
		lnk.className = "scClosed";
		lnk.appendChild(document.createTextNode("view"));
		var t = document.createElement("span");
		t.className = window.wdc.screenshots.TwistyWrapperClassname
		t.appendChild(lnk)
		title.appendChild(t)
		title.appendChild(document.createTextNode(txt))
		frag.appendChild(title)
		// insert the view/hide link before the screenshot image
		obj.insertBefore(frag,theImg);
	}
}

function toggleScreenshot(p){
	// set the class on the container
	if( hasClass(p,window.wdc.screenshots.show_classname) ){ var show = false;
	} else { var show= true; 
	}
	setScreenshotVisibility(p,show)
}

function setScreenshotVisibility(p,show){
	// set the container
	if(show){ 
		var targetText = "hide"
		appendClass(p,window.wdc.screenshots.show_classname)
	} else { 
		var targetText = "view"	
		removeClass(p,window.wdc.screenshots.show_classname)
	}
	// set the of the image(s) inside
//	setImageVisibility(p,show)
	var imgs = p.getElementsByTagName('img')
	for(var i=0;i<imgs.length;i++){
		var img = imgs[i]
		if ( show ){
			// show it
			appendClass(img,window.wdc.screenshots.show_classname)
		} else {
			// hide it
			removeClass(img,window.wdc.screenshots.show_classname);
		}
	}

	// set the toggle text for this screenshot
	var titles = getElementsByClassName(p,'span','screenshotTitle');
	if(titles.length>0){
		var links = titles[0].getElementsByTagName('a')
		if(links.length>0){
			var a = links[0]	
			var x = a.firstChild
			var y = document.createTextNode(targetText)
			a.replaceChild(y,x) 
		}
	}
}

function toggleThisScreenshot(){
	var linkObj = document.getElementById(this.id)
	if(linkObj){
		var node = linkObj
		var p = findAncestorByClass(linkObj,window.wdc.screenshots.magicClassName)
		if(p){ toggleScreenshot(p)
		}
	}
	return false; 
}


function findAncestorByClass(node,classname){
	target = null
	// if we were brave, we could use a while statement...
	for(var i=0;i<2000;i++){
		p = node.parentNode
		if( hasClass(p,classname) ){
			target = p
			break;
		}
		node = p;
	}
	return target
}