////////////////////////////// Hauptmenue und Dropdown-Menue ////////////////////////
var cssdropdown={
disappeardelay: 100, //war vorher 500 [HUW] set delay in miliseconds before menu disappears onmouseout
// Wenn Wert zu klein, schafft es die Maus nicht vom Haupt- ins DropDownMenue!
disablemenuclick: true, //when user clicks on a menu item with a drop down menu, disable menu item's link?
enableswipe: 1, //enable swipe effect? 1 for yes, 0 for no

//No need to edit beyond here////////////////////////
dropmenuobj: null, ie: document.all, firefox: document.getElementById&&!document.all, swipetimer: undefined, bottomclip:0,

getposOffset:function(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
},

swipeeffect:function(){
if (this.bottomclip<parseInt(this.dropmenuobj.offsetHeight)){
this.bottomclip+=10+(this.bottomclip/10) //unclip drop down menu visibility gradually
this.dropmenuobj.style.clip="rect(0 auto "+this.bottomclip+"px 0)"
}
else
return
this.swipetimer=setTimeout("cssdropdown.swipeeffect()", 10)
},

showhide:function(obj, e){
if (this.ie || this.firefox)
this.dropmenuobj.style.left=this.dropmenuobj.style.top="-500px"
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover"){
if (this.enableswipe==1){
if (typeof this.swipetimer!="undefined")
clearTimeout(this.swipetimer)
obj.clip="rect(0 auto 0 0)" //hide menu via clipping
this.bottomclip=0
this.swipeeffect()
}
obj.visibility="visible"
}
else if (e.type=="click")
obj.visibility="hidden"
},

iecompattest:function(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
},

clearbrowseredge:function(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=this.ie && !window.opera? this.iecompattest().scrollLeft+this.iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
this.dropmenuobj.contentmeasure=this.dropmenuobj.offsetWidth
if (windowedge-this.dropmenuobj.x < this.dropmenuobj.contentmeasure)  //move menu to the left?
edgeoffset=this.dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var topedge=this.ie && !window.opera? this.iecompattest().scrollTop : window.pageYOffset
var windowedge=this.ie && !window.opera? this.iecompattest().scrollTop+this.iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
this.dropmenuobj.contentmeasure=this.dropmenuobj.offsetHeight
if (windowedge-this.dropmenuobj.y < this.dropmenuobj.contentmeasure){ //move up?
edgeoffset=this.dropmenuobj.contentmeasure+obj.offsetHeight
if ((this.dropmenuobj.y-topedge)<this.dropmenuobj.contentmeasure) //up no good either?
edgeoffset=this.dropmenuobj.y+obj.offsetHeight-topedge
}
}
return edgeoffset
},

dropit:function(obj, e, dropmenuID){
if (this.dropmenuobj!=null) //hide previous menu
this.dropmenuobj.style.visibility="hidden" //hide menu
this.clearhidemenu()
if (this.ie||this.firefox){
obj.onmouseout=function(){cssdropdown.delayhidemenu()}
obj.onclick=function(){return !cssdropdown.disablemenuclick} //disable main menu item link onclick?
this.dropmenuobj=document.getElementById(dropmenuID)
this.dropmenuobj.onmouseover=function(){cssdropdown.clearhidemenu()}
this.dropmenuobj.onmouseout=function(e){cssdropdown.dynamichide(e)}
this.dropmenuobj.onclick=function(){cssdropdown.delayhidemenu()}
this.showhide(this.dropmenuobj.style, e)
this.dropmenuobj.x=this.getposOffset(obj, "left")
this.dropmenuobj.y=this.getposOffset(obj, "top")
this.dropmenuobj.style.left=this.dropmenuobj.x-this.clearbrowseredge(obj, "rightedge")+"px"
this.dropmenuobj.style.top=this.dropmenuobj.y-this.clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+1+"px"
}
},

contains_firefox:function(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
},

dynamichide:function(e){
var evtobj=window.event? window.event : e
if (this.ie&&!this.dropmenuobj.contains(evtobj.toElement))
this.delayhidemenu()
else if (this.firefox&&e.currentTarget!= evtobj.relatedTarget&& !this.contains_firefox(evtobj.currentTarget, evtobj.relatedTarget))
this.delayhidemenu()
},

delayhidemenu:function(){
this.delayhide=setTimeout("cssdropdown.dropmenuobj.style.visibility='hidden'",this.disappeardelay) //hide menu
},

clearhidemenu:function(){
if (this.delayhide!="undefined")
clearTimeout(this.delayhide)
},

