$j(document).ready(function() {
    var objBanner = $j('#bottom_banner');
    var fadeInTime = 2000;
    var fadeOutTime = 2000;
    var waitTime = 5000;
    var objSection;
    var objChild;
    var objImg;

    $j.ajax({
        type: 'GET',
        url: '/xml/rotate_banner.xml',
        dataType: 'xml',
        success: function(xml) {
            $j(xml).find('section').each(function(idx) {
                objSection = $j('<div />').addClass('banner_section')
                                                    .attr('id', 'rotate_banner' + (idx + 1))
                                                    .css({'width': '237px',
                                                            'height': '100px',
                                                            'float': 'left',
                                                            'position': 'relative'});
                $j(this).find('banner').each(function(idx2) {
                    if (idx2 == 0) {
                        objImg = $j('<img />').attr('src', ($j(this).find('imgsrc').text()))
                                                         .attr('width', '237')
                                                         .attr('height', '100')
                                                         .attr('border', '0')
                                                         .addClass('fadein')
                                                         .css({'display': 'none'})
                                                         .fadeIn(fadeInTime);
                    } else {
                        objImg = $j('<img />').attr('src', ($j(this).find('imgsrc').text()))
                                                         .attr('width', '237')
                                                         .attr('height', '100')
                                                         .attr('border', '0')
                                                         .css({'display': 'none'});
                    }

                    objA = $j('<a />').attr('href', $j(this).find('url').text())
                                             .attr('target', $j(this).find('target').text())
                                             .attr('onclick', 'pageTracker._trackPageview(\'bottom_banner/' + $j(this).find('imgsrc').text().replace('img/', '') + '\');')
                                             .append(objImg);

                    objChild = $j('<div />').addClass('banner_child')
                                                     .css({'position': 'absolute'})
                                                     .append(objA);
                                                     
                    objRotateBanner = objSection.append(objChild);
                    objBanner.append(objRotateBanner);
                });
                if ((idx + 1) % 3 == 0) {
                    objBanner.append(
                        $j('<div />').css({'clear': 'both'})
                    );
                }
                setInterval("toggleBanner($j('#rotate_banner" + (idx + 1) +" .banner_child'), " + fadeInTime + "," + fadeOutTime + ")", waitTime);
            });
        }
    });
});

function toggleBanner(obj, fadeInTime, fadeOutTime)
{
    var size = obj.size();
    
    if (size <= 1) {
        return false;
    }

    obj.each(function() {
        if ($j(this).find('img').hasClass('fadein')) {
            $j(this).find('img')
                      .removeClass('fadein')
                      .fadeOut(fadeOutTime);

            if ($j(this).next().find('img').attr('src') == undefined) {
                obj.eq(0).find('img').addClass('fadein')
                                             .fadeIn(fadeInTime)
            } else {
                $j(this).next().find('img').addClass('fadein')
                                                   .fadeIn(fadeInTime);
            }
            return false;
        }
    });
}