$(function() {
    var page = 1;
    var i = 1;
    var offset = 0;
    $('#heroBtnRight').click(function() {
        var $pictureShow = $('div#heroBody');
        var downwidth = $pictureShow.width() - offset;
        var len = $('div#heroContent').find('img').length;

        var page_number = Math.ceil(len / i);

        if (!$('div#heroContent').is(":animated")) {
            if (page == page_number) {
                $('div#heroContent').animate({ left: '0px' }, "slow");
                page = 1;
            } else {
                // alert('page:' + page + " page_number:" + page_number);
                $('div#heroContent').animate({ left: '-=' + downwidth }, "slow");
                page++;
            }
        }
        $(".flag img").attr("src", flag_array[page - 1]);
        if (IsIE7) {
            $('span#heroItems span').eq((page - 2)).removeClass("current");
            $('span#heroItems span').eq((page - 1)).addClass("current");

            $('div#herotxt span').removeClass("current");
            $('div#herotxt span').addClass("common");
            $('div#herotxt span').eq((page - 1)).removeClass("common");
            $('div#herotxt span').eq((page - 1)).addClass("current");
        }
        else {

            $('span#heroItems span').eq((page - 1)).addClass("current").siblings().removeClass("current");
            $('div#herotxt span').eq((page - 1)).removeClass("common");
            $('div#herotxt span').eq((page - 1)).addClass("current").siblings().removeClass("current");
            $('div#herotxt span').eq((page - 2)).addClass("common");
        }
    });

    $('#heroBtnLeft').click(function() {
        var $pictureShow = $('div#heroBody');
        var downwidth = $pictureShow.width() - offset;
        var len = $('div#heroContent').find('img').length;

        var page_number = Math.ceil(len / i);

        if (!$('div#heroContent').is(":animated")) {
            if (page == 1) {
                $('div#heroContent').animate({ left: '-=' + downwidth * (page_number - 1) }, "slow");
                page = page_number;
            } else {
                $('div#heroContent').animate({ left: '+=' + downwidth }, "slow");
                page--;
            }
        }
        $(".flag img").attr("src", flag_array[page - 1]);
        if (IsIE7) {
            $('span#heroItems span').removeClass("current");
            $('span#heroItems span').eq((page - 1)).addClass("current");
            $('div#herotxt span').removeClass("current");
            $('div#herotxt span').addClass("common");
            $('div#herotxt span').eq((page - 1)).removeClass("common");
            $('div#herotxt span').eq((page - 1)).addClass("current");
        }
        else {
            $('div#herotxt span').removeClass("current");
            $('div#herotxt span').addClass("common");
            $('div#herotxt span').eq((page - 1)).removeClass("common");
            $('div#herotxt span').eq((page - 1)).addClass("current").siblings().removeClass("current");
            $('span#heroItems span').eq((page - 1)).addClass("current").siblings().removeClass("current");
        }
    });


    $('#heroItems span li').click(function() {

        var $pictureShow = $('div#heroBody');
        var downwidth = $pictureShow.width() - offset;
        var page_cur = $(this).attr('id');
        var len = $('div#heroContent').find('img').length;
        var page_number = Math.ceil(len / i);
        if (!$('div#heroContent').is(":animated")) {

            if (page_cur == 1) {
                $('div#heroContent').animate({ left: '0px' }, "slow");
                page = 1;
            }
            else if (page_cur == page_number) {
                $('div#heroContent').animate({ left: '-' + downwidth * (page_number - 1) + 'px' }, "slow");

                page = page_number;
            }
            else {
                if (page_cur > page) {

                    $('div#heroContent').animate({ left: '-=' + downwidth * (page_cur - page) }, "slow");
                }
                else if (page_cur < page) {

                    $('div#heroContent').animate({ left: '+=' + downwidth * (page - page_cur) }, "slow");
                }
                page = page_cur;
            }
            $(".flag img").attr("src", flag_array[page - 1]);
            if (IsIE7) {
                $('span#heroItems span').removeClass("current");
                $('span#heroItems span').eq((page - 1)).addClass("current");
                $('div#herotxt span').removeClass("current");
                $('div#herotxt span').addClass("common");
                $('div#herotxt span').eq((page - 1)).removeClass("common");
                $('div#herotxt span').eq((page - 1)).addClass("current");
            }
            else {
                $('span#heroItems span').eq((page - 1)).addClass("current").siblings().removeClass("current");
                $('div#herotxt span').removeClass("current");
                $('div#herotxt span').addClass("common");
                $('div#herotxt span').eq((page - 1)).removeClass("common");
                $('div#herotxt span').eq((page - 1)).addClass("current").siblings().removeClass("current");
            }

            clearTimeout(autoplay);
           
           

        }
    });

    $('#herotxt span li').click(function() {

        var $pictureShow = $('div#heroBody');
        var downwidth = $pictureShow.width() - offset;
        var page_cur = $(this).attr('id');
        var len = $('div#heroContent').find('img').length;
        var page_number = Math.ceil(len / i);
        if (!$('div#heroContent').is(":animated")) {

            if (page_cur == 1) {
                $('div#heroContent').animate({ left: '0px' }, "slow");
                page = 1;
            }
            else if (page_cur == page_number) {
                $('div#heroContent').animate({ left: '-' + downwidth * (page_number - 1) + 'px' }, "slow");

                page = page_number;
            }
            else {
                if (page_cur > page) {

                    $('div#heroContent').animate({ left: '-=' + downwidth * (page_cur - page) }, "slow");
                }
                else if (page_cur < page) {

                    $('div#heroContent').animate({ left: '+=' + downwidth * (page - page_cur) }, "slow");
                }
                page = page_cur;
            }
            $(".flag img").attr("src", flag_array[page - 1]);
            if (IsIE7) {
                $('span#heroItems span').removeClass("current");
                $('span#heroItems span').eq((page - 1)).addClass("current");
                $('div#herotxt span').removeClass("current");
                $('div#herotxt span').eq((page - 1)).addClass("current");
            }
            else {
                $('span#heroItems span').eq((page - 1)).addClass("current").siblings().removeClass("current");
                $('div#herotxt span').eq((page - 1)).addClass("current").siblings().removeClass("current");
            }

        }
        
    });

    //reset items style at the first loading
    if ($('span#heroItems span').size() <= 1) {

        $('.heroNav').css("display", "none");
    }
    else {

        if (IsIE7) {
            $('span#heroItems span').removeClass("current");
            $('span#heroItems span').eq(0).addClass("current");
            $('span#heroItems span').eq(1).addClass("common");
            $('span#heroItems span').eq(2).addClass("common");
        }


        var autoplay = setInterval(function() {
            var $pictureShow = $('div#heroBody');
            var downwidth = $pictureShow.width() - offset;
            var len = $('div#heroContent').find('img').length;
            var page_number = Math.ceil(len / i);
            if (!$('div#heroContent').is(":animated")) {
                if (page == page_number) {
                    $('div#heroContent').animate({ left: '0px' }, "slow");
                    page = 1;
                } else {
                    $('div#heroContent').animate({ left: '-=' + downwidth }, "slow");
                    page++;
                }
            }
            $(".flag img").attr("src", flag_array[page - 1]);
            if (IsIE7) {
                $('span#heroItems span').removeClass("current");
                $('span#heroItems span').eq((page - 1)).addClass("current");

                $('div#herotxt span').removeClass("current");
                $('div#herotxt span').addClass("common");
                $('div#herotxt span').eq((page - 1)).removeClass("common");
                $('div#herotxt span').eq((page - 1)).addClass("current");
            }
            else {
                $('span#heroItems span').eq((page - 1)).addClass("current").siblings().removeClass("current");
                $('div#herotxt span').eq((page - 1)).removeClass("common");
                $('div#herotxt span').eq((page - 1)).addClass("current").siblings().removeClass("current");
                $('div#herotxt span').eq((page - 2)).addClass("common");
            }
        }, 5750);
    }
});