//*******************************************************************************************
//        Basic JavaScript funtionality
//        author: alexander zenglein (extends implementation from antje/andreas)
// '#018b1a'
//*******************************************************************************************

//var subm_sel = '#015410';
var subm_sel = '#389e4a'; // '#047404';
var subm_unsel = '#389e4a'; // '#002c08';
var menu_sel = '#389e4a';  //'#299C39'; 379d49 389e4a
var menu_unsel = '#047404';


//  Je nach Browser muss die Header-Grafik in der Breite angepasst werden
var browser=navigator.appName;
if (browser=="Microsoft Internet Explorer")
{
    var header_grafik_width = '843'
}
else
{
    var header_grafik_width = '843'
};


var html_head = "<div id='header'><a href='../html/news.html' title='Zur Startseite'><img src='../grafik/headerbar.jpg' padding='0' width='"+header_grafik_width+"' height='80' border='0' /></a></div>";
        html_head += "<div class='spacer'><img src='../grafik/spacer.gif' /></div>";

//var html_footer = "<div id='footer'>Impressum</div>";

var        html_menue_start = "<div id='menu1_container'><ul id='menu1'>";
var        html_menue_end = "</ul></div>";

var html_spacer = "<div class='spacer'><img src='../grafik/spacer.gif' /></div>";


// Konfiguration der ID's, zur Einstellung der Höhe
//rel_id = new Array();
//rel_id[0] = 'content_container_left';
//rel_id[1] = 'content_container_right';
//rel_id[2] = 'content_container1';

// Variable zu Datumsfunktionen
var dtag,dmonat,djahr;

//=======================================================================================
//         Main processing
//        Diese Funktion wird von jeder Webseite zum Aufbau von Header/Menü aufgerufen
//=======================================================================================

function header_out() {
        document.write(html_head);
}

function menue_out() {
        document.write(html_head);
        document.write(html_menue_start);
        generate_menue("");
        document.write(html_menue_end);
       // document.write(html_spacer);
        generate_container('submenu_container', 'start');
        generate_submenue("");
        generate_dateinfo();
        generate_container('submenu_container', 'end');
        dynamic_select();
}

//-----------------------------------------------------------------------------------------------------
//        Menü mit aktiver Auswahl anzeigen, nachdem ein Link aktiviert wurde
//        Dazu wird die URL des Links in der Liste der Menü-Arrays gesucht
//        Besonderheit: Search-Parameter , d.h. Vorkommen eines '?'
//        z.b. "generic.html?class=saisonplan&object=vorrunde"
//        In diesem Fall wird die URL nur bis zum '?' abgeglichen.
//-----------------------------------------------------------------------------------------------------

function dynamic_select() {
        var url = document.URL;

        // Das array menue enthält das komplette Menü mit SubMenü-Array je Haupt-Menü-Punkt
        for (var i = 0; i < menue.length;i++) {
                //  Alle Links des Sub-Menüs zum Hauptmenü-Punkt
                var sublink = links[i];

                 // Prüfen, welcher Submenü-Link zur Url passt
                 // und aktiv gesetzt werden kann
                 // Gescannt wird ab dem 2.Element des submenü-arrays (der erste gehört zum Hauptmenü-Punkt)
                for (var j = 1; j < sublink.length;j++) {
                        // Prüfen, ob ein '&' existiert, z.b. "generic.html?class=sport&object=2008121301"
                         // Falls ja: nur bis zum '&' extrahieren und vergleichen
                         var subLinkUrl = sublink[j];
                          var ixOfChar = subLinkUrl.indexOf('&');
                          if(ixOfChar == -1)
                              {var compare = subLinkUrl;}
                         else
                             {var compare = subLinkUrl.substring(0,ixOfChar);}

                        if (sublink[j] != "#" && url.indexOf(compare) > -1) {
                                 menuStat(i,j);
                                return;
                        }
                }
        }

}

