// グローバルナビゲーションのドロップダウンメニュー
$(document).ready(function(){
    $('#gnavi').droppy();
});

// 文字サイズ変更
$(document).ready(function() {
    if($.cookie("css")) {
        // クッキーから復元
        $("link#fontcss").attr("href",$.cookie("css"));
        adjustMessageCarouselHeight($.cookie("fontSize"));
    }
    $("#fontSizeNavi li a").click(function() {
        var id = $(this).attr('id');
        $("link#fontcss").attr("href",$(this).attr('rel'));
        // クッキーに保存
        $.cookie("css",$(this).attr('rel'), {expires: 365, path: '/'});
        $.cookie("fontSize", id, {expires: 365, path: '/'});
        adjustMessageCarouselHeight(id);
        return false;
    });
    // 応援メッセージカルーセルの高さ変更
    function adjustMessageCarouselHeight(fontSize) {
        if      (fontSize == 'fontSizeM')  $('.carousel li').css('height', '320px');
        else if (fontSize == 'fontSizeL')  $('.carousel li').css('height', '400px');
        else if (fontSize == 'fontSizeLL') $('.carousel li').css('height', '500px');
    }
});

// 画像のロールオーバー処理
$(document).ready(function() {
    $('a.hover img').rollover();
});

// 応援メッセージカルーセル
$(document).ready(function() {
    
    var $carousel = $('.carousel');
    if (!$carousel[0]) return;
    
    $carousel.jCarouselLite({
        btnNext: '#nextCarousel',
        btnPrev: '#prevCarousel',
        auto: 2000,
        speed: 1000,
        visible: 4,
        circular: true,
        vertical: false,
        scroll: 1/*,
        beforeStart: function() {
            $('#debug').innerHTML = 'onStart!<br />';
        },
        afterEnd: function() {
            $('#debug').innerHTML = 'onEnd!<br />';
        }*/
    });
 });
 
// 高さそろえ
/*$(document).ready(function() {
    $('.messageTable .row').each(function(){
      $(this).find(' div.message').flatHeights();
    });
});*/

// バナースライド
$(document).ready(function() {
    
    if (!$('#bsGallery')[0]) return;
    
    var $selectedBS = $('#selectedBS');
    $selectedBS.children(0).attr('href', $('#bsMenu ul').children(0).children(0).attr('href'));
    
    $('#bsMenu').jCarouselLite({
        btnNext: '#nextBS',
        btnPrev: '#prevBS',
        auto: 10000,
        visible: 3,
        circular: true,
        vertical: true,
        scroll: 1,
        beforeStart: function($e) {
            
        },
        afterEnd: function(e) {
            //alert($(e[0]).children(0).attr('rel'));
            var index = $(e[0]).children(0).attr('rel');
            changeBanner(index);
            $selectedBS.children(0).attr('href', $(e[0]).children(0).attr('href'));
        }
    });
    
    //Execute the slideShow
    
    //Set the opacity of all images to 0
    $('#bsGallery a').css({opacity: 0.0});
    
    //Get the first image and display it (set it to full opacity)
    $('#bsGallery a:first').css({opacity: 1.0});
    
    //Set the caption background to semi-transparent
    $('#bsGallery .caption').css({opacity: 0.9});

    //Resize the width of the caption according to the image width
    $('#bsGallery .caption').css({width: $('#bsGallery a').find('img').css('width')});
    
    //Get the caption of the first image from REL attribute and display it
    $('#bsGallery .content').html($('#bsGallery a:first').find('img').attr('rel')).animate({
        opacity: 0.8
    }, 400);

});

function changeBanner(index) {
    
    var current = ($('#bsGallery a.show')?  $('#bsGallery a.show') : $('#bsGallery a:first'));

    //Get next image, if it reached the end of the slideshow, rotate it back to the first image
    var next = $('#bsGallery a').eq(index);    
    
    _change(current, next);
    
}

function _change(current, next) {
    //Get next image caption
    var caption = next.find('img').attr('rel');    
    
    var $caption = $('#bsGallery .caption');
    var $capContent = $('#bsGallery .content');
    
    //Set the opacity to 0 and height to 1px
    $caption
    .animate({opacity: 0.0}, { queue:false, duration:500 })
    .animate({height: '1px'}, 500, function() {
        $capContent.html('');
        //Hide the current image
        current
        .animate({opacity: 0.0}, 1000)
        .removeClass('show');
        
        //Set the fade in effect for the next image, show class has higher z-index
        next
        .css({opacity: 0.0})
        .addClass('show')
        .animate({opacity: 1.0}, 1000, function() {
            //Animate the caption, opacity to 0.8 and heigth to 100px, a slide up effect
            $caption
            .animate({opacity: 0.8}, { queue:false, duration:1000 } )
            .animate({height: '10em'}, 500, function() {
                //Display the content
                $capContent.html(caption);
            } );
        });
    });
}