ModX RandomImage Problem and Wayfinder Problem

.active a {
  color: #B7274C;
}

<?php
// get images from bg image directory
if ($handle = opendir('./assets/templates/mypage.tld/assets/img/bg')) {
    $i = 1;
    while (false !== ($file = readdir($handle))) {
        if (substr($file, 0, 1) != ".") {
         $images[$i] = $file;
         $i++;  
        }       
    }
    closedir($handle);
} 

//return a random filename
$randomimage = rand(1, count($images));
return $images[$randomimage];
?>

#picture {
  width: 480px;
 background: url(./assets/templates/mypage.tld/assets/img/bg/[!RandomImage!]) no-repeat;
}

.active li a {
  color: blue;
}

<style type="text/css">
#picture {
    width: 480px;
    background: url(assets/templates/mypage.tld/assets/img/bg/[!RandomImage!]) center no-repeat;
}
</style>

.active li a:hover { 
    color: green; 
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta name="description" content="[*description*]" />
<meta name="robots" content="index, follow" />
<meta name="revisit-after" content="14 days" />
<meta name="identifier-url" content="[(site_url)]" />
<meta name="content-language" content="de" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<base href="[(site_url)]" />
<title> [*pagetitle*] | [(site_name)]</title>
<link rel="stylesheet" type="text/css" href="[(base_url)]assets/templates/domain.tld/assets/style/default.css"
<style type="text/css">
#picture {
    width: 480px;
    background: url(assets/images/bg/[!RandomImage!]) center no-repeat;
}
</style>
</head>

<body>

  <div id="wrapper">
    <div id="header">
      <div id="info"></div>
    <div id="picture"></div>
      <div id="logo"></div>
    </div>
    
    <div id="mid">
      <div id="sidebar">
[[Wayfinder?startId=`0` &level=`2 &hideSubMenus=`TRUE`]]
</div>
        <div id="content">
         [*content*]
       </div>  
    </div>
    
  </div>
    <div id="footer">
      <div id="footerleft"></div>
      <div id="footerright">
        © 2011 
        <a href="[~7~]"> Impressum</a> <a>  | </a>
        <a href="[~8~]"> Kontakt </a>
      </div>
    </div>
  <div id="shadowbottom"></div>
</body>
</html>

body,* {
  margin:0;
  padding:0;
  font-family:"Arial","Sans-Serif";
  color:#333333;
}

body {
  background: #fff;
}

h1, h2 {
  margin-top: 10px;
  margin-bottom: 20px;
  font-weight: normal;
}

h1 {
  font-size: 200%;
}

h2 {
  font-size: 150%;
}

h3 {
  font-size: 100%;
  margin-bottom: 10px;
}

a {
  outline: none;
  text-decoration: none;
}

p {
  margin-bottom: 20px;
  line-height: 1.8em;
}

a:hover {
  color: #B7274C;
  margin-left: 3px;
}

.active a {
  color: #B7274C;
}

.active li a {
  color: #333;
}


.active li a:hover {
  color: #B7274C;
}

#shadow {
  background: url(../img/shadow_bottom.jpg) repeat-x;
}

#wrapper {
  height: 100%;
  width: 995px;
  margin: 0px auto 0px auto;
  padding: 0px 19px 0px 13px;
  background: url(../img/shadow.jpg)  repeat-y;
}

#header {
  position: relative;
  height: 170px;
}

#header div {
  height: 170px;
  float: left;
}

#info {
  width: 185px;
  background: url(../img/info.png) no-repeat;
}

/* -------------------------------------------------------------------------------------------------------------------
Normales Headerbild, jetz mit Snippet "RandomImage" direkt im Template eingebunden.
----------------------------------------------------------------------------------------------------------------------
#picture {
  width: 480px;
 background: url(../img/pic_head.jpg) no-repeat;
} */

#logo {
  width: 330px;
  background: url(../img/logo.jpg) no-repeat;
}

#mid {		
  position: relative;
  overflow: hidden;
  background: url(../img/kontur.png) no-repeat right bottom #B6B6B6;
}

#sidebar {
  padding: 25px 0px 25px 15px;
  width: 170px;
  background-color: transparent;
  float: left;
}

#sidebar ul {
  list-style: none;
  position: relative;
  font-size: 18px;
  width: inherit;
}

#sidebar ul li {
  margin-bottom: 10px;
}

#sidebar ul li ul {
  margin-top: 5px;
  margin-left: 5px;
  left: 10px;
  font-size: 15px;
}

#content {
  padding: 25px 45px 50px 25px;
  float: left;
  min-height: 500px;
  width: 740px;
  font-size: 15px;
  background: url(../img/kontur.png) no-repeat right bottom #CCC;
}

#footer {
  position: relative;
  height: 30px;
  width: 995px;
  margin: 0 auto;
  padding: 0 19px 0 13px;
  top: -15px;
}

#footer div {
  height: 20px;
}

#footerleft {
  float: left;
  width: 175px;
  background-color: #B7274C;
  padding: 5px;
}

#footerright {
  float: left;
  width: 770px;
  background-color: #666;
  color: #fff;
  font-size: 12px;
  padding: 8px 15px 2px 25px;
}

#footerright a {
  color: #fff;
  float: right;
  padding-left: 20px;
}

#footerright a:hover {
color: #B7274C;
}

#shadowbottom {
  background: url(../img/shadow_bottom.jpg) no-repeat;
  margin: 0 auto;
  height: 34px;
  width: 995px;
  top: -30px;
  padding: 0px 19px 0px 13px;
  z-index: -1;
  position: relative;
}

[[Wayfinder?startId=`0` &level=`2 &hereClass=`selected` &selfClass=`else` &hideSubMenus=`TRUE` ]]

.else a{
  color: #B7274C;
}

.else li a {
color:#333;
}

[[Wayfinder?startId=`0` &level=`2 &hereClass=`selected` &selfClass=`else` &hideSubMenus=`TRUE` ]]

.selected.else a{
  color: #B7274C;
}

.selected.else li a{
  color: #333;
}

.selected a {
color: #B7274C;
}

.selected li a {
  color: #333;
}