function generate_menue(pre) {
        for (var i = 0; i < menue.length;i++) {
            var link = pre+links[i][0];
            if (links[i][0] == "#") {
               link = "#";
            }
            document.write("<li id='li"+i+"' class='menu' onclick=\"menuStat('"+i+"','0')\" onmouseover=\"\"><a href='"+link+"'>"+menue[i][0]+"</a></li>");
        }

}

//-----------------------------------------------------------------------------------------------------
//        create sub-menu structure including menu items from array (see menue.js)
//-----------------------------------------------------------------------------------------------------

function generate_submenue(pre) {

        generate_container('submenu', 'start');
//        document.write("<div id='submenu'>");
        for (var i = 0; i < menue.length;i++) {
                document.write("<div id='div"+i+"' class='umenu'><ul id='untermenu'>");
                var sub = menue[i];
                var sublink = links[i];
             // links in den submenüs beginnen ab element 1
                for (var j = 1; j < sub.length;j++) {
                        var link = pre+sublink[j];
                        if (sublink[j] == "#") {
                                link = "#";
                        }
                        //alert("<li id='"+i+"_"+j+"' class='menu2'><a href='"+link+"'>"+sub[j]+"</a></li>");
                        document.write("<li id='"+i+"_"+j+"' class='menu2'><a href='"+link+"'>"+sub[j]+"</a></li>");
                }
                 document.write("</ul></div>");
        }
//                document.write("</div>");
        generate_container('submenu', 'end');
}


function showMenu(menu) {

        // 1. Hide all sub-menues
         for (var i = 0; i < menue.length;i++){
                document.getElementById('div'+i).style.display = 'none';
        }
        // 2. Show active menu
        document.getElementById('div'+menu).style.display = 'block';
}


//      Menüstatus setzen - angeklickte Elemente markieren

function menuStat(men1,men2){
        // 4,1 = Mannschaft 1 aus Men 4
        //~ alert(men1+","+men2);
        showMenu(men1);

        var um;

 //       for (var i = 0; i < menue.length;i++){
//                document.getElementById('li'+i).style.backgroundColor=menu_unsel;
   //             document.getElementById('li'+i).style.backgroundImage="url(../grafik/background_footer.jpg)";
   //     }

        var menElem = document.getElementById('li'+men1)
        if (menElem != null) {
//           menElem.style.backgroundImage="";
           menElem.style.backgroundColor=menu_sel;
//           menElem.style.textDecoration = "underline";
           menElem.style.borderLeft = "2px solid #ffffff";
           menElem.style.borderRight = "2px solid #ffffff";

        }

        //submenu sel.
        menElem = document.getElementById(men1+'_'+men2);

//         alert("men1: " + men1 + "\n"
//         +     "men2: " + men2 + "\n"
//         +     "um : " + um);


        if (menElem != null){
                menElem.style.backgroundColor = subm_sel;
                menElem.style.textDecoration = "underline";
                menElem.style.fontWeight = "bold";
        }

}

//-----------------------------------------------------------------------------------------------------
//        create date information in header section
//-----------------------------------------------------------------------------------------------------

function generate_dateinfo() {
         var currDate = new Date();

        var Wochentag = new Array("Sonntag", "Montag", "Dienstag", "Mittwoch",
                          "Donnerstag", "Freitag", "Samstag");

         day = currDate.getDay();
         date = currDate.getDate();
         month = currDate.getMonth() + 1;
         year = currDate.getYear();

        if(date<10) {
           dtag="0" + date;
          }
        else
            dtag = date;

         if(month<10) {
           dmonat="0" + month;
          }
        else
            dmonat=month;

        djahr =1900 + ((1900 + year) % 1900);

           //document.write("Zuletzt aktualisiert: " + dtag + "." + dmonat + "." + djahr);

            document.write("<div id='tagesinfo'><span id='heute'>Heute ist " + Wochentag[day] + ", der " + dtag + "." + dmonat + "." + djahr + "</span></div>");
}

//function changeColor(stil,elem) {
//
//        if (stil == 'in'){
//                elem.style.backgroundColor='#002c08';
//                }
//        else {
//                elem.style.backgroundColor='#016413';
//                }
//
//}

