Filmstrip view 13 June 2005

<style type="text/css">
    #fsClipper { height: 330px; width: 100%; overflow: auto; //overflow: hidden; //overflow-x: auto; }
    .fsControl, #fsLinks a { color: darkblue; cursor: pointer; //cursor: hand; }
    .fsControl.disabled, #fsLinks a.current { color: #000000; cursor: default; text-decoration: none; }
    .fsControl.disabled { color: #666666; }
    #fsScreen { height: 300px ! important; background: no-repeat 50% 50%; }
</style>
<div id="fsClipper">
    <div id="fsScreen"></div>
</div>
<p>
    <span id="fsControl_prev" class="fsControl">&larr;</span>
    <span id="fsControl_next" class="fsControl">&rarr;</span>
</p>
<p id="fsLinks">
    http://www.artlebedev.ru/portfolio/illustrations/i/0ca1b1284e6e6b78.jpg" onclick="return Show_picture( 'http://www.artlebedev.ru/portfolio/illustrations/i/0ca1b1284e6e6b78.jpg', 200, 200 )">him</a>,
    http://www.artlebedev.ru/portfolio/illustrations/i/577698ac49499acc.jpg" onclick="return Show_picture( 'http://www.artlebedev.ru/portfolio/illustrations/i/577698ac49499acc.jpg', 200, 200 )">them</a>,
    http://www.artlebedev.ru/portfolio/illustrations/i/69d02a844a673326.jpg" onclick="return Show_picture( 'http://www.artlebedev.ru/portfolio/illustrations/i/69d02a844a673326.jpg', 200, 200 )">her</a>,
    http://www.artlebedev.ru/portfolio/illustrations/i/69fbeb22269a853d.jpg" onclick="return Show_picture( 'http://www.artlebedev.ru/portfolio/illustrations/i/69fbeb22269a853d.jpg', 200, 200 )">it</a>
</p>
<script type="text/javascript">
    function Filmstrip(){
        this.ePicture = document.getElementById('fsScreen');
        this.ePrev = document.getElementById('fsControl_prev');
        this.eNext = document.getElementById('fsControl_next');
        var eLinks = document.getElementById('fsLinks');
        this.aeLink = eLinks.getElementsByTagName('A');
        this.show_picture = function( sBackground, iWidth, iHeight ){
            this.ePicture.style.backgroundImage = "url(" + sBackground + ")";
            if( iWidth )
                this.ePicture.style.width = iWidth;
            if( iHeight )
                this.ePicture.style.height = iHeight;
            this.set_current( sBackground );
        }
        this.set_current = function( sHref ){
            for( var i = 0 ; i < this.aeLink.length ; i++ ){
                if( this.aeLink[i].href.match( new RegExp( sHref + "$" ) ) ){
                    this.aeLink[i].className += " current";
                    this.ePrev.className = this.ePrev.className.replace( /\s+disabled/g, "" );
                    this.eNext.className = this.eNext.className.replace( /\s+disabled/g, "" );
                    if( i == 0 ){
                        this.ePrev.className += " disabled";
                        this.ePrev.onclick = function(){};
                        this.eNext.onclick = this.aeLink[i + 1].onclick;
                    }else if( i == this.aeLink.length - 1 ){
                        this.eNext.className += " disabled";
                        this.eNext.onclick = function(){};
                        this.ePrev.onclick = this.aeLink[i - 1].onclick;
                    }else{
                        this.eNext.onclick = this.aeLink[i + 1].onclick;
                        this.ePrev.onclick = this.aeLink[i - 1].onclick;
                    }
                }else{
                    this.aeLink[i].className = this.aeLink[i].className.replace( /\s*current/g, "" );
                }
            }
        }
    }
    var oFilmstrip = new Filmstrip();
    function Show_picture( sHref, iWidth, iHeight ){
        oFilmstrip.show_picture( sHref, iWidth, iHeight );
        return false;
    }
    oFilmstrip.aeLink[0].onclick();
</script>