var current_index = 1; // start index
var index_size = 4;
var autoloop_timer;
var interval = 13000;


$(function(){
    var img_box = $('#cover_top');
    var msg_box = $('#message');
    var img_list = $('#photo > dt');
    var msg_list = $('#photo > dd');

    // 写真リストのリンクを無効
    $('#photo > dt a').each(function(){
        this.onclick = function(){ return false; };
    });

    // 写真リストの画像ハイライト
    $('#photo > dt img').mouseover(function(){
        $(this).css('opacity', '0.8');
    });
    $('#photo > dt img').mouseout(function(){
        $(this).css('opacity', '1');
    });

    msg_box.bind('change_content', function(e, content){
        $(this).html(content);
    });

    img_box.bind('change_content', function(e, content){
        // transition crossfade
        $(this).prepend($(content).attr({width:410, height:308}));
        $('img', this).css('opacity', '1');
        $('img:gt(0)', this).animate({opacity: 0}, 500, function(){
            $(this).remove();
        }); 
        
        // transition fadeout
        /*
        $(this).children('img').animate({opacity: 0}, 100, function(){
            img_box.html(content);
            img_box.children('img')
                .attr({width:410, height:308}).css('opacity', 0)
                .animate({opacity: 1}, 100);
        });
        */
    });

    img_list.click(function(){
        current_index = img_list.index(this);
        clearInterval(autoloop_timer);
        autoloop_timer = setInterval('autoloop()', interval);

        img_list.removeClass('clicked')
            .eq(current_index).addClass('clicked');

        img_box.trigger('change_content',
                        $(this).clone().html());

        msg_box.trigger('change_content',
                        msg_list.eq(current_index).clone().html());

        if (current_index < index_size-1) {
            current_index++;
        } else {
            current_index = 0;
        }
    });

    autoloop_timer = setInterval('autoloop()', interval);
});

function autoloop(){
    var img_box = $('#cover_top');
    var msg_box = $('#message');
    var img_list = $('#photo > dt');
    var msg_list = $('#photo > dd');

    img_list.removeClass('clicked')
        .eq(current_index).addClass('clicked');
    
    img_box.trigger('change_content',
                    img_list.eq(current_index).clone().html());
    
    msg_box.trigger('change_content',
                    msg_list.eq(current_index).clone().html());
    
    if (current_index < index_size-1) {
        current_index++;
    } else {
        current_index = 0;
    }
}