(function($) {

$(document).ready(function() {
    
    var ARROW_WAIT_TIME   = 1000;
    var ARROW_TOGGLE_TIME = 300;
    var ARROW_EASING      = 'easeInQuart';
    var ARROW_MOVE_RANGE  = 50;
    var ROTATE_INTERVAL   = 10000;
    var SLIDE_SPEED       = 700;
    var DEFAULT_EASING    = 'easeInQuart';
    
    var PHOTO_WIDTH        = 970;
    var ARROWS_RIGHT_WIDTH = 34;
    
    var showcase = $('#showcase');
    
    var photoWrapper = $('#photo_list');
    var photoList    = photoWrapper.find('li');
    var photoLength  = photoList.size();
    
    
    var arrowsLeft  = $('p.arrows_left');
    var arrowsRight = $('p.arrows_right');
    
    var arrowsRightOffset = PHOTO_WIDTH - ARROWS_RIGHT_WIDTH;
    
    var dotList = $('li.dot_list');
    
    var offset  = 0;
    
    var arrowTimer;
    var eyecatchTimer;
    
    init();
    
    function init()
    {
        arrowTimer = setTimeout(function() {
            toggleArrow('hide');
        }, ARROW_WAIT_TIME);

        eyecatchTimer = setInterval(function() {
            rotateEyecatch('right', true, -1);
        }, ROTATE_INTERVAL);

        showcase.hover(function() {
            clearTimeout(arrowTimer);
            toggleArrow('show');
        }, function() {
            clearTimeout(arrowTimer);
            arrowTimer = setTimeout(function() {
                toggleArrow('hide');
            }, ARROW_WAIT_TIME);
        });
        
        arrowsLeft.click(function() {
            if (photoWrapper.hasClass('moving')) {
                return;
            }
            clearInterval(eyecatchTimer);
            rotateEyecatch('left', false, -1);
        });
        
        arrowsRight.click(function() {
            if (photoWrapper.hasClass('moving')) {
                return;
            }
            clearInterval(eyecatchTimer);
            rotateEyecatch('right', false, -1);
        });
        
        $('div.one_box').hover(function() {
            $(this).css({backgroundColor:'#ccc'});
        }, function() {
            $(this).css({backgroundColor:'#fff'});
        });
        
        dotList.each(function(idx) {
            var img = $(this).find('img')
            var src = img.attr('src');
            
            
            $(this).hover(function() {
                if (offset != idx) {
                    img.attr('src', src.replace('dot.png', 'dot_on.png'));
                }
            }, function() {
                if (offset != idx) {
                    img.attr('src', src.replace('dot_on.png', 'dot.png'));
                }
            });
            
            
            $(this).click(function() {
                if (photoWrapper.hasClass('moving') ||
                        offset == idx) {
                    return;
                }
                
                clearInterval(eyecatchTimer);
                rotateEyecatch('right', false, idx);
            });
        });
    }
    
    function toggleArrow(display)
    {
        var leftLeft;
        var rightLeft;
        var opacity;
        
        if (display == undefined ||
                display == 'hide') {
            leftLeft  = ARROW_MOVE_RANGE + 'px';
            rightLeft = arrowsRightOffset - ARROW_MOVE_RANGE + 'px';
            opacity   = 0;
        } else {
            leftLeft  = 0;
            opacity   = 100;
            rightLeft = arrowsRightOffset + 'px';
        }
        
        arrowsLeft.animate({
            left: leftLeft,
            opacity: opacity
        }, {
            duration: ARROW_TOGGLE_TIME,
            easing: ARROW_EASING,
            queue: false
        });

        arrowsRight.animate({
            left: rightLeft,
            opacity: opacity
        }, {
            duration: ARROW_TOGGLE_TIME,
            easing: ARROW_EASING,
            queue: false
        });
    }
    
    function rotateEyecatch(direction, init, clicked)
    {
        var photoOffset;
        var moveWidth;
        
        photoWrapper.addClass('moving');
        
        if (direction == 'left') {
            if (clicked == -1) {
                moveWidth = 1;
            } else {
                moveWidth = offset - clicked;
            }
            
            if (moveWidth > 1) {
                
            } else {
                if (offset == 0) {
                    photoList.eq(photoLength - 1).css({
                        left: -1 * PHOTO_WIDTH + 'px'
                    });
                } else {
                    photoList.eq(offset - 1).css({
                        left: -1 * PHOTO_WIDTH + 'px'
                    });
                }
            }
        } else {
            if (clicked == -1) {
                moveWidth = 1;
            } else {
                if (offset > clicked) {
                    moveWidth = photoLength - offset + clicked;
                } else {
                    moveWidth = clicked - offset;
                }
            }
        }
        
        photoList.each(function(idx) {
            if(direction == 'right') {
                photoOffset = parseInt($(this).css('left')) - (PHOTO_WIDTH * moveWidth);
            } else {
                photoOffset = parseInt($(this).css('left')) + (PHOTO_WIDTH * moveWidth);
            }
            
            $(this).animate({
                left: photoOffset
            }, {
                duration: SLIDE_SPEED,
                easing: DEFAULT_EASING,
                queue: false,
                complete: function()
                {
                    var onImg  = dotList.find('img')
                                        .attr('src')
                                        .replace('dot_on.png', 'dot.png');
                                        
                    var offImg = dotList.eq(offset)
                                        .find('img')
                                        .attr('src')
                                        .replace('dot.png', 'dot_on.png');
                    var i;
                    
                    if (idx == photoLength - 1){
                        if (direction == 'right') {
                            if (moveWidth > 1) {
                                for (i = offset; i < offset + moveWidth; i++) {
                                    photoList.eq(i).css({
                                        left: (photoLength - offset - moveWidth)
                                            * PHOTO_WIDTH + (PHOTO_WIDTH * i) + 'px'
                                    });
                                }
                                
                                if (offset > clicked) {
                                    for (i = 0; i < clicked; i++) {
                                        photoList.eq(i).css({
                                            left: (photoLength - clicked)
                                                * PHOTO_WIDTH + (PHOTO_WIDTH * i) + 'px'
                                        });
                                    }
                                }
                                offset = clicked;
                            } else {
                                photoList.eq(offset).css({
                                    left: PHOTO_WIDTH * (photoLength - 1) + 'px'
                                });
                                
                                if (offset == photoLength - 1) {
                                    offset = 0;
                                } else {
                                    offset++;
                                }
                            }
                        } else {
                            if (moveWidth > 1) {
                                
                            } else {
                                if (offset == 0) {
                                    offset = photoLength - 1;
                                } else {
                                    offset--;
                                }
                            }
                        }
                        
                        dotList.find('img').attr('src', onImg);
                        dotList.eq(offset).find('img').attr('src', offImg);
                        
                        photoWrapper.removeClass('moving');
                    }
                }
            });
        });
        
        if (!init) {
            eyecatchTimer = setInterval(function() {
                rotateEyecatch('right', true, -1);
            }, ROTATE_INTERVAL);
        }
    }
});

})(jQuery);