function createImageTag( src, alt, className )
{
    var img = document.createElement( "img" );
    if ( alt != undefined )
        img.alt = alt;
    else
        img.alt = "";
    img.border = 0;
    img.hspace = 0;
    img.vspace = 0;
    
    img.src = src;
    
    if ( className != undefined )
        img.className = className;
    
    return ( img );
}

function removeAllChildNodes( elem )
{
    while ( elem.hasChildNodes() )
    {
        elem.removeChild( elem.lastChild );
    }
}

function Slideshow()
{
    this.div_wrapper = document.createElement( "div" );
    this.div_wrapper.className = "slideshow_wrapper";
    
    this.div_close_button = document.createElement( "div" );
    this.div_close_button.className = "slideshow_close_button";
    this.div_wrapper.appendChild( this.div_close_button );
    
    this.div_canvas = document.createElement( "div" );
    this.div_canvas.className = "slideshow_canvas";
    this.div_wrapper.appendChild( this.div_canvas );
    
    this.image = createImageTag( "", "", "slideshow_image" );
    this.div_canvas.appendChild( this.image );
    
    this.div_magazine = document.createElement( "div" );
    this.div_magazine.className = "slideshow_magazine";
    this.div_wrapper.appendChild( this.div_magazine );
    
    this.addToDOM = function()
    {
        var browserWidth = 0;
        var browserHeight = 0;
        if( typeof( window.innerWidth ) == 'number' )
        {
            // Non-IE
            browserWidth = window.innerWidth;
            browserHeight = window.innerHeight;
        }
        else
        {
            //IE 6+ in 'standards compliant mode'
            browserWidth = document.documentElement.clientWidth;
            browserHeight = document.documentElement.clientHeight;
        }
        
        this.div_wrapper.style.width = ( browserWidth - 100 ) + "px";
        this.div_wrapper.style.height = ( browserHeight - 100 ) + "px";
        this.div_wrapper.style.left = "50px";
        this.div_wrapper.style.top = "50px";
        
        var canvasHeight = browserHeight - 291;
        this.div_canvas.style.width = ( browserWidth - 140 ) + "px";
        this.div_canvas.style.height = canvasHeight + "px";
        
        this.image.style.maxHeight = canvasHeight + "px";
        
        document.body.appendChild( this.div_wrapper );
    };
    
    this.show = function()
    {
        this.div_wrapper.style.display = "block";
    };
    
    this.hide = function()
    {
        this.div_wrapper.style.display = "none";
    };
    
    this.removeFromDOM = function()
    {
        this.div_wrapper.parentNode.removeChild( this.div_wrapper );
    };
    
    this.onCloseButtonClicked = function()
    {
        var slideshow = this.slideshow;
        //slideshow.hide();
        slideshow.removeFromDOM();
    };
    
    this.div_close_button.slideshow = this;
    this.div_close_button.onclick = this.onCloseButtonClicked;
    
    this.showImage = function( thumb )
    {
        for ( var i = 0; i < this.all_thumbs.length; i++ )
        {
            this.all_thumbs[ i ].className = "gallery thumbnail2";
        }
        thumb.className = "gallery thumbnail2 current";
        
        this.image.src = this.img_folder_name + thumb.basename;
    };
    
    this.setThumbs = function( img_folder_name, thumbs )
    {
        removeAllChildNodes( this.div_magazine );
        
        this.img_folder_name = img_folder_name;
        this.all_thumbs = thumbs;
        
        for ( var i = 0; i < thumbs.length; i++ )
        {
            var thumb = thumbs[ i ];
            thumb.slideshow = this;
            thumb.onclick = function() { this.slideshow.showImage( this ) };
            
            this.div_magazine.appendChild( thumb );
        }
    };
}

function showSlideshow()
{
    var img_folder_name = arguments[ 0 ];
    var thumbs_folder_name = arguments[ 1 ];
    var initial_image_index = arguments[ 2 ];
    
    var slideshow = new Slideshow();
    
    var thumbs = new Array( arguments.length - 3 );
    for ( var i = 3; i < arguments.length; i++ )
    {
        var img_basename = arguments[ i ];
        var img = createImageTag( thumbs_folder_name + img_basename, "", "gallery thumbnail2" );
        img.style.maxHeight = "125px";
        img.basename = img_basename;
        thumbs[ i - 3 ] = img;
    }
    
    slideshow.setThumbs( img_folder_name, thumbs );
    
    slideshow.showImage( thumbs[ initial_image_index ] );
    
    slideshow.addToDOM();
    slideshow.show();
}