X-mas calendar (need help configurate)

[MrH2o]

Hello!

I have a X-mas calendar on my page but I want to make some small changes.

Today it works like the current date and the date before it are using the same CSS styles, the days after however has it own style so you know that this "doors" isn't open.

I would like to be enable to set diffrent styles on all 3 (current date, future dates and past dates) but I have no idea how to.

Here's the php code



xmascalendar.php

<?php
// Variables
$pictureFolder='ups';
$month=12;
$clickableClass='done';
$calendarID='calendar';
$pictureID='pic';

$banana = "yes";

$d=preg_replace('/^0/','',date('d'));
$selectedImage=$_GET['i'];

if ($selectedImage > $d) {
$selectedImage=25;
}

//$img=preg_match('/\d/',$selectedImage)?$selectedImage:'none';
if(date('m')!=$month){$img=25;}
if(date('m')!=$month){$d=-1;}


$cal='<ul id="'.$calendarID.'">';
for($i=1;$i<25;$i++)
{
$cal.= '<li>';
$cal.= '<a '.($i<=$d?'class="'.$clickableClass.'"':'').'id="l'.$i.'" href="index.php?i='.($i<=$d?$i:25).'">';
$cal.= '</a></li>';

}
$cal.='</ul>';
$pic='<div id="'.$pictureID.'"><a href="index.php"><img src="'.$pictureFolder.'/'.$img.'.jpg" alt="Dagens vara" title="Dagens vara" '.$img.'" /></a></div>';
//echo $selectedImage==''?$cal:$pic;

if ($selectedImage !== null) {

if ($selectedImage > 0 && $selectedImage < 27) {

include("boxes/".$selectedImage.".php");
}

}


else
{
echo $cal;
}
?>

show.php


<?php
$pictureFolder='ups';
$month=12;
$d=preg_replace('/^0/','',date('d'));
$i=preg_match('/\d/',$_GET['i'])?$_GET['i']:'';
$i=$i<=$d?$i:25;
$imgurl=$pictureFolder.'/'.$i.'.jpg';
?>
and styles.css (made it abit shorter)


#calendar{
background:url(background.gif) top left no-repeat #000;
width:560px;
height:700px;
margin:auto;
list-style:none;
position:relative;
}
#pic{
background:url(washout.jpg) top left no-repeat #000;
width:560px;
height:700px;
margin:auto;
list-style:none;
position:relative;
}
#pic a img{
display:block;
margin:0 auto;
border:2px solid #000;
}
#calendar li{
list-style:none;
}
#calendar li a{
border:1px dotted #000;
display:block;
width:72px;
height: 64px;
color:#fff;
position:absolute;
background: url(open.gif);
}
#calendar li a.done{

border:0px solid;
background:#AE2929;
filter:alpha(opacity=70); -moz-opacity: 0.7; opacity:
0.7; -khtml-opacity: 0.7;
}

#calendar li a:hover{
border: 1px solid #000;
background: #fff;
filter:alpha(opacity=40); -moz-opacity: 0.4; opacity:
0.4; -khtml-opacity: 0.4;
}

#lucka
{
position:absolute;
top:77px;
left:5px;
float:left;
}

.dag
{
position:absolute;
top:109px;
left:143px;
border: 1px;
}

.text
{
position:absolute;
width: 560px;
text-align:center;
height: 60px;
top:409px;
}


/* =daylinks */

#l1{
left:427px;
top:373px;
}
#l2{
left:77px;
top:68px;
}
I would be really helpful if someone could help my out, since my PHP knowledge are very limited. Thanks in advance

/H2o