// ACCORDION 1
var ad = document.getElementById('acc1');	// get accordion div reference
var a = new Accordion(ad);					// make a new Accordion object
a.box.innerHTML = "<h2 style='margin: 0; padding: 0;'>Accordion 1</h2> An Accordion object can have any number of 'Ribs'. <br /><br />";
var rib;

var tdiv = document.createElement('div');
// tdiv.appendChild(

// accAddRib(w, initContent, sClass, eClass, initShrunk, sHandler, eHandler)
rib = a.addRib(null, "A rib's initial contents can be passed as an argument when instantiated, just like this was.  Also, as you can see with this Rib, <em>the expand/collapse functionality must be added to it.</em>", 'rib', 'ribBig', false);

rib = a.addRib(null, null, 'rib', 'ribBig', false);
addRibCrap(rib, null, 'This rib is initially expanded.');
rib.append(document.createElement('br'));
rib.append(document.createTextNode("A rib doesn't have to be collapsed.  It's just the default."));

rib = a.addRib(null, null, 'rib', 'ribBig', true);
addRibCrap(rib, null, 'Dynamic content');
rib.append(document.createElement('br'));
rib.append(document.createTextNode("A rib's contents can be added to after creation: "));
rib.append(newEl('br'));
var addlink = newEl('a');
addlink.appendChild(newText('Click to add contents to this Rib'));
addlink.href='';
addlink.id = rib.id;
addlink.style.textAlign = "left";
addlink.style.textDecoration = "underline";
addlink.onclick = function (e) {
	e = e || window.event;
	var eid;
	if (e.target)
		eid = e.target.id;
	else
		eid = e.srcElement.id;
	var rib = Rib.allRibs[eid];
	rib.append(newText('New content!'));
	rib.append(newEl('br'));
	return false;	// so it doesn't follow link
}
rib.append(addlink);
rib.append(newEl('br'));

// ACCORDION 2
var ad2 = document.getElementById('acc2');	// get accordion div reference
var a2 = new Accordion(ad2);					// make a new Accordion object
a2.box.innerHTML = "<h2 style='margin: 0; padding: 0;'>Accordion 2</h2>";

// have something happen when a Rib gets created
Rib.onInstance = function(rib) {	// change this, just to mix it up
	var idiv = createDiv(rib + '', 'ribInstance', getEl('wrapper'));
	var rid = rib.id + 1;
	idiv.appendChild(document.createTextNode('This was generated by a custom onInstance() function assigned to the Rib class.  It was defined just after creating the second Accordion object above, but before the Ribs were added.  It runs at each new Rib instance creation.  In this case, it was Rib ' + rid + '.'));
}

rib = a2.addRib(null, null, 'rib', 'ribBig', true);
addRibCrap(rib);
rib.append(newEl('br'));
rib.append(newText('You can define onShrink and onExpand functions, either when the rib\'s created or afterwards.  Also, you can force a rib to shrink or expand, as this Rib does Rib 4.'));
rib.onExpand = function() {
	var rib4 = Rib.allRibs[4]
	rib4.expand();
	rib4.append(newEl('br'));
	rib4.append(newText('Rib 3 expanded me with a custom onExpand method.'));
}
rib.onShrink = expandRib4;

function expandRib4() {
	var rib4 = Rib.allRibs[4]
	rib4.shrink();
	rib4.append(newEl('br'));
	rib4.append(newText('This Rib was shrunk by a custom onShrink function attached to rib 3.'));
}
	
rib = a2.addRib(null, null, 'rib', 'ribBig', true);
rib.append(newText('This rib\'s actions are controlled by rib 3.'));
rib.append(newEl('br'));

Rib.onInstance = null;

rib = a2.addRib(null, null, 'rib', 'ribBig', true);
// var l = addRibCrap(rib, null, 'Hovering over this one opens it.');
ra = newEl('a');
ra.appendChild(newText("Hovering over this one opens it."));
ra.id = rib.id;
ra.onclick = "return void;";
rib.append(ra);
var hs = newEl('a');

hs.id = rib.id;
// hs.onmouseover = BOXonmouseover;
hs.appendChild(newText('And this one.'));
rib.append(newEl('br'));
rib.append(newText('Since collapsing and expanding are triggered by events, it doesn\'t matter which event.  For instance, this rib is expanded and collapsed by onMouseOver.'));
rib.box.onmouseover = BOXonmouseover;
rib.box.onmouseout = BOXonmouseout;

rib = a2.addRib(null, null, 'rib', 'ribBig', true);
hs = newEl('a');
hs.id = rib.id;
// hs.onmouseover = BOXonmouseover;
hs.appendChild(newText('And this one.'));
rib.append(hs);
rib.append(newEl('br'));
rib.append(newText('Since collapsing and expanding are triggered by events, it doesn\'t matter which event.  For instance, this rib is expanded and collapsed by onMouseOver.'));
rib.box.id = rib.id;
rib.box.onmouseover = BOXonmouseover;
rib.box.onmouseout = BOXonmouseout;

// ACCORDION 3
var ad3 = document.getElementById('acc3');	// get accordion div reference
var a3 = new Accordion(ad3, true);			// make a new Accordion object
a3.box.innerHTML = "<h2 style='margin: 0; padding: 0;'>Accordion 3</h2>The other two Accordions had the default &quot;any-number-of-ribs-can-be-expanded-at-one-time&quot; behavior.  <em>This</em> Accordion will only allow one Rib to be open at a time. <br /> <br />";
for (var i=0; i<2; i++) {	// add ten ribs
	rib = a3.addRib(null, null, 'rib', 'ribBig', true);
	addRibCrap(rib);
	rib.append(newEl('br'));
	rib.append(newText('Yep, only one.'));
}

