var timer = null;

var offset = 15000;

var index = 0;



//´óͼ½»ÌæÂÖ»»

function slideImage(i){

    var id = 'image_'+ target[i];

    $('#'+ id)

        .animate({opacity: 1}, 800, function(){

            $(this).find('.word').animate({height: 'show'}, 'slow');

        }).show()

        .siblings(':visible')

        .find('.word').animate({height: 'hide'},'fast',function(){

            $(this).parent().animate({opacity: 0}, 800).hide();

        });

}

//bind thumb a

function hookThumb(){    

    $('#thumbs li a')

        .bind('click', function(){

            if (timer) {

                clearTimeout(timer);

            }                

            var id = this.id;            

            index = getIndex(id.substr(6));

            rechange(index);

            slideImage(index); 

            timer = window.setTimeout(auto, offset);  

            this.blur();            

            return false;

        });

}


//get index

function getIndex(v){

    for(var i=0; i < target.length; i++){

        if (target[i] == v) return i;

    }

}

function rechange(loop){

    var id = 'thumb_'+ target[loop];

    $('#thumbs li a.current').removeClass('current');

    $('#'+ id).addClass('current');

}

function auto(){

    index++;

    if (index > 4){

        index = 0;

    }

    rechange(index);

    slideImage(index);

    timer = window.setTimeout(auto, offset);

}

$(function(){    

    //change opacity

    $('div.word').css({opacity: 0.85});

    auto();  

    hookThumb();

    

});