$(function(){
    
    // 切り替えの秒数
    var switchSeconds = 3;
    
    // フェードインの長さ（秒数）
    var fadeSeconds = 1;
    
    // 外観の初期化
    var buttonwidth = 0;
    var buttonmargin = 0;
    var max = 0;
    $('div#flash div.buttons ul').each(function(){
        var children = $('li',this);
        buttonwidth = children.width();
        buttonmargin = Number(children.css('margin-right').replace('px',''));
        max = children.length;
        var width = max*(buttonwidth+buttonmargin);
        $(this).css('width', width);
    });
    
    $('div#flash ul.visual li').hide();
    $('div#flash ul.visual').show();
    
    var current = -1;
    var locked = false;
    var showvisual = function(target){
        if (locked || current == target) {
            return 0;
        }
        locked = true;
        $('div#flash div.buttons ul li img').each(function(){
            var src = $(this).attr('src');
            $(this).attr('src',src.replace(/_over.png/, '.png'));
        });
        $('div#flash div.buttons ul li:nth-child('+(target+1)+') img').each(function(){
            var src = $(this).attr('src');
            $(this).attr('src',src.replace(/.png/, '_over.png'));
        });
        $('div#flash ul.visual li:nth-child('+(current+1)+')').fadeOut(fadeSeconds*1000);
        $('div#flash ul.visual li:nth-child('+(target+1)+')').fadeIn(fadeSeconds*1000, function(){
            current = target;
            locked = false;
            $.cookie('last_show_visual', current);
        });
    };
    var lastshow = Number($.cookie('last_show_visual'));
    if (!lastshow) {
        lastshow = 0;
    } else if (lastshow>max) {
        lastshow = 0;
    }
    showvisual(lastshow);
    
    var buttonpos = lastshow;
    var slide = function(left_or_right_or_index, forcely){
        if (locked && !forcely) {
            return;
        }
        var firstpos = buttonpos;
        if (left_or_right_or_index=='left') {
            buttonpos += 3;
        }
        else if (left_or_right_or_index=='right') {
            buttonpos -= 3;
        } else {
            buttonpos = -left_or_right_or_index+1;
        }
        if (buttonpos>0) {
            buttonpos = 0;
        } else if (buttonpos<-(max-3)) {
            buttonpos = -(max-3);
        }
        var next = buttonpos*(buttonwidth+buttonmargin);
        if (left_or_right_or_index=='left' && firstpos==0 && buttonpos==0) {
            $('div#flash div.buttons ul').animate({left:10}, 80, function(){
                $('div#flash div.buttons ul').animate({left:0}, 80);
            });
        }
        else if (left_or_right_or_index=='right' && firstpos==-(max-3) && buttonpos==-(max-3)) {
            $('div#flash div.buttons ul').animate({left:next-10}, 80, function(){
                $('div#flash div.buttons ul').animate({left:next}, 80);
            });
        }
        else {
            $('div#flash div.buttons ul').animate({left:next}, 500, function(){
                // complete
            });
        }
    };
    slide(buttonpos, true);
    
    $('div#flash div.buttons li').each(function(index){
        $(this).click(function(){
            slide(index);
            showvisual(index);
            clearInterval(intid);
        });
    });
    
    $('div#flash div.prev').click(function(){
        slide('left');
    });
    $('div#flash div.next').click(function(){
        slide('right');
    });
    
    var intcurrent = lastshow;
    var intid = setInterval(function(){
        intcurrent++;
        if (intcurrent>=max) {
            intcurrent = 0;
        }
        slide(intcurrent);
        showvisual(intcurrent);
    }, switchSeconds*1000);
});