rib = a3.addRib(null, null, 'rib', 'ribBig', true);
addRibCrap(rib, null, "Content example 1");
rib.append(newEl('br'));
var picDiv = newEl('div');
picDiv.style.width = "100%";
var pic = newEl('img');
pic.src = "./images/hammer_time.jpg";
pic.align = "left";
// pic.valign = "texttop";
// pic.style.verticalAlign = "top";
pic.style.paddingRight = "5px";
picDiv.appendChild(pic);
picDiv.appendChild(newText("There's really no limit to what you can shove in these ribs."));
var cd = newEl('div');
cd.style.clear = "left";
picDiv.appendChild(cd);
rib.append(picDiv);

rib = a3.addRib(null, null, 'rib', 'ribBig', true);
addRibCrap(rib, null, "Content example 2");

rib.onExpand = function() {
	this.append(newEl('br'));
	
	var nudiv = newEl('div');
	nudiv.innerHTML = '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="275" height="73" id="Untitled-1" align="middle"><param name="allowScriptAccess" value="sameDomain" /><param name="movie" value="new_g_4_nerd.swf" /><param name="quality" value="high" /><embed src="new_g_4_nerd.swf" quality="high" bgcolor="#ffffff" width="275" height="73" name="mymovie" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></object>';
	this.append(nudiv);	
	this.removeme = nudiv;
}

rib.onShrink = function() {
	this.box.removeChild(this.removeme);
}

// var l4 = newEl('a').appendChild(newText('Accordions within accordions'));
rib = a3.addRib(null, null, 'rib', 'ribBig', true);	// this time, going to have an accordion withing an accordion, just cuz
addRibCrap(rib, null, 'Accordions within accordions'); 

var ad4 = createDiv('acc4');
ad4.style.backgroundColor = "white";
ad4.style.color = "black";
adh4 = newEl('h2');
adh4.appendChild(newText('Accordion 4'));
ad4.appendChild(adh4);
ad4.appendChild(newText('In case you were wondering: yes, you can embed these Accordions within one another.'));
ad4.appendChild(newEl('br'));

var a4 = new Accordion(ad4);
rib.append(ad4);
for (var a4i = 1; a4i < 11; a4i++) {
	var stext = newText("Sample content");
	rib = a4.addRib(null, null, 'rib', 'ribBig', true);
	addRibCrap(rib, null, "Embedded accordion rib " + a4i);
	rib.append(stext);
}

function BOXonmouseover (e) {
	e = e || window.event;
	var eid;
	if (e.target)
		eid = e.target.id;
	else
		eid = e.srcElement.id;
	var rib = Rib.allRibs[eid];
	if (rib.hid) {	window.clearInterval(rib.hid);	rib.hid = null;}
	var rid = rib.id + 1;
	rib.oid = window.setInterval("openafterpause(" + rib.id + ")", 250);

}

function BOXonmouseout (e) {
	e = e || window.event;
	var eid;
	if (e.target)
		eid = e.target.id;
	else
		eid = e.srcElement.id;
	var rib = Rib.allRibs[eid];
	if (rib.oid) {	window.clearInterval(rib.oid);	rib.oid = null;}
	// ("BOXonmouseOUT triggered by rib " + rib.id);
//	rib.shrink();

	var rid = rib.id + 1;
	rib.hid = window.setInterval("closeafterpause(" + rib.id + ")", 350);
}

function closeafterpause(ribId) {
	// ("closeafterpause :: closing rib " + ribId);
	
	var rib = Rib.allRibs[ribId + 0];
	window.clearInterval(rib.oid);
	rib.oid = null;
	if (rib.hid) {	window.clearInterval(rib.hid);	rib.hid = null;}
	rib.shrink();
	
	// ("closeafterpause :: rib " + ribId + " closed");
}
function openafterpause(ribId) {
	var rib = Rib.allRibs[ribId + 0];
	rib.hid = null;
	window.clearInterval(rib.hid);
	if (rib.oid) {	window.clearInterval(rib.oid);	rib.oid = null;}
	rib.expand();
}	

function addRibCrap(theRib, crap, linktext, hover, linkclass) { 
	// add a link that'll toggle the Rib... ew.
	var link = createLink(theRib, hover, linktext, linkclass);
	
	theRib.box.appendChild(link);

	if (crap) {
		if (crap.constructor == String) {
			theRib.box.innerHTML += crap;
		} else {
			theRib.box.appendChild(crap);
		}
	}
	
	return link;
}
function createLink(theRib, hover, linktext, linkclass) {
	
	var link = document.createElement('a');
	if (linkclass) { link.className = linkclass; }
	link.href = "";
	link.id = theRib.id;
	var rid = theRib.id + 1;
	if (hover) {
		link.onmouseover = linkOnClickBehavior;	// this won't work
	} else {
		link.onclick = linkOnClickBehavior;
	}
	
	var t = linktext?linktext:'This is Rib ' + rid + ' of Accordion ' + theRib.acc.id + ' ';
	link.appendChild(newText(t));
	return link;
}

function linkOnClickBehavior(e) {
	e = e || window.event;
	var eid;
	if (e.target)
		eid = e.target.id;
	else
		eid = e.srcElement.id;
	var rib = Rib.allRibs[eid];
	rib.toggle("100px");
	return false;
}