jQuery.noConflict();
jQuery(function(){
    jQuery.ajax({
        type: "GET",
        url: "/contentwidget/config.xml",
        dataType: "xml",
        success: function(xml) {
            jQuery(xml).find('config').each(function(){
                var width = jQuery(this).find('size').attr('width');
                var height = jQuery(this).find('size').attr('height');
                var buttonHeight = jQuery(this).find('size').attr('buttonHeight');
                var delay = jQuery(this).find('delay').attr('seconds') * 1000;

                jQuery('#bannerWidget').css('width', width);
                jQuery('#bannerWidget').css('height', height);
            
                var buttonWidth = Math.floor(width / 3);

                var buttonsBarTopPosition = height - buttonHeight;
                jQuery('#bannerWidget').append('<div id="buttonsBar" style="position: absolute; left: 0; top: ' + buttonsBarTopPosition + 'px; height: ' + buttonHeight + 'px; overflow: hidden; z-index:1000;"></div>');

                var backgrounds = new Array();

                jQuery(this).find('section').each(function(){
                    var id = jQuery(this).attr('id');
                    var title = jQuery(this).find('title').text();
                    var body = jQuery(this).find('body').text();
                    var background = jQuery(this).find('background > normal').text();
                    var backgroundActive = jQuery(this).find('background > active').text();
                    var banner = jQuery(this).find('banner').text();
                    var bannerUrl = jQuery(this).find('url').text();

                    backgrounds[id] = new Array();
                    backgrounds[id]['normal'] = background;
                    backgrounds[id]['active'] = backgroundActive;

                    var buttonString = '<div class="bottomButton" mylocalid="' + id + '" style="width: ' + buttonWidth + 'px; height: ' + buttonHeight + 'px; float: left; background: url(\'' + background + '\') no-repeat; cursor: pointer;"><h2>' + title + '</h2><p>' + body + '</p></div>';
                    var bannerString = '<div class="banners" onClick="location.href=\'' + bannerUrl + '\'" style="width: ' + width +'px; height: ' + height + 'px; position: absolute; left: 0; top: 0; overflow: hidden; background: url(\'' + banner + '\') no-repeat; display: none; cursor: pointer;"></div>';

                    jQuery('#buttonsBar').append(buttonString);
                    jQuery('#bannerWidget').append(bannerString);
                })

                var autoClick = false;

                /* the event handler for buttons */
                jQuery('.bottomButton').click(function(){
                    if (!autoClick) {
                        window.clearInterval(myTimer);
                    }
                    autoClick = false;
                    jQuery('#buttonsBar > div').each(function(index){
                        jQuery(this).css('background','url(\'' + backgrounds[index]['normal'] +'\') no-repeat');
                    })

                    jQuery(this).css('background','url(\'' + backgrounds[jQuery(this).attr('mylocalid')]['active'] +'\') no-repeat');

                    var bannerNumber = parseInt(jQuery(this).attr('mylocalid')) + 1;

                    jQuery('.banners').fadeOut(500);
                    jQuery('#bannerWidget').children().eq(bannerNumber).fadeIn(500);
                })

                autoClick = true;
                jQuery('.bottomButton:eq(0)').click();

                var currentButton = 1;
                myTimer = window.setInterval(function(){
                    autoClick = true;
                    jQuery('.bottomButton:eq(' + currentButton + ')').click();
                    currentButton++;
                    if (currentButton == 3) {
                        currentButton = 0;
                    }
                }, delay);

            });
        },
        error: function() {
            alert('Could not load the XML configuration file');
        }
    });

});