var photoslider = function()
{
    var main,timer,moveToImg,preload,init,oldImg,newImg,navigation,createNav,killInfo,imgList = {};

    init = function( id, images ){

        // preload the images
        preload( images );

        // set the main holder
        main = id;
        main.css({
            width: 1200,
            height: 300,
            position: 'relative',
            overflow: 'hidden'
        });

        createNav();


        newImg = $( 'img[name=pic0]' );
        newImg.css({ top: '0px' });
        killInfo.html( $( navigation ).find( 'li' ).eq(0).html() +'<br/>Kill date: '+ newImg.attr( 'date' ) );
    };

    preload = function( img ){
        var i, counter = 0;
        for( i in img ){
            if( img.hasOwnProperty(i) ){
                imgList[img[i].name] = new Image();
                imgList[img[i].name].src = img[i].link;
                imgList[img[i].name].name = img[i].name;
                imgList[img[i].name].date = img[i].date; 
                imgList[img[i].name].number = counter++;
            }
        }
    };

    createNav = function(){
        var li, ul, i;
        ul = $( '<ul>' ).css({ margin: '40px 0 0 0', padding: 0});
        for( i in imgList ){
            if( imgList.hasOwnProperty(i) ){
                $( '<li>' )
                        .html( imgList[i].name )
                        .attr({ name: imgList[i].name, number : imgList[i].number  })
                        .css({color: '#fff', listStyleType: 'none', margin: '5px 0 5px 20px', borderBottom : '#000 1px solid' })
                        .appendTo( ul )
                        .mouseover( function(){ var t = this; timer = setTimeout(function(){ moveToImg( 'pic'+$( t ).attr('number'), $( t ).attr('name') ); }, 500 ); $( this ).css({ cursor: 'pointer', borderBottom: '#ccc 1px solid' }) } )
                        .mouseout( function(){ clearTimeout( timer ); $( this ).css({ borderBottom : '#000 1px solid' }); } )
                        .click( function(){ clearTimeout( timer ); moveToImg( 'pic'+$( this ).attr('number'), $( this ).attr('name') ); } );

                $( '<img>' )
                        .attr({ name: 'pic'+imgList[i].number, src: imgList[i].src, date: imgList[i].date })
                        .css({ position: 'absolute', top: -300,left: 0 }).appendTo( main );
            }
        }
        navigation = $( '<div>').css({ height: 300, width: 200, background: '#000', opacity: 0.7, position: 'absolute', zIndex: 2 }).appendTo( main );
        killInfo = $( '<div>' ).css({ height: 40, width: 200, color: '#fff', background: '#000', opacity: 0.7, position: 'absolute', zIndex: 5, bottom: 0, right: 0, padding: '5px 0 0 10px' }).appendTo( main );
        ul.appendTo( navigation );
    };

    moveToImg = function( nr, name ){
        oldImg = newImg;
        newImg = $( 'img[name='+nr+']' ).css({ zIndex: 2});
        if( undefined === oldImg || oldImg.attr('name') != newImg.attr('name') ){
            if( undefined !== oldImg ){ oldImg.css({ zIndex: '1' }); }
            killInfo.animate({ right: '-210px' }, 200, function(){
                newImg.css({ zIndex: 2 }).animate({ top: '0px'}, 500, function(){ if( undefined !== oldImg ){ oldImg.css({ top: '-300px' }); killInfo.html( name +'<br/>Kill date: '+newImg.attr( 'date' )).animate({ right: 0 }, 200 ) } } );
            })
        }
   };

   return{
      init : init
   } ;
}();