startchrome:function(){
for (var ids=0; ids<arguments.length; ids++){
var menuitems=document.getElementById(arguments[ids]).getElementsByTagName("a")
for (var i=0; i<menuitems.length; i++){
if (menuitems[i].getAttribute("rel")){
var relvalue=menuitems[i].getAttribute("rel")
menuitems[i].onmouseover=function(e){
var event=typeof e!="undefined"? e : window.event
cssdropdown.dropit(this,event,this.getAttribute("rel"))
}
}
}
}
}

}
///////////////////////////////////////////////////////////////////////////////////
///////////////////////////// Text-Aufklapper  ////////////////////////////////////
function toggledisplay (id){
  if (document.getElementById) {
    var mydiv = document.getElementById(id);
    mydiv.style.display = (mydiv.style.display=='block'?'none':'block');
  }
}


//////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////// Zebratabelle ////////////////////////////

// this function is needed to work around 
  // a bug in IE related to element attributes
  function hasClass(obj) {
     var result = false;
     if (obj.getAttributeNode("class") != null) {
         result = obj.getAttributeNode("class").value;
     }
     return result;
  }   

 function stripe(id) {

    // the flag we'll use to keep track of 
    // whether the current row is odd or even
    var even = false;
  
    // if arguments are provided to specify the colours
    // of the even & odd rows, then use the them;
    // otherwise use the following defaults:
    
    // Original:
    var evenColor = arguments[1] ? arguments[1] : "rgb(100,100,100)"; 
    var oddColor = arguments[2] ? arguments[2] : "rgb(160,160,160)";
    //
    // Neu Uli:
    var evenColor = "rgb(214,235,245)";
    var oddColor = "rgb(242,250,255)";
    // Ende neu
  
  
    // obtain a reference to the desired table
    // if no such table exists, abort
    var table = document.getElementById(id);
    if (! table) { return; }
    
    // by definition, tables can have more than one tbody
    // element, so we'll have to get the list of child
    // &lt;tbody&gt;s 
    var tbodies = table.getElementsByTagName("tbody");

    // and iterate through them...
    for (var h = 0; h < tbodies.length; h++) {
    
     // find all the &lt;tr&gt; elements... 
      var trs = tbodies[h].getElementsByTagName("tr");
      
      // ... and iterate through them
      for (var i = 0; i < trs.length; i++) {

        // avoid rows that have a class attribute
        // or backgroundColor style
        if (! hasClass(trs[i]) &&
            ! trs[i].style.backgroundColor) {
 		  
          // get all the cells in this row...
          var tds = trs[i].getElementsByTagName("td");
        
          // and iterate through them...
          for (var j = 0; j < tds.length; j++) {
        
            var mytd = tds[j];

            // avoid cells that have a class attribute
            // or backgroundColor style
            if (! hasClass(mytd) &&
                ! mytd.style.backgroundColor) {
        
              mytd.style.backgroundColor =
                even ? evenColor : oddColor;
            
            }
          }
        }
        // flip from odd to even, or vice-versa
        even =  ! even;
      }
    }
  }


////////////////////////////////////////////////////////////////////////
///////////////////////// Bild vergroessern an Ort und Stelle //////////
//// Gut, aber funktioniert nur im einspaltigen Layout
var AngezeigteBreite = 200;
var GespeicherteBreite = 0;

function BildAnpassen(Bild)
{
    if (Bild.width > AngezeigteBreite || GespeicherteBreite > AngezeigteBreite)
    {
        if (Bild.width == AngezeigteBreite)
        {
            Bild.width = GespeicherteBreite;
        }
        else
        {
            GespeicherteBreite = Bild.width;
            Bild.style.cursor = "pointer";
            Bild.width = AngezeigteBreite;
        }
    }
}
// Im HTML-Markup: <img onClick="BildAnpassen(this)" onLoad="BildAnpassen(this)" src="images/screens/capella_pa/Willkommen_gross.PNG" title="Zum Vergrößern/Verkleinern anklicken">  

//////////////////////////////////////////////////////////////////////////////////////
////////////////////////////// Kleine Bilder abwechselnd in ein groesseres ///////////////
// Bilder bekannt machen
var bild1 = new Image();
var bild2 = new Image();
var bild3 = new Image();
var bild4 = new Image();
var bild5 = new Image();
var bild6 = new Image();
var bild7 = new Image();
var bild8 = new Image();
var bild9 = new Image();
var bild10 = new Image();
var bild11 = new Image();
var bild12 = new Image();
var bild13 = new Image();
var bild14 = new Image();
var bild15 = new Image();
var bild16 = new Image();
var bild17 = new Image();
var bild18 = new Image();
var bild19 = new Image();
var bild20 = new Image();
var bild21 = new Image();
var bild22 = new Image();

