function PhotoSlider(ref)
{
    this.me = ref;
    
    this.div = null;
    this.slider = null;
    this.caption = null;

    this.playerID = 0;
    this.photos = new Array();
    this.delay = 2000;
    this.speed = "normal";
    this.playingIndex = 0;

    this.photoHeight = "240px";
    this.photoWidth = "320px";
    this.captionWidth = "320px";
    this.barWidth = "322px";
    this.captionClass = "caption";
    this.photoIndexClass = "photoIndex";
    this.slideControlClass = "slideControl";
    
    this.load = function(div, isAutoStart)
    {
        this.div = document.getElementById(div);
        if ( !this.div )
            return false;
            
        photos = this.div.getElementsByTagName("img");
        if ( photos.length == 0 )
            return false;
        
        for ( i = 0; i < photos.length; i ++ )
        {
            img = new Image();
            img.src = photos[i].src;
            img.title = photos[i].title;
            img.alt = photos[i].alt;
            img.style.width = this.photoWidth;
            img.style.height = this.photoHeight;
            img.style.display = 'none';
            this.photos[this.photos.length] = img;
        }
        
        slider = document.createElement("div");
        slider.style.width = this.photoWidth;
        slider.style.height = this.photoHeight;
        slider.style.border = "solid 1px black";
        
        for ( i = 0; i < this.photos.length; i ++ )
            slider.appendChild(this.photos[i]);
        
        caption = document.createElement("div");
        caption.className = this.captionClass;
        caption.style.width = this.captionWidth;

        this.div.innerHTML = "";
        this.div.style.display = '';
        
        if ( this.photos.length == 1 )
        {
            this.photos[0].style.display = '';
            caption.innerHTML = this.photos[0].title;
            this.div.appendChild(slider);
            this.div.appendChild(caption);
            return true;
        }
        
        // photo index and slider control
        table = document.createElement("table");
        table.className = "sliderbar";
        table.style.width = this.barWidth;
        table.cellSpacing = 0;
        table.cellPadding = 0;

        tbody = document.createElement("tbody");
        tr = document.createElement("tr");

        // photo index
        photoIdx = document.createElement("td");
        for ( i = 0; i < this.photos.length; i ++ )
        {
            span = document.createElement("span");
            span.className = this.photoIndexClass;
            span.innerHTML = i+1;
            span.id = "pi_" + i;
            span.onclick = function () { pSlider.jump(this.id.replace("pi_", "")); }
            photoIdx.appendChild(span);
        }

        // controller
        slideControl = document.createElement("td");
        slideControl.align = "right";

        // controller: stop
        stop = document.createElement("span");
        stop.className = this.slideControlClass;
        stop.innerHTML = "x";
        stop.id = "control_stop";
        stop.onclick = function () { pSlider.stop(); }
        slideControl.appendChild(stop);
        
        // controller: slow
        slow = document.createElement("span");
        slow.className = this.slideControlClass;
        slow.innerHTML = "-";
        slow.id = "control_slow";
        slow.onclick = function () { pSlider.speedSlow(); }
        slideControl.appendChild(slow);
        
        // controller: normal
        normal = document.createElement("span");
        normal.className = this.slideControlClass;
        normal.innerHTML = "o";
        normal.id = "control_normal";
        normal.onclick = function () { pSlider.speedNormal(); }
        slideControl.appendChild(normal);
        
        // controller: fast
        fast = document.createElement("span");
        fast.className = this.slideControlClass;
        fast.innerHTML = "+";
        fast.id = "control_fast";
        fast.onclick = function () { pSlider.speedFast(); }
        slideControl.appendChild(fast);
            
        tr.appendChild(photoIdx);
        tr.appendChild(slideControl);
        tbody.appendChild(tr);
        table.appendChild(tbody);

        this.div.appendChild(slider);
        this.div.appendChild(table);
        this.div.appendChild(caption);

        this.slider = slider;
        this.caption = caption;
        this.div.style.display = '';

        if (isAutoStart)
            this.play();
        
        return true;
    }

    this.jump = function(idx)
    {
        this.killTimer();
        this.playingIndex = idx;
        this.play();
    }

    this.speedFast = function()
    {
        this.killTimer();
        this.speed = "fast";
        this.play();
    }

    this.speedNormal = function()
    {
        this.killTimer();
        this.speed = "normal";
        this.play();
    }
    
    this.speedSlow = function()
    {
        this.killTimer();
        this.speed = "slow";
        this.play();
    }

    this.stop = function()
    {
        this.killTimer();
        
        stop = document.getElementById("control_stop");
        stop.className = this.slideControlClass + "Active";

        slow = document.getElementById("control_slow");
        slow.className = this.slideControlClass;
            
        normal = document.getElementById("control_normal");
        normal.className = this.slideControlClass;

        fast = document.getElementById("control_fast");
        fast.className = this.slideControlClass;
    }
    
    this.play = function()
    {
        for ( i = 0; i < this.photos.length; i ++ )
        {
            this.photos[i].style.display = 'none';
            pi = document.getElementById("pi_" + i );
            if ( pi )
                pi.className = this.photoIndexClass;
        }
        
        this.photos[this.playingIndex].style.display = '';
        pi = document.getElementById("pi_" + this.playingIndex);
        if ( pi )
        {
            pi.style.display = '';
            pi.className = this.photoIndexClass + "Active";
            this.caption.innerHTML = "<b>" + this.photos[this.playingIndex].alt + "</b> - " + this.photos[this.playingIndex].title;
        }
        
        stop = document.getElementById("control_stop");
        stop.className = this.slideControlClass;

        slow = document.getElementById("control_slow");
        slow.className = this.slideControlClass;
            
        normal = document.getElementById("control_normal");
        normal.className = this.slideControlClass;

        fast = document.getElementById("control_fast");
        fast.className = this.slideControlClass;
        
        if ( this.speed == "fast" )
        {
            this.delay = 1000;
            fast.className = this.slideControlClass + "Active";
        }
        else if ( this.speed == "slow" )
        {
            this.delay = 3000;
            slow.className = this.slideControlClass + "Active";
        }
        else
        {
            this.delay = 2000;
            normal.className = this.slideControlClass + "Active";
        }
        
        this.playingIndex ++;
        
        if ( this.playingIndex >= this.photos.length )
            this.playingIndex = 0;
        
        this.playerID = setTimeout('pSlider.play()', this.delay);                
    }

    this.killTimer = function()
    {
        if ( this.playerID != 0 )
            window.clearTimeout(this.playerID);
    }
}