(function($) {

$(document).ready(function() {
    var WAIT_TIME = 3000;
    var FADE_TIME = 1500;

    var field   = $('#eyecatch');
    var count   = $('#bannerCount');
    var imgList = new Array();
    var numList = new Array();
    var offset  = 0;
    var timer;
    var num;

    field.find('a').each(function(idx) {
        imgList[idx] = $(this);
    });

    num = imgList.length;
    
    fixListWidth();
    
    count.find('li').not('.arrow_left, .arrow_right').each(function(idx) {
        if (idx == 0) {
            $(this).addClass('focus');
        }
        numList[idx] = $(this);
    });

    timer = setTimeout(function(){rotateImg(null)}, WAIT_TIME);

    mouseAction();
    
    function fixListWidth()
    {
        var listWidth = 0;
        
        count.find('li').each(function(idx) {
            if ($(this).hasClass('arrow-left')) {
                listWidth += $(this).find('img').width() + 15;
            } else if ($(this).hasClass('arrow-right')) {
                listWidth += $(this).find('img').width() + 5;
            } else {
                listWidth += $(this).find('img').width() + 10;
            }
        });
        
        count.width(listWidth);
        
    }
    
    function rotateImg(clicked)
    {
        clearTimeout(timer);

        var next;
        
        if (clicked != null) {
            next = clicked;
        } else if (offset >= num - 1) {
            next = 0;
        } else {
            next = offset + 1;
        }
        
        imgList[offset].addClass('fading');
        imgList[next].addClass('fading');
        numList[offset].removeClass('focus');
        numList[next].addClass('focus');
        
        switchImg(numList[offset].find('img'), 'off');
        switchImg(numList[next].find('img'), 'on');

        imgList[offset].stop(true, true).fadeOut(FADE_TIME);
        
        imgList[next].stop(true, true).fadeIn(FADE_TIME, function() {
            imgList[offset].removeClass('fading');
            imgList[next].removeClass('fading');

            offset = next;
            timer  = setTimeout(function(){rotateImg(null)}, WAIT_TIME);
        });
    }

    function mouseAction()
    {
        $(numList).each(function(idx) {
            
            $(this).hover(function() {
                if (!$(this).hasClass('focus')) {
                    switchImg($(this).find('img'), 'on');
                }
            }, function() {
                if (!$(this).hasClass('focus')) {
                    switchImg($(this).find('img'), 'off');
                }
            });

            $(this).click(function() {
                if ($('a.fading').size() == 0 &&
                        offset != idx) {
                    switchImg($(this).find('img'), 'on');
                    
                    clearTimeout(timer);
                    rotateImg(idx);
                }
            });
        });

        $('li.arrow_left, li.arrow_right').hover(function() {
            switchImg($(this).find('img'), 'on');
        }, function() {
            switchImg($(this).find('img'), 'off');
        });

        $('li.arrow_left').click(function() {
            if ($('a.fading').size() == 0) {
                var next;

                if (offset == 0) {
                    next = num - 1;
                } else {
                    next = offset - 1;
                }

                clearTimeout(timer);
                rotateImg(next);
            }
        });

        $('li.arrow_right').click(function() {
            if ($('a.fading').size() == 0) {
                var next;

                if (offset == num - 1) {
                    next = 0;
                } else {
                    next = offset + 1;
                }
                
                clearTimeout(timer);
                rotateImg(next);
            }
        });
    }

    function switchImg(img, flg)
    {
        var src = img.attr('src');
        
        if (!src.match('_on.gif') && flg == 'on') {
            img.attr('src', src.replace('.gif', '_on.gif'));
        } else {
            img.attr('src', src.replace('_on.gif', '.gif'));
        }
    }
    
});

})(jQuery);