/*
  demo1.js
  Collapsible/Expandable Sections
  This is the Javascript for the tutorial in the X Quick-Start document.
*/

xAddEventListener(window, 'load', initializeCollapsible, false);

function initializeCollapsible()
{
  var i, icon, headings = xGetElementsByClassName('collapsible');


//document.getElementById("service1").style.display = 'none';
//document.getElementById("service2").style.display = 'block';
//document.getElementById("service3").style.display = 'block';

for (i = 0; i < headings.length; i++) {
icon = document.createElement('div');
icon.collapsibleSection = xNextSib(headings[i]);
icon.onclick = iconOnClick;
icon.onclick();
//icon.onmouseover = iconOnMouseover;
//icon.onmouseout = iconOnMouseout;
headings[i].appendChild(icon);
}


var  alle = xGetElementsByClassName('exp_container');
// immer das erste oder letzte element ausgeklappt haben:

for (j = 0; j < alle.length; j++) {
//if (j == 0){
if (j == alle.length-1){
alle[j].style.display='block';
headings[j].lastChild.className='CollapseIcon';
headings[j].lastChild.title = 'Schließen';
} else {
alle[j].style.display='none';
headings[j].lastChild.className='ExpandIcon';
headings[j].lastChild.title = 'Öffnen';
}
}




}



function iconOnClick()
{



var container = xGetElementsByClassName('exp_container');
var headerlines = xGetElementsByClassName('collapsible');


var section = this.collapsibleSection;

for (x = 0; x < container.length; x++) {
if (container[x] !=  section) {
container[x].style.display = 'none';

if (navigator.appName != "Microsoft Internet Explorer") {

headerlines[x].lastChild.className='ExpandIcon';
headerlines[x].lastChild.title = 'Öffnen';

}

//var Anzahl = headerlines[x].childNodes.length;
//headerlines[x].childNodes[Anzahl]='ExpandIcon';


} 
}

if (section.style.display != 'block') {


//document.getElementById("service1").style.display = 'none';
//document.getElementById("service2").style.display = 'none';
//document.getElementById("service3").style.display = 'none';


    section.style.display = 'block';



    this.className = 'CollapseIcon';
    this.title = 'Schließen';




  }  else {
    section.style.display = 'none';
    this.className = 'ExpandIcon';
    this.title = 'Öffnen';
  }




}

function iconOnMouseover()
{
  //this.collapsibleSection.style.backgroundColor = '#cccccc';
}

function iconOnMouseout()
{
 // this.collapsibleSection.style.backgroundColor = 'transparent';
}