$(function(){

    var $imgList = $('#slider').find('img');
    var speed = 5000;
    var sliderHeight = 450;
    var triggerButtonHeight = 48;
    
    var currentImg = 0;
    var timerID = null;
    
    function startSlide(){
        
        
        /*
        timerID = setInterval(function(){
            
            $imgList
            .eq(currentImg)
            .removeClass('slider-current-show');
            
            if( currentImg < $imgList.size()-1 ){
                currentImg++;
            }else{
                currentImg = 0;
            }
            
            $imgList
            .eq(currentImg)
            .addClass('slider-current-show')
            .trigger('show');
            
        },speed);
        */
    }
    
    function clearSlide(){
        
      //  clearInterval(timerID);
    }
    
    $('#slider')
    .prepend(
        $('<a>',{
            'class' : 'slider-prev slider-trigger'
        })
        .css({
            'top' : ( (sliderHeight/2)-(triggerButtonHeight/2) )+'px'
        })
        .on('click',function(){
            
            clearSlide();
            
            $imgList
            .eq(currentImg)
            .removeClass('slider-current-show');
            
            if( currentImg > 0 ){
                currentImg--;
            }else{
                currentImg = $imgList.size()-1;
            }
            $imgList
            .eq(currentImg)
            .addClass('slider-current-show')
            .trigger('show');
            
            startSlide();
        })
    ).prepend(
        $('<a>',{
            'class' : 'slider-next slider-trigger'
        })
        .css({
            'top' : ( (sliderHeight/2)-(triggerButtonHeight/2) )+'px'
        })
        .on('click',function(){
            
            clearSlide();
            
            $imgList
            .eq(currentImg)
            .removeClass('slider-current-show');
            
            if( currentImg < $imgList.size()-1 ){
                currentImg++;
            }else{
                currentImg = 0;
            }
            $imgList
            .eq(currentImg)
            .addClass('slider-current-show')
            .trigger('show');
            
            startSlide();
        })
    ).prepend(
        $('<div>',{
            'id' : 'slider-desc'
        }).append(
            $('<div>')          
        )          
    );
    
    $imgList
    .eq(0)
    .addClass('slider-current-show')
    .end()
    .each(function(){
    
        $(this)
        .css('display','none')
        .load(function(){
            $(this)
            .addClass('slider-img-loaded')
            .on('show',function(){//try to show because load complete,it will replace event "show" that have been bind
                // define 'show' event and its event handler of $(this)
                if( $(this).hasClass('slider-current-show') && $(this).css('display') == 'none' ){//if is a image wanted to show now
                    // #slider-desc > div is the additional note bar of the image which shows in the bottom of image
                    // hide the image and note bar
                    $imgList.add('#slider-desc > div').css('display','none');
                    
                    // let the current image and note bar fadeIn...
                    $('#slider-desc > div').html($(this).attr('title')).add($imgList.eq(currentImg)).fadeIn(500);
                }
            })
            .trigger('show');
        });    
    });
    
    startSlide();
});