var layarr = new Array();
function getHintText( sender, id ) {
  var str = "<div class=\"arrow\"></div>";
  switch( sender ) {
  case "simple1":
    switch( id ) {
    case "header":  str += "<b>#header</b> {<br/>&nbsp;width: 100%;<br/>&nbsp;height: 70px;<br/>}"; break;
    case "subheader": str += "<b>#subheader</b> {<br/>&nbsp;<b>float: right;</b><br/>&nbsp;width: 610px;<br/>&nbsp;height: auto !important;<br/>&nbsp;height: 70px; <span class=\"green\">/* IE */</span><br/>&nbsp;min-height: 70px;<br/>&nbsp;display: inline;<br/>}"; break;
    case "left":    str += "<b>#left</b> {<br/>&nbsp;<b>float: left;</b><br/>&nbsp;width: 160px;<br/>&nbsp;height: auto !important;<br/>&nbsp;height: 370px; <span class=\"green\">/* IE */</span><br/>&nbsp;min-height: 370px;<br/>&nbsp;display: inline;<br/>}"; break;
    case "middle":  str += "<b>#middle</b> {<br/>&nbsp;<b>float: left;</b><br/>&nbsp;width: 450px;<br/>&nbsp;height: auto !important;<br/>&nbsp;height: 350px; <span class=\"green\">/* IE */</span><br/>&nbsp;min-height: 350px;<br/>&nbsp;display: inline;<br/>}"; break;
    case "right":   str += "<b>#right</b> {<br/>&nbsp;<b>float: right;</b><br/>&nbsp;width: 160px;<br/>&nbsp;height: auto !important;<br/>&nbsp;height: 300px; <span class=\"green\">/* IE */</span><br/>&nbsp;min-height: 300px;<br/>&nbsp;display: inline;<br/>}"; break;
    case "footer":  str += "<b>#footer</b> {<br/>&nbsp;<b>clear: both;</b><br/>&nbsp;width: 100%;<br/>&nbsp;height: 60px;<br/>}"; break;
    case "menu":    str += "<b>#menu</b> {<br/>&nbsp;top: 40px;<br/>&nbsp;right: 0px;<br/>&nbsp;width: 610px;<br/>&nbsp;height: 30px;<br/>&nbsp;<b>position: absolute;</b><br/>}"; break;
    case "submenu": str += "<b>#submenu</b> {<br/>&nbsp;top: 90px;<br/>&nbsp;left: 10px;<br/>&nbsp;width: 140px;<br/>&nbsp;height: 170px;<br/>&nbsp;<b>position: absolute;</b><br/>}"; break;
    default      :  str = "";
    } break;
  case "simple2":
    switch( id ) {
    case "header":  str += "<b>#header</b> {<br/>&nbsp;width: 100%;<br/>&nbsp;height: 70px;<br/>}"; break;
    case "subheader": str += "<b>#subheader</b> {<br/>&nbsp;<b>float: left;</b><br/>&nbsp;width: 610px;<br/>&nbsp;height: auto !important;<br/>&nbsp;height: 70px; <span class=\"green\">/* IE */</span><br/>&nbsp;min-height: 70px;<br/>&nbsp;display: inline;<br/>}"; break;
    case "left":    str += "<b>#left</b> {<br/>&nbsp;<b>float: right;</b><br/>&nbsp;width: 160px;<br/>&nbsp;height: auto !important;<br/>&nbsp;height: 370px; <span class=\"green\">/* IE */</span><br/>&nbsp;min-height: 370px;<br/>&nbsp;display: inline;<br/>}"; break;
    case "middle":  str += "<b>#middle</b> {<br/>&nbsp;<b>float: right;</b><br/>&nbsp;width: 450px;<br/>&nbsp;height: auto !important;<br/>&nbsp;height: 350px; <span class=\"green\">/* IE */</span><br/>&nbsp;min-height: 350px;<br/>&nbsp;display: inline;<br/>}"; break;
    case "right":   str += "<b>#right</b> {<br/>&nbsp;<b>float: left;</b><br/>&nbsp;width: 160px;<br/>&nbsp;height: auto !important;<br/>&nbsp;height: 300px; <span class=\"green\">/* IE */</span><br/>&nbsp;min-height: 300px;<br/>&nbsp;display: inline;<br/>}"; break;
    case "footer":  str += "<b>#footer</b> {<br/>&nbsp;<b>clear: both;</b><br/>&nbsp;width: 100%;<br/>&nbsp;height: 60px;<br/>}"; break;
    case "menu":    str += "<b>#menu</b> {<br/>&nbsp;top: 40px;<br/>&nbsp;left: 0px;<br/>&nbsp;width: 610px;<br/>&nbsp;height: 30px;<br/>&nbsp;<b>position: absolute;</b><br/>}"; break;
    case "submenu": str += "<b>#submenu</b> {<br/>&nbsp;top: 90px;<br/>&nbsp;right: 10px;<br/>&nbsp;width: 140px;<br/>&nbsp;height: 170px;<br/>&nbsp;<b>position: absolute;</b><br/>}"; break;
    default      :  str = "";
    } break;
  case "simple3":
    switch( id ) {
    case "header":  str += "<b>#header</b> {<br/>&nbsp;width: 100%;<br/>&nbsp;height: 70px;<br/>}"; break;
    case "subheader":  str += "<b>#subheader</b> {<br/>&nbsp;<b>float: left;</b><br/>&nbsp;width: 160px;<br/>&nbsp;height: auto !important;<br/>&nbsp;height: 250px; <span class=\"green\">/* IE */</span><br/>&nbsp;min-height: 250px;<br/>&nbsp;display: inline;<br/>}"; break;
    case "left":    str += "<b>#left</b> {<br/>&nbsp;<b>float: right;</b><br/>&nbsp;width: 160px;<br/>&nbsp;height: auto !important;<br/>&nbsp;height: 370px; <span class=\"green\">/* IE */</span><br/>&nbsp;min-height: 370px;<br/>&nbsp;display: inline;<br/>}"; break;
    case "middle":  str += "<b>#middle</b> {<br/>&nbsp;<b>float: right;</b><br/>&nbsp;width: 450px;<br/>&nbsp;height: auto !important;<br/>&nbsp;height: 390px; <span class=\"green\">/* IE */</span><br/>&nbsp;min-height: 390px;<br/>&nbsp;<b>margin-top: 30px;</b><br/>&nbsp;display: inline;<br/>}"; break;
    case "right":   str += "<b>#right</b> {<br/>&nbsp;<b>float: left;</b><br/>&nbsp;width: 160px;<br/>&nbsp;height: auto !important;<br/>&nbsp;height: 130px; <span class=\"green\">/* IE */</span><br/>&nbsp;min-height: 130px;<br/>&nbsp;display: inline;<br/>}"; break;
    case "footer":  str += "<b>#footer</b> {<br/>&nbsp;<b>clear: both;</b><br/>&nbsp;width: 100%;<br/>&nbsp;height: 60px;<br/>}"; break;
    case "menu":    str += "<b>#menu</b> {<br/>&nbsp;top: 0px;<br/>&nbsp;right: 0px;<br/>&nbsp;width: 400px;<br/>&nbsp;height: 30px;<br/>&nbsp;<b>position: absolute;</b><br/>}"; break;
    case "submenu": str += "<b>#submenu</b> {<br/>&nbsp;top: 70px;<br/>&nbsp;right: 160px;<br/>&nbsp;width: 450px;<br/>&nbsp;height: 30px;<br/>&nbsp;<b>position: absolute;</b><br/>}"; break;
    default      :  str = "";
    } break;
  case "simple4":
    switch( id ) {
    case "header":  str += "<b>#header</b> {<br/>&nbsp;width: 160px;<br/>&nbsp;height: 150px;<br/>}"; break;
    case "subheader":  str += "<b>#subheader</b> {<br/>&nbsp;<b>float: right;</b><br/>&nbsp;width: 450px;<br/>&nbsp;height: 150px;<br/>&nbsp;<b>margin-top: -150px;</b><br/>&nbsp;display: inline;<br/>}"; break;
    case "left":    str += "<b>#left</b> {<br/>&nbsp;<b>clear: both;</b><br/>&nbsp;<b>float: left;</b><br/>&nbsp;width: 160px;<br/>&nbsp;height: auto !important;<br/>&nbsp;height: 300px; <span class=\"green\">/* IE */</span><br/>&nbsp;min-height: 300px;<br/>&nbsp;display: inline;<br/>}"; break;
    case "middle":  str += "<b>#middle</b> {<br/>&nbsp;<b>float: left;</b><br/>&nbsp;width: 610px;<br/>&nbsp;height: auto !important;<br/>&nbsp;height: 340px; <span class=\"green\">/* IE */</span><br/>&nbsp;min-height: 340px;<br/>&nbsp;display: inline;<br/>}"; break;
    case "right":   str += "<b>#right</b> {<br/>&nbsp;display: none;<br/>}"; break;
    case "footer":  str += "<b>#footer</b> {<br/>&nbsp;<b>clear: both;</b><br/>&nbsp;width: 100%;<br/>&nbsp;height: 60px;<br/>}"; break;
    case "menu":    str += "<b>#menu</b> {<br/>&nbsp;top: 0px;<br/>&nbsp;left: 160px;<br/>&nbsp;width: 160px;<br/>&nbsp;height: 150px;<br/>&nbsp;<b>position: absolute;</b><br/>}"; break;
    case "submenu": str += "<b>#submenu</b> {<br/>&nbsp;top: 170px;<br/>&nbsp;left: 10px;<br/>&nbsp;width: 140px;<br/>&nbsp;height: 170px;<br/>&nbsp;<b>position: absolute;</b><br/>}"; break;
    default      :  str = "";
    } break;
  case "simple5":
    switch( id ) {
    case "header":  str += "<b>#header</b> {<br/>&nbsp;<b>margin-top: -160px;</b><br/>&nbsp;margin-left: 160px;<br/>&nbsp;width: 610px;<br/>&nbsp;height: 160px;<br/>}"; break;
    case "subheader": str += "<b>#subheader</b> {<br/>&nbsp;<b>float: right;</b><br/>&nbsp;width: 610px;<br/>&nbsp;height: 50px;<br/>&nbsp;display: inline;<br/>}"; break;
    case "left":    str += "<b>#left</b> {<br/>&nbsp;<b>clear: left;</b><br/>&nbsp;<b>float: left;</b><br/>&nbsp;width: 160px;<br/>&nbsp;height: auto !important;<br/>&nbsp;height: 300px; <span class=\"green\">/* IE */</span><br/>&nbsp;min-height: 300px;<br/>&nbsp;display: inline;<br/>}"; break;
    case "middle":  str += "<b>#middle</b> {<br/>&nbsp;<b>float: left;</b><br/>&nbsp;width: 450px;<br/>&nbsp;height: auto !important;<br/>&nbsp;height: 280px; <span class=\"green\">/* IE */</span><br/>&nbsp;min-height: 280px;<br/>&nbsp;display: inline;<br/>}"; break;
    case "right":   str += "<b>#right</b> {<br/>&nbsp;<b>float: right;</b><br/>&nbsp;width: 160px;<br/>&nbsp;height: auto !important;<br/>&nbsp;height: 250px; <span class=\"green\">/* IE */</span><br/>&nbsp;min-height: 250px;<br/>&nbsp;display: inline;<br/>}"; break;
    case "footer":  str += "<b>#footer</b> {<br/>&nbsp;<b>clear: both;</b><br/>&nbsp;width: 100%;<br/>&nbsp;height: 60px;<br/>}"; break;
    case "menu":    str += "<b>#menu</b> {<br/>&nbsp;<b>float: left;</b><br/>&nbsp;width: 160px;<br/>&nbsp;height: 120px;<br/>&nbsp;display: inline;<br/>}"; break;
    case "submenu": str += "<b>#submenu</b> {<br/>&nbsp;<b>clear: both;</b><br/>&nbsp;top: 0px;<br/>&nbsp;left: 0;<br/>&nbsp;width: 100%;<br/>&nbsp;height: 40px;<br/>&nbsp;<b>position: relative;</b><br/>}"; break;
    default      :  str = "";
    } break;
  }
  return str;
}

