(function($) {

$(document).ready(function() {

    var btnImgDir = './img/';
    var xmlPath = './xml/banners.xml';

    var fadeTime = 1000;
    var waitTime = 5000;

    var maxBannerCount = 5;
    var bannerCount    = 0;
    var bannerIndex    = 0;

    var rotateImg   = $('#rotate_img');
    var images      = new Array();
    var idxBtnList;
    var timer;

    $.ajax({
        url: xmlPath,
        dataType: 'xml',
        success: initBanner
    });

    function initBanner(xml)
    {
        rotateImg.css({
            position: 'relative',
            width: '400px',
            height: '170px'
        });

        bannerCount = $(xml).find('banner').size();

        if (bannerCount > maxBannerCount) {
            bannerCount = maxBannerCount;
        }

        arrangeBtn();

        $(xml).find('banner').each(function(idx) {

            if (idx > bannerCount - 1) {
                return;
            }

            images[idx] = $('<a />').attr({
                              href: $(this).find('url').text(),
                              target: $(this).find('target').text()
                          }).css({
                              position: 'absolute',
                              top: '0',
                              left: '0',
                              display: 'none'
                          }).prepend(
                              $('<img />').attr({
                                  src: $(this).find('src').text(),
                                  alt: $(this).find('alt').text()
                              })
                          );

            if (idx == 0) {
                rotateImg.append(images[idx].fadeIn(fadeTime, rotateBanner));
                bannerIndex++;
            } else {
                rotateImg.append(images[idx]);
            }
        });
    }

    function arrangeBtn()
    {
        var src;

        var ulWidth  = (bannerCount * (17 + 3)) + 'px';
        var btnField = $('<ul />').attr('id', 'idxBtnList')
                                  .css({
                                      display: 'inline',
                                      float: 'right',
                                      margin: '5px 0 4px 0',
                                      padding: 0,
                                      width: ulWidth
                                  });

        for (var i = bannerCount; i > 0; i--) {
            if (i == 1) {
                src = btnImgDir + 'btn_imgidx' + i + '_on.gif';
            } else {
                src = btnImgDir + 'btn_imgidx' + i + '.gif';
            }

            $('<li />').append(
                $('<img />').attr({
                    src: src,
                    alt: ''
                })
            ).prependTo(btnField);
        }

        btnField.append($('<div />').addClass('clear'));

        $('#img_index_btn').append(btnField);
        
        idxBtnList = $('#idxBtnList li');

        btnField.find('li').each(function(idx) {
            $(this).css({
                display: 'inline',
                marginLeft: '3px',
                float: 'left',
                listStyle: 'none',
                lineHeight: 0,
                cursor: 'pointer'
            });

            $(this).click(function() {

                if (!timer) return;

                bannerIndex = idx + 1;

                idxBtnList.each(function(idx2) {

                    if (idx2 != idx && $(this).find('img').attr('src').match(/_on/)) {
                        images[idx2].fadeOut(fadeTime);
                        $(this).find('img').attr('src',
                            $(this).find('img').attr('src').replace(/_on.gif/, '.gif'));
                    } else if (idx2 == idx && !$(this).find('img').attr('src').match(/_on/)) {
                        $(this).find('img').attr('src',
                            $(this).find('img').attr('src').replace(/.gif/, '_on.gif'));
                    }
                });

                timer = clearTimeout(timer);
                images[idx].fadeIn(fadeTime, rotateBanner);
            });
        });
    }

    function rotateBanner()
    {
        if (bannerIndex >= bannerCount) {
            bannerIndex = 0;
        }

        timer = setTimeout(function() {

            idxBtnList.each(function(idx) {
                if (idx == bannerIndex) {
                    $(this).find('img').attr('src',
                        $(this).find('img').attr('src').replace(/.gif/, '_on.gif'));
                    images[idx].fadeIn(fadeTime, rotateBanner);
                } else {
                    $(this).find('img').attr('src',
                        $(this).find('img').attr('src').replace(/_on.gif/, '.gif'));
                    images[idx].fadeOut(fadeTime);
                }
            });

            bannerIndex++;
        }, waitTime);
    }
});

})(jQuery);