Image transition and timer

Hi guys!

I have been working on image transition effects with javascript, especially opacity.
What I have is the following...

1 html file called test.html.
1 javascript file called blendtrans.js

Basically, on the test.html page, I have the following......

A blank page on load with a "Show/Hide" title.

When I click on the show/hide, it fades in an image into the page.
When I click on the show/hide a second time, it fades out the image.

What Id like to do, is the following.
a) On page load, nothing is displayed for 2 seconds.
b) After 2 seconds, the image automatically fades into the page and is viewable.
c) After 15 seconds, the image automatically fades out of the page.
d) Another 2 seconds, and the process repeats from step b).

Here is the code for both the html and javascript. Thank you.

============================================================== html
<style>
</style>
<script type="text/javascript" src="blendtrans.js"></script>
<img src="test.jpg" style="width: 936px; height: 267px; border: 0 none; filter: alpha(opacity=0); -moz-opacity: 0; opacity: 0;" id="blendimage" alt="" />
<a href="javascript:shiftOpacity('blendimage', 1000)">show/hide</a>

=========================================================== blendtrans.js
function opacity(id, opacStart, opacEnd, millisec) {
      //speed for each frame
      var speed = Math.round(millisec / 100);
      var timer = 0;

      //determine the direction for the blending, if start and end are the same nothing happens
      if(opacStart > opacEnd) {
            for(i = opacStart; i >= opacEnd; i--) {
                  setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
                  timer++;
            }
      } else if(opacStart < opacEnd) {
            for(i = opacStart; i <= opacEnd; i++)
                  {
                  setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
                  timer++;
            }
      }
}

//change the opacity for different browsers
function changeOpac(opacity, id) {
      var object = document.getElementById(id).style;
      object.opacity = (opacity / 100);
      object.MozOpacity = (opacity / 100);
      object.KhtmlOpacity = (opacity / 100);
      object.filter = "alpha(opacity=" + opacity + ")";
}

function shiftOpacity(id, millisec) {
      //if an element is invisible, make it visible, else make it ivisible
      if(document.getElementById(id).style.opacity == 0) {
            opacity(id, 0, 100, millisec);
      } else {
            opacity(id, 100, 0, millisec);
      }
}

function blendimage(divid, imageid, imagefile, millisec) {
      var speed = Math.round(millisec / 100);
      var timer = 0;
      
      //set the current image as background
      document.getElementById(divid).style.backgroundImage = "url(" + document.getElementById(imageid).src + ")";
      
      //make image transparent
      changeOpac(0, imageid);
      
      //make new image
      document.getElementById(imageid).src = imagefile;

      //fade in image
      for(i = 0; i <= 100; i++) {
            setTimeout("changeOpac(" + i + ",'" + imageid + "')",(timer * speed));
            timer++;
      }
}

function currentOpac(id, opacEnd, millisec) {
      //standard opacity is 100
      var currentOpac = 100;
      
      //if the element has an opacity set, get it
      if(document.getElementById(id).style.opacity < 100) {
            currentOpac = document.getElementById(id).style.opacity * 100;
      }

      //call for the function that changes the opacity
      opacity(id, currentOpac, opacEnd, millisec)
}
==========================================================================
Thanks guys.