//-----------------------------------------------------------------------------------------------------
//        create a Content Separator (dotted line)
//        intBefore: extra blank lines before separator
//        intAfter: extra blank lines before separator
//        type : "1" -> default
//-----------------------------------------------------------------------------------------------------
function content_separator_out(type, intBefore, intAfter) {

         create_blank_line(intBefore);

         if (type == "2")
                     document.write("<div class='dots_horiz_grey'>&nbsp;</div>");
            else
                    document.write("<div class='dots_horiz'>&nbsp;</div>");

         create_blank_line(intAfter);

}

//-----------------------------------------------------------------------------------------------------
//        create footer for each page
//-----------------------------------------------------------------------------------------------------
function footer_out() {
        generate_container('footer', 'start');

         var heute = new Date();
         var jahr = parseInt(heute.getFullYear());

         document.write("<table width='100%' summary='Tabelle zeigt Informationen am Ende der Webseite'>");
         document.write("<tr>");
         document.write("<td>Copyright&nbsp;&copy;&nbsp;2007-" + jahr + "&nbsp;'KSC Bahnfrei Damm 1920 e.V.'</td>");
         document.write("<td align='right'><a href='../html/impressum.html'>Anbieter/Impressum</a></td>");
         document.write("</tr>");
         document.write("<table>");

        generate_container('footer', 'end');
}

//-----------------------------------------------------------------------------------------------------
//        create blank lines using br-tag
//-----------------------------------------------------------------------------------------------------
function create_blank_line(intQuantity) {

        if (intQuantity != null) {
           for (var i = 0; i < intQuantity;i++){
                document.write("<br />");
           }
         }
}

//-----------------------------------------------------------------------------------------------------
//        create div structure
//-----------------------------------------------------------------------------------------------------

function generate_container(id, tag) {
        if (tag == 'start') {
           document.write("<div id='" + id + "'>");
            }
         else {
           document.write("</div>");
         }
}

//-----------------------------------------------------------------------------------------------------
//       Sichtbarmachen eines DIVS
//-----------------------------------------------------------------------------------------------------
function showBlock(container, block) {

//        new Effect.SlideDown(document.getElementById(block), {duration: 0.7});

        var divBlock = document.getElementById(block);
        if (!divBlock)  alert("showBlock - Div: " + m_divId_ContainerContent + " existiert nicht");

        divBlock.style.display = "block";

        var divBlockSave = divBlock;

//        divBlock.style.border = "dotted";

        if (document.getElementById("video_click"))
            document.getElementById("video_click").firstChild.nodeValue = "Hier Klicken zum Schließen";
}

function hideBlock(container, layer) {

//         new Effect.SlideUp(document.getElementById(layer), {duration: 0.7});


         var divBlock = document.getElementById(layer);
         if (!divBlock)  alert("hideBlock - Div: " + m_divId_ContainerContent + " existiert nicht");

        divBlock.style.display = "none";


}

function showHideBlock(container, block) {

         //        new Effect.SlideDown(document.getElementById(block), {duration: 0.7});

         if (!divBlock) var divBlock = document.getElementById(block);

        if (!divBlock)  alert("showHideBlock - Div: " + m_divId_ContainerContent + " existiert nicht");

        if (divBlock.style.display != "block")
        {
            divBlock.style.display = "block";
          //var divBlockSave = divBlock;
            if (document.getElementById("video_click")){
                document.getElementById("video_click").firstChild.nodeValue = "Hier Klicken zum Schließen";
            }
        }
        else
        {
            divBlock.style.display = "none";
            if (document.getElementById("video_click")){
                document.getElementById("video_click").firstChild.nodeValue = "Hier Klicken zum Öffnen";
            }
        }
}


