(function($) {

    var container = null;
    var leaflets = null;

    var PlayFlyerPresenter = {
        currentPosition: 0
        , viewCount: 4
        , windowSize: 605
        , autoSlideInterval: 8 * 1000 // 8秒
        , slideSpeed: 250
    };
    PlayFlyerPresenter.createFlyerViewItem = function(play_flyer) {
        var e = $('<li><a href="#"><img /><span class="play"><span class="title"></span><span>(劇団・団体：</span><span class="company"></span><span>)</span></span></a></li>')
            .css('visibility', 'hidden')
            .find('a')
        // 広告ならそのURLに
                .attr('href', (play_flyer.ad ? play_flyer.ad.click_url : '/play/' + play_flyer.play.id))
                .hover(
                function() {
                    var index = $('ul li a', container).index(this) - 3;
                    $('span.leaflets-tooltip span.play', container)
                        .find('.title')
                            .text(play_flyer.ad ? "[PR] "+play_flyer.play.title : play_flyer.play.title)
                        .end()
                        .find('.company')
                            .text(play_flyer.company ? play_flyer.company.name : "")
                        .end()
                        .css('display', 'block')
                        .css('left', (24 + (index * (136 + 15))) + 'px')
                        .show()
                    ;
                },
                function() {
                    $('span.leaflets-tooltip span.play', container).hide();
                })
            .end()
            .find('img')
                .attr('src', play_flyer.images.icon_134)
            .end()
            .find('.play span')
                .hover(function() { $(this.parentNode.parentNode).removeClass("active"); }, function() { })
            .end()
            .find('.play .title')
                .text(play_flyer.ad ? "[PR] "+play_flyer.play.title : play_flyer.play.title)
            .end()
            .find('.play .company')
                .text(play_flyer.company ? play_flyer.company.name : "")
            .end();

        // 広告
        if (play_flyer.ad) {
            e.addClass('pr');
            $('<img class="ad-beacon" style="position:absolute;left:0;top;0;height:0;width:0;visibility:hidden;" />')
                .attr('src', play_flyer.ad.log_url)
                .appendTo(e);
        }

        return e;
    }
    PlayFlyerPresenter.getFlyersCount = function() { return this.data.play_flyers.length; }
    PlayFlyerPresenter.getNextItem = function() {
        if (++PlayFlyerPresenter.currentPosition > (PlayFlyerPresenter.getFlyersCount() - 1)) {
            PlayFlyerPresenter.currentPosition = 0;
        }
        return PlayFlyerPresenter.createFlyerViewItem(PlayFlyerPresenter.data.play_flyers[PlayFlyerPresenter.currentPosition]);
    }
    PlayFlyerPresenter.getPrevItem = function() {
        if (--PlayFlyerPresenter.currentPosition < 0) {
            PlayFlyerPresenter.currentPosition = PlayFlyerPresenter.getFlyersCount() - 1;
        }
        return PlayFlyerPresenter.createFlyerViewItem(PlayFlyerPresenter.data.play_flyers[PlayFlyerPresenter.currentPosition]);
    }

    $.elHomeCarousel = function(jsonpEndpoint) {
        container = $('div.leaflets-container');
        leaflets = $('ul.leaflets', container);

        container.show();
        $('<span class="leaflets-tooltip"><span class="play"><span class="title"></span><span>(劇団・団体：</span><span class="company"></span><span>)</span></span></span>').appendTo(container);
        $('<script>').attr('src', jsonpEndpoint + '?callback=$.elHomeCarousel.initFlyers')
                     .attr('type', 'text/javascript')
                     .appendTo($('body'));
    }

    $.elHomeCarousel.next = function() {
        leaflets.find('li').css('visibility', 'visible');
        leaflets.animate({ left: '-=' + PlayFlyerPresenter.windowSize + 'px' }, PlayFlyerPresenter.slideSpeed, 'swing', function() {
            var e = $(this);
            e.css('left', '-' + PlayFlyerPresenter.windowSize + 'px');
            $('li:lt(' + PlayFlyerPresenter.viewCount + ')', leaflets).remove();
            // 選択できないように
            $('li:lt(' + PlayFlyerPresenter.viewCount + ')', leaflets).css('visibility', 'hidden');
            setTimeout(function() {
                for (var i = 0; i < PlayFlyerPresenter.viewCount; i++) {
                    leaflets.append(PlayFlyerPresenter.getNextItem());
                }
            }, 0);
        });
    }

    $.elHomeCarousel.prev = function() {
        leaflets.find('li').css('visibility', 'visible');
        leaflets.animate({ left: '+=' + PlayFlyerPresenter.windowSize + 'px' }, PlayFlyerPresenter.slideSpeed, 'swing', function() {
            var e = $(this);
            e.css('left', '-' + PlayFlyerPresenter.windowSize + 'px');
            $('li:gt(' + ((PlayFlyerPresenter.viewCount * 2) - 1) + ')', leaflets).remove();
            for (var i = 0; i < PlayFlyerPresenter.viewCount; i++) {
                leaflets.prepend(PlayFlyerPresenter.getPrevItem());
            }
            // 選択できないように
            $('li:gt(' + ((PlayFlyerPresenter.viewCount * 2) - 1) + ')', leaflets).css('visibility', 'hidden');
        });
    }

    $.elHomeCarousel.initFlyers = function(data) {
        PlayFlyerPresenter.data = data;

        // ローディングを隠す
        $('.leaflets-loading', container).hide();

        leaflets
            .css('position', 'relative')
            .css('width', (PlayFlyerPresenter.windowSize * 3) + 'px')
            .css('left', '-' + PlayFlyerPresenter.windowSize + 'px')
        .end();

        // スライディングウィンドウをひと枠分戻してから
        PlayFlyerPresenter.currentPosition = (PlayFlyerPresenter.getFlyersCount() - 1) - PlayFlyerPresenter.viewCount;
        $.each(data.play_flyers, function(i, play_flyer) {
            if (i > ((PlayFlyerPresenter.viewCount * 3) - 1)) return;
            var item = PlayFlyerPresenter.getNextItem();
            if (i > 3 && i < 8) item.css('visibility', 'visible'); // 見える分だけvisibleに
            leaflets.append(item);
        });


        // スクロールボタンを有効にする
        $('.next img', container).attr('src', $('.next img', container).attr('src').replace(/_d\./, '.')).rollover('_o');
        $('.prev img', container).attr('src', $('.prev img', container).attr('src').replace(/_d\./, '.')).rollover('_o');

        // クリックイベント
        $('.next', container).click(function() { $.elHomeCarousel.next(); });
        $('.prev', container).click(function() { $.elHomeCarousel.prev(); });
        leaflets.fadeIn();

        // 自動ローテーション
        var isMouseOver = false;
        container.hover(
            function() { isMouseOver = true; },
            function() { isMouseOver = false; }
        );
        setInterval(function() { if (!isMouseOver) $.elHomeCarousel.next(); }, PlayFlyerPresenter.autoSlideInterval);
    }
})(jQuery);