activateLayout = function( lay ) {
  if ( document.getElementById( lay ) ) {
    var layroot = document.getElementById( lay )
    var arr = new Array("DIV");
    for (k=0; k<arr.length; k++) {
      var lis=layroot.getElementsByTagName( arr[k] );
      for (i=0; i<lis.length; i++) {
        lis[i].onmouseover = function() {
          if (this.className == "container") return;
          if ( document.getElementById("hint") ) {
            var hint = document.getElementById("hint");
            if (!op) {
              hint.style.top = this.parentNode.offsetTop + this.offsetTop - 15 + "px";
            } else {
              hint.style.top = ((this.offsetTop < 300)? this.parentNode.offsetTop + this.offsetTop - 16: this.offsetTop + 265 ) + "px";
            }
            hint.innerHTML = getHintText( this.parentNode.parentNode.id, this.className );
            if ((this.className != "") && (hint.innerHTML != "")) hint.style.display = "block";
          }
        }
        lis[i].onmouseout = function() {
          if ( document.getElementById("hint") ) {
            var hint = document.getElementById("hint");
            hint.style.display = "none";
          }
        }
      }
    }  
  }
} 

var oldonload = window.onload;
window.onload = function() {
  if (oldonload != null) oldonload();
  activateLayout('simple1'); 
  activateLayout('simple2'); 
  activateLayout('simple3'); 
  activateLayout('simple4'); 
  activateLayout('simple5'); 
}