//-----------------------------------------------------------------------------------------------------
//
//-----------------------------------------------------------------------------------------------------
function switchLayerContent(target, source, old1, old2, old3) {

         //alert ("target=" + target + "\n" + " source=" + source + "\n" + " old1=" + old1 + "\n" + "old2=" + old2 + "\n" + " old3=" + old3);
         if (document.getElementById(source))
         {
            document.getElementById(target).innerHTML = document.getElementById(source).innerHTML;

            document.getElementById("lnk" + source).style.color = "#e4e4e4";
            document.getElementById("lnk" + source).style.backgroundColor = "#017413";

            document.getElementById("lnk" + old1).style.color = menu_unsel;
            document.getElementById("lnk" + old1).style.backgroundColor = "#ffffff";

            if (document.getElementById(old2))
            {
                document.getElementById("lnk" + old2).style.color = menu_unsel;
                document.getElementById("lnk" + old2).style.backgroundColor = "#ffffff";
            }

            if (document.getElementById(old3))
            {
                document.getElementById("lnk" + old3).style.color = menu_unsel;
                document.getElementById("lnk" + old3).style.backgroundColor = "#ffffff";
            }
         }
}


//-----------------------------------------------------------------------------------------------------
// Ermitteln eines CSS-Attribut-Wertes
//
// Existiert die Methode getComputedStyle, so kann der Style über diese Methode ermittelt werden.
// Bei modernen Browsern existiert diese Methode bereits seit längerem.
// Unterstützt wird die Methode z.B. von allen Mozilla-Abkömmlingen (Firefox und andere Geckos),
// Netscape ab Version 6, Opera ab 7.2 und Safari. Der IE kennt diese Methode bis Version 7
// allerdings noch nicht!
// HINWEIS für Height/Width:
// Der hierüber ermittelte Wert ist stets in Pixel angegeben!
// Ist bei den Zielgrößen size_x oder size_y ein anderes Maß gemeint, so führt dies dazu, dass
// dieser Wert als px-Angabe interpretiert wird! Der gewünschte Effekt wird dann nicht erreicht.
//-----------------------------------------------------------------------------------------------------
function getStyle(objId,propId) {

        var elemObj, style;

        elemObj = document.getElementById(objId);

        if (document.documentElement && document.defaultView) {//--> funktioniert nur nicht beim IE

            style = document.defaultView.getComputedStyle (elemObj, null);
            //alert("computed.style");

            return style.getPropertyValue (propId);

        }
        else if (document.documentElement.currentStyle) {//--> funktioniert nur für den IE
                if (propId == "height"){
                    return elemObj.currentStyle.height;
                    }
                else
                //alert("current.style");
                    return elemObj.currentStyle[propId];
        }
        else alert("Ihr Browser unterstützt diese W3C-Dom Methode nicht und auch keine IE-Technik");
}


//-----------------------------------------------------------------------------------------------------
// Seiten-/Containerhöhen anpassen
//-----------------------------------------------------------------------------------------------------
function adaptHeight(elem1Id,elem2Id) {

       var a = getStyle(elem1Id,'height');
       //alert(elem1Id + ': ' + a);
       var b = getStyle(elem2Id,'height');
       //alert(elem2Id + ': ' + b);
       // extrahieren Einheit 'px' des Parameters, z.b. aus "100px" wird "100" ermittelt
       if(a.indexOf('px') != -1){a = a.substring(0,a.indexOf('px'))};
       if(b.indexOf('px') != -1){b = b.substring(0,b.indexOf('px'))};

       if(Number(b) > Number(a))
          var h = b
       else
          var h = a ;

       if(Number(h) < 650) { h = 650 };

       document.getElementById(elem1Id).style.height = h + 'px';
       //alert('Höhe ' + container1 + ': ' + h);
       document.getElementById(elem2Id).style.height = h + 'px';
}

function syncHeight(elemId, refHeight){

       var c =  parseFloat(getStyle(elemId,"height"));
       var elemObj = document.getElementById(elemId);
       if (refHeight > c){
          elemObj.style.height = refHeight + 'px';
          //alert("syncHeight: Height gesetzt! >> "+ elemId + "' >> Ist: " + c + " Soll: " + refHeight );
          c = refHeight;
       }
       return c;
}