// weitere hier eintragen

bild1.src = "images/screens/audite/teaser/audite_hoeren_bestimmen.png";
bild2.src = "images/screens/audite/teaser/audite_hoeren_spielen.png";
bild3.src = "images/screens/audite/teaser/audite_musikdiktat.png";
bild4.src = "images/screens/audite/teaser/audite_akkordfolgen_entwerfen.png";
bild5.src = "images/screens/audite/teaser/audite_akkordfolgen_bestimmen.png";
bild6.src = "images/screens/capriccio/teaser/capriccio_spuren.png";
bild7.src = "images/screens/capriccio/teaser/capriccio_tempo.png";
bild8.src = "images/screens/capriccio/teaser/capriccio_audiopool.png";
bild9.src = "images/screens/capriccio/teaser/capriccio_Eventeditor.png";
bild10.src = "images/screens/capriccio/teaser/capriccio_Klavierfenster.png";
bild11.src = "images/screens/capriccio/teaser/capriccio_mixer.png";
bild12.src = "images/test/cello_gross.png";
bild13.src = "images/test/sax_gross.png";
bild14.src = "images/test/Duo_gross.png";
bild15.src = "images/scores/Bach_Chaconne_Standard.png";
bild16.src = "images/scores/Chopin_dezent_rundlich.png";
bild17.src = "images/scores/Kirchenlied.png";
bild18.src = "images/scores/Jazzy.png";
bild19.src = "images/scores/Renaissance.png";
bild20.src = "images/scores/Tabulatur.png";
bild21.src = "images/scores/Frueherziehung.png";
bild22.src = "images/scores/Kartoffel_und_Gregorianik.png";



// weitere hier eintragen

function Zeigen(Bildname)
{
eval("document['picture'].src = " + Bildname + ".src");
}
//  End -->

///////////////////////////////// Bilder klein und gross (alte Funktion) ///////////////////////////////////////////////


function Bildwechsel(Bildnr,Bildobjekt)
    {
     window.document.images[Bildnr].src = Bildobjekt.src;
	}

function OpenLinkWindow(WinWidth,WinHeight,Link,WindowName)
		{
		window.open(Link,WindowName,'toolbar=0,width='+WinWidth+',height='+WinHeight+',location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,copyhistory=0');
	}
function OpenLinkWindowScroll(WinWidth,WinHeight,Link,WindowName)
		{
		window.open(Link,WindowName,'toolbar=0,width='+WinWidth+',height='+WinHeight+',location=0,directories=0,status=0,menubar=0,scrollbars=1,resizable=1,copyhistory=0');
	}


function bild(img_url, img_title, img_width, img_height)
{
  wnd = open("",
             "Bildanzeige",
             "width=" + (img_width + 32) + ",height=" + (img_height + 64) +
             ",toolbar=0,location=0,directories=0,status=0,menubar=0," +
             "scrollbars=0,resizable,dependent")

  var baseadr = location.href
  var lastsl  = location.href.lastIndexOf("\\")
  if(lastsl >= 0)
    baseadr = baseadr.substring(0, lastsl + 1)
  else
  {
    lastsl = location.href.lastIndexOf("/")
    if(lastsl >= 0)
      baseadr = baseadr.substring(0, lastsl + 1)
  }
  with(wnd.document)
  {
    open("text/html")
    writeln("<HTML>")
    writeln("<HEAD><TITLE>" + img_title + "</TITLE>")
    writeln("<BASE HREF=\"" + baseadr + "\"></HEAD>")
    writeln("<BODY BGCOLOR=#f5faff>")
    writeln("<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=4 WIDTH=\"100%\" HEIGHT=\"100%\">")
    writeln("<TR><TD ALIGN=CENTER VALIGN=MIDDLE><IMG SRC=\"" + img_url +
            "\" WIDTH=" + img_width +
            " HEIGHT=" + img_height +
            " HSPACE=0 VSPACE=0 ALT=\"" + img_title + "\"></TD></TR>")
    write("<TR><TD ALIGN=LEFT VALIGN=BOTTOM>")
    write("<A HREF=\"javascript:self.close()\">[Schlie&szlig;en]</A>")
    writeln("</STRONG></BIG></TD></TR>")
    writeln("</TABLE>")
    writeln("</BODY></HTML>")
    close()
  }
  wnd.focus()
}