var listItem,
    item = new Array(),
    ProcessTime,
    timerID;

function init() {
    listItem = $("#scroller ul li");
    item.width = '182';
    item.height = '74';
    fadeTime = 200;
    ProcessTime = 5000;

    $("#scroller ul").css("margin-top",  - item.height + 'px');
    var num = $('#scroller ul li').length;
    if (num < 8) {
        for (var i = 0; i < 8; i++) {
            if (i >= num) {
                $('#scroller ul li:eq(' + (i - num) + ')').clone().appendTo($('#scroller ul'));
            }
        }
    }
    $('#scroller ul li:last').prependTo($('#scroller ul'));
    timerID = setInterval('nextItem()', ProcessTime);
    preload();
}

$(function () {
    init();
    $('#prev').click(prevItem);
    $('#next').click(nextItem);
    $('#scroller ul li').hover(function() {
                                           var list = $(this);
                                           clearInterval(timerID);
                                           list.find('img').css({opacity: 0.3});
                                           $('#eyeCatch img').stop()
                                                             .css({opacity: 1})
                                                             .fadeOut(fadeTime, function() {$(this).attr('src',list.find('img').attr('src').replace('list', 'eyeCatch'));})
                                           .fadeIn(fadeTime);
                                           },
                                function() {
                                            var list = $(this);
                                            list.find('img').css({opacity: 1});
                                            $('#eyeCatch img').stop();
                                            $('#eyeCatch img').css({opacity: 1}).fadeOut(fadeTime, function() {$(this).attr('src',$('#scroller ul li:eq(1) img').attr('src').replace('list', 'eyeCatch'));})
                                            .fadeIn(fadeTime);
                                            $('#prev').click(prevItem);
                                            $('#next').click(nextItem);
                                            timerID = setInterval('nextItem()', ProcessTime);
                                            });

    $('#prev, #next').hover(function () {
                                        clearInterval(timerID);
                                        },
                           function () {
                                        timerID = setInterval('nextItem()', ProcessTime);
                                        }
    );


});

function prevItem() {
//    clearInterval(timerID);
    changeEyeCatch(0);
    $('#scroller ul').animate({marginTop: parseInt($("#scroller ul").css("margin-top")) + parseInt(item.height) + 'px'},
                               'slow',
                               'swing',
                               function(){
                                   $("#scroller ul").css("margin-top",  - item.height + 'px');
                                   $("#scroller ul li:last").prependTo("#scroller ul");
                                   $('#prev').click(prevItem);
                                   $('#next').click(nextItem);
//                                   timerID = setInterval('nextItem()', ProcessTime);
                               });
}

function nextItem() {
//    clearInterval(timerID);
    changeEyeCatch(2);
    $('#scroller ul').animate({marginTop: parseInt($("#scroller ul").css("margin-top")) - parseInt(item.height) + 'px'},
                               'slow',
                               'swing',
                               function(){
                                   $("#scroller ul").css("margin-top",  - item.height + 'px');
                                   $("#scroller ul li:first").appendTo("#scroller ul");
                                   $('#prev').click(prevItem);
                                   $('#next').click(nextItem);
//                                   timerID = setInterval('nextItem()', ProcessTime);
                               });
}

function changeEyeCatch(i) {
    $('#prev').unbind('click');
    $('#next').unbind('click');
    $('#eyeCatch img').fadeOut(fadeTime, function() {$(this).attr('src', $('#scroller ul li:eq(' + i + ') img').attr('src').replace('list', 'eyeCatch'));})
                      .fadeIn(fadeTime);
}


function preload() {
    $.each($('#scroller ul li img'), function() {
        $('<img>').attr("src", $(this).attr('src').replace('list', 'eyeCatch'));
    });
}