<?php
if(!isset($relativepath)) {
	header('Location: ../index.php');
}
?>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     class="tuyau" id="parent"
     viewBox="0 0 44 78">

    <!-- espace de définition -->
    <defs>
        <linearGradient id="grad1" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="44" y2="0">
            <stop  offset="0" style="stop-color:#03A663"/>
            <stop  offset="0.2204" style="stop-color:#03A160"/>
            <stop  offset="0.4959" style="stop-color:#029157"/>
            <stop  offset="0.7995" style="stop-color:#017848"/>
            <stop  offset="1" style="stop-color:#00633C"/>
        </linearGradient>

        <linearGradient id="grad2" gradientUnits="userSpaceOnUse" x1="5" y1="14" x2="39" y2="14">
            <stop  offset="0" style="stop-color:#03A663"/>
            <stop  offset="0.2204" style="stop-color:#03A160"/>
            <stop  offset="0.4959" style="stop-color:#029157"/>
            <stop  offset="0.7995" style="stop-color:#017848"/>
            <stop  offset="1" style="stop-color:#00633C"/>
        </linearGradient>
    </defs>

    <style type="text/css">
        .st9{fill:#00A15D;}
        .st10{fill:#00A25D;}
        .st11{fill:url(#grad1);}
        .st12{fill:url(#grad2);}
        .st13{fill:#FFFFFF;}
        .st14{opacity:0.66;fill:#FFFFFF;}
        .st15{opacity:0.3;}
    </style>


    <!-- Ouverture : Fond -->
    <rect  x="0" y="0" class="st9" width="44" height="14"/>

    <!-- Cylindre : Fond -->
    <rect x="5" y="14" class="st10" width="34" height="50"/>

    <!-- Ouverture : Dégradé -->
    <rect x="0" y="0" class="st11" width="38" height="14"/>

    <!-- Cylindre : Dégradé -->
    <rect x="5" y="14" class="st12" width="28" height="50"/>

    <!-- Ouverture : Reflet Fort -->
    <rect x="9" y="0" class="st13" width="5.5" height="14"/>

    <!-- Ouverture : Reflet Faible -->
    <rect x="7.5" y="0" class="st14" width="1.5" height="14"/>

    <!-- Cylindre : Reflet Fort -->
    <rect x="12.5" y="14" class="st13" width="5.5" height="48.11"/>

    <!-- Cylindre : Reflet Faible -->
    <rect x="11" y="14" class="st14" width="1.5" height="48.11"/>

    <!-- Ouverture : Ombre projetée -->
    <rect  x="5" y="14" class="st15" width="34" height="1.35"/>

    <!-- Tuyau : Ombre -->
    <rect x="5" y="42" class="st15" width="34" height="1.35"/>

</svg>

<!-- The actual menu -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     class="menu" id="parent"
     viewBox="0 0 512 34.85">

    <!-- Might put them somewhere else later -->
    <style type="text/css">
        .st0{fill:#AA572E;}
        .st1{fill:#C06538;}
        .st2{fill:#2B0A00;}
        .st3{fill:#914522;}
        .st4{fill:#9B4D25;}
        .st5{fill:#A04E26;}
        .st6{fill:#491A05;}
        .st7{fill:#3F1403;}
        .st8{fill:#BA6135;}
        .st16{fill:#392313;}
        .st17{fill:#492715;}
    </style>
    <style type="text/css">

        .menu-link text {
            fill: white;
            text-anchor: middle;
            alignment-baseline: central;
            dominant-baseline: central;
            font-size: 8px;
        }

    </style>

    <!-- This svg create an image of a brick and cache it for further <use>s-->
    <symbol id="Brick" viewBox="0 0 47 17">
        <rect x="1" y="1" class="st0" width="45" height="15"/>

        <rect x="1.5" y="0" class="st1" width="44" height="1.5"/> <!-- Top side -->
        <rect x="1.5" y="15.5" class="st2" width="44" height="1.5"/> <!-- Bottom side -->
        <rect x="45.5" y="1.5" class="st3" width="1.5" height="14"/> <!-- Right side -->
        <rect x="0" y="1.5" class="st4" width="1.5" height="14"/> <!-- Left side -->

        <polygon class="st5" points="47,1.5 45.5,1.5 45.5,0"/> <!-- TR corner -->
        <polygon class="st6" points="45.5,17 47,15.5 45.5,15.5"/> <!-- BR corner -->
        <polygon class="st7" points="0,15.5 1.5,15.5 1.5,17"/> <!-- BL corner -->
        <polygon class="st8" points="0,1.5 1.5,1.5 1.5,0"/> <!-- TL corner -->
    </symbol>


    <!-- Fond -->
    <rect x="0" y="2.85" class="st16" width="512" height="32"/>

    <!-- Fond : Surface -->
    <rect x="0" y="2.85" class="st17" width="512" height="1.5"/>




    <!-- Top layer (LtR) -->
    <?php
    $co_y_0 = [0, 48.85, 97.7, 146.55, 195.4, 244.25, 293.1, 341.95, 390.8, 439.65, 488.5];
    $texte_y_0 = ["Accueil", "Planning", "Plan", "Blouse", "Parrainage", "Homework", "Chansons", "Pkpeach", "Boomario", "Les stats", ""];
    $lien_y_0 = ["index.php", "planning.php", "map.php", "blouse.php", "parrainage.php", "vacances.php", "chansons.php", "team.php?team=pkpeach", "team.php?team=boomario", "stats.php", ""];
    for($i = 0; $i <= 10; $i++) {
        echo
        '<a href="'.$lien_y_0[$i].'" class="menu-link">
            <use xlink:href="#Brick" width="47" height="17" x="'.$co_y_0[$i].'" y="0"/>
            <svg id="btn10" width="47" height="17" x="'.$co_y_0[$i].'" y="0">
                <text x="50%" y="50%">
                    '.$texte_y_0[$i].'
                </text>
            </svg>
        </a>';
    }
    $co_y_1 = [-23.5, 25.35,74.2, 123.05, 171.9, 220.75, 269.6, 318.45, 367.3, 416.15, 465];
    $texte_y_1 = ["", "Photos","Lydia/Izly", "Les clubs", "Prévention", "Com'ville", "", "", "Download", "Les com's", "Infos"];
    $lien_y_1 = ["", "photos.php","lydia.php", "clubs.php", "prevs.php", "map_com_ville.php", "", "", "downloads.php", "coms.php", "info.php"];
    for($i = 0; $i <= 10; $i++) {
        echo
        '<a href="'.$lien_y_1[$i].'" class="menu-link">
            <use xlink:href="#Brick" width="47" height="17" x="'.$co_y_1[$i].'" y="17.85"/>
            <svg id="btn10" width="47" height="17" x="'.$co_y_1[$i].'" y="17.85">
                <text x="50%" y="50%">
                    '.$texte_y_1[$i].'
                </text>
            </svg>
        </a>';
    }
    ?>


    <!--use xlink:href="#Brick" width="47" height="17" x="48.85" y="0"/-->
    <!--<a href="index.php" class="menu-link">
        <use xlink:href="#Brick" width="47" height="17" x="48.85" y="0"/>
        <svg id="btn10" width="47" height="17" x="48.85" y="0">
            <text x="50%" y="50%">
                Acceuil
            </text>
        </svg>
    </a>


    <use xlink:href="#Brick" width="47" height="17" x="97.7" y="0"/>

    <use xlink:href="#Brick" width="47" height="17" x="146.55" y="0"/>

    <use xlink:href="#Brick" width="47" height="17" x="195.4" y="0"/>

    <use xlink:href="#Brick" width="47" height="17" x="244.25" y="0"/>

    <use xlink:href="#Brick" width="47" height="17" x="293.1" y="0"/>

    <use xlink:href="#Brick" width="47" height="17" x="341.95" y="0"/>

    <use xlink:href="#Brick" width="47" height="17" x="390.8" y="0"/>

    <use xlink:href="#Brick" width="47" height="17" x="439.65" y="0"/>

    <use xlink:href="#Brick" width="47" height="17" x="488.5" y="0"/>-->


    <!-- Bottom Layer (LtR) --> 
    <!--<use xlink:href="#Brick" width="47" height="17" x="-23.5" y="17.85"/>

    <use xlink:href="#Brick" width="47" height="17" x="25.35" y="17.85"/>

    <use xlink:href="#Brick" width="47" height="17" x="74.2" y="17.85"/>

    <use xlink:href="#Brick" width="47" height="17" x="123.05" y="17.85"/>

    <use xlink:href="#Brick" width="47" height="17" x="171.9" y="17.85"/>

    <use xlink:href="#Brick" width="47" height="17" x="220.75" y="17.85"/>

    <use xlink:href="#Brick" width="47" height="17" x="269.6" y="17.85"/>

    <use xlink:href="#Brick" width="47" height="17" x="318.45" y="17.85"/>

    <use xlink:href="#Brick" width="47" height="17" x="367.3" y="17.85"/>

    <use xlink:href="#Brick" width="47" height="17" x="416.15" y="17.85"/>

    <use xlink:href="#Brick" width="47" height="17" x="465" y="17.85"/>-->

</svg>

